Scouting App: Add keyboard shortcuts for note scouting
With keyboard shortcuts, note scouts don't have to stop watching the match
to switch between textboxes, they can just do Ctrl + 1/2/3 to switch
to the corresponding textbox.
Hovering over the textbox, will display a tooltip with the
shortcut to switch to that textbox.
Signed-off-by: Filip Kujawa <filip.j.kujawa@gmail.com>
Change-Id: I49ba0c611468cf013817b32b8c1e9d9258cfdb1b
diff --git a/scouting/www/notes/notes.component.ts b/scouting/www/notes/notes.component.ts
index 86df425..00faddd 100644
--- a/scouting/www/notes/notes.component.ts
+++ b/scouting/www/notes/notes.component.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, HostListener} from '@angular/core';
import {Builder, ByteBuffer} from 'flatbuffers';
import {ErrorResponse} from 'org_frc971/scouting/webserver/requests/messages/error_response_generated';
import {RequestNotesForTeam} from 'org_frc971/scouting/webserver/requests/messages/request_notes_for_team_generated';
@@ -83,6 +83,29 @@
// Includes the team number, notes, and keyword selection.
newData: Input[] = [];
+ // Keyboard shortcuts to switch between text areas.
+ // Listens for Ctrl + number and focuses on the
+ // corresponding textbox.
+ // More Info: https://angular.io/api/core/HostListener
+
+ @HostListener('window:keyup', ['$event'])
+ onEvent(event: KeyboardEvent) {
+ if (event.ctrlKey) {
+ if (event.code.includes('Digit')) {
+ this.handleFocus(event.key);
+ }
+ }
+ }
+
+ handleFocus(digit: string) {
+ let textArea = <HTMLInputElement>(
+ document.getElementById('text-input-' + digit)
+ );
+ if (textArea != null) {
+ textArea.focus();
+ }
+ }
+
setTeamNumber() {
let data: Input = {
teamNumber: this.teamNumberSelection,