From 251cd8e68c41cf6d46b02e857a222527320da2fb Mon Sep 17 00:00:00 2001
From: EdwardAJ <13517115@std.stei.itb.ac.id>
Date: Sun, 12 Apr 2020 19:00:04 +0700
Subject: [PATCH] Finish PO's feedback
---
frontend/components/label/Box.vue | 3 ++-
frontend/components/view/Images.vue | 23 +++++++++++++++++++++--
frontend/components/view/Suggest.vue | 10 +++++++++-
frontend/config.js | 4 ++--
frontend/nuxt.config.js | 2 +-
frontend/pages/main/change-password.vue | 17 +++++++++--------
frontend/pages/main/change-username.vue | 17 +++++++++--------
7 files changed, 53 insertions(+), 23 deletions(-)
diff --git a/frontend/components/label/Box.vue b/frontend/components/label/Box.vue
index fb83614..41fc015 100644
--- a/frontend/components/label/Box.vue
+++ b/frontend/components/label/Box.vue
@@ -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 () {
diff --git a/frontend/components/view/Images.vue b/frontend/components/view/Images.vue
index ea03627..5c4fec4 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 81370f2..4216d74 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 a12bcfc..adf2894 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 7926827..2446108 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 d9ba912..9c38181 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 445999b..eeaf266 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))
--
GitLab