Final commit

.firebase/hosting.ZGlzdA.cache

@@ -1,40 +1,43 @@
-404.html,1580953119991,b7bab6b83fa074653ff28c8d2a64135d3434575f70a12ab3d3ba8080461b9537
-index.html,1580953119991,efc738d62b142fd89b9f4bea568bbfac6ab3bae8962e18db3bdcf764ebfa6971
-favicon.ico,1580953119991,e0535b2041a7a1721cdec785c903980d41fdf0d810a4ea9726b6ffd1371bbc28
-manifest.json,1580953119991,4b602cea529bd96a99a39067e27a30461795de61e5492898f527f7a4e2ee5778
-precache-manifest.2ea3678dd7d43bfacc3ceb1db45001f5.js,1580953119999,290ec4d837f94c14ca696942116e8a2c0defa16af21595818b45179749090eeb
-robots.txt,1580953119999,f30c4a1c220bd92c487bf016c9b4f4e6959c4c54f82c64c54ee375b1f0189156
-service-worker.js,1580953119999,9dd952d187e15fe28d1d257c8a009cc846ed1dc9f44b8814404578b2a95850c7
-css/app.c8031171.css,1580953119979,154d1449b571721cca944375ad99743f7263aac090a09e3c0971289f1d24b6fb
-css/chunk-3e38d1d7.18a58534.css,1580953119991,074e0a3dbe59587c51649dc661e50b3011fc7185af24a4f444fe9982bbfef348
-css/chunk-e059f628.5887afa0.css,1580953119991,f042b5a5bda32ce7d79cd1cd0fd43fad1321e8f5bcf79a08606381e04fa36591
-css/chunk-f119b278.7d1dfa3d.css,1580953119991,b6bf4371e6fe1b28b16ebddc71c3a256c55b07060ad30a7798d4a4b7d2b1a379
-css/menu.32580f10.css,1580953119991,2e967220e25d5c5a20d80d224df60744fc6b72b340d54fa010709b6da9efbd8a
-img/icons/android-chrome-192x192.png,1580953119999,7bf5d00aade14cdbd9266476979eb376b1a221fac21bbcd540a9947384851978
-img/icons/apple-touch-icon-120x120.png,1580953119999,d31f44d26594559cdf6c57f7f651d8e2ab1ac312e9b8b033b3339f60717dc351
-img/icons/apple-touch-icon-152x152.png,1580953119999,56ee37cd4e4baa3ede37e90b9005e50747fb711603bad18cc642d1f983c06763
-img/icons/apple-touch-icon-180x180.png,1580953119999,ccee97a725d3530f4a8111d58e0f61f94fadf4f6fb6468c4aef748c6bd649670
-img/icons/apple-touch-icon-60x60.png,1580953119999,f47f70c16bc06df8c393c0e213a316dcfb9720677a8ee09b4b690b3d8170b0b1
-img/icons/apple-touch-icon-76x76.png,1580953119999,081d64e417bfa5a36b47ae153551dff60f3806c1446a094e5d9ead01aa275f96
-img/icons/favicon-16x16.png,1580953119999,61c3d70ea4950e5c5cde41ef352a8d38a309083b3a1bb0739d5a76fe4908963a
-img/icons/apple-touch-icon.png,1580953119999,999885b8893de7fb4b1dccd21b07f0d9c6aa337b85ea501f6ec87b54cfe323d0
-img/icons/favicon-32x32.png,1580953119999,0b88c724af5f8c9ac5edfcef209e8f8cab39a9e0048f6a6902f2aba55f45fda0
-img/icons/msapplication-icon-144x144.png,1580953119999,97a4df445a8b6f4266282a93342cd85326166571466ef0203171cd32b44a2022
-img/icons/mstile-150x150.png,1580953119999,4b854eb04911280c094681a76878dba4e8038aeaa70c8e2bb89267cb754109d8
-js/chunk-3e38d1d7.1dea9b72.js,1580953119991,016c0f7cf468a6cd83b341890aeb74e306c98e2aaa446948e3f50df8187e515f
-img/icons/safari-pinned-tab.svg,1580953119999,7a4ef0f00e8d04eb94d7884fd212c3d6523444777b3046e7130bff649ddeb40a
-js/chunk-e059f628.36ae7634.js,1580953119991,4299992bcbea0225457e3b43bb3fb49f5f1ac81fead80731de91350601188052
-js/app.bd7a5d8d.js,1580953119979,aade441130ab6fac59e94ce0cb0be9961e1bfb9c81cd8608e7e445d38d240620
-js/chunk-f119b278.acb04310.js,1580953119991,20f46a3d48bc5bc1848ce0da774242c4e04dd074fd51dda6363f1b150100069a
-js/chunk-3e38d1d7.1dea9b72.js.map,1580953119991,42cd2cbd99adfbad8afab6e224943f26a9c3ed44e39a834b1df9688364124b1c
-js/menu.5e1aef7a.js,1580953119991,89b45b8a07e6c44aa5fcbb2c372775d94ff0e927259954bca4e2821ed3beb349
-js/chunk-e059f628.36ae7634.js.map,1580953119999,80fd13808c2ce3b2ce5052d91470ca24a384a04135b4396ec1cab80f3dc54bbe
-js/chunk-f119b278.acb04310.js.map,1580953119999,80e4f60c3c5e1bafbbfeda71295e9f56cc45a62970f1b93f404163c7c5a92a29
-js/menu.5e1aef7a.js.map,1580953119999,10301c091b92d9d5b462e320c0eb00e838dfb36173b77a9a13cb89bb1a4cc165
-js/prediction.225f70e0.js,1580953119991,43dcd38f010dc4820741522d5813ac5d793fd65f367b1ca1b85d3339038d6dfb
-js/prediction.225f70e0.js.map,1580953119999,bebe6111ac9829cd4950d263669ce3daf4b45f17b6dc0cbf59b572502cceb955
-img/icons/android-chrome-512x512.png,1580953119999,b306de640c0dbb4ad7a7a6467455bbda02efdea7eae33a8e861876dc13c888e5
-js/app.bd7a5d8d.js.map,1580953119991,2dba4fcde6b8957e72fb13109db570c41e15f486e3f984afb70f66049b460773
-css/chunk-vendors.c283d135.css,1580953119991,cd0b4e23a6a2d5adb5c4cea7a6be56eece2c59110461d180d9ad2d8602832ae2
-js/chunk-vendors.c6a921a5.js,1580953119991,074f50096d49ca0044822b020d7be3ea063c6a0bca6b277dfec2f5718dfb9c67
-js/chunk-vendors.c6a921a5.js.map,1580953119999,2af5b72ec9f6501a9ee7a28f1a990b99d965bacd38635701ddcf44cd1d53cc9d
+404.html,1581076514663,b7bab6b83fa074653ff28c8d2a64135d3434575f70a12ab3d3ba8080461b9537
+manifest.json,1581076514663,4b602cea529bd96a99a39067e27a30461795de61e5492898f527f7a4e2ee5778
+index.html,1581076514663,bdebb682d97c0e3ebcfeb1897a1ace565749929381cfd75df7c1a55a1e95c898
+favicon.ico,1581076514663,e0535b2041a7a1721cdec785c903980d41fdf0d810a4ea9726b6ffd1371bbc28
+precache-manifest.6257396c1be9d93e321a0dd50e614137.js,1581076514679,9cd2c7f7f44861057d078f22d381d630f4f339b185c63b7b36242d5d2cf9a923
+robots.txt,1581076514679,f30c4a1c220bd92c487bf016c9b4f4e6959c4c54f82c64c54ee375b1f0189156
+service-worker.js,1581076514679,c077b87a689bb88c7e9434e696e25bef7ba08ba46c7a4f2f3568e571c816548f
+css/app.70233f57.css,1581076514651,2d021af260ba71d9c80f90f7d835e0769add7c6a4d70d6d2afb4ff24b4bf434e
+css/chunk-5265479d.b362fae2.css,1581076514663,0b0d72e698eeb4c07b333ad97156a517ff6e7b27baa4a1cc8bd7a308454f3c2a
+css/chunk-6303efb0.4cca2cd7.css,1581076514663,6b6673f810f7267f632f136263cbb72f3b4ee0fc8a970ac884acc6ac4ce7cf62
+css/chunk-e9f4a54c.0a56c4a8.css,1581076514663,932e3a382679dd7552ec656bc8e49d8fcca039a9a112f81952059910a7334f88
+css/menu.81c66b96.css,1581076514663,cb12a86a10c9dd35cb52e918d29a3bdf161c54015195102f13a8c863a61f0be6
+css/results.32580f10.css,1581076514663,2e967220e25d5c5a20d80d224df60744fc6b72b340d54fa010709b6da9efbd8a
+img/icons/android-chrome-192x192.png,1581076514679,7bf5d00aade14cdbd9266476979eb376b1a221fac21bbcd540a9947384851978
+img/icons/apple-touch-icon-120x120.png,1581076514679,d31f44d26594559cdf6c57f7f651d8e2ab1ac312e9b8b033b3339f60717dc351
+img/icons/apple-touch-icon-152x152.png,1581076514679,56ee37cd4e4baa3ede37e90b9005e50747fb711603bad18cc642d1f983c06763
+img/icons/apple-touch-icon-180x180.png,1581076514679,ccee97a725d3530f4a8111d58e0f61f94fadf4f6fb6468c4aef748c6bd649670
+img/icons/apple-touch-icon-60x60.png,1581076514679,f47f70c16bc06df8c393c0e213a316dcfb9720677a8ee09b4b690b3d8170b0b1
+img/icons/apple-touch-icon-76x76.png,1581076514679,081d64e417bfa5a36b47ae153551dff60f3806c1446a094e5d9ead01aa275f96
+img/icons/apple-touch-icon.png,1581076514679,999885b8893de7fb4b1dccd21b07f0d9c6aa337b85ea501f6ec87b54cfe323d0
+img/icons/favicon-16x16.png,1581076514679,61c3d70ea4950e5c5cde41ef352a8d38a309083b3a1bb0739d5a76fe4908963a
+img/icons/favicon-32x32.png,1581076514679,0b88c724af5f8c9ac5edfcef209e8f8cab39a9e0048f6a6902f2aba55f45fda0
+img/icons/msapplication-icon-144x144.png,1581076514679,97a4df445a8b6f4266282a93342cd85326166571466ef0203171cd32b44a2022
+img/icons/mstile-150x150.png,1581076514679,4b854eb04911280c094681a76878dba4e8038aeaa70c8e2bb89267cb754109d8
+js/app.89cee72e.js,1581076514651,93e16a374148ae355987eb8a162bb198700ffcbc949debb03ca9a90b384a3f58
+js/chunk-5265479d.186b97c6.js,1581076514663,658a9eeb2e2a98e01eee268277031cd271e716fa6c818af0777126db55394f3b
+js/chunk-5265479d.186b97c6.js.map,1581076514663,4008d15d8573547aa94ef332e04081b24389c4a1c9d6812f7a3f175d0db69bf7
+js/chunk-6303efb0.e6ca5728.js,1581076514663,9992d105f3e33575db95b4a1c71d9b540dc67ba63598b867e2c40dae51476f75
+js/chunk-6303efb0.e6ca5728.js.map,1581076514675,fc2b6676a560e7c85357fc457b9b72521c4db60734547971e3f66794a6478bd5
+img/icons/safari-pinned-tab.svg,1581076514679,7a4ef0f00e8d04eb94d7884fd212c3d6523444777b3046e7130bff649ddeb40a
+js/chunk-e9f4a54c.a0c6bb61.js.map,1581076514675,438cf663c28b7a03fafb42ba80cf373619153879d8827bb6cb5764ebbdc3280f
+js/menu.c5a98769.js,1581076514663,bf6a8592eda19be234866d19eb0ed991e5ab288edcb343048a00c2de09c24060
+js/chunk-e9f4a54c.a0c6bb61.js,1581076514663,8458a471c52cbda0aa0fc26eb57fc98a71458745113fa5612d0f4a8efc466de4
+js/menu.c5a98769.js.map,1581076514679,768575c41dc0f9238e26566a8403d36485ed17e08c5fc9ccf039237e9b53c2c9
+js/orders.92b7ff22.js,1581076514663,cddb5ab51e9182074428e39c16e34fad13e2a654d9014ad625c213383531a6ee
+js/orders.92b7ff22.js.map,1581076514679,ddc56910ad8c71b3425a95d0cc77d49893d1415253936bf55f086307caef5765
+js/results.3467554c.js,1581076514663,e93651230757e78aaf7473bf05552cd11839b57df5ed3708ed348d5ec80736b1
+js/results.3467554c.js.map,1581076514679,122434cb8b379f71ecccb975aa715d49367014322be5c07bf66a7ee584c6bd2f
+img/icons/android-chrome-512x512.png,1581076514679,b306de640c0dbb4ad7a7a6467455bbda02efdea7eae33a8e861876dc13c888e5
+js/app.89cee72e.js.map,1581076514663,d8c49524d7a92e941395dd16936b3b7d99d81ac8f8c4a26e3ead4be0c7b2f1e2
+css/chunk-vendors.c283d135.css,1581076514663,cd0b4e23a6a2d5adb5c4cea7a6be56eece2c59110461d180d9ad2d8602832ae2
+js/chunk-vendors.291bb002.js,1581076514663,0b215be4ff8ccf6f909cc16dce025925b6b24478d90f95912b277e84ffed2184
+js/chunk-vendors.291bb002.js.map,1581076514679,54823dd7a623be1a6268ea89cf2615a4f357f2b6e44ee031ec28358fddf89f91

package.json

@@ -9,6 +9,7 @@
     "deploy": "firebase deploy"
   },
   "dependencies": {
+    "axios": "^0.19.2",
     "core-js": "^3.3.2",
     "firebase": "^7.5.0",
     "register-service-worker": "^1.6.2",

src/App.vue

@@ -11,9 +11,12 @@
 
       <v-spacer></v-spacer>
 
-      <v-tabs background-color="transparent" right>
+      <v-tabs background-color="transparent" right v-model="tab">
         <v-tab
-          @click="$router.push('/')"
+          key="tab-1"
+          to="/"
+          ripple
+          value="Home"
           :class="{
             'without-padding': $isMobile() || $vuetify.breakpoint.smAndDown
           }"
@@ -23,32 +26,28 @@
             <v-icon>mdi-home</v-icon>
           </template>
         </v-tab>
-        <v-tab @click="$router.push('/orders')">
+        <v-tab key="tab-2" to="/orders" ripple value="Orders">
           <template v-if="!$isMobile() || $vuetify.breakpoint.mdAndUp">Orders</template>
           <template v-else>
             <v-icon>mdi-receipt</v-icon>
           </template>
         </v-tab>
-        <v-tab @click="$router.push('/results')">
-          <template v-if="!$isMobile() || $vuetify.breakpoint.mdAndUp">Results</template>
+        <v-tab key="tab-3" to="/menu" ripple value="Menu">
+          <template v-if="!$isMobile() || $vuetify.breakpoint.mdAndUp">Menu</template>
           <template v-else>
             <v-icon>mdi-menu</v-icon>
           </template>
         </v-tab>
-        <v-tab @click="$router.push('/menu')">
-          <template v-if="!$isMobile() || $vuetify.breakpoint.mdAndUp">Menu</template>
+        <v-tab key="tab-4" to="/results" ripple value="Results">
+          <template v-if="!$isMobile() || $vuetify.breakpoint.mdAndUp">Results</template>
           <template v-else>
             <v-icon>mdi-menu</v-icon>
           </template>
         </v-tab>
       </v-tabs>
 
       <v-btn icon @click="toggleFullscreen()">
-        <v-icon>
-          {{
-          fullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen"
-          }}
-        </v-icon>
+        <v-icon>{{ fullscreen ? "mdi-fullscreen-exit" : "mdi-fullscreen" }}</v-icon>
       </v-btn>
       <v-toolbar-items>
         <v-dialog v-model="dialog" width="500">
@@ -64,15 +63,15 @@
 
               <v-card-text>
                 <v-text-field
-                  v-model="deviceHostProvisional"
-                  label="Device Host"
+                  v-model="backendURLProvisional"
+                  label="Backend URL"
                   required
                   outlined
                   dense
                 ></v-text-field>
                 <v-text-field
-                  v-model="cameraStreamHostProvisional"
-                  label="Camera Stream Host"
+                  v-model="cameraStreamURLProvisional"
+                  label="Camera Stream URL"
                   required
                   outlined
                   dense
@@ -131,9 +130,10 @@ export default {
   mixins: [DatabaseMixin, FullscreenMixin],
   data() {
     return {
+      tab: this.$route.name,
       dialog: false,
-      deviceHostProvisional: "",
-      cameraStreamHostProvisional: ""
+      backendURLProvisional: "",
+      cameraStreamURLProvisional: ""
     };
   },
   computed: {
@@ -146,8 +146,8 @@ export default {
     settings: {
       immediate: true,
       handler(newVal) {
-        this.deviceHostProvisional = newVal.deviceHost;
-        this.cameraStreamHostProvisional = newVal.cameraStreamHost;
+        this.backendURLProvisional = newVal.backendURL;
+        this.cameraStreamURLProvisional = newVal.cameraStreamURL;
         console.log("Updated settings:", newVal);
       }
     },
@@ -176,8 +176,8 @@ export default {
       const collectionRefSettings = database.collection("settings");
 
       const data = {
-        deviceHost: this.deviceHostProvisional,
-        cameraStreamHost: this.cameraStreamHostProvisional
+        backendURL: this.backendURLProvisional,
+        cameraStreamURL: this.cameraStreamURLProvisional
       };
 
       this.updateDoc(collectionRefSettings, "PwmSaP1FUxeigoq4xKte", data);
@@ -193,7 +193,7 @@ body {
 }
 
 .app-view {
-  height: 100%;
+  height: calc(100vh - 64px) !important;
 }
 
 .app-view h1 {
@@ -213,6 +213,11 @@ body {
   padding-right: 6px;
 }
 
+/* .app-grid-container {
+  height: calc(100vh - 64px - 100px) !important;
+  overflow: auto;
+} */
+
 /***************************custom scrollbar css********************************/
 
 /* Turn on custom 8px wide scrollbar */

src/components/AppNotification.vue

@@ -6,8 +6,8 @@
     :timeout="timeoutMs"
     :multi-line="multiLine"
     :vertical="vertical"
-    top
-    right
+    bottom
+    centered
     class="app-notification"
   >
     {{ text }}
@@ -167,8 +167,8 @@ export default {
 </script>
 
 <style>
-.app-notification {
+/* .app-notification {
   position: absolute !important;
   top: 80px !important;
-}
+} */
 </style>

src/components/ItemsList.vue

@@ -10,6 +10,15 @@
     </v-toolbar>
     <template v-if="items.length">
       <template v-for="(item, i) in items">
+        <v-list-item v-if="i === 0" class="app-list-row" :key="`v-list-item-header-${i}`">
+          <v-row justify="space-between" align="center">
+            <v-col class="text-left title mr-5 pr-5 hidden-sm-and-down">Class</v-col>
+            <v-col class="text-right title mr-5 pr-5 hidden-sm-and-down">Date</v-col>
+            <v-col class="text-right title mr-5 pr-5 hidden-sm-and-down">Weight</v-col>
+            <v-col class="text-right title mr-5 pr-5 hidden-sm-and-down">Price</v-col>
+          </v-row>
+        </v-list-item>
+
         <v-list-item
           class="app-list-row"
           :class="{
@@ -40,11 +49,10 @@
           <v-row justify="space-between" align="center">
             <v-col>
               <span class="font-weight-bold">{{ item.class }}</span>
-              <v-list-item-subtitle
-                v-if="$vuetify.breakpoint.mdAndUp"
-              >{{ Date(order.created).substr(0, 21)}}</v-list-item-subtitle>
-              <v-list-item-subtitle v-else>{{ item.weightedPrice }}</v-list-item-subtitle>
             </v-col>
+            <v-col
+              class="text-right mr-5 pr-5 hidden-sm-and-down"
+            >{{ Date(item.created).substr(0, 21) }} g</v-col>
             <v-col class="text-right mr-5 pr-5 hidden-sm-and-down">{{ item.weight }} g</v-col>
             <v-col class="text-right mr-5 pr-5 hidden-sm-and-down">${{ item.weightedPrice }}</v-col>
           </v-row>
@@ -129,17 +137,13 @@ export default {
       selected: [],
       descending: false,
       sortBy: "class",
-      headers: [
-        { text: "Class", align: "left", sortable: true, value: "class" },
-        { text: "ID", align: "left", sortable: true, value: "id" }
-      ],
       deleteDialog: false
     };
   },
   computed: {
     ...mapState({
-      notifications: state => state.notifications,
-      menuItems: state => state.menuItems
+      notifications: state => state.notifications
+      // menuItems: state => state.menuItems
     }),
     itemsInCurrentOrder: {
       get() {
@@ -153,7 +157,7 @@ export default {
       }
     },
     items() {
-      return this.order.items || this.itemsInCurrentOrder;
+      return this.order ? this.order.items : this.itemsInCurrentOrder;
     },
     collectionRef() {
       return this.$firestoreRefs.predictions;

src/components/OrdersList.vue

@@ -13,8 +13,9 @@
       <template v-for="(order, i) in orders">
         <v-list-item v-if="i === 0" class="app-list-row" :key="`v-list-item-header-${i}`">
           <v-row justify="space-between" align="center">
-            <v-col class="text-left title mr-5 pr-5 hidden-sm-and-down">Timestamp</v-col>
-            <v-col class="text-right title mr-5 pr-5 hidden-sm-and-down">ID</v-col>
+            <v-col class="text-left title mr-5 pr-5 hidden-sm-and-down">Date</v-col>
+            <v-col class="text-center title mr-5 pr-5 hidden-sm-and-down">ID</v-col>
+            <v-col class="text-right title mr-5 pr-5 hidden-sm-and-down">Items</v-col>
             <v-col class="text-right title mr-5 pr-5 hidden-sm-and-down">Total Price</v-col>
           </v-row>
         </v-list-item>
@@ -33,7 +34,8 @@
               <span class="font-weight-bold">{{ order.class }}</span>
               <v-list-item-subtitle>{{ Date(order.created).substr(0, 21) }}</v-list-item-subtitle>
             </v-col>
-            <v-col class="text-right mr-5 pr-5 hidden-sm-and-down">{{ order.id }} g</v-col>
+            <v-col class="text-right mr-5 pr-5 hidden-sm-and-down">{{ order.id }}</v-col>
+            <v-col class="text-right mr-5 pr-5 hidden-sm-and-down">{{ order.items.length }}</v-col>
             <v-col class="text-right mr-5 pr-5">{{order.price}}</v-col>
           </v-row>
 
@@ -111,19 +113,14 @@ export default {
       selected: [],
       descending: false,
       sortBy: "class",
-      headers: [
-        { text: "Timestamp", align: "left", sortable: true, value: "created" },
-        { text: "ID", align: "left", sortable: true, value: "id" },
-        { text: "Total Price", align: "left", sortable: true, value: "price" }
-      ],
       detailsDialog: false,
       selectedOrder: null
     };
   },
   computed: {
     ...mapState({
-      notifications: state => state.notifications,
-      menuItems: state => state.menuItems
+      notifications: state => state.notifications
+      // menuItems: state => state.menuItems
     }),
     itemsInCurrentOrder: {
       get() {