Did stuff

This commit is contained in:
Pünkösd Marcell 2021-09-30 00:50:44 +02:00
parent c59646b8bd
commit d094b9dafc
4 changed files with 197 additions and 38 deletions

8
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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>

View File

@ -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>