Fix errors with detector panel and label lists (#41)

Closes: #39

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

Reviewed-on: Georgi_Lab/ALVINN_f7#41

src/pages/detect.vue

@@ -4,7 +4,7 @@
     <f7-navbar :sliding="false" back-link="Back">
       <f7-nav-title sliding>{{ regions[activeRegion] }}</f7-nav-title>
       <f7-nav-right>
-        <f7-link icon-ios="f7:menu" icon-md="material:settings" panel-open="right"></f7-link>
+        <f7-link icon-ios="f7:menu" icon-md="material:settings" :panel-open="`#${detectorName}-settings`"></f7-link>
       </f7-nav-right>
     </f7-navbar>
     <f7-block class="detect-grid">
@@ -33,16 +33,16 @@
       <input type="file" ref="image_chooser" @change="getImage()" accept="image/*" style="display: none;"/>
     </f7-block>
 
-    <f7-panel right cover>
+    <f7-panel :id="detectorName + '-settings'" right cover>
       <f7-page>
         <f7-navbar title="Detection Settings"></f7-navbar>
         <f7-list>
-          <f7-list-input v-model:value="detectSettings.level" :label="`Confidence % threshold: ${detectSettings.level}`" type="range" />
+          <f7-list-input v-model:value="detectorLevel" :label="`Confidence % threshold: ${detectorLevel}`" type="range" />
           <f7-list-item accordion-item title="Structures">
             <f7-accordion-content>
               <f7-list>
                 <f7-list-item checkbox checked checkbox-icon="end" title="All/none" @change="selectAll"></f7-list-item>
-                <f7-list-item v-for="structure in detectSettings.filter" checkbox checkbox-icon="end" v-model:checked="structure.detect" :title="structure.name"></f7-list-item>
+                <f7-list-item v-for="structure in detectorLabels" :key="structure.name" checkbox checkbox-icon="end" v-model:checked="structure.detect" :title="structure.name"></f7-list-item>
               </f7-list>
             </f7-accordion-content>
           </f7-list-item>
@@ -214,10 +214,8 @@
         imageView: '',
         reader: new FileReader(),
         detectorName: '',
-        detectSettings: {
+        detectorLevel: 50,
-          level: 50,
+        detectorLabels: [],
-          filter: []
-          },
         serverSettings: {},
         debugOn: false,
         debugText: ['Variables loaded']
@@ -258,14 +256,18 @@
             return;
           }
           var detectors = JSON.parse(xhr.response).detectors
-          self.detectSettings.filter = detectors
+          var findLabel = detectors
-            .find( d => { return d.name == self.detectorName } ).labels
+            .find( d => { return d.name == self.detectorName } )?.labels
             .filter( l => { return l != "" } ).sort()
             .map( l => { return {'name': l, 'detect': true} } )
+          self.detectorLabels = findLabel || []
         }
         xhr.send()
       }
     },
+    deactivated () {
+      console.log('destroy the panel!')
+    },
     computed: {
       debugDisplay () {
         return this.debugText.join('<br/>')
@@ -297,11 +299,11 @@
           }
           
           var detectStructures = {}
-          if (this.detectSettings.filter.every( s => { return s.detect } )) {
+          if (this.detectorLabels.every( s => { return s.detect } )) {
-            detectStructures['*'] = this.detectSettings.level
+            detectStructures['*'] = this.detectorLevel
           } else {
-            this.detectSettings.filter.forEach( s => {
+            this.detectorLabels.forEach( s => {
-              if (s.detect) detectStructures[s.name] = this.detectSettings.level
+              if (s.detect) detectStructures[s.name] = this.detectorLevel
             })
           }
           var doodsData = {
@@ -318,9 +320,9 @@
       },
       selectAll (ev) {
         if (ev.target.checked) {
-          this.detectSettings.filter.forEach( s => s.detect = true )
+          this.detectorLabels.forEach( s => s.detect = true )
         } else {
-          this.detectSettings.filter.forEach( s => s.detect = false )
+          this.detectorLabels.forEach( s => s.detect = false )
         }
       },
       selectImage () {