Falta fer que al fer refresh s'en recordin de la pos de les finestres

client/src/views/managers/WindowManager.vue

@@ -6,6 +6,7 @@ import LoginWindow from '@/views/windows/LoginWindow.vue'
 import RegisterWindow from '@/views/windows/RegisterWindow.vue'
 import ExampleWindow from '@/views/windows/ExampleWindow.vue'
 import MainMenuWindow from '@/views/windows/MainMenuWindow.vue'
+import EditProfileWindow from '@/views/windows/EditProfileWindow.vue'
 
 // Gestionem ventanas
 import useEmitter from '@/services/Emitter';
@@ -18,6 +19,7 @@ const windows = {
     register: reactive([]),
     test: reactive([]),
     main_menu: reactive([]),
+    edit_profile: reactive([]),
 };
 
 emitter.on("create-window", (data) => {
@@ -26,8 +28,20 @@ emitter.on("create-window", (data) => {
         return;
     }
 
-    windows[data.type].push(data);
+    let contains = false;
-    reload.value += 1;
+    for (var i = 0; i < windows[data.type].length; i++) {
+        if(windows[data.type][i].id == data.id){
+            contains = true;
+            break;
+        }
+    }
+
+    console.log(contains);
+
+    if(!contains) {
+        windows[data.type].push(data);
+        // reload.value += 1;
+    }
 })
 
 
@@ -44,6 +58,7 @@ emitter.on("clear-windows", (data) => {
     <RegisterWindow v-for="window in windows.register" :key="window.id" :data="window"></RegisterWindow>
     <ExampleWindow v-for="window in windows.test" :key="window.id" :data="window"></ExampleWindow>
     <MainMenuWindow v-for="window in windows.main_menu" :key="window.id" :data="window"></MainMenuWindow>
+    <EditProfileWindow v-for="window in windows.edit_profile" :key="window.id" :data="window"></EditProfileWindow>
   </div>
 </template>
 

client/src/views/partials/EditUserPartial.vue

@@ -4,7 +4,7 @@ import VersionRender from '@/views/others/VersionRender.vue'
 import ErrorMessage from '@/views/others/ErrorMessage.vue'
 
 import { onMounted, ref } from 'vue';
-import { GetUser } from '@/services/User'
+import { GetUser, LogoutUser } from '@/services/User'
 
 import Api from '@/services/Api'
 import url from '@/services/BackendURL'
@@ -18,12 +18,21 @@ username.value = GetUser().username;
 function retrieveAvatar(){
     let userAvatarDisplay = document.getElementById("upload-image");
     Api().get('/user/retrieve-avatar?username=' + GetUser().username).then((response) => {
-        console.log(response.data.image);
-
         userAvatarDisplay.src = url + "public/" + response.data.image;
     }).catch((err) => console.log("Internal error"));
 }
 
+function LogOut(){
+    LogoutUser();
+
+    emitter.emit("clear-windows", {type: "main_menu"});
+    emitter.emit("create-window", {type: "login", id: "login"})
+}
+
+function EditProfile(){
+    emitter.emit("create-window", {type: "edit_profile", id: "edit_profile"})
+}
+
 onMounted(() => {
     let userAvatarDisplay = document.getElementById("upload-image");
     let sendAvatarForm = document.getElementById("send-avatar-form");
@@ -38,15 +47,15 @@ onMounted(() => {
         Api().post('/user/upload-avatar', formData, {
             headers: { "Content-Type": "multipart/form-data" }
         }).then((response) => {
-            console.log(response);
             retrieveAvatar();
         }).catch((err) => console.log("Internal error"));
     });
 
     userAvatarDisplay.addEventListener("click", (event) => {
-        console.log("Clicked");
         sendAvatarFileUploader.click();
-    })
+    });
+
+    retrieveAvatar();
 });
 </script>
 
@@ -62,6 +71,11 @@ onMounted(() => {
             <div class="main-user-info">
                 <b>{{ username }}</b><br>Miauler
             </div>
+
+            <div class="main-user-actions">
+                <button class="btn-primary button-small" v-on:click.prevent="EditProfile">Edit profile</button>
+                <button class="btn-primary button-small" v-on:click.prevent="LogOut">Log out</button>
+            </div>
         </div>
     </div>
 </template>
@@ -72,6 +86,12 @@ onMounted(() => {
     display: none;
 }
 
+.button-small {
+    height: 32px;
+    margin-bottom: 0px;
+    padding: 10px;
+}
+
 .main-user-container {
     background-color: var(--color-background-softer);
     width: 100%;
@@ -82,6 +102,8 @@ onMounted(() => {
     padding: 10px;
     display: flex;
     align-items: center;
+
+    justify-content: center;
 }
 
 .main-user-info {
@@ -93,4 +115,8 @@ onMounted(() => {
     width: 40px;
     height: 40px;
 }
+
+.main-user-actions {
+    margin-left: auto;
+}
 </style>

client/src/views/windows/EditProfileWindow.vue

@@ -0,0 +1,63 @@
+<script setup>
+
+import { onMounted, ref } from 'vue';
+import { SetupHandle, SetSize, SetPosition } from '@/services/Windows';
+
+import Api from '@/services/Api.js'
+
+import useEmitter from '@/services/Emitter';
+const emitter = useEmitter();
+
+const props = defineProps(['data']);
+const data = props.data;
+
+let id = data.id;
+
+onMounted(() => {
+    SetupHandle(id);
+    SetSize(id, {x: 500, y: 380});
+    SetPosition(id, "center");
+});
+</script>
+
+
+<template>
+    <div class="window-wrapper" :id="'window-wrapper-' + id">
+        <div class="window-handle" :id="'window-handle-' + id">
+            Edit profile
+        </div>
+
+        <!-- Body -->
+
+    </div>
+</template>
+
+
+<style scoped>
+.window-wrapper {
+    min-width: 700px;
+    min-height: 630px;
+
+    display: flex;
+    align-items: center;
+}
+
+.splash-image {
+    width: 600px;
+    height: 250px;
+}
+
+.form-field {
+    padding: 10px;
+    display: flex;
+    align-items: left;
+    flex-direction: column;
+    justify-content: left;
+    width: 600px;
+}
+
+label {
+    text-align: left;
+}
+
+</style>

client/src/views/windows/ExampleWindow.vue

@@ -19,8 +19,8 @@ let title = data.title;
 
 onMounted(() => {
     SetupHandle(id);
-    SetSize(700, 630);
+    SetSize(id, {x: 500, y: 380});
-    SetPosition("center");
+    SetPosition(id, "center");
 });
 </script>