GUI2 fixed Quickhelp to use LionService
Change-Id: Id0799dd63de186ada17ec03380576d166947af19
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.css b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.css
index 26c1643..e6ef7b6 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.css
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.css
@@ -35,6 +35,7 @@
#quickhelp div.help table {
vertical-align: top;
+ width: 100%;
}
#quickhelp div.help p {
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.html b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.html
index d387284..5c1476a 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.html
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.html
@@ -20,140 +20,54 @@
<table class="qhrow">
<tr>
<td class="key">\</td>
- <td class="desc">Afficher/cacher l'aide rapide</td>
+ <td class="desc">{{lionFn("qh_hint_show_hide_qh")}}</td>
</tr>
<tr>
<td class="key">/</td>
- <td class="desc">Afficher/cacher l'aide rapide</td>
+ <td class="desc">{{lionFn("qh_hint_show_hide_qh")}}</td>
</tr>
<tr>
<td class="key">Esc</td>
- <td class="desc">ignorer la boîte de dialogue ou annuler les
- sélections
- </td>
+ <td class="desc">{{lionFn("qh_hint_esc")}}</td>
</tr>
<tr>
<td class="key">T</td>
- <td class="desc">basculer de thème</td>
+ <td class="desc">{{lionFn("qh_hint_t")}}</td>
</tr>
</table>
<hr class="qhrowsep">
<table class="qhrow">
- <tr>
- <td class="key">I</td>
- <td class="desc">Basculer au panneau de instance
- ONOS
- </td>
- <td class="key">O</td>
- <td class="desc">Baculer au panneau récapitulatif
- ONOS
- </td>
- <td class="key">D</td>
- <td class="desc">Basculer le panneau de détails</td>
- </tr>
- <tr>
- <td class="key">H</td>
- <td class="desc">Basculer la visibilité de l'hôte
- </td>
- <td class="key">M</td>
- <td class="desc">Basculer la visibilité hors-ligne
- </td>
- <td class="key">P</td>
- <td class="desc">Basculer le port mis en évidence
- </td>
- </tr>
- <tr>
- <td class="key">Dash</td>
- <td class="desc">Montrer les mauvais liens</td>
- <td class="key">B</td>
- <td class="desc">Basculer la carte géo de fond</td>
- <td class="key">G</td>
- <td class="desc">Sélectionner la carte géo de fond
- </td>
- </tr>
- <tr>
- <td class="key">S</td>
- <td class="desc">Toggle sprite layer</td>
- <td class="key" y="0">X</td>
- <td class="desc" y="0" x="33.53125">réinitialiser la
- carte des noeuds
- </td>
- <td class="key">Z</td>
- <td class="desc">Basculer la vue oblique
- (expérimental)
- </td>
- </tr>
- <tr>
- <td class="key">N</td>
- <td class="desc">cycle couche de noeuds</td>
- <td class="key">L</td>
- <td class="desc">Parcourir étiquettes appareils</td>
- <td class="key">Shift-l</td>
- <td class="desc">Parcourir étiquettes hôte</td>
- </tr>
- <tr>
- <td class="key">U</td>
- <td class="desc">survoler avec la souris</td>
- <td class="key">R</td>
- <td class="desc">réinitialiser le zoom et le
- panoramique
- </td>
- <td class="key">E</td>
- <td class="desc">Egaliser les rôles de maîtrises
- </td>
- </tr>
- <tr>
- <td class="key">Dot</td>
- <td class="desc">Basculer a la barre d'outils</td>
- <td class="key">0</td>
- <td class="desc">Annuler la surveillance du trafic
- </td>
- <td class="key">A</td>
- <td class="desc">Surveiller tout le trafic</td>
- </tr>
- <tr>
- <td class="key">F</td>
- <td class="desc">Afficher les flux de liaison de périphérique
- </td>
- <td class="key">V</td>
- <td class="desc">Show all related intents</td>
- <td class="key">L-arrow</td>
- <td class="desc">Show previous related intent</td>
- </tr>
- <tr>
- <td class="key">R-arrow</td>
- <td class="desc">Show next related intent</td>
- <td class="key">W</td>
- <td class="desc">Monitor traffic of selected intent</td>
+ <tr *ngFor="let vk of viewKeys; i as index">
+ <ng-container *ngFor="let vkrow of vk">
+ <td class="key">{{vkrow.keystroke}}</td>
+ <td class="desc">{{vkrow.text}}</td>
+ </ng-container>
</tr>
</table>
- <hr>
+ <hr class="qhrowsep">
<div class="qhrow">
<table class="qh-r4-c0">
<tr>
- <td class="key">cliquer</td>
+ <td class="key">{{lionFn("click")}}</td>
<td class="desc">Sélectionner l'article et montrer les
détails
</td>
</tr>
<tr>
- <td class="key">Cliquer sur MAJ</td>
- <td class="desc">Basculer l'état de sélection</td>
+ <td class="key">{{lionFn("shift-click")}}</td>
+ <td class="desc">{{lionFn("qh_gest_shift_click")}}</td>
</tr>
<tr>
- <td class="key">Glisser</td>
- <td class="desc">Repositionner (et épingler) le périphérique
- / l'hôte
- </td>
+ <td class="key">{{lionFn("drag")}}</td>
+ <td class="desc">{{lionFn("qh_gest_drag")}}</td>
</tr>
<tr>
- <td class="key">cmd défiler</td>
- <td class="desc">Zoom avant/arrière</td>
+ <td class="key">{{lionFn("drag")}}</td>
+ <td class="desc">{{lionFn("qh_gest_cmd_scroll")}}</td>
</tr>
<tr>
- <td class="key" y="48">cmd-glisser</td>
- <td class="desc" y="48" x="74.84375">Pan
- </tr>
+ <td class="key" y="48">{{lionFn("scroll")}}</td>
+ <td class="desc" y="48" x="74.84375">{{lionFn("qh_gest_cmd_drag")}}</tr>
</table>
</div>
</div>
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.spec.ts
index da60a1b..5dfb73c 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.spec.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.spec.ts
@@ -26,7 +26,19 @@
class MockFnService {}
class MockKeysService {
+ keyHandler: {
+ viewKeys: any[],
+ globalKeys: any[]
+ };
+ mockViewKeys: Object[];
+ constructor() {
+ this.mockViewKeys = [];
+ this.keyHandler = {
+ viewKeys: this.mockViewKeys,
+ globalKeys: this.mockViewKeys
+ };
+ }
}
/**
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.ts
index 6789e14..261f49c 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/quickhelp/quickhelp.component.ts
@@ -13,13 +13,17 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
import {animate, state, style, transition, trigger} from '@angular/animations';
import {LogService} from '../../log.service';
import {FnService} from '../../util/fn.service';
import {KeysService} from '../../util/keys.service';
import {LionService} from '../../util/lion.service';
+export interface KeyEntry {
+ keystroke: string;
+ text: string;
+}
@Component({
selector: 'onos-quickhelp',
@@ -38,9 +42,23 @@
])
]
})
-export class QuickhelpComponent {
+export class QuickhelpComponent implements OnInit {
lionFn; // Function
+ dialogKeys: Object;
+ globalKeys: Object[];
+ maskedKeys: Object;
+ viewGestures: Object;
+ viewKeys: KeyEntry[][];
+
+ private static extractKeyEntry(viewKeyObj: Object, log: LogService): KeyEntry {
+ const subParts = Object.values(viewKeyObj[1]);
+ return <KeyEntry>{
+ keystroke: <string>viewKeyObj[0],
+ text: <string>subParts[1]
+ };
+ }
+
constructor(
private log: LogService,
private fs: FnService,
@@ -53,10 +71,24 @@
} else {
this.doLion();
}
+ this.globalKeys = [];
+ this.viewKeys = [[], [], [], [], [], [], [], [], []];
- this.log.debug('Quickhelp component constructed');
+ this.log.debug('QuickhelpComponent constructed');
}
+ ngOnInit(): void {
+ Object.entries(this.ks.keyHandler.viewKeys)
+ .filter((vk) => vk[0] !== '_helpFormat' && vk[0] !== '9')
+ .forEach((vk, idx) => {
+ const ke = QuickhelpComponent.extractKeyEntry(vk, this.log);
+ this.viewKeys[Math.floor(idx / 3)][idx % 3] = ke;
+ });
+ this.log.debug('QuickhelpComponent initialized');
+ this.log.debug('view keys retrieved', this.ks.keyHandler.globalKeys);
+ }
+
+
/**
* Read the LION bundle for Toolbar and set up the lionFn
*/
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
+ ],
+ };
}
}