Showing spinner when loading nodes.

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

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>

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>

View file

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

View file

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