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

webapp: Implement BasePage component for default views

Browse Source
This commit is contained in:
Thomas Basler 2022-10-18 18:25:50 +02:00
parent 93512e2e0c
commit 03066af1c4
14 changed files with 795 additions and 864 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
webapp/src/components/BasePage.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<div class="container-xxl" role="main">
<div class="page-header">
<h1>{{ title }}</h1>
</div>
<div class="text-center" v-if="isLoading">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<template v-if="!isLoading">
<slot />
</template>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
props: {
title: { type: String, required: true },
isLoading: { type: Boolean, required: false, default: false }
},
});
</script>

11
webapp/src/views/AboutView.vue
View File

@ -1,10 +1,5 @@
<template> <template>
<div class="container-xxl" role="main"> <BasePage :title="'About OpenDTU'">
<div class="page-header">
<h1>About OpenDTU</h1>
</div>
<div class="accordion" id="accordionExample"> <div class="accordion" id="accordionExample">
<div class="accordion-item"> <div class="accordion-item">
<h2 class="accordion-header" id="headingOne"> <h2 class="accordion-header" id="headingOne">
@ -96,12 +91,13 @@
</div> </div>
</div> </BasePage>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue';
import { import {
BIconInfoCircle, BIconInfoCircle,
BIconActivity, BIconActivity,
@ -111,6 +107,7 @@ import {
export default defineComponent({ export default defineComponent({
components: { components: {
BasePage,
BIconInfoCircle, BIconInfoCircle,
BIconActivity, BIconActivity,
BIconBug, BIconBug,

18
webapp/src/views/ConfigAdminView.vue
View File

@ -1,19 +1,9 @@
<template> <template>
<div class="container-xxl" role="main"> <BasePage :title="'Config Management'" :isLoading="loading">
<div class="page-header">
<h1>Config Management</h1>
</div>
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType"> <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ alertMessage }} {{ alertMessage }}
</BootstrapAlert> </BootstrapAlert>
<div class="text-center" v-if="loading">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<template v-if="!loading">
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary">Backup: Configuration File Backup</div> <div class="card-header text-white bg-primary">Backup: Configuration File Backup</div>
<div class="card-body text-center"> <div class="card-body text-center">
@ -88,7 +78,7 @@
</div> </div>
</div> </div>
</div> </div>
</template> </BasePage>
<div class="modal" id="factoryReset" tabindex="-1"> <div class="modal" id="factoryReset" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
@ -110,12 +100,11 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue';
import { import {
BIconExclamationCircleFill, BIconExclamationCircleFill,
BIconArrowLeft, BIconArrowLeft,
@ -126,6 +115,7 @@ import BootstrapAlert from "@/components/BootstrapAlert.vue";
export default defineComponent({ export default defineComponent({
components: { components: {
BasePage,
BIconExclamationCircleFill, BIconExclamationCircleFill,
BIconArrowLeft, BIconArrowLeft,
BIconCheckCircle, BIconCheckCircle,

17
webapp/src/views/DtuAdminView.vue
View File

@ -1,19 +1,9 @@
<template> <template>
<div class="container-xxl" role="main"> <BasePage :title="'DTU Settings'" :isLoading="dataLoading">
<div class="page-header">
<h1>DTU Settings</h1>
</div>
<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>
@ -52,17 +42,18 @@
</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> </BasePage>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue';
import BootstrapAlert from "@/components/BootstrapAlert.vue"; import BootstrapAlert from "@/components/BootstrapAlert.vue";
import type { DtuConfig } from "@/types/DtuConfig"; import type { DtuConfig } from "@/types/DtuConfig";
export default defineComponent({ export default defineComponent({
components: { components: {
BasePage,
BootstrapAlert, BootstrapAlert,
}, },
data() { data() {

10
webapp/src/views/FirmwareUpgradeView.vue
View File

@ -1,9 +1,5 @@
<template> <template>
<div class="container-xxl" role="main"> <BasePage :title="'Firmware Upgrade'">
<div class="page-header">
<h1>Firmware Upgrade</h1>
</div>
<div class="position-relative" v-if="loading"> <div class="position-relative" v-if="loading">
<div class="position-absolute top-50 start-50 translate-middle"> <div class="position-absolute top-50 start-50 translate-middle">
<div class="spinner-border" role="status"> <div class="spinner-border" role="status">
@ -68,11 +64,12 @@
</div> </div>
</div> </div>
</div> </div>
</div> </BasePage>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue';
import SparkMD5 from "spark-md5"; import SparkMD5 from "spark-md5";
import { import {
BIconExclamationCircleFill, BIconExclamationCircleFill,
@ -83,6 +80,7 @@ import {
export default defineComponent({ export default defineComponent({
components: { components: {
BasePage,
BIconExclamationCircleFill, BIconExclamationCircleFill,
BIconArrowLeft, BIconArrowLeft,
BIconArrowRepeat, BIconArrowRepeat,

25
webapp/src/views/InverterAdminView.vue
View File

@ -1,9 +1,5 @@
<template> <template>
<div class="container-xxl" role="main"> <BasePage :title="'Inverter Settings'" :isLoading="dataLoading">
<div class="page-header">
<h1>Inverter Settings</h1>
</div>
<BootstrapAlert v-model="showAlert" dismissible :variant="alertType"> <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
{{ alertMessage }} {{ alertMessage }}
</BootstrapAlert> </BootstrapAlert>
@ -72,6 +68,7 @@
</div> </div>
</div> </div>
</div> </div>
</BasePage>
<div class="modal" id="inverterEdit" tabindex="-1"> <div class="modal" id="inverterEdit" tabindex="-1">
<div class="modal-dialog"> <div class="modal-dialog">
@ -90,8 +87,8 @@
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="inverter-name" class="col-form-label">Name:</label> <label for="inverter-name" class="col-form-label">Name:</label>
<input v-model="editInverterData.name" type="text" id="inverter-name" <input v-model="editInverterData.name" type="text" id="inverter-name" class="form-control"
class="form-control" maxlength="31" /> maxlength="31" />
</div> </div>
<div class="mb-3" v-for="(max, index) in editInverterData.max_power" :key="`${index}`"> <div class="mb-3" v-for="(max, index) in editInverterData.max_power" :key="`${index}`">
@ -134,18 +131,16 @@
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" @click="onDeleteCancel" <button type="button" class="btn btn-secondary" @click="onDeleteCancel"
data-bs-dismiss="modal">Cancel</button> data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" <button type="button" class="btn btn-danger" @click="onDelete(deleteId.toString())">Delete</button>
@click="onDelete(deleteId.toString())">Delete</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue';
import { import {
BIconTrash, BIconTrash,
BIconPencil BIconPencil
@ -163,6 +158,7 @@ declare interface Inverter {
export default defineComponent({ export default defineComponent({
components: { components: {
BasePage,
BootstrapAlert, BootstrapAlert,
BIconTrash, BIconTrash,
BIconPencil, BIconPencil,
@ -177,6 +173,7 @@ export default defineComponent({
editInverterData: {} as Inverter, editInverterData: {} as Inverter,
deleteInverterData: {} as Inverter, deleteInverterData: {} as Inverter,
inverters: [] as Inverter[], inverters: [] as Inverter[],
dataLoading: true,
alertMessage: "", alertMessage: "",
alertType: "info", alertType: "info",
showAlert: false, showAlert: false,
@ -198,9 +195,13 @@ export default defineComponent({
}, },
methods: { methods: {
getInverters() { getInverters() {
this.dataLoading = true;
fetch("/api/inverter/list") fetch("/api/inverter/list")
.then((response) => response.json()) .then((response) => response.json())
.then((data) => (this.inverters = data.inverter)); .then((data) => {
this.inverters = data.inverter;
this.dataLoading = false;
});
}, },
onSubmit() { onSubmit() {
const formData = new FormData(); const formData = new FormData();

21
webapp/src/views/MqttAdminView.vue
View File

@ -1,19 +1,9 @@
<template> <template>
<div class="container-xxl" role="main"> <BasePage :title="'MqTT Settings'" :isLoading="dataLoading">
<div class="page-header">
<h1>MqTT Settings</h1>
</div>
<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>
@ -93,8 +83,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" <input type="number" class="form-control" id="inputPublishInterval" min="5" max="86400"
max="86400" placeholder="Publish Interval in Seconds" 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>
@ -221,17 +211,18 @@
<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> </BasePage>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue';
import BootstrapAlert from "@/components/BootstrapAlert.vue"; import BootstrapAlert from "@/components/BootstrapAlert.vue";
import type { MqttConfig } from "@/types/MqttConfig"; import type { MqttConfig } from "@/types/MqttConfig";
export default defineComponent({ export default defineComponent({
components: { components: {
BasePage,
BootstrapAlert, BootstrapAlert,
}, },
data() { data() {

25
webapp/src/views/MqttInfoView.vue
View File

@ -1,16 +1,5 @@
<template> <template>
<div class="container-xxl" role="main"> <BasePage :title="'MqTT Info'" :isLoading="dataLoading">
<div class="page-header">
<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">
<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">
@ -78,7 +67,8 @@
</div> </div>
<div class="card mt-5"> <div class="card mt-5">
<div class="card-header text-white bg-primary">Home Assistant MQTT Auto Discovery Configuration Summary</div> <div class="card-header text-white bg-primary">Home Assistant MQTT Auto Discovery Configuration Summary
</div>
<div class="card-body"> <div class="card-body">
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-hover table-condensed"> <table class="table table-hover table-condensed">
@ -154,15 +144,18 @@
</div> </div>
</div> </div>
</div> </div>
</template> </BasePage>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import type { MqttStatus } from '@/types/MqttStatus';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue';
import type { MqttStatus } from '@/types/MqttStatus';
export default defineComponent({ export default defineComponent({
components: {
BasePage,
},
data() { data() {
return { return {
dataLoading: true, dataLoading: true,

21
webapp/src/views/NetworkAdminView.vue
View File

@ -1,19 +1,9 @@
<template> <template>
<div class="container-xxl" role="main"> <BasePage :title="'Network Settings'" :isLoading="dataLoading">
<div class="page-header">
<h1>Network Settings</h1>
</div>
<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>
@ -67,8 +57,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" <input type="text" class="form-control" id="inputIP" maxlength="32" placeholder="IP address"
placeholder="IP address" v-model="networkConfigList.ipaddress" /> v-model="networkConfigList.ipaddress" />
</div> </div>
</div> </div>
@ -107,17 +97,18 @@
</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> </BasePage>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue';
import BootstrapAlert from "@/components/BootstrapAlert.vue"; import BootstrapAlert from "@/components/BootstrapAlert.vue";
import type { NetworkConfig } from "@/types/NetworkkConfig"; import type { NetworkConfig } from "@/types/NetworkkConfig";
export default defineComponent({ export default defineComponent({
components: { components: {
BasePage,
BootstrapAlert, BootstrapAlert,
}, },
data() { data() {

17
webapp/src/views/NetworkInfoView.vue
View File

@ -1,15 +1,5 @@
<template> <template>
<div class="container-xxl" role="main"> <BasePage :title="'Network Info'" :isLoading="dataLoading">
<div class="page-header">
<h1>Network 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">
<WifiStationInfo :networkStatus="networkDataList" /> <WifiStationInfo :networkStatus="networkDataList" />
<div class="mt-5"></div> <div class="mt-5"></div>
<WifiApInfo :networkStatus="networkDataList" /> <WifiApInfo :networkStatus="networkDataList" />
@ -18,12 +8,12 @@
<div class="mt-5"></div> <div class="mt-5"></div>
<InterfaceApInfo :networkStatus="networkDataList" /> <InterfaceApInfo :networkStatus="networkDataList" />
<div class="mt-5"></div> <div class="mt-5"></div>
</template> </BasePage>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue';
import WifiStationInfo from "@/components/WifiStationInfo.vue"; import WifiStationInfo from "@/components/WifiStationInfo.vue";
import WifiApInfo from "@/components/WifiApInfo.vue"; import WifiApInfo from "@/components/WifiApInfo.vue";
import InterfaceNetworkInfo from "@/components/InterfaceNetworkInfo.vue"; import InterfaceNetworkInfo from "@/components/InterfaceNetworkInfo.vue";
@ -32,6 +22,7 @@ import type { NetworkStatus } from '@/types/NetworkStatus';
export default defineComponent({ export default defineComponent({
components: { components: {
BasePage,
WifiStationInfo, WifiStationInfo,
WifiApInfo, WifiApInfo,
InterfaceNetworkInfo, InterfaceNetworkInfo,

22
webapp/src/views/NtpAdminView.vue
View File

@ -1,19 +1,9 @@
<template> <template>
<div class="container-xxl" role="main"> <BasePage :title="'NTP Settings'" :isLoading="dataLoading || timezoneLoading">
<div class="page-header">
<h1>NTP Settings</h1>
</div>
<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 || timezoneLoading">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<template v-if="!dataLoading && !timezoneLoading">
<form @submit="saveNtpConfig"> <form @submit="saveNtpConfig">
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary">NTP Configuration</div> <div class="card-header text-white bg-primary">NTP Configuration</div>
@ -49,9 +39,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>
<template v-if="!dataLoading && !timezoneLoading">
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary">Manual Time Synchronization</div> <div class="card-header text-white bg-primary">Manual Time Synchronization</div>
<div class="card-body"> <div class="card-body">
@ -64,8 +52,7 @@
<div class="row mb-3"> <div class="row mb-3">
<label for="currentLocalTime" class="col-sm-2 col-form-label">Current Local Time:</label> <label for="currentLocalTime" class="col-sm-2 col-form-label">Current Local Time:</label>
<div class="col-sm-10"> <div class="col-sm-10">
<input type="text" class="form-control" id="currentLocalTime" v-model="localTime" <input type="text" class="form-control" id="currentLocalTime" v-model="localTime" disabled />
disabled />
</div> </div>
</div> </div>
<div class="text-center mb-3"> <div class="text-center mb-3">
@ -81,17 +68,18 @@
</div> </div>
</div> </div>
</template> </BasePage>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue';
import BootstrapAlert from "@/components/BootstrapAlert.vue"; import BootstrapAlert from "@/components/BootstrapAlert.vue";
import type { NtpConfig } from "@/types/NtpConfig"; import type { NtpConfig } from "@/types/NtpConfig";
export default defineComponent({ export default defineComponent({
components: { components: {
BasePage,
BootstrapAlert, BootstrapAlert,
}, },
data() { data() {

21
webapp/src/views/NtpInfoView.vue
View File

@ -1,16 +1,5 @@
<template> <template>
<div class="container-xxl" role="main"> <BasePage :title="'NTP Info'" :isLoading="dataLoading">
<div class="page-header">
<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">
<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">
@ -60,16 +49,18 @@
</div> </div>
</div> </div>
</div> </div>
</template> </BasePage>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue';
import type { NtpStatus } from "@/types/NtpStatus"; import type { NtpStatus } from "@/types/NtpStatus";
export default defineComponent({ export default defineComponent({
components: {
BasePage,
},
data() { data() {
return { return {
dataLoading: true, dataLoading: true,

17
webapp/src/views/SecurityAdminView.vue
View File

@ -1,19 +1,9 @@
<template> <template>
<div class="container-xxl" role="main"> <BasePage :title="'Security Settings'" :isLoading="dataLoading">
<div class="page-header">
<h1>Security Settings</h1>
</div>
<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="savePasswordConfig"> <form @submit="savePasswordConfig">
<div class="card"> <div class="card">
<div class="card-header text-white bg-primary">Admin password</div> <div class="card-header text-white bg-primary">Admin password</div>
@ -44,17 +34,18 @@
</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> </BasePage>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue';
import BootstrapAlert from "@/components/BootstrapAlert.vue"; import BootstrapAlert from "@/components/BootstrapAlert.vue";
import type { SecurityConfig } from '@/types/SecurityConfig'; import type { SecurityConfig } from '@/types/SecurityConfig';
export default defineComponent({ export default defineComponent({
components: { components: {
BasePage,
BootstrapAlert, BootstrapAlert,
}, },
data() { data() {

18
webapp/src/views/SystemInfoView.vue
View File

@ -1,16 +1,5 @@
<template> <template>
<div class="container-xxl" role="main"> <BasePage :title="'System Info'" :isLoading="dataLoading">
<div class="page-header">
<h1>System 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">
<FirmwareInfo :systemStatus="systemDataList" /> <FirmwareInfo :systemStatus="systemDataList" />
<div class="mt-5"></div> <div class="mt-5"></div>
<HardwareInfo :systemStatus="systemDataList" /> <HardwareInfo :systemStatus="systemDataList" />
@ -19,12 +8,12 @@
<div class="mt-5"></div> <div class="mt-5"></div>
<RadioInfo :systemStatus="systemDataList" /> <RadioInfo :systemStatus="systemDataList" />
<div class="mt-5"></div> <div class="mt-5"></div>
</template> </BasePage>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue';
import HardwareInfo from "@/components/HardwareInfo.vue"; import HardwareInfo from "@/components/HardwareInfo.vue";
import FirmwareInfo from "@/components/FirmwareInfo.vue"; import FirmwareInfo from "@/components/FirmwareInfo.vue";
import MemoryInfo from "@/components/MemoryInfo.vue"; import MemoryInfo from "@/components/MemoryInfo.vue";
@ -33,6 +22,7 @@ import type { SystemStatus } from '@/types/SystemStatus';
export default defineComponent({ export default defineComponent({
components: { components: {
BasePage,
HardwareInfo, HardwareInfo,
FirmwareInfo, FirmwareInfo,
MemoryInfo, MemoryInfo,