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

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

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

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

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

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

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

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

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

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

@ -1,19 +1,9 @@
<template>
<div class="container-xxl" role="main">
<div class="page-header">
<h1>MqTT Settings</h1>
</div>
<BasePage :title="'MqTT Settings'" :isLoading="dataLoading">
<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>
@ -93,8 +83,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>
@ -221,17 +211,18 @@
<button type="submit" class="btn btn-primary mb-3">Save</button>
</form>
</template>
</div>
</BasePage>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue';
import BootstrapAlert from "@/components/BootstrapAlert.vue";
import type { MqttConfig } from "@/types/MqttConfig";
export default defineComponent({
components: {
BasePage,
BootstrapAlert,
},
data() {

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

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

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

@ -1,19 +1,9 @@
<template>
<div class="container-xxl" role="main">
<div class="page-header">
<h1>Network Settings</h1>
</div>
<BasePage :title="'Network Settings'" :isLoading="dataLoading">
<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>
@ -67,8 +57,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>
@ -107,17 +97,18 @@
</div>
<button type="submit" class="btn btn-primary mb-3">Save</button>
</form>
</template>
</div>
</BasePage>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue';
import BootstrapAlert from "@/components/BootstrapAlert.vue";
import type { NetworkConfig } from "@/types/NetworkkConfig";
export default defineComponent({
components: {
BasePage,
BootstrapAlert,
},
data() {

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

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

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

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

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

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

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

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

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

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