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

minor fixes to Users,OS crud

This commit is contained in:
Martin Araneda 2023-02-14 18:23:22 -03:00
parent e26ed450fa
commit 3b03b4ba31
4 changed files with 118 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,6 @@ import jwt_decode from 'jwt-decode';
import auth from '../utils/Auth';
const { onMenuToggle } = useLayout();
const outsideClickListener = ref(null);
const topbarMenuActive = ref(false);
const changePasswordDialog = ref(false);
@ -58,8 +57,7 @@ const onClickPasswordChange = () => {
password: user.value.current_password,
new_password: user.value.new_password
};
if (user.value.new_password != user.value.confirm_new_password) {
console.log("gola");
if (user.value.new_password !== user.value.confirm_new_password) {
toast.add({ severity: 'error', summary: 'Error', detail: 'Passwords are not the same', life: 3000 });
return;
}
@ -67,6 +65,7 @@ const onClickPasswordChange = () => {
}
async function savePassword(pass) {
submitted.value = true;
var token = localStorage.getItem("token");
var decoded = jwt_decode(token);
try {
@ -145,21 +144,23 @@ const isOutsideClicked = (event) => {
<Toast />
<div class="field">
<label for="current_password">Current Password</label>
<Password id="current_password" v-model.trim="user.current_password" required="true" autofocus
<Password id="current_password" v-model.trim="user.current_password" autofocus
: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">Current password is
required.</small>
</div>
<div class="field">
<label for="new_password">New Password</label>
<Password id="new_password" v-model.trim="user.new_password" required="true"
<Password id="new_password" v-model.trim="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>
</div>
<div class="field">
<label for="confirm_new_password">Confirm new Password</label>
<Password id="confirm_new_password" v-model.trim="user.confirm_new_password" required="true"
<Password id="confirm_new_password" v-model.trim="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>
</div>
<template #footer>

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

@ -12,6 +12,7 @@ let textColor = documentStyle.getPropertyValue('--text-color');
let textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
let surfaceBorder = documentStyle.getPropertyValue('--surface-border');
const time_elapsed = ref([]);
const coins = ref([]);
const lineData = ref(null);
const lineOptions = ref(null);
@ -25,10 +26,12 @@ const setColorOptions = () => {
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);
time_elapsed.value = response.data.map(frame => {
return Math.floor(frame.elapsed_time / 1000);
});
coins.value = response.data.map(frame => {
return frame.coins;
});
}
catch (error) {
console.error(error);
@ -37,23 +40,15 @@ async function setChart() {
/////////////////////////////////
lineData.value = {
labels: [0],
labels: time_elapsed.value,
datasets: [
{
label: 'First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
label: 'Game 4',
data: coins.value,
fill: false,
backgroundColor: documentStyle.getPropertyValue('--primary-500'),
borderColor: documentStyle.getPropertyValue('--primary-500'),
tension: 0.4
},
{
label: 'Second Dataset',
data: [28, 48, 40, 19, 86, 27, 90],
fill: false,
backgroundColor: documentStyle.getPropertyValue('--primary-200'),
borderColor: documentStyle.getPropertyValue('--primary-200'),
tension: 0.4
}
]
};
@ -67,7 +62,12 @@ async function setChart() {
}
},
scales: {
x: {
title: {
display: true,
text: "Time(s)"
},
ticks: {
color: textColorSecondary
},
@ -77,6 +77,10 @@ async function setChart() {
}
},
y: {
title: {
display: true,
text: "Coins"
},
ticks: {
color: textColorSecondary
},
@ -99,6 +103,7 @@ watch(
onMounted(() => {
checkAuth();
setChart();
})
const checkAuth = () => {
@ -111,8 +116,6 @@ 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> -->
</span>
</div>
</div>
@ -122,7 +125,6 @@ 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>

101
frontend/src/views/OsCrud.vue
View File

@ -6,13 +6,13 @@ import axios from 'axios';
import auth from '../utils/Auth';
const toast = useToast();
const products = ref(null);
const productDialog = ref(false);
const productDialogChange = ref(false);
const deleteProductDialog = ref(false);
const deleteProductsDialog = ref(false);
const users = ref(null);
const userDialog = ref(false);
const userDialogChange = ref(false);
const deleteUserDialog = ref(false);
const deleteUsersDialog = ref(false);
const os = ref({});
const selectedProducts = ref(null);
const selectedUsers = ref(null);
const dt = ref(null);
const filters = ref({});
const submitted = ref(false);
@ -20,11 +20,11 @@ const checkAuth = () => {
auth.checkToken(true);
};
async function onShowClick() {
async function showTable() {
try {
const response = await axios.get(`http://localhost:3001/os`);
console.log(response.data);
products.value = response.data;
users.value = response.data;
}
catch (error) {
console.error(error);
@ -45,7 +45,8 @@ async function onCreateClick() {
if (response.status === 204) {
toast.add({ severity: 'success', summary: 'Successful', detail: 'OS Created', life: 3000 });
productDialog.value = false;
userDialog.value = false;
showTable();
}
else {
console.error(response);
@ -62,28 +63,29 @@ onBeforeMount(() => {
});
onMounted(() => {
checkAuth();
showTable();
});
const openNew = () => {
os.value = {};
submitted.value = false;
productDialog.value = true;
userDialog.value = true;
};
const hideDialog = () => {
productDialog.value = false;
userDialog.value = false;
submitted.value = false;
};
const hideDialogChange = () => {
productDialogChange.value = false;
userDialogChange.value = false;
submitted.value = false;
};
const editProduct = (editProduct) => {
os.value = { ...editProduct };
const editUser = (editUser) => {
os.value = { ...editUser };
console.log(os.value.ID);
productDialogChange.value = true;
userDialogChange.value = true;
};
async function onChangeOS() {
var changeOS =
@ -96,7 +98,8 @@ async function onChangeOS() {
if (response.status === 204) {
toast.add({ severity: 'success', summary: 'Successful', detail: 'OS Modified', life: 3000 });
productDialogChange.value = false;
userDialogChange.value = false;
showTable();
}
else {
console.error(response);
@ -107,33 +110,34 @@ async function onChangeOS() {
}
}
const confirmDeleteProduct = (editProduct) => {
os.value = editProduct;
deleteProductDialog.value = true;
const confirmDeleteUser = (editUser) => {
os.value = editUser;
deleteUserDialog.value = true;
};
async function deleteProduct() {
async function deleteUser() {
try {
const response = await axios.delete(`http://localhost:3001/os/` + os.value.ID, auth.getTokenHeader());
if (response.status !== 204) {
console.error(response);
}
showTable();
}
catch (error) {
console.error(error);
}
products.value = products.value.filter((val) => val.ID !== os.value.ID);
deleteProductDialog.value = false;
users.value = users.value.filter((val) => val.ID !== os.value.ID);
deleteUserDialog.value = false;
os.value = {};
toast.add({ severity: 'success', summary: 'Successful', detail: 'OS Deleted', life: 3000 });
};
const confirmDeleteSelected = () => {
deleteProductsDialog.value = true;
deleteUsersDialog.value = true;
};
const deleteSelectedProducts = () => {
selectedProducts.value.forEach(element => {
const deleteSelectedUsers = () => {
selectedUsers.value.forEach(element => {
try {
const response = axios.delete(`http://localhost:3001/os/` + element.ID, auth.getTokenHeader());
if (response.status !== 204) {
@ -145,12 +149,12 @@ const deleteSelectedProducts = () => {
}
});
console.log(selectedProducts.value);
console.log(selectedUsers.value);
products.value = products.value.filter((val) => !selectedProducts.value.includes(val));
deleteProductsDialog.value = false;
selectedProducts.value = null;
toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
users.value = users.value.filter((val) => !selectedUsers.value.includes(val));
deleteUsersDialog.value = false;
selectedUsers.value = null;
toast.add({ severity: 'success', summary: 'Successful', detail: 'Users Deleted', life: 3000 });
};
const initFilters = () => {
@ -169,25 +173,23 @@ const initFilters = () => {
<template v-slot:start>
<div class="my-2">
<Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" />
<Button label="Show" icon="pi pi-eye" class="p-button-success mr-2" @click="onShowClick" />
<Button label="Delete" icon="pi pi-trash" class="p-button-danger"
@click="confirmDeleteSelected"
:disabled="!selectedProducts || !selectedProducts.length" />
@click="confirmDeleteSelected" :disabled="!selectedUsers || !selectedUsers.length" />
</div>
</template>
</Toolbar>
<DataTable ref="dt" :value="products" v-model:selection="selectedProducts" dataKey="ID"
:paginator="true" :rows="10" :filters="filters"
<DataTable ref="dt" :value="users" v-model:selection="selectedUsers" dataKey="ID" :paginator="true"
:rows="10" :filters="filters"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
:rowsPerPageOptions="[5, 10, 25]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} users"
responsiveLayout="scroll">
<template #header>
<div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
<h5 class="m-0">Manage Products</h5>
<h5 class="m-0">Manage Users</h5>
<span class="block mt-2 md:mt-0 p-input-icon-left">
<i class="pi pi-search" />
<InputText v-model="filters['global'].value" placeholder="Search..." />
@ -205,14 +207,14 @@ const initFilters = () => {
<Column headerStyle="min-width:10rem;">
<template #body="slotProps">
<Button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2"
@click="editProduct(slotProps.data)" />
@click="editUser(slotProps.data)" />
<Button icon="pi pi-trash" class="p-button-rounded p-button-warning mt-2"
@click="confirmDeleteProduct(slotProps.data)" />
@click="confirmDeleteUser(slotProps.data)" />
</template>
</Column>
</DataTable>
<Dialog v-model:visible="productDialog" :style="{ width: '450px' }" header="New OS" :modal="true"
<Dialog v-model:visible="userDialog" :style="{ width: '450px' }" header="New OS" :modal="true"
class="p-fluid">
<div class="field">
<label for="name">Name</label>
@ -225,7 +227,7 @@ const initFilters = () => {
<Button label="Save" icon="pi pi-check" class="p-button-text" @click="onCreateClick" />
</template>
</Dialog>
<Dialog v-model:visible="productDialogChange" :style="{ width: '450px' }" header="New OS" :modal="true"
<Dialog v-model:visible="userDialogChange" :style="{ width: '450px' }" header="New OS" :modal="true"
class="p-fluid">
<div class="field">
<label for="name">Name</label>
@ -239,29 +241,26 @@ const initFilters = () => {
</template>
</Dialog>
<Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm"
:modal="true">
<Dialog v-model:visible="deleteUserDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
<div class="flex align-items-center justify-content-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
<span v-if="os">Are you sure you want to delete <b>{{ os.name }}</b>?</span>
</div>
<template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text"
@click="deleteProductDialog = false" />
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" />
<Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteUserDialog = false" />
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteUser" />
</template>
</Dialog>
<Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm"
:modal="true">
<Dialog v-model:visible="deleteUsersDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
<div class="flex align-items-center justify-content-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
<span v-if="os">Are you sure you want to delete the selected products?</span>
<span v-if="os">Are you sure you want to delete the selected users?</span>
</div>
<template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text"
@click="deleteProductsDialog = false" />
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" />
@click="deleteUsersDialog = false" />
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedUsers" />
</template>
</Dialog>
</div>

80
frontend/src/views/UserCrud.vue
View File

@ -6,12 +6,12 @@ import axios from 'axios';
import auth from '../utils/Auth';
const toast = useToast();
const products = ref(null);
const users = ref(null);
const productDialog = ref(false);
const deleteProductDialog = ref(false);
const deleteProductsDialog = ref(false);
const deleteUserDialog = ref(false);
const deleteUsersDialog = ref(false);
const user = ref({});
const selectedProducts = ref(null);
const selectedUsers = ref(null);
const dt = ref(null);
const filters = ref({});
const submitted = ref(false);
@ -20,11 +20,10 @@ const checkAuth = () => {
auth.checkToken(true);
};
async function onShowClick() {
async function showTable() {
try {
const response = await axios.get(`http://localhost:3001/user`, auth.getTokenHeader());
console.log(response.data);
products.value = response.data;
users.value = response.data;
}
catch (error) {
console.error(error);
@ -54,6 +53,7 @@ async function onCreateClick() {
if (response.status === 204) {
toast.add({ severity: 'success', summary: 'Successful', detail: 'User Created', life: 3000 });
productDialog.value = false;
showTable();
}
else {
console.error(response);
@ -70,6 +70,7 @@ onBeforeMount(() => {
});
onMounted(() => {
checkAuth();
showTable();
});
const openNew = () => {
@ -88,9 +89,9 @@ const hideDialogChange = () => {
submitted.value = false;
};
const editProduct = (editProduct) => {
const editUser = (editUser) => {
user.value = { ...editProduct };
user.value = { ...editUser };
console.log(user);
productDialogChange.value = true;
};
@ -108,6 +109,7 @@ async function onChangeUser() {
if (response.status === 204) {
toast.add({ severity: 'success', summary: 'Successful', detail: 'User Modified', life: 3000 });
productDialogChange.value = false;
showTable();
}
else {
console.error(response);
@ -118,33 +120,34 @@ async function onChangeUser() {
}
}
const confirmDeleteProduct = (editProduct) => {
user.value = editProduct;
deleteProductDialog.value = true;
const confirmDeleteUser = (editUser) => {
user.value = editUser;
deleteUserDialog.value = true;
};
async function deleteProduct() {
async function deleteUser() {
try {
const response = await axios.delete(`http://localhost:3001/user/` + user.value.ID, auth.getTokenHeader());
if (response.status !== 204) {
console.error(response);
}
showTable();
}
catch (error) {
console.error(error);
}
products.value = products.value.filter((val) => val.ID !== user.value.ID);
deleteProductDialog.value = false;
users.value = users.value.filter((val) => val.ID !== user.value.ID);
deleteUserDialog.value = false;
user.value = {};
toast.add({ severity: 'success', summary: 'Successful', detail: 'User Deleted', life: 3000 });
};
const confirmDeleteSelected = () => {
deleteProductsDialog.value = true;
deleteUsersDialog.value = true;
};
const deleteSelectedProducts = () => {
selectedProducts.value.forEach(element => {
const deleteSelectedUsers = () => {
selectedUsers.value.forEach(element => {
try {
const response = axios.delete(`http://localhost:3001/user/` + element.ID, auth.getTokenHeader());
if (response.status !== 204) {
@ -156,12 +159,12 @@ const deleteSelectedProducts = () => {
}
});
console.log(selectedProducts.value);
console.log(selectedUsers.value);
products.value = products.value.filter((val) => !selectedProducts.value.includes(val));
deleteProductsDialog.value = false;
selectedProducts.value = null;
toast.add({ severity: 'success', summary: 'Successful', detail: 'Products Deleted', life: 3000 });
users.value = users.value.filter((val) => !selectedUsers.value.includes(val));
deleteUsersDialog.value = false;
selectedUsers.value = null;
toast.add({ severity: 'success', summary: 'Successful', detail: 'Users Deleted', life: 3000 });
};
const initFilters = () => {
@ -180,21 +183,19 @@ const initFilters = () => {
<template v-slot:start>
<div class="my-2">
<Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" />
<Button label="Show" icon="pi pi-eye" class="p-button-success mr-2" @click="onShowClick" />
<Button label="Delete" icon="pi pi-trash" class="p-button-danger"
@click="confirmDeleteSelected"
:disabled="!selectedProducts || !selectedProducts.length" />
@click="confirmDeleteSelected" :disabled="!selectedUsers || !selectedUsers.length" />
</div>
</template>
</Toolbar>
<DataTable ref="dt" :value="products" v-model:selection="selectedProducts" dataKey="ID"
:paginator="true" :rows="10" :filters="filters"
<DataTable ref="dt" :value="users" v-model:selection="selectedUsers" dataKey="ID" :paginator="true"
:rows="10" :filters="filters"
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
:rowsPerPageOptions="[5, 10, 25]"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} users"
responsiveLayout="scroll">
<template #header>
<div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
@ -229,9 +230,9 @@ const initFilters = () => {
<Column headerStyle="min-width:10rem;">
<template #body="slotProps">
<Button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2"
@click="editProduct(slotProps.data)" />
@click="editUser(slotProps.data)" />
<Button icon="pi pi-trash" class="p-button-rounded p-button-warning mt-2"
@click="confirmDeleteProduct(slotProps.data)" />
@click="confirmDeleteUser(slotProps.data)" />
</template>
</Column>
</DataTable>
@ -287,29 +288,26 @@ const initFilters = () => {
</template>
</Dialog>
<Dialog v-model:visible="deleteProductDialog" :style="{ width: '450px' }" header="Confirm"
:modal="true">
<Dialog v-model:visible="deleteUserDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
<div class="flex align-items-center justify-content-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
<span v-if="user">Are you sure you want to delete <b>{{ user.name }}</b>?</span>
</div>
<template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text"
@click="deleteProductDialog = false" />
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" />
<Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteUserDialog = false" />
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteUser" />
</template>
</Dialog>
<Dialog v-model:visible="deleteProductsDialog" :style="{ width: '450px' }" header="Confirm"
:modal="true">
<Dialog v-model:visible="deleteUsersDialog" :style="{ width: '450px' }" header="Confirm" :modal="true">
<div class="flex align-items-center justify-content-center">
<i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
<span v-if="user">Are you sure you want to delete the selected products?</span>
<span v-if="user">Are you sure you want to delete the selected users?</span>
</div>
<template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text"
@click="deleteProductsDialog = false" />
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" />
@click="deleteUsersDialog = false" />
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedUsers" />
</template>
</Dialog>
</div>