diff --git a/frontend/components/label/Box.vue b/frontend/components/label/Box.vue
index fb83614b3aad831c832b166631ec7f8f0ba2261c..c8ad8984dcc43333fe6744f61dbcb9bd91a97483 100644
--- a/frontend/components/label/Box.vue
+++ b/frontend/components/label/Box.vue
@@ -12,7 +12,7 @@
<div v-if="isDeleteActive">
<i
- class="icon-trash fas fa-trash shadow"
+ class="icon-trash fas fa-times shadow"
:style="{ top: bTop -8 + 'px', left: bLeft + -4 + 'px'}"
@click="deleteBox"
/>
@@ -123,7 +123,8 @@ export default {
if (this.bWidth < 80) {
return this.bWidth + 5
} else {
- return 80
+ console.log("Length: ", this.bContent.length)
+ return Math.max(80, (this.bContent.length) * 8 + 7)
}
},
isDeleteActive () {
@@ -188,19 +189,15 @@ export default {
<style scoped>
.box, .box-delete {
position: absolute;
- border: 3px #F0F801 solid;
+ border: 3px #219DFF solid;
z-index: 3;
}
- .box:hover, .box-delete:hover , .box.active {
- background-color: rgba(144, 238, 144, .3);
+ .box:hover, .box-delete, .box.active {
+ background-color: rgba(30, 136, 155, .3);
cursor: pointer;
}
- .box-delete:hover {
- background-color: rgba(214, 36, 70, .3);
- }
-
#bIndex {
position: absolute;
z-index: 6;
@@ -246,14 +243,20 @@ export default {
}
.icon-trash {
- color: red;
+ color: white;
+ background-color: #FA6159;
+
+ font-size: 0.75rem;
+
+ border-radius: 5px;
+ padding: 5px;
position: absolute;
- z-index: 20;
+ z-index: 30;
cursor: pointer;
}
.icon-trash:hover {
- color: #F0F801;
+ background-color: red;
}
diff --git a/frontend/components/label/Toolbar.vue b/frontend/components/label/Toolbar.vue
index 11f170dcf1700839958a275264db486620ecb1ba..7cad7bbf03a6deb8d5d5693a5e25cfae0e93a5ac 100644
--- a/frontend/components/label/Toolbar.vue
+++ b/frontend/components/label/Toolbar.vue
@@ -38,13 +38,13 @@ export default {
<style scoped>
.bg-toolbar {
- background-color: #F7F7F7;
+ background-color: #474747;
width: 3.75vw;
}
.icon {
font-size: 1.1rem;
- color: #707070;
+ color: #8e8383;
margin-top: 27px;
}
diff --git a/frontend/components/root/Navbar.vue b/frontend/components/root/Navbar.vue
index 5088f290d48bffcf36ac3ac5612babc19930f519..6fb6d900eecda860de2468d7fdb04d8e3f1e8939 100644
--- a/frontend/components/root/Navbar.vue
+++ b/frontend/components/root/Navbar.vue
@@ -1,5 +1,5 @@
<template>
- <b-sidebar class="side-bar-layout side-bar-bg side-bar-font side-bar-padding">
+ <b-nav class="side-bar-layout side-bar-bg side-bar-font side-bar-padding">
<b-nav vertical>
<!-- User profile info -->
<b-nav-item link-classes="side-bar-color mt-5 ml-4">
@@ -150,7 +150,7 @@
</b-collapse>
</div>
</b-nav>
- </b-sidebar>
+ </b-nav>
</template>
<script>
diff --git a/frontend/components/view/Images.vue b/frontend/components/view/Images.vue
index ea03627e7f507404b3fee10898638f8f46be2930..5c4fec42460c166c466fc12b752ed923b133bfa6 100644
--- a/frontend/components/view/Images.vue
+++ b/frontend/components/view/Images.vue
@@ -1,10 +1,13 @@
<template>
<article class="blog-card" :class="{'disable': isCurrentlyLabeled}">
<img class="post-image" :class="{'post-image-disabled': isCurrentlyLabeled}" :src="imageURL">
- <div class="article-details">
- <h3 class="post-title" :class="{'post-title-disabled': isCurrentlyLabeled}">
+ <div :class="{'article-details': !isCurrentlyLabeled, 'article-labeled': isCurrentlyLabeled}">
+ <h3 class="post-title" :class="{'post-title-disabled': isCurrentlyLabeled, 'data-image-labeled': isCurrentlyLabeled}">
{{ dataImageName }}
</h3>
+ <h4 v-if="isCurrentlyLabeled" class="labeled-title">
+ This Image Is Currently Being Labeled
+ </h4>
</div>
</article>
</template>
@@ -92,6 +95,22 @@ export default {
padding: 1.7rem;
}
+.article-labeled {
+ margin-top: 0.5rem;
+ padding-top: 0.275rem;
+ padding-left: 0.5rem;
+}
+
+.data-image-labeled {
+ margin-top: 0.5rem;
+}
+
+.labeled-title {
+ font-size: 0.73rem;
+ color: #1E889B;
+ margin-top: 0.4rem;
+}
+
.post-title {
font-size: 0.875rem;
line-height: 1;
diff --git a/frontend/components/view/Suggest.vue b/frontend/components/view/Suggest.vue
index 81370f2069f4f6cecd1f48b58ddf98c51e1d39c2..4216d74f56816cbdd66bdb25fef33629cff2b4cd 100644
--- a/frontend/components/view/Suggest.vue
+++ b/frontend/components/view/Suggest.vue
@@ -42,6 +42,11 @@ export default {
]
}
},
+ watch: {
+ bContent (value) {
+ this.bContent = value.toLowerCase()
+ }
+ },
async mounted () {
this.bContent = this.initialData
const response = await this.$axios.get('/api/content/?suggestion=').catch((error) => console.error(error))
@@ -64,10 +69,13 @@ export default {
})
},
methods: {
+ showInput (event) {
+ console.log("event: ", event)
+ },
disableForm() {
this.isDisabled = true
this.$refs["form"].isInFocus = false
- // this.$refs["form"].$el.querySelector(".default-input").blur()
+ // this.bContent = this.bContent.toLowerCase()
this.$emit("onDisableForm", this.bContent)
},
enableForm() {
diff --git a/frontend/config.js b/frontend/config.js
index a12bcfcda288a7f4f4df0e8892ea45017431df6a..adf28946cfa76ec1dd3aede22ea2c61fc510207c 100644
--- a/frontend/config.js
+++ b/frontend/config.js
@@ -1,8 +1,8 @@
// Environment Variables
// For development
-export const backendURL = "http://localhost:3000"
-export const frontendURL = 'http://localhost:6969/'
+export const backendURL = "http://192.168.1.5:8081"
+export const frontendURL = 'http://192.168.1.5:3000/'
// For deployment
// export const backendURL = "http://api....."
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
index 79268278856a1454732f3a5985faf0140a6a18ba..244610801db88e669fd96c8a2937fbe40ce874bf 100644
--- a/frontend/nuxt.config.js
+++ b/frontend/nuxt.config.js
@@ -59,7 +59,7 @@ export default {
baseURL: backendURL
},
server: {
- port: 6969, // default: 3000
+ port: 3000, // default: 3000
host: '0.0.0.0' // default: localhost
},
/*
diff --git a/frontend/pages/main/change-password.vue b/frontend/pages/main/change-password.vue
index d9ba91279b0106bfe3cee198a579efd87ca9265a..9c38181e185a1188a255746b2314a3ac54f9c8e6 100644
--- a/frontend/pages/main/change-password.vue
+++ b/frontend/pages/main/change-password.vue
@@ -81,7 +81,7 @@
<div class="row mt-2">
<div class="col">
<button
- class="btn-border btn-action field-length form-content" @click="handleOnSubmit(new_password, user.passcode, old_password, user.user_id, confirm_new_password)"
+ class="btn-border btn-action field-length form-content" @click="handleOnSubmit(new_password, user.passcode, old_password, confirm_new_password)"
>
<p class="btn-content">
Change Password
@@ -94,6 +94,7 @@
</template>
<script>
+import cookies from 'js-cookie'
import { mapGetters } from 'vuex'
export default {
@@ -115,10 +116,10 @@ export default {
icon: 'success'
})
},
- approveConfirmation (new_password, id) {
- var payloadUsername =""
-
- var url = 'api/user/' + id
+ approveConfirmation (new_password) {
+ var payloadUsername = this.user.username
+ var auth = cookies.get('Authorization')
+ var url = 'api/user/changecredential/' + auth
this.$axios.put(url, {
username: payloadUsername,
passcode: new_password
@@ -145,15 +146,15 @@ export default {
text: text
})
},
- handleOnSubmit (newValue, passcode, oldlValue, id, confirmNewValue) {
+ handleOnSubmit (newValue, passcode, oldValue, confirmNewValue) {
this.isPasswordTrue(),
this.isConfirmPasswordTrue()
// Send to backend
- if ((passcode == oldlValue) && (confirmNewValue == newValue)) {
+ if ((passcode == oldValue) && (confirmNewValue == newValue)) {
var text = "You will change password"
this.showConfirmation("Are You Sure?", text).then((result) => {
if (result.value) {
- this.approveConfirmation(newValue, id)
+ this.approveConfirmation(newValue)
} else {
this.showCancelledAlert()
}
diff --git a/frontend/pages/main/change-username.vue b/frontend/pages/main/change-username.vue
index 445999be9bc17723c789cc2c8446eb6b8095ac92..eeaf2664f7f91cd59f101714b5b6b903a8103364 100644
--- a/frontend/pages/main/change-username.vue
+++ b/frontend/pages/main/change-username.vue
@@ -33,9 +33,9 @@
</p>
</div>
- <div class="row mt-4">
+ <div class="row mt-2">
<div class="col">
- <p class="form-title">
+ <p class="form-title">
New Username
</p>
</div>
@@ -56,7 +56,7 @@
<div class="row mt-2">
<div class="col">
<button
- class="btn-border btn-action field-length form-content" @click="handleOnSubmit(new_username, user.username, old_username, user.user_id)"
+ class="btn-border btn-action field-length form-content" @click="handleOnSubmit(new_username, user.username, old_username, user.passcode)"
>
<p class="btn-content">
Change Username
@@ -70,7 +70,7 @@
<script>
import { mapGetters } from 'vuex'
-
+import cookies from 'js-cookie'
export default {
data: function() {
return {
@@ -90,13 +90,13 @@ export default {
this.userTrue = false
}
},
- handleOnSubmit (newValue, username, oldValue, user_id) {
+ handleOnSubmit (newValue, username, oldValue, passcode) {
if(username == oldValue) {
this.isUsernameTrue()
var text = "You will change username"
this.showConfirmation("Are You Sure?", text).then((result) => {
if (result.value) {
- this.approveConfirmation(newValue, user_id)
+ this.approveConfirmation(newValue, passcode)
} else {
this.showCancelledAlert()
}
@@ -120,11 +120,12 @@ export default {
icon: 'success'
})
},
- approveConfirmation (new_username, id) {
+ approveConfirmation (new_username, passcode) {
var payloadUsername =new_username
- var url = 'api/user/' + id
+ var url = 'api/user/changecredential/' + cookies.get('Authorization')
this.$axios.put(url, {
username: payloadUsername,
+ passcode: passcode
}).then(
this.showNewUsername(payloadUsername),
).catch(error => console.error(error))
diff --git a/frontend/pages/viewer/index-edit.vue b/frontend/pages/viewer/index-edit.vue
index f99d8be72614aa008eebf0f9aa91adc928a182b0..9fb1f69ddbd5e0701c10406e7f8e17ff8d354e7c 100644
--- a/frontend/pages/viewer/index-edit.vue
+++ b/frontend/pages/viewer/index-edit.vue
@@ -179,33 +179,35 @@ export default {
async drawAllBox () {
var allLabels = await this.getAllLabels()
console.log(allLabels)
- var labeledCount = Object.keys(allLabels).length
- var imageAttributes = {
- screenWidth: this.$refs.image.clientWidth,
- screenHeight: this.$refs.image.clientHeight,
- realWidth: this.$refs.image.naturalWidth,
- realHeight: this.$refs.image.naturalHeight
- }
- while(labeledCount > this.labelCount){
- this.previouslyCreatedBox[this.labelCount + 1] = allLabels[this.labelCount].label_id
- var contentName = await this.getContentName(allLabels[this.labelCount].label_content_id)
- console.log(contentName)
- var screenImagesAttr = this.getScreenAttributes(imageAttributes, allLabels[this.labelCount].label_width, allLabels[this.labelCount].label_height, allLabels[this.labelCount].label_x_center, allLabels[this.labelCount].label_y_center)
- let newBox = {
- width: screenImagesAttr.width,
- height: screenImagesAttr.height,
- left: screenImagesAttr.left,
- top: screenImagesAttr.top,
- content: contentName,
- label_id: allLabels[this.labelCount].label_id
+ if (allLabels) {
+ var labeledCount = Object.keys(allLabels).length
+ var imageAttributes = {
+ screenWidth: this.$refs.image.clientWidth,
+ screenHeight: this.$refs.image.clientHeight,
+ realWidth: this.$refs.image.naturalWidth,
+ realHeight: this.$refs.image.naturalHeight
+ }
+ while(labeledCount > this.labelCount){
+ this.previouslyCreatedBox[this.labelCount + 1] = allLabels[this.labelCount].label_id
+ var contentName = await this.getContentName(allLabels[this.labelCount].label_content_id)
+ console.log(contentName)
+ var screenImagesAttr = this.getScreenAttributes(imageAttributes, allLabels[this.labelCount].label_width, allLabels[this.labelCount].label_height, allLabels[this.labelCount].label_x_center, allLabels[this.labelCount].label_y_center)
+ let newBox = {
+ width: screenImagesAttr.width,
+ height: screenImagesAttr.height,
+ left: screenImagesAttr.left,
+ top: screenImagesAttr.top,
+ content: contentName,
+ label_id: allLabels[this.labelCount].label_id
+ }
+ this.labelCount++
+ this.boxes[this.labelCount] = newBox
+ this.boxesCount++
+ // console.log(newBox.content)
+ this.changeBoxContent(newBox.content, this.labelCount)
+ // this.makeCurrentBoxActive(this.labelCount)
+ this.resetDrawingBox()
}
- this.labelCount++
- this.boxes[this.labelCount] = newBox
- this.boxesCount++
- // console.log(newBox.content)
- this.changeBoxContent(newBox.content, this.labelCount)
- // this.makeCurrentBoxActive(this.labelCount)
- this.resetDrawingBox()
}
console.log("ANJAAY", this.boxes)
console.log("ANJJJAY2", this.previouslyCreatedBox)
@@ -585,7 +587,7 @@ export default {
.viewer-background {
height: 100vh;
- background-color: #E4E4E4;
+ background-color: #262626;
}
.center-horizontal {
@@ -615,6 +617,12 @@ export default {
.btn-label-no-border {
border: 0;
+ color: white;
+ background-color: #474747;
+ }
+
+ .btn-label-no-border:hover {
+ background-color: #8e8383;
}
.btn-lg {
diff --git a/frontend/pages/viewer/index.vue b/frontend/pages/viewer/index.vue
index bb8ad2d724a1a3e73811e37fe671e5e6f89eaec8..a9522ef57958f19867156b3ab802658bb4177ecc 100644
--- a/frontend/pages/viewer/index.vue
+++ b/frontend/pages/viewer/index.vue
@@ -60,7 +60,7 @@
<div class="btn-save-section">
<button
type="button"
- class="btn-label-no-border btn-lg btn-dark btn-text"
+ class="btn-label-no-border btn-lg btn-light btn-text"
@click="saveImage"
>
Save Image
@@ -138,7 +138,7 @@ export default {
this.cssCursor = 'cell'
break
case 'resize-box':
- this.cssCursor = 'default'
+ this.cssCursor = 'pointer'
break
case 'delete-box':
this.cssCursor = 'default'
@@ -382,7 +382,7 @@ export default {
.viewer-background {
height: 100vh;
- background-color: #E4E4E4;
+ background-color: #262626;
}
.center-horizontal {
@@ -412,6 +412,12 @@ export default {
.btn-label-no-border {
border: 0;
+ color: white;
+ background-color: #474747;
+ }
+
+ .btn-label-no-border:hover {
+ background-color: #8e8383;;
}
.btn-lg {