Proyecto-Titulo
/
alai-server
3
0
Fork 0
Code Issues Pull Requests Releases Activity

fixes to pswrd change, token and chart

This commit is contained in:
Martin Araneda 2023-02-16 23:11:58 -03:00
parent 674c8b5f0a
commit 8ddd866e49
3 changed files with 46 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/layout/AppTopbar.vue
View File

@ -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"
:modal="true" class="p-fluid">
<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>
@ -171,6 +176,4 @@ const isOutsideClicked = (event) => {
</div>
</template>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>

3
frontend/src/utils/Auth.js
View File

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

59
frontend/src/views/Chart.vue
View File

@ -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=""
placeholder="Select a game session" @change="setChart" />
<Dropdown v-model="selectedGame" :options="games" optionLabel="" optionValue="" @change="getFrames()" />
<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">
<h5>Linear Chart</h5>
<Chart type="line" :data="lineData" :options="lineOptions"></Chart>
</div>
<Chart type="line" :data="lineData" :options="lineOptions"></Chart>
</div>
</div>
</div>
</template>
</template>
<style>
canvas {
width: 500px !important;
height: 310px !important;
}
</style>