From 608456b14da2da4cb156b14609d711a5a4469426 Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Wed, 13 Jul 2022 18:46:58 +0200
Subject: [PATCH] webapp: Added loading animation for ntp admin

---
 webapp/src/components/NtpAdminView.vue | 79 ++++++++++++++++----------
 1 file changed, 48 insertions(+), 31 deletions(-)

diff --git a/webapp/src/components/NtpAdminView.vue b/webapp/src/components/NtpAdminView.vue
index 3f25a7d1..eb28a44b 100644
--- a/webapp/src/components/NtpAdminView.vue
+++ b/webapp/src/components/NtpAdminView.vue
@@ -6,41 +6,50 @@
         <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
             {{ alertMessage }}
         </BootstrapAlert>
-        <form @submit="saveNtpConfig">
-            <div class="card">
-                <div class="card-header text-white bg-primary">NTP Configuration</div>
-                <div class="card-body">
-                    <div class="row mb-3">
-                        <label for="inputNtpServer" class="col-sm-2 col-form-label">Time Server:</label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" id="inputNtpServer" maxlength="32"
-                                placeholder="Time Server" v-model="ntpConfigList.ntp_server" />
-                        </div>
-                    </div>
 
-                    <div class="row mb-3">
-                        <label for="inputTimezone" class="col-sm-2 col-form-label">Timezone:</label>
-                        <div class="col-sm-10">
-                            <select class="form-select" v-model="timezoneSelect">
-                                <option v-for="(config, name) in timezoneList" :key="name + '---' + config"
-                                    :value="name + '---' + config">
-                                    {{ name }}
-                                </option>
-                            </select>
-                        </div>
-                    </div>
+        <div class="text-center" v-if="dataLoading || timezoneLoading">
+            <div class="spinner-border" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        </div>
 
-                    <div class="row mb-3">
-                        <label for="inputTimezoneConfig" class="col-sm-2 col-form-label">Timezone Config:</label>
-                        <div class="col-sm-10">
-                            <input type="text" class="form-control" id="inputTimezoneConfig" maxlength="32"
-                                placeholder="Timezone" v-model="ntpConfigList.ntp_timezone" disabled />
+        <template v-if="!dataLoading && !timezoneLoading">
+            <form @submit="saveNtpConfig">
+                <div class="card">
+                    <div class="card-header text-white bg-primary">NTP Configuration</div>
+                    <div class="card-body">
+                        <div class="row mb-3">
+                            <label for="inputNtpServer" class="col-sm-2 col-form-label">Time Server:</label>
+                            <div class="col-sm-10">
+                                <input type="text" class="form-control" id="inputNtpServer" maxlength="32"
+                                    placeholder="Time Server" v-model="ntpConfigList.ntp_server" />
+                            </div>
+                        </div>
+
+                        <div class="row mb-3">
+                            <label for="inputTimezone" class="col-sm-2 col-form-label">Timezone:</label>
+                            <div class="col-sm-10">
+                                <select class="form-select" v-model="timezoneSelect">
+                                    <option v-for="(config, name) in timezoneList" :key="name + '---' + config"
+                                        :value="name + '---' + config">
+                                        {{ name }}
+                                    </option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div class="row mb-3">
+                            <label for="inputTimezoneConfig" class="col-sm-2 col-form-label">Timezone Config:</label>
+                            <div class="col-sm-10">
+                                <input type="text" class="form-control" id="inputTimezoneConfig" maxlength="32"
+                                    placeholder="Timezone" v-model="ntpConfigList.ntp_timezone" disabled />
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <button type="submit" class="btn btn-primary mb-3">Save</button>
-        </form>
+                <button type="submit" class="btn btn-primary mb-3">Save</button>
+            </form>
+        </template>
     </div>
 </template>
 
@@ -54,6 +63,8 @@ export default defineComponent({
     },
     data() {
         return {
+            dataLoading: true,
+            timezoneLoading: true,
             ntpConfigList: {
                 ntp_server: "",
                 ntp_timezone: "",
@@ -78,11 +89,16 @@ export default defineComponent({
     },
     methods: {
         getTimezoneList() {
+            this.timezoneLoading = true;
             fetch("/zones.json")
                 .then((response) => response.json())
-                .then((data) => (this.timezoneList = data));
+                .then((data) => {
+                    this.timezoneList = data;
+                    this.timezoneLoading = false;
+                });
         },
         getNtpConfig() {
+            this.dataLoading = true;
             fetch("/api/ntp/config")
                 .then((response) => response.json())
                 .then(
@@ -92,6 +108,7 @@ export default defineComponent({
                             this.ntpConfigList.ntp_timezone_descr +
                             "---" +
                             this.ntpConfigList.ntp_timezone;
+                        this.dataLoading = false;
                     }
                 );
         },