webapp: Apply auto formatter

webapp/src/App.vue

@@ -5,10 +5,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import NavBar from "./components/NavBar.vue";
+import NavBar from './components/NavBar.vue';
 
 export default defineComponent({
-    name: "App",
+    name: 'App',
     components: {
         NavBar,
     },

webapp/src/components/BasePage.vue

@@ -1,19 +1,29 @@
 <template>
-    <div :class="{'container-xxl': !isWideScreen,
-    'container-fluid': isWideScreen}" role="main">
+    <div :class="{ 'container-xxl': !isWideScreen, 'container-fluid': isWideScreen }" role="main">
         <div class="page-header">
             <div class="row">
                 <div class="col-sm-11">
-                    <h1>{{ title }}
-                        <span v-if="showWebSocket" :class="{
-                            'onlineMarker': isWebsocketConnected,
-                            'offlineMarker': !isWebsocketConnected,
-                        }"></span>
+                    <h1>
+                        {{ title }}
+                        <span
+                            v-if="showWebSocket"
+                            :class="{
+                                onlineMarker: isWebsocketConnected,
+                                offlineMarker: !isWebsocketConnected,
+                            }"
+                        ></span>
                     </h1>
                 </div>
                 <div class="col-sm-1" v-if="showReload">
-                    <button type="button" class="float-end btn btn-outline-primary"
-                        @click="$emit('reload')" v-tooltip :title="$t('base.Reload')" ><BIconArrowClockwise /></button>
+                    <button
+                        type="button"
+                        class="float-end btn btn-outline-primary"
+                        @click="$emit('reload')"
+                        v-tooltip
+                        :title="$t('base.Reload')"
+                    >
+                        <BIconArrowClockwise />
+                    </button>
                 </div>
             </div>
         </div>
@@ -48,7 +58,7 @@ export default defineComponent({
         showReload: { type: Boolean, required: false, default: false },
     },
     mounted() {
-        console.log("init");
+        console.log('init');
         PullToRefresh.init({
             mainElement: 'body', // above which element?
             instructionsPullToRefresh: this.$t('base.Pull'),
@@ -56,11 +66,11 @@ export default defineComponent({
             instructionsRefreshing: this.$t('base.Refreshing'),
             onRefresh: () => {
                 this.$emit('reload');
-            }
+            },
         });
     },
     unmounted() {
-        console.log("destroy");
+        console.log('destroy');
         PullToRefresh.destroyAll();
     },
 });
@@ -100,13 +110,15 @@ export default defineComponent({
     margin: -12px 0 0 -12px;
     border: 1px solid #00bb00;
     border-radius: 50%;
-    box-shadow: 0 0 4px #00bb00, inset 0 0 4px rgb(56, 111, 169);
+    box-shadow:
+        0 0 4px #00bb00,
+        inset 0 0 4px rgb(56, 111, 169);
     transform: scale(0);
     animation: online 2.5s ease-in-out infinite;
 }
 @keyframes online {
     0% {
-        transform: scale(.1);
+        transform: scale(0.1);
         opacity: 1;
     }
 

webapp/src/components/BootstrapAlert.vue

@@ -1,44 +1,50 @@
 <template>
     <div v-if="isAlertVisible" ref="element" class="alert" role="alert" :class="classes">
         <slot />
-        <button v-if="dismissible" type="button" class="btn-close" data-bs-dismiss="alert" :aria-label="dismissLabel"
-            @click="dismissClicked" />
+        <button
+            v-if="dismissible"
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="alert"
+            :aria-label="dismissLabel"
+            @click="dismissClicked"
+        />
     </div>
 </template>
 
 <script lang="ts">
-import Alert from "bootstrap/js/dist/alert";
-import { computed, defineComponent, onBeforeUnmount, ref, watch } from "vue";
+import Alert from 'bootstrap/js/dist/alert';
+import { computed, defineComponent, onBeforeUnmount, ref, watch } from 'vue';
 
 export const toInteger = (value: number, defaultValue = NaN) => {
     return Number.isInteger(value) ? value : defaultValue;
 };
 
 export default defineComponent({
-    name: "BootstrapAlert",
+    name: 'BootstrapAlert',
     props: {
-        dismissLabel: { type: String, default: "Close" },
+        dismissLabel: { type: String, default: 'Close' },
         dismissible: { type: Boolean, default: false },
         fade: { type: Boolean, default: false },
         modelValue: { type: [Boolean, Number], default: false },
         show: { type: Boolean, default: false },
-        variant: { type: String, default: "info" },
+        variant: { type: String, default: 'info' },
     },
-    emits: ["dismissed", "dismiss-count-down", "update:modelValue"],
+    emits: ['dismissed', 'dismiss-count-down', 'update:modelValue'],
     setup(props, { emit }) {
         const element = ref<HTMLElement>();
         const instance = ref<Alert>();
         const classes = computed(() => ({
             [`alert-${props.variant}`]: props.variant,
             show: props.modelValue,
-            "alert-dismissible": props.dismissible,
+            'alert-dismissible': props.dismissible,
             fade: props.modelValue,
         }));
 
         let _countDownTimeout: number | undefined = 0;
 
         const parseCountDown = (value: boolean | number) => {
-            if (typeof value === "boolean") {
+            if (typeof value === 'boolean') {
                 return 0;
             }
 
@@ -53,9 +59,12 @@ export default defineComponent({
         };
 
         const countDown = ref();
-        watch(() => props.modelValue, () => {
-            countDown.value = parseCountDown(props.modelValue);
-        });
+        watch(
+            () => props.modelValue,
+            () => {
+                countDown.value = parseCountDown(props.modelValue);
+            }
+        );
 
         const isAlertVisible = computed(() => props.modelValue || props.show);
 
@@ -85,12 +94,12 @@ export default defineComponent({
         };
 
         const dismissClicked = () => {
-            if (typeof props.modelValue === "boolean") {
-                emit("update:modelValue", false);
+            if (typeof props.modelValue === 'boolean') {
+                emit('update:modelValue', false);
             } else {
-                emit("update:modelValue", 0);
+                emit('update:modelValue', 0);
             }
-            emit("dismissed");
+            emit('dismissed');
         };
 
         watch(() => props.modelValue, handleShowAndModelChanged);
@@ -98,10 +107,10 @@ export default defineComponent({
 
         watch(countDown, (newValue) => {
             clearCountDownInterval();
-            if (typeof props.modelValue === "boolean") return;
-            emit("dismiss-count-down", newValue);
-            if (newValue === 0 && props.modelValue > 0) emit("dismissed");
-            if (props.modelValue !== newValue) emit("update:modelValue", newValue);
+            if (typeof props.modelValue === 'boolean') return;
+            emit('dismiss-count-down', newValue);
+            if (newValue === 0 && props.modelValue > 0) emit('dismissed');
+            if (props.modelValue !== newValue) emit('update:modelValue', newValue);
             if (newValue > 0) {
                 _countDownTimeout = setTimeout(() => {
                     countDown.value--;

webapp/src/components/CardElement.vue

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

webapp/src/components/DevInfo.vue

@@ -1,8 +1,7 @@
 <template>
     <BootstrapAlert :show="!devInfoList.valid_data">
-        <h4 class="alert-heading">
-            <BIconInfoSquare class="fs-2" />&nbsp;{{ $t('devinfo.NoInfo') }}
-        </h4>{{ $t('devinfo.NoInfoLong') }}
+        <h4 class="alert-heading"><BIconInfoSquare class="fs-2" />&nbsp;{{ $t('devinfo.NoInfo') }}</h4>
+        {{ $t('devinfo.NoInfoLong') }}
     </BootstrapAlert>
     <table v-if="devInfoList.valid_data" class="table table-hover">
         <tbody>
@@ -53,7 +52,7 @@
 
 <script lang="ts">
 import BootstrapAlert from '@/components/BootstrapAlert.vue';
-import type { DevInfoStatus } from "@/types/DevInfoStatus";
+import type { DevInfoStatus } from '@/types/DevInfoStatus';
 import { BIconInfoSquare } from 'bootstrap-icons-vue';
 import { defineComponent, type PropType } from 'vue';
 
@@ -70,20 +69,20 @@ export default defineComponent({
             return (value: number) => {
                 const version_major = Math.floor(value / 10000);
                 const version_minor = Math.floor((value - version_major * 10000) / 100);
-                const version_patch = Math.floor((value - version_major * 10000 - version_minor * 100));
-                return version_major + "." + version_minor + "." + version_patch;
+                const version_patch = Math.floor(value - version_major * 10000 - version_minor * 100);
+                return version_major + '.' + version_minor + '.' + version_patch;
             };
         },
         productionYear() {
-            return() => {
-                return ((parseInt(this.devInfoList.serial, 16) >> (7 * 4)) & 0xF) + 2014;
-            }
+            return () => {
+                return ((parseInt(this.devInfoList.serial, 16) >> (7 * 4)) & 0xf) + 2014;
+            };
         },
         productionWeek() {
-            return() => {
-                return ((parseInt(this.devInfoList.serial, 16) >> (5 * 4)) & 0xFF).toString(16);
-            }
-        }
-    }
+            return () => {
+                return ((parseInt(this.devInfoList.serial, 16) >> (5 * 4)) & 0xff).toString(16);
+            };
+        },
+    },
 });
 </script>

webapp/src/components/FirmwareInfo.vue

@@ -17,10 +17,16 @@
                     </tr>
                     <tr>
                         <th>{{ $t('firmwareinfo.FirmwareVersion') }}</th>
-                        <td><a :href="versionInfoUrl"
-                                target="_blank" v-tooltip :title="$t('firmwareinfo.FirmwareVersionHint')">
+                        <td>
+                            <a
+                                :href="versionInfoUrl"
+                                target="_blank"
+                                v-tooltip
+                                :title="$t('firmwareinfo.FirmwareVersionHint')"
+                            >
                                 {{ systemStatus.git_hash }}
-                            </a></td>
+                            </a>
+                        </td>
                     </tr>
                     <tr>
                         <th>{{ $t('firmwareinfo.PioEnv') }}</th>
@@ -30,16 +36,32 @@
                         <th>{{ $t('firmwareinfo.FirmwareUpdate') }}</th>
                         <td>
                             <div class="form-check form-check-inline form-switch">
-                                <input v-model="modelAllowVersionInfo" class="form-check-input" type="checkbox" role="switch" v-tooltip :title="$t('firmwareinfo.FrmwareUpdateAllow')" />
+                                <input
+                                    v-model="modelAllowVersionInfo"
+                                    class="form-check-input"
+                                    type="checkbox"
+                                    role="switch"
+                                    v-tooltip
+                                    :title="$t('firmwareinfo.FrmwareUpdateAllow')"
+                                />
                                 <label class="form-check-label">
-                                    <a v-if="modelAllowVersionInfo && systemStatus.update_url !== undefined" :href="systemStatus.update_url" target="_blank" v-tooltip
-                                        :title="$t('firmwareinfo.FirmwareUpdateHint')">
+                                    <a
+                                        v-if="modelAllowVersionInfo && systemStatus.update_url !== undefined"
+                                        :href="systemStatus.update_url"
+                                        target="_blank"
+                                        v-tooltip
+                                        :title="$t('firmwareinfo.FirmwareUpdateHint')"
+                                    >
                                         <span class="badge" :class="systemStatus.update_status">
                                             {{ systemStatus.update_text }}
                                         </span>
                                     </a>
-                                    <span v-else-if="modelAllowVersionInfo" class="badge" :class="systemStatus.update_status">
-                                            {{ systemStatus.update_text }}
+                                    <span
+                                        v-else-if="modelAllowVersionInfo"
+                                        class="badge"
+                                        :class="systemStatus.update_status"
+                                    >
+                                        {{ systemStatus.update_text }}
                                     </span>
                                 </label>
                             </div>
@@ -59,7 +81,9 @@
                     </tr>
                     <tr>
                         <th>{{ $t('firmwareinfo.Uptime') }}</th>
-                        <td>{{ $t('firmwareinfo.UptimeValue', timeInHours(systemStatus.uptime)) }}</td>
+                        <td>
+                            {{ $t('firmwareinfo.UptimeValue', timeInHours(systemStatus.uptime)) }}
+                        </td>
                     </tr>
                 </tbody>
             </table>
@@ -93,7 +117,7 @@ export default defineComponent({
         timeInHours() {
             return (value: number) => {
                 const [count, time] = timestampToString(this.$i18n.locale, value, true);
-                return {count, time};
+                return { count, time };
             };
         },
         versionInfoUrl(): string {
@@ -101,7 +125,7 @@ export default defineComponent({
                 return 'https://github.com/tbnobody/OpenDTU/commits/' + this.systemStatus.git_hash;
             }
             return 'https://github.com/tbnobody/OpenDTU/releases/tag/' + this.systemStatus.git_hash;
-        }
+        },
     },
 });
 </script>

webapp/src/components/FormFooter.vue

@@ -1,7 +1,9 @@
 <template>
-    <hr class="border border-3 opacity-75">
+    <hr class="border border-3 opacity-75" />
     <div class="d-grid gap-2 d-md-flex justify-content-md-end">
-        <button type="button" class="btn btn-secondary" @click="$emit('reload')">{{ $t('base.Cancel') }}</button>
+        <button type="button" class="btn btn-secondary" @click="$emit('reload')">
+            {{ $t('base.Cancel') }}
+        </button>
         <button type="submit" class="btn btn-primary">{{ $t('base.Save') }}</button>
     </div>
 </template>

webapp/src/components/FsInfo.vue

@@ -3,8 +3,14 @@
         <th>{{ name }}</th>
         <td>
             <div class="progress">
-                <div class="progress-bar" role="progressbar" :style="{ width: getPercent() + '%' }"
-                    v-bind:aria-valuenow="getPercent()" aria-valuemin="0" aria-valuemax="100">
+                <div
+                    class="progress-bar"
+                    role="progressbar"
+                    :style="{ width: getPercent() + '%' }"
+                    v-bind:aria-valuenow="getPercent()"
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                >
                     {{ $n(getPercent() / 100, 'percent') }}
                 </div>
             </div>

webapp/src/components/GridProfile.vue

@@ -1,47 +1,57 @@
 <template>
     <BootstrapAlert :show="!hasValidData">
-        <h4 class="alert-heading">
-            <BIconInfoSquare class="fs-2" />&nbsp;{{ $t('gridprofile.NoInfo') }}
-        </h4>{{ $t('gridprofile.NoInfoLong') }}
+        <h4 class="alert-heading"><BIconInfoSquare class="fs-2" />&nbsp;{{ $t('gridprofile.NoInfo') }}</h4>
+        {{ $t('gridprofile.NoInfoLong') }}
     </BootstrapAlert>
 
     <template v-if="hasValidData">
         <table class="table table-hover">
-        <tbody>
-            <tr>
-                <td>{{ $t('gridprofile.Name') }}</td>
-                <td>{{ gridProfileList.name }}</td>
-            </tr>
-            <tr>
-                <td>{{ $t('gridprofile.Version') }}</td>
-                <td>{{ gridProfileList.version }}</td>
-            </tr>
-        </tbody>
+            <tbody>
+                <tr>
+                    <td>{{ $t('gridprofile.Name') }}</td>
+                    <td>{{ gridProfileList.name }}</td>
+                </tr>
+                <tr>
+                    <td>{{ $t('gridprofile.Version') }}</td>
+                    <td>{{ gridProfileList.version }}</td>
+                </tr>
+            </tbody>
         </table>
 
         <div class="accordion" id="accordionProfile">
             <div class="accordion-item" v-for="(section, index) in gridProfileList.sections" :key="index">
                 <h2 class="accordion-header">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" :data-bs-target="`#collapse${index}`" aria-expanded="true" :aria-controls="`collapse${index}`">
+                    <button
+                        class="accordion-button collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        :data-bs-target="`#collapse${index}`"
+                        aria-expanded="true"
+                        :aria-controls="`collapse${index}`"
+                    >
                         {{ section.name }}
                     </button>
                 </h2>
                 <div :id="`collapse${index}`" class="accordion-collapse collapse" data-bs-parent="#accordionProfile">
                     <div class="accordion-body">
                         <table class="table table-hover">
-                        <tbody>
-                            <tr v-for="value in section.items" :key="value.n">
-                                <th>{{ value.n }}</th>
-                                <td>
-                                    <template v-if="value.u!='bool'">
-                                        {{ $n(value.v, 'decimal') }} {{ value.u }}
-                                    </template>
-                                    <template v-else>
-                                        <StatusBadge :status="value.v==1" true_text="gridprofile.Enabled" false_text="gridprofile.Disabled"/>
-                                    </template>
-                                </td>
-                            </tr>
-                        </tbody>
+                            <tbody>
+                                <tr v-for="value in section.items" :key="value.n">
+                                    <th>{{ value.n }}</th>
+                                    <td>
+                                        <template v-if="value.u != 'bool'">
+                                            {{ $n(value.v, 'decimal') }} {{ value.u }}
+                                        </template>
+                                        <template v-else>
+                                            <StatusBadge
+                                                :status="value.v == 1"
+                                                true_text="gridprofile.Enabled"
+                                                false_text="gridprofile.Disabled"
+                                            />
+                                        </template>
+                                    </td>
+                                </tr>
+                            </tbody>
                         </table>
                     </div>
                 </div>
@@ -53,7 +63,14 @@
         <div class="accordion" id="accordionDev">
             <div class="accordion-item">
                 <h2 class="accordion-header">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDev" aria-expanded="true" aria-controls="collapseDev">
+                    <button
+                        class="accordion-button collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseDev"
+                        aria-expanded="true"
+                        aria-controls="collapseDev"
+                    >
                         {{ $t('gridprofile.GridprofileSupport') }}
                     </button>
                 </h2>
@@ -62,7 +79,8 @@
                         <BootstrapAlert :show="true" variant="danger">
                             <h4 class="info-heading">
                                 <BIconInfoSquare class="fs-2" />&nbsp;{{ $t('gridprofile.GridprofileSupport') }}
-                            </h4><div v-html="$t('gridprofile.GridprofileSupportLong')"></div>
+                            </h4>
+                            <div v-html="$t('gridprofile.GridprofileSupportLong')"></div>
                         </BootstrapAlert>
                         <samp>
                             {{ rawContent() }}
@@ -71,15 +89,13 @@
                 </div>
             </div>
         </div>
-
     </template>
-
 </template>
 
 <script lang="ts">
 import BootstrapAlert from '@/components/BootstrapAlert.vue';
 import type { GridProfileRawdata } from '@/types/GridProfileRawdata';
-import type { GridProfileStatus } from "@/types/GridProfileStatus";
+import type { GridProfileStatus } from '@/types/GridProfileStatus';
 import { BIconInfoSquare } from 'bootstrap-icons-vue';
 import { defineComponent, type PropType } from 'vue';
 import StatusBadge from './StatusBadge.vue';
@@ -97,12 +113,14 @@ export default defineComponent({
     computed: {
         rawContent() {
             return () => {
-                return this.gridProfileRawList.raw.map(function (x) {
-                    let y = x.toString(16); // to hex
-                    y = ("00" + y).substr(-2); // zero-pad to 2-digits
-                    return y
-                }).join(' ');
-            }
+                return this.gridProfileRawList.raw
+                    .map(function (x) {
+                        let y = x.toString(16); // to hex
+                        y = ('00' + y).substr(-2); // zero-pad to 2-digits
+                        return y;
+                    })
+                    .join(' ');
+            };
         },
         hasValidData() {
             return this.gridProfileRawList.raw.reduce((sum, x) => sum + x, 0) > 0;

webapp/src/components/HeapDetails.vue

@@ -9,7 +9,9 @@
                     </tr>
                     <tr>
                         <th>{{ $t('heapdetails.LargestFreeBlock') }}</th>
-                        <td>{{ $n(Math.round(systemStatus.heap_max_block / 1024), 'kilobyte') }}</td>
+                        <td>
+                            {{ $n(Math.round(systemStatus.heap_max_block / 1024), 'kilobyte') }}
+                        </td>
                     </tr>
                     <tr>
                         <th>{{ $t('heapdetails.Fragmentation') }}</th>
@@ -17,7 +19,11 @@
                     </tr>
                     <tr>
                         <th>{{ $t('heapdetails.MaxUsage') }}</th>
-                        <td>{{ $n(Math.round(getMaxUsageAbs() / 1024), 'kilobyte') }} ({{ $n(getMaxUsageRel(), 'percent') }})</td>
+                        <td>
+                            {{ $n(Math.round(getMaxUsageAbs() / 1024), 'kilobyte') }} ({{
+                                $n(getMaxUsageRel(), 'percent')
+                            }})
+                        </td>
                     </tr>
                 </tbody>
             </table>
@@ -48,7 +54,7 @@ export default defineComponent({
             return this.getMaxUsageAbs() / this.systemStatus.heap_total;
         },
         getFragmentation() {
-            return 1 - (this.systemStatus.heap_max_block / this.getFreeHeap());
+            return 1 - this.systemStatus.heap_max_block / this.getFreeHeap();
         },
     },
 });

webapp/src/components/HintView.vue

@@ -17,11 +17,7 @@
 <script lang="ts">
 import BootstrapAlert from '@/components/BootstrapAlert.vue';
 import type { Hints } from '@/types/LiveDataStatus';
-import {
-    BIconBroadcast,
-    BIconClock,
-    BIconExclamationCircle
-} from 'bootstrap-icons-vue';
+import { BIconBroadcast, BIconClock, BIconExclamationCircle } from 'bootstrap-icons-vue';
 import { defineComponent, type PropType } from 'vue';
 
 export default defineComponent({
@@ -36,11 +32,11 @@ export default defineComponent({
     },
     methods: {
         gotoTimeSettings() {
-            this.$router.push("/settings/ntp");
+            this.$router.push('/settings/ntp');
         },
         gotoPasswordSettings() {
-            this.$router.push("/settings/security");
-        }
-    }
+            this.$router.push('/settings/security');
+        },
+    },
 });
 </script>

webapp/src/components/InputElement.vue

@@ -2,25 +2,19 @@
     <div class="row mb-3">
         <label
             :for="inputId"
-            :class="[ wide ? 'col-sm-4' : 'col-sm-2', isCheckbox ? 'form-check-label' : 'col-form-label' ]"
+            :class="[wide ? 'col-sm-4' : 'col-sm-2', isCheckbox ? 'form-check-label' : 'col-form-label']"
         >
             {{ label }}
             <BIconInfoCircle v-if="tooltip !== undefined" v-tooltip :title="tooltip" />
         </label>
-        <div :class="[ wide ? 'col-sm-8' : 'col-sm-10' ]">
-            <div v-if="!isTextarea"
-                 :class="{'form-check form-switch': isCheckbox,
-                          'input-group': postfix || prefix }"
-            >
-                 <span v-if="prefix"
-                       class="input-group-text"
-                       :id="descriptionId"
-                 >
+        <div :class="[wide ? 'col-sm-8' : 'col-sm-10']">
+            <div v-if="!isTextarea" :class="{ 'form-check form-switch': isCheckbox, 'input-group': postfix || prefix }">
+                <span v-if="prefix" class="input-group-text" :id="descriptionId">
                     {{ prefix }}
                 </span>
                 <input
                     v-model="model"
-                    :class="[ isCheckbox ? 'form-check-input' : 'form-control' ]"
+                    :class="[isCheckbox ? 'form-check-input' : 'form-control']"
                     :id="inputId"
                     :placeholder="placeholder"
                     :type="type"
@@ -31,13 +25,10 @@
                     :disabled="disabled"
                     :aria-describedby="descriptionId"
                 />
-                <span v-if="postfix"
-                      class="input-group-text"
-                      :id="descriptionId"
-                >
+                <span v-if="postfix" class="input-group-text" :id="descriptionId">
                     {{ postfix }}
                 </span>
-                <slot/>
+                <slot />
             </div>
             <div v-else>
                 <textarea
@@ -63,20 +54,20 @@ export default defineComponent({
         BIconInfoCircle,
     },
     props: {
-        'modelValue': [String, Number, Boolean, Date],
-        'label': String,
-        'placeholder': String,
-        'type': String,
-        'maxlength': String,
-        'min': String,
-        'max': String,
-        'step': String,
-        'rows': String,
-        'disabled': Boolean,
-        'postfix': String,
-        'prefix': String,
-        'wide': Boolean,
-        'tooltip': String,
+        modelValue: [String, Number, Boolean, Date],
+        label: String,
+        placeholder: String,
+        type: String,
+        maxlength: String,
+        min: String,
+        max: String,
+        step: String,
+        rows: String,
+        disabled: Boolean,
+        postfix: String,
+        prefix: String,
+        wide: Boolean,
+        tooltip: String,
     },
     data() {
         return {};
@@ -97,11 +88,13 @@ export default defineComponent({
             // normally, the label is sufficient to build a unique id
             // if two inputs with the same label text on one page is required,
             // use a unique placeholder even if it is a checkbox
-            return this.label?.replace(/[^A-Za-z0-9]/g, '') +
-                (this.placeholder ? this.placeholder.replace(/[^A-Za-z0-9]/g, '') : '');
+            return (
+                this.label?.replace(/[^A-Za-z0-9]/g, '') +
+                (this.placeholder ? this.placeholder.replace(/[^A-Za-z0-9]/g, '') : '')
+            );
         },
         inputId() {
-            return 'input' + this.uniqueLabel
+            return 'input' + this.uniqueLabel;
         },
         descriptionId() {
             return 'desc' + this.uniqueLabel;
@@ -111,7 +104,7 @@ export default defineComponent({
         },
         isCheckbox() {
             return this.type === 'checkbox';
-        }
+        },
     },
 });
 </script>

webapp/src/components/InputSerial.vue

@@ -14,16 +14,16 @@ export default defineComponent({
         BootstrapAlert,
     },
     props: {
-        'modelValue': { type: [String, Number], required: true },
-        'id': String,
-        'inputClass': String,
-        'required': Boolean,
+        modelValue: { type: [String, Number], required: true },
+        id: String,
+        inputClass: String,
+        required: Boolean,
     },
     data() {
         return {
-            inputSerial: "",
-            formatHint: "",
-            formatShow: "info",
+            inputSerial: '',
+            formatHint: '',
+            formatShow: 'info',
         };
     },
     computed: {
@@ -45,13 +45,13 @@ export default defineComponent({
         inputSerial: function (val) {
             const serial = val.toString().toUpperCase(); // Convert to lowercase for case-insensitivity
 
-            if (serial == "") {
-                this.formatHint = "";
-                this.model = "";
+            if (serial == '') {
+                this.formatHint = '';
+                this.model = '';
                 return;
             }
 
-            this.formatShow = "info";
+            this.formatShow = 'info';
 
             // Contains only numbers
             if (/^1{1}[\dA-F]{11}$/.test(serial)) {
@@ -70,30 +70,31 @@ export default defineComponent({
                 if (this.checkHerfChecksum(serial)) {
                     this.model = this.convertHerfToHoy(serial);
                     this.$nextTick(() => {
-                        this.formatHint = this.$t('inputserial.format_herf_valid', { serial: this.model });
+                        this.formatHint = this.$t('inputserial.format_herf_valid', {
+                            serial: this.model,
+                        });
                     });
-
                 } else {
                     this.formatHint = this.$t('inputserial.format_herf_invalid');
-                    this.formatShow = "danger";
+                    this.formatShow = 'danger';
                 }
 
-            // Any other format
+                // Any other format
             } else {
                 this.formatHint = this.$t('inputserial.format_unknown');
-                this.formatShow = "danger";
+                this.formatShow = 'danger';
             }
-        }
+        },
     },
     methods: {
         checkHerfChecksum(sn: string) {
             const chars64 = 'HMFLGW5XC301234567899Z67YRT2S8ABCDEFGHJKDVEJ4KQPUALMNPRSTUVWXYNB';
 
-            const checksum = sn.substring(sn.indexOf("-") + 1);
-            const serial = sn.substring(0, sn.indexOf("-"));
+            const checksum = sn.substring(sn.indexOf('-') + 1);
+            const serial = sn.substring(0, sn.indexOf('-'));
 
             const first_char = '1';
-            const i = chars32.indexOf(first_char)
+            const i = chars32.indexOf(first_char);
             const sum1: number = Array.from(serial).reduce((sum, c) => sum + c.charCodeAt(0), 0) & 31;
             const sum2: number = Array.from(serial).reduce((sum, c) => sum + chars32.indexOf(c), 0) & 31;
             const ext = first_char + chars64[sum1 + i] + chars64[sum2 + i];
@@ -106,11 +107,11 @@ export default defineComponent({
             for (let i = 0; i < 9; i++) {
                 const pos: bigint = BigInt(chars32.indexOf(sn[i].toUpperCase()));
                 const shift: bigint = BigInt(42 - 5 * i - (i <= 2 ? 0 : 2));
-                sn_int |= (pos << shift);
+                sn_int |= pos << shift;
             }
 
             return sn_int.toString(16);
-        }
+        },
     },
 });
 </script>

webapp/src/components/InterfaceNetworkInfo.vue

@@ -1,5 +1,6 @@
 <template>
-    <CardElement :text="$t('interfacenetworkinfo.NetworkInterface', { iface: networkStatus.network_mode })"
+    <CardElement
+        :text="$t('interfacenetworkinfo.NetworkInterface', { iface: networkStatus.network_mode })"
         textVariant="text-bg-primary"
     >
         <div class="table-responsive">

webapp/src/components/InverterChannelInfo.vue

@@ -1,8 +1,12 @@
 <template>
-    <div class="card" :class="{
-        'border-info': channelType == 'AC',
-        'border-secondary': channelType == 'INV'
-    }" style="overflow: hidden">
+    <div
+        class="card"
+        :class="{
+            'border-info': channelType == 'AC',
+            'border-secondary': channelType == 'INV',
+        }"
+        style="overflow: hidden"
+    >
         <div v-if="channelType == 'INV'" class="card-header text-bg-secondary">
             {{ $t('inverterchannelinfo.General') }}
         </div>
@@ -22,11 +26,12 @@
                     <tr v-for="(property, key) in channelData" :key="`prop-${key}`">
                         <template v-if="key != 'name' && property">
                             <th scope="row">{{ $t('inverterchannelproperty.' + key) }}</th>
-                            <td style="text-align: right; padding-right: 0;">
-                                {{ $n(property.v, 'decimal', {
-                                    minimumFractionDigits: property.d,
-                                    maximumFractionDigits: property.d
-                                })
+                            <td style="text-align: right; padding-right: 0">
+                                {{
+                                    $n(property.v, 'decimal', {
+                                        minimumFractionDigits: property.d,
+                                        maximumFractionDigits: property.d,
+                                    })
                                 }}
                             </td>
                             <td>{{ property.u }}</td>

webapp/src/components/InverterTotalInfo.vue

@@ -3,10 +3,12 @@
         <div class="col">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.TotalYieldTotal')">
                 <h2>
-                    {{ $n(totalData.YieldTotal.v, 'decimal', {
-                        minimumFractionDigits: totalData.YieldTotal.d,
-                        maximumFractionDigits: totalData.YieldTotal.d
-                    }) }}
+                    {{
+                        $n(totalData.YieldTotal.v, 'decimal', {
+                            minimumFractionDigits: totalData.YieldTotal.d,
+                            maximumFractionDigits: totalData.YieldTotal.d,
+                        })
+                    }}
                     <small class="text-muted">{{ totalData.YieldTotal.u }}</small>
                 </h2>
             </CardElement>
@@ -14,10 +16,12 @@
         <div class="col">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.TotalYieldDay')">
                 <h2>
-                    {{ $n(totalData.YieldDay.v, 'decimal', {
-                        minimumFractionDigits: totalData.YieldDay.d,
-                        maximumFractionDigits: totalData.YieldDay.d
-                    }) }}
+                    {{
+                        $n(totalData.YieldDay.v, 'decimal', {
+                            minimumFractionDigits: totalData.YieldDay.d,
+                            maximumFractionDigits: totalData.YieldDay.d,
+                        })
+                    }}
                     <small class="text-muted">{{ totalData.YieldDay.u }}</small>
                 </h2>
             </CardElement>
@@ -25,10 +29,12 @@
         <div class="col">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.TotalPower')">
                 <h2>
-                    {{ $n(totalData.Power.v, 'decimal', {
-                        minimumFractionDigits: totalData.Power.d,
-                        maximumFractionDigits: totalData.Power.d
-                    }) }}
+                    {{
+                        $n(totalData.Power.v, 'decimal', {
+                            minimumFractionDigits: totalData.Power.d,
+                            maximumFractionDigits: totalData.Power.d,
+                        })
+                    }}
                     <small class="text-muted">{{ totalData.Power.u }}</small>
                 </h2>
             </CardElement>

webapp/src/components/LocaleSwitcher.vue

@@ -11,20 +11,20 @@ import { defineComponent } from 'vue';
 import { LOCALES } from '@/locales';
 
 export default defineComponent({
-    name: "LocaleSwitcher",
+    name: 'LocaleSwitcher',
     methods: {
         updateLanguage() {
-            localStorage.setItem("locale", this.$i18n.locale);
+            localStorage.setItem('locale', this.$i18n.locale);
         },
         getLocaleName(locale: string): string {
-            return LOCALES.find(i => i.value === locale)?.caption || "";
-        }
+            return LOCALES.find((i) => i.value === locale)?.caption || '';
+        },
     },
     mounted() {
-        if (localStorage.getItem("locale")) {
-            this.$i18n.locale = localStorage.getItem("locale") || "en";
+        if (localStorage.getItem('locale')) {
+            this.$i18n.locale = localStorage.getItem('locale') || 'en';
         } else {
-            localStorage.setItem("locale", this.$i18n.locale);
+            localStorage.setItem('locale', this.$i18n.locale);
         }
     },
 });

webapp/src/components/MemoryInfo.vue

@@ -12,14 +12,26 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <FsInfo :name="$t('memoryinfo.Heap')" :total="systemStatus.heap_total"
-                        :used="systemStatus.heap_used" />
-                    <FsInfo :name="$t('memoryinfo.PsRam')" :total="systemStatus.psram_total"
-                        :used="systemStatus.psram_used" />
-                    <FsInfo :name="$t('memoryinfo.LittleFs')" :total="systemStatus.littlefs_total"
-                        :used="systemStatus.littlefs_used" />
-                    <FsInfo :name="$t('memoryinfo.Sketch')" :total="systemStatus.sketch_total"
-                        :used="systemStatus.sketch_used" />
+                    <FsInfo
+                        :name="$t('memoryinfo.Heap')"
+                        :total="systemStatus.heap_total"
+                        :used="systemStatus.heap_used"
+                    />
+                    <FsInfo
+                        :name="$t('memoryinfo.PsRam')"
+                        :total="systemStatus.psram_total"
+                        :used="systemStatus.psram_used"
+                    />
+                    <FsInfo
+                        :name="$t('memoryinfo.LittleFs')"
+                        :total="systemStatus.littlefs_total"
+                        :used="systemStatus.littlefs_used"
+                    />
+                    <FsInfo
+                        :name="$t('memoryinfo.Sketch')"
+                        :total="systemStatus.sketch_total"
+                        :used="systemStatus.sketch_used"
+                    />
                 </tbody>
             </table>
         </div>
@@ -28,7 +40,7 @@
 
 <script lang="ts">
 import CardElement from '@/components/CardElement.vue';
-import FsInfo from "@/components/FsInfo.vue";
+import FsInfo from '@/components/FsInfo.vue';
 import type { SystemStatus } from '@/types/SystemStatus';
 import { defineComponent, type PropType } from 'vue';
 

webapp/src/components/ModalDialog.vue

@@ -4,8 +4,13 @@
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title">{{ title }}</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="getCloseText"
-                        @click="close"></button>
+                    <button
+                        type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        :aria-label="getCloseText"
+                        @click="close"
+                    ></button>
                 </div>
                 <div class="modal-body">
                     <div class="text-center" v-if="loading">
@@ -13,14 +18,13 @@
                             <span class="visually-hidden">{{ $t('home.Loading') }}</span>
                         </div>
                     </div>
-                    <slot v-else>
-                    </slot>
+                    <slot v-else> </slot>
                 </div>
                 <div class="modal-footer">
-                    <slot name="footer">
-                    </slot>
-                    <button type="button" class="btn btn-secondary" @click="close" data-bs-dismiss="modal">{{
-                        getCloseText }}</button>
+                    <slot name="footer"> </slot>
+                    <button type="button" class="btn btn-secondary" @click="close" data-bs-dismiss="modal">
+                        {{ getCloseText }}
+                    </button>
                 </div>
             </div>
         </div>
@@ -32,16 +36,16 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
     props: {
-        'modalId': { type: String, required: true },
-        'title': { type: String, required: true },
-        'closeText': { type: String, required: false, default: '' },
-        'small': Boolean,
-        'loading': Boolean,
+        modalId: { type: String, required: true },
+        title: { type: String, required: true },
+        closeText: { type: String, required: false, default: '' },
+        small: Boolean,
+        loading: Boolean,
     },
     computed: {
         getCloseText() {
             return this.closeText == '' ? this.$t('base.Close') : this.closeText;
-        }
+        },
     },
     methods: {
         close() {

webapp/src/components/NavBar.vue

@@ -1,19 +1,24 @@
 <template>
     <nav class="navbar navbar-expand-md fixed-top bg-body-tertiary" data-bs-theme="dark">
         <div class="container-fluid">
-            <router-link @click="onClick" class="navbar-brand" to="/" style="display: flex; height: 30px; padding: 0;">
+            <router-link @click="onClick" class="navbar-brand" to="/" style="display: flex; height: 30px; padding: 0">
                 <BIconTree v-if="isXmas" width="30" height="30" class="d-inline-block align-text-top text-success" />
 
                 <BIconEgg v-else-if="isEaster" width="30" height="30" class="d-inline-block align-text-top text-info" />
 
                 <BIconSun v-else width="30" height="30" class="d-inline-block align-text-top text-warning" />
 
-                <span style="margin-left: .5rem">
-                    OpenDTU
-                </span>
+                <span style="margin-left: 0.5rem"> OpenDTU </span>
             </router-link>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
-                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+            <button
+                class="navbar-toggler"
+                type="button"
+                data-bs-toggle="collapse"
+                data-bs-target="#navbarNavAltMarkup"
+                aria-controls="navbarNavAltMarkup"
+                aria-expanded="false"
+                aria-label="Toggle navigation"
+            >
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" ref="navbarCollapse" id="navbarNavAltMarkup">
@@ -22,71 +27,111 @@
                         <router-link @click="onClick" class="nav-link" to="/">{{ $t('menu.LiveView') }}</router-link>
                     </li>
                     <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button"
-                            data-bs-toggle="dropdown" aria-expanded="false">
+                        <a
+                            class="nav-link dropdown-toggle"
+                            href="#"
+                            id="navbarScrollingDropdown"
+                            role="button"
+                            data-bs-toggle="dropdown"
+                            aria-expanded="false"
+                        >
                             {{ $t('menu.Settings') }}
                         </a>
                         <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/network">{{ $t('menu.NetworkSettings') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/network">{{
+                                    $t('menu.NetworkSettings')
+                                }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/ntp">{{ $t('menu.NTPSettings') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/ntp">{{
+                                    $t('menu.NTPSettings')
+                                }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/mqtt">{{ $t('menu.MQTTSettings') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/mqtt">{{
+                                    $t('menu.MQTTSettings')
+                                }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/inverter">{{ $t('menu.InverterSettings') }}
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/inverter"
+                                    >{{ $t('menu.InverterSettings') }}
                                 </router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/security">{{ $t('menu.SecuritySettings') }}
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/security"
+                                    >{{ $t('menu.SecuritySettings') }}
                                 </router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/dtu">{{ $t('menu.DTUSettings') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/dtu">{{
+                                    $t('menu.DTUSettings')
+                                }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/device">{{ $t('menu.DeviceManager') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/device">{{
+                                    $t('menu.DeviceManager')
+                                }}</router-link>
                             </li>
                             <li>
                                 <hr class="dropdown-divider" />
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/config">{{ $t('menu.ConfigManagement') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/config">{{
+                                    $t('menu.ConfigManagement')
+                                }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/firmware/upgrade">{{ $t('menu.FirmwareUpgrade') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/firmware/upgrade">{{
+                                    $t('menu.FirmwareUpgrade')
+                                }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/maintenance/reboot">{{ $t('menu.DeviceReboot') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/maintenance/reboot">{{
+                                    $t('menu.DeviceReboot')
+                                }}</router-link>
                             </li>
                         </ul>
                     </li>
                     <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button"
-                            data-bs-toggle="dropdown" aria-expanded="false">
+                        <a
+                            class="nav-link dropdown-toggle"
+                            href="#"
+                            id="navbarScrollingDropdown"
+                            role="button"
+                            data-bs-toggle="dropdown"
+                            aria-expanded="false"
+                        >
                             {{ $t('menu.Info') }}
                         </a>
                         <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/info/system">{{ $t('menu.System') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/info/system">{{
+                                    $t('menu.System')
+                                }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/info/network">{{ $t('menu.Network') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/info/network">{{
+                                    $t('menu.Network')
+                                }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/info/ntp">{{ $t('menu.NTP') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/info/ntp">{{
+                                    $t('menu.NTP')
+                                }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/info/mqtt">{{ $t('menu.MQTT') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/info/mqtt">{{
+                                    $t('menu.MQTT')
+                                }}</router-link>
                             </li>
                             <li>
                                 <hr class="dropdown-divider" />
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/info/console">{{ $t('menu.Console') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/info/console">{{
+                                    $t('menu.Console')
+                                }}</router-link>
                             </li>
                         </ul>
                     </li>
@@ -97,8 +142,12 @@
                     <ThemeSwitcher class="me-2" />
                     <form class="d-flex" role="search">
                         <LocaleSwitcher class="me-2" />
-                        <button v-if="isLogged" class="btn btn-outline-danger" @click="signout">{{ $t('menu.Logout') }}</button>
-                        <button v-if="!isLogged" class="btn btn-outline-success" @click="signin">{{ $t('menu.Login') }}</button>
+                        <button v-if="isLogged" class="btn btn-outline-danger" @click="signout">
+                            {{ $t('menu.Logout') }}
+                        </button>
+                        <button v-if="!isLogged" class="btn btn-outline-success" @click="signin">
+                            {{ $t('menu.Login') }}
+                        </button>
                     </form>
                 </ul>
             </div>
@@ -125,24 +174,24 @@ export default defineComponent({
         return {
             isLogged: this.isLoggedIn(),
             now: {} as Date,
-        }
+        };
     },
     created() {
-        this.$emitter.on("logged-in", () => {
+        this.$emitter.on('logged-in', () => {
             this.isLogged = this.isLoggedIn();
         });
-        this.$emitter.on("logged-out", () => {
+        this.$emitter.on('logged-out', () => {
             this.isLogged = this.isLoggedIn();
         });
 
         this.now = new Date();
         setInterval(() => {
             this.now = new Date();
-        }, 10000)
+        }, 10000);
     },
     computed: {
         isXmas() {
-            return (this.now.getMonth() + 1 == 12 && (this.now.getDate() >= 24 && this.now.getDate() <= 26));
+            return this.now.getMonth() + 1 == 12 && this.now.getDate() >= 24 && this.now.getDate() <= 26;
         },
         isEaster() {
             const easter = this.getEasterSunday(this.now.getFullYear());
@@ -163,11 +212,11 @@ export default defineComponent({
         signout(e: Event) {
             e.preventDefault();
             this.logout();
-            this.$emitter.emit("logged-out");
+            this.$emitter.emit('logged-out');
             this.$router.push('/');
         },
         onClick() {
-            this.$refs.navbarCollapse && (this.$refs.navbarCollapse as HTMLElement).classList.remove("show");
+            this.$refs.navbarCollapse && (this.$refs.navbarCollapse as HTMLElement).classList.remove('show');
         },
         getEasterSunday(year: number): Date {
             const f = Math.floor;
@@ -181,7 +230,7 @@ export default defineComponent({
             const day = L + 28 - 31 * f(month / 4);
 
             return new Date(year, month - 1, day);
-        }
+        },
     },
 });
 </script>

webapp/src/components/PinInfo.vue

@@ -11,18 +11,23 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <template v-for="(category) in categories" :key="category">
+                    <template v-for="category in categories" :key="category">
                         <tr v-for="(prop, prop_idx) in properties(category)" :key="prop">
                             <td v-if="prop_idx == 0" :rowspan="properties(category).length">
-                                {{ capitalizeFirstLetter(category) }}</td>
-                            <td :class="{ 'table-danger': !isEqual(category, prop) }">{{ prop }}</td>
+                                {{ capitalizeFirstLetter(category) }}
+                            </td>
+                            <td :class="{ 'table-danger': !isEqual(category, prop) }">
+                                {{ prop }}
+                            </td>
                             <td>
                                 <template v-if="selectedPinAssignment && category in selectedPinAssignment">
-                                    {{ (selectedPinAssignment as any)[category][prop] }}</template>
+                                    {{ (selectedPinAssignment as any)[category][prop] }}</template
+                                >
                             </td>
                             <td>
                                 <template v-if="currentPinAssignment && category in currentPinAssignment">
-                                    {{ (currentPinAssignment as any)[category][prop] }}</template>
+                                    {{ (currentPinAssignment as any)[category][prop] }}</template
+                                >
                             </td>
                         </tr>
                     </template>
@@ -59,7 +64,9 @@ export default defineComponent({
 
             let total: Array<string> = [];
             total = total.concat(curArray, selArray);
-            return Array.from(new Set(total)).filter(cat => cat !=  'name' && cat != 'links').sort();
+            return Array.from(new Set(total))
+                .filter((cat) => cat != 'name' && cat != 'links')
+                .sort();
         },
     },
     methods: {
@@ -105,6 +112,6 @@ export default defineComponent({
         capitalizeFirstLetter(value: string): string {
             return value.charAt(0).toUpperCase() + value.slice(1);
         },
-    }
+    },
 });
 </script>

webapp/src/components/RadioInfo.vue

@@ -4,58 +4,83 @@
             <table class="table table-hover table-condensed">
                 <tbody>
                     <tr>
-                        <th>{{ $t('radioinfo.Status', { module: "nRF24" }) }}</th>
+                        <th>{{ $t('radioinfo.Status', { module: 'nRF24' }) }}</th>
                         <td>
-                            <StatusBadge :status="systemStatus.nrf_configured" true_text="radioinfo.Configured" false_text="radioinfo.NotConfigured" false_class="text-bg-secondary" />
+                            <StatusBadge
+                                :status="systemStatus.nrf_configured"
+                                true_text="radioinfo.Configured"
+                                false_text="radioinfo.NotConfigured"
+                                false_class="text-bg-secondary"
+                            />
                         </td>
                     </tr>
                     <tr>
-                        <th>{{ $t('radioinfo.ChipStatus', { module: "nRF24" }) }}</th>
+                        <th>{{ $t('radioinfo.ChipStatus', { module: 'nRF24' }) }}</th>
                         <td>
-                            <span class="badge" :class="{
-                                'text-bg-danger': systemStatus.nrf_configured && !systemStatus.nrf_connected,
-                                'text-bg-success': systemStatus.nrf_configured && systemStatus.nrf_connected,
-                            }">
-                                <template
-                                    v-if="systemStatus.nrf_configured && systemStatus.nrf_connected">{{ $t('radioinfo.Connected') }}</template>
-                                <template
-                                    v-else-if="systemStatus.nrf_configured && !systemStatus.nrf_connected">{{ $t('radioinfo.NotConnected') }}</template>
+                            <span
+                                class="badge"
+                                :class="{
+                                    'text-bg-danger': systemStatus.nrf_configured && !systemStatus.nrf_connected,
+                                    'text-bg-success': systemStatus.nrf_configured && systemStatus.nrf_connected,
+                                }"
+                            >
+                                <template v-if="systemStatus.nrf_configured && systemStatus.nrf_connected">{{
+                                    $t('radioinfo.Connected')
+                                }}</template>
+                                <template v-else-if="systemStatus.nrf_configured && !systemStatus.nrf_connected">{{
+                                    $t('radioinfo.NotConnected')
+                                }}</template>
                             </span>
                         </td>
                     </tr>
                     <tr>
-                        <th>{{ $t('radioinfo.ChipType', { module: "nRF24" }) }}</th>
+                        <th>{{ $t('radioinfo.ChipType', { module: 'nRF24' }) }}</th>
                         <td>
-                            <span class="badge" :class="{
-                                'text-bg-danger': systemStatus.nrf_connected && !systemStatus.nrf_pvariant,
-                                'text-bg-success': systemStatus.nrf_connected && systemStatus.nrf_pvariant,
-                                'text-bg-secondary': !systemStatus.nrf_connected,
-                            }">
-                                <template
-                                    v-if="systemStatus.nrf_connected && systemStatus.nrf_pvariant">nRF24L01+</template>
-                                <template
-                                    v-else-if="systemStatus.nrf_connected && !systemStatus.nrf_pvariant">nRF24L01</template>
+                            <span
+                                class="badge"
+                                :class="{
+                                    'text-bg-danger': systemStatus.nrf_connected && !systemStatus.nrf_pvariant,
+                                    'text-bg-success': systemStatus.nrf_connected && systemStatus.nrf_pvariant,
+                                    'text-bg-secondary': !systemStatus.nrf_connected,
+                                }"
+                            >
+                                <template v-if="systemStatus.nrf_connected && systemStatus.nrf_pvariant"
+                                    >nRF24L01+</template
+                                >
+                                <template v-else-if="systemStatus.nrf_connected && !systemStatus.nrf_pvariant"
+                                    >nRF24L01</template
+                                >
                                 <template v-else>{{ $t('radioinfo.Unknown') }}</template>
                             </span>
                         </td>
                     </tr>
                     <tr>
-                        <th>{{ $t('radioinfo.Status', { module: "CMT2300A" }) }}</th>
+                        <th>{{ $t('radioinfo.Status', { module: 'CMT2300A' }) }}</th>
                         <td>
-                            <StatusBadge :status="systemStatus.cmt_configured" true_text="radioinfo.Configured" false_text="radioinfo.NotConfigured" false_class="text-bg-secondary" />
+                            <StatusBadge
+                                :status="systemStatus.cmt_configured"
+                                true_text="radioinfo.Configured"
+                                false_text="radioinfo.NotConfigured"
+                                false_class="text-bg-secondary"
+                            />
                         </td>
                     </tr>
                     <tr>
-                        <th>{{ $t('radioinfo.ChipStatus', { module: "CMT2300A" }) }}</th>
+                        <th>{{ $t('radioinfo.ChipStatus', { module: 'CMT2300A' }) }}</th>
                         <td>
-                            <span class="badge" :class="{
-                                'text-bg-danger': systemStatus.cmt_configured && !systemStatus.cmt_connected,
-                                'text-bg-success': systemStatus.cmt_configured && systemStatus.cmt_connected,
-                            }">
-                                <template
-                                    v-if="systemStatus.cmt_configured && systemStatus.cmt_connected">{{ $t('radioinfo.Connected') }}</template>
-                                <template
-                                    v-else-if="systemStatus.cmt_configured && !systemStatus.cmt_connected">{{ $t('radioinfo.NotConnected') }}</template>
+                            <span
+                                class="badge"
+                                :class="{
+                                    'text-bg-danger': systemStatus.cmt_configured && !systemStatus.cmt_connected,
+                                    'text-bg-success': systemStatus.cmt_configured && systemStatus.cmt_connected,
+                                }"
+                            >
+                                <template v-if="systemStatus.cmt_configured && systemStatus.cmt_connected">{{
+                                    $t('radioinfo.Connected')
+                                }}</template>
+                                <template v-else-if="systemStatus.cmt_configured && !systemStatus.cmt_connected">{{
+                                    $t('radioinfo.NotConnected')
+                                }}</template>
                             </span>
                         </td>
                     </tr>

webapp/src/components/StatusBadge.vue

@@ -10,23 +10,23 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
     props: {
-        'status': Boolean,
-        'true_text': {
+        status: Boolean,
+        true_text: {
             type: String,
-            required: true
+            required: true,
         },
-        'false_text': {
+        false_text: {
             type: String,
-            required: true
+            required: true,
         },
-        'true_class': {
+        true_class: {
             type: String,
-            default: 'text-bg-success'
+            default: 'text-bg-success',
         },
-        'false_class': {
+        false_class: {
             type: String,
-            default: 'text-bg-danger'
-        }
+            default: 'text-bg-danger',
+        },
     },
 });
 </script>

webapp/src/components/ThemeSwitcher.vue

@@ -1,28 +1,46 @@
 <template>
     <li class="nav-item dropdown">
-        <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme"
-            type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static"
-            aria-label="Toggle theme (auto)">
+        <button
+            class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
+            id="bd-theme"
+            type="button"
+            aria-expanded="false"
+            data-bs-toggle="dropdown"
+            data-bs-display="static"
+            aria-label="Toggle theme (auto)"
+        >
             <BIconCircleHalf class="bi my-1 theme-icon-active" />
         </button>
         <ul class="dropdown-menu dropdown-menu-end">
             <li>
-                <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light"
-                    aria-pressed="false">
+                <button
+                    type="button"
+                    class="dropdown-item d-flex align-items-center"
+                    data-bs-theme-value="light"
+                    aria-pressed="false"
+                >
                     <BIconSunFill class="bi me-2 opacity-50 theme-icon" />
                     {{ $t('localeswitcher.Light') }}
                 </button>
             </li>
             <li>
-                <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark"
-                    aria-pressed="false">
+                <button
+                    type="button"
+                    class="dropdown-item d-flex align-items-center"
+                    data-bs-theme-value="dark"
+                    aria-pressed="false"
+                >
                     <BIconMoonStarsFill class="bi me-2 opacity-50 theme-icon" />
                     {{ $t('localeswitcher.Dark') }}
                 </button>
             </li>
             <li>
-                <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto"
-                    aria-pressed="true">
+                <button
+                    type="button"
+                    class="dropdown-item d-flex align-items-center active"
+                    data-bs-theme-value="auto"
+                    aria-pressed="true"
+                >
                     <BIconCircleHalf class="bi me-2 opacity-50 theme-icon" />
                     {{ $t('localeswitcher.Auto') }}
                 </button>
@@ -33,14 +51,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import {
-    BIconCircleHalf,
-    BIconSunFill,
-    BIconMoonStarsFill,
-} from 'bootstrap-icons-vue';
+import { BIconCircleHalf, BIconSunFill, BIconMoonStarsFill } from 'bootstrap-icons-vue';
 
 export default defineComponent({
-    name: "ThemeSwitcher",
+    name: 'ThemeSwitcher',
     components: {
         BIconCircleHalf,
         BIconSunFill,
@@ -70,9 +84,9 @@ export default defineComponent({
             const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
             const svgOfActiveBtn = btnToActive?.querySelector('.theme-icon');
 
-            document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+            document.querySelectorAll('[data-bs-theme-value]').forEach((element) => {
                 element.classList.remove('active');
-            })
+            });
 
             btnToActive?.classList.add('active');
 
@@ -92,15 +106,14 @@ export default defineComponent({
             }
         });
 
-        document.querySelectorAll('[data-bs-theme-value]')
-            .forEach(toggle => {
-                toggle.addEventListener('click', () => {
-                    const theme = toggle.getAttribute('data-bs-theme-value') || 'auto';
-                    localStorage.setItem('theme', theme);
-                    this.setTheme(theme);
-                    this.showActiveTheme(theme);
-                })
+        document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
+            toggle.addEventListener('click', () => {
+                const theme = toggle.getAttribute('data-bs-theme-value') || 'auto';
+                localStorage.setItem('theme', theme);
+                this.setTheme(theme);
+                this.showActiveTheme(theme);
             });
+        });
     },
 });
 </script>

webapp/src/components/WifiApInfo.vue

@@ -6,7 +6,11 @@
                     <tr>
                         <th>{{ $t('wifiapinfo.Status') }}</th>
                         <td>
-                            <StatusBadge :status="networkStatus.ap_status" true_text="wifiapinfo.Enabled" false_text="wifiapinfo.Disabled" />
+                            <StatusBadge
+                                :status="networkStatus.ap_status"
+                                true_text="wifiapinfo.Enabled"
+                                false_text="wifiapinfo.Disabled"
+                            />
                         </td>
                     </tr>
                     <tr>

webapp/src/components/WifiStationInfo.vue

@@ -6,7 +6,11 @@
                     <tr>
                         <th>{{ $t('wifistationinfo.Status') }}</th>
                         <td>
-                            <StatusBadge :status="networkStatus.sta_status" true_text="wifistationinfo.Enabled" false_text="wifistationinfo.Disabled" />
+                            <StatusBadge
+                                :status="networkStatus.sta_status"
+                                true_text="wifistationinfo.Enabled"
+                                false_text="wifistationinfo.Disabled"
+                            />
                         </td>
                     </tr>
                     <tr>
@@ -40,7 +44,7 @@ import { defineComponent, type PropType } from 'vue';
 export default defineComponent({
     components: {
         CardElement,
-        StatusBadge
+        StatusBadge,
     },
     props: {
         networkStatus: { type: Object as PropType<NetworkStatus>, required: true },

webapp/src/emitter.d.ts

@@ -4,4 +4,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-export { }  // Important! See note.
+export {}; // Important! See note.

webapp/src/locales/index.ts

@@ -1,4 +1,4 @@
-import type { I18nOptions } from "vue-i18n";
+import type { I18nOptions } from 'vue-i18n';
 
 export enum Locales {
     EN = 'en',
@@ -10,22 +10,22 @@ export const LOCALES = [
     { value: Locales.EN, caption: 'English' },
     { value: Locales.DE, caption: 'Deutsch' },
     { value: Locales.FR, caption: 'Français' },
-]
+];
 
-export const dateTimeFormats: I18nOptions["datetimeFormats"] = {};
-export const numberFormats: I18nOptions["numberFormats"] = {};
+export const dateTimeFormats: I18nOptions['datetimeFormats'] = {};
+export const numberFormats: I18nOptions['numberFormats'] = {};
 
 LOCALES.forEach((locale) => {
     dateTimeFormats[locale.value] = {
-        'datetime': {
+        datetime: {
             hour: 'numeric',
             minute: 'numeric',
             second: 'numeric',
             year: 'numeric',
             month: 'numeric',
             day: 'numeric',
-            hour12: false
-        }
+            hour12: false,
+        },
     };
 
     numberFormats[locale.value] = {
@@ -33,25 +33,34 @@ LOCALES.forEach((locale) => {
             style: 'decimal',
         },
         decimalNoDigits: {
-            style: 'decimal', minimumFractionDigits: 0, maximumFractionDigits: 0
+            style: 'decimal',
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
         },
         decimalTwoDigits: {
-            style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2
+            style: 'decimal',
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
         },
         percent: {
             style: 'percent',
         },
         byte: {
-            style: 'unit', unit: 'byte',
+            style: 'unit',
+            unit: 'byte',
         },
         kilobyte: {
-            style: 'unit', unit: 'kilobyte',
+            style: 'unit',
+            unit: 'kilobyte',
         },
         megabyte: {
-            style: 'unit', unit: 'megabyte',
+            style: 'unit',
+            unit: 'megabyte',
         },
         celsius: {
-            style: 'unit', unit: 'celsius', maximumFractionDigits: 1,
+            style: 'unit',
+            unit: 'celsius',
+            maximumFractionDigits: 1,
         },
     };
 });

webapp/src/main.ts

@@ -1,21 +1,21 @@
-import messages from '@intlify/unplugin-vue-i18n/messages'
-import mitt from 'mitt'
-import { createApp } from 'vue'
-import { createI18n } from 'vue-i18n'
-import App from './App.vue'
-import { dateTimeFormats, defaultLocale, numberFormats } from './locales'
-import { tooltip } from './plugins/bootstrap'
-import router from './router'
+import messages from '@intlify/unplugin-vue-i18n/messages';
+import mitt from 'mitt';
+import { createApp } from 'vue';
+import { createI18n } from 'vue-i18n';
+import App from './App.vue';
+import { dateTimeFormats, defaultLocale, numberFormats } from './locales';
+import { tooltip } from './plugins/bootstrap';
+import router from './router';
 
-import "bootstrap"
-import './scss/styles.scss'
+import 'bootstrap';
+import './scss/styles.scss';
 
-const app = createApp(App)
+const app = createApp(App);
 
 const emitter = mitt();
 app.config.globalProperties.$emitter = emitter;
 
-app.directive('tooltip', tooltip)
+app.directive('tooltip', tooltip);
 
 const i18n = createI18n({
     legacy: false,
@@ -24,10 +24,10 @@ const i18n = createI18n({
     fallbackLocale: defaultLocale,
     messages,
     datetimeFormats: dateTimeFormats,
-    numberFormats: numberFormats
-})
+    numberFormats: numberFormats,
+});
 
-app.use(router)
-app.use(i18n)
+app.use(router);
+app.use(i18n);
 
-app.mount('#app')
+app.mount('#app');

webapp/src/plugins/bootstrap.ts

@@ -3,5 +3,5 @@ import { Tooltip } from 'bootstrap';
 export const tooltip = {
     mounted(el: HTMLElement) {
         new Tooltip(el);
-    }
-}
+    },
+};

webapp/src/router/index.ts

@@ -1,7 +1,7 @@
 import AboutView from '@/views/AboutView.vue';
 import ConfigAdminView from '@/views/ConfigAdminView.vue';
 import ConsoleInfoView from '@/views/ConsoleInfoView.vue';
-import DeviceAdminView from '@/views/DeviceAdminView.vue'
+import DeviceAdminView from '@/views/DeviceAdminView.vue';
 import DtuAdminView from '@/views/DtuAdminView.vue';
 import ErrorView from '@/views/ErrorView.vue';
 import FirmwareUpgradeView from '@/views/FirmwareUpgradeView.vue';
@@ -21,104 +21,104 @@ import { createRouter, createWebHistory } from 'vue-router';
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
-    linkActiveClass: "active",
+    linkActiveClass: 'active',
     routes: [
-    {
-        path: '/',
-        name: 'Home',
-        component: HomeView
-    },
-    {
-        path: '/login',
-        name: 'Login',
-        component: LoginView
-    },
-    {
-        path: '/error?status=:status&message=:message',
-        name: 'Error',
-        component: ErrorView
-    },
-    {
-        path: '/about',
-        name: 'About',
-        component: AboutView
-    },
-    {
-        path: '/info/network',
-        name: 'Network',
-        component: NetworkInfoView
-    },
-    {
-        path: '/info/system',
-        name: 'System',
-        component: SystemInfoView
-    },
-    {
-        path: '/info/ntp',
-        name: 'NTP',
-        component: NtpInfoView
-    },
-    {
-        path: '/info/mqtt',
-        name: 'MqTT',
-        component: MqttInfoView
-    },
-    {
-        path: '/info/console',
-        name: 'Web Console',
-        component: ConsoleInfoView
-    },
-    {
-        path: '/settings/network',
-        name: 'Network Settings',
-        component: NetworkAdminView
-    },
-    {
-        path: '/settings/ntp',
-        name: 'NTP Settings',
-        component: NtpAdminView
-    },
-    {
-        path: '/settings/mqtt',
-        name: 'MqTT Settings',
-        component: MqttAdminView
-    },
-    {
-        path: '/settings/inverter',
-        name: 'Inverter Settings',
-        component: InverterAdminView
-    },
-    {
-        path: '/settings/dtu',
-        name: 'DTU Settings',
-        component: DtuAdminView
-    },
-    {
-        path: '/settings/device',
-        name: 'Device Manager',
-        component: DeviceAdminView
-    },
-    {
-        path: '/firmware/upgrade',
-        name: 'Firmware Upgrade',
-        component: FirmwareUpgradeView
-    },
-    {
-        path: '/settings/config',
-        name: 'Config Management',
-        component: ConfigAdminView
-    },
-    {
-        path: '/settings/security',
-        name: 'Security',
-        component: SecurityAdminView
-    },
-    {
-        path: '/maintenance/reboot',
-        name: 'Device Reboot',
-        component: MaintenanceRebootView
-    }
-]
+        {
+            path: '/',
+            name: 'Home',
+            component: HomeView,
+        },
+        {
+            path: '/login',
+            name: 'Login',
+            component: LoginView,
+        },
+        {
+            path: '/error?status=:status&message=:message',
+            name: 'Error',
+            component: ErrorView,
+        },
+        {
+            path: '/about',
+            name: 'About',
+            component: AboutView,
+        },
+        {
+            path: '/info/network',
+            name: 'Network',
+            component: NetworkInfoView,
+        },
+        {
+            path: '/info/system',
+            name: 'System',
+            component: SystemInfoView,
+        },
+        {
+            path: '/info/ntp',
+            name: 'NTP',
+            component: NtpInfoView,
+        },
+        {
+            path: '/info/mqtt',
+            name: 'MqTT',
+            component: MqttInfoView,
+        },
+        {
+            path: '/info/console',
+            name: 'Web Console',
+            component: ConsoleInfoView,
+        },
+        {
+            path: '/settings/network',
+            name: 'Network Settings',
+            component: NetworkAdminView,
+        },
+        {
+            path: '/settings/ntp',
+            name: 'NTP Settings',
+            component: NtpAdminView,
+        },
+        {
+            path: '/settings/mqtt',
+            name: 'MqTT Settings',
+            component: MqttAdminView,
+        },
+        {
+            path: '/settings/inverter',
+            name: 'Inverter Settings',
+            component: InverterAdminView,
+        },
+        {
+            path: '/settings/dtu',
+            name: 'DTU Settings',
+            component: DtuAdminView,
+        },
+        {
+            path: '/settings/device',
+            name: 'Device Manager',
+            component: DeviceAdminView,
+        },
+        {
+            path: '/firmware/upgrade',
+            name: 'Firmware Upgrade',
+            component: FirmwareUpgradeView,
+        },
+        {
+            path: '/settings/config',
+            name: 'Config Management',
+            component: ConfigAdminView,
+        },
+        {
+            path: '/settings/security',
+            name: 'Security',
+            component: SecurityAdminView,
+        },
+        {
+            path: '/maintenance/reboot',
+            name: 'Device Reboot',
+            component: MaintenanceRebootView,
+        },
+    ],
 });
 
 export default router;

webapp/src/scss/styles.scss

@@ -1,6 +1,6 @@
 // Import all of Bootstrap's CSS
-@import "~bootstrap/scss/bootstrap";
+@import '~bootstrap/scss/bootstrap';
 
 .container-fluid .row {
-    font-feature-settings: "tnum";
+    font-feature-settings: 'tnum';
 }

webapp/src/types/DeviceConfig.ts

@@ -1,4 +1,4 @@
-import type { Device } from "./PinMapping";
+import type { Device } from './PinMapping';
 
 export interface Display {
     rotation: number;

webapp/src/types/LiveDataStatus.ts

@@ -6,11 +6,11 @@ export interface ValueObject {
 }
 
 export interface InverterStatistics {
-    name: ValueObject,
+    name: ValueObject;
     Power?: ValueObject;
     Voltage?: ValueObject;
     Current?: ValueObject;
-    "Power DC"?: ValueObject;
+    'Power DC'?: ValueObject;
     YieldDay?: ValueObject;
     YieldTotal?: ValueObject;
     Frequency?: ValueObject;

webapp/src/types/NtpStatus.ts

@@ -1,7 +1,7 @@
 export interface NtpStatus {
     ntp_server: string;
     ntp_timezone: string;
-    ntp_timezone_descr: string
+    ntp_timezone_descr: string;
     ntp_status: boolean;
     ntp_localtime: string;
     sun_risetime: string;

webapp/src/types/PinMapping.ts

@@ -14,7 +14,7 @@ export interface Cmt2300 {
     sdio: number;
     gpio2: number;
     gpio3: number;
- }
+}
 
 export interface Ethernet {
     enabled: boolean;
@@ -39,7 +39,7 @@ export interface Links {
     url: string;
 }
 
-export interface Device  {
+export interface Device {
     name: string;
     links: Array<Links>;
     nrf24: Nrf24;
@@ -48,4 +48,4 @@ export interface Device  {
     display: Display;
 }
 
-export interface PinMapping extends Array<Device>{}
+export interface PinMapping extends Array<Device> {}

webapp/src/utils/authentication.ts

@@ -1,11 +1,11 @@
-import type { Emitter, EventType } from "mitt";
-import type { Router } from "vue-router";
+import type { Emitter, EventType } from 'mitt';
+import type { Router } from 'vue-router';
 
 export function authHeader(): Headers {
     // return authorization header with basic auth credentials
     let user = null;
     try {
-        user = JSON.parse(localStorage.getItem('user') || "");
+        user = JSON.parse(localStorage.getItem('user') || '');
     } catch {
         // continue regardless of error
     }
@@ -21,15 +21,15 @@ export function authHeader(): Headers {
 export function authUrl(): string {
     let user = null;
     try {
-        user = JSON.parse(localStorage.getItem('user') || "");
+        user = JSON.parse(localStorage.getItem('user') || '');
     } catch {
         // continue regardless of error
     }
 
     if (user && user.authdata) {
-        return encodeURIComponent(atob(user.authdata)).replace("%3A", ":") + '@';
+        return encodeURIComponent(atob(user.authdata)).replace('%3A', ':') + '@';
     }
-    return "";
+    return '';
 }
 
 export function logout() {
@@ -38,7 +38,7 @@ export function logout() {
 }
 
 export function isLoggedIn(): boolean {
-    return (localStorage.getItem('user') != null);
+    return localStorage.getItem('user') != null;
 }
 
 export function login(username: string, password: string) {
@@ -46,13 +46,13 @@ export function login(username: string, password: string) {
         method: 'GET',
         headers: {
             'X-Requested-With': 'XMLHttpRequest',
-            'Authorization': 'Basic ' + btoa(unescape(encodeURIComponent(username + ':' + password))),
+            Authorization: 'Basic ' + btoa(unescape(encodeURIComponent(username + ':' + password))),
         },
     };
 
     return fetch('/api/security/authenticate', requestOptions)
         .then(handleAuthResponse)
-        .then(retVal => {
+        .then((retVal) => {
             // login successful if there's a user in the response
             if (retVal) {
                 // store user details and basic auth credentials in local storage
@@ -65,21 +65,32 @@ export function login(username: string, password: string) {
         });
 }
 
-export function handleResponse(response: Response, emitter: Emitter<Record<EventType, unknown>>, router: Router, ignore_error: boolean = false) {
-    return response.text().then(text => {
+export function handleResponse(
+    response: Response,
+    emitter: Emitter<Record<EventType, unknown>>,
+    router: Router,
+    ignore_error: boolean = false
+) {
+    return response.text().then((text) => {
         const data = text && JSON.parse(text);
         if (!response.ok) {
             if (response.status === 401) {
                 // auto logout if 401 response returned from api
                 logout();
-                emitter.emit("logged-out");
-                router.push({ path: "/login", query: { returnUrl: router.currentRoute.value.fullPath } });
+                emitter.emit('logged-out');
+                router.push({
+                    path: '/login',
+                    query: { returnUrl: router.currentRoute.value.fullPath },
+                });
                 return Promise.reject();
             }
 
-            const error = { message: (data && data.message) || response.statusText, status: response.status || 0 };
+            const error = {
+                message: (data && data.message) || response.statusText,
+                status: response.status || 0,
+            };
             if (!ignore_error) {
-                router.push({ name: "Error", params: error });
+                router.push({ name: 'Error', params: error });
             }
             return Promise.reject(error);
         }
@@ -89,7 +100,7 @@ export function handleResponse(response: Response, emitter: Emitter<Record<Event
 }
 
 function handleAuthResponse(response: Response) {
-    return response.text().then(text => {
+    return response.text().then((text) => {
         const data = text && JSON.parse(text);
         if (!response.ok) {
             if (response.status === 401) {
@@ -97,7 +108,7 @@ function handleAuthResponse(response: Response) {
                 logout();
             }
 
-            const error = "Invalid credentials";
+            const error = 'Invalid credentials';
             return Promise.reject(error);
         }
 

webapp/src/utils/index.ts

@@ -1,16 +1,11 @@
 import { isLoggedIn, login, logout } from './authentication';
 import { timestampToString } from './time';
 
-export {
-    timestampToString,
-    login,
-    logout,
-    isLoggedIn,
-};
+export { timestampToString, login, logout, isLoggedIn };
 
 export default {
     timestampToString,
     login,
     logout,
     isLoggedIn,
-}
+};

webapp/src/utils/time.ts

@@ -1,7 +1,14 @@
 export function timestampToString(locale: string, timestampSeconds: number, includeDays: true): [number, string];
 export function timestampToString(locale: string, timestampSeconds: number, includeDays?: false): [string];
-export function timestampToString(locale: string, timestampSeconds: number, includeDays = false): [number, string] | [string] {
-    const timeString = new Date(timestampSeconds * 1000).toLocaleTimeString(locale, { timeZone: "UTC", hour12: false });
+export function timestampToString(
+    locale: string,
+    timestampSeconds: number,
+    includeDays = false
+): [number, string] | [string] {
+    const timeString = new Date(timestampSeconds * 1000).toLocaleTimeString(locale, {
+        timeZone: 'UTC',
+        hour12: false,
+    });
     if (!includeDays) return [timeString];
 
     const secondsPerDay = 60 * 60 * 24;

webapp/src/views/AboutView.vue

@@ -3,15 +3,25 @@
         <div class="accordion" id="accordionExample">
             <div class="accordion-item">
                 <h2 class="accordion-header" id="headingDocumentation">
-                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
-                        data-bs-target="#collapseDocumentation" aria-expanded="true" aria-controls="collapseOne">
-                        <span class="badge text-bg-secondary">
-                            <BIconInfoCircle class="fs-4" />
-                        </span>&nbsp;{{ $t('about.Documentation') }}
+                    <button
+                        class="accordion-button"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseDocumentation"
+                        aria-expanded="true"
+                        aria-controls="collapseOne"
+                    >
+                        <span class="badge text-bg-secondary"> <BIconInfoCircle class="fs-4" /> </span>&nbsp;{{
+                            $t('about.Documentation')
+                        }}
                     </button>
                 </h2>
-                <div id="collapseDocumentation" class="accordion-collapse collapse show" aria-labelledby="headingDocumentation"
-                    data-bs-parent="#accordionExample">
+                <div
+                    id="collapseDocumentation"
+                    class="accordion-collapse collapse show"
+                    aria-labelledby="headingDocumentation"
+                    data-bs-parent="#accordionExample"
+                >
                     <div class="accordion-body">
                         <p class="fw-normal" v-html="$t('about.DocumentationBody')"></p>
                     </div>
@@ -19,15 +29,25 @@
             </div>
             <div class="accordion-item">
                 <h2 class="accordion-header" id="headingOne">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                        data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
-                        <span class="badge text-bg-secondary">
-                            <BIconInfoCircle class="fs-4" />
-                        </span>&nbsp;{{ $t('about.ProjectOrigin') }}
+                    <button
+                        class="accordion-button collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseOne"
+                        aria-expanded="false"
+                        aria-controls="collapseOne"
+                    >
+                        <span class="badge text-bg-secondary"> <BIconInfoCircle class="fs-4" /> </span>&nbsp;{{
+                            $t('about.ProjectOrigin')
+                        }}
                     </button>
                 </h2>
-                <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
-                    data-bs-parent="#accordionExample">
+                <div
+                    id="collapseOne"
+                    class="accordion-collapse collapse"
+                    aria-labelledby="headingOne"
+                    data-bs-parent="#accordionExample"
+                >
                     <div class="accordion-body">
                         <p class="fw-normal" v-html="$t('about.ProjectOriginBody1')"></p>
                         <p class="fw-normal" v-html="$t('about.ProjectOriginBody2')"></p>
@@ -38,61 +58,83 @@
             </div>
             <div class="accordion-item">
                 <h2 class="accordion-header" id="headingTwo">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                        data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-                        <span class="badge text-bg-secondary">
-                            <BIconActivity class="fs-4" />
-                        </span>&nbsp;{{ $t('about.NewsUpdates') }}
+                    <button
+                        class="accordion-button collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseTwo"
+                        aria-expanded="false"
+                        aria-controls="collapseTwo"
+                    >
+                        <span class="badge text-bg-secondary"> <BIconActivity class="fs-4" /> </span>&nbsp;{{
+                            $t('about.NewsUpdates')
+                        }}
                     </button>
                 </h2>
-                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
-                    data-bs-parent="#accordionExample">
+                <div
+                    id="collapseTwo"
+                    class="accordion-collapse collapse"
+                    aria-labelledby="headingTwo"
+                    data-bs-parent="#accordionExample"
+                >
                     <div class="accordion-body" v-html="$t('about.NewsUpdatesBody')"></div>
                 </div>
             </div>
             <div class="accordion-item">
                 <h2 class="accordion-header" id="headingThree">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                        data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
-                        <span class="badge text-bg-secondary">
-                            <BIconBug class="fs-4" />
-                        </span>&nbsp;{{ $t('about.ErrorReporting') }}
+                    <button
+                        class="accordion-button collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseThree"
+                        aria-expanded="false"
+                        aria-controls="collapseThree"
+                    >
+                        <span class="badge text-bg-secondary"> <BIconBug class="fs-4" /> </span>&nbsp;{{
+                            $t('about.ErrorReporting')
+                        }}
                     </button>
                 </h2>
-                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
-                    data-bs-parent="#accordionExample">
+                <div
+                    id="collapseThree"
+                    class="accordion-collapse collapse"
+                    aria-labelledby="headingThree"
+                    data-bs-parent="#accordionExample"
+                >
                     <div class="accordion-body" v-html="$t('about.ErrorReportingBody')"></div>
                 </div>
             </div>
             <div class="accordion-item">
                 <h2 class="accordion-header" id="headingFour">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                        data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
-                        <span class="badge text-bg-secondary">
-                            <BIconChat class="fs-4" />
-                        </span>&nbsp;{{ $t('about.Discussion') }}
+                    <button
+                        class="accordion-button collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseFour"
+                        aria-expanded="false"
+                        aria-controls="collapseFour"
+                    >
+                        <span class="badge text-bg-secondary"> <BIconChat class="fs-4" /> </span>&nbsp;{{
+                            $t('about.Discussion')
+                        }}
                     </button>
                 </h2>
-                <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
-                    data-bs-parent="#accordionExample">
+                <div
+                    id="collapseFour"
+                    class="accordion-collapse collapse"
+                    aria-labelledby="headingFour"
+                    data-bs-parent="#accordionExample"
+                >
                     <div class="accordion-body" v-html="$t('about.DiscussionBody')"></div>
                 </div>
             </div>
-
         </div>
-
     </BasePage>
-
 </template>
 
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
-import {
-    BIconActivity,
-    BIconBug,
-    BIconChat,
-    BIconInfoCircle
-} from 'bootstrap-icons-vue';
+import { BIconActivity, BIconBug, BIconChat, BIconInfoCircle } from 'bootstrap-icons-vue';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
@@ -104,5 +146,4 @@ export default defineComponent({
         BIconInfoCircle,
     },
 });
-
 </script>

webapp/src/views/ConfigAdminView.vue

@@ -11,13 +11,14 @@
                 </div>
                 <div class="col-sm">
                     <select class="form-select" v-model="backupFileSelect">
-                        <option v-for="(file) in fileList.configs" :key="file.name" :value="file.name">
+                        <option v-for="file in fileList.configs" :key="file.name" :value="file.name">
                             {{ file.name }}
                         </option>
                     </select>
                 </div>
                 <div class="col-sm">
-                    <button class="btn btn-primary" @click="downloadConfig">{{ $t('configadmin.Backup') }}
+                    <button class="btn btn-primary" @click="downloadConfig">
+                        {{ $t('configadmin.Backup') }}
                     </button>
                 </div>
             </div>
@@ -33,9 +34,7 @@
                 </span>
                 <br />
                 <br />
-                <button class="btn btn-light" @click="clear">
-                    <BIconArrowLeft /> {{ $t('configadmin.Back') }}
-                </button>
+                <button class="btn btn-light" @click="clear"><BIconArrowLeft /> {{ $t('configadmin.Back') }}</button>
             </div>
 
             <div v-else-if="!uploading && UploadSuccess">
@@ -45,9 +44,7 @@
                 <span> {{ $t('configadmin.UploadSuccess') }} </span>
                 <br />
                 <br />
-                <button class="btn btn-primary" @click="clear">
-                    <BIconArrowLeft /> {{ $t('configadmin.Back') }}
-                </button>
+                <button class="btn btn-primary" @click="clear"><BIconArrowLeft /> {{ $t('configadmin.Back') }}</button>
             </div>
 
             <div v-else-if="!uploading">
@@ -62,7 +59,8 @@
                         <input class="form-control" type="file" ref="file" accept=".json" />
                     </div>
                     <div class="col-sm">
-                        <button class="btn btn-primary" @click="uploadConfig">{{ $t('configadmin.Restore') }}
+                        <button class="btn btn-primary" @click="uploadConfig">
+                            {{ $t('configadmin.Restore') }}
                         </button>
                     </div>
                 </div>
@@ -70,8 +68,14 @@
 
             <div v-else-if="uploading">
                 <div class="progress">
-                    <div class="progress-bar" role="progressbar" :style="{ width: progress + '%' }"
-                        v-bind:aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100">
+                    <div
+                        class="progress-bar"
+                        role="progressbar"
+                        :style="{ width: progress + '%' }"
+                        v-bind:aria-valuenow="progress"
+                        aria-valuemin="0"
+                        aria-valuemax="100"
+                    >
                         {{ progress }}%
                     </div>
                 </div>
@@ -81,14 +85,20 @@
         </CardElement>
 
         <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>
 
             <div class="alert alert-danger mt-3" role="alert" v-html="$t('configadmin.ResetHint')"></div>
         </CardElement>
     </BasePage>
 
-    <ModalDialog modalId="factoryReset" small :title="$t('configadmin.FactoryReset')" :closeText="$t('configadmin.Cancel')">
+    <ModalDialog
+        modalId="factoryReset"
+        small
+        :title="$t('configadmin.FactoryReset')"
+        :closeText="$t('configadmin.Cancel')"
+    >
         {{ $t('configadmin.ResetMsg') }}
         <template #footer>
             <button type="button" class="btn btn-danger" @click="onFactoryResetPerform">
@@ -100,17 +110,13 @@
 
 <script lang="ts">
 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 ModalDialog from '@/components/ModalDialog.vue';
 import type { ConfigFileList } from '@/types/Config';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import * as bootstrap from 'bootstrap';
-import {
-    BIconArrowLeft,
-    BIconCheckCircle,
-    BIconExclamationCircleFill
-} from 'bootstrap-icons-vue';
+import { BIconArrowLeft, BIconCheckCircle, BIconExclamationCircleFill } from 'bootstrap-icons-vue';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
@@ -126,18 +132,18 @@ export default defineComponent({
     data() {
         return {
             modalFactoryReset: {} as bootstrap.Modal,
-            alertMessage: "",
-            alertType: "info",
+            alertMessage: '',
+            alertType: 'info',
             showAlert: false,
             loading: true,
             uploading: false,
             progress: 0,
-            UploadError: "",
+            UploadError: '',
             UploadSuccess: false,
             file: {} as Blob,
             fileList: {} as ConfigFileList,
-            backupFileSelect: "",
-            restoreFileSelect: "config.json",
+            backupFileSelect: '',
+            restoreFileSelect: 'config.json',
         };
     },
     mounted() {
@@ -155,26 +161,24 @@ export default defineComponent({
         },
         onFactoryResetPerform() {
             const formData = new FormData();
-            formData.append("data", JSON.stringify({ delete: true }));
+            formData.append('data', JSON.stringify({ delete: true }));
 
-            fetch("/api/config/delete", {
-                method: "POST",
+            fetch('/api/config/delete', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (response) => {
-                        this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
-                        this.alertType = response.type;
-                        this.showAlert = true;
-                    }
-                )
+                .then((response) => {
+                    this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
+                    this.alertType = response.type;
+                    this.showAlert = true;
+                });
             this.modalFactoryReset.hide();
         },
         getFileList() {
             this.loading = true;
-            fetch("/api/config/list", { headers: authHeader() })
+            fetch('/api/config/list', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.fileList = data;
@@ -185,9 +189,9 @@ export default defineComponent({
                 });
         },
         downloadConfig() {
-            fetch("/api/config/get?file=" + this.backupFileSelect, { headers: authHeader() })
-                .then(res => res.blob())
-                .then(blob => {
+            fetch('/api/config/get?file=' + this.backupFileSelect, { headers: authHeader() })
+                .then((res) => res.blob())
+                .then((blob) => {
                     const file = window.URL.createObjectURL(blob);
                     const a = document.createElement('a');
                     a.href = file;
@@ -204,13 +208,13 @@ export default defineComponent({
             if (target.files !== null && target.files?.length > 0) {
                 this.file = target.files[0];
             } else {
-                this.UploadError = this.$t("configadmin.NoFileSelected");
+                this.UploadError = this.$t('configadmin.NoFileSelected');
                 this.uploading = false;
                 this.progress = 0;
                 return;
             }
             const request = new XMLHttpRequest();
-            request.addEventListener("load", () => {
+            request.addEventListener('load', () => {
                 // request.response will hold the response from the server
                 if (request.status === 200) {
                     this.UploadSuccess = true;
@@ -223,20 +227,20 @@ export default defineComponent({
                 this.progress = 0;
             });
             // Upload progress
-            request.upload.addEventListener("progress", (e) => {
+            request.upload.addEventListener('progress', (e) => {
                 this.progress = Math.trunc((e.loaded / e.total) * 100);
             });
             request.withCredentials = true;
 
-            formData.append("config", this.file, "config");
-            request.open("post", "/api/config/upload?file=" + this.restoreFileSelect);
+            formData.append('config', this.file, 'config');
+            request.open('post', '/api/config/upload?file=' + this.restoreFileSelect);
             authHeader().forEach((value, key) => {
                 request.setRequestHeader(key, value);
             });
             request.send(formData);
         },
         clear() {
-            this.UploadError = "";
+            this.UploadError = '';
             this.UploadSuccess = false;
             this.getFileList();
         },

webapp/src/views/ConsoleInfoView.vue

@@ -4,8 +4,13 @@
             <div class="row g-3 align-items-center">
                 <div class="col">
                     <div class="form-check form-switch">
-                        <input class="form-check-input" type="checkbox" role="switch" id="autoScroll"
-                            v-model="isAutoScroll">
+                        <input
+                            class="form-check-input"
+                            type="checkbox"
+                            role="switch"
+                            id="autoScroll"
+                            v-model="isAutoScroll"
+                        />
                         <label class="form-check-label" for="autoScroll">
                             {{ $t('console.EnableAutoScroll') }}
                         </label>
@@ -14,9 +19,11 @@
                 <div class="col text-end">
                     <div class="btn-group" role="group">
                         <button type="button" class="btn btn-primary" :onClick="clearConsole">
-                            {{ $t('console.ClearConsole') }}</button>
+                            {{ $t('console.ClearConsole') }}
+                        </button>
                         <button type="button" class="btn btn-secondary" :onClick="copyConsole">
-                            {{ $t('console.CopyToClipboard') }}</button>
+                            {{ $t('console.CopyToClipboard') }}
+                        </button>
                     </div>
                 </div>
             </div>
@@ -41,7 +48,7 @@ export default defineComponent({
             socket: {} as WebSocket,
             heartInterval: 0,
             dataLoading: true,
-            consoleBuffer: "",
+            consoleBuffer: '',
             isAutoScroll: true,
             endWithNewline: false,
         };
@@ -56,21 +63,20 @@ export default defineComponent({
     watch: {
         consoleBuffer() {
             if (this.isAutoScroll) {
-                const textarea = this.$el.querySelector("#console");
+                const textarea = this.$el.querySelector('#console');
                 setTimeout(() => {
                     textarea.scrollTop = textarea.scrollHeight;
                 }, 0);
             }
-        }
+        },
     },
     methods: {
         initSocket() {
-            console.log("Starting connection to WebSocket Server");
+            console.log('Starting connection to WebSocket Server');
 
             const { protocol, host } = location;
             const authString = authUrl();
-            const webSocketUrl = `${protocol === "https:" ? "wss" : "ws"
-                }://${authString}${host}/console`;
+            const webSocketUrl = `${protocol === 'https:' ? 'wss' : 'ws'}://${authString}${host}/console`;
 
             this.closeSocket();
             this.socket = new WebSocket(webSocketUrl);
@@ -84,14 +90,15 @@ export default defineComponent({
                     outstr = outstr.substring(0, outstr.length - 1);
                     removedNewline = true;
                 }
-                this.consoleBuffer += (this.endWithNewline ? this.getOutDate() : '') + outstr.replaceAll("\n", "\n" + this.getOutDate());
+                this.consoleBuffer +=
+                    (this.endWithNewline ? this.getOutDate() : '') + outstr.replaceAll('\n', '\n' + this.getOutDate());
                 this.endWithNewline = removedNewline;
                 this.heartCheck(); // Reset heartbeat detection
             };
 
             this.socket.onopen = function (event) {
                 console.log(event);
-                console.log("Successfully connected to the echo websocket server...");
+                console.log('Successfully connected to the echo websocket server...');
             };
 
             // Listen to window events , When the window closes , Take the initiative to disconnect websocket Connect
@@ -105,7 +112,7 @@ export default defineComponent({
             this.heartInterval = setInterval(() => {
                 if (this.socket.readyState === 1) {
                     // Connection status
-                    this.socket.send("ping");
+                    this.socket.send('ping');
                 } else {
                     this.initSocket(); // Breakpoint reconnection 5 Time
                 }
@@ -123,13 +130,19 @@ export default defineComponent({
         },
         getOutDate(): string {
             const u = new Date();
-            return ('0' + u.getHours()).slice(-2) + ':' +
-                ('0' + u.getMinutes()).slice(-2) + ':' +
-                ('0' + u.getSeconds()).slice(-2) + '.' +
-                (u.getMilliseconds() / 1000).toFixed(3).slice(2, 5) + ' > ';
+            return (
+                ('0' + u.getHours()).slice(-2) +
+                ':' +
+                ('0' + u.getMinutes()).slice(-2) +
+                ':' +
+                ('0' + u.getSeconds()).slice(-2) +
+                '.' +
+                (u.getMilliseconds() / 1000).toFixed(3).slice(2, 5) +
+                ' > '
+            );
         },
         clearConsole() {
-            this.consoleBuffer = "";
+            this.consoleBuffer = '';
         },
         copyConsole() {
             const input = document.createElement('textarea');
@@ -138,17 +151,17 @@ export default defineComponent({
             input.select();
             document.execCommand('copy');
             document.body.removeChild(input);
-        }
-    }
+        },
+    },
 });
 </script>
 
 <style>
 #console {
-    background-color: #0C0C0C;
-    color: #CCCCCC;
+    background-color: #0c0c0c;
+    color: #cccccc;
     padding: 8px;
     font-family: courier new;
-    font-size: .875em;
+    font-size: 0.875em;
 }
 </style>

webapp/src/views/DeviceAdminView.vue

@@ -7,19 +7,50 @@
         <form @submit="savePinConfig">
             <nav>
                 <div class="nav nav-tabs" id="nav-tab" role="tablist">
-                    <button class="nav-link active" id="nav-pin-tab" data-bs-toggle="tab" data-bs-target="#nav-pin"
-                        type="button" role="tab" aria-controls="nav-pin" aria-selected="true">{{
-                            $t('deviceadmin.PinAssignment')
-                        }}</button>
-                    <button class="nav-link" id="nav-display-tab" data-bs-toggle="tab" data-bs-target="#nav-display"
-                        type="button" role="tab" aria-controls="nav-display">{{ $t('deviceadmin.Display') }}</button>
-                    <button class="nav-link" id="nav-leds-tab" data-bs-toggle="tab" data-bs-target="#nav-leds"
-                        type="button" role="tab" aria-controls="nav-leds">{{ $t('deviceadmin.Leds') }}</button>
+                    <button
+                        class="nav-link active"
+                        id="nav-pin-tab"
+                        data-bs-toggle="tab"
+                        data-bs-target="#nav-pin"
+                        type="button"
+                        role="tab"
+                        aria-controls="nav-pin"
+                        aria-selected="true"
+                    >
+                        {{ $t('deviceadmin.PinAssignment') }}
+                    </button>
+                    <button
+                        class="nav-link"
+                        id="nav-display-tab"
+                        data-bs-toggle="tab"
+                        data-bs-target="#nav-display"
+                        type="button"
+                        role="tab"
+                        aria-controls="nav-display"
+                    >
+                        {{ $t('deviceadmin.Display') }}
+                    </button>
+                    <button
+                        class="nav-link"
+                        id="nav-leds-tab"
+                        data-bs-toggle="tab"
+                        data-bs-target="#nav-leds"
+                        type="button"
+                        role="tab"
+                        aria-controls="nav-leds"
+                    >
+                        {{ $t('deviceadmin.Leds') }}
+                    </button>
                 </div>
             </nav>
             <div class="tab-content" id="nav-tabContent">
-                <div class="tab-pane fade show active" id="nav-pin" role="tabpanel" aria-labelledby="nav-pin-tab"
-                    tabindex="0">
+                <div
+                    class="tab-pane fade show active"
+                    id="nav-pin"
+                    role="tabpanel"
+                    aria-labelledby="nav-pin-tab"
+                    tabindex="0"
+                >
                     <div class="card">
                         <div class="card-body">
                             <div class="row mb-3">
@@ -27,10 +58,21 @@
                                     $t('deviceadmin.SelectedProfile')
                                 }}</label>
                                 <div class="col-sm-10">
-                                    <select class="form-select" id="inputPinProfile"
-                                        v-model="deviceConfigList.curPin.name">
-                                        <option v-for="device in pinMappingList" :value="device.name" :key="device.name">
-                                            {{ device.name === "Default" ? $t('deviceadmin.DefaultProfile') : device.name }}
+                                    <select
+                                        class="form-select"
+                                        id="inputPinProfile"
+                                        v-model="deviceConfigList.curPin.name"
+                                    >
+                                        <option
+                                            v-for="device in pinMappingList"
+                                            :value="device.name"
+                                            :key="device.name"
+                                        >
+                                            {{
+                                                device.name === 'Default'
+                                                    ? $t('deviceadmin.DefaultProfile')
+                                                    : device.name
+                                            }}
                                         </option>
                                     </select>
                                 </div>
@@ -39,33 +81,56 @@
                             <div class="row mb-3">
                                 <div class="col-sm-2"></div>
                                 <div class="col-sm-10">
-                                    <div class="btn-group mb-2 me-2" v-for="(doc, index) in pinMappingList.find(i => i.name === deviceConfigList.curPin.name)?.links" :key="index">
+                                    <div
+                                        class="btn-group mb-2 me-2"
+                                        v-for="(doc, index) in pinMappingList.find(
+                                            (i) => i.name === deviceConfigList.curPin.name
+                                        )?.links"
+                                        :key="index"
+                                    >
                                         <a :href="doc.url" class="btn btn-primary" target="_blank">{{ doc.name }}</a>
                                     </div>
                                 </div>
                             </div>
 
-                            <div class="alert alert-danger mt-3" role="alert" v-html="$t('deviceadmin.ProfileHint')">
-                            </div>
+                            <div
+                                class="alert alert-danger mt-3"
+                                role="alert"
+                                v-html="$t('deviceadmin.ProfileHint')"
+                            ></div>
 
                             <PinInfo
-                                :selectedPinAssignment="pinMappingList.find(i => i.name === deviceConfigList.curPin.name)"
-                                :currentPinAssignment="deviceConfigList.curPin" />
+                                :selectedPinAssignment="
+                                    pinMappingList.find((i) => i.name === deviceConfigList.curPin.name)
+                                "
+                                :currentPinAssignment="deviceConfigList.curPin"
+                            />
                         </div>
                     </div>
                 </div>
 
-                <div class="tab-pane fade show" id="nav-display" role="tabpanel" aria-labelledby="nav-display-tab"
-                    tabindex="0">
+                <div
+                    class="tab-pane fade show"
+                    id="nav-display"
+                    role="tabpanel"
+                    aria-labelledby="nav-display-tab"
+                    tabindex="0"
+                >
                     <div class="card">
                         <div class="card-body">
-                            <InputElement :label="$t('deviceadmin.PowerSafe')"
-                                v-model="deviceConfigList.display.power_safe" type="checkbox"
-                                :tooltip="$t('deviceadmin.PowerSafeHint')" />
+                            <InputElement
+                                :label="$t('deviceadmin.PowerSafe')"
+                                v-model="deviceConfigList.display.power_safe"
+                                type="checkbox"
+                                :tooltip="$t('deviceadmin.PowerSafeHint')"
+                            />
 
-                            <InputElement :label="$t('deviceadmin.Screensaver')"
-                                v-model="deviceConfigList.display.screensaver" type="checkbox"
-                                :tooltip="$t('deviceadmin.ScreensaverHint')" />
+                            <InputElement
+                                :label="$t('deviceadmin.Screensaver')"
+                                v-model="deviceConfigList.display.screensaver"
+                                type="checkbox"
+                                :tooltip="$t('deviceadmin.ScreensaverHint')"
+                            />
 
                             <div class="row mb-3">
                                 <label class="col-sm-2 col-form-label">
@@ -80,10 +145,15 @@
                                 </div>
                             </div>
 
-                            <InputElement :label="$t('deviceadmin.DiagramDuration')"
-                                v-model="deviceConfigList.display.diagramduration" type="number"
-                                min=600 max=86400
-                                :tooltip="$t('deviceadmin.DiagramDurationHint')" :postfix="$t('deviceadmin.Seconds')" />
+                            <InputElement
+                                :label="$t('deviceadmin.DiagramDuration')"
+                                v-model="deviceConfigList.display.diagramduration"
+                                type="number"
+                                min="600"
+                                max="86400"
+                                :tooltip="$t('deviceadmin.DiagramDurationHint')"
+                                :postfix="$t('deviceadmin.Seconds')"
+                            />
 
                             <div class="row mb-3">
                                 <label class="col-sm-2 col-form-label">
@@ -91,7 +161,11 @@
                                 </label>
                                 <div class="col-sm-10">
                                     <select class="form-select" v-model="deviceConfigList.display.language">
-                                        <option v-for="language in displayLanguageList" :key="language.key" :value="language.key">
+                                        <option
+                                            v-for="language in displayLanguageList"
+                                            :key="language.key"
+                                            :value="language.key"
+                                        >
                                             {{ $t(`deviceadmin.` + language.value) }}
                                         </option>
                                     </select>
@@ -104,7 +178,11 @@
                                 </label>
                                 <div class="col-sm-10">
                                     <select class="form-select" v-model="deviceConfigList.display.rotation">
-                                        <option v-for="rotation in displayRotationList" :key="rotation.key" :value="rotation.key">
+                                        <option
+                                            v-for="rotation in displayRotationList"
+                                            :key="rotation.key"
+                                            :value="rotation.key"
+                                        >
                                             {{ $t(`deviceadmin.` + rotation.value) }}
                                         </option>
                                     </select>
@@ -113,36 +191,57 @@
 
                             <div class="row mb-3">
                                 <label for="inputDisplayContrast" class="col-sm-2 col-form-label">{{
-                                    $t('deviceadmin.Contrast', { contrast: $n(deviceConfigList.display.contrast / 100,
-                                            'percent')
-                                    }) }}</label>
+                                    $t('deviceadmin.Contrast', {
+                                        contrast: $n(deviceConfigList.display.contrast / 100, 'percent'),
+                                    })
+                                }}</label>
                                 <div class="col-sm-10">
-                                    <input type="range" class="form-range" min="0" max="100" id="inputDisplayContrast"
-                                        v-model="deviceConfigList.display.contrast" />
+                                    <input
+                                        type="range"
+                                        class="form-range"
+                                        min="0"
+                                        max="100"
+                                        id="inputDisplayContrast"
+                                        v-model="deviceConfigList.display.contrast"
+                                    />
                                 </div>
                             </div>
-
                         </div>
                     </div>
                 </div>
 
-                <div class="tab-pane fade show" id="nav-leds" role="tabpanel" aria-labelledby="nav-leds-tab" tabindex="0">
+                <div
+                    class="tab-pane fade show"
+                    id="nav-leds"
+                    role="tabpanel"
+                    aria-labelledby="nav-leds-tab"
+                    tabindex="0"
+                >
                     <div class="card">
                         <div class="card-body">
-                            <InputElement :label="$t('deviceadmin.EqualBrightness')"
-                                v-model="equalBrightnessCheckVal" type="checkbox" />
+                            <InputElement
+                                :label="$t('deviceadmin.EqualBrightness')"
+                                v-model="equalBrightnessCheckVal"
+                                type="checkbox"
+                            />
 
                             <div class="row mb-3" v-for="(ledSetting, index) in deviceConfigList.led" :key="index">
                                 <label :for="getLedIdFromNumber(index)" class="col-sm-2 col-form-label">{{
                                     $t('deviceadmin.LedBrightness', {
                                         led: index,
-                                        brightness: $n(ledSetting.brightness / 100,
-                                            'percent')
+                                        brightness: $n(ledSetting.brightness / 100, 'percent'),
                                     })
                                 }}</label>
                                 <div class="col-sm-10">
-                                    <input type="range" class="form-range" min="0" max="100" :id="getLedIdFromNumber(index)"
-                                        v-model="ledSetting.brightness" @change="syncSliders" />
+                                    <input
+                                        type="range"
+                                        class="form-range"
+                                        min="0"
+                                        max="100"
+                                        :id="getLedIdFromNumber(index)"
+                                        v-model="ledSetting.brightness"
+                                        @change="syncSliders"
+                                    />
                                 </div>
                             </div>
                         </div>
@@ -150,20 +249,19 @@
                 </div>
             </div>
 
-            <FormFooter @reload="getDeviceConfig"/>
-
+            <FormFooter @reload="getDeviceConfig" />
         </form>
     </BasePage>
 </template>
 
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
-import BootstrapAlert from "@/components/BootstrapAlert.vue";
+import BootstrapAlert from '@/components/BootstrapAlert.vue';
 import FormFooter from '@/components/FormFooter.vue';
 import InputElement from '@/components/InputElement.vue';
 import PinInfo from '@/components/PinInfo.vue';
-import type { DeviceConfig, Led } from "@/types/DeviceConfig";
-import type { PinMapping, Device } from "@/types/PinMapping";
+import type { DeviceConfig, Led } from '@/types/DeviceConfig';
+import type { PinMapping, Device } from '@/types/PinMapping';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { defineComponent } from 'vue';
 
@@ -181,8 +279,8 @@ export default defineComponent({
             pinMappingLoading: true,
             deviceConfigList: {} as DeviceConfig,
             pinMappingList: {} as PinMapping,
-            alertMessage: "",
-            alertType: "info",
+            alertMessage: '',
+            alertType: 'info',
             showAlert: false,
             equalBrightnessCheckVal: false,
             displayRotationList: [
@@ -192,66 +290,64 @@ export default defineComponent({
                 { key: 3, value: 'rot270' },
             ],
             displayLanguageList: [
-                { key: 0, value: "en" },
-                { key: 1, value: "de" },
-                { key: 2, value: "fr" },
+                { key: 0, value: 'en' },
+                { key: 1, value: 'de' },
+                { key: 2, value: 'fr' },
             ],
             diagramModeList: [
-                { key: 0, value: "off" },
-                { key: 1, value: "small" },
-                { key: 2, value: "fullscreen" },
-            ]
-        }
+                { key: 0, value: 'off' },
+                { key: 1, value: 'small' },
+                { key: 2, value: 'fullscreen' },
+            ],
+        };
     },
     created() {
         this.getDeviceConfig();
         this.getPinMappingList();
     },
     watch: {
-        equalBrightnessCheckVal: function(val) {
+        equalBrightnessCheckVal: function (val) {
             if (!val) {
                 return;
             }
-            this.deviceConfigList.led.every(v => v.brightness = this.deviceConfigList.led[0].brightness);
-        }
+            this.deviceConfigList.led.every((v) => (v.brightness = this.deviceConfigList.led[0].brightness));
+        },
     },
     methods: {
         getPinMappingList() {
             this.pinMappingLoading = true;
-            fetch("/api/config/get?file=pin_mapping.json", { headers: authHeader() })
+            fetch('/api/config/get?file=pin_mapping.json', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router, true))
-                .then(
-                    (data) => {
-                        this.pinMappingList = data;
-                    }
-                )
+                .then((data) => {
+                    this.pinMappingList = data;
+                })
                 .catch((error) => {
                     if (error.status != 404) {
-                        this.alertMessage = this.$t('deviceadmin.ParseError', { error: error.message });
+                        this.alertMessage = this.$t('deviceadmin.ParseError', {
+                            error: error.message,
+                        });
                         this.alertType = 'danger';
                         this.showAlert = true;
                     }
                     this.pinMappingList = Array<Device>();
                 })
                 .finally(() => {
-                    this.pinMappingList.sort((a, b) => (a.name < b.name) ? -1 : 1);
-                    this.pinMappingList.splice(0, 0, { "name": "Default" } as Device);
+                    this.pinMappingList.sort((a, b) => (a.name < b.name ? -1 : 1));
+                    this.pinMappingList.splice(0, 0, { name: 'Default' } as Device);
                     this.pinMappingLoading = false;
                 });
         },
         getDeviceConfig() {
             this.dataLoading = true;
-            fetch("/api/device/config", { headers: authHeader() })
+            fetch('/api/device/config', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (data) => {
-                        this.deviceConfigList = data;
-                        if (this.deviceConfigList.curPin.name === "") {
-                            this.deviceConfigList.curPin.name = "Default";
-                        }
-                        this.dataLoading = false;
+                .then((data) => {
+                    this.deviceConfigList = data;
+                    if (this.deviceConfigList.curPin.name === '') {
+                        this.deviceConfigList.curPin.name = 'Default';
                     }
-                )
+                    this.dataLoading = false;
+                })
                 .then(() => {
                     this.equalBrightnessCheckVal = this.isEqualBrightness();
                 });
@@ -260,30 +356,28 @@ export default defineComponent({
             e.preventDefault();
 
             const formData = new FormData();
-            formData.append("data", JSON.stringify(this.deviceConfigList));
+            formData.append('data', JSON.stringify(this.deviceConfigList));
 
-            fetch("/api/device/config", {
-                method: "POST",
+            fetch('/api/device/config', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (response) => {
-                        this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
-                        this.alertType = response.type;
-                        this.showAlert = true;
-                    }
-                );
+                .then((response) => {
+                    this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
+                    this.alertType = response.type;
+                    this.showAlert = true;
+                });
         },
-        getLedIdFromNumber(ledNo: number) : string {
+        getLedIdFromNumber(ledNo: number): string {
             return 'inputLED' + ledNo + 'Brightness';
         },
         getNumberFromLedId(id: string): number {
-            return parseInt(id.replace("inputLED", "").replace("Brightness", ""));
+            return parseInt(id.replace('inputLED', '').replace('Brightness', ''));
         },
         isEqualBrightness(): boolean {
-            const allEqual = (arr : Led[]) => arr.every(v => v.brightness === arr[0].brightness);
+            const allEqual = (arr: Led[]) => arr.every((v) => v.brightness === arr[0].brightness);
             return allEqual(this.deviceConfigList.led);
         },
         syncSliders(event: Event) {
@@ -291,8 +385,8 @@ export default defineComponent({
                 return;
             }
             const srcId = this.getNumberFromLedId((event.target as Element).id);
-            this.deviceConfigList.led.every(v => v.brightness = this.deviceConfigList.led[srcId].brightness);
-        }
+            this.deviceConfigList.led.every((v) => (v.brightness = this.deviceConfigList.led[srcId].brightness));
+        },
     },
 });
 </script>

webapp/src/views/DtuAdminView.vue

@@ -6,15 +6,23 @@
 
         <form @submit="saveDtuConfig">
             <CardElement :text="$t('dtuadmin.DtuConfiguration')" textVariant="text-bg-primary">
-                <InputElement :label="$t('dtuadmin.Serial')"
-                                v-model="dtuConfigList.serial"
-                                type="number" min="1" max="199999999999"
-                                :tooltip="$t('dtuadmin.SerialHint')"/>
+                <InputElement
+                    :label="$t('dtuadmin.Serial')"
+                    v-model="dtuConfigList.serial"
+                    type="number"
+                    min="1"
+                    max="199999999999"
+                    :tooltip="$t('dtuadmin.SerialHint')"
+                />
 
-                <InputElement :label="$t('dtuadmin.PollInterval')"
-                                v-model="dtuConfigList.pollinterval"
-                                type="number" min="1" max="86400"
-                                :postfix="$t('dtuadmin.Seconds')"/>
+                <InputElement
+                    :label="$t('dtuadmin.PollInterval')"
+                    v-model="dtuConfigList.pollinterval"
+                    type="number"
+                    min="1"
+                    max="86400"
+                    :postfix="$t('dtuadmin.Seconds')"
+                />
 
                 <div class="row mb-3" v-if="dtuConfigList.nrf_enabled">
                     <label for="inputNrfPaLevel" class="col-sm-2 col-form-label">
@@ -37,11 +45,16 @@
                     </label>
                     <div class="col-sm-10">
                         <div class="input-group mb-3">
-                            <input type="range" class="form-control form-range"
+                            <input
+                                type="range"
+                                class="form-control form-range"
                                 v-model="dtuConfigList.cmt_palevel"
-                                min="-10" max="20"
-                                id="inputCmtPaLevel" aria-describedby="basic-addon1"
-                                style="height: unset;" />
+                                min="-10"
+                                max="20"
+                                id="inputCmtPaLevel"
+                                aria-describedby="basic-addon1"
+                                style="height: unset"
+                            />
                             <span class="input-group-text" id="basic-addon1">{{ cmtPaLevelText }}</span>
                         </div>
                     </div>
@@ -55,7 +68,12 @@
                     <div class="col-sm-10">
                         <select id="inputCmtCountry" class="form-select" v-model="dtuConfigList.cmt_country">
                             <option v-for="(country, index) in dtuConfigList.country_def" :key="index" :value="index">
-                                {{ $t(`dtuadmin.country_` + index, {min: country.freq_min / 1e6, max: country.freq_max / 1e6}) }}
+                                {{
+                                    $t(`dtuadmin.country_` + index, {
+                                        min: country.freq_min / 1e6,
+                                        max: country.freq_max / 1e6,
+                                    })
+                                }}
                             </option>
                         </select>
                     </div>
@@ -68,30 +86,40 @@
                     </label>
                     <div class="col-sm-10">
                         <div class="input-group mb-3">
-                            <input type="range" class="form-control form-range"
+                            <input
+                                type="range"
+                                class="form-control form-range"
                                 v-model="dtuConfigList.cmt_frequency"
-                                :min="cmtMinFrequency" :max="cmtMaxFrequency" :step="dtuConfigList.cmt_chan_width"
-                                id="cmtFrequency" aria-describedby="basic-addon2"
-                                style="height: unset;" />
+                                :min="cmtMinFrequency"
+                                :max="cmtMaxFrequency"
+                                :step="dtuConfigList.cmt_chan_width"
+                                id="cmtFrequency"
+                                aria-describedby="basic-addon2"
+                                style="height: unset"
+                            />
                             <span class="input-group-text" id="basic-addon2">{{ cmtFrequencyText }}</span>
                         </div>
-                        <div class="alert alert-danger" role="alert" v-html="$t('dtuadmin.CmtFrequencyWarning')" v-if="cmtIsOutOfLegalRange"></div>
+                        <div
+                            class="alert alert-danger"
+                            role="alert"
+                            v-html="$t('dtuadmin.CmtFrequencyWarning')"
+                            v-if="cmtIsOutOfLegalRange"
+                        ></div>
                     </div>
                 </div>
-
             </CardElement>
-            <FormFooter @reload="getDtuConfig"/>
+            <FormFooter @reload="getDtuConfig" />
         </form>
     </BasePage>
 </template>
 
 <script lang="ts">
 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 FormFooter from '@/components/FormFooter.vue';
 import InputElement from '@/components/InputElement.vue';
-import type { DtuConfig } from "@/types/DtuConfig";
+import type { DtuConfig } from '@/types/DtuConfig';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { BIconInfoCircle } from 'bootstrap-icons-vue';
 import { defineComponent } from 'vue';
@@ -110,13 +138,13 @@ export default defineComponent({
             dataLoading: true,
             dtuConfigList: {} as DtuConfig,
             nrfpalevelList: [
-                { key: 0, value: 'Min', db: "-18" },
-                { key: 1, value: 'Low', db: "-12" },
-                { key: 2, value: 'High', db: "-6" },
-                { key: 3, value: 'Max', db: "0" },
+                { key: 0, value: 'Min', db: '-18' },
+                { key: 1, value: 'Low', db: '-12' },
+                { key: 2, value: 'High', db: '-6' },
+                { key: 3, value: 'Max', db: '0' },
             ],
-            alertMessage: "",
-            alertType: "info",
+            alertMessage: '',
+            alertType: 'info',
             showAlert: false,
         };
     },
@@ -125,10 +153,12 @@ export default defineComponent({
     },
     computed: {
         cmtFrequencyText() {
-            return this.$t("dtuadmin.MHz", { mhz: this.$n(this.dtuConfigList.cmt_frequency / 1000000, "decimalTwoDigits") });
+            return this.$t('dtuadmin.MHz', {
+                mhz: this.$n(this.dtuConfigList.cmt_frequency / 1000000, 'decimalTwoDigits'),
+            });
         },
         cmtPaLevelText() {
-            return this.$t("dtuadmin.dBm", { dbm: this.$n(this.dtuConfigList.cmt_palevel * 1) });
+            return this.$t('dtuadmin.dBm', { dbm: this.$n(this.dtuConfigList.cmt_palevel * 1) });
         },
         cmtMinFrequency() {
             return this.dtuConfigList.country_def[this.dtuConfigList.cmt_country].freq_min;
@@ -137,9 +167,13 @@ export default defineComponent({
             return this.dtuConfigList.country_def[this.dtuConfigList.cmt_country].freq_max;
         },
         cmtIsOutOfLegalRange() {
-            return this.dtuConfigList.cmt_frequency < this.dtuConfigList.country_def[this.dtuConfigList.cmt_country].freq_legal_min
-                || this.dtuConfigList.cmt_frequency > this.dtuConfigList.country_def[this.dtuConfigList.cmt_country].freq_legal_max;
-        }
+            return (
+                this.dtuConfigList.cmt_frequency <
+                    this.dtuConfigList.country_def[this.dtuConfigList.cmt_country].freq_legal_min ||
+                this.dtuConfigList.cmt_frequency >
+                    this.dtuConfigList.country_def[this.dtuConfigList.cmt_country].freq_legal_max
+            );
+        },
     },
     watch: {
         'dtuConfigList.cmt_country'(newValue, oldValue) {
@@ -149,39 +183,35 @@ export default defineComponent({
                     this.dtuConfigList.cmt_frequency = this.dtuConfigList.country_def[newValue].freq_default;
                 });
             }
-        }
+        },
     },
     methods: {
         getDtuConfig() {
             this.dataLoading = true;
-            fetch("/api/dtu/config", { headers: authHeader() })
+            fetch('/api/dtu/config', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (data) => {
-                        this.dtuConfigList = data;
-                        this.dataLoading = false;
-                    }
-                );
+                .then((data) => {
+                    this.dtuConfigList = data;
+                    this.dataLoading = false;
+                });
         },
         saveDtuConfig(e: Event) {
             e.preventDefault();
 
             const formData = new FormData();
-            formData.append("data", JSON.stringify(this.dtuConfigList));
+            formData.append('data', JSON.stringify(this.dtuConfigList));
 
-            fetch("/api/dtu/config", {
-                method: "POST",
+            fetch('/api/dtu/config', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (response) => {
-                        this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
-                        this.alertType = response.type;
-                        this.showAlert = true;
-                    }
-                );
+                .then((response) => {
+                    this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
+                    this.alertType = response.type;
+                    this.showAlert = true;
+                });
         },
     },
 });

webapp/src/views/FirmwareUpgradeView.vue

@@ -8,8 +8,11 @@
             </div>
         </div>
 
-        <CardElement :text="$t('firmwareupgrade.OtaError')" textVariant="text-bg-danger" center-content
-                     v-if="!loading && !uploading && OTAError != ''"
+        <CardElement
+            :text="$t('firmwareupgrade.OtaError')"
+            textVariant="text-bg-danger"
+            center-content
+            v-if="!loading && !uploading && OTAError != ''"
         >
             <p class="h1 mb-2">
                 <BIconExclamationCircleFill />
@@ -20,16 +23,17 @@
             </span>
             <br />
             <br />
-            <button class="btn btn-light" @click="clear">
-                <BIconArrowLeft /> {{ $t('firmwareupgrade.Back') }}
-            </button>
+            <button class="btn btn-light" @click="clear"><BIconArrowLeft /> {{ $t('firmwareupgrade.Back') }}</button>
             <button class="btn btn-primary" @click="retryOTA">
                 <BIconArrowRepeat /> {{ $t('firmwareupgrade.Retry') }}
             </button>
         </CardElement>
 
-        <CardElement :text="$t('firmwareupgrade.OtaStatus')" textVariant="text-bg-success" center-content
-                     v-else-if="!loading && !uploading && OTASuccess"
+        <CardElement
+            :text="$t('firmwareupgrade.OtaStatus')"
+            textVariant="text-bg-success"
+            center-content
+            v-else-if="!loading && !uploading && OTASuccess"
         >
             <span class="h1 mb-2">
                 <BIconCheckCircle />
@@ -44,25 +48,36 @@
             </div>
         </CardElement>
 
-        <CardElement :text="$t('firmwareupgrade.FirmwareUpload')" textVariant="text-bg-primary" center-content
-                     v-else-if="!loading && !uploading"
+        <CardElement
+            :text="$t('firmwareupgrade.FirmwareUpload')"
+            textVariant="text-bg-primary"
+            center-content
+            v-else-if="!loading && !uploading"
         >
             <div class="form-group pt-2 mt-3">
                 <input class="form-control" type="file" ref="file" accept=".bin,.bin.gz" @change="uploadOTA" />
             </div>
         </CardElement>
 
-        <CardElement :text="$t('firmwareupgrade.UploadProgress')" textVariant="text-bg-primary" center-content
-                     v-else-if="!loading && uploading"
+        <CardElement
+            :text="$t('firmwareupgrade.UploadProgress')"
+            textVariant="text-bg-primary"
+            center-content
+            v-else-if="!loading && uploading"
         >
             <div class="progress">
-                <div class="progress-bar" role="progressbar" :style="{ width: progress + '%' }"
-                    v-bind:aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100">
+                <div
+                    class="progress-bar"
+                    role="progressbar"
+                    :style="{ width: progress + '%' }"
+                    v-bind:aria-valuenow="progress"
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                >
                     {{ progress }}%
                 </div>
             </div>
         </CardElement>
-
     </BasePage>
 </template>
 
@@ -70,13 +85,8 @@
 import BasePage from '@/components/BasePage.vue';
 import CardElement from '@/components/CardElement.vue';
 import { authHeader, isLoggedIn } from '@/utils/authentication';
-import {
-    BIconArrowLeft,
-    BIconArrowRepeat,
-    BIconCheckCircle,
-    BIconExclamationCircleFill
-} from 'bootstrap-icons-vue';
-import SparkMD5 from "spark-md5";
+import { BIconArrowLeft, BIconArrowRepeat, BIconCheckCircle, BIconExclamationCircleFill } from 'bootstrap-icons-vue';
+import SparkMD5 from 'spark-md5';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
@@ -93,11 +103,11 @@ export default defineComponent({
             loading: true,
             uploading: false,
             progress: 0,
-            OTAError: "",
+            OTAError: '',
             OTASuccess: false,
-            type: "firmware",
+            type: 'firmware',
             file: {} as Blob,
-            hostCheckInterval: 0
+            hostCheckInterval: 0,
         };
     },
     methods: {
@@ -124,8 +134,7 @@ export default defineComponent({
                 };
                 const loadNext = () => {
                     const start = currentChunk * chunkSize;
-                    const end =
-                        start + chunkSize >= file.size ? file.size : start + chunkSize;
+                    const end = start + chunkSize >= file.size ? file.size : start + chunkSize;
                     fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
                 };
                 loadNext();
@@ -141,7 +150,7 @@ export default defineComponent({
                 }
             }
             const request = new XMLHttpRequest();
-            request.addEventListener("load", () => {
+            request.addEventListener('load', () => {
                 // request.response will hold the response from the server
                 if (request.status === 200) {
                     this.OTASuccess = true;
@@ -155,56 +164,55 @@ export default defineComponent({
                 this.progress = 0;
             });
             // Upload progress
-            request.upload.addEventListener("progress", (e) => {
+            request.upload.addEventListener('progress', (e) => {
                 this.progress = Math.trunc((e.loaded / e.total) * 100);
             });
             request.withCredentials = true;
             this.fileMD5(this.file)
                 .then((md5) => {
-                    formData.append("MD5", (md5 as string));
-                    formData.append("firmware", this.file, "firmware");
-                    request.open("post", "/api/firmware/update");
+                    formData.append('MD5', md5 as string);
+                    formData.append('firmware', this.file, 'firmware');
+                    request.open('post', '/api/firmware/update');
                     authHeader().forEach((value, key) => {
                         request.setRequestHeader(key, value);
                     });
                     request.send(formData);
                 })
                 .catch(() => {
-                    this.OTAError =
-                        "Unknown error while upload, check the console for details.";
+                    this.OTAError = 'Unknown error while upload, check the console for details.';
                     this.uploading = false;
                     this.progress = 0;
                 });
         },
         retryOTA() {
-            this.OTAError = "";
+            this.OTAError = '';
             this.OTASuccess = false;
             this.uploadOTA(null);
         },
         clear() {
-            this.OTAError = "";
+            this.OTAError = '';
             this.OTASuccess = false;
         },
         checkRemoteHostAndReload(): void {
             // Check if the browser is online
             if (navigator.onLine) {
-                const remoteHostUrl = "/api/system/status";
+                const remoteHostUrl = '/api/system/status';
 
                 // Use a simple fetch request to check if the remote host is reachable
                 fetch(remoteHostUrl, { method: 'GET' })
-                    .then(response => {
+                    .then((response) => {
                         // Check if the response status is OK (200-299 range)
                         if (response.ok) {
                             console.log('Remote host is available. Reloading page...');
                             clearInterval(this.hostCheckInterval);
                             this.hostCheckInterval = 0;
                             // Perform a page reload
-                            window.location.replace("/");
+                            window.location.replace('/');
                         } else {
                             console.log('Remote host is not reachable. Do something else if needed.');
                         }
                     })
-                    .catch(error => {
+                    .catch((error) => {
                         console.error('Error checking remote host:', error);
                     });
             } else {
@@ -214,12 +222,15 @@ export default defineComponent({
     },
     mounted() {
         if (!isLoggedIn()) {
-            this.$router.push({ path: "/login", query: { returnUrl: this.$router.currentRoute.value.fullPath } });
+            this.$router.push({
+                path: '/login',
+                query: { returnUrl: this.$router.currentRoute.value.fullPath },
+            });
         }
         this.loading = false;
     },
     unmounted() {
         clearInterval(this.hostCheckInterval);
-    }
+    },
 });
 </script>

webapp/src/views/HomeView.vue

@@ -1,18 +1,36 @@
 <template>
-    <BasePage :title="$t('home.LiveData')" :isLoading="dataLoading" :isWideScreen="true" :showWebSocket="true" :isWebsocketConnected="isWebsocketConnected" @reload="reloadData">
+    <BasePage
+        :title="$t('home.LiveData')"
+        :isLoading="dataLoading"
+        :isWideScreen="true"
+        :showWebSocket="true"
+        :isWebsocketConnected="isWebsocketConnected"
+        @reload="reloadData"
+    >
         <HintView :hints="liveData.hints" />
         <InverterTotalInfo :totalData="liveData.total" /><br />
         <div class="row gy-3">
-            <div class="col-sm-3 col-md-2" :style="[inverterData.length == 1 ? { 'display': 'none' } : {}]">
+            <div class="col-sm-3 col-md-2" :style="[inverterData.length == 1 ? { display: 'none' } : {}]">
                 <div class="nav nav-pills row-cols-sm-1" id="v-pills-tab" role="tablist" aria-orientation="vertical">
-                    <button v-for="inverter in inverterData" :key="inverter.serial" class="nav-link border border-primary text-break"
-                        :id="'v-pills-' + inverter.serial + '-tab'" data-bs-toggle="pill"
-                        :data-bs-target="'#v-pills-' + inverter.serial" type="button" role="tab"
-                        aria-controls="'v-pills-' + inverter.serial" aria-selected="true">
+                    <button
+                        v-for="inverter in inverterData"
+                        :key="inverter.serial"
+                        class="nav-link border border-primary text-break"
+                        :id="'v-pills-' + inverter.serial + '-tab'"
+                        data-bs-toggle="pill"
+                        :data-bs-target="'#v-pills-' + inverter.serial"
+                        type="button"
+                        role="tab"
+                        aria-controls="'v-pills-' + inverter.serial"
+                        aria-selected="true"
+                    >
                         <div class="row">
                             <div class="col-auto col-sm-2">
                                 <BIconXCircleFill class="fs-4" v-if="!inverter.reachable" />
-                                <BIconExclamationCircleFill class="fs-4" v-if="inverter.reachable && !inverter.producing" />
+                                <BIconExclamationCircleFill
+                                    class="fs-4"
+                                    v-if="inverter.reachable && !inverter.producing"
+                                />
                                 <BIconCheckCircleFill class="fs-4" v-if="inverter.reachable && inverter.producing" />
                             </div>
                             <div class="col-sm-9">
@@ -23,36 +41,50 @@
                 </div>
             </div>
 
-            <div class="tab-content" id="v-pills-tabContent" :class="{
-                'col-sm-9 col-md-10': inverterData.length > 1,
-                'col-sm-12 col-md-12': inverterData.length == 1
-            }">
-                <div v-for="inverter in inverterData" :key="inverter.serial" class="tab-pane fade show"
-                    :id="'v-pills-' + inverter.serial" role="tabpanel"
-                    :aria-labelledby="'v-pills-' + inverter.serial + '-tab'" tabindex="0">
+            <div
+                class="tab-content"
+                id="v-pills-tabContent"
+                :class="{
+                    'col-sm-9 col-md-10': inverterData.length > 1,
+                    'col-sm-12 col-md-12': inverterData.length == 1,
+                }"
+            >
+                <div
+                    v-for="inverter in inverterData"
+                    :key="inverter.serial"
+                    class="tab-pane fade show"
+                    :id="'v-pills-' + inverter.serial"
+                    role="tabpanel"
+                    :aria-labelledby="'v-pills-' + inverter.serial + '-tab'"
+                    tabindex="0"
+                >
                     <div class="card">
-                        <div class="card-header d-flex justify-content-between align-items-center"
+                        <div
+                            class="card-header d-flex justify-content-between align-items-center"
                             :class="{
                                 'text-bg-tertiary': !inverter.poll_enabled,
                                 'text-bg-danger': inverter.poll_enabled && !inverter.reachable,
                                 'text-bg-warning': inverter.poll_enabled && inverter.reachable && !inverter.producing,
                                 'text-bg-primary': inverter.poll_enabled && inverter.reachable && inverter.producing,
-                            }">
+                            }"
+                        >
                             <div class="p-1 flex-grow-1">
                                 <div class="d-flex flex-wrap">
-                                    <div style="padding-right: 2em;">
+                                    <div style="padding-right: 2em">
                                         {{ inverter.name }}
                                     </div>
-                                    <div style="padding-right: 2em;">
+                                    <div style="padding-right: 2em">
                                         {{ $t('home.SerialNumber') }}{{ inverter.serial }}
                                     </div>
-                                    <div style="padding-right: 2em;">
-                                        {{ $t('home.CurrentLimit') }}<template v-if="inverter.limit_absolute > -1"> {{
-                                                $n(inverter.limit_absolute, 'decimalNoDigits')
-                                        }} W | </template>{{ $n(inverter.limit_relative / 100, 'percent') }}
+                                    <div style="padding-right: 2em">
+                                        {{ $t('home.CurrentLimit')
+                                        }}<template v-if="inverter.limit_absolute > -1">
+                                            {{ $n(inverter.limit_absolute, 'decimalNoDigits') }} W | </template
+                                        >{{ $n(inverter.limit_relative / 100, 'percent') }}
                                     </div>
-                                    <div style="padding-right: 2em;">
-                                        {{ $t('home.DataAge') }} {{ $t('home.Seconds', {'val': $n(inverter.data_age) }) }}
+                                    <div style="padding-right: 2em">
+                                        {{ $t('home.DataAge') }}
+                                        {{ $t('home.Seconds', { val: $n(inverter.data_age) }) }}
                                         <template v-if="inverter.data_age > 300">
                                             / {{ calculateAbsoluteTime(inverter.data_age) }}
                                         </template>
@@ -61,44 +93,68 @@
                             </div>
                             <div class="btn-toolbar p-2" role="toolbar">
                                 <div class="btn-group me-2" role="group">
-                                    <button :disabled="!isLogged" type="button" class="btn btn-sm btn-danger"
-                                        @click="onShowLimitSettings(inverter.serial)" v-tooltip :title="$t('home.ShowSetInverterLimit')">
-                                        <BIconSpeedometer style="font-size:24px;" />
-
+                                    <button
+                                        :disabled="!isLogged"
+                                        type="button"
+                                        class="btn btn-sm btn-danger"
+                                        @click="onShowLimitSettings(inverter.serial)"
+                                        v-tooltip
+                                        :title="$t('home.ShowSetInverterLimit')"
+                                    >
+                                        <BIconSpeedometer style="font-size: 24px" />
                                     </button>
                                 </div>
 
                                 <div class="btn-group me-2" role="group">
-                                    <button :disabled="!isLogged" type="button" class="btn btn-sm btn-danger"
-                                        @click="onShowPowerSettings(inverter.serial)" v-tooltip :title="$t('home.TurnOnOff')">
-                                        <BIconPower style="font-size:24px;" />
-
+                                    <button
+                                        :disabled="!isLogged"
+                                        type="button"
+                                        class="btn btn-sm btn-danger"
+                                        @click="onShowPowerSettings(inverter.serial)"
+                                        v-tooltip
+                                        :title="$t('home.TurnOnOff')"
+                                    >
+                                        <BIconPower style="font-size: 24px" />
                                     </button>
                                 </div>
 
                                 <div class="btn-group me-2" role="group">
-                                    <button type="button" class="btn btn-sm btn-info"
-                                        @click="onShowDevInfo(inverter.serial)" v-tooltip :title="$t('home.ShowInverterInfo')">
-                                        <BIconCpu style="font-size:24px;" />
-
+                                    <button
+                                        type="button"
+                                        class="btn btn-sm btn-info"
+                                        @click="onShowDevInfo(inverter.serial)"
+                                        v-tooltip
+                                        :title="$t('home.ShowInverterInfo')"
+                                    >
+                                        <BIconCpu style="font-size: 24px" />
                                     </button>
                                 </div>
 
                                 <div class="btn-group me-2" role="group">
-                                    <button type="button" class="btn btn-sm btn-info"
-                                        @click="onShowGridProfile(inverter.serial)" v-tooltip :title="$t('home.ShowGridProfile')">
-                                        <BIconOutlet style="font-size:24px;" />
-
+                                    <button
+                                        type="button"
+                                        class="btn btn-sm btn-info"
+                                        @click="onShowGridProfile(inverter.serial)"
+                                        v-tooltip
+                                        :title="$t('home.ShowGridProfile')"
+                                    >
+                                        <BIconOutlet style="font-size: 24px" />
                                     </button>
                                 </div>
 
                                 <div class="btn-group" role="group">
-                                    <button v-if="inverter.events >= 0" type="button"
+                                    <button
+                                        v-if="inverter.events >= 0"
+                                        type="button"
                                         class="btn btn-sm btn-secondary position-relative"
-                                        @click="onShowEventlog(inverter.serial)" v-tooltip :title="$t('home.ShowEventlog')">
-                                        <BIconJournalText style="font-size:24px;" />
+                                        @click="onShowEventlog(inverter.serial)"
+                                        v-tooltip
+                                        :title="$t('home.ShowEventlog')"
+                                    >
+                                        <BIconJournalText style="font-size: 24px" />
                                         <span
-                                            class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">
+                                            class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger"
+                                        >
                                             {{ inverter.events }}
                                             <span class="visually-hidden">{{ $t('home.UnreadMessages') }}</span>
                                         </span>
@@ -108,17 +164,37 @@
                         </div>
                         <div class="card-body">
                             <div class="row flex-row-reverse flex-wrap-reverse g-3">
-                                <template v-for="chanType in [{obj: inverter.INV, name: 'INV'}, {obj: inverter.AC, name: 'AC'}, {obj: inverter.DC, name: 'DC'}].reverse()">
+                                <template
+                                    v-for="chanType in [
+                                        { obj: inverter.INV, name: 'INV' },
+                                        { obj: inverter.AC, name: 'AC' },
+                                        { obj: inverter.DC, name: 'DC' },
+                                    ].reverse()"
+                                >
                                     <template v-if="chanType.obj != null">
-                                        <template v-for="channel in Object.keys(chanType.obj).sort().reverse().map(x=>+x)" :key="channel">
-                                            <template v-if="(chanType.name != 'DC') ||
-                                                (chanType.name == 'DC' && getSumIrridiation(inverter) == 0) ||
-                                                (chanType.name == 'DC' && getSumIrridiation(inverter) > 0 && chanType.obj[channel].Irradiation?.max || 0 > 0)
-                                                ">
+                                        <template
+                                            v-for="channel in Object.keys(chanType.obj)
+                                                .sort()
+                                                .reverse()
+                                                .map((x) => +x)"
+                                            :key="channel"
+                                        >
+                                            <template
+                                                v-if="
+                                                    chanType.name != 'DC' ||
+                                                    (chanType.name == 'DC' && getSumIrridiation(inverter) == 0) ||
+                                                    (chanType.name == 'DC' &&
+                                                        getSumIrridiation(inverter) > 0 &&
+                                                        chanType.obj[channel].Irradiation?.max) ||
+                                                    0 > 0
+                                                "
+                                            >
                                                 <div class="col">
-                                                    <InverterChannelInfo :channelData="chanType.obj[channel]"
+                                                    <InverterChannelInfo
+                                                        :channelData="chanType.obj[channel]"
                                                         :channelType="chanType.name"
-                                                        :channelNumber="channel" />
+                                                        :channelNumber="channel"
+                                                    />
                                                 </div>
                                             </template>
                                         </template>
@@ -158,20 +234,31 @@
         </BootstrapAlert>
 
         <div class="row mb-3">
-            <label for="inputCurrentLimit" class="col-sm-3 col-form-label">{{ $t('home.CurrentLimit') }}
-            </label>
+            <label for="inputCurrentLimit" class="col-sm-3 col-form-label">{{ $t('home.CurrentLimit') }} </label>
             <div class="col-sm-4">
                 <div class="input-group">
-                    <input type="text" class="form-control" id="inputCurrentLimit" aria-describedby="currentLimitType"
-                        v-model="currentLimitRelative" disabled />
+                    <input
+                        type="text"
+                        class="form-control"
+                        id="inputCurrentLimit"
+                        aria-describedby="currentLimitType"
+                        v-model="currentLimitRelative"
+                        disabled
+                    />
                     <span class="input-group-text" id="currentLimitType">%</span>
                 </div>
             </div>
 
             <div class="col-sm-4" v-if="currentLimitList.max_power > 0">
                 <div class="input-group">
-                    <input type="text" class="form-control" id="inputCurrentLimitAbsolute"
-                        aria-describedby="currentLimitTypeAbsolute" v-model="currentLimitAbsolute" disabled />
+                    <input
+                        type="text"
+                        class="form-control"
+                        id="inputCurrentLimitAbsolute"
+                        aria-describedby="currentLimitTypeAbsolute"
+                        v-model="currentLimitAbsolute"
+                        disabled
+                    />
                     <span class="input-group-text" id="currentLimitTypeAbsolute">W</span>
                 </div>
             </div>
@@ -182,45 +269,67 @@
                 {{ $t('home.LastLimitSetStatus') }}
             </label>
             <div class="col-sm-9">
-                <span class="badge" :class="{
-                    'text-bg-danger': currentLimitList.limit_set_status == 'Failure',
-                    'text-bg-warning': currentLimitList.limit_set_status == 'Pending',
-                    'text-bg-success': currentLimitList.limit_set_status == 'Ok',
-                    'text-bg-secondary': currentLimitList.limit_set_status == 'Unknown',
-                }">
+                <span
+                    class="badge"
+                    :class="{
+                        'text-bg-danger': currentLimitList.limit_set_status == 'Failure',
+                        'text-bg-warning': currentLimitList.limit_set_status == 'Pending',
+                        'text-bg-success': currentLimitList.limit_set_status == 'Ok',
+                        'text-bg-secondary': currentLimitList.limit_set_status == 'Unknown',
+                    }"
+                >
                     {{ $t('home.' + currentLimitList.limit_set_status) }}
                 </span>
             </div>
         </div>
 
         <div class="row mb-3">
-            <label for="inputTargetLimit" class="col-sm-3 col-form-label">{{ $t('home.SetLimit')
-            }}</label>
+            <label for="inputTargetLimit" class="col-sm-3 col-form-label">{{ $t('home.SetLimit') }}</label>
             <div class="col-sm-9">
                 <div class="input-group">
-                    <input type="number" name="inputTargetLimit" class="form-control" id="inputTargetLimit"
-                        :min="targetLimitMin" :max="targetLimitMax" v-model="targetLimitList.limit_value">
-                    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
-                        aria-expanded="false">{{ targetLimitTypeText
-                        }}</button>
+                    <input
+                        type="number"
+                        name="inputTargetLimit"
+                        class="form-control"
+                        id="inputTargetLimit"
+                        :min="targetLimitMin"
+                        :max="targetLimitMax"
+                        v-model="targetLimitList.limit_value"
+                    />
+                    <button
+                        class="btn btn-primary dropdown-toggle"
+                        type="button"
+                        data-bs-toggle="dropdown"
+                        aria-expanded="false"
+                    >
+                        {{ targetLimitTypeText }}
+                    </button>
                     <ul class="dropdown-menu dropdown-menu-end">
-                        <li><a class="dropdown-item" @click="onSelectType(1)" href="#">{{
-                            $t('home.Relative') }}</a></li>
-                        <li><a class="dropdown-item" @click="onSelectType(0)" href="#">{{
-                            $t('home.Absolute') }}</a></li>
+                        <li>
+                            <a class="dropdown-item" @click="onSelectType(1)" href="#">{{ $t('home.Relative') }}</a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" @click="onSelectType(0)" href="#">{{ $t('home.Absolute') }}</a>
+                        </li>
                     </ul>
                 </div>
-                <div v-if="targetLimitType == 0" class="alert alert-secondary mt-3" role="alert"
-                    v-html="$t('home.LimitHint')"></div>
+                <div
+                    v-if="targetLimitType == 0"
+                    class="alert alert-secondary mt-3"
+                    role="alert"
+                    v-html="$t('home.LimitHint')"
+                ></div>
             </div>
         </div>
 
         <template #footer>
-            <button type="button" class="btn btn-danger" @click="onSetLimitSettings(true)">{{
-                $t('home.SetPersistent') }}</button>
+            <button type="button" class="btn btn-danger" @click="onSetLimitSettings(true)">
+                {{ $t('home.SetPersistent') }}
+            </button>
 
-            <button type="button" class="btn btn-danger" @click="onSetLimitSettings(false)">{{
-                $t('home.SetNonPersistent') }}</button>
+            <button type="button" class="btn btn-danger" @click="onSetLimitSettings(false)">
+                {{ $t('home.SetNonPersistent') }}
+            </button>
         </template>
     </ModalDialog>
 
@@ -230,15 +339,17 @@
         </BootstrapAlert>
 
         <div class="row mb-3 align-items-center">
-            <label for="inputLastPowerSet" class="col col-form-label">{{ $t('home.LastPowerSetStatus')
-            }}</label>
+            <label for="inputLastPowerSet" class="col col-form-label">{{ $t('home.LastPowerSetStatus') }}</label>
             <div class="col">
-                <span class="badge" :class="{
+                <span
+                    class="badge"
+                    :class="{
                         'text-bg-danger': successCommandPower == 'Failure',
                         'text-bg-warning': successCommandPower == 'Pending',
                         'text-bg-success': successCommandPower == 'Ok',
                         'text-bg-secondary': successCommandPower == 'Unknown',
-                    }">
+                    }"
+                >
                     {{ $t('home.' + successCommandPower) }}
                 </span>
             </div>
@@ -265,7 +376,7 @@ import DevInfo from '@/components/DevInfo.vue';
 import EventLog from '@/components/EventLog.vue';
 import GridProfile from '@/components/GridProfile.vue';
 import HintView from '@/components/HintView.vue';
-import InverterChannelInfo from "@/components/InverterChannelInfo.vue";
+import InverterChannelInfo from '@/components/InverterChannelInfo.vue';
 import InverterTotalInfo from '@/components/InverterTotalInfo.vue';
 import ModalDialog from '@/components/ModalDialog.vue';
 import type { DevInfoStatus } from '@/types/DevInfoStatus';
@@ -288,7 +399,7 @@ import {
     BIconSpeedometer,
     BIconToggleOff,
     BIconToggleOn,
-    BIconXCircleFill
+    BIconXCircleFill,
 } from 'bootstrap-icons-vue';
 import { defineComponent } from 'vue';
 
@@ -347,17 +458,17 @@ export default defineComponent({
             targetLimitTypeText: this.$t('home.Relative'),
             targetLimitType: 1,
 
-            alertMessageLimit: "",
-            alertTypeLimit: "info",
+            alertMessageLimit: '',
+            alertTypeLimit: 'info',
             showAlertLimit: false,
 
             powerSettingView: {} as bootstrap.Modal,
-            powerSettingSerial: "",
+            powerSettingSerial: '',
             powerSettingLoading: true,
-            alertMessagePower: "",
-            alertTypePower: "info",
+            alertMessagePower: '',
+            alertTypePower: 'info',
             showAlertPower: false,
-            successCommandPower: "",
+            successCommandPower: '',
 
             isWebsocketConnected: false,
         };
@@ -366,10 +477,10 @@ export default defineComponent({
         this.getInitialData();
         this.initSocket();
         this.initDataAgeing();
-        this.$emitter.on("logged-in", () => {
+        this.$emitter.on('logged-in', () => {
             this.isLogged = this.isLoggedIn();
         });
-        this.$emitter.on("logged-out", () => {
+        this.$emitter.on('logged-out', () => {
             this.isLogged = this.isLoggedIn();
         });
     },
@@ -384,19 +495,17 @@ export default defineComponent({
         this.closeSocket();
     },
     updated() {
-        console.log("Updated");
+        console.log('Updated');
         // Select first tab
         if (this.isFirstFetchAfterConnect) {
-            console.log("isFirstFetchAfterConnect");
+            console.log('isFirstFetchAfterConnect');
 
             this.$nextTick(() => {
-                console.log("nextTick");
-                const firstTabEl = document.querySelector(
-                    "#v-pills-tab:first-child button"
-                );
+                console.log('nextTick');
+                const firstTabEl = document.querySelector('#v-pills-tab:first-child button');
                 if (firstTabEl != null) {
                     this.isFirstFetchAfterConnect = false;
-                    console.log("Show");
+                    console.log('Show');
                     const firstTab = new bootstrap.Tab(firstTabEl);
                     firstTab.show();
                 }
@@ -406,20 +515,21 @@ export default defineComponent({
     computed: {
         currentLimitAbsolute(): string {
             if (this.currentLimitList.max_power > 0) {
-                return this.$n(this.currentLimitList.limit_relative * this.currentLimitList.max_power / 100,
-                    'decimalTwoDigits');
+                return this.$n(
+                    (this.currentLimitList.limit_relative * this.currentLimitList.max_power) / 100,
+                    'decimalTwoDigits'
+                );
             }
-            return "0";
+            return '0';
         },
         currentLimitRelative(): string {
-            return this.$n(this.currentLimitList.limit_relative,
-                'decimalTwoDigits');
+            return this.$n(this.currentLimitList.limit_relative, 'decimalTwoDigits');
         },
         inverterData(): Inverter[] {
             return this.liveData.inverters.slice().sort((a: Inverter, b: Inverter) => {
                 return a.order - b.order;
             });
-        }
+        },
     },
     methods: {
         isLoggedIn,
@@ -427,7 +537,7 @@ export default defineComponent({
             if (triggerLoading) {
                 this.dataLoading = true;
             }
-            fetch("/api/livedata/status", { headers: authHeader() })
+            fetch('/api/livedata/status', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.liveData = data;
@@ -445,23 +555,24 @@ export default defineComponent({
             }, 1000);
         },
         initSocket() {
-            console.log("Starting connection to WebSocket Server");
+            console.log('Starting connection to WebSocket Server');
 
             const { protocol, host } = location;
             const authString = authUrl();
-            const webSocketUrl = `${protocol === "https:" ? "wss" : "ws"
-                }://${authString}${host}/livedata`;
+            const webSocketUrl = `${protocol === 'https:' ? 'wss' : 'ws'}://${authString}${host}/livedata`;
 
             this.socket = new WebSocket(webSocketUrl);
 
             this.socket.onmessage = (event) => {
                 console.log(event);
-                if (event.data != "{}") {
+                if (event.data != '{}') {
                     const newData = JSON.parse(event.data);
                     Object.assign(this.liveData.total, newData.total);
                     Object.assign(this.liveData.hints, newData.hints);
 
-                    const foundIdx = this.liveData.inverters.findIndex((element) => element.serial == newData.inverters[0].serial);
+                    const foundIdx = this.liveData.inverters.findIndex(
+                        (element) => element.serial == newData.inverters[0].serial
+                    );
                     if (foundIdx == -1) {
                         Object.assign(this.liveData.inverters, newData.inverters);
                     } else {
@@ -478,14 +589,14 @@ export default defineComponent({
 
             this.socket.onopen = (event) => {
                 console.log(event);
-                console.log("Successfully connected to the echo websocket server...");
+                console.log('Successfully connected to the echo websocket server...');
                 this.isWebsocketConnected = true;
             };
 
             this.socket.onclose = () => {
-                console.log("Connection to websocket closed...")
+                console.log('Connection to websocket closed...');
                 this.isWebsocketConnected = false;
-            }
+            };
 
             // Listen to window events , When the window closes , Take the initiative to disconnect websocket Connect
             window.onbeforeunload = () => {
@@ -495,7 +606,7 @@ export default defineComponent({
         initDataAgeing() {
             this.dataAgeInterval = setInterval(() => {
                 if (this.inverterData) {
-                    this.inverterData.forEach(element => {
+                    this.inverterData.forEach((element) => {
                         element.data_age++;
                     });
                 }
@@ -507,7 +618,7 @@ export default defineComponent({
             this.heartInterval = setInterval(() => {
                 if (this.socket.readyState === 1) {
                     // Connection status
-                    this.socket.send("ping");
+                    this.socket.send('ping');
                 } else {
                     this.initSocket(); // Breakpoint reconnection 5 Time
                 }
@@ -521,7 +632,9 @@ export default defineComponent({
         },
         onShowEventlog(serial: string) {
             this.eventLogLoading = true;
-            fetch("/api/eventlog/status?inv=" + serial + "&locale=" + this.$i18n.locale, { headers: authHeader() })
+            fetch('/api/eventlog/status?inv=' + serial + '&locale=' + this.$i18n.locale, {
+                headers: authHeader(),
+            })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.eventLogList = data;
@@ -532,7 +645,7 @@ export default defineComponent({
         },
         onShowDevInfo(serial: string) {
             this.devInfoLoading = true;
-            fetch("/api/devinfo/status?inv=" + serial, { headers: authHeader() })
+            fetch('/api/devinfo/status?inv=' + serial, { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.devInfoList = data;
@@ -544,30 +657,30 @@ export default defineComponent({
         },
         onShowGridProfile(serial: string) {
             this.gridProfileLoading = true;
-            fetch("/api/gridprofile/status?inv=" + serial, { headers: authHeader() })
+            fetch('/api/gridprofile/status?inv=' + serial, { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.gridProfileList = data;
 
-                    fetch("/api/gridprofile/rawdata?inv=" + serial, { headers: authHeader() })
+                    fetch('/api/gridprofile/rawdata?inv=' + serial, { headers: authHeader() })
                         .then((response) => handleResponse(response, this.$emitter, this.$router))
                         .then((data) => {
                             this.gridProfileRawList = data;
                             this.gridProfileLoading = false;
-                        })
+                        });
                 });
 
             this.gridProfileView.show();
         },
         onShowLimitSettings(serial: string) {
             this.showAlertLimit = false;
-            this.targetLimitList.serial = "";
+            this.targetLimitList.serial = '';
             this.targetLimitList.limit_value = 0;
             this.targetLimitType = 1;
             this.targetLimitTypeText = this.$t('home.Relative');
 
             this.limitSettingLoading = true;
-            fetch("/api/limit/status", { headers: authHeader() })
+            fetch('/api/limit/status', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.currentLimitList = data[serial];
@@ -578,29 +691,27 @@ export default defineComponent({
             this.limitSettingView.show();
         },
         onSetLimitSettings(setPersistent: boolean) {
-            this.targetLimitList.limit_type = (setPersistent ? 256 : 0) + this.targetLimitType
+            this.targetLimitList.limit_type = (setPersistent ? 256 : 0) + this.targetLimitType;
             const formData = new FormData();
-            formData.append("data", JSON.stringify(this.targetLimitList));
+            formData.append('data', JSON.stringify(this.targetLimitList));
 
             console.log(this.targetLimitList);
 
-            fetch("/api/limit/config", {
-                method: "POST",
+            fetch('/api/limit/config', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (response) => {
-                        if (response.type == "success") {
-                            this.limitSettingView.hide();
-                        } else {
-                            this.alertMessageLimit = this.$t('apiresponse.' + response.code, response.param);
-                            this.alertTypeLimit = response.type;
-                            this.showAlertLimit = true;
-                        }
+                .then((response) => {
+                    if (response.type == 'success') {
+                        this.limitSettingView.hide();
+                    } else {
+                        this.alertMessageLimit = this.$t('apiresponse.' + response.code, response.param);
+                        this.alertTypeLimit = response.type;
+                        this.showAlertLimit = true;
                     }
-                )
+                });
         },
         onSelectType(type: number) {
             if (type == 1) {
@@ -610,16 +721,16 @@ export default defineComponent({
             } else {
                 this.targetLimitTypeText = this.$t('home.Absolute');
                 this.targetLimitMin = 0;
-                this.targetLimitMax = (this.currentLimitList.max_power > 0 ? this.currentLimitList.max_power : 2250);
+                this.targetLimitMax = this.currentLimitList.max_power > 0 ? this.currentLimitList.max_power : 2250;
             }
             this.targetLimitType = type;
         },
 
         onShowPowerSettings(serial: string) {
             this.showAlertPower = false;
-            this.powerSettingSerial = "";
+            this.powerSettingSerial = '';
             this.powerSettingLoading = true;
-            fetch("/api/power/status", { headers: authHeader() })
+            fetch('/api/power/status', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.successCommandPower = data[serial].power_set_status;
@@ -644,27 +755,25 @@ export default defineComponent({
             }
 
             const formData = new FormData();
-            formData.append("data", JSON.stringify(data));
+            formData.append('data', JSON.stringify(data));
 
             console.log(data);
 
-            fetch("/api/power/config", {
-                method: "POST",
+            fetch('/api/power/config', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (response) => {
-                        if (response.type == "success") {
-                            this.powerSettingView.hide();
-                        } else {
-                            this.alertMessagePower = this.$t('apiresponse.' + response.code, response.param);
-                            this.alertTypePower = response.type;
-                            this.showAlertPower = true;
-                        }
+                .then((response) => {
+                    if (response.type == 'success') {
+                        this.powerSettingView.hide();
+                    } else {
+                        this.alertMessagePower = this.$t('apiresponse.' + response.code, response.param);
+                        this.alertTypePower = response.type;
+                        this.showAlertPower = true;
                     }
-                )
+                });
         },
         calculateAbsoluteTime(lastTime: number): string {
             const date = new Date(Date.now() - lastTime * 1000);
@@ -676,7 +785,7 @@ export default defineComponent({
                 total += inv.DC[key as unknown as number].Irradiation?.max || 0;
             });
             return total;
-        }
+        },
     },
 });
 </script>

webapp/src/views/InverterAdminView.vue

@@ -12,11 +12,18 @@
                 </div>
                 <div class="form-group">
                     <label>{{ $t('inverteradmin.Name') }}</label>
-                    <input v-model="newInverterData.name" type="text" class="form-control ml-sm-2 mr-sm-4 my-2"
-                        maxlength="31" required />
+                    <input
+                        v-model="newInverterData.name"
+                        type="text"
+                        class="form-control ml-sm-2 mr-sm-4 my-2"
+                        maxlength="31"
+                        required
+                    />
                 </div>
                 <div class="ml-auto text-right">
-                    <button type="submit" class="btn btn-primary my-2">{{ $t('inverteradmin.Add') }}</button>
+                    <button type="submit" class="btn btn-primary my-2">
+                        {{ $t('inverteradmin.Add') }}
+                    </button>
                 </div>
                 <div class="alert alert-secondary" role="alert" v-html="$t('inverteradmin.AddHint')"></div>
             </form>
@@ -39,23 +46,33 @@
                         <tr v-for="inverter in inverters" v-bind:key="inverter.id" :data-id="inverter.id">
                             <td><BIconGripHorizontal class="drag-handle" /></td>
                             <td>
-                                <span class="badge" :title="$t('inverteradmin.Receive')" :class="{
-                                    'text-bg-warning': !inverter.poll_enable_night,
-                                    'text-bg-dark': inverter.poll_enable_night,}"
-                                    ><BIconArrowDown v-if="inverter.poll_enable"  /></span>
+                                <span
+                                    class="badge"
+                                    :title="$t('inverteradmin.Receive')"
+                                    :class="{
+                                        'text-bg-warning': !inverter.poll_enable_night,
+                                        'text-bg-dark': inverter.poll_enable_night,
+                                    }"
+                                    ><BIconArrowDown v-if="inverter.poll_enable"
+                                /></span>
 
-                                <span class="badge" :title="$t('inverteradmin.Send')" :class="{
-                                    'text-bg-warning': !inverter.command_enable_night,
-                                    'text-bg-dark': inverter.command_enable_night,}"
-                                    ><BIconArrowUp v-if="inverter.command_enable" /></span>
+                                <span
+                                    class="badge"
+                                    :title="$t('inverteradmin.Send')"
+                                    :class="{
+                                        'text-bg-warning': !inverter.command_enable_night,
+                                        'text-bg-dark': inverter.command_enable_night,
+                                    }"
+                                    ><BIconArrowUp v-if="inverter.command_enable"
+                                /></span>
                             </td>
                             <td>{{ inverter.serial }}</td>
                             <td>{{ inverter.name }}</td>
                             <td>{{ inverter.type }}</td>
                             <td>
                                 <a href="#" class="icon text-danger" :title="$t('inverteradmin.DeleteInverter')">
-                                    <BIconTrash v-on:click="onOpenModal(modalDelete, inverter)" />
-                                </a>&nbsp;
+                                    <BIconTrash v-on:click="onOpenModal(modalDelete, inverter)" /> </a
+                                >&nbsp;
                                 <a href="#" class="icon" :title="$t('inverteradmin.EditInverter')">
                                     <BIconPencil v-on:click="onOpenModal(modal, inverter)" />
                                 </a>
@@ -65,54 +82,122 @@
                 </table>
             </div>
             <div class="ml-auto text-right">
-                <button class="btn btn-primary my-2" @click="onSaveOrder()">{{ $t('inverteradmin.SaveOrder') }}</button>
+                <button class="btn btn-primary my-2" @click="onSaveOrder()">
+                    {{ $t('inverteradmin.SaveOrder') }}
+                </button>
             </div>
         </CardElement>
     </BasePage>
 
-    <ModalDialog modalId="inverterEdit" :title="$t('inverteradmin.EditInverter')" :closeText="$t('inverteradmin.Cancel')">
+    <ModalDialog
+        modalId="inverterEdit"
+        :title="$t('inverteradmin.EditInverter')"
+        :closeText="$t('inverteradmin.Cancel')"
+    >
         <nav>
             <div class="nav nav-tabs" id="nav-tab" role="tablist">
-                <button class="nav-link active" id="nav-general-tab" data-bs-toggle="tab" data-bs-target="#nav-general"
-                    type="button" role="tab" aria-controls="nav-general" aria-selected="true">{{
-                        $t('inverteradmin.General')
-                    }}</button>
-                <button class="nav-link" id="nav-string-tab" data-bs-toggle="tab" data-bs-target="#nav-string" type="button"
-                    role="tab" aria-controls="nav-string">{{ $t('inverteradmin.String') }}</button>
-                <button class="nav-link" id="nav-advanced-tab" data-bs-toggle="tab" data-bs-target="#nav-advanced"
-                    type="button" role="tab" aria-controls="nav-advanced">{{ $t('inverteradmin.Advanced') }}</button>
+                <button
+                    class="nav-link active"
+                    id="nav-general-tab"
+                    data-bs-toggle="tab"
+                    data-bs-target="#nav-general"
+                    type="button"
+                    role="tab"
+                    aria-controls="nav-general"
+                    aria-selected="true"
+                >
+                    {{ $t('inverteradmin.General') }}
+                </button>
+                <button
+                    class="nav-link"
+                    id="nav-string-tab"
+                    data-bs-toggle="tab"
+                    data-bs-target="#nav-string"
+                    type="button"
+                    role="tab"
+                    aria-controls="nav-string"
+                >
+                    {{ $t('inverteradmin.String') }}
+                </button>
+                <button
+                    class="nav-link"
+                    id="nav-advanced-tab"
+                    data-bs-toggle="tab"
+                    data-bs-target="#nav-advanced"
+                    type="button"
+                    role="tab"
+                    aria-controls="nav-advanced"
+                >
+                    {{ $t('inverteradmin.Advanced') }}
+                </button>
             </div>
         </nav>
         <div class="tab-content" id="nav-tabContent">
-            <div class="tab-pane fade show active" id="nav-general" role="tabpanel" aria-labelledby="nav-general-tab"
-                tabindex="0">
+            <div
+                class="tab-pane fade show active"
+                id="nav-general"
+                role="tabpanel"
+                aria-labelledby="nav-general-tab"
+                tabindex="0"
+            >
                 <div class="mb-3">
                     <label for="inverter-serial" class="col-form-label">
                         {{ $t('inverteradmin.InverterSerial') }}
                     </label>
                     <InputSerial v-model="selectedInverterData.serial" id="inverter-serial" />
-                    <label for="inverter-name" class="col-form-label">{{ $t('inverteradmin.InverterName') }}
+                    <label for="inverter-name" class="col-form-label"
+                        >{{ $t('inverteradmin.InverterName') }}
                         <BIconInfoCircle v-tooltip :title="$t('inverteradmin.InverterNameHint')" />
                     </label>
-                    <input v-model="selectedInverterData.name" type="text" id="inverter-name" class="form-control"
-                        maxlength="31" />
+                    <input
+                        v-model="selectedInverterData.name"
+                        type="text"
+                        id="inverter-name"
+                        class="form-control"
+                        maxlength="31"
+                    />
 
                     <CardElement :text="$t('inverteradmin.InverterStatus')" addSpace>
-                        <InputElement :label="$t('inverteradmin.PollEnable')" v-model="selectedInverterData.poll_enable"
-                            type="checkbox" wide />
-                        <InputElement :label="$t('inverteradmin.PollEnableNight')"
-                            v-model="selectedInverterData.poll_enable_night" type="checkbox" wide />
-                        <InputElement :label="$t('inverteradmin.CommandEnable')"
-                            v-model="selectedInverterData.command_enable" type="checkbox" wide />
-                        <InputElement :label="$t('inverteradmin.CommandEnableNight')"
-                            v-model="selectedInverterData.command_enable_night" type="checkbox" wide />
-                        <div class="alert alert-secondary mt-3" role="alert" v-html="$t('inverteradmin.StatusHint')">
-                        </div>
+                        <InputElement
+                            :label="$t('inverteradmin.PollEnable')"
+                            v-model="selectedInverterData.poll_enable"
+                            type="checkbox"
+                            wide
+                        />
+                        <InputElement
+                            :label="$t('inverteradmin.PollEnableNight')"
+                            v-model="selectedInverterData.poll_enable_night"
+                            type="checkbox"
+                            wide
+                        />
+                        <InputElement
+                            :label="$t('inverteradmin.CommandEnable')"
+                            v-model="selectedInverterData.command_enable"
+                            type="checkbox"
+                            wide
+                        />
+                        <InputElement
+                            :label="$t('inverteradmin.CommandEnableNight')"
+                            v-model="selectedInverterData.command_enable_night"
+                            type="checkbox"
+                            wide
+                        />
+                        <div
+                            class="alert alert-secondary mt-3"
+                            role="alert"
+                            v-html="$t('inverteradmin.StatusHint')"
+                        ></div>
                     </CardElement>
                 </div>
             </div>
 
-            <div class="tab-pane fade show" id="nav-string" role="tabpanel" aria-labelledby="nav-string-tab" tabindex="0">
+            <div
+                class="tab-pane fade show"
+                id="nav-string"
+                role="tabpanel"
+                aria-labelledby="nav-string-tab"
+                tabindex="0"
+            >
                 <div v-for="(ch, index) in selectedInverterData.channel" :key="`${index}`">
                     <div class="row g-2">
                         <div class="col-md">
@@ -122,8 +207,13 @@
                             </label>
                             <div class="d-flex mb-2">
                                 <div class="input-group">
-                                    <input type="text" class="form-control" :id="`inverter-name_${index}`" maxlength="31"
-                                        v-model="ch.name" />
+                                    <input
+                                        type="text"
+                                        class="form-control"
+                                        :id="`inverter-name_${index}`"
+                                        maxlength="31"
+                                        v-model="ch.name"
+                                    />
                                 </div>
                             </div>
                         </div>
@@ -136,11 +226,17 @@
                             </label>
                             <div class="d-flex mb-2">
                                 <div class="input-group">
-                                    <input type="number" class="form-control" :id="`inverter-max_${index}`" min="0"
+                                    <input
+                                        type="number"
+                                        class="form-control"
+                                        :id="`inverter-max_${index}`"
+                                        min="0"
                                         v-model="ch.max_power"
-                                        :aria-describedby="`inverter-maxDescription_${index} inverter-customizer`" />
-                                    <span class="input-group-text"
-                                        :id="`inverter-maxDescription_${index}`">W<sub>p</sub><sup>*</sup></span>
+                                        :aria-describedby="`inverter-maxDescription_${index} inverter-customizer`"
+                                    />
+                                    <span class="input-group-text" :id="`inverter-maxDescription_${index}`"
+                                        >W<sub>p</sub><sup>*</sup></span
+                                    >
                                 </div>
                             </div>
                         </div>
@@ -151,61 +247,104 @@
                             </label>
                             <div class="d-flex mb-2">
                                 <div class="input-group">
-                                    <input type="number" class="form-control" :id="`inverter-ytoffset_${index}`" min="0"
+                                    <input
+                                        type="number"
+                                        class="form-control"
+                                        :id="`inverter-ytoffset_${index}`"
+                                        min="0"
                                         v-model="ch.yield_total_offset"
-                                        :aria-describedby="`inverter-ytoffsetDescription_${index} inverter-customizer`" />
-                                    <span class="input-group-text" :id="`inverter-ytoffsetDescription_${index}`">kWh</span>
+                                        :aria-describedby="`inverter-ytoffsetDescription_${index} inverter-customizer`"
+                                    />
+                                    <span class="input-group-text" :id="`inverter-ytoffsetDescription_${index}`"
+                                        >kWh</span
+                                    >
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div :id="`inverter-customizer`" class="form-text" v-html="$t('inverteradmin.InverterHint')">
-                </div>
+                <div :id="`inverter-customizer`" class="form-text" v-html="$t('inverteradmin.InverterHint')"></div>
             </div>
 
-            <div class="tab-pane fade show" id="nav-advanced" role="tabpanel" aria-labelledby="nav-advanced-tab"
-                tabindex="0">
-                <InputElement :label="$t('inverteradmin.ReachableThreshold')"
-                    v-model="selectedInverterData.reachable_threshold" type="number" min="1" max="100"
-                    :tooltip="$t('inverteradmin.ReachableThresholdHint')" wide />
+            <div
+                class="tab-pane fade show"
+                id="nav-advanced"
+                role="tabpanel"
+                aria-labelledby="nav-advanced-tab"
+                tabindex="0"
+            >
+                <InputElement
+                    :label="$t('inverteradmin.ReachableThreshold')"
+                    v-model="selectedInverterData.reachable_threshold"
+                    type="number"
+                    min="1"
+                    max="100"
+                    :tooltip="$t('inverteradmin.ReachableThresholdHint')"
+                    wide
+                />
 
-                <InputElement :label="$t('inverteradmin.ZeroRuntime')" v-model="selectedInverterData.zero_runtime"
-                    type="checkbox" :tooltip="$t('inverteradmin.ZeroRuntimeHint')" wide />
+                <InputElement
+                    :label="$t('inverteradmin.ZeroRuntime')"
+                    v-model="selectedInverterData.zero_runtime"
+                    type="checkbox"
+                    :tooltip="$t('inverteradmin.ZeroRuntimeHint')"
+                    wide
+                />
 
-                <InputElement :label="$t('inverteradmin.ZeroDay')" v-model="selectedInverterData.zero_day" type="checkbox"
-                    :tooltip="$t('inverteradmin.ZeroDayHint')" wide />
+                <InputElement
+                    :label="$t('inverteradmin.ZeroDay')"
+                    v-model="selectedInverterData.zero_day"
+                    type="checkbox"
+                    :tooltip="$t('inverteradmin.ZeroDayHint')"
+                    wide
+                />
 
-                <InputElement :label="$t('inverteradmin.ClearEventlog')" v-model="selectedInverterData.clear_eventlog" type="checkbox" wide />
+                <InputElement
+                    :label="$t('inverteradmin.ClearEventlog')"
+                    v-model="selectedInverterData.clear_eventlog"
+                    type="checkbox"
+                    wide
+                />
 
-                <InputElement :label="$t('inverteradmin.YieldDayCorrection')"
-                    v-model="selectedInverterData.yieldday_correction" type="checkbox"
-                    :tooltip="$t('inverteradmin.YieldDayCorrectionHint')" wide />
+                <InputElement
+                    :label="$t('inverteradmin.YieldDayCorrection')"
+                    v-model="selectedInverterData.yieldday_correction"
+                    type="checkbox"
+                    :tooltip="$t('inverteradmin.YieldDayCorrectionHint')"
+                    wide
+                />
             </div>
         </div>
         <template #footer>
             <button type="button" class="btn btn-primary" @click="onEditSubmit">
-                {{ $t('inverteradmin.Save') }}</button>
+                {{ $t('inverteradmin.Save') }}
+            </button>
         </template>
     </ModalDialog>
 
-    <ModalDialog modalId="inverterDelete" small :title="$t('inverteradmin.DeleteInverter')"
-        :closeText="$t('inverteradmin.Cancel')">
-        {{ $t('inverteradmin.DeleteMsg', {
-            name: selectedInverterData.name,
-            serial: selectedInverterData.serial
-        })
+    <ModalDialog
+        modalId="inverterDelete"
+        small
+        :title="$t('inverteradmin.DeleteInverter')"
+        :closeText="$t('inverteradmin.Cancel')"
+    >
+        {{
+            $t('inverteradmin.DeleteMsg', {
+                name: selectedInverterData.name,
+                serial: selectedInverterData.serial,
+            })
         }}
         <template #footer>
             <button type="button" class="btn btn-danger" @click="onDelete">
-                {{ $t('inverteradmin.Delete') }}</button>
+                {{ $t('inverteradmin.Delete') }}
+            </button>
         </template>
     </ModalDialog>
 </template>
 
 <script lang="ts">
 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 InputElement from '@/components/InputElement.vue';
 import InputSerial from '@/components/InputSerial.vue';
@@ -268,7 +407,7 @@ export default defineComponent({
     methods: {
         getInverters() {
             this.dataLoading = true;
-            fetch("/api/inverter/list", { headers: authHeader() })
+            fetch('/api/inverter/list', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.inverters = data.inverter.slice().sort((a: Inverter, b: Inverter) => {
@@ -290,10 +429,10 @@ export default defineComponent({
         },
         callInverterApiEndpoint(endpoint: string, jsonData: string) {
             const formData = new FormData();
-            formData.append("data", jsonData);
+            formData.append('data', jsonData);
 
-            fetch("/api/inverter/" + endpoint, {
-                method: "POST",
+            fetch('/api/inverter/' + endpoint, {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
@@ -306,15 +445,15 @@ export default defineComponent({
                 });
         },
         onSubmit() {
-            this.callInverterApiEndpoint("add", JSON.stringify(this.newInverterData));
+            this.callInverterApiEndpoint('add', JSON.stringify(this.newInverterData));
             this.newInverterData = {} as Inverter;
         },
         onDelete() {
-            this.callInverterApiEndpoint("del", JSON.stringify({ id: this.selectedInverterData.id }));
+            this.callInverterApiEndpoint('del', JSON.stringify({ id: this.selectedInverterData.id }));
             this.onCloseModal(this.modalDelete);
         },
         onEditSubmit() {
-            this.callInverterApiEndpoint("edit", JSON.stringify(this.selectedInverterData));
+            this.callInverterApiEndpoint('edit', JSON.stringify(this.selectedInverterData));
             this.onCloseModal(this.modal);
         },
         onOpenModal(modal: bootstrap.Modal, inverter: Inverter) {
@@ -326,7 +465,7 @@ export default defineComponent({
             modal.hide();
         },
         onSaveOrder() {
-            this.callInverterApiEndpoint("order", JSON.stringify({ order: this.sortable.toArray() }));
+            this.callInverterApiEndpoint('order', JSON.stringify({ order: this.sortable.toArray() }));
         },
     },
 });

webapp/src/views/LoginView.vue

@@ -8,20 +8,35 @@
             <form @submit.prevent="handleSubmit">
                 <div class="form-group">
                     <label for="username">{{ $t('login.Username') }}</label>
-                    <input type="text" v-model="username" name="username" class="form-control"
-                        :class="{ 'is-invalid': submitted && !username }" @keydown.space.prevent />
-                    <div v-show="submitted && !username" class="invalid-feedback">{{ $t('login.UsernameRequired') }}
+                    <input
+                        type="text"
+                        v-model="username"
+                        name="username"
+                        class="form-control"
+                        :class="{ 'is-invalid': submitted && !username }"
+                        @keydown.space.prevent
+                    />
+                    <div v-show="submitted && !username" class="invalid-feedback">
+                        {{ $t('login.UsernameRequired') }}
                     </div>
                 </div>
                 <div class="form-group">
                     <label htmlFor="password">{{ $t('login.Password') }}</label>
-                    <input type="password" v-model="password" name="password" class="form-control"
-                        :class="{ 'is-invalid': submitted && !password }" />
+                    <input
+                        type="password"
+                        v-model="password"
+                        name="password"
+                        class="form-control"
+                        :class="{ 'is-invalid': submitted && !password }"
+                    />
                     <div v-show="submitted && !password" class="invalid-feedback">
-                        {{ $t('login.PasswordRequired') }}</div>
+                        {{ $t('login.PasswordRequired') }}
+                    </div>
                 </div>
                 <div class="form-group">
-                    <button class="btn btn-primary" :disabled="dataLoading">{{ $t('login.LoginButton') }}</button>
+                    <button class="btn btn-primary" :disabled="dataLoading">
+                        {{ $t('login.LoginButton') }}
+                    </button>
                 </div>
             </form>
         </CardElement>
@@ -30,7 +45,7 @@
 
 <script lang="ts">
 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 router from '@/router';
 import { login } from '@/utils';
@@ -45,8 +60,8 @@ export default defineComponent({
     data() {
         return {
             dataLoading: false,
-            alertMessage: "",
-            alertType: "info",
+            alertMessage: '',
+            alertType: 'info',
             showAlert: false,
             returnUrl: '',
             username: '',
@@ -69,21 +84,20 @@ export default defineComponent({
             }
 
             this.dataLoading = true;
-            login(username, password)
-                .then(
-                    () => {
-                        this.$emitter.emit("logged-in");
-                        router.push(this.returnUrl);
-                    },
-                    error => {
-                        this.$emitter.emit("logged-out");
-                        this.alertMessage = error;
-                        this.alertType = 'danger';
-                        this.showAlert = true;
-                        this.dataLoading = false;
-                    }
-                )
-        }
-    }
+            login(username, password).then(
+                () => {
+                    this.$emitter.emit('logged-in');
+                    router.push(this.returnUrl);
+                },
+                (error) => {
+                    this.$emitter.emit('logged-out');
+                    this.alertMessage = error;
+                    this.alertType = 'danger';
+                    this.showAlert = true;
+                    this.dataLoading = false;
+                }
+            );
+        },
+    },
 });
 </script>

webapp/src/views/MaintenanceRebootView.vue

@@ -5,25 +5,32 @@
         </BootstrapAlert>
 
         <CardElement :text="$t('maintenancereboot.PerformReboot')" textVariant="text-bg-primary" center-content>
-            <button class="btn btn-danger" @click="onOpenModal(performReboot)">{{ $t('maintenancereboot.Reboot') }}
+            <button class="btn btn-danger" @click="onOpenModal(performReboot)">
+                {{ $t('maintenancereboot.Reboot') }}
             </button>
 
             <div class="alert alert-danger mt-3" role="alert" v-html="$t('maintenancereboot.RebootHint')"></div>
         </CardElement>
     </BasePage>
 
-    <ModalDialog modalId="performReboot" small :title="$t('maintenancereboot.RebootOpenDTU')" :closeText="$t('maintenancereboot.Cancel')">
+    <ModalDialog
+        modalId="performReboot"
+        small
+        :title="$t('maintenancereboot.RebootOpenDTU')"
+        :closeText="$t('maintenancereboot.Cancel')"
+    >
         {{ $t('maintenancereboot.RebootQuestion') }}
         <template #footer>
             <button type="button" class="btn btn-danger" @click="onReboot">
-                        {{ $t('maintenancereboot.Reboot') }}</button>
+                {{ $t('maintenancereboot.Reboot') }}
+            </button>
         </template>
     </ModalDialog>
 </template>
 
 <script lang="ts">
 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 ModalDialog from '@/components/ModalDialog.vue';
 import { authHeader, handleResponse, isLoggedIn } from '@/utils/authentication';
@@ -43,14 +50,17 @@ export default defineComponent({
 
             dataLoading: false,
 
-            alertMessage: "",
-            alertType: "info",
+            alertMessage: '',
+            alertType: 'info',
             showAlert: false,
         };
     },
     mounted() {
         if (!isLoggedIn()) {
-            this.$router.push({ path: "/login", query: { returnUrl: this.$router.currentRoute.value.fullPath } });
+            this.$router.push({
+                path: '/login',
+                query: { returnUrl: this.$router.currentRoute.value.fullPath },
+            });
         }
 
         this.performReboot = new bootstrap.Modal('#performReboot');
@@ -58,10 +68,10 @@ export default defineComponent({
     methods: {
         onReboot() {
             const formData = new FormData();
-            formData.append("data", JSON.stringify({ reboot: true }));
+            formData.append('data', JSON.stringify({ reboot: true }));
 
-            fetch("/api/maintenance/reboot", {
-                method: "POST",
+            fetch('/api/maintenance/reboot', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
@@ -78,7 +88,7 @@ export default defineComponent({
         },
         onCloseModal(modal: bootstrap.Modal) {
             modal.hide();
-        }
+        },
     },
 });
 </script>

webapp/src/views/MqttAdminView.vue

@@ -6,102 +6,163 @@
 
         <form @submit="saveMqttConfig">
             <CardElement :text="$t('mqttadmin.MqttConfiguration')" textVariant="text-bg-primary">
-                <InputElement :label="$t('mqttadmin.EnableMqtt')"
-                              v-model="mqttConfigList.mqtt_enabled"
-                              type="checkbox" wide/>
+                <InputElement
+                    :label="$t('mqttadmin.EnableMqtt')"
+                    v-model="mqttConfigList.mqtt_enabled"
+                    type="checkbox"
+                    wide
+                />
 
-                <InputElement v-show="mqttConfigList.mqtt_enabled"
-                              :label="$t('mqttadmin.EnableHass')"
-                              v-model="mqttConfigList.mqtt_hass_enabled"
-                              type="checkbox" wide/>
+                <InputElement
+                    v-show="mqttConfigList.mqtt_enabled"
+                    :label="$t('mqttadmin.EnableHass')"
+                    v-model="mqttConfigList.mqtt_hass_enabled"
+                    type="checkbox"
+                    wide
+                />
             </CardElement>
 
-            <CardElement :text="$t('mqttadmin.MqttBrokerParameter')" textVariant="text-bg-primary" add-space
-                         v-show="mqttConfigList.mqtt_enabled"
+            <CardElement
+                :text="$t('mqttadmin.MqttBrokerParameter')"
+                textVariant="text-bg-primary"
+                add-space
+                v-show="mqttConfigList.mqtt_enabled"
             >
-                <InputElement :label="$t('mqttadmin.Hostname')"
-                              v-model="mqttConfigList.mqtt_hostname"
-                              type="text" maxlength="128"
-                              :placeholder="$t('mqttadmin.HostnameHint')"/>
+                <InputElement
+                    :label="$t('mqttadmin.Hostname')"
+                    v-model="mqttConfigList.mqtt_hostname"
+                    type="text"
+                    maxlength="128"
+                    :placeholder="$t('mqttadmin.HostnameHint')"
+                />
 
-                <InputElement :label="$t('mqttadmin.Port')"
-                              v-model="mqttConfigList.mqtt_port"
-                              type="number" min="1" max="65535"/>
+                <InputElement
+                    :label="$t('mqttadmin.Port')"
+                    v-model="mqttConfigList.mqtt_port"
+                    type="number"
+                    min="1"
+                    max="65535"
+                />
 
-                <InputElement :label="$t('mqttadmin.ClientId')"
-                              v-model="mqttConfigList.mqtt_clientid"
-                              type="text" maxlength="64"/>
+                <InputElement
+                    :label="$t('mqttadmin.ClientId')"
+                    v-model="mqttConfigList.mqtt_clientid"
+                    type="text"
+                    maxlength="64"
+                />
 
-                <InputElement :label="$t('mqttadmin.Username')"
-                              v-model="mqttConfigList.mqtt_username"
-                              type="text" maxlength="64"
-                              :placeholder="$t('mqttadmin.UsernameHint')"/>
+                <InputElement
+                    :label="$t('mqttadmin.Username')"
+                    v-model="mqttConfigList.mqtt_username"
+                    type="text"
+                    maxlength="64"
+                    :placeholder="$t('mqttadmin.UsernameHint')"
+                />
 
-                <InputElement :label="$t('mqttadmin.Password')"
-                              v-model="mqttConfigList.mqtt_password"
-                              type="password" maxlength="64"
-                              :placeholder="$t('mqttadmin.PasswordHint')"/>
+                <InputElement
+                    :label="$t('mqttadmin.Password')"
+                    v-model="mqttConfigList.mqtt_password"
+                    type="password"
+                    maxlength="64"
+                    :placeholder="$t('mqttadmin.PasswordHint')"
+                />
 
-                <InputElement :label="$t('mqttadmin.BaseTopic')"
-                              v-model="mqttConfigList.mqtt_topic"
-                              type="text" maxlength="32"
-                              :placeholder="$t('mqttadmin.BaseTopicHint')"/>
+                <InputElement
+                    :label="$t('mqttadmin.BaseTopic')"
+                    v-model="mqttConfigList.mqtt_topic"
+                    type="text"
+                    maxlength="32"
+                    :placeholder="$t('mqttadmin.BaseTopicHint')"
+                />
 
-                <InputElement :label="$t('mqttadmin.PublishInterval')"
-                              v-model="mqttConfigList.mqtt_publish_interval"
-                              type="number" min="5" max="86400"
-                              :postfix="$t('mqttadmin.Seconds')"/>
+                <InputElement
+                    :label="$t('mqttadmin.PublishInterval')"
+                    v-model="mqttConfigList.mqtt_publish_interval"
+                    type="number"
+                    min="5"
+                    max="86400"
+                    :postfix="$t('mqttadmin.Seconds')"
+                />
 
-                <InputElement :label="$t('mqttadmin.CleanSession')"
-                              v-model="mqttConfigList.mqtt_clean_session"
-                              type="checkbox"/>
+                <InputElement
+                    :label="$t('mqttadmin.CleanSession')"
+                    v-model="mqttConfigList.mqtt_clean_session"
+                    type="checkbox"
+                />
 
-                <InputElement :label="$t('mqttadmin.EnableRetain')"
-                              v-model="mqttConfigList.mqtt_retain"
-                              type="checkbox"/>
+                <InputElement
+                    :label="$t('mqttadmin.EnableRetain')"
+                    v-model="mqttConfigList.mqtt_retain"
+                    type="checkbox"
+                />
 
-                <InputElement :label="$t('mqttadmin.EnableTls')"
-                              v-model="mqttConfigList.mqtt_tls"
-                              type="checkbox"/>
+                <InputElement :label="$t('mqttadmin.EnableTls')" v-model="mqttConfigList.mqtt_tls" type="checkbox" />
 
-                <InputElement v-show="mqttConfigList.mqtt_tls"
-                              :label="$t('mqttadmin.RootCa')"
-                              v-model="mqttConfigList.mqtt_root_ca_cert"
-                              type="textarea" maxlength="2560" rows="10"/>
+                <InputElement
+                    v-show="mqttConfigList.mqtt_tls"
+                    :label="$t('mqttadmin.RootCa')"
+                    v-model="mqttConfigList.mqtt_root_ca_cert"
+                    type="textarea"
+                    maxlength="2560"
+                    rows="10"
+                />
 
-                <InputElement v-show="mqttConfigList.mqtt_tls"
-                              :label="$t('mqttadmin.TlsCertLoginEnable')"
-                              v-model="mqttConfigList.mqtt_tls_cert_login"
-                              type="checkbox"/>
+                <InputElement
+                    v-show="mqttConfigList.mqtt_tls"
+                    :label="$t('mqttadmin.TlsCertLoginEnable')"
+                    v-model="mqttConfigList.mqtt_tls_cert_login"
+                    type="checkbox"
+                />
 
-                <InputElement v-show="mqttConfigList.mqtt_tls_cert_login"
-                              :label="$t('mqttadmin.ClientCert')"
-                              v-model="mqttConfigList.mqtt_client_cert"
-                              type="textarea" maxlength="2560" rows="10"/>
+                <InputElement
+                    v-show="mqttConfigList.mqtt_tls_cert_login"
+                    :label="$t('mqttadmin.ClientCert')"
+                    v-model="mqttConfigList.mqtt_client_cert"
+                    type="textarea"
+                    maxlength="2560"
+                    rows="10"
+                />
 
-                <InputElement v-show="mqttConfigList.mqtt_tls_cert_login"
-                              :label="$t('mqttadmin.ClientKey')"
-                              v-model="mqttConfigList.mqtt_client_key"
-                              type="textarea" maxlength="2560" rows="10"/>
+                <InputElement
+                    v-show="mqttConfigList.mqtt_tls_cert_login"
+                    :label="$t('mqttadmin.ClientKey')"
+                    v-model="mqttConfigList.mqtt_client_key"
+                    type="textarea"
+                    maxlength="2560"
+                    rows="10"
+                />
             </CardElement>
 
-            <CardElement :text="$t('mqttadmin.LwtParameters')" textVariant="text-bg-primary" add-space
-                         v-show="mqttConfigList.mqtt_enabled"
+            <CardElement
+                :text="$t('mqttadmin.LwtParameters')"
+                textVariant="text-bg-primary"
+                add-space
+                v-show="mqttConfigList.mqtt_enabled"
             >
-                <InputElement :label="$t('mqttadmin.LwtTopic')"
-                              v-model="mqttConfigList.mqtt_lwt_topic"
-                              type="text" maxlength="32" :prefix="mqttConfigList.mqtt_topic"
-                              :placeholder="$t('mqttadmin.LwtTopicHint')"/>
+                <InputElement
+                    :label="$t('mqttadmin.LwtTopic')"
+                    v-model="mqttConfigList.mqtt_lwt_topic"
+                    type="text"
+                    maxlength="32"
+                    :prefix="mqttConfigList.mqtt_topic"
+                    :placeholder="$t('mqttadmin.LwtTopicHint')"
+                />
 
-                <InputElement :label="$t('mqttadmin.LwtOnline')"
-                              v-model="mqttConfigList.mqtt_lwt_online"
-                              type="text" maxlength="20"
-                              :placeholder="$t('mqttadmin.LwtOnlineHint')"/>
+                <InputElement
+                    :label="$t('mqttadmin.LwtOnline')"
+                    v-model="mqttConfigList.mqtt_lwt_online"
+                    type="text"
+                    maxlength="20"
+                    :placeholder="$t('mqttadmin.LwtOnlineHint')"
+                />
 
-                <InputElement :label="$t('mqttadmin.LwtOffline')"
-                              v-model="mqttConfigList.mqtt_lwt_offline"
-                              type="text" maxlength="20"
-                              :placeholder="$t('mqttadmin.LwtOfflineHint')"/>
+                <InputElement
+                    :label="$t('mqttadmin.LwtOffline')"
+                    v-model="mqttConfigList.mqtt_lwt_offline"
+                    type="text"
+                    maxlength="20"
+                    :placeholder="$t('mqttadmin.LwtOfflineHint')"
+                />
 
                 <div class="row mb-3">
                     <label class="col-sm-2 col-form-label">
@@ -117,39 +178,51 @@
                 </div>
             </CardElement>
 
-            <CardElement :text="$t('mqttadmin.HassParameters')" textVariant="text-bg-primary" add-space
-                         v-show="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled"
+            <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')"
-                              v-model="mqttConfigList.mqtt_hass_topic"
-                              type="text" maxlength="32"
-                              :placeholder="$t('mqttadmin.HassPrefixTopicHint')"/>
+                <InputElement
+                    :label="$t('mqttadmin.HassPrefixTopic')"
+                    v-model="mqttConfigList.mqtt_hass_topic"
+                    type="text"
+                    maxlength="32"
+                    :placeholder="$t('mqttadmin.HassPrefixTopicHint')"
+                />
 
-                <InputElement :label="$t('mqttadmin.HassRetain')"
-                              v-model="mqttConfigList.mqtt_hass_retain"
-                              type="checkbox"/>
+                <InputElement
+                    :label="$t('mqttadmin.HassRetain')"
+                    v-model="mqttConfigList.mqtt_hass_retain"
+                    type="checkbox"
+                />
 
-                <InputElement :label="$t('mqttadmin.HassExpire')"
-                              v-model="mqttConfigList.mqtt_hass_expire"
-                              type="checkbox"/>
+                <InputElement
+                    :label="$t('mqttadmin.HassExpire')"
+                    v-model="mqttConfigList.mqtt_hass_expire"
+                    type="checkbox"
+                />
 
-                <InputElement :label="$t('mqttadmin.HassIndividual')"
-                              v-model="mqttConfigList.mqtt_hass_individualpanels"
-                              type="checkbox"/>
+                <InputElement
+                    :label="$t('mqttadmin.HassIndividual')"
+                    v-model="mqttConfigList.mqtt_hass_individualpanels"
+                    type="checkbox"
+                />
             </CardElement>
 
-            <FormFooter @reload="getMqttConfig"/>
+            <FormFooter @reload="getMqttConfig" />
         </form>
     </BasePage>
 </template>
 
 <script lang="ts">
 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 FormFooter from '@/components/FormFooter.vue';
 import InputElement from '@/components/InputElement.vue';
-import type { MqttConfig } from "@/types/MqttConfig";
+import type { MqttConfig } from '@/types/MqttConfig';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { defineComponent } from 'vue';
 
@@ -165,8 +238,8 @@ export default defineComponent({
         return {
             dataLoading: true,
             mqttConfigList: {} as MqttConfig,
-            alertMessage: "",
-            alertType: "info",
+            alertMessage: '',
+            alertType: 'info',
             showAlert: false,
             qosTypeList: [
                 { key: 0, value: 'QOS0' },
@@ -181,7 +254,7 @@ export default defineComponent({
     methods: {
         getMqttConfig() {
             this.dataLoading = true;
-            fetch("/api/mqtt/config", { headers: authHeader() })
+            fetch('/api/mqtt/config', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.mqttConfigList = data;
@@ -192,21 +265,19 @@ export default defineComponent({
             e.preventDefault();
 
             const formData = new FormData();
-            formData.append("data", JSON.stringify(this.mqttConfigList));
+            formData.append('data', JSON.stringify(this.mqttConfigList));
 
-            fetch("/api/mqtt/config", {
-                method: "POST",
+            fetch('/api/mqtt/config', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (response) => {
-                        this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
-                        this.alertType = response.type;
-                        this.showAlert = true;
-                    }
-                );
+                .then((response) => {
+                    this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
+                    this.alertType = response.type;
+                    this.showAlert = true;
+                });
         },
     },
 });

webapp/src/views/MqttInfoView.vue

@@ -1,5 +1,10 @@
 <template>
-    <BasePage :title="$t('mqttinfo.MqttInformation')" :isLoading="dataLoading" :show-reload="true" @reload="getMqttInfo">
+    <BasePage
+        :title="$t('mqttinfo.MqttInformation')"
+        :isLoading="dataLoading"
+        :show-reload="true"
+        @reload="getMqttInfo"
+    >
         <CardElement :text="$t('mqttinfo.ConfigurationSummary')" textVariant="text-bg-primary">
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
@@ -7,7 +12,11 @@
                         <tr>
                             <th>{{ $t('mqttinfo.Status') }}</th>
                             <td>
-                                <StatusBadge :status="mqttDataList.mqtt_enabled" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
+                                <StatusBadge
+                                    :status="mqttDataList.mqtt_enabled"
+                                    true_text="mqttinfo.Enabled"
+                                    false_text="mqttinfo.Disabled"
+                                />
                             </td>
                         </tr>
                         <tr>
@@ -32,24 +41,42 @@
                         </tr>
                         <tr>
                             <th>{{ $t('mqttinfo.PublishInterval') }}</th>
-                            <td>{{ $t('mqttinfo.Seconds', { sec: mqttDataList.mqtt_publish_interval }) }}</td>
+                            <td>
+                                {{
+                                    $t('mqttinfo.Seconds', {
+                                        sec: mqttDataList.mqtt_publish_interval,
+                                    })
+                                }}
+                            </td>
                         </tr>
                         <tr>
                             <th>{{ $t('mqttinfo.CleanSession') }}</th>
                             <td>
-                                <StatusBadge :status="mqttDataList.mqtt_clean_session" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
+                                <StatusBadge
+                                    :status="mqttDataList.mqtt_clean_session"
+                                    true_text="mqttinfo.Enabled"
+                                    false_text="mqttinfo.Disabled"
+                                />
                             </td>
                         </tr>
                         <tr>
                             <th>{{ $t('mqttinfo.Retain') }}</th>
                             <td>
-                                <StatusBadge :status="mqttDataList.mqtt_retain" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
+                                <StatusBadge
+                                    :status="mqttDataList.mqtt_retain"
+                                    true_text="mqttinfo.Enabled"
+                                    false_text="mqttinfo.Disabled"
+                                />
                             </td>
                         </tr>
                         <tr>
                             <th>{{ $t('mqttinfo.Tls') }}</th>
                             <td>
-                                <StatusBadge :status="mqttDataList.mqtt_tls" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
+                                <StatusBadge
+                                    :status="mqttDataList.mqtt_tls"
+                                    true_text="mqttinfo.Enabled"
+                                    false_text="mqttinfo.Disabled"
+                                />
                             </td>
                         </tr>
                         <tr v-show="mqttDataList.mqtt_tls">
@@ -59,7 +86,11 @@
                         <tr>
                             <th>{{ $t('mqttinfo.TlsCertLogin') }}</th>
                             <td>
-                                <StatusBadge :status="mqttDataList.mqtt_tls_cert_login" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
+                                <StatusBadge
+                                    :status="mqttDataList.mqtt_tls_cert_login"
+                                    true_text="mqttinfo.Enabled"
+                                    false_text="mqttinfo.Disabled"
+                                />
                             </td>
                         </tr>
                         <tr v-show="mqttDataList.mqtt_tls_cert_login">
@@ -78,7 +109,11 @@
                         <tr>
                             <th>{{ $t('mqttinfo.Status') }}</th>
                             <td>
-                                <StatusBadge :status="mqttDataList.mqtt_hass_enabled" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
+                                <StatusBadge
+                                    :status="mqttDataList.mqtt_hass_enabled"
+                                    true_text="mqttinfo.Enabled"
+                                    false_text="mqttinfo.Disabled"
+                                />
                             </td>
                         </tr>
                         <tr>
@@ -88,19 +123,31 @@
                         <tr>
                             <th>{{ $t('mqttinfo.Retain') }}</th>
                             <td>
-                                <StatusBadge :status="mqttDataList.mqtt_hass_retain" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
+                                <StatusBadge
+                                    :status="mqttDataList.mqtt_hass_retain"
+                                    true_text="mqttinfo.Enabled"
+                                    false_text="mqttinfo.Disabled"
+                                />
                             </td>
                         </tr>
                         <tr>
                             <th>{{ $t('mqttinfo.Expire') }}</th>
                             <td>
-                                <StatusBadge :status="mqttDataList.mqtt_hass_expire" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
+                                <StatusBadge
+                                    :status="mqttDataList.mqtt_hass_expire"
+                                    true_text="mqttinfo.Enabled"
+                                    false_text="mqttinfo.Disabled"
+                                />
                             </td>
                         </tr>
                         <tr>
                             <th>{{ $t('mqttinfo.IndividualPanels') }}</th>
                             <td>
-                                <StatusBadge :status="mqttDataList.mqtt_hass_individualpanels" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
+                                <StatusBadge
+                                    :status="mqttDataList.mqtt_hass_individualpanels"
+                                    true_text="mqttinfo.Enabled"
+                                    false_text="mqttinfo.Disabled"
+                                />
                             </td>
                         </tr>
                     </tbody>
@@ -115,7 +162,11 @@
                         <tr>
                             <th>{{ $t('mqttinfo.ConnectionStatus') }}</th>
                             <td>
-                                <StatusBadge :status="mqttDataList.mqtt_connected" true_text="mqttinfo.Connected" false_text="mqttinfo.Disconnected" />
+                                <StatusBadge
+                                    :status="mqttDataList.mqtt_connected"
+                                    true_text="mqttinfo.Connected"
+                                    false_text="mqttinfo.Disconnected"
+                                />
                             </td>
                         </tr>
                     </tbody>
@@ -137,7 +188,7 @@ export default defineComponent({
     components: {
         BasePage,
         CardElement,
-        StatusBadge
+        StatusBadge,
     },
     data() {
         return {
@@ -151,7 +202,7 @@ export default defineComponent({
     methods: {
         getMqttInfo() {
             this.dataLoading = true;
-            fetch("/api/mqtt/status", { headers: authHeader() })
+            fetch('/api/mqtt/status', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.mqttDataList = data;

webapp/src/views/NetworkAdminView.vue

@@ -6,75 +6,105 @@
 
         <form @submit="saveNetworkConfig">
             <CardElement :text="$t('networkadmin.WifiConfiguration')" textVariant="text-bg-primary">
-                <InputElement :label="$t('networkadmin.WifiSsid')"
-                              v-model="networkConfigList.ssid"
-                              type="text" maxlength="32"/>
+                <InputElement
+                    :label="$t('networkadmin.WifiSsid')"
+                    v-model="networkConfigList.ssid"
+                    type="text"
+                    maxlength="32"
+                />
 
-                <InputElement :label="$t('networkadmin.WifiPassword')"
-                              v-model="networkConfigList.password"
-                              type="password" maxlength="64"/>
+                <InputElement
+                    :label="$t('networkadmin.WifiPassword')"
+                    v-model="networkConfigList.password"
+                    type="password"
+                    maxlength="64"
+                />
 
-                <InputElement :label="$t('networkadmin.Hostname')"
-                              v-model="networkConfigList.hostname"
-                              type="text" maxlength="32"
+                <InputElement
+                    :label="$t('networkadmin.Hostname')"
+                    v-model="networkConfigList.hostname"
+                    type="text"
+                    maxlength="32"
                 >
                     <div class="alert alert-secondary" role="alert" v-html="$t('networkadmin.HostnameHint')"></div>
                 </InputElement>
 
-                <InputElement :label="$t('networkadmin.EnableDhcp')"
-                              v-model="networkConfigList.dhcp"
-                              type="checkbox"/>
+                <InputElement :label="$t('networkadmin.EnableDhcp')" v-model="networkConfigList.dhcp" type="checkbox" />
             </CardElement>
 
-            <CardElement :text="$t('networkadmin.StaticIpConfiguration')" textVariant="text-bg-primary" add-space
-                         v-show="!networkConfigList.dhcp"
+            <CardElement
+                :text="$t('networkadmin.StaticIpConfiguration')"
+                textVariant="text-bg-primary"
+                add-space
+                v-show="!networkConfigList.dhcp"
             >
-                <InputElement :label="$t('networkadmin.IpAddress')"
-                              v-model="networkConfigList.ipaddress"
-                              type="text" maxlength="32"/>
+                <InputElement
+                    :label="$t('networkadmin.IpAddress')"
+                    v-model="networkConfigList.ipaddress"
+                    type="text"
+                    maxlength="32"
+                />
 
-                <InputElement :label="$t('networkadmin.Netmask')"
-                              v-model="networkConfigList.netmask"
-                              type="text" maxlength="32"/>
+                <InputElement
+                    :label="$t('networkadmin.Netmask')"
+                    v-model="networkConfigList.netmask"
+                    type="text"
+                    maxlength="32"
+                />
 
-                <InputElement :label="$t('networkadmin.DefaultGateway')"
-                              v-model="networkConfigList.gateway"
-                              type="text" maxlength="32"/>
+                <InputElement
+                    :label="$t('networkadmin.DefaultGateway')"
+                    v-model="networkConfigList.gateway"
+                    type="text"
+                    maxlength="32"
+                />
 
-                <InputElement :label="$t('networkadmin.Dns', { num: 1 })"
-                              v-model="networkConfigList.dns1"
-                              type="text" maxlength="32"/>
+                <InputElement
+                    :label="$t('networkadmin.Dns', { num: 1 })"
+                    v-model="networkConfigList.dns1"
+                    type="text"
+                    maxlength="32"
+                />
 
-                <InputElement :label="$t('networkadmin.Dns', { num: 2 })"
-                              v-model="networkConfigList.dns2"
-                              type="text" maxlength="32"/>
+                <InputElement
+                    :label="$t('networkadmin.Dns', { num: 2 })"
+                    v-model="networkConfigList.dns2"
+                    type="text"
+                    maxlength="32"
+                />
             </CardElement>
 
             <CardElement :text="$t('networkadmin.MdnsSettings')" textVariant="text-bg-primary" add-space>
-                <InputElement :label="$t('networkadmin.EnableMdns')"
-                              v-model="networkConfigList.mdnsenabled"
-                              type="checkbox"/>
+                <InputElement
+                    :label="$t('networkadmin.EnableMdns')"
+                    v-model="networkConfigList.mdnsenabled"
+                    type="checkbox"
+                />
             </CardElement>
 
             <CardElement :text="$t('networkadmin.AdminAp')" textVariant="text-bg-primary" add-space>
-                <InputElement :label="$t('networkadmin.ApTimeout')"
-                              v-model="networkConfigList.aptimeout"
-                              type="number" min="0" max="99999"
-                              :postfix="$t('networkadmin.Minutes')"
-                              :tooltip="$t('networkadmin.ApTimeoutHint')"/>
+                <InputElement
+                    :label="$t('networkadmin.ApTimeout')"
+                    v-model="networkConfigList.aptimeout"
+                    type="number"
+                    min="0"
+                    max="99999"
+                    :postfix="$t('networkadmin.Minutes')"
+                    :tooltip="$t('networkadmin.ApTimeoutHint')"
+                />
             </CardElement>
-            <FormFooter @reload="getNetworkConfig"/>
+            <FormFooter @reload="getNetworkConfig" />
         </form>
     </BasePage>
 </template>
 
 <script lang="ts">
 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 FormFooter from '@/components/FormFooter.vue';
 import InputElement from '@/components/InputElement.vue';
-import type { NetworkConfig } from "@/types/NetworkConfig";
+import type { NetworkConfig } from '@/types/NetworkConfig';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { defineComponent } from 'vue';
 
@@ -90,8 +120,8 @@ export default defineComponent({
         return {
             dataLoading: true,
             networkConfigList: {} as NetworkConfig,
-            alertMessage: "",
-            alertType: "info",
+            alertMessage: '',
+            alertType: 'info',
             showAlert: false,
         };
     },
@@ -101,7 +131,7 @@ export default defineComponent({
     methods: {
         getNetworkConfig() {
             this.dataLoading = true;
-            fetch("/api/network/config", { headers: authHeader() })
+            fetch('/api/network/config', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.networkConfigList = data;
@@ -112,21 +142,19 @@ export default defineComponent({
             e.preventDefault();
 
             const formData = new FormData();
-            formData.append("data", JSON.stringify(this.networkConfigList));
+            formData.append('data', JSON.stringify(this.networkConfigList));
 
-            fetch("/api/network/config", {
-                method: "POST",
+            fetch('/api/network/config', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (response) => {
-                        this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
-                        this.alertType = response.type;
-                        this.showAlert = true;
-                    }
-                );
+                .then((response) => {
+                    this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
+                    this.alertType = response.type;
+                    this.showAlert = true;
+                });
         },
     },
 });

webapp/src/views/NetworkInfoView.vue

@@ -1,5 +1,10 @@
 <template>
-    <BasePage :title="$t('networkinfo.NetworkInformation')" :isLoading="dataLoading" :show-reload="true" @reload="getNetworkInfo">
+    <BasePage
+        :title="$t('networkinfo.NetworkInformation')"
+        :isLoading="dataLoading"
+        :show-reload="true"
+        @reload="getNetworkInfo"
+    >
         <WifiStationInfo :networkStatus="networkDataList" />
         <div class="mt-5"></div>
         <WifiApInfo :networkStatus="networkDataList" />
@@ -13,10 +18,10 @@
 
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
-import InterfaceApInfo from "@/components/InterfaceApInfo.vue";
-import InterfaceNetworkInfo from "@/components/InterfaceNetworkInfo.vue";
-import WifiApInfo from "@/components/WifiApInfo.vue";
-import WifiStationInfo from "@/components/WifiStationInfo.vue";
+import InterfaceApInfo from '@/components/InterfaceApInfo.vue';
+import InterfaceNetworkInfo from '@/components/InterfaceNetworkInfo.vue';
+import WifiApInfo from '@/components/WifiApInfo.vue';
+import WifiStationInfo from '@/components/WifiStationInfo.vue';
 import type { NetworkStatus } from '@/types/NetworkStatus';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { defineComponent } from 'vue';
@@ -33,7 +38,7 @@ export default defineComponent({
         return {
             dataLoading: true,
             networkDataList: {} as NetworkStatus,
-        }
+        };
     },
     created() {
         this.getNetworkInfo();
@@ -41,7 +46,7 @@ export default defineComponent({
     methods: {
         getNetworkInfo() {
             this.dataLoading = true;
-            fetch("/api/network/status", { headers: authHeader() })
+            fetch('/api/network/status', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.networkDataList = data;

webapp/src/views/NtpAdminView.vue

@@ -6,37 +6,56 @@
 
         <form @submit="saveNtpConfig">
             <CardElement :text="$t('ntpadmin.NtpConfiguration')" textVariant="text-bg-primary">
-                <InputElement :label="$t('ntpadmin.TimeServer')"
-                              v-model="ntpConfigList.ntp_server"
-                              type="text" maxlength="32"
-                              :tooltip="$t('ntpadmin.TimeServerHint')"/>
+                <InputElement
+                    :label="$t('ntpadmin.TimeServer')"
+                    v-model="ntpConfigList.ntp_server"
+                    type="text"
+                    maxlength="32"
+                    :tooltip="$t('ntpadmin.TimeServerHint')"
+                />
 
                 <div class="row mb-3">
                     <label for="inputTimezone" class="col-sm-2 col-form-label">{{ $t('ntpadmin.Timezone') }}</label>
                     <div class="col-sm-10">
                         <select class="form-select" v-model="timezoneSelect">
-                            <option v-for="(config, name) in timezoneList" :key="name + '---' + config"
-                                :value="name + '---' + config">
+                            <option
+                                v-for="(config, name) in timezoneList"
+                                :key="name + '---' + config"
+                                :value="name + '---' + config"
+                            >
                                 {{ name }}
                             </option>
                         </select>
                     </div>
                 </div>
 
-                <InputElement :label="$t('ntpadmin.TimezoneConfig')"
-                              v-model="ntpConfigList.ntp_timezone"
-                              type="text" maxlength="32" disabled/>
+                <InputElement
+                    :label="$t('ntpadmin.TimezoneConfig')"
+                    v-model="ntpConfigList.ntp_timezone"
+                    type="text"
+                    maxlength="32"
+                    disabled
+                />
             </CardElement>
 
             <CardElement :text="$t('ntpadmin.LocationConfiguration')" textVariant="text-bg-primary" add-space>
-                <InputElement :label="$t('ntpadmin.Latitude')"
-                              v-model="ntpConfigList.latitude"
-                              type="number" min="-90" max="90" step="any"/>
-
-                <InputElement :label="$t('ntpadmin.Longitude')"
-                              v-model="ntpConfigList.longitude"
-                              type="number" min="-180" max="180" step="any"/>
+                <InputElement
+                    :label="$t('ntpadmin.Latitude')"
+                    v-model="ntpConfigList.latitude"
+                    type="number"
+                    min="-90"
+                    max="90"
+                    step="any"
+                />
 
+                <InputElement
+                    :label="$t('ntpadmin.Longitude')"
+                    v-model="ntpConfigList.longitude"
+                    type="number"
+                    min="-180"
+                    max="180"
+                    step="any"
+                />
 
                 <div class="row mb-3">
                     <label class="col-sm-2 col-form-label">
@@ -52,17 +71,13 @@
                     </div>
                 </div>
             </CardElement>
-            <FormFooter @reload="getNtpConfig"/>
+            <FormFooter @reload="getNtpConfig" />
         </form>
 
         <CardElement :text="$t('ntpadmin.ManualTimeSynchronization')" textVariant="text-bg-primary" add-space>
-            <InputElement :label="$t('ntpadmin.CurrentOpenDtuTime')"
-                           v-model="mcuTime"
-                           type="text" disabled/>
+            <InputElement :label="$t('ntpadmin.CurrentOpenDtuTime')" v-model="mcuTime" type="text" disabled />
 
-            <InputElement :label="$t('ntpadmin.CurrentLocalTime')"
-                          v-model="localTime"
-                          type="text" disabled/>
+            <InputElement :label="$t('ntpadmin.CurrentLocalTime')" v-model="localTime" type="text" disabled />
 
             <div class="text-center mb-3">
                 <button type="button" class="btn btn-danger" @click="setCurrentTime()">
@@ -76,11 +91,11 @@
 
 <script lang="ts">
 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 InputElement from '@/components/InputElement.vue';
 import FormFooter from '@/components/FormFooter.vue';
-import type { NtpConfig } from "@/types/NtpConfig";
+import type { NtpConfig } from '@/types/NtpConfig';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { defineComponent } from 'vue';
 import { BIconInfoCircle } from 'bootstrap-icons-vue';
@@ -100,12 +115,12 @@ export default defineComponent({
             timezoneLoading: true,
             ntpConfigList: {} as NtpConfig,
             timezoneList: {},
-            timezoneSelect: "",
+            timezoneSelect: '',
             mcuTime: new Date(),
             localTime: new Date(),
             dataAgeInterval: 0,
-            alertMessage: "",
-            alertType: "info",
+            alertMessage: '',
+            alertType: 'info',
             showAlert: false,
             sunsetTypeList: [
                 { key: 0, value: 'OFFICIAL' },
@@ -117,8 +132,8 @@ export default defineComponent({
     },
     watch: {
         timezoneSelect: function (newValue) {
-            this.ntpConfigList.ntp_timezone = newValue.split("---")[1];
-            this.ntpConfigList.ntp_timezone_descr = newValue.split("---")[0];
+            this.ntpConfigList.ntp_timezone = newValue.split('---')[1];
+            this.ntpConfigList.ntp_timezone_descr = newValue.split('---')[0];
         },
     },
     created() {
@@ -136,7 +151,7 @@ export default defineComponent({
         },
         getTimezoneList() {
             this.timezoneLoading = true;
-            fetch("/zones.json")
+            fetch('/zones.json')
                 .then((response) => response.json())
                 .then((data) => {
                     this.timezoneList = data;
@@ -145,31 +160,23 @@ export default defineComponent({
         },
         getNtpConfig() {
             this.dataLoading = true;
-            fetch("/api/ntp/config", { headers: authHeader() })
+            fetch('/api/ntp/config', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (data) => {
-                        this.ntpConfigList = data;
-                        this.timezoneSelect =
-                            this.ntpConfigList.ntp_timezone_descr +
-                            "---" +
-                            this.ntpConfigList.ntp_timezone;
-                        this.dataLoading = false;
-                    }
-                );
+                .then((data) => {
+                    this.ntpConfigList = data;
+                    this.timezoneSelect =
+                        this.ntpConfigList.ntp_timezone_descr + '---' + this.ntpConfigList.ntp_timezone;
+                    this.dataLoading = false;
+                });
         },
         getCurrentTime() {
             this.dataLoading = true;
-            fetch("/api/ntp/time", { headers: authHeader() })
+            fetch('/api/ntp/time', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (data) => {
-                        this.mcuTime = new Date(
-                            data.year, data.month - 1, data.day,
-                            data.hour, data.minute, data.second);
-                        this.dataLoading = false;
-                    }
-                );
+                .then((data) => {
+                    this.mcuTime = new Date(data.year, data.month - 1, data.day, data.hour, data.minute, data.second);
+                    this.dataLoading = false;
+                });
         },
         setCurrentTime() {
             const formData = new FormData();
@@ -182,21 +189,19 @@ export default defineComponent({
                 second: this.localTime.getSeconds(),
             };
             console.log(time);
-            formData.append("data", JSON.stringify(time));
+            formData.append('data', JSON.stringify(time));
 
-            fetch("/api/ntp/time", {
-                method: "POST",
+            fetch('/api/ntp/time', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (response) => {
-                        this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
-                        this.alertType = response.type;
-                        this.showAlert = true;
-                    }
-                )
+                .then((response) => {
+                    this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
+                    this.alertType = response.type;
+                    this.showAlert = true;
+                })
                 .then(() => {
                     this.getCurrentTime();
                 });
@@ -205,21 +210,19 @@ export default defineComponent({
             e.preventDefault();
 
             const formData = new FormData();
-            formData.append("data", JSON.stringify(this.ntpConfigList));
+            formData.append('data', JSON.stringify(this.ntpConfigList));
 
-            fetch("/api/ntp/config", {
-                method: "POST",
+            fetch('/api/ntp/config', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (response) => {
-                        this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
-                        this.alertType = response.type;
-                        this.showAlert = true;
-                    }
-                );
+                .then((response) => {
+                    this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
+                    this.alertType = response.type;
+                    this.showAlert = true;
+                });
         },
     },
 });

webapp/src/views/NtpInfoView.vue

@@ -28,7 +28,11 @@
                         <tr>
                             <th>{{ $t('ntpinfo.Status') }}</th>
                             <td>
-                                <StatusBadge :status="ntpDataList.ntp_status" true_text="ntpinfo.Synced" false_text="ntpinfo.NotSynced" />
+                                <StatusBadge
+                                    :status="ntpDataList.ntp_status"
+                                    true_text="ntpinfo.Synced"
+                                    false_text="ntpinfo.NotSynced"
+                                />
                             </td>
                         </tr>
                         <tr>
@@ -38,20 +42,28 @@
 
                         <tr>
                             <th>{{ $t('ntpinfo.Sunrise') }}</th>
-                            <td v-if="ntpDataList.sun_isSunsetAvailable">{{ ntpDataList.sun_risetime }}</td>
+                            <td v-if="ntpDataList.sun_isSunsetAvailable">
+                                {{ ntpDataList.sun_risetime }}
+                            </td>
                             <td v-else>{{ $t('ntpinfo.NotAvailable') }}</td>
                         </tr>
                         <tr>
                             <th>{{ $t('ntpinfo.Sunset') }}</th>
-                            <td v-if="ntpDataList.sun_isSunsetAvailable">{{ ntpDataList.sun_settime }}</td>
+                            <td v-if="ntpDataList.sun_isSunsetAvailable">
+                                {{ ntpDataList.sun_settime }}
+                            </td>
                             <td v-else>{{ $t('ntpinfo.NotAvailable') }}</td>
                         </tr>
                         <tr>
                             <th>{{ $t('ntpinfo.Mode') }}</th>
                             <td>
-                                <StatusBadge :status="ntpDataList.sun_isDayPeriod"
-                                    true_text="ntpinfo.Day" true_class="text-bg-warning"
-                                    false_text="ntpinfo.Night" false_class="text-bg-dark" />
+                                <StatusBadge
+                                    :status="ntpDataList.sun_isDayPeriod"
+                                    true_text="ntpinfo.Day"
+                                    true_class="text-bg-warning"
+                                    false_text="ntpinfo.Night"
+                                    false_class="text-bg-dark"
+                                />
                             </td>
                         </tr>
                     </tbody>
@@ -65,7 +77,7 @@
 import BasePage from '@/components/BasePage.vue';
 import CardElement from '@/components/CardElement.vue';
 import StatusBadge from '@/components/StatusBadge.vue';
-import type { NtpStatus } from "@/types/NtpStatus";
+import type { NtpStatus } from '@/types/NtpStatus';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { defineComponent } from 'vue';
 
@@ -87,7 +99,7 @@ export default defineComponent({
     methods: {
         getNtpInfo() {
             this.dataLoading = true;
-            fetch("/api/ntp/status", { headers: authHeader() })
+            fetch('/api/ntp/status', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.ntpDataList = data;

webapp/src/views/SecurityAdminView.vue

@@ -6,31 +6,40 @@
 
         <form @submit="savePasswordConfig">
             <CardElement :text="$t('securityadmin.AdminPassword')" textVariant="text-bg-primary">
-                <InputElement :label="$t('securityadmin.Password')"
-                              v-model="securityConfigList.password"
-                              type="password" maxlength="64"/>
+                <InputElement
+                    :label="$t('securityadmin.Password')"
+                    v-model="securityConfigList.password"
+                    type="password"
+                    maxlength="64"
+                />
 
-                <InputElement :label="$t('securityadmin.RepeatPassword')"
-                              v-model="passwordRepeat"
-                              type="password" maxlength="64"/>
+                <InputElement
+                    :label="$t('securityadmin.RepeatPassword')"
+                    v-model="passwordRepeat"
+                    type="password"
+                    maxlength="64"
+                />
 
                 <div class="alert alert-secondary" role="alert" v-html="$t('securityadmin.PasswordHint')"></div>
             </CardElement>
 
             <CardElement :text="$t('securityadmin.Permissions')" textVariant="text-bg-primary" add-space>
-                <InputElement :label="$t('securityadmin.ReadOnly')"
-                              v-model="securityConfigList.allow_readonly"
-                              type="checkbox" wide/>
+                <InputElement
+                    :label="$t('securityadmin.ReadOnly')"
+                    v-model="securityConfigList.allow_readonly"
+                    type="checkbox"
+                    wide
+                />
             </CardElement>
 
-            <FormFooter @reload="getPasswordConfig"/>
+            <FormFooter @reload="getPasswordConfig" />
         </form>
     </BasePage>
 </template>
 
 <script lang="ts">
 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 FormFooter from '@/components/FormFooter.vue';
 import InputElement from '@/components/InputElement.vue';
@@ -49,12 +58,12 @@ export default defineComponent({
     data() {
         return {
             dataLoading: true,
-            alertMessage: "",
-            alertType: "info",
+            alertMessage: '',
+            alertType: 'info',
             showAlert: false,
 
             securityConfigList: {} as SecurityConfig,
-            passwordRepeat: "",
+            passwordRepeat: '',
         };
     },
     created() {
@@ -63,42 +72,38 @@ export default defineComponent({
     methods: {
         getPasswordConfig() {
             this.dataLoading = true;
-            fetch("/api/security/config", { headers: authHeader() })
+            fetch('/api/security/config', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (data) => {
-                        this.securityConfigList = data;
-                        this.passwordRepeat = this.securityConfigList.password;
-                        this.dataLoading = false;
-                    }
-                );
+                .then((data) => {
+                    this.securityConfigList = data;
+                    this.passwordRepeat = this.securityConfigList.password;
+                    this.dataLoading = false;
+                });
         },
         savePasswordConfig(e: Event) {
             e.preventDefault();
 
             if (this.securityConfigList.password != this.passwordRepeat) {
-                this.alertMessage = "Passwords are not equal";
-                this.alertType = "warning";
+                this.alertMessage = 'Passwords are not equal';
+                this.alertType = 'warning';
                 this.showAlert = true;
                 return;
             }
 
             const formData = new FormData();
-            formData.append("data", JSON.stringify(this.securityConfigList));
+            formData.append('data', JSON.stringify(this.securityConfigList));
 
-            fetch("/api/security/config", {
-                method: "POST",
+            fetch('/api/security/config', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (response) => {
-                        this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
-                        this.alertType = response.type;
-                        this.showAlert = true;
-                    }
-                );
+                .then((response) => {
+                    this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
+                    this.alertType = response.type;
+                    this.showAlert = true;
+                });
         },
     },
 });

webapp/src/views/SystemInfoView.vue

@@ -15,11 +15,11 @@
 
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
-import FirmwareInfo from "@/components/FirmwareInfo.vue";
-import HardwareInfo from "@/components/HardwareInfo.vue";
-import MemoryInfo from "@/components/MemoryInfo.vue";
-import HeapDetails from "@/components/HeapDetails.vue";
-import RadioInfo from "@/components/RadioInfo.vue";
+import FirmwareInfo from '@/components/FirmwareInfo.vue';
+import HardwareInfo from '@/components/HardwareInfo.vue';
+import MemoryInfo from '@/components/MemoryInfo.vue';
+import HeapDetails from '@/components/HeapDetails.vue';
+import RadioInfo from '@/components/RadioInfo.vue';
 import type { SystemStatus } from '@/types/SystemStatus';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { defineComponent } from 'vue';
@@ -38,16 +38,16 @@ export default defineComponent({
             dataLoading: true,
             systemDataList: {} as SystemStatus,
             allowVersionInfo: false,
-        }
+        };
     },
     created() {
-        this.allowVersionInfo = (localStorage.getItem("allowVersionInfo") || "0") == "1";
+        this.allowVersionInfo = (localStorage.getItem('allowVersionInfo') || '0') == '1';
         this.getSystemInfo();
     },
     methods: {
         getSystemInfo() {
             this.dataLoading = true;
-            fetch("/api/system/status", { headers: authHeader() })
+            fetch('/api/system/status', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.systemDataList = data;
@@ -55,7 +55,7 @@ export default defineComponent({
                     if (this.allowVersionInfo) {
                         this.getUpdateInfo();
                     }
-                })
+                });
         },
         getUpdateInfo() {
             if (this.systemDataList.git_hash === undefined) {
@@ -64,47 +64,51 @@ export default defineComponent({
 
             // If the left char is a "g" the value is the git hash (remove the "g")
             this.systemDataList.git_is_hash = this.systemDataList.git_hash?.substring(0, 1) == 'g';
-            this.systemDataList.git_hash = this.systemDataList.git_is_hash ? this.systemDataList.git_hash?.substring(1) : this.systemDataList.git_hash;
+            this.systemDataList.git_hash = this.systemDataList.git_is_hash
+                ? this.systemDataList.git_hash?.substring(1)
+                : this.systemDataList.git_hash;
 
             // Handle format "v0.1-5-gabcdefh"
-            if (this.systemDataList.git_hash?.lastIndexOf("-") >= 0) {
-                this.systemDataList.git_hash = this.systemDataList.git_hash.substring(this.systemDataList.git_hash.lastIndexOf("-") + 2)
+            if (this.systemDataList.git_hash?.lastIndexOf('-') >= 0) {
+                this.systemDataList.git_hash = this.systemDataList.git_hash.substring(
+                    this.systemDataList.git_hash.lastIndexOf('-') + 2
+                );
                 this.systemDataList.git_is_hash = true;
             }
 
-            const fetchUrl = "https://api.github.com/repos/tbnobody/OpenDTU/compare/"
-                + this.systemDataList.git_hash + "...HEAD";
+            const fetchUrl =
+                'https://api.github.com/repos/tbnobody/OpenDTU/compare/' + this.systemDataList.git_hash + '...HEAD';
 
             fetch(fetchUrl)
                 .then((response) => {
                     if (response.ok) {
-                        return response.json()
+                        return response.json();
                     }
-                    throw new Error(this.$t("systeminfo.VersionError"));
+                    throw new Error(this.$t('systeminfo.VersionError'));
                 })
                 .then((data) => {
                     if (data.total_commits > 0) {
-                        this.systemDataList.update_text = this.$t("systeminfo.VersionNew");
-                        this.systemDataList.update_status = "text-bg-danger";
+                        this.systemDataList.update_text = this.$t('systeminfo.VersionNew');
+                        this.systemDataList.update_status = 'text-bg-danger';
                         this.systemDataList.update_url = data.html_url;
                     } else {
-                        this.systemDataList.update_text = this.$t("systeminfo.VersionOk");
-                        this.systemDataList.update_status = "text-bg-success";
+                        this.systemDataList.update_text = this.$t('systeminfo.VersionOk');
+                        this.systemDataList.update_status = 'text-bg-success';
                     }
                 })
                 .catch((error: Error) => {
                     this.systemDataList.update_text = error.message;
-                    this.systemDataList.update_status = "text-bg-secondary";
+                    this.systemDataList.update_status = 'text-bg-secondary';
                 });
-        }
+        },
     },
     watch: {
         allowVersionInfo(allow: boolean) {
-            localStorage.setItem("allowVersionInfo", allow ? "1" : "0");
+            localStorage.setItem('allowVersionInfo', allow ? '1' : '0');
             if (allow) {
                 this.getUpdateInfo();
             }
-        }
-    }
+        },
+    },
 });
 </script>