diff --git a/frontend/components/dropdown/Dropdown.vue b/frontend/components/dropdown/Dropdown.vue
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..07e1fa6fd1546c0c9c3a4907193c8ae9f2fb2604 100644
--- a/frontend/components/dropdown/Dropdown.vue
+++ b/frontend/components/dropdown/Dropdown.vue
@@ -0,0 +1,64 @@
+<template>
+ <div :key="dataReady">
+ <vue-dropdown
+ ref="dropdown"
+ :config="config"
+ @setSelectedOption="setNewSelectedOption($event)"
+ />
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ isUpload: {
+ type: Boolean,
+ default: false
+ },
+ dropdownValue: {
+ type: String,
+ default: null
+ }
+ },
+ data () {
+ return {
+ config: {
+ options: [],
+ width: 200,
+ placeholder: "Choose folder",
+ backgroundColor: "white",
+ textColor: "#1E889B",
+ border: ""
+ },
+ folder: [],
+ dataReady: false
+ }
+ },
+ async created () {
+ await this.getOptions()
+ },
+ methods: {
+ async getOptions() {
+ var urlGet = '/api/image/datasets'
+ const response = await this.$axios.get(urlGet).catch((error) => console.error(error))
+ if (response.data.status === "success") {
+ response.data.data.forEach((dataset) => {
+ var key = "value"
+ var obj = {}
+ obj[key] = dataset
+ this.config.options.push(obj)
+ })
+ }
+ if (this.dropdownValue) {
+ this.config.placeholder = this.dropdownValue
+ }
+ this.dataReady = true
+ },
+ async setNewSelectedOption(selectedOption) {
+ this.config.placeholder = selectedOption.value
+ this.dataset = selectedOption.value
+ this.$emit("onDatasetChanged", this.dataset)
+ }
+ }
+}
+</script>
\ No newline at end of file
diff --git a/frontend/components/label/Label.vue b/frontend/components/label/Label.vue
index 251c86f8cfba000bbcb5f493d52db47b97edc2a9..3adafbfd7f1f549b265528b547e0993882c384a3 100644
--- a/frontend/components/label/Label.vue
+++ b/frontend/components/label/Label.vue
@@ -11,14 +11,19 @@
<br>
<div class="row form-title-margin">
<div class="col">
- <input
- id="imagesID"
- type="text"
- class="form-control form-border field-length form-content"
- placeholder="Search for file name..."
- name="imagesID"
- @input="debounceWrapper"
- >
+ <div class="flex-display">
+ <input
+ id="imagesID"
+ type="text"
+ class="form-control form-border field-length form-content"
+ placeholder="Search for file name..."
+ name="imagesID"
+ @input="debounceWrapper"
+ >
+ <div class="slot-margin">
+ <slot />
+ </div>
+ </div>
</div>
</div>
<br>
@@ -74,6 +79,10 @@ export default {
type: Boolean,
default: false
},
+ dataset: {
+ type: String,
+ default: ''
+ },
output: {
type: Object,
default: () => {
@@ -89,7 +98,7 @@ export default {
images: {},
keyword: '',
isViewerActive: false,
- perPage: 2,
+ perPage: 3,
totalRows: 0,
page: 1,
timer: '',
@@ -118,7 +127,8 @@ export default {
PerPage: perPage,
Page: page,
search: keyword,
- Labeled: this.isLabeled
+ Labeled: this.isLabeled,
+ Dataset: this.dataset
}
}).catch((error) => console.error(error))
if (response.data.data.images) {
@@ -181,11 +191,11 @@ export default {
await this.$axios.get(url)
alert("This image is currently Labeled")
} catch (e) {
- this.$router.push({ path: this.viewerURL, query: { url: image.url, id: image.id }})
+ this.$router.push({ path: this.viewerURL, query: { url: image.url, id: image.id, dataset: this.dataset}})
}
}
} else {
- this.$router.push({ path: this.viewerURL, query: {type: this.output.type, id: image.id, name: image.name, standard: this.output.standard}})
+ this.$router.push({ path: this.viewerURL, query: {type: this.output.type, id: image.id, name: image.name, standard: this.output.standard, dataset: this.dataset }})
}
},
@@ -230,4 +240,13 @@ export default {
justify-self: center;
width: 18rem;
}
+
+ .slot-margin {
+ margin-left: 1.5rem;
+ }
+
+ .flex-display {
+ display: flex;
+ }
+
</style>
\ No newline at end of file
diff --git a/frontend/pages/main/coco.vue b/frontend/pages/main/coco.vue
index de63a5c7dbaca9fa6724a45e1318a1cff33e721d..d36edcb2d626192891a4723547f3aec3afca2a34 100644
--- a/frontend/pages/main/coco.vue
+++ b/frontend/pages/main/coco.vue
@@ -15,12 +15,19 @@
</div>
<div class="row">
<Label
+ :key="updateUI"
:is-output-viewer="isOutputViewer"
:is-labeled="isLabeled"
+ :dataset="dataset"
title="JSON Per Image"
viewer-u-r-l="/main/output-view"
:output="{type: 'json', standard: standard}"
- />
+ >
+ <Dropdown
+ :dropdown-value="dataset"
+ @onDatasetChanged="changeDataset"
+ />
+ </Label>
</div>
</div>
</template>
@@ -29,10 +36,12 @@
import getAllLabeledImages from '~/mixins/image/getAllLabeledImages.js'
import { backendURL } from '~/config.js'
import Label from '~/components/label/Label'
+import Dropdown from '~/components/dropdown/Dropdown'
export default {
components: {
- Label
+ Label,
+ Dropdown
},
mixins: [getAllLabeledImages],
data () {
@@ -41,17 +50,21 @@ export default {
isLabeled: true,
backendURL: backendURL,
standard: 'coco',
- search: ''
+ search: '',
+ updateUI: false
}
},
- computed: {
- filterImages: function(){
- return this.labeledImages.filter((labs) => {
- return labs.Filename.match(this.search)
- })
+ mounted () {
+ if (this.$route.query.dataset) {
+ this.dataset = this.$route.query.dataset
+ this.updateUI = !this.updateUI
}
},
methods: {
+ changeDataset (newDataset) {
+ this.dataset = newDataset
+ this.updateUI = !this.updateUI
+ },
async getAllLabel(standard){
var url = '/api/label'
var response = await this.$axios(url).catch(error => console.log(error))
diff --git a/frontend/pages/main/edit.vue b/frontend/pages/main/edit.vue
index ae2c50eeee8f318b494a61fe305ba114e9ec5fc7..fb6d9a6d4d9571570b3a8366d10f176dcc3f8799 100644
--- a/frontend/pages/main/edit.vue
+++ b/frontend/pages/main/edit.vue
@@ -1,20 +1,37 @@
<template>
<Label
+ :key="dataset"
title="Label Labeled Images"
viewer-u-r-l="/viewer/index-edit"
:is-labeled="isLabeled"
- />
+ :dataset="dataset"
+ >
+ <Dropdown :dropdown-value="dataset" @onDatasetChanged="changeDataset" />
+ </Label>
</template>
<script>
import Label from '~/components/label/Label'
+import Dropdown from '~/components/dropdown/Dropdown'
export default {
components: {
- Label
+ Label,
+ Dropdown
},
data () {
return {
- isLabeled: true
+ isLabeled: true,
+ dataset: ''
+ }
+ },
+ mounted () {
+ if (this.$route.query.dataset) {
+ this.dataset = this.$route.query.dataset
+ }
+ },
+ methods: {
+ changeDataset (newDataset) {
+ this.dataset = newDataset
}
}
}
diff --git a/frontend/pages/main/label.vue b/frontend/pages/main/label.vue
index 9d50b6eafddbb5dd12ae2d2e9ce6a77cbfb0d0d6..784fce0dfa84784b3ca3da3b3874a9542d48eaaf 100644
--- a/frontend/pages/main/label.vue
+++ b/frontend/pages/main/label.vue
@@ -1,12 +1,33 @@
<template>
- <Label />
+ <Label :key="dataset" :dataset="dataset">
+ <Dropdown :dropdown-value="dataset" @onDatasetChanged="changeDataset" />
+ </Label>
</template>
<script>
+
import Label from '~/components/label/Label'
+import Dropdown from '~/components/dropdown/Dropdown'
+
export default {
components: {
- Label
+ Label,
+ Dropdown
+ },
+ data () {
+ return {
+ dataset: ''
+ }
+ },
+ mounted () {
+ if (this.$route.query.dataset) {
+ this.dataset = this.$route.query.dataset
+ }
+ },
+ methods: {
+ changeDataset (newDataset) {
+ this.dataset = newDataset
+ }
}
}
</script>
\ No newline at end of file
diff --git a/frontend/pages/main/output-view/index.vue b/frontend/pages/main/output-view/index.vue
index 2d7a7500cd963b6946fae542d0e038ac151b90ae..c77ce3436470ca0ca8ae75970a63c88843496bc2 100644
--- a/frontend/pages/main/output-view/index.vue
+++ b/frontend/pages/main/output-view/index.vue
@@ -56,7 +56,8 @@ export default {
stripComments: true,
collapseContent: true,
lineSeparator: '\n'
- }
+ },
+ dataset: ''
}
},
async mounted() {
@@ -64,17 +65,18 @@ export default {
this.id = this.$route.query.id
this.name = this.$route.query.name
this.standard = this.$route.query.standard
+ this.dataset = this.$route.query.dataset
this.json = await this.getLabelByID(this.standard)
// this.xml = XMLFormatter(this.convertToXML(),this.config)
if(this.type === 'xml'){
this.xml = this.convertToXML()
- this.Format()
+ this.Format()
}
},
methods:{
closeOutputViewer() {
if(this.type === 'json'){
- this.$router.push('/main/coco')
+ this.$router.push({path: '/main/coco', query:{ dataset: this.dataset }})
}else{
this.$router.push('/main/pascal')
}
diff --git a/frontend/pages/viewer/index-edit.vue b/frontend/pages/viewer/index-edit.vue
index f51a23c9e39b4e2a133a4a2ff60969661a3905d2..c6bc1662bcca7f4993e63d944a866a4a15bccb40 100644
--- a/frontend/pages/viewer/index-edit.vue
+++ b/frontend/pages/viewer/index-edit.vue
@@ -99,6 +99,7 @@ export default {
id: -1,
url: ''
},
+ dataset: '',
canDelete: true,
labelCount: 0,
timer: '',
@@ -118,6 +119,7 @@ export default {
async mounted () {
this.image.url = this.$route.query.url
this.image.id = this.$route.query.id
+ this.dataset = this.$route.query.dataset
await this.drawAllBox()
this.dataReady = false
this.dataReady = true
@@ -209,7 +211,7 @@ export default {
console.log(error)
}
clearInterval(this.timer)
- this.$router.push('/main/edit')
+ this.$router.push({ path: '/main/edit', query: {dataset: this.dataset }})
},
async deleteImageAccessControlByImageID (imageID) {
var url = '/api/accesscontrol/' + imageID
diff --git a/frontend/pages/viewer/index.vue b/frontend/pages/viewer/index.vue
index 5c6f1c8fdfca03d3dd91fb01b3066b1484a07032..bb8ad2d724a1a3e73811e37fe671e5e6f89eaec8 100644
--- a/frontend/pages/viewer/index.vue
+++ b/frontend/pages/viewer/index.vue
@@ -97,6 +97,7 @@ export default {
id: -1,
url: ''
},
+ dataset: '',
canDelete: true,
labelCount: 0,
timer: ''
@@ -113,6 +114,7 @@ export default {
mounted () {
this.image.url = this.$route.query.url
this.image.id = this.$route.query.id
+ this.dataset = this.$route.query.dataset
},
async beforeDestroy () {
// window.removeEventListener("beforeunload", true)
@@ -150,7 +152,7 @@ export default {
console.log(error)
}
clearInterval(this.timer)
- this.$router.push('/main/label')
+ this.$router.push({ path: '/main/label', query: {dataset: this.dataset }})
},
onMouseDownHandler (e) {
if (this.drawingBox.active) {
diff --git a/frontend/plugins/vue-dynamic-dropdown.js b/frontend/plugins/vue-dynamic-dropdown.js
index c648acba83f0c072cf93b6430b2930f03df2a0d8..1039a3c399e3c69df6bac645d65137ed5fbcfd83 100644
--- a/frontend/plugins/vue-dynamic-dropdown.js
+++ b/frontend/plugins/vue-dynamic-dropdown.js
@@ -1,3 +1,3 @@
import Vue from 'vue'
import VueDropdown from 'vue-dynamic-dropdown'
-Vue.use(VueDropdown)
\ No newline at end of file
+Vue.component('vue-dropdown', VueDropdown)
\ No newline at end of file