Add small features to detect page (#34)

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
Reviewed-on: Georgi_Lab/ALVINN_f7#34

src/pages/detect.vue

@@ -10,7 +10,7 @@
     <f7-block class="detect-grid">
       <div class="image-container">
         <img v-if="imageView" :src="imageView" id="im-display" ref="image_src" style="flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;" />
-        <SvgIcon v-else icon="image" fill-color="var(--avn-theme-color)"/>
+        <SvgIcon v-else icon="image" fill-color="var(--avn-theme-color)" @click="selectImage" />
         <div ref="structure_box" style="border: solid 3px var(--avn-structure-box-color); position: absolute; display: none; box-sizing: border-box;" />
       </div>
       <div v-if="resultData && resultData.detections" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
@@ -216,7 +216,7 @@
           filter: []
           },
         serverSettings: {},
-        debugOn: true,
+        debugOn: false,
         debugText: ['Variables loaded']
       }
     },
@@ -276,6 +276,7 @@
       },
       setData () {
         var self = this
+        this.resetView()
         if (this.serverSettings && this.serverSettings.use) {
           var modelURL = `http://${this.serverSettings.address}:${this.serverSettings.port}/detect`
           var xhr = new XMLHttpRequest()
@@ -326,6 +327,11 @@
         var imgWidth
         var imgHeight
 
+        if (this.selectedChip == iChip) {
+          this.resetView()
+          return
+        }
+
         this.selectedChip = iChip
         const box = this.$refs.structure_box
         const img = this.$refs.image_src
@@ -347,9 +353,7 @@
       deleteChip ( iChip ) {
         f7.dialog.confirm(`${this.resultData.detections[iChip].label} is identified with ${this.resultData.detections[iChip].confidence.toFixed(1)}% confidence. Are you sure you want to delete it?`, () => {
           this.resultData.detections.splice(iChip, 1)
-          this.selectedChip = -1
-          const box = this.$refs.structure_box
-          box.style.display = 'none'
+          this.resetView()
         });
       },
       getImage () {
@@ -363,13 +367,16 @@
         loadImage.then(() => {
           this.imageLoaded = true
           this.resultData = {}
-          this.selectedChip = -1
-          const box = this.$refs.structure_box
-          box.style.display = 'none'
+          this.resetView()
         }).catch((e) => {
           console.log(e.message)
           f7.dialog.alert('Error loading image')
         })
+      },
+      resetView() {
+        this.selectedChip = -1
+        const box = this.$refs.structure_box
+        box.style.display = 'none'
       }
     }
   }