add new statistic page

src/pages/StatsPage.vue

@@ -0,0 +1,116 @@
+<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 } 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 () => {
+  stats.value = await appApi
+    .post('/stats', { database: databaseName.value })
+    .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>