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

webapp: introduced CardElement and replace cards with it

Browse Source
This commit is contained in:
Thomas Basler 2022-12-24 20:20:22 +01:00
parent 20083ecba5
commit 1677f7dd03
22 changed files with 850 additions and 895 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
webapp/src/components/CardElement.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
<div :class="['card', addSpace ? 'mt-5' : '' ]">
<div :class="['card-header', textVariant]">{{ text }}</div>
<div :class="['card-body', centerContent ? 'text-center' : '']">
<slot />
</div>
</div>
</template>
<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
props: {
'text': String,
'textVariant': String,
'addSpace': Boolean,
'centerContent': Boolean,
},
});
</script>

13
webapp/src/components/FirmwareInfo.vue
View File

@ -1,9 +1,5 @@
<template> <template>
<div class="card"> <CardElement :text="$t('firmwareinfo.FirmwareInformation')" textVariant="text-bg-primary">
<div class="card-header text-bg-primary">
{{ $t('firmwareinfo.FirmwareInformation') }}
</div>
<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">
<tbody> <tbody>
@ -54,16 +50,19 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </CardElement>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, type PropType } from 'vue'; import { defineComponent, type PropType } from 'vue';
import type { SystemStatus } from '@/types/SystemStatus'; import type { SystemStatus } from '@/types/SystemStatus';
import { timestampToString } from '@/utils'; import { timestampToString } from '@/utils';
import CardElement from '@/components/CardElement.vue';
export default defineComponent({ export default defineComponent({
components: {
CardElement,
},
props: { props: {
systemStatus: { type: Object as PropType<SystemStatus>, required: true }, systemStatus: { type: Object as PropType<SystemStatus>, required: true },
}, },

13
webapp/src/components/HardwareInfo.vue
View File

@ -1,9 +1,5 @@
<template> <template>
<div class="card"> <CardElement :text="$t('hardwareinfo.HardwareInformation')" textVariant="text-bg-primary">
<div class="card-header text-bg-primary">
{{ $t('hardwareinfo.HardwareInformation') }}
</div>
<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">
<tbody> <tbody>
@ -26,15 +22,18 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </CardElement>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import type { SystemStatus } from '@/types/SystemStatus'; import type { SystemStatus } from '@/types/SystemStatus';
import { defineComponent, type PropType } from 'vue'; import { defineComponent, type PropType } from 'vue';
import CardElement from '@/components/CardElement.vue';
export default defineComponent({ export default defineComponent({
components: {
CardElement,
},
props: { props: {
systemStatus: { type: Object as PropType<SystemStatus>, required: true }, systemStatus: { type: Object as PropType<SystemStatus>, required: true },
}, },

13
webapp/src/components/InterfaceApInfo.vue
View File

@ -1,9 +1,5 @@
<template> <template>
<div class="card"> <CardElement :text="$t('interfaceapinfo.NetworkInterface')" textVariant="text-bg-primary">
<div class="card-header text-bg-primary">
{{ $t('interfaceapinfo.NetworkInterface') }}
</div>
<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">
<tbody> <tbody>
@ -18,15 +14,18 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </CardElement>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import type { NetworkStatus } from '@/types/NetworkStatus'; import type { NetworkStatus } from '@/types/NetworkStatus';
import { defineComponent, type PropType } from 'vue'; import { defineComponent, type PropType } from 'vue';
import CardElement from '@/components/CardElement.vue';
export default defineComponent({ export default defineComponent({
components: {
CardElement,
},
props: { props: {
networkStatus: { type: Object as PropType<NetworkStatus>, required: true }, networkStatus: { type: Object as PropType<NetworkStatus>, required: true },
}, },

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

@ -1,9 +1,7 @@
<template> <template>
<div class="card"> <CardElement :text="$t('interfacenetworkinfo.NetworkInterface', { iface: networkStatus.network_mode })"
<div class="card-header text-bg-primary"> textVariant="text-bg-primary"
{{ $t('interfacenetworkinfo.NetworkInterface', { iface: networkStatus.network_mode }) }} >
</div>
<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">
<tbody> <tbody>
@ -38,15 +36,18 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </CardElement>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import type { NetworkStatus } from '@/types/NetworkStatus'; import type { NetworkStatus } from '@/types/NetworkStatus';
import { defineComponent, type PropType } from 'vue'; import { defineComponent, type PropType } from 'vue';
import CardElement from '@/components/CardElement.vue';
export default defineComponent({ export default defineComponent({
components: {
CardElement,
},
props: { props: {
networkStatus: { type: Object as PropType<NetworkStatus>, required: true }, networkStatus: { type: Object as PropType<NetworkStatus>, required: true },
}, },

9
webapp/src/components/MemoryInfo.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div class="card"> <CardElement :text="$t('memoryinfo.MemoryInformation')" textVariant="text-bg-primary">
<div class="card-header text-bg-primary">{{ $t('memoryinfo.MemoryInformation') }}</div>
<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">
<thead> <thead>
@ -23,17 +21,18 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </CardElement>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, type PropType } from 'vue'; import { defineComponent, type PropType } from 'vue';
import type { SystemStatus } from '@/types/SystemStatus'; import type { SystemStatus } from '@/types/SystemStatus';
import CardElement from '@/components/CardElement.vue';
import FsInfo from "@/components/FsInfo.vue"; import FsInfo from "@/components/FsInfo.vue";
export default defineComponent({ export default defineComponent({
components: { components: {
CardElement,
FsInfo, FsInfo,
}, },
props: { props: {

13
webapp/src/components/RadioInfo.vue
View File

@ -1,9 +1,5 @@
<template> <template>
<div class="card"> <CardElement :text="$t('radioinfo.RadioInformation')" textVariant="text-bg-primary">
<div class="card-header text-bg-primary">
{{ $t('radioinfo.RadioInformation') }}
</div>
<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">
<tbody> <tbody>
@ -34,15 +30,18 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </CardElement>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, type PropType } from 'vue'; import { defineComponent, type PropType } from 'vue';
import type { SystemStatus } from '@/types/SystemStatus'; import type { SystemStatus } from '@/types/SystemStatus';
import CardElement from '@/components/CardElement.vue';
export default defineComponent({ export default defineComponent({
components: {
CardElement,
},
props: { props: {
systemStatus: { type: Object as PropType<SystemStatus>, required: true }, systemStatus: { type: Object as PropType<SystemStatus>, required: true },
}, },

13
webapp/src/components/WifiApInfo.vue
View File

@ -1,9 +1,5 @@
<template> <template>
<div class="card"> <CardElement :text="$t('wifiapinfo.WifiApInfo')" textVariant="text-bg-primary">
<div class="card-header text-bg-primary">
{{ $t('wifiapinfo.WifiApInfo') }}
</div>
<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">
<tbody> <tbody>
@ -28,15 +24,18 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </CardElement>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import type { NetworkStatus } from '@/types/NetworkStatus'; import type { NetworkStatus } from '@/types/NetworkStatus';
import { defineComponent, type PropType } from 'vue'; import { defineComponent, type PropType } from 'vue';
import CardElement from '@/components/CardElement.vue';
export default defineComponent({ export default defineComponent({
components: {
CardElement,
},
props: { props: {
networkStatus: { type: Object as PropType<NetworkStatus>, required: true }, networkStatus: { type: Object as PropType<NetworkStatus>, required: true },
}, },

13
webapp/src/components/WifiStationInfo.vue
View File

@ -1,9 +1,5 @@
<template> <template>
<div class="card"> <CardElement :text="$t('wifistationinfo.WifiStationInfo')" textVariant="text-bg-primary">
<div class="card-header text-bg-primary">
{{ $t('wifistationinfo.WifiStationInfo') }}
</div>
<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">
<tbody> <tbody>
@ -32,15 +28,18 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </CardElement>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import type { NetworkStatus } from '@/types/NetworkStatus'; import type { NetworkStatus } from '@/types/NetworkStatus';
import { defineComponent, type PropType } from 'vue'; import { defineComponent, type PropType } from 'vue';
import CardElement from '@/components/CardElement.vue';
export default defineComponent({ export default defineComponent({
components: {
CardElement,
},
props: { props: {
networkStatus: { type: Object as PropType<NetworkStatus>, required: true }, networkStatus: { type: Object as PropType<NetworkStatus>, required: true },
}, },

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

@ -4,19 +4,13 @@
{{ alertMessage }} {{ alertMessage }}
</BootstrapAlert> </BootstrapAlert>
<div class="card"> <CardElement :text="$t('configadmin.BackupHeader')" textVariant="text-bg-primary" center-content>
<div class="card-header text-bg-primary">{{ $t('configadmin.BackupHeader') }}</div>
<div class="card-body text-center">
{{ $t('configadmin.BackupConfig') }} {{ $t('configadmin.BackupConfig') }}
<button class="btn btn-primary" @click="downloadConfig">{{ $t('configadmin.Backup') }} <button class="btn btn-primary" @click="downloadConfig">{{ $t('configadmin.Backup') }}
</button> </button>
</div> </CardElement>
</div>
<div class="card mt-5">
<div class="card-header text-bg-primary">{{ $t('configadmin.RestoreHeader') }}</div>
<div class="card-body text-center">
<CardElement :text="$t('configadmin.RestoreHeader')" textVariant="text-bg-primary" center-content add-space>
<div v-if="!uploading && UploadError != ''"> <div v-if="!uploading && UploadError != ''">
<p class="h1 mb-2"> <p class="h1 mb-2">
<BIconExclamationCircleFill /> <BIconExclamationCircleFill />
@ -59,19 +53,14 @@
</div> </div>
<div class="alert alert-danger mt-3" role="alert" v-html="$t('configadmin.RestoreHint')"></div> <div class="alert alert-danger mt-3" role="alert" v-html="$t('configadmin.RestoreHint')"></div>
</div> </CardElement>
</div>
<div class="card mt-5">
<div class="card-header text-bg-primary">{{ $t('configadmin.ResetHeader') }}</div>
<div class="card-body text-center">
<CardElement :text="$t('configadmin.ResetHeader')" textVariant="text-bg-primary" center-content add-space>
<button class="btn btn-danger" @click="onFactoryResetModal">{{ $t('configadmin.FactoryResetButton') }} <button class="btn btn-danger" @click="onFactoryResetModal">{{ $t('configadmin.FactoryResetButton') }}
</button> </button>
<div class="alert alert-danger mt-3" role="alert" v-html="$t('configadmin.ResetHint')"></div> <div class="alert alert-danger mt-3" role="alert" v-html="$t('configadmin.ResetHint')"></div>
</div> </CardElement>
</div>
</BasePage> </BasePage>
<div class="modal" id="factoryReset" tabindex="-1"> <div class="modal" id="factoryReset" tabindex="-1">
@ -106,6 +95,7 @@ import {
} from 'bootstrap-icons-vue'; } from 'bootstrap-icons-vue';
import * as bootstrap from 'bootstrap'; import * as bootstrap from 'bootstrap';
import BootstrapAlert from "@/components/BootstrapAlert.vue"; import BootstrapAlert from "@/components/BootstrapAlert.vue";
import CardElement from '@/components/CardElement.vue';
import { handleResponse, authHeader, isLoggedIn } from '@/utils/authentication'; import { handleResponse, authHeader, isLoggedIn } from '@/utils/authentication';
export default defineComponent({ export default defineComponent({
@ -115,6 +105,7 @@ export default defineComponent({
BIconArrowLeft, BIconArrowLeft,
BIconCheckCircle, BIconCheckCircle,
BootstrapAlert, BootstrapAlert,
CardElement,
}, },
data() { data() {
return { return {

9
webapp/src/views/ConsoleInfoView.vue
View File

@ -1,8 +1,6 @@
<template> <template>
<BasePage :title="$t('console.Console')" :isLoading="dataLoading"> <BasePage :title="$t('console.Console')" :isLoading="dataLoading">
<div class="card"> <CardElement :text="$t('console.VirtualDebugConsole')" textVariant="text-bg-primary">
<div class="card-header text-bg-primary">{{ $t('console.VirtualDebugConsole') }}</div>
<div class="card-body">
<div class="row g-3 align-items-center"> <div class="row g-3 align-items-center">
<div class="col"> <div class="col">
<div class="form-check form-switch"> <div class="form-check form-switch">
@ -23,19 +21,20 @@
</div> </div>
</div> </div>
<textarea id="console" class="form-control" rows="24" v-model="consoleBuffer" readonly></textarea> <textarea id="console" class="form-control" rows="24" v-model="consoleBuffer" readonly></textarea>
</div> </CardElement>
</div>
</BasePage> </BasePage>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue'; import BasePage from '@/components/BasePage.vue';
import CardElement from '@/components/CardElement.vue';
import { authUrl } from '@/utils/authentication'; import { authUrl } from '@/utils/authentication';
export default defineComponent({ export default defineComponent({
components: { components: {
BasePage, BasePage,
CardElement,
}, },
data() { data() {
return { return {

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

@ -5,10 +5,7 @@
</BootstrapAlert> </BootstrapAlert>
<form @submit="saveDtuConfig"> <form @submit="saveDtuConfig">
<div class="card"> <CardElement :text="$t('dtuadmin.DtuConfiguration')" textVariant="text-bg-primary">
<div class="card-header text-bg-primary">{{ $t('dtuadmin.DtuConfiguration') }}</div>
<div class="card-body">
<InputElement :label="$t('dtuadmin.Serial')" <InputElement :label="$t('dtuadmin.Serial')"
v-model="dtuConfigList.dtu_serial" v-model="dtuConfigList.dtu_serial"
type="number" min="1" max="199999999999" type="number" min="1" max="199999999999"
@ -32,8 +29,7 @@
</select> </select>
</div> </div>
</div> </div>
</div> </CardElement>
</div>
<button type="submit" class="btn btn-primary mb-3">{{ $t('dtuadmin.Save') }}</button> <button type="submit" class="btn btn-primary mb-3">{{ $t('dtuadmin.Save') }}</button>
</form> </form>
</BasePage> </BasePage>
@ -44,6 +40,7 @@ import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue'; import BasePage from '@/components/BasePage.vue';
import BootstrapAlert from "@/components/BootstrapAlert.vue"; import BootstrapAlert from "@/components/BootstrapAlert.vue";
import InputElement from '@/components/InputElement.vue'; import InputElement from '@/components/InputElement.vue';
import CardElement from '@/components/CardElement.vue';
import { handleResponse, authHeader } from '@/utils/authentication'; import { handleResponse, authHeader } from '@/utils/authentication';
import type { DtuConfig } from "@/types/DtuConfig"; import type { DtuConfig } from "@/types/DtuConfig";
import { import {
@ -56,6 +53,7 @@ export default defineComponent({
BootstrapAlert, BootstrapAlert,
BIconInfoCircle, BIconInfoCircle,
InputElement, InputElement,
CardElement,
}, },
data() { data() {
return { return {

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

@ -8,9 +8,9 @@
</div> </div>
</div> </div>
<div v-if="!loading && !uploading && OTAError != ''" class="card"> <CardElement :text="$t('firmwareupgrade.OtaError')" textVariant="text-bg-danger" center-content
<div class="card-header text-bg-danger">{{ $t('firmwareupgrade.OtaError') }}</div> v-if="!loading && !uploading && OTAError != ''"
<div class="card-body text-center"> >
<p class="h1 mb-2"> <p class="h1 mb-2">
<BIconExclamationCircleFill /> <BIconExclamationCircleFill />
</p> </p>
@ -26,12 +26,11 @@
<button class="btn btn-primary" @click="retryOTA"> <button class="btn btn-primary" @click="retryOTA">
<BIconArrowRepeat /> {{ $t('firmwareupgrade.Retry') }} <BIconArrowRepeat /> {{ $t('firmwareupgrade.Retry') }}
</button> </button>
</div> </CardElement>
</div>
<div v-else-if="!loading && !uploading && OTASuccess" class="card"> <CardElement :text="$t('firmwareupgrade.OtaStatus')" textVariant="text-bg-success" center-content
<div class="card-header text-bg-success">{{ $t('firmwareupgrade.OtaStatus') }}</div> v-else-if="!loading && !uploading && OTASuccess"
<div class="card-body text-center"> >
<span class="h1 mb-2"> <span class="h1 mb-2">
<BIconCheckCircle /> <BIconCheckCircle />
</span> </span>
@ -41,35 +40,34 @@
<button class="btn btn-primary" @click="clear"> <button class="btn btn-primary" @click="clear">
<BIconArrowLeft /> {{ $t('firmwareupgrade.Back') }} <BIconArrowLeft /> {{ $t('firmwareupgrade.Back') }}
</button> </button>
</div> </CardElement>
</div>
<div v-else-if="!loading && !uploading" class="card"> <CardElement :text="$t('firmwareupgrade.FirmwareUpload')" textVariant="text-bg-primary" center-content
<div class="card-header text-bg-primary">{{ $t('firmwareupgrade.FirmwareUpload') }}</div> v-else-if="!loading && !uploading"
<div class="card-body text-center"> >
<div class="form-group pt-2 mt-3"> <div class="form-group pt-2 mt-3">
<input class="form-control" type="file" ref="file" accept=".bin,.bin.gz" @change="uploadOTA" /> <input class="form-control" type="file" ref="file" accept=".bin,.bin.gz" @change="uploadOTA" />
</div> </div>
</div> </CardElement>
</div>
<div v-else-if="!loading && uploading" class="card"> <CardElement :text="$t('firmwareupgrade.UploadProgress')" textVariant="text-bg-primary" center-content
<div class="card-header text-bg-primary">{{ $t('firmwareupgrade.UploadProgress') }}</div> v-else-if="!loading && uploading"
<div class="card-body text-center"> >
<div class="progress"> <div class="progress">
<div class="progress-bar" role="progressbar" :style="{ width: progress + '%' }" <div class="progress-bar" role="progressbar" :style="{ width: progress + '%' }"
v-bind:aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100"> v-bind:aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100">
{{ progress }}% {{ progress }}%
</div> </div>
</div> </div>
</div> </CardElement>
</div>
</BasePage> </BasePage>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue'; import BasePage from '@/components/BasePage.vue';
import CardElement from '@/components/CardElement.vue';
import SparkMD5 from "spark-md5"; import SparkMD5 from "spark-md5";
import { import {
BIconExclamationCircleFill, BIconExclamationCircleFill,
@ -82,6 +80,7 @@ import { authHeader, isLoggedIn } from '@/utils/authentication';
export default defineComponent({ export default defineComponent({
components: { components: {
BasePage, BasePage,
CardElement,
BIconExclamationCircleFill, BIconExclamationCircleFill,
BIconArrowLeft, BIconArrowLeft,
BIconArrowRepeat, BIconArrowRepeat,

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

@ -4,9 +4,7 @@
{{ alert.message }} {{ alert.message }}
</BootstrapAlert> </BootstrapAlert>
<div class="card"> <CardElement :text="$t('inverteradmin.AddInverter')" textVariant="text-bg-primary">
<div class="card-header text-bg-primary">{{ $t('inverteradmin.AddInverter') }}</div>
<div class="card-body">
<form class="form-inline" v-on:submit.prevent="onSubmit"> <form class="form-inline" v-on:submit.prevent="onSubmit">
<div class="form-group"> <div class="form-group">
<label>{{ $t('inverteradmin.Serial') }}</label> <label>{{ $t('inverteradmin.Serial') }}</label>
@ -23,12 +21,9 @@
</div> </div>
<div class="alert alert-secondary" role="alert" v-html="$t('inverteradmin.AddHint')"></div> <div class="alert alert-secondary" role="alert" v-html="$t('inverteradmin.AddHint')"></div>
</form> </form>
</div> </CardElement>
</div>
<div class="card mt-5"> <CardElement :text="$t('inverteradmin.InverterList')" textVariant="text-bg-primary" add-space>
<div class="card-header text-bg-primary">{{ $t('inverteradmin.InverterList') }}</div>
<div class="card-body">
<div class="table-responsive"> <div class="table-responsive">
<table class="table"> <table class="table">
<thead> <thead>
@ -56,8 +51,7 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </CardElement>
</div>
</BasePage> </BasePage>
<div class="modal" id="inverterEdit" tabindex="-1"> <div class="modal" id="inverterEdit" tabindex="-1">
@ -163,6 +157,7 @@ import {
} from 'bootstrap-icons-vue'; } from 'bootstrap-icons-vue';
import * as bootstrap from 'bootstrap'; import * as bootstrap from 'bootstrap';
import BootstrapAlert from "@/components/BootstrapAlert.vue"; import BootstrapAlert from "@/components/BootstrapAlert.vue";
import CardElement from '@/components/CardElement.vue';
import { handleResponse, authHeader } from '@/utils/authentication'; import { handleResponse, authHeader } from '@/utils/authentication';
declare interface Channel { declare interface Channel {
@ -189,6 +184,7 @@ export default defineComponent({
components: { components: {
BasePage, BasePage,
BootstrapAlert, BootstrapAlert,
CardElement,
BIconTrash, BIconTrash,
BIconPencil, BIconPencil,
BIconInfoCircle, BIconInfoCircle,

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

@ -4,10 +4,7 @@
{{ alertMessage }} {{ alertMessage }}
</BootstrapAlert> </BootstrapAlert>
<div class="card"> <CardElement :text="$t('login.SystemLogin')" textVariant="text-bg-danger">
<div class="card-header text-bg-danger">{{ $t('login.SystemLogin') }}</div>
<div class="card-body">
<form @submit.prevent="handleSubmit"> <form @submit.prevent="handleSubmit">
<div class="form-group"> <div class="form-group">
<label for="username">{{ $t('login.Username') }}</label> <label for="username">{{ $t('login.Username') }}</label>
@ -27,8 +24,7 @@
<button class="btn btn-primary" :disabled="dataLoading">{{ $t('login.LoginButton') }}</button> <button class="btn btn-primary" :disabled="dataLoading">{{ $t('login.LoginButton') }}</button>
</div> </div>
</form> </form>
</div> </CardElement>
</div>
</BasePage> </BasePage>
</template> </template>
@ -37,12 +33,14 @@ import { defineComponent } from 'vue';
import router from '@/router'; import router from '@/router';
import { login } from '@/utils'; import { login } from '@/utils';
import BasePage from '@/components/BasePage.vue'; import BasePage from '@/components/BasePage.vue';
import CardElement from '@/components/CardElement.vue';
import BootstrapAlert from "@/components/BootstrapAlert.vue"; import BootstrapAlert from "@/components/BootstrapAlert.vue";
export default defineComponent({ export default defineComponent({
components: { components: {
BasePage, BasePage,
BootstrapAlert, BootstrapAlert,
CardElement,
}, },
data() { data() {
return { return {

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

@ -4,16 +4,12 @@
{{ alertMessage }} {{ alertMessage }}
</BootstrapAlert> </BootstrapAlert>
<div class="card mt-5"> <CardElement :text="$t('maintenancereboot.PerformReboot')" textVariant="text-bg-primary" center-content>
<div class="card-header text-bg-primary">{{ $t('maintenancereboot.PerformReboot') }}</div>
<div class="card-body text-center">
<button class="btn btn-danger" @click="onOpenModal(performReboot)">{{ $t('maintenancereboot.Reboot') }} <button class="btn btn-danger" @click="onOpenModal(performReboot)">{{ $t('maintenancereboot.Reboot') }}
</button> </button>
<div class="alert alert-danger mt-3" role="alert" v-html="$t('maintenancereboot.RebootHint')"></div> <div class="alert alert-danger mt-3" role="alert" v-html="$t('maintenancereboot.RebootHint')"></div>
</div> </CardElement>
</div>
</BasePage> </BasePage>
<div class="modal" id="performReboot" tabindex="-1"> <div class="modal" id="performReboot" tabindex="-1">
@ -42,12 +38,14 @@ import { defineComponent } from 'vue';
import * as bootstrap from 'bootstrap'; import * as bootstrap from 'bootstrap';
import BasePage from '@/components/BasePage.vue'; import BasePage from '@/components/BasePage.vue';
import BootstrapAlert from "@/components/BootstrapAlert.vue"; import BootstrapAlert from "@/components/BootstrapAlert.vue";
import CardElement from '@/components/CardElement.vue';
import { handleResponse, authHeader, isLoggedIn } from '@/utils/authentication'; import { handleResponse, authHeader, isLoggedIn } from '@/utils/authentication';
export default defineComponent({ export default defineComponent({
components: { components: {
BasePage, BasePage,
BootstrapAlert, BootstrapAlert,
CardElement,
}, },
data() { data() {
return { return {

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

@ -5,10 +5,7 @@
</BootstrapAlert> </BootstrapAlert>
<form @submit="saveMqttConfig"> <form @submit="saveMqttConfig">
<div class="card"> <CardElement :text="$t('mqttadmin.MqttConfiguration')" textVariant="text-bg-primary">
<div class="card-header text-bg-primary">{{ $t('mqttadmin.MqttConfiguration') }}</div>
<div class="card-body">
<InputElement :label="$t('mqttadmin.EnableMqtt')" <InputElement :label="$t('mqttadmin.EnableMqtt')"
v-model="mqttConfigList.mqtt_enabled" v-model="mqttConfigList.mqtt_enabled"
type="checkbox" wide/> type="checkbox" wide/>
@ -17,15 +14,11 @@
:label="$t('mqttadmin.EnableHass')" :label="$t('mqttadmin.EnableHass')"
v-model="mqttConfigList.mqtt_hass_enabled" v-model="mqttConfigList.mqtt_hass_enabled"
type="checkbox" wide/> type="checkbox" wide/>
</div> </CardElement>
</div>
<div class="card mt-5" v-show="mqttConfigList.mqtt_enabled">
<div class="card-header text-bg-primary">
{{ $t('mqttadmin.MqttBrokerParameter') }}
</div>
<div class="card-body">
<CardElement :text="$t('mqttadmin.MqttBrokerParameter')" textVariant="text-bg-primary" add-space
v-show="mqttConfigList.mqtt_enabled"
>
<InputElement :label="$t('mqttadmin.Hostname')" <InputElement :label="$t('mqttadmin.Hostname')"
v-model="mqttConfigList.mqtt_hostname" v-model="mqttConfigList.mqtt_hostname"
type="text" maxlength="128" type="text" maxlength="128"
@ -67,13 +60,11 @@
:label="$t('mqttadmin.RootCa')" :label="$t('mqttadmin.RootCa')"
v-model="mqttConfigList.mqtt_root_ca_cert" v-model="mqttConfigList.mqtt_root_ca_cert"
type="textarea" maxlength="2048" rows="10"/> type="textarea" maxlength="2048" rows="10"/>
</div> </CardElement>
</div>
<div class="card mt-5" v-show="mqttConfigList.mqtt_enabled">
<div class="card-header text-bg-primary">{{ $t('mqttadmin.LwtParameters') }}</div>
<div class="card-body">
<CardElement :text="$t('mqttadmin.LwtParameters')" textVariant="text-bg-primary" add-space
v-show="mqttConfigList.mqtt_enabled"
>
<InputElement :label="$t('mqttadmin.LwtTopic')" <InputElement :label="$t('mqttadmin.LwtTopic')"
v-model="mqttConfigList.mqtt_lwt_topic" v-model="mqttConfigList.mqtt_lwt_topic"
type="text" maxlength="32" :prefix="mqttConfigList.mqtt_topic" type="text" maxlength="32" :prefix="mqttConfigList.mqtt_topic"
@ -88,13 +79,11 @@
v-model="mqttConfigList.mqtt_lwt_offline" v-model="mqttConfigList.mqtt_lwt_offline"
type="text" maxlength="20" type="text" maxlength="20"
:placeholder="$t('mqttadmin.LwtOfflineHint')"/> :placeholder="$t('mqttadmin.LwtOfflineHint')"/>
</div> </CardElement>
</div>
<div class="card mt-5" v-show="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled">
<div class="card-header text-bg-primary">{{ $t('mqttadmin.HassParameters') }}</div>
<div class="card-body">
<CardElement :text="$t('mqttadmin.HassParameters')" textVariant="text-bg-primary" add-space
v-show="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled"
>
<InputElement :label="$t('mqttadmin.HassPrefixTopic')" <InputElement :label="$t('mqttadmin.HassPrefixTopic')"
v-model="mqttConfigList.mqtt_hass_topic" v-model="mqttConfigList.mqtt_hass_topic"
type="text" maxlength="32" type="text" maxlength="32"
@ -111,8 +100,7 @@
<InputElement :label="$t('mqttadmin.HassIndividual')" <InputElement :label="$t('mqttadmin.HassIndividual')"
v-model="mqttConfigList.mqtt_hass_individualpanels" v-model="mqttConfigList.mqtt_hass_individualpanels"
type="checkbox"/> type="checkbox"/>
</div> </CardElement>
</div>
<button type="submit" class="btn btn-primary mb-3">{{ $t('mqttadmin.Save') }}</button> <button type="submit" class="btn btn-primary mb-3">{{ $t('mqttadmin.Save') }}</button>
</form> </form>
@ -124,6 +112,7 @@ import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue'; import BasePage from '@/components/BasePage.vue';
import BootstrapAlert from "@/components/BootstrapAlert.vue"; import BootstrapAlert from "@/components/BootstrapAlert.vue";
import InputElement from '@/components/InputElement.vue'; import InputElement from '@/components/InputElement.vue';
import CardElement from '@/components/CardElement.vue';
import { handleResponse, authHeader } from '@/utils/authentication'; import { handleResponse, authHeader } from '@/utils/authentication';
import type { MqttConfig } from "@/types/MqttConfig"; import type { MqttConfig } from "@/types/MqttConfig";
@ -132,6 +121,7 @@ export default defineComponent({
BasePage, BasePage,
BootstrapAlert, BootstrapAlert,
InputElement, InputElement,
CardElement,
}, },
data() { data() {
return { return {

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

@ -1,8 +1,6 @@
<template> <template>
<BasePage :title="$t('mqttinfo.MqttInformation')" :isLoading="dataLoading"> <BasePage :title="$t('mqttinfo.MqttInformation')" :isLoading="dataLoading">
<div class="card"> <CardElement :text="$t('mqttinfo.ConfigurationSummary')" textVariant="text-bg-primary">
<div class="card-header text-bg-primary">{{ $t('mqttinfo.ConfigurationSummary') }}</div>
<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">
<tbody> <tbody>
@ -63,12 +61,9 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </CardElement>
</div>
<div class="card mt-5"> <CardElement :text="$t('mqttinfo.HassSummary')" textVariant="text-bg-primary" add-space>
<div class="card-header text-bg-primary">{{ $t('mqttinfo.HassSummary') }}</div>
<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">
<tbody> <tbody>
@ -120,12 +115,9 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </CardElement>
</div>
<div class="card mt-5"> <CardElement :text="$t('mqttinfo.RuntimeSummary')" textVariant="text-bg-primary" add-space>
<div class="card-header text-bg-primary">{{ $t('mqttinfo.RuntimeSummary') }}</div>
<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">
<tbody> <tbody>
@ -142,8 +134,7 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </CardElement>
</div>
</BasePage> </BasePage>
</template> </template>
@ -151,11 +142,13 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { handleResponse, authHeader } from '@/utils/authentication'; import { handleResponse, authHeader } from '@/utils/authentication';
import BasePage from '@/components/BasePage.vue'; import BasePage from '@/components/BasePage.vue';
import CardElement from '@/components/CardElement.vue';
import type { MqttStatus } from '@/types/MqttStatus'; import type { MqttStatus } from '@/types/MqttStatus';
export default defineComponent({ export default defineComponent({
components: { components: {
BasePage, BasePage,
CardElement,
}, },
data() { data() {
return { return {

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

@ -5,10 +5,7 @@
</BootstrapAlert> </BootstrapAlert>
<form @submit="saveNetworkConfig"> <form @submit="saveNetworkConfig">
<div class="card"> <CardElement :text="$t('networkadmin.WifiConfiguration')" textVariant="text-bg-primary">
<div class="card-header text-bg-primary">{{ $t('networkadmin.WifiConfiguration') }}</div>
<div class="card-body">
<InputElement :label="$t('networkadmin.WifiSsid')" <InputElement :label="$t('networkadmin.WifiSsid')"
v-model="networkConfigList.ssid" v-model="networkConfigList.ssid"
type="text" maxlength="32"/> type="text" maxlength="32"/>
@ -27,15 +24,11 @@
<InputElement :label="$t('networkadmin.EnableDhcp')" <InputElement :label="$t('networkadmin.EnableDhcp')"
v-model="networkConfigList.dhcp" v-model="networkConfigList.dhcp"
type="checkbox"/> type="checkbox"/>
</div> </CardElement>
</div>
<div class="card" v-show="!networkConfigList.dhcp">
<div class="card-header text-bg-primary">
{{ $t('networkadmin.StaticIpConfiguration') }}
</div>
<div class="card-body">
<CardElement :text="$t('networkadmin.StaticIpConfiguration')" textVariant="text-bg-primary" add-space
v-show="!networkConfigList.dhcp"
>
<InputElement :label="$t('networkadmin.IpAddress')" <InputElement :label="$t('networkadmin.IpAddress')"
v-model="networkConfigList.ipaddress" v-model="networkConfigList.ipaddress"
type="text" maxlength="32"/> type="text" maxlength="32"/>
@ -55,8 +48,8 @@
<InputElement :label="$t('networkadmin.Dns', { num: 2 })" <InputElement :label="$t('networkadmin.Dns', { num: 2 })"
v-model="networkConfigList.dns2" v-model="networkConfigList.dns2"
type="text" maxlength="32"/> type="text" maxlength="32"/>
</div> </CardElement>
</div>
<button type="submit" class="btn btn-primary mb-3">{{ $t('networkadmin.Save') }}</button> <button type="submit" class="btn btn-primary mb-3">{{ $t('networkadmin.Save') }}</button>
</form> </form>
</BasePage> </BasePage>
@ -67,6 +60,7 @@ import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue'; import BasePage from '@/components/BasePage.vue';
import BootstrapAlert from "@/components/BootstrapAlert.vue"; import BootstrapAlert from "@/components/BootstrapAlert.vue";
import InputElement from '@/components/InputElement.vue'; import InputElement from '@/components/InputElement.vue';
import CardElement from '@/components/CardElement.vue';
import { handleResponse, authHeader } from '@/utils/authentication'; import { handleResponse, authHeader } from '@/utils/authentication';
import type { NetworkConfig } from "@/types/NetworkkConfig"; import type { NetworkConfig } from "@/types/NetworkkConfig";
@ -75,6 +69,7 @@ export default defineComponent({
BasePage, BasePage,
BootstrapAlert, BootstrapAlert,
InputElement, InputElement,
CardElement,
}, },
data() { data() {
return { return {

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

@ -5,10 +5,7 @@
</BootstrapAlert> </BootstrapAlert>
<form @submit="saveNtpConfig"> <form @submit="saveNtpConfig">
<div class="card"> <CardElement :text="$t('ntpadmin.NtpConfiguration')" textVariant="text-bg-primary">
<div class="card-header text-bg-primary">{{ $t('ntpadmin.NtpConfiguration') }}</div>
<div class="card-body">
<InputElement :label="$t('ntpadmin.TimeServer')" <InputElement :label="$t('ntpadmin.TimeServer')"
v-model="ntpConfigList.ntp_server" v-model="ntpConfigList.ntp_server"
type="text" maxlength="32" type="text" maxlength="32"
@ -29,15 +26,11 @@
<InputElement :label="$t('ntpadmin.TimezoneConfig')" <InputElement :label="$t('ntpadmin.TimezoneConfig')"
v-model="ntpConfigList.ntp_timezone" v-model="ntpConfigList.ntp_timezone"
type="text" maxlength="32" disabled/> type="text" maxlength="32" disabled/>
</div> </CardElement>
</div>
<button type="submit" class="btn btn-primary mb-3">{{ $t('ntpadmin.Save') }}</button> <button type="submit" class="btn btn-primary mb-3">{{ $t('ntpadmin.Save') }}</button>
</form> </form>
<div class="card"> <CardElement :text="$t('ntpadmin.ManualTimeSynchronization')" textVariant="text-bg-primary" add-space>
<div class="card-header text-bg-primary">{{ $t('ntpadmin.ManualTimeSynchronization') }}</div>
<div class="card-body">
<InputElement :label="$t('ntpadmin.CurrentOpenDtuTime')" <InputElement :label="$t('ntpadmin.CurrentOpenDtuTime')"
v-model="mcuTime" v-model="mcuTime"
type="text" disabled/> type="text" disabled/>
@ -52,8 +45,7 @@
</button> </button>
</div> </div>
<div class="alert alert-secondary" role="alert" v-html="$t('ntpadmin.SynchronizeTimeHint')"></div> <div class="alert alert-secondary" role="alert" v-html="$t('ntpadmin.SynchronizeTimeHint')"></div>
</div> </CardElement>
</div>
</BasePage> </BasePage>
</template> </template>
@ -62,6 +54,7 @@ import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue'; import BasePage from '@/components/BasePage.vue';
import BootstrapAlert from "@/components/BootstrapAlert.vue"; import BootstrapAlert from "@/components/BootstrapAlert.vue";
import InputElement from '@/components/InputElement.vue'; import InputElement from '@/components/InputElement.vue';
import CardElement from '@/components/CardElement.vue';
import { handleResponse, authHeader } from '@/utils/authentication'; import { handleResponse, authHeader } from '@/utils/authentication';
import type { NtpConfig } from "@/types/NtpConfig"; import type { NtpConfig } from "@/types/NtpConfig";
import { import {
@ -74,6 +67,7 @@ export default defineComponent({
BootstrapAlert, BootstrapAlert,
BIconInfoCircle, BIconInfoCircle,
InputElement, InputElement,
CardElement,
}, },
data() { data() {
return { return {

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

@ -1,8 +1,6 @@
<template> <template>
<BasePage :title="$t('ntpinfo.NtpInformation')" :isLoading="dataLoading"> <BasePage :title="$t('ntpinfo.NtpInformation')" :isLoading="dataLoading">
<div class="card"> <CardElement :text="$t('ntpinfo.ConfigurationSummary')" textVariant="text-bg-primary">
<div class="card-header text-bg-primary">{{ $t('ntpinfo.ConfigurationSummary') }}</div>
<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">
<tbody> <tbody>
@ -21,12 +19,9 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </CardElement>
</div>
<div class="card mt-5"> <CardElement :text="$t('ntpinfo.CurrentTime')" textVariant="text-bg-primary" add-space>
<div class="card-header text-bg-primary">{{ $t('ntpinfo.CurrentTime') }}</div>
<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">
<tbody> <tbody>
@ -47,8 +42,7 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </CardElement>
</div>
</BasePage> </BasePage>
</template> </template>
@ -56,11 +50,13 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { handleResponse, authHeader } from '@/utils/authentication'; import { handleResponse, authHeader } from '@/utils/authentication';
import BasePage from '@/components/BasePage.vue'; import BasePage from '@/components/BasePage.vue';
import CardElement from '@/components/CardElement.vue';
import type { NtpStatus } from "@/types/NtpStatus"; import type { NtpStatus } from "@/types/NtpStatus";
export default defineComponent({ export default defineComponent({
components: { components: {
BasePage, BasePage,
CardElement,
}, },
data() { data() {
return { return {

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

@ -5,10 +5,7 @@
</BootstrapAlert> </BootstrapAlert>
<form @submit="savePasswordConfig"> <form @submit="savePasswordConfig">
<div class="card"> <CardElement :text="$t('securityadmin.AdminPassword')" textVariant="text-bg-primary">
<div class="card-header text-bg-primary">{{ $t('securityadmin.AdminPassword') }}</div>
<div class="card-body">
<InputElement :label="$t('securityadmin.Password')" <InputElement :label="$t('securityadmin.Password')"
v-model="securityConfigList.password" v-model="securityConfigList.password"
type="password" maxlength="64"/> type="password" maxlength="64"/>
@ -18,18 +15,13 @@
type="password" maxlength="64"/> type="password" maxlength="64"/>
<div class="alert alert-secondary" role="alert" v-html="$t('securityadmin.PasswordHint')"></div> <div class="alert alert-secondary" role="alert" v-html="$t('securityadmin.PasswordHint')"></div>
</div> </CardElement>
</div>
<div class="card mt-5">
<div class="card-header text-bg-primary">{{ $t('securityadmin.Permissions') }}</div>
<div class="card-body">
<CardElement :text="$t('securityadmin.Permissions')" textVariant="text-bg-primary" add-space>
<InputElement :label="$t('securityadmin.ReadOnly')" <InputElement :label="$t('securityadmin.ReadOnly')"
v-model="securityConfigList.allow_readonly" v-model="securityConfigList.allow_readonly"
type="checkbox" wide/> type="checkbox" wide/>
</div> </CardElement>
</div>
<button type="submit" class="btn btn-primary mb-3">{{ $t('securityadmin.Save') }}</button> <button type="submit" class="btn btn-primary mb-3">{{ $t('securityadmin.Save') }}</button>
</form> </form>
@ -41,6 +33,7 @@ import { defineComponent } from 'vue';
import BasePage from '@/components/BasePage.vue'; import BasePage from '@/components/BasePage.vue';
import BootstrapAlert from "@/components/BootstrapAlert.vue"; import BootstrapAlert from "@/components/BootstrapAlert.vue";
import InputElement from '@/components/InputElement.vue'; import InputElement from '@/components/InputElement.vue';
import CardElement from '@/components/CardElement.vue';
import { handleResponse, authHeader } from '@/utils/authentication'; import { handleResponse, authHeader } from '@/utils/authentication';
import type { SecurityConfig } from '@/types/SecurityConfig'; import type { SecurityConfig } from '@/types/SecurityConfig';
@ -49,6 +42,7 @@ export default defineComponent({
BasePage, BasePage,
BootstrapAlert, BootstrapAlert,
InputElement, InputElement,
CardElement,
}, },
data() { data() {
return { return {