2020-01-24 10:27:35 +00:00
|
|
|
<template>
|
|
|
|
<div class="p-tab p-tab-photo-edit-labels">
|
|
|
|
<v-data-table
|
|
|
|
:headers="listColumns"
|
|
|
|
:items="model.Labels"
|
|
|
|
hide-actions
|
|
|
|
class="elevation-0 p-files p-files-list p-results"
|
|
|
|
disable-initial-sort
|
|
|
|
item-key="ID"
|
|
|
|
v-model="selected"
|
2020-01-29 14:28:20 +00:00
|
|
|
:no-data-text="$gettext('No labels found')"
|
2020-01-24 10:27:35 +00:00
|
|
|
>
|
2020-01-29 14:28:20 +00:00
|
|
|
<template v-slot:items="props" class="p-file">
|
|
|
|
<td>{{ props.item.Label.LabelName }}</td>
|
|
|
|
<td class="text-xs-left">{{ props.item.LabelSource }}</td>
|
|
|
|
<td class="text-xs-center">{{ 100 - props.item.LabelUncertainty }}%</td>
|
|
|
|
<td class="text-xs-center"><v-btn icon small flat :ripple="false"
|
|
|
|
class="p-photo-label-remove"
|
|
|
|
@click.stop.prevent="removeLabel(props.item.Label)">
|
|
|
|
<v-icon color="secondary-dark">delete</v-icon>
|
|
|
|
</v-btn></td>
|
|
|
|
</template>
|
|
|
|
<template v-slot:footer>
|
|
|
|
<td>
|
|
|
|
<v-text-field
|
|
|
|
v-model="newLabel"
|
|
|
|
:rules="[nameRule]"
|
|
|
|
color="secondary-dark"
|
2020-04-01 10:23:02 +00:00
|
|
|
browser-autocomplete="off"
|
2020-01-29 15:49:42 +00:00
|
|
|
:label="labels.addLabel"
|
2020-01-29 14:28:20 +00:00
|
|
|
single-line
|
|
|
|
flat solo hide-details
|
|
|
|
autofocus
|
2020-01-29 16:44:19 +00:00
|
|
|
@keyup.enter.native="addLabel"
|
2020-01-29 14:28:20 +00:00
|
|
|
></v-text-field>
|
|
|
|
</td>
|
|
|
|
<td class="text-xs-left">manual</td>
|
|
|
|
<td class="text-xs-center">100%</td>
|
|
|
|
<td class="text-xs-center"><v-btn icon small flat :ripple="false"
|
|
|
|
class="p-photo-label-remove"
|
|
|
|
@click.stop.prevent="addLabel">
|
|
|
|
<v-icon color="secondary-dark">add</v-icon>
|
|
|
|
</v-btn></td>
|
2020-01-24 10:27:35 +00:00
|
|
|
</template>
|
|
|
|
</v-data-table>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-01-29 14:28:20 +00:00
|
|
|
import Label from "model/label";
|
|
|
|
|
2020-01-24 10:27:35 +00:00
|
|
|
export default {
|
|
|
|
name: 'p-tab-photo-edit-labels',
|
|
|
|
props: {
|
|
|
|
model: Object,
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
config: this.$config.values,
|
|
|
|
readonly: this.$config.getValue("readonly"),
|
|
|
|
selected: [],
|
2020-01-29 14:28:20 +00:00
|
|
|
newLabel: "",
|
2020-01-24 10:27:35 +00:00
|
|
|
listColumns: [
|
2020-01-29 14:28:20 +00:00
|
|
|
{text: this.$gettext('Label'), value: '', sortable: false, align: 'left'},
|
|
|
|
{text: this.$gettext('Source'), value: 'LabelSource', sortable: false, align: 'left'},
|
|
|
|
{text: this.$gettext('Confidence'), value: 'LabelUncertainty', sortable: false, align: 'center'},
|
|
|
|
{text: this.$gettext('Action'), value: '', sortable: false, align: 'center'},
|
2020-01-24 10:27:35 +00:00
|
|
|
],
|
2020-01-29 14:28:20 +00:00
|
|
|
labels: {
|
2020-01-29 15:49:42 +00:00
|
|
|
addLabel: "",
|
2020-01-29 14:28:20 +00:00
|
|
|
},
|
|
|
|
nameRule: v => v.length <= 25 || this.$gettext("Name too long"),
|
2020-01-24 10:27:35 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
refresh() {
|
|
|
|
},
|
2020-01-29 14:28:20 +00:00
|
|
|
removeLabel(label) {
|
2020-01-29 16:44:19 +00:00
|
|
|
if(!label) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2020-01-29 14:28:20 +00:00
|
|
|
const name = label.LabelName;
|
|
|
|
|
|
|
|
this.model.removeLabel(label.ID).then((m) => {
|
|
|
|
this.$notify.success("removed " + name);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
addLabel() {
|
2020-01-29 16:44:19 +00:00
|
|
|
if(!this.newLabel) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2020-01-29 14:28:20 +00:00
|
|
|
this.model.addLabel(this.newLabel).then((m) => {
|
|
|
|
this.$notify.success("added " + this.newLabel);
|
|
|
|
|
|
|
|
this.newLabel = "";
|
|
|
|
});
|
|
|
|
},
|
2020-01-24 10:27:35 +00:00
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|