Did stuff
This commit is contained in:
8
package-lock.json
generated
8
package-lock.json
generated
@@ -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==",
|
||||
"dev": true
|
||||
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
|
||||
},
|
||||
"lodash.debounce": {
|
||||
"version": "4.0.8",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -1,41 +1,48 @@
|
||||
<template>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-modal id="delete-confirm-modal" @ok="performDelete(confirmModal.type, confirmModal.id)" title="Confirmation">
|
||||
<p>
|
||||
Are you sure you want to <b>delete</b> the following model?
|
||||
</p>
|
||||
<p>
|
||||
<b>type:</b> {{ confirmModal.type }}
|
||||
</p>
|
||||
<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">
|
||||
<div>
|
||||
<b-row>
|
||||
<b-col class="my-2 text-right">
|
||||
<b-button @click="updateModelList" variant="primary" :disabled="actionPending">Update</b-button>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col>
|
||||
<b-modal id="delete-confirm-modal" @ok="performDelete(confirmModal.type, confirmModal.id)" title="Confirmation">
|
||||
<p>
|
||||
Are you sure you want to <b>delete</b> the following model?
|
||||
</p>
|
||||
<p>
|
||||
<b>type:</b> {{ confirmModal.type }}
|
||||
</p>
|
||||
<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 -->
|
||||
<template #cell(actions)="data">
|
||||
<b-button class="mx-1" size="sm" variant="primary" @click="actionInfo(data)">
|
||||
<b-icon icon="info"/>
|
||||
</b-button>
|
||||
<b-button class="mx-1" size="sm" variant="danger" @click="actionDelete(data)">
|
||||
<b-icon icon="trash"/>
|
||||
</b-button>
|
||||
</template>
|
||||
<!-- A virtual column -->
|
||||
<template #cell(actions)="data">
|
||||
<b-button class="mx-1" size="sm" variant="primary" @click="actionInfo(data)">
|
||||
<b-icon icon="info"/>
|
||||
</b-button>
|
||||
<b-button class="mx-1" size="sm" variant="danger" @click="actionDelete(data)">
|
||||
<b-icon icon="trash"/>
|
||||
</b-button>
|
||||
</template>
|
||||
|
||||
<template #table-busy>
|
||||
<div class="text-center my-2">
|
||||
<b-spinner class="align-middle mx-2"/>
|
||||
<strong>Loading...</strong>
|
||||
</div>
|
||||
</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>
|
||||
</b-table>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user