Did stuff

package-lock.json

@@ -6192,6 +6192,11 @@
       "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
       "dev": true
     },
+    "howler": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.3.tgz",
+      "integrity": "sha512-QM0FFkw0LRX1PR8pNzJVAY25JhIWvbKMBFM4gqk+QdV+kPXOhleWGCB6AiAF/goGjIHK2e/nIElplvjQwhr0jg=="
+    },
     "hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -7309,8 +7314,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
-      "dev": true
     },
     "lodash.debounce": {
       "version": "4.0.8",

package.json

@@ -12,6 +12,8 @@
     "bootstrap": "^4.5.2",
     "bootstrap-vue": "^2.16.0",
     "core-js": "^3.6.5",
+    "howler": "^2.2.3",
+    "lodash": "^4.17.21",
     "v-hotkey": "^0.9.0",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",

src/views/Models.vue

@@ -1,41 +1,48 @@
 <template>
-  <b-row>
+  <div>
-    <b-col>
+    <b-row>
-      <b-modal id="delete-confirm-modal" @ok="performDelete(confirmModal.type, confirmModal.id)" title="Confirmation">
+      <b-col class="my-2 text-right">
-        <p>
+        <b-button @click="updateModelList" variant="primary" :disabled="actionPending">Update</b-button>
-          Are you sure you want to <b>delete</b> the following model?
+      </b-col>
-        </p>
+    </b-row>
-        <p>
+    <b-row>
-          <b>type:</b> {{ confirmModal.type }}
+      <b-col>
-        </p>
+        <b-modal id="delete-confirm-modal" @ok="performDelete(confirmModal.type, confirmModal.id)" title="Confirmation">
-        <p>
+          <p>
-          <b>id:</b> {{ confirmModal.id }}
+            Are you sure you want to <b>delete</b> the following model?
-        </p>
+          </p>
-      </b-modal>
+          <p>
-      <model-modal-info v-model="infoModal.show" :id="infoModal.id" :type="infoModal.type" @refresh="updateModelList"
+            <b>type:</b> {{ confirmModal.type }}
-                        @delete="childActionDelete"/>
+          </p>
-      <b-table striped hover :items="models" :fields="fields" :tbody-tr-class="rowClass" :busy="actionPending">
+          <p>
+            <b>id:</b> {{ confirmModal.id }}
+          </p>
+        </b-modal>
+        <model-modal-info v-model="infoModal.show" :id="infoModal.id" :type="infoModal.type" @refresh="updateModelList"
+                          @delete="childActionDelete"/>
+        <b-table striped hover :items="models" :fields="fields" :tbody-tr-class="rowClass" :busy="actionPending">
 
-        <!-- A virtual column -->
+          <!-- A virtual column -->
-        <template #cell(actions)="data">
+          <template #cell(actions)="data">
-          <b-button class="mx-1" size="sm" variant="primary" @click="actionInfo(data)">
+            <b-button class="mx-1" size="sm" variant="primary" @click="actionInfo(data)">
-            <b-icon icon="info"/>
+              <b-icon icon="info"/>
-          </b-button>
+            </b-button>
-          <b-button class="mx-1" size="sm" variant="danger" @click="actionDelete(data)">
+            <b-button class="mx-1" size="sm" variant="danger" @click="actionDelete(data)">
-            <b-icon icon="trash"/>
+              <b-icon icon="trash"/>
-          </b-button>
+            </b-button>
-        </template>
+          </template>
 
-        <template #table-busy>
+          <template #table-busy>
-          <div class="text-center my-2">
+            <div class="text-center my-2">
-            <b-spinner class="align-middle mx-2"/>
+              <b-spinner class="align-middle mx-2"/>
-            <strong>Loading...</strong>
+              <strong>Loading...</strong>
-          </div>
+            </div>
-        </template>
+          </template>
 
-      </b-table>
+        </b-table>
-    </b-col>
+      </b-col>
-  </b-row>
+    </b-row>
+  </div>
 </template>
 
 <script>

src/views/Samples.vue

@@ -1,10 +1,156 @@
 <template>
-  <div></div>
+  <div>
+    <b-row>
+      <b-col class="my-2 text-right">
+        <b-spinner class="mx-3" style="width: 1.6rem; height: 1.6rem;" variant="secondary"
+                   v-if="sampleDownloadPending > 0"/>
+        <b-button @click="updateEverything" variant="primary" :disabled="actionPending">Update</b-button>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col>
+        <b-table striped hover :items="samples" :busy="actionPending" :fields="fields">
+
+          <template #cell(probability)="data">
+            <span :class="{'text-danger': data.item.probability > 0.51 }" v-if="data.item.probability !== null">
+              {{ data.item.probability|round(3) }}
+            </span>
+            <span v-else class="text-secondary">N/A</span>
+          </template>
+
+          <!-- A virtual column -->
+          <template #cell(actions)="data">
+            <b-button class="mx-1" size="sm" variant="success" @click="playSample(data.item.tag)">
+              <b-icon icon="play"/>
+            </b-button>
+            <b-button class="mx-1" size="sm" variant="primary" :href="getAudioLink(data.item.tag)">
+              <b-icon icon="download"/>
+            </b-button>
+          </template>
+
+          <template #table-busy>
+            <div class="text-center my-2">
+              <b-spinner class="align-middle mx-2"/>
+              <strong>Loading...</strong>
+            </div>
+          </template>
+
+        </b-table>
+      </b-col>
+    </b-row>
+  </div>
 </template>
 
 <script>
+import {Howl} from 'howler'
+import _ from "lodash"
+
 export default {
-  name: "Samples"
+  name: "Samples",
+  data() {
+    return {
+      samples: [],
+      fields: [
+        {
+          key: 'tag',
+          sortable: false
+        },
+        {
+          key: 'device_id',
+          sortable: true
+        },
+        {
+          key: "device_date",
+          sortable: true
+        },
+        {
+          key: "probability",
+          sortable: true
+        },
+        "actions"
+      ],
+      actionPending: false,
+      sampleDownloadPending: 0,
+      sample: null,
+      errorText: null
+    }
+  },
+  methods: {
+    playSample(tag) {
+
+      if (this.sample !== null && this.sample.playing()) {
+        this.sample.stop()
+      }
+
+      this.sampleDownloadPending++
+
+      this.sample = new Howl({
+        src: [this.getAudioLink(tag)],
+        format: ["wav"],
+        loop: false,
+        onload: () => {
+          this.sampleDownloadPending--
+        },
+        autoplay: true,
+        preload: true,
+        onloaderror: (id, err) => {
+          this.$showToast(`Howler error: [${id}] ${err}`)
+          this.sampleDownloadPending--
+        }
+      })
+
+    },
+    getAudioLink(tag) {
+      return process.env.VUE_APP_API_LOCATION + "/object/" + tag
+    },
+    updateEverything() {
+      this.samples = []
+
+      this.actionPending = true
+      const sample_promise = this.$api.get("/sample")
+      const output_promise = this.$api.get("/output")
+
+      Promise.all([sample_promise, output_promise]).then((prom) => {
+        this.samples = []
+        const samples = prom[0].data
+        const results = prom[1].data
+
+        samples.forEach((sample) => {
+          let elm = sample
+          const result = _.find(results, (e) => e.tag === sample.tag)
+
+          if (result) {
+            elm.probability = result.probability
+          } else {
+            elm.probability = null
+          }
+
+          this.samples.push(elm)
+        })
+
+
+        this.actionPending = false
+      })
+
+    }
+  },
+  filters: {
+    round(value, decimals) {
+      if (!value) {
+        value = 0;
+      }
+
+      if (!decimals) {
+        decimals = 0;
+      }
+
+      value = Math.round(value * Math.pow(10, decimals)) / Math.pow(10, decimals);
+      return value;
+    }
+  },
+  mounted() {
+    this.updateEverything()
+  }
 }
 </script>