Add fullscreen and help to home navbar (#173)

Closes: #150

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

Reviewed-on: #173

src/js/store.js

@@ -4,6 +4,7 @@ const state = reactive({
     disclaimerAgreement: false,
     enabledRegions: ['thorax','abdomen','limbs','head'],
     version: '0.5.0-rc',
+    fullscreen: false,
     useExternal: 'optional',
     siteDemo: false,
     externalServerList: []
@@ -26,13 +27,27 @@ const getServerList = () => {
   }
 }
 
+const toggleFullscreen = () => {
+  if (document.fullscreenElement) {
+    document.exitFullscreen().then( () => {
+      state.fullscreen = false
+    })
+  } else {
+    app.requestFullscreen().then( () => {
+      state.fullscreen = true
+    })
+  }
+}
+
 export default () => ({
   isAgreed: computed(() => state.disclaimerAgreement),
+  isFullscreen: computed(() => state.fullscreen),
   demoMode: computed(() => state.siteDemo),
   externalType: computed(() => state.useExternal),
   getRegions: computed(() => state.enabledRegions),
   getVersion: computed(() => state.version),
   set,
   agree,
-  getServerList
+  getServerList,
+  toggleFullscreen
 })

src/pages/detect.vue

@@ -149,7 +149,6 @@
         serverSettings: {},
         otherSettings: {},
         isCordova: !!window.cordova,
-        isFullscreen: false,
         uploadUid: null,
         uploadDirty: false,
         modelLocation: '',
@@ -208,7 +207,7 @@
           this.modelLoading = false
         })
       }
-      window.onresize = (e) => { this.selectChip('redraw') }
+      window.onresize = (e) => { if (this.$refs.image_cvs) this.selectChip('redraw') }
     },
     computed: {
       message () {
@@ -471,17 +470,6 @@
           }
         })
         return cvsCoords
-      },
-      toggleFullscreen() {
-        if (document.fullscreenElement) {
-          document.exitFullscreen().then( () => {
-            this.isFullscreen = false
-          })
-        } else {
-          app.requestFullscreen().then( () => {
-            this.isFullscreen = true
-          })
-        }
       }
     }
   }

src/pages/home.vue

@@ -6,6 +6,10 @@
         <f7-link icon-ios="f7:bars" icon-md="f7:bars" panel-open="left"></f7-link>
       </f7-nav-left>
       <f7-nav-title sliding>A.L.V.I.N.N.</f7-nav-title>
+      <f7-nav-right>
+        <f7-link v-if="!isCordova" :icon-only="true" tooltip="Fullscreen" :icon-f7="isFullscreen ? 'viewfinder_circle_fill' : 'viewfinder'" @click="toggleFullscreen"></f7-link>
+        <f7-link :icon-only="true" tooltip="ALVINN help" icon-f7="question_circle_fill" href="/help/"></f7-link>
+      </f7-nav-right>
     </f7-navbar>
     <!-- Page content-->
     <div style="display: grid; grid-template-columns: 100%; grid-template-rows: min-content min-content min-content 1fr; align-content: stretch; gap: 15px; min-height: 0px; max-height: calc(100vh - (var(--f7-navbar-height) + var(--f7-safe-area-top))); height: calc(100vh - (var(--f7-navbar-height) + var(--f7-safe-area-top)));">
@@ -103,6 +107,7 @@
     },
     data () {
       return {
+        isCordova: !!window.cordova,
         alphaCheck: false
       }
     },