diff --git a/src/components/EatFridgeItemModal.vue b/src/components/EatFridgeItemModal.vue
index eacb71ff0f8409bb286506a7ef6f28c913ebb835..af451315946af362d35ca6d677378c5596c668c1 100644
--- a/src/components/EatFridgeItemModal.vue
+++ b/src/components/EatFridgeItemModal.vue
@@ -1,6 +1,6 @@
<template>
<div v-if="visible" id="popup">
- <div id="exitBtn" @click="close"><Icon icon="mdi:alpha-x-box" :color="redIconColor" :style="{ fontSize: redIconSize }" /></div>
+ <div id="exitBtn" @click="close"><button :aria-label="'close menu'">X</button></div>
<h2>{{ this.fridgeItem.item.name }}</h2>
<p id="sliderDisplay">{{sliderValue}} {{this.fridgeItem.amount.unit}}</p>
@@ -66,6 +66,7 @@ export default {
};
API.updateFridge(request)
+
.catch((error)=>
console.log(error)
);
@@ -159,6 +160,15 @@ export default {
}
+#exitBtn button {
+ width:2em;
+ height:2em;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 1em;
+}
+
button {
margin:.1em;
font-weight: bolder;
diff --git a/src/components/EditProfile.vue b/src/components/EditProfile.vue
index b78d7f5ae2bc8e5e81de27f889237669b8986fe1..877d5f9c32d417610137f77ff0b2503ab1f59bfc 100644
--- a/src/components/EditProfile.vue
+++ b/src/components/EditProfile.vue
@@ -52,12 +52,9 @@ import { useAuthStore } from "@/stores/authStore";
import router from "../router";
export default {
name: "EditProfile",
- components: {Icon},
data() {
return {
alertMsg:'',
- initialName: '', //used to compare with updated values
- initialRestriction: '',
image: "profile/default_avatar.png",
}
},
@@ -71,13 +68,8 @@ export default {
upImage: "profile/default_avatar.png",
}
},
- iconColor() {
- return "#D9D9D9"
- },
},
- beforeMount() {//used to compare with changed values
- this.initialName = this.profile.name;
- this.initialRestriction = this.profile.restricted;
+ beforeMount() {
if(this.profile.profileImageUrl !== ''){
this.image = this.profile.profileImageUrl;
}
@@ -87,12 +79,23 @@ export default {
router.push("/selectProfile");
},
updateImg() {
+ this.alertMsg=""
let file = document.getElementById("profile_img").files[0];
+ let fileSize = file.size
let reader = new FileReader();
reader.onload = function (ev) {
document.getElementById("profile_img_preview").src = ev.target.result;
};
reader.readAsDataURL(file);
+ if(fileSize>524288){ //if image is bigger than 512kB
+ this.alertMsg = "Bildet er for stort (" + Math.ceil(fileSize/1024) + "kB) Maksimal bildestørrelse er 512kB"
+ }
+
+ if(file.name.split('.jpeg').length===1 && file.name.split('.jpg').length===1 ){
+ this.alertMsg="filtypen støttes ikke (bildet må være av type .jpg/.jpeg)"
+ }
+
+
},
async deleteProfile() {
const id = this.profile.id;
@@ -106,14 +109,11 @@ export default {
const id = this.profile.id;
let newName = null;
- let newRestricted = null;
+ let newRestricted = this.updatedProfile.upRestricted
- if(this.updatedProfile.upName !== this.initialName){
+ if(this.updatedProfile.upName !== this.profile.name){
newName = this.updatedProfile.upName
}
- if(this.updatedProfile.upRestricted !== this.initialRestriction){
- newRestricted = this.updatedProfile.upRestricted
- }
API.updateProfile(
id,{
@@ -123,6 +123,7 @@ export default {
}
).then((savedProfile)=>{
useAuthStore().setProfile(savedProfile);
+
const id = this.profile.id;
let image = document.getElementById("profile_img").files[0];
@@ -142,28 +143,23 @@ export default {
this.alertMsg = "Profil oppdatert."
}).catch(error=> {
console.log(error)
- if (error.message === '400') {
- if(newRestricted){
+
+ switch (error.message){
+ case '400':
+ {
this.alertMsg = '‼ï¸Det oppsto en feil: Sørg for at det finnes mist en standard profil pÃ¥ kontoenâ€¼ï¸ '
- } else if(this.updatedProfile.name !== this.initialName || this.updatedProfile.name) {
+ break;
+ }
+ case '409':
+ {
this.alertMsg = '‼ï¸Det oppsto en feil: Det finnes allerede en bruker med samme navn‼ï¸'
+ break;
}
- }else{
- this.alertMsg = "‼ï¸Det oppsto en feil.‼ï¸"
+ default:
+ this.alertMsg = "‼ï¸Det oppsto en feil.‼ï¸"
}
})
},
-
-
-
-
-
- updateImage(){
- //todo update image preview
- },
- chooseProfilePicture(){
- this.alertMsg = "skriv inn bildelenke i feltet, og oppdater innstillinger"
- },
}
}
@@ -174,7 +170,6 @@ export default {
input[type="radio"] {
width: 2em;
height: 2em;
-
}
#changeUserBtn {
@@ -210,7 +205,22 @@ img {
justify-content: space-between;
}
+input[type=file]::file-selector-button {
+ background-color: base.$light-green;
+ color: base.$white;
+ border: none;
+ font-weight: bold;
+ padding: 8px 14px;
+ width: 50%;
+ border-radius: 10px;
+ cursor: pointer;
+ margin: 10px;
+ transition: color .2s;
+}
+input[type=file]::file-selector-button:hover {
+ background-color: base.$light-green-hover;
+}
@@ -275,7 +285,6 @@ button {
display: flex;
width:100%;
justify-content: center;
- color: base.$light-green;
font-weight: bold;
}
</style>
\ No newline at end of file
diff --git a/src/components/FridgeItem.vue b/src/components/FridgeItem.vue
index c4aa60782bc0d64b10820ff7fba8c20555e4a8f2..ad07a08be05bcd93ea2307a40bfab44468ec22a1 100644
--- a/src/components/FridgeItem.vue
+++ b/src/components/FridgeItem.vue
@@ -1,6 +1,9 @@
<template>
<div id ="item">
- <img :src="getImage" alt="">
+ <div>
+ <img :src="getImage" :alt="'bilde av ' + this.fridgeItem.item.name">
+ </div>
+
<div id="itemInfo">
<p id="fridgeItemName">{{ this.fridgeItem.item.name }} {{
this.fridgeItem.amount.quantity
@@ -95,9 +98,9 @@ export default {
},
formatDate(){ //formats expiration date as dd.mm.yyyy
let fullExpirationDate = new Date(this.fridgeItem.exp_date);
- let day = fullExpirationDate.getDate();
+ let day = fullExpirationDate.getDate().toString().padStart(2,'0');
let month= (fullExpirationDate.getMonth()+1).toString().padStart(2,'0');
- let year= fullExpirationDate.getFullYear().toString().padStart(2,'0');
+ let year= fullExpirationDate.getFullYear().toString();
return day + "." + month + "." + year;
}
@@ -109,9 +112,7 @@ export default {
#item {
background-color: base.$white;
color: black;
- padding: 1em;
- padding-left: 2em;
- padding-right:2em;
+ padding: 1em 2em;
display:flex;
align-items: center;
justify-content: space-between;
@@ -127,14 +128,14 @@ export default {
font-size: 1.2em;
}
-
img {
width: 3rem;
- height: 3em;
+ height: 3rem;
border-radius: 50%;
- background-color: #00663C;
+ background-color: base.$light-grey;
margin-right:.6em;
object-fit: cover;
+
}
#itemInfo{
diff --git a/src/util/API.js b/src/util/API.js
index 45626fd2ba520b4de11110a42db0b97c5fc64a05..bfa426392a62168ea865f1ee7610cef736cb7ac6 100644
--- a/src/util/API.js
+++ b/src/util/API.js
@@ -234,6 +234,7 @@ export const API = {
axios.put(`${import.meta.env.VITE_BACKEND_URL}/fridge/ingredientsAmount`, request,{
headers: { Authorization: `Bearer ${authStore.token}` },
}).then((response) => {
+ authStore.setFridge(response.data);
return response.data;
}).catch(()=> {
throw new Error("Could modify ingredient. ");
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 8e5e024b1585d6d88f8cd29a97dfb6454e783885..b158eba82c24cf871cad104d1a626cf7bc3d867f 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -27,9 +27,6 @@ export default {
components: {Icon},
computed: {
...mapStores(useAuthStore),
- iconColor() {
- return "#000000"
- },
},
beforeMount() {
if (!useAuthStore().isLoggedIn) {