GUI2 fixed Quickhelp to use LionService
Change-Id: Id0799dd63de186ada17ec03380576d166947af19
diff --git a/web/gui2-fw-lib/src/app/app.component.html b/web/gui2-fw-lib/src/app/app.component.html
index 2cc727e..9d66610 100644
--- a/web/gui2-fw-lib/src/app/app.component.html
+++ b/web/gui2-fw-lib/src/app/app.component.html
@@ -44,6 +44,5 @@
If you change anything in the library, you will have to build it again before
it is picked up in this app.
</p>
-<onos-quickhelp></onos-quickhelp>
-<onos-loading [running]="loadingRunning"></onos-loading>
-<button (click)="toggleLoadingRunning()">Toggle loading image</button>
+<onos-quickhelp #qh></onos-quickhelp>
+<button (click)="qh.ks.quickHelpShown = true">Toggle quick help shown</button>
diff --git a/web/gui2-fw-lib/src/app/app.component.ts b/web/gui2-fw-lib/src/app/app.component.ts
index a5a5450..5e934d4 100644
--- a/web/gui2-fw-lib/src/app/app.component.ts
+++ b/web/gui2-fw-lib/src/app/app.component.ts
@@ -15,7 +15,7 @@
*/
import {Component} from '@angular/core';
-import {FnService, LogService} from 'gui2-fw-lib';
+import {FnService, KeysService, LogService} from 'gui2-fw-lib';
@Component({
selector: 'app-root',
@@ -23,16 +23,78 @@
styleUrls: ['./app.component.css']
})
export class AppComponent {
- title = 'Test app for GUI Framework Library';
- loadingRunning: boolean = false;
+ title = 'Test app for GUI Framework Library';
+ loadingRunning: boolean = false;
- constructor(
- protected fs: FnService
- ) {
- this.title = this.fs.cap(this.title);
- }
+ constructor(
+ protected fs: FnService,
+ protected ks: KeysService,
+ protected log: LogService
+ ) {
+ this.title = this.fs.cap(this.title);
+ this.bindCommands();
+ this.log.debug('AppComponent constructed');
+ }
- toggleLoadingRunning() {
- this.loadingRunning = !this.loadingRunning;
+ bindCommands(additional?: any) {
+
+ const am = this.actionMap();
+ const add = this.fs.isO(additional);
+
+ this.ks.keyBindings(am);
+
+ this.ks.gestureNotes([
+ ['click', 'Select the item and show details'],
+ ['shift-click', 'Toggle selection state'],
+ ['drag', 'Reposition (and pin) device / host'],
+ ['cmd-scroll', 'Zoom in / out'],
+ ['cmd-drag', 'Pan'],
+ ]);
+ }
+
+
+ showKeyStroke(letter: string, token?: string) {
+ this.log.debug('Key pressed', letter);
+ }
+
+ actionMap() {
+ return {
+ A: [() => {this.showKeyStroke('A'); }, 'Monitor all traffic'],
+ B: [(token) => {this.showKeyStroke('B', token); }, 'Toggle background'],
+ D: [(token) => {this.showKeyStroke('D', token); }, 'Toggle details panel'],
+ E: [() => {this.showKeyStroke('E'); }, 'Equalize mastership roles'],
+ H: [() => {this.showKeyStroke('H'); }, 'Toggle host visibility'],
+ I: [(token) => {this.showKeyStroke('I', token); }, 'Toggle ONOS Instance Panel'],
+ G: [() => {this.showKeyStroke('G'); }, 'Show map selection dialog'],
+ L: [() => {this.showKeyStroke('L'); }, 'Cycle device labels'],
+ M: [() => {this.showKeyStroke('M'); }, 'Toggle offline visibility'],
+ O: [() => {this.showKeyStroke('O'); }, 'Toggle the Summary Panel'],
+ P: [(token) => {this.showKeyStroke('P', token); }, 'Toggle Port Highlighting'],
+ Q: [() => {this.showKeyStroke('Q'); }, 'Cycle grid display'],
+ R: [() => {this.showKeyStroke('R'); }, 'Reset pan / zoom'],
+ U: [() => {this.showKeyStroke('U'); }, 'Unpin or freeze nodes'],
+ X: [() => {this.showKeyStroke('X'); }, 'Reset Node Location'],
+ dot: [() => {this.showKeyStroke('.'); }, 'Toggle Toolbar'],
+ 0: [() => {this.showKeyStroke('0'); }, 'Cancel traffic monitoring'],
+ 'shift-L': [() => {this.showKeyStroke('shift-L'); }, 'Cycle host labels'],
+
+ esc: [() => {this.showKeyStroke('Esc'); }, 'Cancel commands'],
+
+ // TODO update after adding in Background Service
+ // topology overlay selections
+ // F1: function () { t2tbs.fnKey(0); },
+ // F2: function () { t2tbs.fnKey(1); },
+ // F3: function () { t2tbs.fnKey(2); },
+ // F4: function () { t2tbs.fnKey(3); },
+ // F5: function () { t2tbs.fnKey(4); },
+ //
+ // _keyListener: t2tbs.keyListener.bind(t2tbs),
+
+ _helpFormat: [
+ ['I', 'O', 'D', 'H', 'M', 'P', 'dash', 'B'],
+ ['X', 'Z', 'N', 'L', 'shift-L', 'U', 'R', 'E', 'dot'],
+ [], // this column reserved for overlay actions
+ ],
+ };
}
}