diff --git a/frontend/pages/main/edit.vue b/frontend/pages/main/edit.vue
index cc4f8fb00619bd292ac6d4015427f5f280f48ac3..6676bbab36dc5f02264531fa44dca0d2f9012752 100644
--- a/frontend/pages/main/edit.vue
+++ b/frontend/pages/main/edit.vue
@@ -87,6 +87,12 @@ export default {
}
}
},
+ mounted () {
+ this.dataset= this.$route.query.dataset
+ if (this.dataset !== undefined) {
+ this.config.placeholder = this.dataset
+ }
+ },
watch: {
async page () {
this.images = {}
@@ -96,14 +102,23 @@ export default {
async created () {
this.images = {}
await this.getAllImagesWithLabelStatus()
- this.getOptions()
+ await this.getOptions()
this.timer = setInterval(this.getAllImagesWithLabelStatus, 5000)
},
beforeDestroy () {
clearInterval(this.timer)
},
methods: {
- getOptions() {
+ 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) => {
+ if(this.folder.indexOf(dataset) === -1) {
+ this.folder.push(dataset)
+ }
+ })
+ }
this.folder.forEach((folderName) => {
console.log(folderName)
var key = "value"
@@ -132,9 +147,6 @@ export default {
if (response.data.data.images) {
this.totalRows = (response.data.data["total_page"] + 1) * this.perPage
response.data.data.images.forEach((image) => {
- if(this.folder.indexOf(image.Dataset) === -1) {
- this.folder.push(image.Dataset)
- }
if (image.Labeled && this.dataset === image.Dataset) {
var imageObj = {
id: image.ImageID,
@@ -196,7 +208,7 @@ export default {
await this.$axios.get(url)
alert("This image is currently Labeled")
} catch (e) {
- this.$router.push({ path: '/viewer/index-edit', query: { url: image.url, id: image.id }})
+ this.$router.push({ path: '/viewer/index-edit', query: { url: image.url, id: image.id, dataset:this.dataset }})
}
}
},
diff --git a/frontend/pages/main/json-view/index.vue b/frontend/pages/main/json-view/index.vue
index 2858ca41b565529898be6023635261ce46501389..0bcfd9d4dc759a0f83ae622e87222bb7a4dcc8fb 100644
--- a/frontend/pages/main/json-view/index.vue
+++ b/frontend/pages/main/json-view/index.vue
@@ -46,18 +46,19 @@ export default {
return {
id: '',
name: '',
- json: {}
+ json: {},
+ dataset: ""
}
},
async mounted() {
this.id = this.$route.query.id
this.name = this.$route.query.name
this.json = await this.getLabelByID()
-
+ this.dataset = this.$route.query.dataset
},
methods:{
closeJSONViewer() {
- this.$router.push('/main/json')
+ this.$router.push({path:'/main/json', query: {dataset:this.dataset}})
},
async getLabelByID(){
var url = 'api/label/imagequery/'+ this.id
diff --git a/frontend/pages/main/json.vue b/frontend/pages/main/json.vue
index e00ffef30f24a6d5fc57585e3a1d31264dcc1038..6edb6dee73d6497a53ea930e518adab8fc95d5de 100644
--- a/frontend/pages/main/json.vue
+++ b/frontend/pages/main/json.vue
@@ -21,7 +21,7 @@
</div>
<br>
<div class="row form-title-margin">
- <div class="col">
+ <div class="col-3">
<input
id="imagesID"
v-model="search"
@@ -31,18 +31,24 @@
name="imagesID"
>
</div>
+ <div v-if="dataReady" class="col dropdown">
+ <vue-dropdown
+ :config="config"
+ @setSelectedOption="setNewSelectedOption($event)"
+ >
+ </vue-dropdown>
+ </div>
</div>
<br>
<b-row>
<b-col v-for="labs in filterImages" :key="labs">
<div id="container">
- <nuxt-link :to="{ path: '/main/json-view', query: {id: labs.ImageID, name: labs.Filename}}">
- <Images
- :image-name="labs.Filename"
- :image-i-d="labs.ImageID"
- :image-u-r-l="backendURL + '/api/' + labs.ImagePath"
- />
- </nuxt-link>
+ <Images
+ :image-name="labs.Filename"
+ :image-i-d="labs.ImageID"
+ :image-u-r-l="backendURL + '/api/' + labs.ImagePath"
+ @click.native="openViewer(labs.ImageID, labs.Filename)"
+ />
<br>
</div>
</b-col>
@@ -63,11 +69,13 @@ export default {
<script>
import Images from '~/components/view/Images.vue'
+import VueDropdown from 'vue-dynamic-dropdown'
import getAllLabeledImages from '~/mixins/image/getAllLabeledImages.js'
import { backendURL } from '~/config.js'
export default {
components: {
- Images
+ Images,
+ VueDropdown
},
mixins: [getAllLabeledImages],
data () {
@@ -88,9 +96,52 @@ export default {
// { name: 'sssssssssdw2434', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1159990/pike-place.jpg', json: '{id:1}'}
// ],
search: '',
+ dataReady: false,
+ folder: [],
+ dataset: "",
+ config: {
+ options: [],
+ width: 300,
+ placeholder: "Choose folder",
+ backgroundColor: "white"
+ }
+ }
+ },
+ async mounted () {
+ await this.getOptions()
+ this.dataset= this.$route.query.dataset
+ if (this.dataset !== undefined) {
+ this.config.placeholder = this.dataset
}
},
methods: {
+ async openViewer(imageID, filename) {
+ this.$router.push({ path: '/main/json-view', query: {id: imageID, name: filename, dataset: this.dataset}})
+ },
+ 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) => {
+ if(this.folder.indexOf(dataset) === -1) {
+ this.folder.push(dataset)
+ }
+ })
+ }
+ this.folder.forEach((folderName) => {
+ console.log(folderName)
+ var key = "value"
+ var obj = {}
+ obj[key] = folderName
+ this.config.options.push(obj)
+ })
+ console.log(this.config.options)
+ this.dataReady = true
+ },
+ async setNewSelectedOption(selectedOption) {
+ this.config.placeholder = selectedOption.value
+ this.dataset = selectedOption.value
+ },
async getAllLabel(){
var url = '/api/label'
var response = await this.$axios(url).catch(error => console.log(error))
@@ -114,11 +165,14 @@ export default {
}
},
computed: {
- filterImages: function(){
- return this.labeledImages.filter((labs) => {
- return labs.Filename.match(this.search);
- });
- }
+ filterImages: function(){
+ return this.labeledImages.filter((labs) => {
+ if(labs.Dataset === this.dataset) {
+
+ return labs.Filename.match(this.search)
+ }
+ })
+ }
}
}
</script>
@@ -142,7 +196,12 @@ export default {
.form-title-margin {
margin-top: -5px;
}
-
+ .dropdown {
+ font-size: 0.55rem;
+ color: #1E889B;
+
+ font-family: 'Open Sans Regular';
+ }
#container {
grid-area: main;
align-self: center;
diff --git a/frontend/pages/main/label.vue b/frontend/pages/main/label.vue
index 7bb68bea05dd4903071343bd150d49c05ea6cdf5..db935a06ede9cc7bda35d82e9e86fe42e8b79178 100644
--- a/frontend/pages/main/label.vue
+++ b/frontend/pages/main/label.vue
@@ -87,6 +87,12 @@ export default {
}
}
},
+ mounted () {
+ this.dataset= this.$route.query.dataset
+ if (this.dataset !== undefined) {
+ this.config.placeholder = this.dataset
+ }
+ },
watch: {
async page () {
this.images = {}
@@ -96,14 +102,23 @@ export default {
async created () {
this.images = {}
await this.getAllImagesWithLabelStatus()
- this.getOptions()
+ await this.getOptions()
this.timer = setInterval(this.getAllImagesWithLabelStatus, 5000)
},
beforeDestroy () {
clearInterval(this.timer)
},
methods: {
- getOptions() {
+ 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) => {
+ if(this.folder.indexOf(dataset) === -1) {
+ this.folder.push(dataset)
+ }
+ })
+ }
this.folder.forEach((folderName) => {
console.log(folderName)
var key = "value"
@@ -132,9 +147,6 @@ export default {
if (response.data.data.images) {
this.totalRows = (response.data.data["total_page"] + 1) * this.perPage
response.data.data.images.forEach((image) => {
- if(this.folder.indexOf(image.Dataset) === -1) {
- this.folder.push(image.Dataset)
- }
if (!image.Labeled && this.dataset === image.Dataset) {
var imageObj = {
id: image.ImageID,
@@ -197,7 +209,7 @@ export default {
await this.$axios.get(url)
alert("This image is currently Labeled")
} catch (e) {
- this.$router.push({ path: '/viewer', query: { url: image.url, id: image.id }})
+ this.$router.push({ path: '/viewer', query: { url: image.url, id: image.id, dataset: this.dataset }})
}
}
},
diff --git a/frontend/pages/main/upload.vue b/frontend/pages/main/upload.vue
index c7d9567671742326e6e3162b15a85e9b79e4e0f1..7d4de34bad158f6231e64429d3f061030ff66d08 100644
--- a/frontend/pages/main/upload.vue
+++ b/frontend/pages/main/upload.vue
@@ -107,21 +107,15 @@ export default {
})
},
async getOptions() {
- var urlGet = '/api/image'
- const response = await this.$axios.get(urlGet, {
- params: {
- PerPage: 9999,
- Page: 1,
- }
- }).catch((error) => console.error(error))
- if (response.data.data.images) {
- response.data.data.images.forEach((image) => {
- if(this.folder.indexOf(image.Dataset) === -1) {
- this.folder.push(image.Dataset)
+ 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) => {
+ if(this.folder.indexOf(dataset) === -1) {
+ this.folder.push(dataset)
}
})
}
- console.log("asede", this.folder)
this.folder.forEach((folderName) => {
console.log(folderName)
var key = "value"
@@ -177,6 +171,14 @@ export default {
confirmButtonColor: '#11616F',
})
},
+ invalidFolder(){
+ this.$swal.fire({
+ title: "No Folder Selected",
+ icon: "error",
+ text: "Choose folder first!",
+ confirmButtonColor: '#11616F',
+ })
+ },
validUpload(){
this.files = this.$refs.myDropzone.getAcceptedFiles()
var total = this.files.length
@@ -267,7 +269,9 @@ export default {
this.files = this.$refs.myDropzone.getAcceptedFiles()
if(this.files.length === 0){
this.invalidUpload()
- }else{
+ } if(this.dataset === "") {
+ this.invalidFolder()
+ } else{
this.files = []
this.validUpload()
}
diff --git a/frontend/pages/viewer/index-edit.vue b/frontend/pages/viewer/index-edit.vue
index 17c8c8ae0f707795f6435c95d83ca883c342b391..e6c29138d5ead96dbd68833850d73ecbeaf9e686 100644
--- a/frontend/pages/viewer/index-edit.vue
+++ b/frontend/pages/viewer/index-edit.vue
@@ -86,12 +86,14 @@ export default {
canDelete: true,
labelCount: 0,
dataReady :true,
- isEdited: false
+ isEdited: false,
+ dataset: ""
}
},
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
@@ -148,7 +150,7 @@ export default {
console.log(this.previouslyCreatedBox)
},
closeViewer () {
- this.$router.push('/main/edit')
+ this.$router.push({ path:'/main/edit', query: {dataset: this.dataset}})
},
onMouseDownHandler (e) {
if (this.drawingBox.active) {
diff --git a/frontend/pages/viewer/index.vue b/frontend/pages/viewer/index.vue
index 409432644ed4f97f3877c0a76fd7a6bea229b8c6..f784d4e082cafa16dd987cac3d58a1d782bb36f6 100644
--- a/frontend/pages/viewer/index.vue
+++ b/frontend/pages/viewer/index.vue
@@ -84,7 +84,8 @@ export default {
},
canDelete: true,
labelCount: 0,
- timer: ''
+ timer: '',
+ dataset: ""
}
},
async created () {
@@ -98,11 +99,13 @@ 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)
await this.closeViewer()
},
+
methods: {
async startHeartBeat() {
var url = '/api/accesscontrol/requestaccess/' + parseInt(this.$route.query.id)
@@ -121,7 +124,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) {