freifunk/ffffng
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Statistics styling

Browse source
This commit is contained in:
baldo 2022-05-23 13:23:37 +02:00
commit 3ce2ba5013
6 changed files with 198 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

58
frontend/src/views/AdminDashboardView.vue
View file

@ -1,4 +1,5 @@
<script setup lang="ts">
import StatisticsCard from "@/components/admin/StatisticsCard.vue";
import { useStatisticsStore } from "@/stores/statistics";
const statistics = useStatisticsStore();
@ -13,18 +14,57 @@ refresh();
<template>
<main>
<div v-if="statistics.getStatistics">
<h1>Nodes</h1>
<h2>Knotenstatistik</h2>
<div>
Registered: {{ statistics.getStatistics.nodes.registered }}<br />
With VPN-key: {{ statistics.getStatistics.nodes.withVPN }}<br />
With coordinates: {{ statistics.getStatistics.nodes.withCoords }}<br />
Monitoring active: {{ statistics.getStatistics.nodes.monitoring.active }}<br />
Monitoring pending: {{ statistics.getStatistics.nodes.monitoring.pending }}
<div class="statistics">
<StatisticsCard
title="Registrierte Knoten"
icon="circle-o"
variant="info"
:value="statistics.getStatistics.nodes.registered"
link="/admin/nodes"
/>
<StatisticsCard
title="Mit hinterlegtem fastd-Key"
icon="lock"
variant="warning"
:value="statistics.getStatistics.nodes.withVPN"
link="/admin/nodes"
:filter="{hasKey: true}"
/>
<StatisticsCard
title="Mit Koordinaten"
icon="map-marker"
variant="success"
:value="statistics.getStatistics.nodes.withCoords"
link="/admin/nodes"
:filter="{hasCoords: true}"
/>
<StatisticsCard
title="Monitoring aktiv"
icon="heartbeat"
variant="success"
:value="statistics.getStatistics.nodes.monitoring.active"
link="/admin/nodes"
:filter="{monitoringState: 'active'}"
/>
<StatisticsCard
title="Monitoring noch nicht bestätigt"
icon="envelope"
variant="danger"
:value="statistics.getStatistics.nodes.monitoring.pending"
link="/admin/nodes"
:filter="{monitoringState: 'pending'}"
/>
</div>
<button @click="refresh()">Refresh</button>
</div>
</main>
</template>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.statistics {
display: grid;
// TODO: Responsive sizes
grid-template-columns: repeat(auto-fill, minmax(25%, 100%));
}
</style>