birbcontrol/src/components/ModelModalInfo.vue

144 lines
2.8 KiB
Vue

<template>
<b-modal id="modal-model-info" size="lg" scrollable centered :title="id" @show="updateInfo" @close="onClose" v-model="showModal">
<div id="modal-model-info-content">
</div>
<template #modal-footer>
<b-button
variant="success"
class="float-right"
size="sm"
@click="onClickDownloadModel"
>
<b-icon icon="download"/>
Download model
</b-button>
<b-button
variant="success"
class="float-right"
size="sm"
@click="onClickDownloadExtra"
>
<b-icon icon="download"/>
Download weights
</b-button>
<b-button
variant="warning"
class="float-right"
size="sm"
:disabled="info.default"
@click="onClickSetAsDefault"
>
<b-icon icon="pencil"/>
Set as default SVM model
</b-button>
<b-button
variant="danger"
class="float-right"
size="sm"
@click="onClickDelete"
>
<b-icon icon="trash"/>
Delete
</b-button>
<b-button
variant="secondary"
class="float-right"
size="sm"
@click="showModal=false"
>
<b-icon icon="door-closed"/>
Close
</b-button>
</template>
</b-modal>
</template>
<script>
export default {
name: "ModelModalInfo",
model: {
prop: "show",
event: "change"
},
props: {
id: {
type: String
},
type: {
type: String
},
show: {
default: false,
type: Boolean
}
},
data() {
return {
actionPending: false,
info: {}
}
},
methods: {
updateInfo() {
return new Promise((resolve, reject) => {
this.actionPending = true
this.$api.get(`/model/${this.type}/${this.id}`).then(({data}) => {
this.info = data
this.actionPending = false
resolve()
}).catch((error) => {
if (!error.response) {
// network error happened
this.$showToast("Some network error happened.\nCheck logs!")
} else {
// server returned bruh moment
this.$showToast(`The server returned error: ${error.response.status} ${error.response.statusText}\n${error.response.data}`)
}
this.actionPending = false
reject()
})
});
},
onClose() {
this.showModal = false;
},
onClickDownloadModel() {
},
onClickDownloadExtra() {
},
onClickSetAsDefault() {
},
onClickDelete() {
this.$emit("delete", {type: this.type, id: this.id})
this.showModal = false;
}
},
computed: {
showModal: {
get() {
return this.show
},
set(v) {
this.$emit("change", v)
}
}
}
}
</script>
<style scoped>
</style>