Files
memberApp/src/pages/StatsPage.vue
2026-02-19 10:49:12 +01:00

119 lines
3.8 KiB
Vue

<template>
<site-title :title="$t('stats')" />
<q-card class="q-ma-md">
<q-card-section>
<div class="row q-ma-md q-gutter-md">
<q-card class="row col-auto">
<div class="col">
<h5 class="text-primary q-ma-md">{{ i18n.global.t('database') }}</h5>
<q-card-section>
<div class="column q-gutter-y-sm">
<div class="row items-center">
<p class="text-bold" style="min-width: 180px">
{{ i18n.global.t('databaseSize') }}:
</p>
<p class="q-ml-md">{{ stats }}</p>
</div>
<div class="row items-center">
<p class="text-bold" style="min-width: 180px">
{{ i18n.global.t('numberOfMembers') }}:
</p>
<p class="q-ml-md">{{ amounts?.members }}</p>
</div>
<div class="row items-center">
<p class="text-bold" style="min-width: 180px">
{{ i18n.global.t('numberOfEvents') }}:
</p>
<p class="q-ml-md">{{ amounts?.events }}</p>
</div>
<div class="row items-center">
<p class="text-bold" style="min-width: 180px">
{{ i18n.global.t('numberOfResponsibles') }}:
</p>
<p class="q-ml-md">{{ amounts?.responsibles }}</p>
</div>
<div class="row items-center">
<p class="text-bold" style="min-width: 180px">
{{ i18n.global.t('numberOfGroups') }}:
</p>
<p class="q-ml-md">{{ amounts?.groups }}</p>
</div>
</div>
</q-card-section>
</div>
</q-card>
</div>
</q-card-section>
</q-card>
</template>
<script setup lang="ts">
import { appApi } from 'src/boot/axios';
import { i18n } from 'src/boot/lang';
import SiteTitle from 'src/vueLib/general/SiteTitle.vue';
import { useNotify } from 'src/vueLib/general/useNotify';
import { databaseName, workspace } from 'src/vueLib/models/settings';
import { onMounted, ref } from 'vue';
const stats = ref();
const amounts = ref<{
members: number;
events: number;
responsibles: number;
groups: number;
}>({
members: 0,
events: 0,
responsibles: 0,
groups: 0,
});
const { NotifyResponse } = useNotify();
onMounted(async () => {
let path = databaseName.value;
if (workspace.value !== '') path = workspace.value + '/' + path;
stats.value = await appApi
.post('/stats', { database: path })
.then((resp) => {
if ((resp.data.databaseSize as number) >= 1000000000) {
return (resp.data.data.databaseSize / 1000000000).toFixed(2) + ' GB';
} else if ((resp.data.data.databaseSize as number) >= 1000000) {
return (resp.data.data.databaseSize / 1000000).toFixed(2) + ' MB';
} else if ((resp.data.data.databaseSize as number) >= 1000) {
return (resp.data.data.databaseSize / 1000).toFixed(2) + ' kB';
}
return resp.data.data.databaseSize + ' B';
})
.catch((err) => NotifyResponse(err, 'error'));
amounts.value.members = await appApi
.get('/members')
.then((resp) => {
return resp.data.length;
})
.catch((err) => NotifyResponse(err, 'error'));
amounts.value.events = await appApi
.get('/events')
.then((resp) => {
return resp.data.length;
})
.catch((err) => NotifyResponse(err, 'error'));
amounts.value.responsibles = await appApi
.get('responsible')
.then((resp) => {
return resp.data.length;
})
.catch((err) => NotifyResponse(err, 'error'));
amounts.value.groups = await appApi
.get('/groups')
.then((resp) => {
return resp.data.length;
})
.catch((err) => NotifyResponse(err, 'error'));
});
</script>