fixes to pswrd change, token and chart

frontend/src/layout/AppTopbar.vue

@@ -76,7 +76,12 @@ async function savePassword(pass) {
 
     }
     catch (error) {
-        console.error(error);
+        if (error.response.status === 400) {
+            toast.add({ severity: 'error', summary: 'Error', detail: 'Current password is incorrect', life: 3000 });
+        }
+        else {
+            console.log(error);
+        }
     }
 }
 
@@ -139,8 +144,8 @@ const isOutsideClicked = (event) => {
             <Menu id="overlay_menu" ref="menu" :model="items" :popup="true" />
         </div>
 
-        <Dialog v-model:visible="changePasswordDialog" :style="{ width: '450px' }" header="Change Password"
+        <Dialog v-model:visible="changePasswordDialog" :style="{ width: '450px' }" header="Change Password" :modal="true"
-            :modal="true" class="p-fluid">
+            class="p-fluid">
             <Toast />
             <div class="field">
                 <label for="current_password">Current Password</label>
@@ -171,6 +176,4 @@ const isOutsideClicked = (event) => {
     </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-
-</style>

frontend/src/utils/Auth.js

@@ -40,7 +40,8 @@ var auth = {
                         if (callback !== null) {
                             callback(false);
                         }
-                        router.replace("/");
+                        localStorage.removeItem("token");
+                        router.replace("/login");
                     }
                     else {
                         if (callback !== null) {

frontend/src/views/Chart.vue

@@ -2,11 +2,9 @@
 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');
@@ -14,7 +12,8 @@ let surfaceBorder = documentStyle.getPropertyValue('--surface-border');
 const time_elapsed = ref([]);
 const coins = ref([]);
 const games = ref([]);
-const selectedGames = ref();
+const ms = ref(true);
+const selectedGame = ref();
 
 const lineData = ref(null);
 const lineOptions = ref(null);
@@ -26,10 +25,6 @@ const setColorOptions = () => {
     surfaceBorder = documentStyle.getPropertyValue('--surface-border');
 };
 
-const probando = () => {
-    console.log(selectedGames.value)
-}
-
 async function getGames() {
     try {
         const response = await axios.get(`http://localhost:3001/game?limit=5000`);
@@ -42,14 +37,20 @@ async function getGames() {
     }
 }
 
-async function setChart() {
+async function getFrames() {
     try {
-        if (selectedGames.value === undefined) {
+        if (selectedGame.value === undefined) {
             return;
         }
-        const response = await axios.get(`http://localhost:3001/frame?limit=5000&game_id=` + selectedGames.value);
+        const response = await axios.get(`http://localhost:3001/frame?limit=5000&game_id=` + selectedGame.value);
+        if (response.data[response.data.length - 1].elapsed_time >= 10000) {
+            ms.value = false;
+        }
+        else {
+            ms.value = true;
+        }
         time_elapsed.value = response.data.map(frame => {
-            return Math.floor(frame.elapsed_time / 1000);
+            return (ms.value == true) ? (Math.round(frame.elapsed_time * 10) / 10).toFixed(1) : (Math.floor(frame.elapsed_time / 1000 * 10) / 10).toFixed(1);
         });
         coins.value = response.data.map(frame => {
             return frame.coins;
@@ -59,13 +60,20 @@ async function setChart() {
         console.error(error);
     }
 
+    lineData.value.labels = time_elapsed.value;
+    lineData.value.datasets[0].label = 'Game ' + selectedGame.value;
+    lineData.value.datasets[0].data = coins.value;
 
-    /////////////////////////////////
+    lineOptions.value.scales.x.title.text = (ms.value) ? "Time(ms)" : "Time(s)";
+
+}
+
+async function setChart() {
     lineData.value = {
         labels: time_elapsed.value,
         datasets: [
             {
-                label: 'Game 4',
+                label: 'Game ' + selectedGame.value,
                 data: coins.value,
                 fill: false,
                 backgroundColor: documentStyle.getPropertyValue('--primary-500'),
@@ -76,6 +84,7 @@ async function setChart() {
     };
 
     lineOptions.value = {
+        reponsive: true,
         plugins: {
             legend: {
                 labels: {
@@ -84,11 +93,10 @@ async function setChart() {
             }
         },
         scales: {
-
             x: {
                 title: {
                     display: true,
-                    text: "Time(s)"
+                    text: (ms.value) ? "Time(ms)" : "Time(s)"
                 },
                 ticks: {
                     color: textColorSecondary
@@ -118,14 +126,13 @@ watch(
     layoutConfig.theme,
     () => {
         setColorOptions();
-        //setChart();
     },
     { immediate: true }
 );
 
 onMounted(() => {
-    checkAuth();
     setChart();
+    checkAuth();
     getGames();
 })
 
@@ -139,8 +146,8 @@ const checkAuth = () => {
         <div class="grid p-fluid">
             <div class="col-12 xl:col-2">
                 <span class="p-float-label">
-                    <Dropdown v-model="selectedGames" :options="games" optionLabel="" optionValue=""
+                    <Dropdown v-model="selectedGame" :options="games" optionLabel="" optionValue="" @change="getFrames()" />
-                        placeholder="Select a game session" @change="setChart" />
+                    <label for="dropdown">Game session</label>
                 </span>
             </div>
         </div>
@@ -148,11 +155,15 @@ const checkAuth = () => {
     <div class="card">
         <div class="grid p-fluid">
             <div class="col-12 xl:col-6">
-                <div class="card">
+                <Chart type="line" :data="lineData" :options="lineOptions"></Chart>
-                    <h5>Linear Chart</h5>
-                    <Chart type="line" :data="lineData" :options="lineOptions"></Chart>
-                </div>
             </div>
         </div>
     </div>
-</template>
+</template>
+
+<style>
+canvas {
+    width: 500px !important;
+    height: 310px !important;
+}
+</style>