webapp: Implemented reload button for info views

webapp/src/components/BasePage.vue

@@ -2,7 +2,15 @@
     <div :class="{'container-xxl': !isWideScreen,
     'container-fluid': isWideScreen}" role="main">
         <div class="page-header">
-            <h1>{{ title }}</h1>
+            <div class="row">
+                <div class="col-sm-11">
+                    <h1>{{ title }}</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>
+                </div>
+            </div>
         </div>
 
         <div class="text-center" v-if="isLoading">
@@ -19,12 +27,17 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import { BIconArrowClockwise } from 'bootstrap-icons-vue';
 
 export default defineComponent({
+    components: {
+        BIconArrowClockwise,
+    },
     props: {
         title: { type: String, required: true },
         isLoading: { type: Boolean, required: false, default: false },
         isWideScreen: { type: Boolean, required: false, default: false },
+        showReload: { type: Boolean, required: false, default: false },
     },
 });
 </script>

webapp/src/locales/de.json

@@ -23,7 +23,8 @@
         "Login": "Anmelden"
     },
     "base": {
-        "Loading": "Lade..."
+        "Loading": "Lade...",
+        "Reload": "Aktualisieren"
     },
     "localeswitcher": {
         "Dark": "Dunkel",

webapp/src/locales/en.json

@@ -23,7 +23,8 @@
         "Login": "Login"
     },
     "base": {
-        "Loading": "Loading..."
+        "Loading": "Loading...",
+        "Reload": "Reload"
     },
     "localeswitcher": {
         "Dark": "Dark",

webapp/src/locales/fr.json

@@ -23,7 +23,8 @@
         "Login": "Connexion"
     },
     "base": {
-        "Loading": "Chargement..."
+        "Loading": "Chargement...",
+        "Reload": "Reload"
     },
     "localeswitcher": {
         "Dark": "Dark",

webapp/src/views/MqttInfoView.vue

@@ -1,5 +1,5 @@
 <template>
-    <BasePage :title="$t('mqttinfo.MqttInformation')" :isLoading="dataLoading">
+    <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">

webapp/src/views/NetworkInfoView.vue

@@ -1,5 +1,5 @@
 <template>
-    <BasePage :title="$t('networkinfo.NetworkInformation')" :isLoading="dataLoading">
+    <BasePage :title="$t('networkinfo.NetworkInformation')" :isLoading="dataLoading" :show-reload="true" @reload="getNetworkInfo">
         <WifiStationInfo :networkStatus="networkDataList" />
         <div class="mt-5"></div>
         <WifiApInfo :networkStatus="networkDataList" />

webapp/src/views/NtpInfoView.vue

@@ -1,5 +1,5 @@
 <template>
-    <BasePage :title="$t('ntpinfo.NtpInformation')" :isLoading="dataLoading">
+    <BasePage :title="$t('ntpinfo.NtpInformation')" :isLoading="dataLoading" :show-reload="true" @reload="getNtpInfo">
         <CardElement :text="$t('ntpinfo.ConfigurationSummary')" textVariant="text-bg-primary">
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">

webapp/src/views/SystemInfoView.vue

@@ -1,5 +1,5 @@
 <template>
-    <BasePage :title="$t('systeminfo.SystemInfo')" :isLoading="dataLoading">
+    <BasePage :title="$t('systeminfo.SystemInfo')" :isLoading="dataLoading" :show-reload="true" @reload="getSystemInfo">
         <FirmwareInfo :systemStatus="systemDataList" />
         <div class="mt-5"></div>
         <HardwareInfo :systemStatus="systemDataList" />