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

View File

@ -5,6 +5,7 @@ import { useRouter } from 'vue-router';
import { useToast } from 'primevue/usetoast'; import { useToast } from 'primevue/usetoast';
import axios from 'axios'; import axios from 'axios';
import jwt_decode from 'jwt-decode'; import jwt_decode from 'jwt-decode';
import auth from '../utils/Auth';
const { onMenuToggle } = useLayout(); const { onMenuToggle } = useLayout();
@ -17,15 +18,6 @@ const submitted = ref(false);
const toast = useToast(); const toast = useToast();
const menu = ref(); const menu = ref();
const items = 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', label: 'Change password',
icon: 'pi pi-key', icon: 'pi pi-key',
@ -34,6 +26,15 @@ const items = ref([
submitted.value = false; submitted.value = false;
user.value = {}; 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; submitted.value = true;
console.log(user.value);
var pass = var pass =
{ {
password: user.value.current_password, password: user.value.current_password,
new_password: user.value.new_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 token = localStorage.getItem("token");
var decoded = jwt_decode(token); var decoded = jwt_decode(token);
try { 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) { if (response.status !== 204) {
console.error(response); console.error(response);
} }
} }
catch (error) { catch (error) {
console.error(error); console.error(error);
} }
} }
const hideDialog = () => {
changePasswordDialog.value = false;
submitted.value = false;
};
const onTopBarMenuButton = () => { const onTopBarMenuButton = () => {
@ -129,29 +142,29 @@ const isOutsideClicked = (event) => {
<Dialog v-model:visible="changePasswordDialog" :style="{ width: '450px' }" header="Change Password" <Dialog v-model:visible="changePasswordDialog" :style="{ width: '450px' }" header="Change Password"
:modal="true" class="p-fluid"> :modal="true" class="p-fluid">
<Toast />
<div class="field"> <div class="field">
<label for="current_password">Current Password</label> <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 }" /> :class="{ 'p-invalid': submitted && !user.current_password }" />
<small class="p-invalid" v-if="submitted && !user.current_password">Actual password is required.</small> <small class="p-invalid" v-if="submitted && !user.current_password">Actual password is required.</small>
</div> </div>
<div class="field"> <div class="field">
<label for="new_password">New Password</label> <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 }" /> :class="{ 'p-invalid': submitted && !user.new_password }" />
<small class="p-invalid" v-if="submitted && !user.new_password">New password is required.</small> <small class="p-invalid" v-if="submitted && !user.new_password">New password is required.</small>
</div> </div>
<div class="field"> <div class="field">
<label for="confirm_new_password">Confirm new Password</label> <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 }" /> :class="{ 'p-invalid': submitted && !user.confirm_new_password }" />
<small class="p-invalid" v-if="submitted && !user.confirm_new_password">Confirm the new password is <small class="p-invalid" v-if="submitted && !user.confirm_new_password">Confirm the new password is
required.</small> required.</small>
</div> </div>
<template #footer> <template #footer>
<Button label="Cancel" icon="pi pi-times" class="p-button-text" @click="hideDialog" /> <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> </template>
</Dialog> </Dialog>
</div> </div>

View File

@ -2,12 +2,16 @@
import { ref, watch, onMounted } from 'vue'; import { ref, watch, onMounted } from 'vue';
import { useLayout } from '@/layout/composables/layout'; import { useLayout } from '@/layout/composables/layout';
import auth from '../utils/Auth'; import auth from '../utils/Auth';
import { useToast } from 'primevue/usetoast';
import axios from 'axios';
const { layoutConfig } = useLayout(); const { layoutConfig } = useLayout();
const toast = useToast();
let documentStyle = getComputedStyle(document.documentElement); let documentStyle = getComputedStyle(document.documentElement);
let textColor = documentStyle.getPropertyValue('--text-color'); let textColor = documentStyle.getPropertyValue('--text-color');
let textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); let textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
let surfaceBorder = documentStyle.getPropertyValue('--surface-border'); let surfaceBorder = documentStyle.getPropertyValue('--surface-border');
const time_elapsed = ref([]);
const lineData = ref(null); const lineData = ref(null);
const lineOptions = ref(null); const lineOptions = ref(null);
@ -18,9 +22,22 @@ const setColorOptions = () => {
textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary'); textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
surfaceBorder = documentStyle.getPropertyValue('--surface-border'); 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 = { lineData.value = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], labels: [0],
datasets: [ datasets: [
{ {
label: 'First Dataset', label: 'First Dataset',
@ -75,7 +92,7 @@ watch(
layoutConfig.theme, layoutConfig.theme,
() => { () => {
setColorOptions(); setColorOptions();
setChart(); //setChart();
}, },
{ immediate: true } { immediate: true }
); );
@ -94,8 +111,8 @@ const checkAuth = () => {
<div class="grid p-fluid"> <div class="grid p-fluid">
<div class="col-12 xl:col-2"> <div class="col-12 xl:col-2">
<span class="p-float-label"> <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> </span>
</div> </div>
</div> </div>
@ -105,6 +122,7 @@ const checkAuth = () => {
<div class="col-12 xl:col-6"> <div class="col-12 xl:col-6">
<div class="card"> <div class="card">
<h5>Linear Chart</h5> <h5>Linear Chart</h5>
<button @click="setChart">hola</button>
<Chart type="line" :data="lineData" :options="lineOptions"></Chart> <Chart type="line" :data="lineData" :options="lineOptions"></Chart>
</div> </div>
</div> </div>

View File

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