From c0ed5f3e14f9fe85f99eb06d5f9bae2defe36433 Mon Sep 17 00:00:00 2001 From: Thomas Basler Date: Tue, 12 Jul 2022 20:56:30 +0200 Subject: [PATCH] webapp: Added loading animations to several views --- webapp/src/components/DtuAdminView.vue | 78 ++++--- webapp/src/components/MqttAdminView.vue | 228 +++++++++++---------- webapp/src/components/MqttInfoView.vue | 151 +++++++------- webapp/src/components/NetworkAdminView.vue | 154 +++++++------- webapp/src/components/NetworkInfoView.vue | 31 ++- webapp/src/components/NtpInfoView.vue | 104 ++++++---- webapp/src/components/SystemInfoView.vue | 28 ++- 7 files changed, 434 insertions(+), 340 deletions(-) diff --git a/webapp/src/components/DtuAdminView.vue b/webapp/src/components/DtuAdminView.vue index be9b1b3..75a98b8 100644 --- a/webapp/src/components/DtuAdminView.vue +++ b/webapp/src/components/DtuAdminView.vue @@ -6,44 +6,53 @@ {{ alertMessage }} -
-
-
DTU Configuration
-
-
- -
- -
-
-
- -
-
- - seconds +
+ +
+ +
@@ -57,6 +66,7 @@ export default defineComponent({ }, data() { return { + dataLoading: true, dtuConfigList: { dtu_serial: 0, dtu_pollinterval: 0, @@ -78,11 +88,13 @@ export default defineComponent({ }, methods: { getDtuConfig() { + this.dataLoading = true; fetch("/api/dtu/config") .then((response) => response.json()) .then( (data) => { this.dtuConfigList = data; + this.dataLoading = false; } ); }, diff --git a/webapp/src/components/MqttAdminView.vue b/webapp/src/components/MqttAdminView.vue index e2a5dbd..b2f3755 100644 --- a/webapp/src/components/MqttAdminView.vue +++ b/webapp/src/components/MqttAdminView.vue @@ -6,129 +6,138 @@ {{ alertMessage }} - -
-
MqTT Configuration
-
-
- - -
-
+ +
+ +
-
-
- MqTT Broker Parameter +
@@ -142,6 +151,7 @@ export default defineComponent({ }, data() { return { + dataLoading: true, mqttConfigList: { mqtt_enabled: false, mqtt_hostname: "", @@ -165,9 +175,13 @@ export default defineComponent({ }, methods: { getMqttConfig() { + this.dataLoading = true; fetch("/api/mqtt/config") .then((response) => response.json()) - .then((data) => (this.mqttConfigList = data)); + .then((data) => { + this.mqttConfigList = data; + this.dataLoading = false; + }); }, saveMqttConfig(e: Event) { e.preventDefault(); diff --git a/webapp/src/components/MqttInfoView.vue b/webapp/src/components/MqttInfoView.vue index 134d5a7..35c98ba 100644 --- a/webapp/src/components/MqttInfoView.vue +++ b/webapp/src/components/MqttInfoView.vue @@ -4,79 +4,87 @@

MqTT Info

-
-
Configuration Summary
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Status - enabled - disabled -
Server{{ mqttDataList.mqtt_hostname }}
Port{{ mqttDataList.mqtt_port }}
Username{{ mqttDataList.mqtt_username }}
Base Topic{{ mqttDataList.mqtt_topic }}
Publish Interval{{ mqttDataList.mqtt_publish_interval }} seconds
Retain - enabled - disabled -
-
+
+
-
-
Runtime Summary
-
-
- - - - - - - -
Connection Status - connected - disconnected -
+
@@ -86,6 +94,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ data() { return { + dataLoading: true, mqttDataList: { mqtt_enabled: false, mqtt_hostname: "", @@ -103,9 +112,13 @@ export default defineComponent({ }, methods: { getNtpInfo() { + this.dataLoading = true; fetch("/api/mqtt/status") .then((response) => response.json()) - .then((data) => (this.mqttDataList = data)); + .then((data) => { + this.mqttDataList = data; + this.dataLoading = false; + }); }, }, }); diff --git a/webapp/src/components/NetworkAdminView.vue b/webapp/src/components/NetworkAdminView.vue index 69fc1b7..738b006 100644 --- a/webapp/src/components/NetworkAdminView.vue +++ b/webapp/src/components/NetworkAdminView.vue @@ -6,94 +6,103 @@ {{ alertMessage }} - -
-
WiFi Configuration
-
-
- -
- -
-
-
- -
- -
-
+
+ +
-
- -
- +
@@ -107,6 +116,7 @@ export default defineComponent({ }, data() { return { + dataLoading: true, networkConfigList: { ssid: "", password: "", @@ -128,9 +138,13 @@ export default defineComponent({ }, methods: { getNetworkConfig() { + this.dataLoading = true; fetch("/api/network/config") .then((response) => response.json()) - .then((data) => (this.networkConfigList = data)); + .then((data) => { + this.networkConfigList = data; + this.dataLoading = false; + }); }, saveNetworkConfig(e: Event) { e.preventDefault(); diff --git a/webapp/src/components/NetworkInfoView.vue b/webapp/src/components/NetworkInfoView.vue index 06b9b51..819648d 100644 --- a/webapp/src/components/NetworkInfoView.vue +++ b/webapp/src/components/NetworkInfoView.vue @@ -3,14 +3,22 @@

Network Info

- -
- -
- -
- -
+
+ +
+ +
@@ -30,6 +38,7 @@ export default defineComponent({ }, data() { return { + dataLoading: true, networkDataList: { // WifiStationInfo sta_status: false, @@ -57,9 +66,13 @@ export default defineComponent({ }, methods: { getNetworkInfo() { + this.dataLoading = true; fetch("/api/network/status") .then((response) => response.json()) - .then((data) => (this.networkDataList = data)); + .then((data) => { + this.networkDataList = data; + this.dataLoading = false; + }); }, }, }); diff --git a/webapp/src/components/NtpInfoView.vue b/webapp/src/components/NtpInfoView.vue index 4e140f4..41f37c4 100644 --- a/webapp/src/components/NtpInfoView.vue +++ b/webapp/src/components/NtpInfoView.vue @@ -4,55 +4,64 @@

NTP Info

-
-
Configuration Summary
-
-
- - - - - - - - - - - - - - - -
Server{{ ntpDataList.ntp_server }}
Timezone{{ ntpDataList.ntp_timezone }}
Timezone Description{{ ntpDataList.ntp_timezone_descr }}
-
+
+
-
-
Current Time
-
-
- - - - - - - - - - - -
Status - synced - not synced -
Local Time{{ ntpDataList.ntp_localtime }}
+ +
@@ -62,6 +71,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ data() { return { + dataLoading: true, ntpDataList: { ntp_server: "", ntp_timezone: "", @@ -76,9 +86,13 @@ export default defineComponent({ }, methods: { getNtpInfo() { + this.dataLoading = true; fetch("/api/ntp/status") .then((response) => response.json()) - .then((data) => (this.ntpDataList = data)); + .then((data) => { + this.ntpDataList = data; + this.dataLoading = false; + }); }, }, }); diff --git a/webapp/src/components/SystemInfoView.vue b/webapp/src/components/SystemInfoView.vue index e5cdc29..55acd75 100644 --- a/webapp/src/components/SystemInfoView.vue +++ b/webapp/src/components/SystemInfoView.vue @@ -3,12 +3,21 @@

System Info

- -
- -
- -
+ +
+ +
+ +
@@ -26,6 +35,7 @@ export default defineComponent({ }, data() { return { + dataLoading: true, systemDataList: { // HardwareInfo chipmodel: "", @@ -56,9 +66,13 @@ export default defineComponent({ }, methods: { getSystemInfo() { + this.dataLoading = true; fetch("/api/system/status") .then((response) => response.json()) - .then((data) => (this.systemDataList = data)); + .then((data) => { + this.systemDataList = data; + this.dataLoading = false; + }) }, }, });