vedirect vue code follows master

webapp/src/types/LiveDataStatus.ts

@@ -41,27 +41,3 @@ export interface LiveData {
     inverters: Inverter[],
     total: Total,
 }
-
-// Ve.Direct 
-export interface Vedirect {
-    SER: string,
-    PID: string,
-    FW: string,
-    age_critical: boolean,
-    data_age: 0,
-    LOAD: ValueObject,
-    CS: ValueObject,
-    MPPT: ValueObject,
-    OR: ValueObject,
-    ERR: ValueObject,
-    HSDS: ValueObject,
-    V: ValueObject,
-    I: ValueObject,
-    VPV: ValueObject,
-    PPV: ValueObject,
-    H19: ValueObject,
-    H20: ValueObject,
-    H21: ValueObject,
-    H22: ValueObject,
-    H23: ValueObject,
-}

webapp/src/types/VedirectConfig.ts

@@ -0,0 +1,5 @@
+export interface VedirectConfig {
+    vedirect_enabled: boolean,
+    vedirect_pollinterval: number,
+    vedirect_updatesonly: boolean
+}

webapp/src/types/VedirectLiveDataStatus.ts

@@ -0,0 +1,25 @@
+import type { ValueObject } from '@/types/LiveDataStatus';
+
+// Ve.Direct 
+export interface Vedirect {
+    SER: string,
+    PID: string,
+    FW: string,
+    age_critical: boolean,
+    data_age: 0,
+    LOAD: ValueObject,
+    CS: ValueObject,
+    MPPT: ValueObject,
+    OR: ValueObject,
+    ERR: ValueObject,
+    HSDS: ValueObject,
+    V: ValueObject,
+    I: ValueObject,
+    VPV: ValueObject,
+    PPV: ValueObject,
+    H19: ValueObject,
+    H20: ValueObject,
+    H21: ValueObject,
+    H22: ValueObject,
+    H23: ValueObject,
+}

webapp/src/types/VedirectStatus.ts

@@ -0,0 +1,4 @@
+export interface VedirectStatus {
+    vedirect_enabled: boolean,
+    vedirect_updatesonly: boolean
+}

webapp/src/views/VedirectAdminView.vue

@@ -1,21 +1,12 @@
 <template>
-    <div class="container-xxl" role="main">
+    <BasePage :title="'Ve.direct  Settings'" :isLoading="dataLoading">
-        <div class="page-header">
-            <h1>Ve.direct Settings</h1>
-        </div>
         <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
             {{ alertMessage }}
         </BootstrapAlert>
 
-        <div class="text-center" v-if="dataLoading">
-            <div class="spinner-border" role="status">
-                <span class="visually-hidden">Loading...</span>
-            </div>
-        </div>
-        <template v-if="!dataLoading">
         <form @submit="saveVedirectConfig">
             <div class="card">
-                    <div class="card-header bg-primary">Ve.direct Configuration</div>
+                <div class="card-header text-bg-primary">Ve.direct  Configuration</div>
                 <div class="card-body">
                     <div class="row mb-3">
                         <label class="col-sm-2 form-check-label" for="inputVedirect">Enable Ve.direct</label>
@@ -26,6 +17,7 @@
                             </div>
                         </div>
                     </div>
+
                     <div class="row mb-3" v-show="vedirectConfigList.vedirect_enabled">
                         <label for="inputPollInterval" class="col-sm-2 col-form-label">Poll Interval:</label>
                         <div class="col-sm-10">
@@ -37,11 +29,12 @@
                             </div>
                         </div>
                     </div>
+                
                     <div class="row mb-3" v-show="vedirectConfigList.vedirect_enabled">
-                            <label class="col-sm-2 form-check-label" for="inputTls">Send only updates</label>
+                        <label class="col-sm-2 form-check-label" for="inputUpdates">Send only updates</label>
                         <div class="col-sm-10">
                             <div class="form-check form-switch">
-                                    <input class="form-check-input" type="checkbox" id="inputTls"
+                                <input class="form-check-input" type="checkbox" id="inputUpdates"
                                     v-model="vedirectConfigList.vedirect_updatesonly" />
                             </div>
                         </div>
@@ -51,26 +44,24 @@
 
             <button type="submit" class="btn btn-primary mb-3">Save</button>
         </form>
-        </template>
+    </BasePage>
-    </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import BasePage from '@/components/BasePage.vue';
 import BootstrapAlert from "@/components/BootstrapAlert.vue";
+import type { VedirectConfig } from "@/types/VedirectConfig";
 
 export default defineComponent({
     components: {
+        BasePage,
         BootstrapAlert,
     },
     data() {
         return {
             dataLoading: true,
-            vedirectConfigList: {
+            vedirectConfigList: {} as VedirectConfig,
-                vedirect_enabled: false,
-                vedirect_pollinterval: 0,
-                vedirect_updatesonly: true,
-            },
             alertMessage: "",
             alertType: "info",
             showAlert: false,

webapp/src/views/VedirectInfoView.vue

@@ -1,18 +1,7 @@
 <template>
-    <div class="container-xxl" role="main">
+    <BasePage :title="'Ve.direct Info'" :isLoading="dataLoading">
-        <div class="page-header">
-            <h1>Ve.direct Info</h1>
-        </div>
-
-        <div class="text-center" v-if="dataLoading">
-            <div class="spinner-border" role="status">
-                <span class="visually-hidden">Loading...</span>
-            </div>
-        </div>
-
-        <template v-if="!dataLoading">
         <div class="card">
-                <div class="card-header bg-primary">Configuration Summary</div>
+            <div class="card-header text-bg-primary">Configuration Summary</div>
             <div class="card-body">
                 <div class="table-responsive">
                     <table class="table table-hover table-condensed">
@@ -20,8 +9,8 @@
                             <tr>
                                 <th>Status</th>
                                 <td class="badge" :class="{
-                                        'bg-danger': !vedirectDataList.vedirect_enabled,
+                                    'text-bg-danger': !vedirectDataList.vedirect_enabled,
-                                        'bg-success': vedirectDataList.vedirect_enabled,
+                                    'text-bg-success': vedirectDataList.vedirect_enabled,
                                 }">
                                     <span v-if="vedirectDataList.vedirect_enabled">enabled</span>
                                     <span v-else>disabled</span>
@@ -30,8 +19,8 @@
                             <tr v-show="vedirectDataList.vedirect_enabled">
                                     <th>Updates Only</th>
                                     <td class="badge" :class="{
-                                        'bg-danger': !vedirectDataList.vedirect_updatesonly,
+                                        'text-bg-danger': !vedirectDataList.vedirect_updatesonly,
-                                        'bg-success': vedirectDataList.vedirect_updatesonly,
+                                        'text-bg-success': vedirectDataList.vedirect_updatesonly,
                                     }">
                                         <span v-if="vedirectDataList.vedirect_updatesonly">enabled</span>
                                         <span v-else>disabled</span>
@@ -42,21 +31,22 @@
                 </div>
             </div>
         </div>
-        </template>
+    </BasePage>
-    </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import BasePage from '@/components/BasePage.vue';
+import type { VedirectStatus } from "@/types/VedirectStatus";
 
 export default defineComponent({
+    components: {
+        BasePage,
+    },
     data() {
         return {
             dataLoading: true,
-            vedirectDataList: {
+            vedirectDataList: {} as VedirectStatus,
-                vedirect_enabled: false,
-                vedirect_updatesonly: true,
-            },
         };
     },
     created() {

webapp/src/views/VedirectView.vue

@@ -12,8 +12,8 @@
                 <div class="card">
                     <div class="card-header d-flex justify-content-between align-items-center"
                         :class="{
-                            'bg-danger': vedirectData.age_critical,
+                            'text-bg-danger': vedirectData.age_critical,
-                            'bg-primary': !vedirectData.age_critical,
+                            'text-bg-primary': !vedirectData.age_critical,
                         }">
                         <div class="p-1 flex-grow-1">
                             <div class="d-flex flex-wrap">
@@ -33,7 +33,7 @@
                         </div>
                     </div>
                     <div class="card-body">
-                        <div class="row">
+                        <div class="row flex-row-reverse flex-wrap-reverse align-items-end g-3">
                             <div class="col order-0">
                                 <div class="card" :class="{ 'border-info': true }">
                                     <div class="card-header bg-info">Device Info</div>
@@ -176,7 +176,7 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import type { Vedirect } from '@/types/LiveDataStatus';
+import type { Vedirect } from '@/types/VedirectLiveDataStatus';
 
 export default defineComponent({
     components: {