patrick/OpenDTU
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

webapp: Added loading animations to several views

Browse Source
This commit is contained in:
Thomas Basler 2022-07-12 20:56:30 +02:00
parent f917f5dc0d
commit c0ed5f3e14
7 changed files with 434 additions and 340 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
webapp/src/components/DtuAdminView.vue
View File

@ -6,6 +6,14 @@
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType"> <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ alertMessage }} {{ alertMessage }}
</BootstrapAlert> </BootstrapAlert>
<div class="text-center" v-if="dataLoading">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<template v-if="!dataLoading">
<form @submit="saveDtuConfig"> <form @submit="saveDtuConfig">
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary">DTU Configuration</div> <div class="card-header text-white bg-primary">DTU Configuration</div>
@ -44,6 +52,7 @@
</div> </div>
<button type="submit" class="btn btn-primary mb-3">Save</button> <button type="submit" class="btn btn-primary mb-3">Save</button>
</form> </form>
</template>
</div> </div>
</template> </template>
@ -57,6 +66,7 @@ export default defineComponent({
}, },
data() { data() {
return { return {
dataLoading: true,
dtuConfigList: { dtuConfigList: {
dtu_serial: 0, dtu_serial: 0,
dtu_pollinterval: 0, dtu_pollinterval: 0,
@ -78,11 +88,13 @@ export default defineComponent({
}, },
methods: { methods: {
getDtuConfig() { getDtuConfig() {
this.dataLoading = true;
fetch("/api/dtu/config") fetch("/api/dtu/config")
.then((response) => response.json()) .then((response) => response.json())
.then( .then(
(data) => { (data) => {
this.dtuConfigList = data; this.dtuConfigList = data;
this.dataLoading = false;
} }
); );
}, },

20
webapp/src/components/MqttAdminView.vue
View File

@ -6,6 +6,14 @@
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType"> <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ alertMessage }} {{ alertMessage }}
</BootstrapAlert> </BootstrapAlert>
<div class="text-center" v-if="dataLoading">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<template v-if="!dataLoading">
<form @submit="saveMqttConfig"> <form @submit="saveMqttConfig">
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary">MqTT Configuration</div> <div class="card-header text-white bg-primary">MqTT Configuration</div>
@ -70,8 +78,8 @@
<label for="inputPublishInterval" class="col-sm-2 col-form-label">Publish Interval:</label> <label for="inputPublishInterval" class="col-sm-2 col-form-label">Publish Interval:</label>
<div class="col-sm-10"> <div class="col-sm-10">
<div class="input-group"> <div class="input-group">
<input type="number" class="form-control" id="inputPublishInterval" min="5" max="86400" <input type="number" class="form-control" id="inputPublishInterval" min="5"
placeholder="Publish Interval in Seconds" max="86400" placeholder="Publish Interval in Seconds"
v-model="mqttConfigList.mqtt_publish_interval" v-model="mqttConfigList.mqtt_publish_interval"
aria-describedby="publishIntervalDescription" /> aria-describedby="publishIntervalDescription" />
<span class="input-group-text" id="publishIntervalDescription">seconds</span> <span class="input-group-text" id="publishIntervalDescription">seconds</span>
@ -129,6 +137,7 @@
</div> </div>
<button type="submit" class="btn btn-primary mb-3">Save</button> <button type="submit" class="btn btn-primary mb-3">Save</button>
</form> </form>
</template>
</div> </div>
</template> </template>
@ -142,6 +151,7 @@ export default defineComponent({
}, },
data() { data() {
return { return {
dataLoading: true,
mqttConfigList: { mqttConfigList: {
mqtt_enabled: false, mqtt_enabled: false,
mqtt_hostname: "", mqtt_hostname: "",
@ -165,9 +175,13 @@ export default defineComponent({
}, },
methods: { methods: {
getMqttConfig() { getMqttConfig() {
this.dataLoading = true;
fetch("/api/mqtt/config") fetch("/api/mqtt/config")
.then((response) => response.json()) .then((response) => response.json())
.then((data) => (this.mqttConfigList = data)); .then((data) => {
this.mqttConfigList = data;
this.dataLoading = false;
});
}, },
saveMqttConfig(e: Event) { saveMqttConfig(e: Event) {
e.preventDefault(); e.preventDefault();

15
webapp/src/components/MqttInfoView.vue
View File

@ -4,6 +4,13 @@
<h1>MqTT Info</h1> <h1>MqTT Info</h1>
</div> </div>
<div class="text-center" v-if="dataLoading">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<template v-if="!dataLoading">
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary">Configuration Summary</div> <div class="card-header text-white bg-primary">Configuration Summary</div>
<div class="card-body"> <div class="card-body">
@ -77,6 +84,7 @@
</div> </div>
</div> </div>
</div> </div>
</template>
</div> </div>
</template> </template>
@ -86,6 +94,7 @@ import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({
data() { data() {
return { return {
dataLoading: true,
mqttDataList: { mqttDataList: {
mqtt_enabled: false, mqtt_enabled: false,
mqtt_hostname: "", mqtt_hostname: "",
@ -103,9 +112,13 @@ export default defineComponent({
}, },
methods: { methods: {
getNtpInfo() { getNtpInfo() {
this.dataLoading = true;
fetch("/api/mqtt/status") fetch("/api/mqtt/status")
.then((response) => response.json()) .then((response) => response.json())
.then((data) => (this.mqttDataList = data)); .then((data) => {
this.mqttDataList = data;
this.dataLoading = false;
});
}, },
}, },
}); });

20
webapp/src/components/NetworkAdminView.vue
View File

@ -6,6 +6,14 @@
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType"> <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ alertMessage }} {{ alertMessage }}
</BootstrapAlert> </BootstrapAlert>
<div class="text-center" v-if="dataLoading">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<template v-if="!dataLoading">
<form @submit="saveNetworkConfig"> <form @submit="saveNetworkConfig">
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary">WiFi Configuration</div> <div class="card-header text-white bg-primary">WiFi Configuration</div>
@ -54,8 +62,8 @@
<div class="row mb-3"> <div class="row mb-3">
<label for="inputIP" class="col-sm-2 col-form-label">IP Address:</label> <label for="inputIP" class="col-sm-2 col-form-label">IP Address:</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="text" class="form-control" id="inputIP" maxlength="32" placeholder="IP address" <input type="text" class="form-control" id="inputIP" maxlength="32"
v-model="networkConfigList.ipaddress" /> placeholder="IP address" v-model="networkConfigList.ipaddress" />
</div> </div>
</div> </div>
@ -94,6 +102,7 @@
</div> </div>
<button type="submit" class="btn btn-primary mb-3">Save</button> <button type="submit" class="btn btn-primary mb-3">Save</button>
</form> </form>
</template>
</div> </div>
</template> </template>
@ -107,6 +116,7 @@ export default defineComponent({
}, },
data() { data() {
return { return {
dataLoading: true,
networkConfigList: { networkConfigList: {
ssid: "", ssid: "",
password: "", password: "",
@ -128,9 +138,13 @@ export default defineComponent({
}, },
methods: { methods: {
getNetworkConfig() { getNetworkConfig() {
this.dataLoading = true;
fetch("/api/network/config") fetch("/api/network/config")
.then((response) => response.json()) .then((response) => response.json())
.then((data) => (this.networkConfigList = data)); .then((data) => {
this.networkConfigList = data;
this.dataLoading = false;
});
}, },
saveNetworkConfig(e: Event) { saveNetworkConfig(e: Event) {
e.preventDefault(); e.preventDefault();

15
webapp/src/components/NetworkInfoView.vue
View File

@ -3,6 +3,13 @@
<div class="page-header"> <div class="page-header">
<h1>Network Info</h1> <h1>Network Info</h1>
</div> </div>
<div class="text-center" v-if="dataLoading">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<template v-if="!dataLoading">
<WifiStationInfo v-bind="networkDataList" /> <WifiStationInfo v-bind="networkDataList" />
<div class="mt-5"></div> <div class="mt-5"></div>
<WifiApInfo v-bind="networkDataList" /> <WifiApInfo v-bind="networkDataList" />
@ -11,6 +18,7 @@
<div class="mt-5"></div> <div class="mt-5"></div>
<InterfaceApInfo v-bind="networkDataList" /> <InterfaceApInfo v-bind="networkDataList" />
<div class="mt-5"></div> <div class="mt-5"></div>
</template>
</div> </div>
</template> </template>
@ -30,6 +38,7 @@ export default defineComponent({
}, },
data() { data() {
return { return {
dataLoading: true,
networkDataList: { networkDataList: {
// WifiStationInfo // WifiStationInfo
sta_status: false, sta_status: false,
@ -57,9 +66,13 @@ export default defineComponent({
}, },
methods: { methods: {
getNetworkInfo() { getNetworkInfo() {
this.dataLoading = true;
fetch("/api/network/status") fetch("/api/network/status")
.then((response) => response.json()) .then((response) => response.json())
.then((data) => (this.networkDataList = data)); .then((data) => {
this.networkDataList = data;
this.dataLoading = false;
});
}, },
}, },
}); });

16
webapp/src/components/NtpInfoView.vue
View File

@ -4,6 +4,13 @@
<h1>NTP Info</h1> <h1>NTP Info</h1>
</div> </div>
<div class="text-center" v-if="dataLoading">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<template v-if="!dataLoading">
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary">Configuration Summary</div> <div class="card-header text-white bg-primary">Configuration Summary</div>
<div class="card-body"> <div class="card-body">
@ -53,6 +60,8 @@
</div> </div>
</div> </div>
</div> </div>
</template>
</div> </div>
</template> </template>
@ -62,6 +71,7 @@ import { defineComponent } from 'vue';
export default defineComponent({ export default defineComponent({
data() { data() {
return { return {
dataLoading: true,
ntpDataList: { ntpDataList: {
ntp_server: "", ntp_server: "",
ntp_timezone: "", ntp_timezone: "",
@ -76,9 +86,13 @@ export default defineComponent({
}, },
methods: { methods: {
getNtpInfo() { getNtpInfo() {
this.dataLoading = true;
fetch("/api/ntp/status") fetch("/api/ntp/status")
.then((response) => response.json()) .then((response) => response.json())
.then((data) => (this.ntpDataList = data)); .then((data) => {
this.ntpDataList = data;
this.dataLoading = false;
});
}, },
}, },
}); });

16
webapp/src/components/SystemInfoView.vue
View File

@ -3,12 +3,21 @@
<div class="page-header"> <div class="page-header">
<h1>System Info</h1> <h1>System Info</h1>
</div> </div>
<div class="text-center" v-if="dataLoading">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<template v-if="!dataLoading">
<FirmwareInfo v-bind="systemDataList" /> <FirmwareInfo v-bind="systemDataList" />
<div class="mt-5"></div> <div class="mt-5"></div>
<HardwareInfo v-bind="systemDataList" /> <HardwareInfo v-bind="systemDataList" />
<div class="mt-5"></div> <div class="mt-5"></div>
<MemoryInfo v-bind="systemDataList" /> <MemoryInfo v-bind="systemDataList" />
<div class="mt-5"></div> <div class="mt-5"></div>
</template>
</div> </div>
</template> </template>
@ -26,6 +35,7 @@ export default defineComponent({
}, },
data() { data() {
return { return {
dataLoading: true,
systemDataList: { systemDataList: {
// HardwareInfo // HardwareInfo
chipmodel: "", chipmodel: "",
@ -56,9 +66,13 @@ export default defineComponent({
}, },
methods: { methods: {
getSystemInfo() { getSystemInfo() {
this.dataLoading = true;
fetch("/api/system/status") fetch("/api/system/status")
.then((response) => response.json()) .then((response) => response.json())
.then((data) => (this.systemDataList = data)); .then((data) => {
this.systemDataList = data;
this.dataLoading = false;
})
}, },
}, },
}); });