minor fixes to topbar, chart
This commit is contained in:
parent
c040b8a75c
commit
776b9b70e2
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user