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">
{{ alertMessage }}
</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">
<div class="card">
<div class="card-header text-white bg-primary">DTU Configuration</div>
@ -44,6 +52,7 @@
</div>
<button type="submit" class="btn btn-primary mb-3">Save</button>
</form>
</template>
</div>
</template>
@ -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;
}
);
},

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

@ -6,6 +6,14 @@
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ alertMessage }}
</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">
<div class="card">
<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>
<div class="col-sm-10">
<div class="input-group">
<input type="number" class="form-control" id="inputPublishInterval" min="5" max="86400"
placeholder="Publish Interval in Seconds"
<input type="number" class="form-control" id="inputPublishInterval" min="5"
max="86400" placeholder="Publish Interval in Seconds"
v-model="mqttConfigList.mqtt_publish_interval"
aria-describedby="publishIntervalDescription" />
<span class="input-group-text" id="publishIntervalDescription">seconds</span>
@ -129,6 +137,7 @@
</div>
<button type="submit" class="btn btn-primary mb-3">Save</button>
</form>
</template>
</div>
</template>
@ -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();

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

@ -4,6 +4,13 @@
<h1>MqTT Info</h1>
</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-header text-white bg-primary">Configuration Summary</div>
<div class="card-body">
@ -77,6 +84,7 @@
</div>
</div>
</div>
</template>
</div>
</template>
@ -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;
});
},
},
});

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

@ -6,6 +6,14 @@
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ alertMessage }}
</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">
<div class="card">
<div class="card-header text-white bg-primary">WiFi Configuration</div>
@ -54,8 +62,8 @@
<div class="row mb-3">
<label for="inputIP" class="col-sm-2 col-form-label">IP Address:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputIP" maxlength="32" placeholder="IP address"
v-model="networkConfigList.ipaddress" />
<input type="text" class="form-control" id="inputIP" maxlength="32"
placeholder="IP address" v-model="networkConfigList.ipaddress" />
</div>
</div>
@ -94,6 +102,7 @@
</div>
<button type="submit" class="btn btn-primary mb-3">Save</button>
</form>
</template>
</div>
</template>
@ -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();

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

@ -3,14 +3,22 @@
<div class="page-header">
<h1>Network Info</h1>
</div>
<WifiStationInfo v-bind="networkDataList"/>
<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" />
<div class="mt-5"></div>
<WifiApInfo v-bind="networkDataList"/>
<WifiApInfo v-bind="networkDataList" />
<div class="mt-5"></div>
<InterfaceStationInfo v-bind="networkDataList"/>
<InterfaceStationInfo v-bind="networkDataList" />
<div class="mt-5"></div>
<InterfaceApInfo v-bind="networkDataList"/>
<InterfaceApInfo v-bind="networkDataList" />
<div class="mt-5"></div>
</template>
</div>
</template>
@ -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;
});
},
},
});

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

@ -4,6 +4,13 @@
<h1>NTP Info</h1>
</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-header text-white bg-primary">Configuration Summary</div>
<div class="card-body">
@ -53,6 +60,8 @@
</div>
</div>
</div>
</template>
</div>
</template>
@ -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;
});
},
},
});

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

@ -3,12 +3,21 @@
<div class="page-header">
<h1>System Info</h1>
</div>
<FirmwareInfo v-bind="systemDataList"/>
<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" />
<div class="mt-5"></div>
<HardwareInfo v-bind="systemDataList"/>
<HardwareInfo v-bind="systemDataList" />
<div class="mt-5"></div>
<MemoryInfo v-bind="systemDataList"/>
<MemoryInfo v-bind="systemDataList" />
<div class="mt-5"></div>
</template>
</div>
</template>
@ -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;
})
},
},
});