From 5b703917b560cfdcd18b1fbb98a99b5a02c0bb2a Mon Sep 17 00:00:00 2001
From: baldo <baldo@toppoint.de>
Date: Sun, 12 Jun 2022 13:04:23 +0200
Subject: [PATCH] Showing spinner when loading nodes.

---
 frontend/src/components/LoadingContainer.vue | 35 +++++++++++
 frontend/src/components/Spinner.vue          | 29 +++++++++
 frontend/src/stores/nodes.ts                 |  1 -
 frontend/src/views/AdminNodesView.vue        | 66 ++++++++++++--------
 4 files changed, 104 insertions(+), 27 deletions(-)
 create mode 100644 frontend/src/components/LoadingContainer.vue
 create mode 100644 frontend/src/components/Spinner.vue

diff --git a/frontend/src/components/LoadingContainer.vue b/frontend/src/components/LoadingContainer.vue
new file mode 100644
index 0000000..60ac6af
--- /dev/null
+++ b/frontend/src/components/LoadingContainer.vue
@@ -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>
diff --git a/frontend/src/components/Spinner.vue b/frontend/src/components/Spinner.vue
new file mode 100644
index 0000000..cfa3972
--- /dev/null
+++ b/frontend/src/components/Spinner.vue
@@ -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>
diff --git a/frontend/src/stores/nodes.ts b/frontend/src/stores/nodes.ts
index 9af5242..a59a304 100644
--- a/frontend/src/stores/nodes.ts
+++ b/frontend/src/stores/nodes.ts
@@ -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,
diff --git a/frontend/src/views/AdminNodesView.vue b/frontend/src/views/AdminNodesView.vue
index 7373ad2..3043a67 100644
--- a/frontend/src/views/AdminNodesView.vue
+++ b/frontend/src/views/AdminNodesView.vue
@@ -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;