import { ChangeDetectionStrategy , Component , ElementRef , Input , OnChanges , OnDestroy , Renderer2 , SimpleChanges , ViewChild } from '@angular/core' ; import { Keymap } from 'uhk-common' ; import { Subscription } from 'rxjs' ; import { Store } from '@ngrx/store' ; import { IconDefinition } from '@fortawesome/fontawesome-common-types' ; import { faCopy , faKeyboard , faStar as faSolidStar , faTrash } from '@fortawesome/free-solid-svg-icons' ; import { faStar as faRegularStar } from '@fortawesome/free-regular-svg-icons' ; import { AppState , extraLEDCharactersSupported } from '../../../store' ; import { DuplicateKeymapAction , EditKeymapAbbreviationAction , EditKeymapNameAction , RemoveKeymapAction , SetDefaultKeymapAction } from '../../../store/actions/keymap' ; import * as util from '../../../util' ; import { AutoGrowInputComponent } from '../../auto-grow-input' ; const DEFAULT_TRASH_TITLE = 'Delete keymap' ; @ Component ( { selector : 'keymap-header' , templateUrl : './keymap-header.component.html' , styleUrls : [ './keymap-header.component.scss' ] , changeDetection : ChangeDetectionStrategy . OnPush } ) export class KeymapHeaderComponent implements OnChanges , OnDestroy { @ Input ( ) keymap : Keymap ; @ Input ( ) deletable : boolean ; @ ViewChild ( 'abbr' , { static : true } ) keymapAbbr : ElementRef < HTMLInputElement > ; @ ViewChild ( AutoGrowInputComponent , { static : true } ) keymapName : AutoGrowInputComponent ; starTitle : string ; starIcon : IconDefinition ; trashTitle : string = DEFAULT_TRASH_TITLE ; faKeyboard = faKeyboard ; faCopy = faCopy ; faTrash = faTrash ; private subscriptions = new Subscription ( ) ; private extraLEDCharactersSupported = false ; constructor ( private store , private renderer ) { this . subscriptions . add ( this . store . select ( extraLEDCharactersSupported ) . subscribe ( value => this . extraLEDCharactersSupported = value ) ) ; } ngOnChanges ( changes ) { if ( changes [ 'keymap' ] ) { this . setKeymapTitle ( ) ; this . setAbbreviation ( ) ; this . keymapName . writeValue ( changes . keymap . currentValue . name ) ; } if ( changes [ 'deletable' ] ) { this . setTrashTitle ( ) ; } } ngOnDestroy ( ) { this . subscriptions . unsubscribe ( ) ; } setDefault ( ) { if ( ! this . keymap . isDefault ) { this . store . dispatch ( new SetDefaultKeymapAction ( this . keymap . abbreviation ) ) ; } } removeKeymap ( ) { if ( this . deletable ) { this . store . dispatch ( new RemoveKeymapAction ( this . keymap . abbreviation ) ) ; } } duplicateKeymap ( ) { this . store . dispatch ( new DuplicateKeymapAction ( this . keymap ) ) ; } editKeymapName ( name ) { if ( ! util . isValidName ( name ) ) { return ; } this . store . dispatch ( new EditKeymapNameAction ( { abbr : this . keymap . abbreviation , name } ) ) ; } editKeymapAbbr ( newAbbr ) { const regexp = this . extraLEDCharactersSupported ? new RegExp ( /^[a-zA-Z\d$+\-*/|\\<>?_'",`@={} ]{1,3}$/g ) : new RegExp ( /^[a-zA-Z\d]{1,3}$/g ) ; if ( newAbbr . trim ( ) . length === 0 || ! regexp . test ( newAbbr ) ) { this . setAbbreviation ( ) ; return ; } newAbbr = newAbbr . toUpperCase ( ) ; this . store . dispatch ( new EditKeymapAbbreviationAction ( { name : this . keymap . name , abbr : this . keymap . abbreviation , newAbbr } ) ) ; } setKeymapTitle ( ) { if ( this . keymap . isDefault ) { this . starTitle = 'This is the default keymap which gets activated when powering the keyboard.' ; this . starIcon = faSolidStar ; } else { this . starTitle = 'Makes this keymap the default keymap which gets activated when powering the keyboard.' ; this . starIcon = faRegularStar ; } } setTrashTitle ( ) { this . trashTitle = this . deletable ? DEFAULT_TRASH_TITLE : 'The last keymap cannot be deleted.' ; } private setAbbreviation ( ) { this . renderer . setProperty ( this . keymapAbbr . nativeElement , 'value' , this . keymap . abbreviation ) ; } }