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

minor fixes to topbar, chart

This commit is contained in:
Martin Araneda 2023-02-12 16:34:03 -03:00
parent c040b8a75c
commit 776b9b70e2
3 changed files with 63 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

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

@ -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>
<label for="dropdown">Dropdown</label>
<!-- <Dropdown id="dropdown" :options="cities" v-model="value8" optionLabel="name"></Dropdown>
<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>

12
frontend/src/views/Login.vue
View File

@ -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"
class="w-full mb-3" inputClass="w-full" inputStyle="padding:1rem" :feedback="false">
<Password id="password1" v-model="password" placeholder="Password" class="w-full mb-3"
inputClass="w-full" inputStyle="padding:1rem" :feedback="false">
</Password>
<Button label="Log In" class="w-full p-3 text-xl" @click="onLoginClick()"></Button>