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 { 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>
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user