commit 7dd49955a40c558a4d0757473dbdcdba46f1bb28
author Filip Kujawa <filip.j.kujawa@gmail.com> Fri Dec 02 12:09:13 2022 -0800
committer Filip Kujawa <filip.j.kujawa@gmail.com> Sun Dec 04 13:08:27 2022 -0800
tree 794e9cf5359cdade8faa9908b59ad90d9f0215cc
parent 7281c3bc410de473b8f3f12ce83a489518f76487

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

scouting/www/notes/notes.component.ts

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,

scouting/www/notes/notes.ng.html

diff --git a/scouting/www/notes/notes.ng.html b/scouting/www/notes/notes.ng.html
index af48fd9..a9c8b92 100644
--- a/scouting/www/notes/notes.ng.html
+++ b/scouting/www/notes/notes.ng.html
@@ -29,9 +29,19 @@
           <div><h3>{{team.teamNumber}}</h3></div>
         </div>
         <div class="">
+          <!--
+          Note Input Text Areas.
+          ID property is used for keyboard shorcuts to focus
+          on the corresponding text area.
+          The data-toggle and title properties are
+          used for bootstrap tooltips.
+          -->
           <textarea
             class="text-input"
+            id="text-input-{{i+1}}"
             [(ngModel)]="newData[i].notesData"
+            data-toggle="tooltip"
+            title="Ctrl + {{i+1}}"
           ></textarea>
         </div>
         <!--Key Word Checkboxes-->