Add data tables to admin dash view

This commit is contained in:
Trenton Zimmer 2024-10-17 09:35:42 -04:00
parent aa1d978dd6
commit b2d308297a

View File

@ -6,6 +6,7 @@ import CardBox from "@/components/CardBox.vue";
import CardBoxWidget from "@/components/CardBoxWidget.vue";
import LayoutAuthenticated from "@/layouts/LayoutAuthenticated.vue";
import SectionTitleLine from "@/components/SectionTitleLine.vue";
import GeneralTable from "@/components/GeneralTable.vue";
import { APIAdminDashboard } from "@/stores/api/admin";
const dashboardData = ref({});
@ -20,6 +21,99 @@ onMounted(async () => {
console.log("Failed to fetch admin data:", error);
}
});
const eventHeaders = [
{
text: "Timestamp",
value: "timestamp",
width: 120,
},
{
text: "IP Address",
value: "data.ip",
width: 120,
},
{
text: "Game",
value: "data.model",
width: 120,
},
{
text: "PCBID",
value: "data.pcbid",
width: 120,
},
{
text: "Name",
value: "data.name",
width: 120,
},
{
text: "Value",
value: "data.value",
width: 120,
},
];
const transactionHeaders = [
{
text: "Timestamp",
value: "timestamp",
width: 120,
},
{
text: "PCBID",
value: "data.pcbid",
width: 120,
},
{
text: "Delta",
value: "data.delta",
width: 120,
},
{
text: "Remaining Balance",
value: "data.balance",
width: 120,
},
{
text: "Reason",
value: "data.reason",
width: 120,
},
];
function formatTransactions(events) {
var formattedItems = [];
for (var item of events) {
if (item.type == "paseli_transaction") {
if (item.timestamp) {
const date = new Date(item.timestamp * 1000);
item.timestamp = date.toLocaleString();
}
formattedItems.push(item);
}
}
return formattedItems;
}
function formatEvents(events) {
var formattedItems = [];
for (var item of events) {
if (item.type == "pcbevent") {
if (item.timestamp) {
const date = new Date(item.timestamp * 1000);
item.timestamp = date.toLocaleString();
}
formattedItems.push(item);
}
}
return formattedItems;
}
</script>
<template>
@ -79,8 +173,36 @@ onMounted(async () => {
/>
</div>
<SectionTitleLine :icon="mdiFlagCheckered" title="Recent Errors" />
<CardBox> </CardBox>
<SectionTitleLine :icon="mdiFlagCheckered" title="Recent PCB Events" />
<CardBox has-table>
<div
class="bg-white dark:bg-slate-900/95 rounded-2xl lg:flex lg:justify-between"
>
<div class="w-full">
<GeneralTable
:headers="eventHeaders"
:items="formatEvents(dashboardData?.audit)"
/>
</div>
</div>
</CardBox>
<SectionTitleLine
:icon="mdiFlagCheckered"
title="Recent PASELI Transactions"
/>
<CardBox has-table>
<div
class="bg-white dark:bg-slate-900/95 rounded-2xl lg:flex lg:justify-between"
>
<div class="w-full">
<GeneralTable
:headers="transactionHeaders"
:items="formatTransactions(dashboardData?.audit)"
/>
</div>
</div>
</CardBox>
</template>
</SectionMain>
</LayoutAuthenticated>