Add fullscreen setting to detect pages (#149)

Closes: #147

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

Reviewed-on: #149

src/pages/detect.vue

@@ -4,6 +4,7 @@
     <f7-navbar :sliding="false" :back-link="true" back-link-url="/" back-link-force>
       <f7-nav-title sliding>{{ regions[activeRegion] }}</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>
@@ -119,6 +120,7 @@
   import submitMixin from './submit-mixin'
   import detectionMixin from './detection-mixin'
   import cameraMixin from './camera-mixin'
+import App from 'framework7-vue/components/app'
 
   export default {
     mixins: [submitMixin, detectionMixin, cameraMixin],
@@ -148,6 +150,7 @@
         serverSettings: {},
         otherSettings: {},
         isCordova: !!window.cordova,
+        isFullscreen: false,
         uploadUid: null,
         uploadDirty: false,
         modelLocation: '',
@@ -465,6 +468,17 @@
           }
         })
         return cvsCoords
+      },
+      toggleFullscreen() {
+        if (document.fullscreenElement) {
+          document.exitFullscreen().then( () => {
+            this.isFullscreen = false
+          })
+        } else {
+          app.requestFullscreen().then( () => {
+            this.isFullscreen = true
+          })
+        }
       }
     }
   }