Showing spinner when loading nodes.
This commit is contained in:
parent
87839f4faa
commit
5b703917b5
4 changed files with 104 additions and 27 deletions
35
frontend/src/components/LoadingContainer.vue
Normal file
35
frontend/src/components/LoadingContainer.vue
Normal 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
29
frontend/src/components/Spinner.vue
Normal 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>
|
|
@ -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,
|
||||||
|
|
|
@ -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 {
|
||||||
|
@ -65,6 +76,7 @@ onMounted(async () => await refresh(1));
|
||||||
:totalItems="nodes.getTotalNodes"
|
:totalItems="nodes.getTotalNodes"
|
||||||
@changePage="refresh"/>
|
@changePage="refresh"/>
|
||||||
|
|
||||||
|
<LoadingContainer :loading="loading">
|
||||||
<table>
|
<table>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
@ -178,6 +190,7 @@ onMounted(async () => await refresh(1));
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</LoadingContainer>
|
||||||
|
|
||||||
<Pager
|
<Pager
|
||||||
:page="nodes.getPage"
|
:page="nodes.getPage"
|
||||||
|
@ -188,6 +201,7 @@ onMounted(async () => await refresh(1));
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "../scss/variables";
|
@import "../scss/variables";
|
||||||
|
|
||||||
table {
|
table {
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue