uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Issue - 141 - Validate macro actions (#141) (#395)

Browse Source 
* Issue - 141 - Validate macro actions (#141)

* review: refactor validation logic based on each macro tab component emitted event

* review: mouse key macro invalid if any of the X, Y fields are empty

* review: apply review comments for shorthand if conditions and imports
This commit is contained in:
Attila Csanyi
2017-08-29 00:52:40 +02:00
committed by László Monda
parent ee93466a08
commit c73ecdbde9
12 changed files with 84 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/uhk-web/src/app/components/macro/action-editor/macro-action-editor.component.html
View File

@@ -29,17 +29,17 @@
</ul>
</div>
<div class="col-xs-12 col-lg-9 editor__tabs" [ngSwitch]="activeTab">
<macro-text-tab #tab *ngSwitchCase="TabName.Text" [macroAction]="editableMacroAction"></macro-text-tab>
<macro-key-tab #tab *ngSwitchCase="TabName.Keypress" [macroAction]="editableMacroAction"></macro-key-tab>
<macro-mouse-tab #tab *ngSwitchCase="TabName.Mouse" [macroAction]="editableMacroAction"></macro-mouse-tab>
<macro-delay-tab #tab *ngSwitchCase="TabName.Delay" [macroAction]="editableMacroAction"></macro-delay-tab>
<macro-text-tab #tab *ngSwitchCase="TabName.Text" [macroAction]="editableMacroAction" (valid)="onValid($event)"></macro-text-tab>
<macro-key-tab #tab *ngSwitchCase="TabName.Keypress" [macroAction]="editableMacroAction" (valid)="onValid($event)"></macro-key-tab>
<macro-mouse-tab #tab *ngSwitchCase="TabName.Mouse" [macroAction]="editableMacroAction" (valid)="onValid($event)"></macro-mouse-tab>
<macro-delay-tab #tab *ngSwitchCase="TabName.Delay" [macroAction]="editableMacroAction" (valid)="onValid($event)"></macro-delay-tab>
</div>
</div>
<div class="row">
<div class="col-xs-12 flex-button-wrapper editor__actions-container">
<div class="editor__actions">
<button class="btn btn-sm btn-default flex-button" type="button" (click)="onCancelClick()"> Cancel </button>
<button class="btn btn-sm btn-primary flex-button" type="button" (click)="onSaveClick()"> Save </button>
<button class="btn btn-sm btn-primary flex-button" type="button" (click)="onSaveClick()" [disabled]="!isSelectedMacroValid"> Save </button>
</div>
</div>
</div>

4
packages/uhk-web/src/app/components/macro/action-editor/macro-action-editor.component.ts
View File

@@ -38,6 +38,7 @@ export class MacroActionEditorComponent implements OnInit {
/* tslint:disable:variable-name: It is an enum type. So it can start with uppercase. */
TabName = TabName;
/* tslint:enable:variable-name */
isSelectedMacroValid = false;
ngOnInit() {
this.updateEditableMacroAction();
@@ -66,12 +67,15 @@ export class MacroActionEditorComponent implements OnInit {
}
}
onValid = (isMacroValid: boolean) => this.isSelectedMacroValid = isMacroValid;
selectTab(tab: TabName): void {
this.activeTab = tab;
if (tab === this.getTabName(this.macroAction)) {
this.updateEditableMacroAction();
} else {
this.editableMacroAction = undefined;
this.isSelectedMacroValid = false;
}
}

4
packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.html
View File

@@ -13,8 +13,8 @@
step="0.1"
placeholder="Delay amount"
class="form-control"
[attr.value]="delay"
(change)="setDelay($event)">
[value]="delay"
(change)="setDelay(macroDelayInput.value)">
</div>
</div>
<div class="row macro-delay__presets">

10
packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.ts
View File

@@ -8,6 +8,7 @@ import {
} from '@angular/core';
import { DelayMacroAction } from '../../../../../config-serializer/config-items/macro-action';
import { MacroBaseComponent } from '../macro-base.component';
const INITIAL_DELAY = 0.5; // In seconds
@@ -18,24 +19,29 @@ const INITIAL_DELAY = 0.5; // In seconds
host: { 'class': 'macro__delay' },
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MacroDelayTabComponent implements OnInit {
export class MacroDelayTabComponent extends MacroBaseComponent implements OnInit {
@Input() macroAction: DelayMacroAction;
@ViewChild('macroDelayInput') input: ElementRef;
delay: number;
presets: number[] = [0.3, 0.5, 0.8, 1, 2, 3, 4, 5];
constructor() { }
constructor() { super(); }
ngOnInit() {
if (!this.macroAction) {
this.macroAction = new DelayMacroAction();
}
this.delay = this.macroAction.delay > 0 ? this.macroAction.delay / 1000 : INITIAL_DELAY;
this.validate(); // initial validation as it has defaults
}
setDelay(value: number): void {
this.delay = value;
this.macroAction.delay = this.delay * 1000;
this.validate();
}
isMacroValid = () => this.macroAction.delay !== 0;
}

1
packages/uhk-web/src/app/components/macro/action-editor/tab/index.ts
View File

@@ -2,3 +2,4 @@ export { MacroDelayTabComponent } from './delay';
export { MacroKeyTabComponent } from './key';
export { MacroMouseTabComponent } from './mouse';
export { MacroTextTabComponent } from './text';
export { MacroBaseComponent } from './macro-base.component';

2
packages/uhk-web/src/app/components/macro/action-editor/tab/key/macro-key.component.html
View File

@@ -26,7 +26,7 @@
<h4 *ngIf="activeTab === TabName.Keypress">Press key</h4>
<h4 *ngIf="activeTab === TabName.Hold">Hold key</h4>
<h4 *ngIf="activeTab === TabName.Release">Release key</h4>
<keypress-tab #keypressTab [defaultKeyAction]="defaultKeyAction" [longPressEnabled]="false"></keypress-tab>
<keypress-tab #keypressTab [defaultKeyAction]="defaultKeyAction" [longPressEnabled]="false" (validAction)="validate()"></keypress-tab>
</div>
</div>
</div>

9
packages/uhk-web/src/app/components/macro/action-editor/tab/key/macro-key.component.ts
View File

@@ -3,6 +3,7 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { KeystrokeAction } from '../../../../../config-serializer/config-items/key-action';
import { KeyMacroAction, MacroSubAction } from '../../../../../config-serializer/config-items/macro-action';
import { KeypressTabComponent, Tab } from '../../../../popover/tab';
import { MacroBaseComponent } from '../macro-base.component';
enum TabName {
Keypress,
@@ -19,7 +20,7 @@ enum TabName {
],
host: { 'class': 'macro__mouse' }
})
export class MacroKeyTabComponent implements OnInit {
export class MacroKeyTabComponent extends MacroBaseComponent implements OnInit {
@Input() macroAction: KeyMacroAction;
@ViewChild('tab') selectedTab: Tab;
@ViewChild('keypressTab') keypressTab: KeypressTabComponent;
@@ -40,6 +41,7 @@ export class MacroKeyTabComponent implements OnInit {
selectTab(tab: TabName): void {
this.activeTab = tab;
this.validate();
}
getTabName(macroAction: KeyMacroAction): TabName {
@@ -71,4 +73,9 @@ export class MacroKeyTabComponent implements OnInit {
return keyMacroAction;
}
isMacroValid = () => {
const keyMacroAction = this.getKeyMacroAction();
return !!keyMacroAction.scancode || !!keyMacroAction.modifierMask;
}
}

14
packages/uhk-web/src/app/components/macro/action-editor/tab/macro-base.component.ts Normal file
View File

@@ -0,0 +1,14 @@
import { Output, EventEmitter } from '@angular/core';
export interface MacroValidator {
isMacroValid: () => boolean;
}
export abstract class MacroBaseComponent implements MacroValidator {
@Output() valid = new EventEmitter<boolean>();
abstract isMacroValid: () => boolean;
validate = () => this.valid.emit(this.isMacroValid());
}

8
packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.html
View File

@@ -40,11 +40,11 @@
<div class="form-horizontal">
<div class="form-group">
<label for="move-mouse-x">X</label>
<input id="move-mouse-x" type="number" class="form-control" [(ngModel)]="macroAction['x']"> pixels
<input id="move-mouse-x" type="number" class="form-control" [(ngModel)]="macroAction['x']" (keyup)="validate()"> pixels
</div>
<div class="form-group">
<label for="move-mouse-y">Y</label>
<input id="move-mouse-y" type="number" class="form-control" [(ngModel)]="macroAction['y']"> pixels
<input id="move-mouse-y" type="number" class="form-control" [(ngModel)]="macroAction['y']" (keyup)="validate()"> pixels
</div>
</div>
</div>
@@ -54,11 +54,11 @@
<div class="form-horizontal">
<div class="form-group">
<label for="scroll-mouse-x">X</label>
<input id="scroll-mouse-x" type="number" class="form-control" [(ngModel)]="macroAction['x']"> pixels
<input id="scroll-mouse-x" type="number" class="form-control" [(ngModel)]="macroAction['x']" (keyup)="validate()"> pixels
</div>
<div class="form-group">
<label for="scroll-mouse-y">Y</label>
<input id="scroll-mouse-y" type="number" class="form-control" [(ngModel)]="macroAction['y']"> pixels
<input id="scroll-mouse-y" type="number" class="form-control" [(ngModel)]="macroAction['y']" (keyup)="validate()"> pixels
</div>
</div>
</div>

22
packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.ts
View File

@@ -7,6 +7,7 @@ import {
MacroSubAction
} from '../../../../../config-serializer/config-items/macro-action';
import { Tab } from '../../../../popover/tab';
import { MacroBaseComponent } from '../macro-base.component';
type MouseMacroAction = MouseButtonMacroAction | MoveMouseMacroAction | ScrollMouseMacroAction;
@@ -27,7 +28,7 @@ enum TabName {
],
host: { 'class': 'macro__mouse' }
})
export class MacroMouseTabComponent implements OnInit {
export class MacroMouseTabComponent extends MacroBaseComponent implements OnInit {
@Input() macroAction: MouseMacroAction;
@ViewChild('tab') selectedTab: Tab;
@@ -39,6 +40,7 @@ export class MacroMouseTabComponent implements OnInit {
private selectedButtons: boolean[];
constructor() {
super();
this.buttonLabels = ['Left', 'Middle', 'Right'];
this.selectedButtons = Array(this.buttonLabels.length).fill(false);
}
@@ -65,6 +67,8 @@ export class MacroMouseTabComponent implements OnInit {
if (tab === this.getTabName(this.macroAction)) {
return;
} else {
this.selectedButtons = [];
}
switch (tab) {
@@ -79,11 +83,13 @@ export class MacroMouseTabComponent implements OnInit {
this.macroAction.action = this.getAction(tab);
break;
}
this.validate();
}
setMouseClick(index: number): void {
this.selectedButtons[index] = !this.selectedButtons[index];
(<MouseButtonMacroAction>this.macroAction).setMouseButtons(this.selectedButtons);
this.validate();
}
hasButton(index: number): boolean {
@@ -120,4 +126,18 @@ export class MacroMouseTabComponent implements OnInit {
return TabName.Move;
}
isMacroValid = () => {
switch (this.macroAction.constructor) {
case MoveMouseMacroAction:
case ScrollMouseMacroAction:
const { x, y } = this.macroAction as MoveMouseMacroAction;
return x !== undefined && x !== null && y !== undefined && y !== null;
case MouseButtonMacroAction:
const { mouseButtonsMask } = this.macroAction as MouseButtonMacroAction;
return !!mouseButtonsMask;
default:
return true;
}
}
}

5
packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.html
View File

@@ -1,5 +1,6 @@
<div>
<h4>Type text</h4>
<p>Input the text you want to type with this macro action.</p>
<textarea #macroTextInput name="macro-text" (change)="onTextChange()" class="macro__text-input">{{ macroAction.text }}</textarea>
</div>
<textarea #macroTextInput name="macro-text" (change)="onTextChange()"
(keyup)="validate()" class="macro__text-input">{{ macroAction?.text }}</textarea>
</div>

18
packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.ts
View File

@@ -9,6 +9,7 @@ import {
} from '@angular/core';
import { TextMacroAction } from '../../../../../config-serializer/config-items/macro-action';
import { MacroBaseComponent } from '../macro-base.component';
@Component({
selector: 'macro-text-tab',
@@ -16,16 +17,14 @@ import { TextMacroAction } from '../../../../../config-serializer/config-items/m
styleUrls: ['./macro-text.component.scss'],
host: { 'class': 'macro__text' }
})
export class MacroTextTabComponent implements OnInit, AfterViewInit {
export class MacroTextTabComponent extends MacroBaseComponent implements OnInit, AfterViewInit {
@Input() macroAction: TextMacroAction;
@ViewChild('macroTextInput') input: ElementRef;
constructor(private renderer: Renderer) {}
constructor(private renderer: Renderer) { super(); }
ngOnInit() {
if (!this.macroAction) {
this.macroAction = new TextMacroAction();
}
this.init();
}
ngAfterViewInit() {
@@ -33,7 +32,16 @@ export class MacroTextTabComponent implements OnInit, AfterViewInit {
}
onTextChange() {
this.init();
this.macroAction.text = this.input.nativeElement.value;
}
isMacroValid = () => !!this.input.nativeElement.value;
private init = () => {
if (!this.macroAction) {
this.macroAction = new TextMacroAction();
}
}
}