minor fixes to topbar, chart

frontend/src/layout/AppTopbar.vue

@@ -5,6 +5,7 @@ import { useRouter } from 'vue-router';
 import { useToast } from 'primevue/usetoast';
 import axios from 'axios';
 import jwt_decode from 'jwt-decode';
+import auth from '../utils/Auth';
 
 const { onMenuToggle } = useLayout();
 
@@ -17,15 +18,6 @@ const submitted = ref(false);
 const toast = useToast();
 const menu = ref();
 const items = ref([
-    {
-        label: 'Log out',
-        icon: 'pi pi-sign-out',
-        command: () => {
-            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
-            localStorage.removeItem('token');
-            router.push('/');
-        }
-    },
     {
         label: 'Change password',
         icon: 'pi pi-key',
@@ -34,6 +26,15 @@ const items = ref([
             submitted.value = false;
             user.value = {};
         }
+    },
+    {
+        label: 'Log out',
+        icon: 'pi pi-sign-out',
+        command: () => {
+            toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 });
+            localStorage.removeItem('token');
+            router.push('/');
+        }
     }
 ]);
 
@@ -50,28 +51,40 @@ onBeforeUnmount(() => {
 });
 
 
-async function onClickPasswordChange() {
+const onClickPasswordChange = () => {
     submitted.value = true;
-    console.log(user.value);
     var pass =
-
     {
         password: user.value.current_password,
         new_password: user.value.new_password
     };
+    if (user.value.new_password != user.value.confirm_new_password) {
+        console.log("gola");
+        toast.add({ severity: 'error', summary: 'Error', detail: 'Passwords are not the same', life: 3000 });
+        return;
+    }
+    savePassword(pass);
+}
+
+async function savePassword(pass) {
     var token = localStorage.getItem("token");
     var decoded = jwt_decode(token);
     try {
-        const response = await axios.patch(`http://localhost:3001/user/` + decoded.id, auth.getTokenHeader());
+        const response = await axios.patch(`http://localhost:3001/user/` + decoded.id, pass, auth.getTokenHeader());
         if (response.status !== 204) {
             console.error(response);
         }
+
     }
     catch (error) {
         console.error(error);
     }
 }
 
+const hideDialog = () => {
+    changePasswordDialog.value = false;
+    submitted.value = false;
+};
 
 
 const onTopBarMenuButton = () => {
@@ -129,29 +142,29 @@ const isOutsideClicked = (event) => {
 
         <Dialog v-model:visible="changePasswordDialog" :style="{ width: '450px' }" header="Change Password"
             :modal="true" class="p-fluid">
-
+            <Toast />
             <div class="field">
                 <label for="current_password">Current Password</label>
-                <InputText id="current_password" v-model.trim="user.current_password" required="true" autofocus
+                <Password id="current_password" v-model.trim="user.current_password" required="true" autofocus
                     :class="{ 'p-invalid': submitted && !user.current_password }" />
                 <small class="p-invalid" v-if="submitted && !user.current_password">Actual password is required.</small>
             </div>
             <div class="field">
                 <label for="new_password">New Password</label>
-                <InputText id="new_password" v-model.trim="user.new_password" required="true" autofocus
+                <Password id="new_password" v-model.trim="user.new_password" required="true"
                     :class="{ 'p-invalid': submitted && !user.new_password }" />
                 <small class="p-invalid" v-if="submitted && !user.new_password">New password is required.</small>
             </div>
             <div class="field">
                 <label for="confirm_new_password">Confirm new Password</label>
-                <InputText id="confirm_new_password" v-model.trim="user.confirm_new_password" required="true" autofocus
+                <Password id="confirm_new_password" v-model.trim="user.confirm_new_password" required="true"
                     :class="{ 'p-invalid': submitted && !user.confirm_new_password }" />
                 <small class="p-invalid" v-if="submitted && !user.confirm_new_password">Confirm the new password is
                     required.</small>
             </div>
             <template #footer>
                 <Button label="Cancel" icon="pi pi-times" class="p-button-text" @click="hideDialog" />
-                <Button label="Save" icon="pi pi-check" class="p-button-text" @click="onClickPasswordChange" />
+                <Button label="Save" icon="pi pi-check" class="p-button-text" @click="onClickPasswordChange()" />
             </template>
         </Dialog>
     </div>

frontend/src/views/Chart.vue

@@ -2,12 +2,16 @@
 import { ref, watch, onMounted } from 'vue';
 import { useLayout } from '@/layout/composables/layout';
 import auth from '../utils/Auth';
+import { useToast } from 'primevue/usetoast';
+import axios from 'axios';
 
 const { layoutConfig } = useLayout();
+const toast = useToast();
 let documentStyle = getComputedStyle(document.documentElement);
 let textColor = documentStyle.getPropertyValue('--text-color');
 let textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
 let surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+const time_elapsed = ref([]);
 
 const lineData = ref(null);
 const lineOptions = ref(null);
@@ -18,9 +22,22 @@ const setColorOptions = () => {
     textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
     surfaceBorder = documentStyle.getPropertyValue('--surface-border');
 };
-const setChart = () => {
+async function setChart() {
+    try {
+        const response = await axios.get(`http://localhost:3001/frame?limit=5000&game_id=4`);
+        //console.log(response.data);
+        time_elapsed.value = response.data;
+        time_elapsed.value = time_elapsed.value.filter(x => x = 1);
+        console.log(time_elapsed.value);
+    }
+    catch (error) {
+        console.error(error);
+    }
+
+
+    /////////////////////////////////
     lineData.value = {
-        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        labels: [0],
         datasets: [
             {
                 label: 'First Dataset',
@@ -75,7 +92,7 @@ watch(
     layoutConfig.theme,
     () => {
         setColorOptions();
-        setChart();
+        //setChart();
     },
     { immediate: true }
 );
@@ -94,8 +111,8 @@ const checkAuth = () => {
         <div class="grid p-fluid">
             <div class="col-12 xl:col-2">
                 <span class="p-float-label">
-                    <Dropdown id="dropdown" :options="cities" v-model="value8" optionLabel="name"></Dropdown>
+                    <!-- <Dropdown id="dropdown" :options="cities" v-model="value8" optionLabel="name"></Dropdown>
-                    <label for="dropdown">Dropdown</label>
+                    <label for="dropdown">Dropdown</label> -->
                 </span>
             </div>
         </div>
@@ -105,6 +122,7 @@ const checkAuth = () => {
             <div class="col-12 xl:col-6">
                 <div class="card">
                     <h5>Linear Chart</h5>
+                    <button @click="setChart">hola</button>
                     <Chart type="line" :data="lineData" :options="lineOptions"></Chart>
                 </div>
             </div>

frontend/src/views/Login.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import axios from 'axios';
 import { useRouter } from 'vue-router';
 const username = ref('');
@@ -24,6 +24,12 @@ async function onLoginClick() {
     }
 }
 
+onMounted(() => {
+    if (localStorage.getItem("token") != null) {
+        router.push('/home');
+    }
+});
+
 </script>
 
 <template>
@@ -44,8 +50,8 @@ async function onLoginClick() {
                             style="padding: 1rem" v-model="username" />
 
                         <label for="password1" class="block text-900 font-medium text-xl mb-2">Password</label>
-                        <Password id="password1" v-model="password" placeholder="Password" :toggleMask="true"
+                        <Password id="password1" v-model="password" placeholder="Password" class="w-full mb-3"
-                            class="w-full mb-3" inputClass="w-full" inputStyle="padding:1rem" :feedback="false">
+                            inputClass="w-full" inputStyle="padding:1rem" :feedback="false">
                         </Password>
 
                         <Button label="Log In" class="w-full p-3 text-xl" @click="onLoginClick()"></Button>