Merge pull request #121 from CalNourish/hotkeys

Hotkeys
CalNourish · Dec 13, 2019 · 34436e7 · 34436e7
2 parents 3d0ee75 + 7b24fa2
commit 34436e7
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 7 deletions.
diff --git a/public/pantry-volunteers/checkout/index.html b/public/pantry-volunteers/checkout/index.html
@@ -123,19 +123,19 @@ <h4>Please enter the amount, then scan the item to add it to the cart. Click "Ch
           <form id="checkout-item-form">
             <div class="form-group">
               <div class="col-xs-8">
-                <label for="amount">Amount</label>
+                <label for="amount">Amount (hotkey: Q)</label>
                 <input id="amount" name="amount" cols="5" rows="5" class="form-control" placeholder="default: 1"></input>
               </div>
               <div class="col-xs-8">
-                <label for="barcode" class="col-xs-4">Barcode</label>
+                <label for="barcode" class="col-xs-4">Barcode (hotkey: W)</label>
                 <input type="string" id="barcode" name="barcode" cols="20" rows="5" class="form-control"></input>
               </div>
               <br>
               <h3>Grocery List</h3>
               <h4>Total Amount: <span id="total-items">0</span></h4>
               <ol id="grocery-list">
               </ol>
-              <button id="backToCheckout" type="button" value="finished" class="btn btn-primary">Check Out</button>
+              <button id="backToCheckout" type="button" value="finished" class="btn btn-primary">Check Out (Shift + Enter)</button>
               <button id="undoLastItem" type="button" value="finished" class="btn btn-danger">UNDO</button>
 
             </div>

diff --git a/public/scripts/checkout.js b/public/scripts/checkout.js
@@ -1,6 +1,8 @@
 'use strict';
 
 var form = document.getElementById('checkout-item-form');
+var amount = document.getElementById('amount');
+var barcode = document.getElementById('barcode');
 var groceryList = document.querySelector('ol');
 var totalItems = document.getElementById("total-items")
 var finished = document.getElementById('backToCheckout');
@@ -12,8 +14,11 @@ undo.addEventListener("click", (e) => {
 });
 undo.style.visibility = 'hidden';
 
-
 finished.addEventListener("click", (e) => {
+  finishCheckout();
+})
+
+function finishCheckout() {
   if (groceryCart.length == 0) {
     return;
   }
@@ -39,12 +44,12 @@ finished.addEventListener("click", (e) => {
   undo.style.visibility = 'hidden'
   groceryCart = [];
   totalItems.textContent = '0'
-  e.preventDefault()
   if (groceryList.childElementCount > 0) {
     $('#grocery-list').empty();
     toastr.info('Checked out')
   }
-})
+  amount.select();
+}
 
 function checkoutItem(barcodeScanned, amount) {
   var amount = amount ? amount : 1;
@@ -108,12 +113,38 @@ function updateTotal(amount) {
   totalItems.textContent = currentAmount + scannedAmount
 }
 
+/*
+* Page-wide hotkeys
+* q - Amount field
+* w - Barcode field
+* Shift + Enter - checkout
+* numeric input anywhere not in a input field auto selects quantity
+*/
+document.onkeydown = function(e) {
+  if (e.which == 81) {
+    e.preventDefault();
+    amount.select();
+  } else if (e.which == 87) {
+    e.preventDefault();
+    barcode.select();
+  } else if (e.shiftKey && e.which == 13) {
+    e.preventDefault();
+    finishCheckout();
+  } else if (e.which >= 48 && e.which <= 57) {
+    // check we're not inside of an entry field
+    if (document.activeElement.tagName != "INPUT") {
+      amount.select();
+    }
+  }
+}
+
 form.addEventListener('keypress', function(e) {
+  console.log("we here")
   if (e.keyCode == 13) {
   	e.preventDefault();
     var barcodeScanned = document.getElementById('barcode');
     var amount = document.getElementById('amount');
-    if (barcodeScanned == "") {
+    if (barcodeScanned.value == "") {
       return;
     } 
     if (!amount.value) {