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

Showing spinner when loading nodes.

Browse source
This commit is contained in:
baldo 2022-06-12 13:04:23 +02:00
parent 87839f4faa
commit 5b703917b5
4 changed files with 104 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
frontend/src/components/LoadingContainer.vue Normal file
View file

@ -0,0 +1,35 @@
<script setup lang="ts">
import Spinner from "@/components/Spinner.vue";
const props = defineProps({
loading: {
type: Boolean,
required: true,
}
});
</script>
<template>
<div :class="{ 'loading-container': true, loading: loading }">
<Spinner class="spinner" v-if="loading" />
<div class="content" v-if="!loading">
<slot></slot>
</div>
</div>
</template>
<style lang="scss" scoped>
@import "../scss/variables";
.loading-container {
position: relative;
padding: 0;
margin: 0;
&.loading {
height: 10em;
}
}
</style>

29
frontend/src/components/Spinner.vue Normal file
View file

@ -0,0 +1,29 @@
<script setup lang="ts">
</script>
<template>
<div class="spinner-container">
<div class="spinner">
<i class="fa fa-refresh fa-spin fa-3x" aria-hidden="true" />
<span class="sr-only">Lädt...</span>
</div>
</div>
</template>
<style lang="scss" scoped>
@import "../scss/variables";
.spinner-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
color: $page-text-color;
}
</style>

1
frontend/src/stores/nodes.ts
View file

@ -38,7 +38,6 @@ export const useNodesStore = defineStore({
},
actions: {
async refresh(page: number, nodesPerPage: number): Promise<void> {
// TODO: Handle paging
const result = await internalApi.getPagedList<EnhancedNode>(
"nodes",
isEnhancedNode,

66
frontend/src/views/AdminNodesView.vue
View file

@ -3,17 +3,28 @@ import {useNodesStore} from "@/stores/nodes";
import {onMounted, ref} from "vue";
import type {EnhancedNode, MAC} from "@/types";
import Pager from "@/components/Pager.vue";
import LoadingContainer from "@/components/LoadingContainer.vue";
const NODE_PER_PAGE = 50;
type NodeRedactField = "nickname" | "email" | "token";
type NodeRedactFieldsMap = Partial<Record<NodeRedactField, boolean>>;
type NodesRedactFieldsMap = Partial<Record<MAC, NodeRedactFieldsMap>>;
type NodesRedactFieldsMap = Partial<Record<MAC, NodeRedactFieldsMap>>;
const nodes = useNodesStore();
const redactFieldsByDefault = ref(true);
const nodesRedactFieldsMap = ref({} as NodesRedactFieldsMap)
const loading = ref(false);
async function refresh(page: number): Promise<void> {
await nodes.refresh(page, 50);
loading.value = true;
redactAllFields(true);
try {
await nodes.refresh(page, NODE_PER_PAGE);
} finally {
loading.value = false;
}
}
function redactAllFields(shallRedactFields: boolean): void {
@ -46,7 +57,7 @@ onMounted(async () => await refresh(1));
<h2>Knoten</h2>
<div>
<span>Gesamt: {{nodes.getTotalNodes}}</span>
<span>Gesamt: {{ nodes.getTotalNodes }}</span>
<button
v-if="redactFieldsByDefault"
@click="redactAllFields(false)">
@ -63,10 +74,11 @@ onMounted(async () => await refresh(1));
:page="nodes.getPage"
:itemsPerPage="nodes.getNodesPerPage"
:totalItems="nodes.getTotalNodes"
@changePage="refresh" />
@changePage="refresh"/>
<table>
<thead>
<LoadingContainer :loading="loading">
<table>
<thead>
<tr>
<th>Name</th>
<th>Besitzer*in</th>
@ -80,13 +92,13 @@ onMounted(async () => await refresh(1));
<th>Status</th>
<th>Monitoring</th>
</tr>
</thead>
</thead>
<tbody>
<tbody>
<tr
v-for="node in nodes.getNodes"
:class="[node.onlineState ? node.onlineState.toLowerCase() : 'online-state-unknown']">
<td>{{node.hostname}}</td>
<td>{{ node.hostname }}</td>
<td v-if="shallRedactField(node, 'nickname')">
<span
class="redacted"
@ -98,7 +110,7 @@ onMounted(async () => await refresh(1));
<span
class="redactable"
@click="setRedactField(node, 'nickname', true)">
{{node.nickname}}
{{ node.nickname }}
</span>
</td>
<td v-if="shallRedactField(node, 'email')">
@ -112,7 +124,7 @@ onMounted(async () => await refresh(1));
<span
class="redactable"
@click="setRedactField(node, 'email', true)">
{{node.email}}
{{ node.email }}
</span>
</td>
<td v-if="shallRedactField(node, 'token')">
@ -126,68 +138,70 @@ onMounted(async () => await refresh(1));
<span
class="redactable"
@click="setRedactField(node, 'token', true)">
{{node.token}}
{{ node.token }}
</span>
</td>
<td>{{node.mac}}</td>
<td>{{ node.mac }}</td>
<td class="icon">
<i
v-if="node.key"
class="fa fa-lock"
aria-hidden="true"
title="Hat VPN-Schlüssel" />
title="Hat VPN-Schlüssel"/>
<i
v-if="!node.key"
class="fa fa-times not-available"
aria-hidden="true"
title="Hat keinen VPN-Schlüssel" />
title="Hat keinen VPN-Schlüssel"/>
</td>
<td>{{node.site}}</td>
<td>{{node.domain}}</td>
<td>{{ node.site }}</td>
<td>{{ node.domain }}</td>
<td class="icon">
<i
v-if="node.coords"
class="fa fa-map-marker"
aria-hidden="true"
title="Hat Koordinaten" />
title="Hat Koordinaten"/>
<i
v-if="!node.coords"
class="fa fa-times not-available"
aria-hidden="true"
title="Hat keinen Koordinaten" />
title="Hat keinen Koordinaten"/>
</td>
<td v-if="node.onlineState !== undefined">{{node.onlineState.toLowerCase()}}</td>
<td v-if="node.onlineState !== undefined">{{ node.onlineState.toLowerCase() }}</td>
<td v-if="node.onlineState === undefined">unbekannt</td>
<td class="icon">
<i
v-if="node.monitoring && node.monitoringConfirmed"
class="fa fa-heartbeat"
aria-hidden="true"
title="Monitoring aktiv" />
title="Monitoring aktiv"/>
<i
v-if="node.monitoring && !node.monitoringConfirmed"
class="fa fa-envelope"
aria-hidden="true"
title="Monitoring nicht bestätigt" />
title="Monitoring nicht bestätigt"/>
<i
v-if="!node.monitoring"
class="fa fa-times not-available"
aria-hidden="true"
title="Monitoring deaktiviert" />
title="Monitoring deaktiviert"/>
</td>
</tr>
</tbody>
</table>
</tbody>
</table>
</LoadingContainer>
<Pager
:page="nodes.getPage"
:itemsPerPage="nodes.getNodesPerPage"
:totalItems="nodes.getTotalNodes"
@changePage="refresh" />
@changePage="refresh"/>
</template>
<style lang="scss" scoped>
@import "../scss/variables";
table {
border-collapse: collapse;