From 5100c44c23b19e136cb2f4d44a37d203eeed8334 Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Tue, 21 Jun 2022 20:32:43 +0200
Subject: [PATCH] webapp: Use volar formatter

---
 webapp/src/App.vue                            |  20 +-
 webapp/src/components/AboutView.vue           |  15 +-
 webapp/src/components/DtuAdminView.vue        | 224 ++++-----
 webapp/src/components/FirmwareUpgradeView.vue | 320 ++++++-------
 webapp/src/components/HomeView.vue            | 251 +++++-----
 webapp/src/components/InverterAdminView.vue   | 443 +++++++++---------
 webapp/src/components/MqttAdminView.vue       | 426 +++++++----------
 webapp/src/components/MqttInfoView.vue        | 187 ++++----
 webapp/src/components/NavBar.vue              | 172 +++----
 webapp/src/components/NetworkAdminView.vue    | 348 ++++++--------
 webapp/src/components/NetworkInfoView.vue     |  36 +-
 webapp/src/components/NtpAdminView.vue        | 230 ++++-----
 webapp/src/components/NtpInfoView.vue         | 133 +++---
 webapp/src/components/SystemInfoView.vue      |  30 +-
 .../components/partials/BootstrapAlert.vue    | 192 ++++----
 .../src/components/partials/FirmwareInfo.vue  | 146 +++---
 webapp/src/components/partials/FsInfo.vue     |  58 +--
 .../src/components/partials/HardwareInfo.vue  |  84 ++--
 .../components/partials/InterfaceApInfo.vue   |  68 +--
 .../partials/InterfaceStationInfo.vue         | 100 ++--
 .../partials/InverterChannelInfo.vue          |  60 +--
 webapp/src/components/partials/MemoryInfo.vue |  79 ++--
 webapp/src/components/partials/WifiApInfo.vue |  91 ++--
 .../components/partials/WifiStationInfo.vue   | 123 +++--
 24 files changed, 1759 insertions(+), 2077 deletions(-)

diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index 1e37818b..0ea1f3de 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -1,25 +1,25 @@
 <template>
-  <NavBar />
-  <main class="container-fluid">
-    <router-view />
-  </main>
+    <NavBar />
+    <main class="container-fluid">
+        <router-view />
+    </main>
 </template>
 
 <script>
 import NavBar from "./components/NavBar.vue";
 
 export default {
-  name: "App",
-  components: {
-    NavBar,
-  },
+    name: "App",
+    components: {
+        NavBar,
+    },
 };
 </script>
 
 <style>
 /* Show it is fixed to the top */
 body {
-  min-height: 75rem;
-  padding-top: 4.5rem;
+    min-height: 75rem;
+    padding-top: 4.5rem;
 }
 </style>
diff --git a/webapp/src/components/AboutView.vue b/webapp/src/components/AboutView.vue
index fcf775b4..37452dc6 100644
--- a/webapp/src/components/AboutView.vue
+++ b/webapp/src/components/AboutView.vue
@@ -1,11 +1,10 @@
 <template>
-  <div class="container" role="main">
-    <div class="page-header">
-      <h1>About</h1>
-      This project was started from
-      <a href="https://www.mikrocontroller.net/topic/525778" target="_blank"
-        >this discussion. (Mikrocontroller.net)</a
-      >
+    <div class="container" role="main">
+        <div class="page-header">
+            <h1>About</h1>
+            This project was started from
+            <a href="https://www.mikrocontroller.net/topic/525778" target="_blank">this discussion.
+                (Mikrocontroller.net)</a>
+        </div>
     </div>
-  </div>
 </template>
\ No newline at end of file
diff --git a/webapp/src/components/DtuAdminView.vue b/webapp/src/components/DtuAdminView.vue
index beef744f..29da8f9f 100644
--- a/webapp/src/components/DtuAdminView.vue
+++ b/webapp/src/components/DtuAdminView.vue
@@ -1,76 +1,50 @@
 <template>
-  <div class="container" role="main">
-    <div class="page-header">
-      <h1>DTU Settings</h1>
-    </div>
-    <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
-      {{ this.alertMessage }}
-    </BootstrapAlert>
-    <form @submit="saveDtuConfig">
-      <div class="card">
-        <div class="card-header text-white bg-primary">DTU Configuration</div>
-        <div class="card-body">
-          <div class="row mb-3">
-            <label for="inputDtuSerial" class="col-sm-2 col-form-label"
-              >Serial:</label
-            >
-            <div class="col-sm-10">
-              <input
-                type="number"
-                class="form-control"
-                id="inputDtuSerial"
-                min="1"
-                max="99999999999"
-                placeholder="DTU Serial"
-                v-model="dtuConfigList.dtu_serial"
-              />
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <label for="inputPollInterval" class="col-sm-2 col-form-label"
-              >Poll Interval:</label
-            >
-            <div class="col-sm-10">
-              <div class="input-group">
-                <input
-                  type="number"
-                  class="form-control"
-                  id="inputPollInterval"
-                  min="1"
-                  max="86400"
-                  placeholder="Poll Interval in Seconds"
-                  v-model="dtuConfigList.dtu_pollinterval"
-                  aria-describedby="pollIntervalDescription"
-                />
-                <span class="input-group-text" id="pollIntervalDescription"
-                  >seconds</span
-                >
-              </div>
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <label for="inputTimezone" class="col-sm-2 col-form-label"
-              >PA Level:</label
-            >
-            <div class="col-sm-10">
-              <select class="form-select" v-model="dtuConfigList.dtu_palevel">
-                <option
-                  v-for="palevel in palevelList"
-                  :key="palevel.key"
-                  :value="palevel.key"
-                >
-                  {{ palevel.value }}
-                </option>
-              </select>
-            </div>
-          </div>
+    <div class="container" role="main">
+        <div class="page-header">
+            <h1>DTU Settings</h1>
         </div>
-      </div>
-      <button type="submit" class="btn btn-primary mb-3">Save</button>
-    </form>
-  </div>
+        <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
+            {{ this.alertMessage }}
+        </BootstrapAlert>
+        <form @submit="saveDtuConfig">
+            <div class="card">
+                <div class="card-header text-white bg-primary">DTU Configuration</div>
+                <div class="card-body">
+                    <div class="row mb-3">
+                        <label for="inputDtuSerial" class="col-sm-2 col-form-label">Serial:</label>
+                        <div class="col-sm-10">
+                            <input type="number" class="form-control" id="inputDtuSerial" min="1" max="99999999999"
+                                placeholder="DTU Serial" v-model="dtuConfigList.dtu_serial" />
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label for="inputPollInterval" class="col-sm-2 col-form-label">Poll Interval:</label>
+                        <div class="col-sm-10">
+                            <div class="input-group">
+                                <input type="number" class="form-control" id="inputPollInterval" min="1" max="86400"
+                                    placeholder="Poll Interval in Seconds" v-model="dtuConfigList.dtu_pollinterval"
+                                    aria-describedby="pollIntervalDescription" />
+                                <span class="input-group-text" id="pollIntervalDescription">seconds</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label for="inputTimezone" class="col-sm-2 col-form-label">PA Level:</label>
+                        <div class="col-sm-10">
+                            <select class="form-select" v-model="dtuConfigList.dtu_palevel">
+                                <option v-for="palevel in palevelList" :key="palevel.key" :value="palevel.key">
+                                    {{ palevel.value }}
+                                </option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <button type="submit" class="btn btn-primary mb-3">Save</button>
+        </form>
+    </div>
 </template>
 
 <script>
@@ -78,61 +52,61 @@ import { defineComponent } from 'vue';
 import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
 
 export default defineComponent({
-  components: {
-    BootstrapAlert,
-  },
-  data() {
-    return {
-      dtuConfigList: [],
-      palevelList: [
-        { key: 0, value: "Minimum (-18 dBm)" },
-        { key: 1, value: "Low (-12 dBm)" },
-        { key: 2, value: "High (-6 dBm)" },
-        { key: 3, value: "Maximum (0 dBm)" },
-      ],
-      alertMessage: "",
-      alertType: "info",
-      showAlert: false,
-    };
-  },
-  created() {
-    this.getDtuConfig();
-  },
-  methods: {
-    getDtuConfig() {
-      fetch("/api/dtu/config")
-        .then((response) => response.json())
-        .then(
-          function (data) {
-            this.dtuConfigList = data;
-          }.bind(this)
-        );
+    components: {
+        BootstrapAlert,
     },
-    saveDtuConfig(e) {
-      e.preventDefault();
-
-      const formData = new FormData();
-      formData.append("data", JSON.stringify(this.dtuConfigList));
-
-      fetch("/api/dtu/config", {
-        method: "POST",
-        body: formData,
-      })
-        .then(function (response) {
-          if (response.status != 200) {
-            throw response.status;
-          } else {
-            return response.json();
-          }
-        })
-        .then(
-          function (response) {
-            this.alertMessage = response.message;
-            this.alertType = response.type;
-            this.showAlert = true;
-          }.bind(this)
-        );
+    data() {
+        return {
+            dtuConfigList: [],
+            palevelList: [
+                { key: 0, value: "Minimum (-18 dBm)" },
+                { key: 1, value: "Low (-12 dBm)" },
+                { key: 2, value: "High (-6 dBm)" },
+                { key: 3, value: "Maximum (0 dBm)" },
+            ],
+            alertMessage: "",
+            alertType: "info",
+            showAlert: false,
+        };
+    },
+    created() {
+        this.getDtuConfig();
+    },
+    methods: {
+        getDtuConfig() {
+            fetch("/api/dtu/config")
+                .then((response) => response.json())
+                .then(
+                    function (data) {
+                        this.dtuConfigList = data;
+                    }.bind(this)
+                );
+        },
+        saveDtuConfig(e) {
+            e.preventDefault();
+
+            const formData = new FormData();
+            formData.append("data", JSON.stringify(this.dtuConfigList));
+
+            fetch("/api/dtu/config", {
+                method: "POST",
+                body: formData,
+            })
+                .then(function (response) {
+                    if (response.status != 200) {
+                        throw response.status;
+                    } else {
+                        return response.json();
+                    }
+                })
+                .then(
+                    function (response) {
+                        this.alertMessage = response.message;
+                        this.alertType = response.type;
+                        this.showAlert = true;
+                    }.bind(this)
+                );
+        },
     },
-  },
 });
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/FirmwareUpgradeView.vue b/webapp/src/components/FirmwareUpgradeView.vue
index bd0e8b0a..55b02da8 100644
--- a/webapp/src/components/FirmwareUpgradeView.vue
+++ b/webapp/src/components/FirmwareUpgradeView.vue
@@ -1,82 +1,74 @@
 <template>
-  <div class="container" role="main">
-    <div class="page-header">
-      <h1>Firmware Upgrade</h1>
-    </div>
-
-    <div class="position-relative" v-if="loading">
-      <div class="position-absolute top-50 start-50 translate-middle">
-        <div class="spinner-border" role="status">
-          <span class="visually-hidden">Loading...</span>
+    <div class="container" role="main">
+        <div class="page-header">
+            <h1>Firmware Upgrade</h1>
         </div>
-      </div>
-    </div>
 
-    <div v-if="!loading && !uploading && OTAError !== null" class="card">
-      <div class="card-header text-white bg-danger">OTA Error</div>
-      <div class="card-body text-center">
-        <p class="h1 mb-2"><BIconExclamationCircleFill /></p>
-
-        <span style="vertical-align: middle" class="ml-2">
-          {{ OTAError }}
-        </span>
-        <br />
-        <br />
-        <button class="btn btn-light" @click="clear">
-          <BIconArrowLeft /> Back
-        </button>
-        <button class="btn btn-primary" @click="retryOTA">
-          <BIconArrowRepeat /> Retry
-        </button>
-      </div>
-    </div>
-
-    <div v-else-if="!loading && !uploading && OTASuccess" class="card">
-      <div class="card-header text-white bg-success">OTA Status</div>
-      <div class="card-body text-center">
-        <span class="h1 mb-2"><BIconCheckCircle /></span>
-        <span> OTA Success </span>
-        <br />
-        <br />
-        <button class="btn btn-primary" @click="clear">
-          <BIconArrowLeft /> Back
-        </button>
-      </div>
-    </div>
-
-    <div v-else-if="!loading && !uploading" class="card">
-      <div class="card-header text-white bg-primary">Firmware Upload</div>
-      <div class="card-body text-center">
-        <div class="form-group pt-2 mt-3">
-          <input
-            class="form-control"
-            type="file"
-            ref="file"
-            accept=".bin,.bin.gz"
-            @change="uploadOTA"
-          />
+        <div class="position-relative" v-if="loading">
+            <div class="position-absolute top-50 start-50 translate-middle">
+                <div class="spinner-border" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
 
-    <div v-else-if="!loading && uploading" class="card">
-      <div class="card-header text-white bg-primary">Upload Progress</div>
-      <div class="card-body text-center">
-        <div class="progress">
-          <div
-            class="progress-bar"
-            role="progressbar"
-            :style="{ width: this.progress + '%' }"
-            v-bind:aria-valuenow="this.progress"
-            aria-valuemin="0"
-            aria-valuemax="100"
-          >
-            {{ progress }}%
-          </div>
+        <div v-if="!loading && !uploading && OTAError !== null" class="card">
+            <div class="card-header text-white bg-danger">OTA Error</div>
+            <div class="card-body text-center">
+                <p class="h1 mb-2">
+                    <BIconExclamationCircleFill />
+                </p>
+
+                <span style="vertical-align: middle" class="ml-2">
+                    {{ OTAError }}
+                </span>
+                <br />
+                <br />
+                <button class="btn btn-light" @click="clear">
+                    <BIconArrowLeft /> Back
+                </button>
+                <button class="btn btn-primary" @click="retryOTA">
+                    <BIconArrowRepeat /> Retry
+                </button>
+            </div>
+        </div>
+
+        <div v-else-if="!loading && !uploading && OTASuccess" class="card">
+            <div class="card-header text-white bg-success">OTA Status</div>
+            <div class="card-body text-center">
+                <span class="h1 mb-2">
+                    <BIconCheckCircle />
+                </span>
+                <span> OTA Success </span>
+                <br />
+                <br />
+                <button class="btn btn-primary" @click="clear">
+                    <BIconArrowLeft /> Back
+                </button>
+            </div>
+        </div>
+
+        <div v-else-if="!loading && !uploading" class="card">
+            <div class="card-header text-white bg-primary">Firmware Upload</div>
+            <div class="card-body text-center">
+                <div class="form-group pt-2 mt-3">
+                    <input class="form-control" type="file" ref="file" accept=".bin,.bin.gz" @change="uploadOTA" />
+                </div>
+            </div>
+        </div>
+
+        <div v-else-if="!loading && uploading" class="card">
+            <div class="card-header text-white bg-primary">Upload Progress</div>
+            <div class="card-body text-center">
+                <div class="progress">
+                    <div class="progress-bar" role="progressbar" :style="{ width: this.progress + '%' }"
+                        v-bind:aria-valuenow="this.progress" aria-valuemin="0" aria-valuemax="100">
+                        {{ progress }}%
+                    </div>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -84,101 +76,101 @@ import { defineComponent } from 'vue';
 import SparkMD5 from "spark-md5";
 
 export default defineComponent({
-  data() {
-    return {
-      loading: true,
-      uploading: false,
-      progress: 0,
-      OTAError: null,
-      OTASuccess: false,
-      type: "firmware",
-      file: null,
-    };
-  },
-  methods: {
-    fileMD5(file) {
-      return new Promise((resolve, reject) => {
-        const blobSlice =
-          File.prototype.slice ||
-          File.prototype.mozSlice ||
-          File.prototype.webkitSlice;
-        const chunkSize = 2097152; // Read in chunks of 2MB
-        const chunks = Math.ceil(file.size / chunkSize);
-        const spark = new SparkMD5.ArrayBuffer();
-        const fileReader = new FileReader();
-        let currentChunk = 0;
-        fileReader.onload = (e) => {
-          spark.append(e.target.result); // Append array buffer
-          currentChunk += 1;
-          if (currentChunk < chunks) {
-            loadNext();
-          } else {
-            const md5 = spark.end();
-            resolve(md5);
-          }
+    data() {
+        return {
+            loading: true,
+            uploading: false,
+            progress: 0,
+            OTAError: null,
+            OTASuccess: false,
+            type: "firmware",
+            file: null,
         };
-        fileReader.onerror = (e) => {
-          reject(e);
-        };
-        const loadNext = () => {
-          const start = currentChunk * chunkSize;
-          const end =
-            start + chunkSize >= file.size ? file.size : start + chunkSize;
-          fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
-        };
-        loadNext();
-      });
     },
-    uploadOTA(event) {
-      this.uploading = true;
-      const formData = new FormData();
-      if (event !== null) {
-        [this.file] = event.target.files;
-      }
-      const request = new XMLHttpRequest();
-      request.addEventListener("load", () => {
-        // request.response will hold the response from the server
-        if (request.status === 200) {
-          this.OTASuccess = true;
-        } else if (request.status !== 500) {
-          this.OTAError = `[HTTP ERROR] ${request.statusText}`;
-        } else {
-          this.OTAError = request.responseText;
-        }
-        this.uploading = false;
-        this.progress = 0;
-      });
-      // Upload progress
-      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);
-          formData.append("firmware", this.file, "firmware");
-          request.open("post", "/api/firmware/update");
-          request.send(formData);
-        })
-        .catch(() => {
-          this.OTAError =
-            "Unknown error while upload, check the console for details.";
-          this.uploading = false;
-          this.progress = 0;
-        });
+    methods: {
+        fileMD5(file) {
+            return new Promise((resolve, reject) => {
+                const blobSlice =
+                    File.prototype.slice ||
+                    File.prototype.mozSlice ||
+                    File.prototype.webkitSlice;
+                const chunkSize = 2097152; // Read in chunks of 2MB
+                const chunks = Math.ceil(file.size / chunkSize);
+                const spark = new SparkMD5.ArrayBuffer();
+                const fileReader = new FileReader();
+                let currentChunk = 0;
+                fileReader.onload = (e) => {
+                    spark.append(e.target.result); // Append array buffer
+                    currentChunk += 1;
+                    if (currentChunk < chunks) {
+                        loadNext();
+                    } else {
+                        const md5 = spark.end();
+                        resolve(md5);
+                    }
+                };
+                fileReader.onerror = (e) => {
+                    reject(e);
+                };
+                const loadNext = () => {
+                    const start = currentChunk * chunkSize;
+                    const end =
+                        start + chunkSize >= file.size ? file.size : start + chunkSize;
+                    fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
+                };
+                loadNext();
+            });
+        },
+        uploadOTA(event) {
+            this.uploading = true;
+            const formData = new FormData();
+            if (event !== null) {
+                [this.file] = event.target.files;
+            }
+            const request = new XMLHttpRequest();
+            request.addEventListener("load", () => {
+                // request.response will hold the response from the server
+                if (request.status === 200) {
+                    this.OTASuccess = true;
+                } else if (request.status !== 500) {
+                    this.OTAError = `[HTTP ERROR] ${request.statusText}`;
+                } else {
+                    this.OTAError = request.responseText;
+                }
+                this.uploading = false;
+                this.progress = 0;
+            });
+            // Upload progress
+            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);
+                    formData.append("firmware", this.file, "firmware");
+                    request.open("post", "/api/firmware/update");
+                    request.send(formData);
+                })
+                .catch(() => {
+                    this.OTAError =
+                        "Unknown error while upload, check the console for details.";
+                    this.uploading = false;
+                    this.progress = 0;
+                });
+        },
+        retryOTA() {
+            this.OTAError = null;
+            this.OTASuccess = false;
+            this.uploadOTA(null);
+        },
+        clear() {
+            this.OTAError = null;
+            this.OTASuccess = false;
+        },
     },
-    retryOTA() {
-      this.OTAError = null;
-      this.OTASuccess = false;
-      this.uploadOTA(null);
+    mounted() {
+        this.loading = false;
     },
-    clear() {
-      this.OTAError = null;
-      this.OTASuccess = false;
-    },
-  },
-  mounted() {
-    this.loading = false;
-  },
 });
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/HomeView.vue b/webapp/src/components/HomeView.vue
index 1cc6e3c5..5c40ff06 100644
--- a/webapp/src/components/HomeView.vue
+++ b/webapp/src/components/HomeView.vue
@@ -1,72 +1,48 @@
 <template>
-  <div class="container" role="main">
-    <div class="page-header">
-      <h1>Live Data</h1>
-      <template v-if="waitForData == true">Waiting for data... </template>
-      <template v-else>
-        <div class="d-flex align-items-start">
-          <div
-            class="nav flex-column nav-pills me-3"
-            id="v-pills-tab"
-            role="tablist"
-            aria-orientation="vertical"
-          >
-            <button
-              v-for="inverter in inverterData"
-              :key="inverter.serial"
-              class="nav-link"
-              :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"
-            >
-              {{ inverter.name }}
-            </button>
-          </div>
-
-          <div class="tab-content" id="v-pills-tabContent">
-            <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 text-white bg-primary"
-                  :class="{
-                    'bg-danger': inverter.age_critical,
-                    'bg-primary': !inverter.age_critical,
-                  }"
-                >
-                  {{ inverter.name }} (Inverter Serial Number:
-                  {{ inverter.serial }}) (Data Age:
-                  {{ inverter.data_age }} seconds)
-                </div>
-                <div class="card-body">
-                  <div class="row row-cols-1 row-cols-md-3 g-4">
-                    <div v-for="channel in 5" :key="channel">
-                      <InverterChannelInfo
-                        v-if="inverter[channel - 1]"
-                        :channelData="inverter[channel - 1]"
-                        :channelNumber="channel - 1"
-                      />
+    <div class="container" role="main">
+        <div class="page-header">
+            <h1>Live Data</h1>
+            <template v-if="waitForData == true">Waiting for data... </template>
+            <template v-else>
+                <div class="d-flex align-items-start">
+                    <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist"
+                        aria-orientation="vertical">
+                        <button v-for="inverter in inverterData" :key="inverter.serial" class="nav-link"
+                            :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">
+                            {{ inverter.name }}
+                        </button>
+                    </div>
+
+                    <div class="tab-content" id="v-pills-tabContent">
+                        <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 text-white bg-primary" :class="{
+                                    'bg-danger': inverter.age_critical,
+                                    'bg-primary': !inverter.age_critical,
+                                }">
+                                    {{ inverter.name }} (Inverter Serial Number:
+                                    {{ inverter.serial }}) (Data Age:
+                                    {{ inverter.data_age }} seconds)
+                                </div>
+                                <div class="card-body">
+                                    <div class="row row-cols-1 row-cols-md-3 g-4">
+                                        <div v-for="channel in 5" :key="channel">
+                                            <InverterChannelInfo v-if="inverter[channel - 1]"
+                                                :channelData="inverter[channel - 1]" :channelNumber="channel - 1" />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                  </div>
                 </div>
-              </div>
-            </div>
-          </div>
+            </template>
         </div>
-      </template>
     </div>
-  </div>
 </template>
 
 <script>
@@ -75,84 +51,83 @@ import InverterChannelInfo from "@/components/partials/InverterChannelInfo";
 import bootstrap from "bootstrap/dist/js/bootstrap.js";
 
 export default defineComponent({
-  components: {
-    InverterChannelInfo,
-  },
-  data() {
-    return {
-      socket: null,
-      heartInterval: null,
-      waitForData: true,
-      inverterData: [],
-      isFirstFetchAfterConnect: true,
-    };
-  },
-  created() {
-    this.initSocket();
-  },
-  unmounted() {
-    this.closeSocket();
-  },
-  updated() {
-    // Select first tab
-    if (this.isFirstFetchAfterConnect) {
-      this.isFirstFetchAfterConnect = false;
-
-      const firstTabEl = this.$el.querySelector(
-        "#v-pills-tab:first-child button"
-      );
-      if (firstTabEl != null) {
-        const firstTab = new bootstrap.Tab(firstTabEl);
-        firstTab.show();
-      }
-    }
-  },
-  methods: {
-    initSocket() {
-      console.log("Starting connection to WebSocket Server");
-
-      const { protocol, host } = location;
-      const webSocketUrl = `${
-        protocol === "https" ? "wss" : "ws"
-      }://${host}/livedata`;
-
-      this.socket = new WebSocket(webSocketUrl);
-
-      this.socket.onmessage = function (event) {
-        console.log(event);
-        this.inverterData = JSON.parse(event.data);
-        this.waitForData = false;
-        this.heartCheck(); // Reset heartbeat detection
-      }.bind(this);
-
-      this.socket.onopen = function (event) {
-        console.log(event);
-        console.log("Successfully connected to the echo websocket server...");
-      };
-
-      // Listen to window events , When the window closes , Take the initiative to disconnect websocket Connect
-      window.onbeforeunload = () => {
+    components: {
+        InverterChannelInfo,
+    },
+    data() {
+        return {
+            socket: null,
+            heartInterval: null,
+            waitForData: true,
+            inverterData: [],
+            isFirstFetchAfterConnect: true,
+        };
+    },
+    created() {
+        this.initSocket();
+    },
+    unmounted() {
         this.closeSocket();
-      };
     },
-    // Send heartbeat packets regularly * 59s Send a heartbeat
-    heartCheck() {
-      this.heartInterval && clearTimeout(this.heartInterval);
-      this.heartInterval = setInterval(() => {
-        if (this.socket.readyState === 1) {
-          // Connection status
-          this.socket.send("ping");
-        } else {
-          this.initSocket(); // Breakpoint reconnection 5 Time
+    updated() {
+        // Select first tab
+        if (this.isFirstFetchAfterConnect) {
+            this.isFirstFetchAfterConnect = false;
+
+            const firstTabEl = this.$el.querySelector(
+                "#v-pills-tab:first-child button"
+            );
+            if (firstTabEl != null) {
+                const firstTab = new bootstrap.Tab(firstTabEl);
+                firstTab.show();
+            }
         }
-      }, 59 * 1000);
     },
-    /** To break off websocket Connect */
-    closeSocket() {
-      this.socket.close();
-      this.heartInterval && clearTimeout(this.heartInterval);
-      this.isFirstFetchAfterConnect = true;
+    methods: {
+        initSocket() {
+            console.log("Starting connection to WebSocket Server");
+
+            const { protocol, host } = location;
+            const webSocketUrl = `${protocol === "https" ? "wss" : "ws"
+                }://${host}/livedata`;
+
+            this.socket = new WebSocket(webSocketUrl);
+
+            this.socket.onmessage = function (event) {
+                console.log(event);
+                this.inverterData = JSON.parse(event.data);
+                this.waitForData = false;
+                this.heartCheck(); // Reset heartbeat detection
+            }.bind(this);
+
+            this.socket.onopen = function (event) {
+                console.log(event);
+                console.log("Successfully connected to the echo websocket server...");
+            };
+
+            // Listen to window events , When the window closes , Take the initiative to disconnect websocket Connect
+            window.onbeforeunload = () => {
+                this.closeSocket();
+            };
+        },
+        // Send heartbeat packets regularly * 59s Send a heartbeat
+        heartCheck() {
+            this.heartInterval && clearTimeout(this.heartInterval);
+            this.heartInterval = setInterval(() => {
+                if (this.socket.readyState === 1) {
+                    // Connection status
+                    this.socket.send("ping");
+                } else {
+                    this.initSocket(); // Breakpoint reconnection 5 Time
+                }
+            }, 59 * 1000);
+        },
+        /** To break off websocket Connect */
+        closeSocket() {
+            this.socket.close();
+            this.heartInterval && clearTimeout(this.heartInterval);
+            this.isFirstFetchAfterConnect = true;
+        },
     },
-  },
 });
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/InverterAdminView.vue b/webapp/src/components/InverterAdminView.vue
index 84f5a8e3..68074a2e 100644
--- a/webapp/src/components/InverterAdminView.vue
+++ b/webapp/src/components/InverterAdminView.vue
@@ -1,112 +1,95 @@
 <template>
-  <div class="container" role="main">
-    <div class="page-header">
-      <h1>Inverter Settings</h1>
-    </div>
-
-    <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
-      {{ this.alertMessage }}
-    </BootstrapAlert>
-
-    <div class="card">
-      <div class="card-header text-white bg-primary">Add a new Inverter</div>
-      <div class="card-body">
-        <form class="form-inline" v-on:submit.prevent="onSubmit">
-          <div class="form-group">
-            <label>Serial</label>
-            <input
-              v-model="inverterData.serial"
-              type="number"
-              class="form-control ml-sm-2 mr-sm-4 my-2"
-              required
-            />
-          </div>
-          <div class="form-group">
-            <label>Name</label>
-            <input
-              v-model="inverterData.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">Add</button>
-          </div>
-        </form>
-      </div>
-    </div>
-
-    <div class="card mt-5">
-      <div class="card-header text-white bg-primary">Inverter List</div>
-      <div class="card-body">
-        <div class="table-responsive">
-          <table class="table">
-            <thead>
-              <tr>
-                <th scope="col">Serial</th>
-                <th>Name</th>
-                <th>Type</th>
-                <th>Action</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="inverter in sortedInverters" v-bind:key="inverter.id">
-                <template v-if="editId == inverter.id">
-                  <td>
-                    <input
-                      v-model="editInverterData.serial"
-                      type="number"
-                      class="form-control"
-                    />
-                  </td>
-                  <td>
-                    <input
-                      v-model="editInverterData.name"
-                      type="text"
-                      class="form-control"
-                      maxlength="31"
-                    />
-                  </td>
-                  <td>
-                    {{ editInverterData.type }}
-                  </td>
-                  <td>
-                    <a href="#" class="icon">
-                      <BIconCheck v-on:click="onEditSubmit(inverter.id)" />
-                    </a>
-                    <a href="#" class="icon">
-                      <BIconX v-on:click="onCancel" />
-                    </a>
-                  </td>
-                </template>
-                <template v-else>
-                  <td>
-                    {{ inverter.serial }}
-                  </td>
-                  <td>
-                    {{ inverter.name }}
-                  </td>
-                  <td>
-                    {{ inverter.type }}
-                  </td>
-                  <td>
-                    <a href="#" class="icon">
-                      <BIconTrash v-on:click="onDelete(inverter.id)" />
-                    </a>
-                    <a href="#" class="icon">
-                      <BIconPencil v-on:click="onEdit(inverter)" />
-                    </a>
-                  </td>
-                </template>
-              </tr>
-            </tbody>
-          </table>
+    <div class="container" role="main">
+        <div class="page-header">
+            <h1>Inverter Settings</h1>
+        </div>
+
+        <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
+            {{ this.alertMessage }}
+        </BootstrapAlert>
+
+        <div class="card">
+            <div class="card-header text-white bg-primary">Add a new Inverter</div>
+            <div class="card-body">
+                <form class="form-inline" v-on:submit.prevent="onSubmit">
+                    <div class="form-group">
+                        <label>Serial</label>
+                        <input v-model="inverterData.serial" type="number" class="form-control ml-sm-2 mr-sm-4 my-2"
+                            required />
+                    </div>
+                    <div class="form-group">
+                        <label>Name</label>
+                        <input v-model="inverterData.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">Add</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <div class="card mt-5">
+            <div class="card-header text-white bg-primary">Inverter List</div>
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table">
+                        <thead>
+                            <tr>
+                                <th scope="col">Serial</th>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Action</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="inverter in sortedInverters" v-bind:key="inverter.id">
+                                <template v-if="editId == inverter.id">
+                                    <td>
+                                        <input v-model="editInverterData.serial" type="number" class="form-control" />
+                                    </td>
+                                    <td>
+                                        <input v-model="editInverterData.name" type="text" class="form-control"
+                                            maxlength="31" />
+                                    </td>
+                                    <td>
+                                        {{ editInverterData.type }}
+                                    </td>
+                                    <td>
+                                        <a href="#" class="icon">
+                                            <BIconCheck v-on:click="onEditSubmit(inverter.id)" />
+                                        </a>
+                                        <a href="#" class="icon">
+                                            <BIconX v-on:click="onCancel" />
+                                        </a>
+                                    </td>
+                                </template>
+                                <template v-else>
+                                    <td>
+                                        {{ inverter.serial }}
+                                    </td>
+                                    <td>
+                                        {{ inverter.name }}
+                                    </td>
+                                    <td>
+                                        {{ inverter.type }}
+                                    </td>
+                                    <td>
+                                        <a href="#" class="icon">
+                                            <BIconTrash v-on:click="onDelete(inverter.id)" />
+                                        </a>
+                                        <a href="#" class="icon">
+                                            <BIconPencil v-on:click="onEdit(inverter)" />
+                                        </a>
+                                    </td>
+                                </template>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -114,137 +97,137 @@ import { defineComponent } from 'vue';
 import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
 
 export default defineComponent({
-  components: {
-    BootstrapAlert,
-  },
-  data() {
-    return {
-      editId: "-1",
-      inverterData: {
-        id: "",
-        serial: "",
-        name: "",
-      },
-      editInverterData: {
-        id: "",
-        serial: "",
-        name: "",
-        type: "",
-      },
-      inverters: [],
-      alertMessage: "",
-      alertType: "info",
-      showAlert: false,
-    };
-  },
-  created() {
-    this.getInverters();
-  },
-  computed: {
-    sortedInverters() {
-      return this.inverters.slice().sort((a, b) => {
-        return a.serial - b.serial;
-      });
+    components: {
+        BootstrapAlert,
     },
-  },
-  methods: {
-    getInverters() {
-      fetch("/api/inverter/list")
-        .then((response) => response.json())
-        .then((data) => (this.inverters = data.inverter));
+    data() {
+        return {
+            editId: "-1",
+            inverterData: {
+                id: "",
+                serial: "",
+                name: "",
+            },
+            editInverterData: {
+                id: "",
+                serial: "",
+                name: "",
+                type: "",
+            },
+            inverters: [],
+            alertMessage: "",
+            alertType: "info",
+            showAlert: false,
+        };
     },
-    onSubmit() {
-      const formData = new FormData();
-      formData.append("data", JSON.stringify(this.inverterData));
+    created() {
+        this.getInverters();
+    },
+    computed: {
+        sortedInverters() {
+            return this.inverters.slice().sort((a, b) => {
+                return a.serial - b.serial;
+            });
+        },
+    },
+    methods: {
+        getInverters() {
+            fetch("/api/inverter/list")
+                .then((response) => response.json())
+                .then((data) => (this.inverters = data.inverter));
+        },
+        onSubmit() {
+            const formData = new FormData();
+            formData.append("data", JSON.stringify(this.inverterData));
 
-      fetch("/api/inverter/add", {
-        method: "POST",
-        body: formData,
-      })
-        .then(function (response) {
-          if (response.status != 200) {
-            throw response.status;
-          } else {
-            return response.json();
-          }
-        })
-        .then(
-          function (response) {
-            this.alertMessage = response.message;
-            this.alertType = response.type;
-            this.showAlert = true;
-          }.bind(this)
-        )
-        .then(this.getInverters());
+            fetch("/api/inverter/add", {
+                method: "POST",
+                body: formData,
+            })
+                .then(function (response) {
+                    if (response.status != 200) {
+                        throw response.status;
+                    } else {
+                        return response.json();
+                    }
+                })
+                .then(
+                    function (response) {
+                        this.alertMessage = response.message;
+                        this.alertType = response.type;
+                        this.showAlert = true;
+                    }.bind(this)
+                )
+                .then(this.getInverters());
 
-      this.inverterData.serial = "";
-      this.inverterData.name = "";
-    },
-    onDelete(id) {
-      const formData = new FormData();
-      formData.append("data", JSON.stringify({ id: id }));
+            this.inverterData.serial = "";
+            this.inverterData.name = "";
+        },
+        onDelete(id) {
+            const formData = new FormData();
+            formData.append("data", JSON.stringify({ id: id }));
 
-      fetch("/api/inverter/del", {
-        method: "POST",
-        body: formData,
-      })
-        .then(function (response) {
-          if (response.status != 200) {
-            throw response.status;
-          } else {
-            return response.json();
-          }
-        })
-        .then(
-          function (response) {
-            this.alertMessage = response.message;
-            this.alertType = response.type;
-            this.showAlert = true;
-          }.bind(this)
-        )
-        .then(this.getInverters());
-    },
-    onEdit(inverter) {
-      this.editId = inverter.id;
-      this.editInverterData.serial = inverter.serial;
-      this.editInverterData.name = inverter.name;
-      this.editInverterData.type = inverter.type;
-    },
-    onCancel() {
-      this.editId = "-1";
-      this.editInverterData.serial = "";
-      this.editInverterData.name = "";
-    },
-    onEditSubmit(id) {
-      const formData = new FormData();
-      this.editInverterData.id = id;
-      formData.append("data", JSON.stringify(this.editInverterData));
+            fetch("/api/inverter/del", {
+                method: "POST",
+                body: formData,
+            })
+                .then(function (response) {
+                    if (response.status != 200) {
+                        throw response.status;
+                    } else {
+                        return response.json();
+                    }
+                })
+                .then(
+                    function (response) {
+                        this.alertMessage = response.message;
+                        this.alertType = response.type;
+                        this.showAlert = true;
+                    }.bind(this)
+                )
+                .then(this.getInverters());
+        },
+        onEdit(inverter) {
+            this.editId = inverter.id;
+            this.editInverterData.serial = inverter.serial;
+            this.editInverterData.name = inverter.name;
+            this.editInverterData.type = inverter.type;
+        },
+        onCancel() {
+            this.editId = "-1";
+            this.editInverterData.serial = "";
+            this.editInverterData.name = "";
+        },
+        onEditSubmit(id) {
+            const formData = new FormData();
+            this.editInverterData.id = id;
+            formData.append("data", JSON.stringify(this.editInverterData));
 
-      fetch("/api/inverter/edit", {
-        method: "POST",
-        body: formData,
-      })
-        .then(function (response) {
-          if (response.status != 200) {
-            throw response.status;
-          } else {
-            return response.json();
-          }
-        })
-        .then(
-          function (response) {
-            this.alertMessage = response.message;
-            this.alertType = response.type;
-            this.showAlert = true;
-          }.bind(this)
-        )
-        .then(this.getInverters());
+            fetch("/api/inverter/edit", {
+                method: "POST",
+                body: formData,
+            })
+                .then(function (response) {
+                    if (response.status != 200) {
+                        throw response.status;
+                    } else {
+                        return response.json();
+                    }
+                })
+                .then(
+                    function (response) {
+                        this.alertMessage = response.message;
+                        this.alertType = response.type;
+                        this.showAlert = true;
+                    }.bind(this)
+                )
+                .then(this.getInverters());
 
-      this.editId = "-1";
-      this.editInverterData.serial = "";
-      this.editInverterData.name = "";
-      this.editInverterData.type = "";
+            this.editId = "-1";
+            this.editInverterData.serial = "";
+            this.editInverterData.name = "";
+            this.editInverterData.type = "";
+        },
     },
-  },
 });
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/MqttAdminView.vue b/webapp/src/components/MqttAdminView.vue
index 88abe8f9..60afe191 100644
--- a/webapp/src/components/MqttAdminView.vue
+++ b/webapp/src/components/MqttAdminView.vue
@@ -1,213 +1,135 @@
 <template>
-  <div class="container" role="main">
-    <div class="page-header">
-      <h1>MqTT Settings</h1>
+    <div class="container" role="main">
+        <div class="page-header">
+            <h1>MqTT Settings</h1>
+        </div>
+        <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
+            {{ this.alertMessage }}
+        </BootstrapAlert>
+        <form @submit="saveMqttConfig">
+            <div class="card">
+                <div class="card-header text-white bg-primary">MqTT Configuration</div>
+                <div class="card-body">
+                    <div class="form-check form-switch">
+                        <input class="form-check-input" type="checkbox" id="inputMqtt"
+                            v-model="mqttConfigList.mqtt_enabled" />
+                        <label class="form-check-label" for="inputMqtt">Enable MqTT</label>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card mt-5" v-show="mqttConfigList.mqtt_enabled">
+                <div class="card-header text-white bg-primary">
+                    MqTT Broker Parameter
+                </div>
+                <div class="card-body">
+                    <div class="row mb-3">
+                        <label for="inputHostname" class="col-sm-2 col-form-label">Hostname:</label>
+                        <div class="col-sm-10">
+                            <input type="text" class="form-control" id="inputHostname" maxlength="32"
+                                placeholder="Hostname or IP address" v-model="mqttConfigList.mqtt_hostname" />
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label for="inputPort" class="col-sm-2 col-form-label">Port:</label>
+                        <div class="col-sm-10">
+                            <input type="number" class="form-control" id="inputPort" min="1" max="65535"
+                                placeholder="Port number" v-model="mqttConfigList.mqtt_port" />
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label for="inputUsername" class="col-sm-2 col-form-label">Username:</label>
+                        <div class="col-sm-10">
+                            <input type="text" class="form-control" id="inputUsername" maxlength="32"
+                                placeholder="Username, leave empty for anonymous connection"
+                                v-model="mqttConfigList.mqtt_username" />
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label for="inputPassword" class="col-sm-2 col-form-label">Password:</label>
+                        <div class="col-sm-10">
+                            <input type="text" class="form-control" id="inputPassword" maxlength="32"
+                                placeholder="Password, leave empty for anonymous connection"
+                                v-model="mqttConfigList.mqtt_password" />
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label for="inputTopic" class="col-sm-2 col-form-label">Base Topic:</label>
+                        <div class="col-sm-10">
+                            <input type="text" class="form-control" id="inputTopic" maxlength="32"
+                                placeholder="Base topic, will be prepend to all published topics (e.g. inverter/)"
+                                v-model="mqttConfigList.mqtt_topic" />
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label for="inputPublishInterval" class="col-sm-2 col-form-label">Publish Interval:</label>
+                        <div class="col-sm-10">
+                            <div class="input-group">
+                                <input type="number" class="form-control" id="inputPublishInterval" min="5" max="86400"
+                                    placeholder="Publish Interval in Seconds"
+                                    v-model="mqttConfigList.mqtt_publish_interval"
+                                    aria-describedby="publishIntervalDescription" />
+                                <span class="input-group-text" id="publishIntervalDescription">seconds</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label class="col-sm-2 form-check-label" for="inputRetain">Enable Retain Flag</label>
+                        <div class="col-sm-10">
+                            <div class="form-check form-switch">
+                                <input class="form-check-input" type="checkbox" id="inputRetain"
+                                    v-model="mqttConfigList.mqtt_retain" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card mt-5" v-show="mqttConfigList.mqtt_enabled">
+                <div class="card-header text-white bg-primary">LWT Parameters</div>
+                <div class="card-body">
+                    <div class="row mb-3">
+                        <label for="inputLwtTopic" class="col-sm-2 col-form-label">LWT Topic:</label>
+                        <div class="col-sm-10">
+                            <div class="input-group">
+                                <span class="input-group-text" id="basic-addon3">{{
+                                        mqttConfigList.mqtt_topic
+                                }}</span>
+                                <input type="text" class="form-control" id="inputLwtTopic" maxlength="32"
+                                    placeholder="LWT topic, will be append base topic"
+                                    v-model="mqttConfigList.mqtt_lwt_topic" aria-describedby="basic-addon3" />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label for="inputLwtOnline" class="col-sm-2 col-form-label">LWT Online message:</label>
+                        <div class="col-sm-10">
+                            <input type="text" class="form-control" id="inputLwtOnline" maxlength="20"
+                                placeholder="Message that will be published to LWT topic when online"
+                                v-model="mqttConfigList.mqtt_lwt_online" />
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label for="inputLwtOffline" class="col-sm-2 col-form-label">LWT Offline message:</label>
+                        <div class="col-sm-10">
+                            <input type="text" class="form-control" id="inputLwtOffline" maxlength="20"
+                                placeholder="Message that will be published to LWT topic when offline"
+                                v-model="mqttConfigList.mqtt_lwt_offline" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <button type="submit" class="btn btn-primary mb-3">Save</button>
+        </form>
     </div>
-    <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
-      {{ this.alertMessage }}
-    </BootstrapAlert>
-    <form @submit="saveMqttConfig">
-      <div class="card">
-        <div class="card-header text-white bg-primary">MqTT Configuration</div>
-        <div class="card-body">
-          <div class="form-check form-switch">
-            <input
-              class="form-check-input"
-              type="checkbox"
-              id="inputMqtt"
-              v-model="mqttConfigList.mqtt_enabled"
-            />
-            <label class="form-check-label" for="inputMqtt">Enable MqTT</label>
-          </div>
-        </div>
-      </div>
-
-      <div class="card mt-5" v-show="mqttConfigList.mqtt_enabled">
-        <div class="card-header text-white bg-primary">
-          MqTT Broker Parameter
-        </div>
-        <div class="card-body">
-          <div class="row mb-3">
-            <label for="inputHostname" class="col-sm-2 col-form-label"
-              >Hostname:</label
-            >
-            <div class="col-sm-10">
-              <input
-                type="text"
-                class="form-control"
-                id="inputHostname"
-                maxlength="32"
-                placeholder="Hostname or IP address"
-                v-model="mqttConfigList.mqtt_hostname"
-              />
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <label for="inputPort" class="col-sm-2 col-form-label">Port:</label>
-            <div class="col-sm-10">
-              <input
-                type="number"
-                class="form-control"
-                id="inputPort"
-                min="1"
-                max="65535"
-                placeholder="Port number"
-                v-model="mqttConfigList.mqtt_port"
-              />
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <label for="inputUsername" class="col-sm-2 col-form-label"
-              >Username:</label
-            >
-            <div class="col-sm-10">
-              <input
-                type="text"
-                class="form-control"
-                id="inputUsername"
-                maxlength="32"
-                placeholder="Username, leave empty for anonymous connection"
-                v-model="mqttConfigList.mqtt_username"
-              />
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <label for="inputPassword" class="col-sm-2 col-form-label"
-              >Password:</label
-            >
-            <div class="col-sm-10">
-              <input
-                type="text"
-                class="form-control"
-                id="inputPassword"
-                maxlength="32"
-                placeholder="Password, leave empty for anonymous connection"
-                v-model="mqttConfigList.mqtt_password"
-              />
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <label for="inputTopic" class="col-sm-2 col-form-label"
-              >Base Topic:</label
-            >
-            <div class="col-sm-10">
-              <input
-                type="text"
-                class="form-control"
-                id="inputTopic"
-                maxlength="32"
-                placeholder="Base topic, will be prepend to all published topics (e.g. inverter/)"
-                v-model="mqttConfigList.mqtt_topic"
-              />
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <label for="inputPublishInterval" class="col-sm-2 col-form-label"
-              >Publish Interval:</label
-            >
-            <div class="col-sm-10">
-              <div class="input-group">
-                <input
-                  type="number"
-                  class="form-control"
-                  id="inputPublishInterval"
-                  min="5"
-                  max="86400"
-                  placeholder="Publish Interval in Seconds"
-                  v-model="mqttConfigList.mqtt_publish_interval"
-                  aria-describedby="publishIntervalDescription"
-                />
-                <span class="input-group-text" id="publishIntervalDescription"
-                  >seconds</span
-                >
-              </div>
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <label class="col-sm-2 form-check-label" for="inputRetain"
-              >Enable Retain Flag</label
-            >
-            <div class="col-sm-10">
-              <div class="form-check form-switch">
-                <input
-                  class="form-check-input"
-                  type="checkbox"
-                  id="inputRetain"
-                  v-model="mqttConfigList.mqtt_retain"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="card mt-5" v-show="mqttConfigList.mqtt_enabled">
-        <div class="card-header text-white bg-primary">LWT Parameters</div>
-        <div class="card-body">
-          <div class="row mb-3">
-            <label for="inputLwtTopic" class="col-sm-2 col-form-label"
-              >LWT Topic:</label
-            >
-            <div class="col-sm-10">
-              <div class="input-group">
-                <span class="input-group-text" id="basic-addon3">{{
-                  mqttConfigList.mqtt_topic
-                }}</span>
-                <input
-                  type="text"
-                  class="form-control"
-                  id="inputLwtTopic"
-                  maxlength="32"
-                  placeholder="LWT topic, will be append base topic"
-                  v-model="mqttConfigList.mqtt_lwt_topic"
-                  aria-describedby="basic-addon3"
-                />
-              </div>
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <label for="inputLwtOnline" class="col-sm-2 col-form-label"
-              >LWT Online message:</label
-            >
-            <div class="col-sm-10">
-              <input
-                type="text"
-                class="form-control"
-                id="inputLwtOnline"
-                maxlength="20"
-                placeholder="Message that will be published to LWT topic when online"
-                v-model="mqttConfigList.mqtt_lwt_online"
-              />
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <label for="inputLwtOffline" class="col-sm-2 col-form-label"
-              >LWT Offline message:</label
-            >
-            <div class="col-sm-10">
-              <input
-                type="text"
-                class="form-control"
-                id="inputLwtOffline"
-                maxlength="20"
-                placeholder="Message that will be published to LWT topic when offline"
-                v-model="mqttConfigList.mqtt_lwt_offline"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <button type="submit" class="btn btn-primary mb-3">Save</button>
-    </form>
-  </div>
 </template>
 
 <script>
@@ -215,51 +137,51 @@ import { defineComponent } from 'vue';
 import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
 
 export default defineComponent({
-  components: {
-    BootstrapAlert,
-  },
-  data() {
-    return {
-      mqttConfigList: [],
-      alertMessage: "",
-      alertType: "info",
-      showAlert: false,
-    };
-  },
-  created() {
-    this.getMqttConfig();
-  },
-  methods: {
-    getMqttConfig() {
-      fetch("/api/mqtt/config")
-        .then((response) => response.json())
-        .then((data) => (this.mqttConfigList = data));
+    components: {
+        BootstrapAlert,
     },
-    saveMqttConfig(e) {
-      e.preventDefault();
-
-      const formData = new FormData();
-      formData.append("data", JSON.stringify(this.mqttConfigList));
-
-      fetch("/api/mqtt/config", {
-        method: "POST",
-        body: formData,
-      })
-        .then(function (response) {
-          if (response.status != 200) {
-            throw response.status;
-          } else {
-            return response.json();
-          }
-        })
-        .then(
-          function (response) {
-            this.alertMessage = response.message;
-            this.alertType = response.type;
-            this.showAlert = true;
-          }.bind(this)
-        );
+    data() {
+        return {
+            mqttConfigList: [],
+            alertMessage: "",
+            alertType: "info",
+            showAlert: false,
+        };
+    },
+    created() {
+        this.getMqttConfig();
+    },
+    methods: {
+        getMqttConfig() {
+            fetch("/api/mqtt/config")
+                .then((response) => response.json())
+                .then((data) => (this.mqttConfigList = data));
+        },
+        saveMqttConfig(e) {
+            e.preventDefault();
+
+            const formData = new FormData();
+            formData.append("data", JSON.stringify(this.mqttConfigList));
+
+            fetch("/api/mqtt/config", {
+                method: "POST",
+                body: formData,
+            })
+                .then(function (response) {
+                    if (response.status != 200) {
+                        throw response.status;
+                    } else {
+                        return response.json();
+                    }
+                })
+                .then(
+                    function (response) {
+                        this.alertMessage = response.message;
+                        this.alertType = response.type;
+                        this.showAlert = true;
+                    }.bind(this)
+                );
+        },
     },
-  },
 });
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/MqttInfoView.vue b/webapp/src/components/MqttInfoView.vue
index 8696bbda..76ae234d 100644
--- a/webapp/src/components/MqttInfoView.vue
+++ b/webapp/src/components/MqttInfoView.vue
@@ -1,112 +1,103 @@
 <template>
-  <div class="container" role="main">
-    <div class="page-header">
-      <h1>MqTT Info</h1>
-    </div>
-
-    <div class="card">
-      <div class="card-header text-white bg-primary">Configuration Summary</div>
-      <div class="card-body">
-        <div class="table-responsive">
-          <table class="table table-hover table-condensed">
-            <tbody>
-              <tr>
-                <th>Status</th>
-                <td
-                  class="badge"
-                  :class="{
-                    'bg-danger': !mqttDataList.mqtt_enabled,
-                    'bg-success': mqttDataList.mqtt_enabled,
-                  }"
-                >
-                  <span v-if="mqttDataList.mqtt_enabled">enabled</span>
-                  <span v-else>disabled</span>
-                </td>
-              </tr>
-              <tr>
-                <th>Server</th>
-                <td>{{ mqttDataList.mqtt_hostname }}</td>
-              </tr>
-              <tr>
-                <th>Port</th>
-                <td>{{ mqttDataList.mqtt_port }}</td>
-              </tr>
-              <tr>
-                <th>Username</th>
-                <td>{{ mqttDataList.mqtt_username }}</td>
-              </tr>
-              <tr>
-                <th>Base Topic</th>
-                <td>{{ mqttDataList.mqtt_topic }}</td>
-              </tr>
-              <tr>
-                <th>Publish Tnterval</th>
-                <td>{{ mqttDataList.mqtt_publish_interval }} seconds</td>
-              </tr>
-              <tr>
-                <th>Retain</th>
-                <td
-                  class="badge"
-                  :class="{
-                    'bg-danger': !mqttDataList.mqtt_retain,
-                    'bg-success': mqttDataList.mqtt_retain,
-                  }"
-                >
-                  <span v-if="mqttDataList.mqtt_retain">enabled</span>
-                  <span v-else>disabled</span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+    <div class="container" role="main">
+        <div class="page-header">
+            <h1>MqTT Info</h1>
         </div>
-      </div>
-    </div>
 
-    <div class="card mt-5">
-      <div class="card-header text-white bg-primary">Runtime Summary</div>
-      <div class="card-body">
-        <div class="table-responsive">
-          <table class="table table-hover table-condensed">
-            <tbody>
-              <tr>
-                <th>Connection Status</th>
-                <td
-                  class="badge"
-                  :class="{
-                    'bg-danger': !mqttDataList.mqtt_connected,
-                    'bg-success': mqttDataList.mqtt_connected,
-                  }"
-                >
-                  <span v-if="mqttDataList.mqtt_connected">connected</span>
-                  <span v-else>disconnected</span>
-                </td>
-              </tr>
-            </tbody>
-          </table>
+        <div class="card">
+            <div class="card-header text-white bg-primary">Configuration Summary</div>
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table table-hover table-condensed">
+                        <tbody>
+                            <tr>
+                                <th>Status</th>
+                                <td class="badge" :class="{
+                                    'bg-danger': !mqttDataList.mqtt_enabled,
+                                    'bg-success': mqttDataList.mqtt_enabled,
+                                }">
+                                    <span v-if="mqttDataList.mqtt_enabled">enabled</span>
+                                    <span v-else>disabled</span>
+                                </td>
+                            </tr>
+                            <tr>
+                                <th>Server</th>
+                                <td>{{ mqttDataList.mqtt_hostname }}</td>
+                            </tr>
+                            <tr>
+                                <th>Port</th>
+                                <td>{{ mqttDataList.mqtt_port }}</td>
+                            </tr>
+                            <tr>
+                                <th>Username</th>
+                                <td>{{ mqttDataList.mqtt_username }}</td>
+                            </tr>
+                            <tr>
+                                <th>Base Topic</th>
+                                <td>{{ mqttDataList.mqtt_topic }}</td>
+                            </tr>
+                            <tr>
+                                <th>Publish Tnterval</th>
+                                <td>{{ mqttDataList.mqtt_publish_interval }} seconds</td>
+                            </tr>
+                            <tr>
+                                <th>Retain</th>
+                                <td class="badge" :class="{
+                                    'bg-danger': !mqttDataList.mqtt_retain,
+                                    'bg-success': mqttDataList.mqtt_retain,
+                                }">
+                                    <span v-if="mqttDataList.mqtt_retain">enabled</span>
+                                    <span v-else>disabled</span>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+
+        <div class="card mt-5">
+            <div class="card-header text-white bg-primary">Runtime Summary</div>
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table table-hover table-condensed">
+                        <tbody>
+                            <tr>
+                                <th>Connection Status</th>
+                                <td class="badge" :class="{
+                                    'bg-danger': !mqttDataList.mqtt_connected,
+                                    'bg-success': mqttDataList.mqtt_connected,
+                                }">
+                                    <span v-if="mqttDataList.mqtt_connected">connected</span>
+                                    <span v-else>disconnected</span>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  data() {
-    return {
-      mqttDataList: [],
-    };
-  },
-  created() {
-    this.getNtpInfo();
-  },
-  methods: {
-    getNtpInfo() {
-      fetch("/api/mqtt/status")
-        .then((response) => response.json())
-        .then((data) => (this.mqttDataList = data));
+    data() {
+        return {
+            mqttDataList: [],
+        };
+    },
+    created() {
+        this.getNtpInfo();
+    },
+    methods: {
+        getNtpInfo() {
+            fetch("/api/mqtt/status")
+                .then((response) => response.json())
+                .then((data) => (this.mqttDataList = data));
+        },
     },
-  },
 });
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/NavBar.vue b/webapp/src/components/NavBar.vue
index 1fda0080..3d53e16e 100644
--- a/webapp/src/components/NavBar.vue
+++ b/webapp/src/components/NavBar.vue
@@ -1,109 +1,73 @@
 <template>
-  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
-    <div class="container-fluid">
-      <a class="navbar-brand" href="#">OpenDTU</a>
-      <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" id="navbarNavAltMarkup">
-        <div class="navbar-nav">
-          <li class="nav-item">
-            <router-link class="nav-link" to="/">Live Data</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"
-            >
-              Settings
-            </a>
-            <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
-              <li>
-                <router-link class="dropdown-item" to="/settings/network"
-                  >Network Settings</router-link
-                >
-              </li>
-              <li>
-                <router-link class="dropdown-item" to="/settings/ntp"
-                  >NTP Settings</router-link
-                >
-              </li>
-              <li>
-                <router-link class="dropdown-item" to="/settings/mqtt"
-                  >MqTT Settings</router-link
-                >
-              </li>
-              <li>
-                <router-link class="dropdown-item" to="/settings/inverter"
-                  >Inverter Settings</router-link
-                >
-              </li>
-              <li>
-                <router-link class="dropdown-item" to="/settings/dtu"
-                  >DTU Settings</router-link
-                >
-              </li>
-              <li><hr class="dropdown-divider" /></li>
-              <li>
-                <router-link class="dropdown-item" to="/firmware/upgrade"
-                  >Firmware Upgrade</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"
-            >
-              Info
-            </a>
-            <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
-              <li>
-                <router-link class="dropdown-item" to="/info/system"
-                  >System</router-link
-                >
-              </li>
-              <li>
-                <router-link class="dropdown-item" to="/info/network"
-                  >Network</router-link
-                >
-              </li>
-              <li>
-                <router-link class="dropdown-item" to="/info/ntp"
-                  >NTP</router-link
-                >
-              </li>
-              <li>
-                <router-link class="dropdown-item" to="/info/mqtt"
-                  >MqTT</router-link
-                >
-              </li>
-            </ul>
-          </li>
-          <li class="nav-item">
-            <router-link class="nav-link" to="/about">About</router-link>
-          </li>
+    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="#">OpenDTU</a>
+            <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" id="navbarNavAltMarkup">
+                <div class="navbar-nav">
+                    <li class="nav-item">
+                        <router-link class="nav-link" to="/">Live Data</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">
+                            Settings
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
+                            <li>
+                                <router-link class="dropdown-item" to="/settings/network">Network Settings</router-link>
+                            </li>
+                            <li>
+                                <router-link class="dropdown-item" to="/settings/ntp">NTP Settings</router-link>
+                            </li>
+                            <li>
+                                <router-link class="dropdown-item" to="/settings/mqtt">MqTT Settings</router-link>
+                            </li>
+                            <li>
+                                <router-link class="dropdown-item" to="/settings/inverter">Inverter Settings
+                                </router-link>
+                            </li>
+                            <li>
+                                <router-link class="dropdown-item" to="/settings/dtu">DTU Settings</router-link>
+                            </li>
+                            <li>
+                                <hr class="dropdown-divider" />
+                            </li>
+                            <li>
+                                <router-link class="dropdown-item" to="/firmware/upgrade">Firmware Upgrade</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">
+                            Info
+                        </a>
+                        <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
+                            <li>
+                                <router-link class="dropdown-item" to="/info/system">System</router-link>
+                            </li>
+                            <li>
+                                <router-link class="dropdown-item" to="/info/network">Network</router-link>
+                            </li>
+                            <li>
+                                <router-link class="dropdown-item" to="/info/ntp">NTP</router-link>
+                            </li>
+                            <li>
+                                <router-link class="dropdown-item" to="/info/mqtt">MqTT</router-link>
+                            </li>
+                        </ul>
+                    </li>
+                    <li class="nav-item">
+                        <router-link class="nav-link" to="/about">About</router-link>
+                    </li>
+                </div>
+            </div>
         </div>
-      </div>
-    </div>
-  </nav>
+    </nav>
 </template>
 
 <script>
diff --git a/webapp/src/components/NetworkAdminView.vue b/webapp/src/components/NetworkAdminView.vue
index 8915276d..52278849 100644
--- a/webapp/src/components/NetworkAdminView.vue
+++ b/webapp/src/components/NetworkAdminView.vue
@@ -1,170 +1,100 @@
 <template>
-  <div class="container" role="main">
-    <div class="page-header">
-      <h1>Network Settings</h1>
+    <div class="container" role="main">
+        <div class="page-header">
+            <h1>Network Settings</h1>
+        </div>
+        <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
+            {{ this.alertMessage }}
+        </BootstrapAlert>
+        <form @submit="saveNetworkConfig">
+            <div class="card">
+                <div class="card-header text-white bg-primary">WiFi Configuration</div>
+                <div class="card-body">
+                    <div class="row mb-3">
+                        <label for="inputSSID" class="col-sm-2 col-form-label">WiFi SSID:</label>
+                        <div class="col-sm-10">
+                            <input type="text" class="form-control" id="inputSSID" maxlength="32" placeholder="SSID"
+                                v-model="networkConfigList.ssid" />
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label for="inputPassword" class="col-sm-2 col-form-label">WiFi Password:</label>
+                        <div class="col-sm-10">
+                            <input type="password" class="form-control" id="inputPassword" maxlength="32"
+                                placeholder="PSK" v-model="networkConfigList.password" />
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label for="inputHostname" class="col-sm-2 col-form-label">Hostname:</label>
+                        <div class="col-sm-10">
+                            <input type="text" class="form-control" id="inputHostname" maxlength="32"
+                                placeholder="Hostname" v-model="networkConfigList.hostname" />
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label class="col-sm-2 form-check-label" for="inputDHCP">Enable DHCP</label>
+                        <div class="col-sm-10">
+                            <div class="form-check form-switch">
+                                <input class="form-check-input" type="checkbox" id="inputDHCP"
+                                    v-model="networkConfigList.dhcp" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card" v-show="!networkConfigList.dhcp">
+                <div class="card-header text-white bg-primary">
+                    Static IP Configuration
+                </div>
+                <div class="card-body">
+                    <div class="row mb-3">
+                        <label for="inputIP" class="col-sm-2 col-form-label">IP Address:</label>
+                        <div class="col-sm-10">
+                            <input type="text" class="form-control" id="inputIP" maxlength="32" placeholder="IP address"
+                                v-model="networkConfigList.ipaddress" />
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label for="inputNetmask" class="col-sm-2 col-form-label">Netmask:</label>
+                        <div class="col-sm-10">
+                            <input type="text" class="form-control" id="inputNetmask" maxlength="32"
+                                placeholder="Netmask" v-model="networkConfigList.netmask" />
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label for="inputGateway" class="col-sm-2 col-form-label">Default Gateway:</label>
+                        <div class="col-sm-10">
+                            <input type="text" class="form-control" id="inputGateway" maxlength="32"
+                                placeholder="Default Gateway" v-model="networkConfigList.gateway" />
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label for="inputDNS1" class="col-sm-2 col-form-label">DNS Server 1:</label>
+                        <div class="col-sm-10">
+                            <input type="text" class="form-control" id="inputDNS1" maxlength="32"
+                                placeholder="DNS Server 1" v-model="networkConfigList.dns1" />
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label for="inputDNS2" class="col-sm-2 col-form-label">DNS Server 2:</label>
+                        <div class="col-sm-10">
+                            <input type="text" class="form-control" id="inputDNS2" maxlength="32"
+                                placeholder="DNS Server 2" v-model="networkConfigList.dns2" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <button type="submit" class="btn btn-primary mb-3">Save</button>
+        </form>
     </div>
-    <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
-      {{ this.alertMessage }}
-    </BootstrapAlert>
-    <form @submit="saveNetworkConfig">
-      <div class="card">
-        <div class="card-header text-white bg-primary">WiFi Configuration</div>
-        <div class="card-body">
-          <div class="row mb-3">
-            <label for="inputSSID" class="col-sm-2 col-form-label"
-              >WiFi SSID:</label
-            >
-            <div class="col-sm-10">
-              <input
-                type="text"
-                class="form-control"
-                id="inputSSID"
-                maxlength="32"
-                placeholder="SSID"
-                v-model="networkConfigList.ssid"
-              />
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <label for="inputPassword" class="col-sm-2 col-form-label"
-              >WiFi Password:</label
-            >
-            <div class="col-sm-10">
-              <input
-                type="password"
-                class="form-control"
-                id="inputPassword"
-                maxlength="32"
-                placeholder="PSK"
-                v-model="networkConfigList.password"
-              />
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <label for="inputHostname" class="col-sm-2 col-form-label"
-              >Hostname:</label
-            >
-            <div class="col-sm-10">
-              <input
-                type="text"
-                class="form-control"
-                id="inputHostname"
-                maxlength="32"
-                placeholder="Hostname"
-                v-model="networkConfigList.hostname"
-              />
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <label class="col-sm-2 form-check-label" for="inputDHCP"
-              >Enable DHCP</label
-            >
-            <div class="col-sm-10">
-              <div class="form-check form-switch">
-                <input
-                  class="form-check-input"
-                  type="checkbox"
-                  id="inputDHCP"
-                  v-model="networkConfigList.dhcp"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="card" v-show="!networkConfigList.dhcp">
-        <div class="card-header text-white bg-primary">
-          Static IP Configuration
-        </div>
-        <div class="card-body">
-          <div class="row mb-3">
-            <label for="inputIP" class="col-sm-2 col-form-label"
-              >IP Address:</label
-            >
-            <div class="col-sm-10">
-              <input
-                type="text"
-                class="form-control"
-                id="inputIP"
-                maxlength="32"
-                placeholder="IP address"
-                v-model="networkConfigList.ipaddress"
-              />
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <label for="inputNetmask" class="col-sm-2 col-form-label"
-              >Netmask:</label
-            >
-            <div class="col-sm-10">
-              <input
-                type="text"
-                class="form-control"
-                id="inputNetmask"
-                maxlength="32"
-                placeholder="Netmask"
-                v-model="networkConfigList.netmask"
-              />
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <label for="inputGateway" class="col-sm-2 col-form-label"
-              >Default Gateway:</label
-            >
-            <div class="col-sm-10">
-              <input
-                type="text"
-                class="form-control"
-                id="inputGateway"
-                maxlength="32"
-                placeholder="Default Gateway"
-                v-model="networkConfigList.gateway"
-              />
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <label for="inputDNS1" class="col-sm-2 col-form-label"
-              >DNS Server 1:</label
-            >
-            <div class="col-sm-10">
-              <input
-                type="text"
-                class="form-control"
-                id="inputDNS1"
-                maxlength="32"
-                placeholder="DNS Server 1"
-                v-model="networkConfigList.dns1"
-              />
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <label for="inputDNS2" class="col-sm-2 col-form-label"
-              >DNS Server 2:</label
-            >
-            <div class="col-sm-10">
-              <input
-                type="text"
-                class="form-control"
-                id="inputDNS2"
-                maxlength="32"
-                placeholder="DNS Server 2"
-                v-model="networkConfigList.dns2"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-      <button type="submit" class="btn btn-primary mb-3">Save</button>
-    </form>
-  </div>
 </template>
 
 <script>
@@ -172,51 +102,51 @@ import { defineComponent } from 'vue';
 import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
 
 export default defineComponent({
-  components: {
-    BootstrapAlert,
-  },
-  data() {
-    return {
-      networkConfigList: [],
-      alertMessage: "",
-      alertType: "info",
-      showAlert: false,
-    };
-  },
-  created() {
-    this.getNetworkConfig();
-  },
-  methods: {
-    getNetworkConfig() {
-      fetch("/api/network/config")
-        .then((response) => response.json())
-        .then((data) => (this.networkConfigList = data));
+    components: {
+        BootstrapAlert,
     },
-    saveNetworkConfig(e) {
-      e.preventDefault();
-
-      const formData = new FormData();
-      formData.append("data", JSON.stringify(this.networkConfigList));
-
-      fetch("/api/network/config", {
-        method: "POST",
-        body: formData,
-      })
-        .then(function (response) {
-          if (response.status != 200) {
-            throw response.status;
-          } else {
-            return response.json();
-          }
-        })
-        .then(
-          function (response) {
-            this.alertMessage = response.message;
-            this.alertType = response.type;
-            this.showAlert = true;
-          }.bind(this)
-        );
+    data() {
+        return {
+            networkConfigList: [],
+            alertMessage: "",
+            alertType: "info",
+            showAlert: false,
+        };
+    },
+    created() {
+        this.getNetworkConfig();
+    },
+    methods: {
+        getNetworkConfig() {
+            fetch("/api/network/config")
+                .then((response) => response.json())
+                .then((data) => (this.networkConfigList = data));
+        },
+        saveNetworkConfig(e) {
+            e.preventDefault();
+
+            const formData = new FormData();
+            formData.append("data", JSON.stringify(this.networkConfigList));
+
+            fetch("/api/network/config", {
+                method: "POST",
+                body: formData,
+            })
+                .then(function (response) {
+                    if (response.status != 200) {
+                        throw response.status;
+                    } else {
+                        return response.json();
+                    }
+                })
+                .then(
+                    function (response) {
+                        this.alertMessage = response.message;
+                        this.alertType = response.type;
+                        this.showAlert = true;
+                    }.bind(this)
+                );
+        },
     },
-  },
 });
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/NetworkInfoView.vue b/webapp/src/components/NetworkInfoView.vue
index 99a6030b..3f2173f4 100644
--- a/webapp/src/components/NetworkInfoView.vue
+++ b/webapp/src/components/NetworkInfoView.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="container" role="main">
-    <div class="page-header">
-      <h1>Network Info</h1>
+    <div class="container" role="main">
+        <div class="page-header">
+            <h1>Network Info</h1>
+        </div>
+        <WifiStationInfo />
+        <div class="mt-5"></div>
+        <WifiApInfo />
+        <div class="mt-5"></div>
+        <InterfaceStationInfo />
+        <div class="mt-5"></div>
+        <InterfaceApInfo />
+        <div class="mt-5"></div>
     </div>
-    <WifiStationInfo />
-    <div class="mt-5"></div>
-    <WifiApInfo />
-    <div class="mt-5"></div>
-    <InterfaceStationInfo />
-    <div class="mt-5"></div>
-    <InterfaceApInfo />
-    <div class="mt-5"></div>
-  </div>
 </template>
 
 <script>
@@ -22,11 +22,11 @@ import InterfaceStationInfo from "./partials/InterfaceStationInfo.vue";
 import InterfaceApInfo from "./partials/InterfaceApInfo.vue";
 
 export default defineComponent({
-  components: {
-    WifiStationInfo,
-    WifiApInfo,
-    InterfaceStationInfo,
-    InterfaceApInfo,
-  },
+    components: {
+        WifiStationInfo,
+        WifiApInfo,
+        InterfaceStationInfo,
+        InterfaceApInfo,
+    },
 });
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/NtpAdminView.vue b/webapp/src/components/NtpAdminView.vue
index 0edebd76..274aa37e 100644
--- a/webapp/src/components/NtpAdminView.vue
+++ b/webapp/src/components/NtpAdminView.vue
@@ -1,69 +1,47 @@
 <template>
-  <div class="container" role="main">
-    <div class="page-header">
-      <h1>NTP Settings</h1>
-    </div>
-    <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
-      {{ this.alertMessage }}
-    </BootstrapAlert>
-    <form @submit="saveNtpConfig">
-      <div class="card">
-        <div class="card-header text-white bg-primary">NTP Configuration</div>
-        <div class="card-body">
-          <div class="row mb-3">
-            <label for="inputNtpServer" class="col-sm-2 col-form-label"
-              >Time Server:</label
-            >
-            <div class="col-sm-10">
-              <input
-                type="text"
-                class="form-control"
-                id="inputNtpServer"
-                maxlength="32"
-                placeholder="Time Server"
-                v-model="ntpConfigList.ntp_server"
-              />
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <label for="inputTimezone" class="col-sm-2 col-form-label"
-              >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"
-                >
-                  {{ name }}
-                </option>
-              </select>
-            </div>
-          </div>
-
-          <div class="row mb-3">
-            <label for="inputTimezoneConfig" class="col-sm-2 col-form-label"
-              >Timezone Config:</label
-            >
-            <div class="col-sm-10">
-              <input
-                type="text"
-                class="form-control"
-                id="inputTimezoneConfig"
-                maxlength="32"
-                placeholder="Timezone"
-                v-model="ntpConfigList.ntp_timezone"
-                disabled
-              />
-            </div>
-          </div>
+    <div class="container" role="main">
+        <div class="page-header">
+            <h1>NTP Settings</h1>
         </div>
-      </div>
-      <button type="submit" class="btn btn-primary mb-3">Save</button>
-    </form>
-  </div>
+        <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
+            {{ this.alertMessage }}
+        </BootstrapAlert>
+        <form @submit="saveNtpConfig">
+            <div class="card">
+                <div class="card-header text-white bg-primary">NTP Configuration</div>
+                <div class="card-body">
+                    <div class="row mb-3">
+                        <label for="inputNtpServer" class="col-sm-2 col-form-label">Time Server:</label>
+                        <div class="col-sm-10">
+                            <input type="text" class="form-control" id="inputNtpServer" maxlength="32"
+                                placeholder="Time Server" v-model="ntpConfigList.ntp_server" />
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label for="inputTimezone" class="col-sm-2 col-form-label">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">
+                                    {{ name }}
+                                </option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="row mb-3">
+                        <label for="inputTimezoneConfig" class="col-sm-2 col-form-label">Timezone Config:</label>
+                        <div class="col-sm-10">
+                            <input type="text" class="form-control" id="inputTimezoneConfig" maxlength="32"
+                                placeholder="Timezone" v-model="ntpConfigList.ntp_timezone" disabled />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <button type="submit" class="btn btn-primary mb-3">Save</button>
+        </form>
+    </div>
 </template>
 
 <script>
@@ -71,73 +49,73 @@ import { defineComponent } from 'vue';
 import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
 
 export default defineComponent({
-  components: {
-    BootstrapAlert,
-  },
-  data() {
-    return {
-      ntpConfigList: [],
-      timezoneList: {},
-      timezoneSelect: "",
-      alertMessage: "",
-      alertType: "info",
-      showAlert: false,
-    };
-  },
-  watch: {
-    timezoneSelect: function (newValue) {
-      this.ntpConfigList.ntp_timezone = newValue.split("---")[1];
-      this.ntpConfigList.ntp_timezone_descr = newValue.split("---")[0];
+    components: {
+        BootstrapAlert,
     },
-  },
-  created() {
-    this.getTimezoneList();
-    this.getNtpConfig();
-  },
-  methods: {
-    getTimezoneList() {
-      fetch("/zones.json")
-        .then((response) => response.json())
-        .then((data) => (this.timezoneList = data));
+    data() {
+        return {
+            ntpConfigList: [],
+            timezoneList: {},
+            timezoneSelect: "",
+            alertMessage: "",
+            alertType: "info",
+            showAlert: false,
+        };
     },
-    getNtpConfig() {
-      fetch("/api/ntp/config")
-        .then((response) => response.json())
-        .then(
-          function (data) {
-            this.ntpConfigList = data;
-            this.timezoneSelect =
-              this.ntpConfigList.ntp_timezone_descr +
-              "---" +
-              this.ntpConfigList.ntp_timezone;
-          }.bind(this)
-        );
+    watch: {
+        timezoneSelect: function (newValue) {
+            this.ntpConfigList.ntp_timezone = newValue.split("---")[1];
+            this.ntpConfigList.ntp_timezone_descr = newValue.split("---")[0];
+        },
     },
-    saveNtpConfig(e) {
-      e.preventDefault();
+    created() {
+        this.getTimezoneList();
+        this.getNtpConfig();
+    },
+    methods: {
+        getTimezoneList() {
+            fetch("/zones.json")
+                .then((response) => response.json())
+                .then((data) => (this.timezoneList = data));
+        },
+        getNtpConfig() {
+            fetch("/api/ntp/config")
+                .then((response) => response.json())
+                .then(
+                    function (data) {
+                        this.ntpConfigList = data;
+                        this.timezoneSelect =
+                            this.ntpConfigList.ntp_timezone_descr +
+                            "---" +
+                            this.ntpConfigList.ntp_timezone;
+                    }.bind(this)
+                );
+        },
+        saveNtpConfig(e) {
+            e.preventDefault();
 
-      const formData = new FormData();
-      formData.append("data", JSON.stringify(this.ntpConfigList));
+            const formData = new FormData();
+            formData.append("data", JSON.stringify(this.ntpConfigList));
 
-      fetch("/api/ntp/config", {
-        method: "POST",
-        body: formData,
-      })
-        .then(function (response) {
-          if (response.status != 200) {
-            throw response.status;
-          } else {
-            return response.json();
-          }
-        })
-        .then(
-          function (response) {
-            this.alertMessage = response.message;
-            this.alertType = response.type;
-            this.showAlert = true;
-          }.bind(this)
-        );
+            fetch("/api/ntp/config", {
+                method: "POST",
+                body: formData,
+            })
+                .then(function (response) {
+                    if (response.status != 200) {
+                        throw response.status;
+                    } else {
+                        return response.json();
+                    }
+                })
+                .then(
+                    function (response) {
+                        this.alertMessage = response.message;
+                        this.alertType = response.type;
+                        this.showAlert = true;
+                    }.bind(this)
+                );
+        },
     },
-  },
 });
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/NtpInfoView.vue b/webapp/src/components/NtpInfoView.vue
index ee9d6166..88723052 100644
--- a/webapp/src/components/NtpInfoView.vue
+++ b/webapp/src/components/NtpInfoView.vue
@@ -1,82 +1,79 @@
 <template>
-  <div class="container" role="main">
-    <div class="page-header">
-      <h1>NTP Info</h1>
-    </div>
-
-    <div class="card">
-      <div class="card-header text-white bg-primary">Configuration Summary</div>
-      <div class="card-body">
-        <div class="table-responsive">
-          <table class="table table-hover table-condensed">
-            <tbody>
-              <tr>
-                <th>Server</th>
-                <td>{{ ntpDataList.ntp_server }}</td>
-              </tr>
-              <tr>
-                <th>Timezone</th>
-                <td>{{ ntpDataList.ntp_timezone }}</td>
-              </tr>
-              <tr>
-                <th>Timezone Description</th>
-                <td>{{ ntpDataList.ntp_timezone_descr }}</td>
-              </tr>
-            </tbody>
-          </table>
+    <div class="container" role="main">
+        <div class="page-header">
+            <h1>NTP Info</h1>
         </div>
-      </div>
-    </div>
 
-    <div class="card mt-5">
-      <div class="card-header text-white bg-primary">Current Time</div>
-      <div class="card-body">
-        <div class="table-responsive">
-          <table class="table table-hover table-condensed">
-            <tbody>
-              <tr>
-                <th>Status</th>
-                <td
-                  class="badge"
-                  :class="{
-                    'bg-danger': !ntpDataList.ntp_status,
-                    'bg-success': ntpDataList.ntp_status,
-                  }"
-                >
-                  <span v-if="ntpDataList.ntp_status">synced</span>
-                  <span v-else>not synced</span>
-                </td>
-              </tr>
-              <tr>
-                <th>Local Time</th>
-                <td>{{ ntpDataList.ntp_localtime }}</td>
-              </tr>
-            </tbody>
-          </table>
+        <div class="card">
+            <div class="card-header text-white bg-primary">Configuration Summary</div>
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table table-hover table-condensed">
+                        <tbody>
+                            <tr>
+                                <th>Server</th>
+                                <td>{{ ntpDataList.ntp_server }}</td>
+                            </tr>
+                            <tr>
+                                <th>Timezone</th>
+                                <td>{{ ntpDataList.ntp_timezone }}</td>
+                            </tr>
+                            <tr>
+                                <th>Timezone Description</th>
+                                <td>{{ ntpDataList.ntp_timezone_descr }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+
+        <div class="card mt-5">
+            <div class="card-header text-white bg-primary">Current Time</div>
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table table-hover table-condensed">
+                        <tbody>
+                            <tr>
+                                <th>Status</th>
+                                <td class="badge" :class="{
+                                    'bg-danger': !ntpDataList.ntp_status,
+                                    'bg-success': ntpDataList.ntp_status,
+                                }">
+                                    <span v-if="ntpDataList.ntp_status">synced</span>
+                                    <span v-else>not synced</span>
+                                </td>
+                            </tr>
+                            <tr>
+                                <th>Local Time</th>
+                                <td>{{ ntpDataList.ntp_localtime }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  data() {
-    return {
-      ntpDataList: [],
-    };
-  },
-  created() {
-    this.getNtpInfo();
-  },
-  methods: {
-    getNtpInfo() {
-      fetch("/api/ntp/status")
-        .then((response) => response.json())
-        .then((data) => (this.ntpDataList = data));
+    data() {
+        return {
+            ntpDataList: [],
+        };
+    },
+    created() {
+        this.getNtpInfo();
+    },
+    methods: {
+        getNtpInfo() {
+            fetch("/api/ntp/status")
+                .then((response) => response.json())
+                .then((data) => (this.ntpDataList = data));
+        },
     },
-  },
 });
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/SystemInfoView.vue b/webapp/src/components/SystemInfoView.vue
index d9a499b6..841dda09 100644
--- a/webapp/src/components/SystemInfoView.vue
+++ b/webapp/src/components/SystemInfoView.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="container" role="main">
-    <div class="page-header">
-      <h1>System Info</h1>
+    <div class="container" role="main">
+        <div class="page-header">
+            <h1>System Info</h1>
+        </div>
+        <FirmwareInfo />
+        <div class="mt-5"></div>
+        <HardwareInfo />
+        <div class="mt-5"></div>
+        <MemoryInfo />
+        <div class="mt-5"></div>
     </div>
-    <FirmwareInfo />
-    <div class="mt-5"></div>
-    <HardwareInfo />
-    <div class="mt-5"></div>
-    <MemoryInfo />
-    <div class="mt-5"></div>
-  </div>
 </template>
 
 <script>
@@ -19,10 +19,10 @@ import FirmwareInfo from "@/components/partials/FirmwareInfo.vue";
 import MemoryInfo from "@/components/partials/MemoryInfo.vue";
 
 export default defineComponent({
-  components: {
-    HardwareInfo,
-    FirmwareInfo,
-    MemoryInfo,
-  },
+    components: {
+        HardwareInfo,
+        FirmwareInfo,
+        MemoryInfo,
+    },
 });
 </script>
diff --git a/webapp/src/components/partials/BootstrapAlert.vue b/webapp/src/components/partials/BootstrapAlert.vue
index b73f2cd8..66fc38f7 100644
--- a/webapp/src/components/partials/BootstrapAlert.vue
+++ b/webapp/src/components/partials/BootstrapAlert.vue
@@ -1,21 +1,9 @@
 <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"
-    />
-  </div>
+    <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" />
+    </div>
 </template>
 
 <script>
@@ -23,105 +11,105 @@ import { computed, defineComponent, onBeforeUnmount, ref, watch } from "vue";
 import Alert from "bootstrap/js/dist/alert";
 
 export const toInteger = (value, defaultValue = NaN) => {
-  return Number.isInteger(value) ? value : defaultValue;
+    return Number.isInteger(value) ? value : defaultValue;
 };
 
 export default defineComponent({
-  name: "BAlert",
-  props: {
-    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" },
-  },
-  emits: ["dismissed", "dismiss-count-down", "update:modelValue"],
-  setup(props, { emit }) {
-    const element = undefined;
-    let instance = undefined;
-    const classes = computed(() => ({
-      [`alert-${props.variant}`]: props.variant,
-      show: props.modelValue,
-      "alert-dismissible": props.dismissible,
-      fade: props.modelValue,
-    }));
+    name: "BAlert",
+    props: {
+        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" },
+    },
+    emits: ["dismissed", "dismiss-count-down", "update:modelValue"],
+    setup(props, { emit }) {
+        const element = undefined;
+        let instance = undefined;
+        const classes = computed(() => ({
+            [`alert-${props.variant}`]: props.variant,
+            show: props.modelValue,
+            "alert-dismissible": props.dismissible,
+            fade: props.modelValue,
+        }));
 
-    let _countDownTimeout = 0;
+        let _countDownTimeout = 0;
 
-    const parseCountDown = (value) => {
-      if (typeof value === "boolean") {
-        return 0;
-      }
+        const parseCountDown = (value) => {
+            if (typeof value === "boolean") {
+                return 0;
+            }
 
-      const numberValue = toInteger(value, 0);
-      return numberValue > 0 ? numberValue : 0;
-    };
+            const numberValue = toInteger(value, 0);
+            return numberValue > 0 ? numberValue : 0;
+        };
 
-    const clearCountDownInterval = () => {
-      if (_countDownTimeout === undefined) return;
-      clearTimeout(_countDownTimeout);
-      _countDownTimeout = undefined;
-    };
+        const clearCountDownInterval = () => {
+            if (_countDownTimeout === undefined) return;
+            clearTimeout(_countDownTimeout);
+            _countDownTimeout = undefined;
+        };
 
-    const countDown = ref(parseCountDown(props.modelValue));
-    const isAlertVisible = computed(() => props.modelValue || props.show);
+        const countDown = ref(parseCountDown(props.modelValue));
+        const isAlertVisible = computed(() => props.modelValue || props.show);
 
-    onBeforeUnmount(() => {
-      clearCountDownInterval();
-      instance?.dispose();
-      instance = undefined;
-    });
+        onBeforeUnmount(() => {
+            clearCountDownInterval();
+            instance?.dispose();
+            instance = undefined;
+        });
 
-    const parsedModelValue = computed(() => {
-      if (props.modelValue === true) {
-        return true;
-      }
-      if (props.modelValue === false) return false;
+        const parsedModelValue = computed(() => {
+            if (props.modelValue === true) {
+                return true;
+            }
+            if (props.modelValue === false) return false;
 
-      if (toInteger(props.modelValue, 0) < 1) {
-        // Boolean will always return false for the above comparison
-        return false;
-      }
-      return !!props.modelValue;
-    });
+            if (toInteger(props.modelValue, 0) < 1) {
+                // Boolean will always return false for the above comparison
+                return false;
+            }
+            return !!props.modelValue;
+        });
 
-    const handleShowAndModelChanged = () => {
-      countDown.value = parseCountDown(props.modelValue);
-      if ((parsedModelValue.value || props.show) && !instance)
-        instance = new Alert(element);
-    };
+        const handleShowAndModelChanged = () => {
+            countDown.value = parseCountDown(props.modelValue);
+            if ((parsedModelValue.value || props.show) && !instance)
+                instance = new Alert(element);
+        };
 
-    const dismissClicked = () => {
-      if (typeof props.modelValue === "boolean") {
-        emit("update:modelValue", false);
-      } else {
-        emit("update:modelValue", 0);
-      }
-      emit("dismissed");
-    };
+        const dismissClicked = () => {
+            if (typeof props.modelValue === "boolean") {
+                emit("update:modelValue", false);
+            } else {
+                emit("update:modelValue", 0);
+            }
+            emit("dismissed");
+        };
 
-    watch(() => props.modelValue, handleShowAndModelChanged);
-    watch(() => props.show, handleShowAndModelChanged);
+        watch(() => props.modelValue, handleShowAndModelChanged);
+        watch(() => props.show, handleShowAndModelChanged);
 
-    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 (newValue > 0) {
-        _countDownTimeout = setTimeout(() => {
-          countDown.value--;
-        }, 1000);
-      }
-    });
-    return {
-      dismissClicked,
-      isAlertVisible,
-      element,
-      classes,
-    };
-  },
+        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 (newValue > 0) {
+                _countDownTimeout = setTimeout(() => {
+                    countDown.value--;
+                }, 1000);
+            }
+        });
+        return {
+            dismissClicked,
+            isAlertVisible,
+            element,
+            classes,
+        };
+    },
 });
 </script>
\ No newline at end of file
diff --git a/webapp/src/components/partials/FirmwareInfo.vue b/webapp/src/components/partials/FirmwareInfo.vue
index 545a64f7..49e69caf 100644
--- a/webapp/src/components/partials/FirmwareInfo.vue
+++ b/webapp/src/components/partials/FirmwareInfo.vue
@@ -1,85 +1,85 @@
 <template>
-  <div class="card">
-    <div class="card-header text-white bg-primary">
-      Firmware Information
+    <div class="card">
+        <div class="card-header text-white bg-primary">
+            Firmware Information
+        </div>
+        <div class="card-body">
+            <div class="table-responsive">
+                <table class="table table-hover table-condensed">
+                    <tbody>
+                        <tr>
+                            <th>Hostname</th>
+                            <td>{{ systemDataList.hostname }}</td>
+                        </tr>
+                        <tr>
+                            <th>SDK Version</th>
+                            <td>{{ systemDataList.sdkversion }}</td>
+                        </tr>
+                        <tr>
+                            <th>Firmware Version</th>
+                            <td>{{ systemDataList.firmware_version }}</td>
+                        </tr>
+                        <tr>
+                            <th>Git Hash</th>
+                            <td>{{ systemDataList.git_hash }}</td>
+                        </tr>
+                        <tr>
+                            <th>Reset Reason CPU 0</th>
+                            <td>{{ systemDataList.resetreason_0 }}</td>
+                        </tr>
+                        <tr>
+                            <th>Reset Reason CPU 1</th>
+                            <td>{{ systemDataList.resetreason_1 }}</td>
+                        </tr>
+                        <tr>
+                            <th>Config save count</th>
+                            <td>{{ systemDataList.cfgsavecount }}</td>
+                        </tr>
+                        <tr>
+                            <th>Uptime</th>
+                            <td>{{ timeInHours(systemDataList.uptime) }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
     </div>
-    <div class="card-body">
-      <div class="table-responsive">
-        <table class="table table-hover table-condensed">
-          <tbody>
-            <tr>
-              <th>Hostname</th>
-              <td>{{ systemDataList.hostname }}</td>
-            </tr>
-            <tr>
-              <th>SDK Version</th>
-              <td>{{ systemDataList.sdkversion }}</td>
-            </tr>
-            <tr>
-              <th>Firmware Version</th>
-              <td>{{ systemDataList.firmware_version }}</td>
-            </tr>
-            <tr>
-              <th>Git Hash</th>
-              <td>{{ systemDataList.git_hash }}</td>
-            </tr>
-            <tr>
-              <th>Reset Reason CPU 0</th>
-              <td>{{ systemDataList.resetreason_0 }}</td>
-            </tr>
-            <tr>
-              <th>Reset Reason CPU 1</th>
-              <td>{{ systemDataList.resetreason_1 }}</td>
-            </tr>
-            <tr>
-              <th>Config save count</th>
-              <td>{{ systemDataList.cfgsavecount }}</td>
-            </tr>
-            <tr>
-              <th>Uptime</th>
-              <td>{{ timeInHours(systemDataList.uptime) }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  data() {
-    return {
-      systemDataList: [],
-    };
-  },
-  created() {
-    this.getSystemInfo();
-  },
-  computed: {
-    timeInHours() {
-      return (value) => {
-        const days = parseInt(Math.floor(value / 3600 / 24));
-        const hours = parseInt(Math.floor((value - days * 3600 * 24) / 3600));
-        const minutes = parseInt(Math.floor((value - days * 3600 * 24 - hours * 3600) / 60));
-        const seconds = parseInt((value - days * 3600 * 24 - hours * 3600 + minutes * 60) % 60);
-
-        const dHours = hours > 9 ? hours : "0" + hours;
-        const dMins = minutes > 9 ? minutes : "0" + minutes;
-        const dSecs = seconds > 9 ? seconds : "0" + seconds;
-
-        return days + " days " + dHours + ":" + dMins + ":" + dSecs;
-      };
+    data() {
+        return {
+            systemDataList: [],
+        };
     },
-  },
-  methods: {
-    getSystemInfo() {
-      fetch("/api/system/status")
-        .then((response) => response.json())
-        .then((data) => (this.systemDataList = data));
+    created() {
+        this.getSystemInfo();
+    },
+    computed: {
+        timeInHours() {
+            return (value) => {
+                const days = parseInt(Math.floor(value / 3600 / 24));
+                const hours = parseInt(Math.floor((value - days * 3600 * 24) / 3600));
+                const minutes = parseInt(Math.floor((value - days * 3600 * 24 - hours * 3600) / 60));
+                const seconds = parseInt((value - days * 3600 * 24 - hours * 3600 + minutes * 60) % 60);
+
+                const dHours = hours > 9 ? hours : "0" + hours;
+                const dMins = minutes > 9 ? minutes : "0" + minutes;
+                const dSecs = seconds > 9 ? seconds : "0" + seconds;
+
+                return days + " days " + dHours + ":" + dMins + ":" + dSecs;
+            };
+        },
+    },
+    methods: {
+        getSystemInfo() {
+            fetch("/api/system/status")
+                .then((response) => response.json())
+                .then((data) => (this.systemDataList = data));
+        },
     },
-  },
 });
 </script>
diff --git a/webapp/src/components/partials/FsInfo.vue b/webapp/src/components/partials/FsInfo.vue
index f8fef839..ea1c7f9c 100644
--- a/webapp/src/components/partials/FsInfo.vue
+++ b/webapp/src/components/partials/FsInfo.vue
@@ -1,42 +1,36 @@
 <template>
-  <tr>
-    <th>{{ name }}</th>
-    <td>
-      <div class="progress">
-        <div
-          class="progress-bar"
-          role="progressbar"
-          :style="{ width: this.getPercent() + '%' }"
-          v-bind:aria-valuenow="this.getPercent()"
-          aria-valuemin="0"
-          aria-valuemax="100"
-        >
-          {{ this.getPercent() }}%
-        </div>
-      </div>
-    </td>
-    <td class="rightCell">
-      {{ Math.round((total - used) / 1024) }}
-      KByte
-    </td>
-    <td class="rightCell">{{ Math.round(used / 1024) }} KByte</td>
-    <td class="rightCell">{{ Math.round(total / 1024) }} KByte</td>
-  </tr>
+    <tr>
+        <th>{{ name }}</th>
+        <td>
+            <div class="progress">
+                <div class="progress-bar" role="progressbar" :style="{ width: this.getPercent() + '%' }"
+                    v-bind:aria-valuenow="this.getPercent()" aria-valuemin="0" aria-valuemax="100">
+                    {{ this.getPercent() }}%
+                </div>
+            </div>
+        </td>
+        <td class="rightCell">
+            {{ Math.round((total - used) / 1024) }}
+            KByte
+        </td>
+        <td class="rightCell">{{ Math.round(used / 1024) }} KByte</td>
+        <td class="rightCell">{{ Math.round(total / 1024) }} KByte</td>
+    </tr>
 </template>
 
 <script>
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  props: {
-    name: String,
-    total: Number,
-    used: Number,
-  },
-  methods: {
-    getPercent() {
-      return Math.round((this.used / this.total) * 100);
+    props: {
+        name: String,
+        total: Number,
+        used: Number,
+    },
+    methods: {
+        getPercent() {
+            return Math.round((this.used / this.total) * 100);
+        },
     },
-  },
 });
 </script>
diff --git a/webapp/src/components/partials/HardwareInfo.vue b/webapp/src/components/partials/HardwareInfo.vue
index 165765ae..5b02df6e 100644
--- a/webapp/src/components/partials/HardwareInfo.vue
+++ b/webapp/src/components/partials/HardwareInfo.vue
@@ -1,53 +1,53 @@
 <template>
-  <div class="card">
-    <div class="card-header text-white bg-primary">
-      Hardware Information
+    <div class="card">
+        <div class="card-header text-white bg-primary">
+            Hardware Information
+        </div>
+        <div class="card-body">
+            <div class="table-responsive">
+                <table class="table table-hover table-condensed">
+                    <tbody>
+                        <tr>
+                            <th>Chip Model</th>
+                            <td>{{ systemDataList.chipmodel }}</td>
+                        </tr>
+                        <tr>
+                            <th>Chip Revision</th>
+                            <td>{{ systemDataList.chiprevision }}</td>
+                        </tr>
+                        <tr>
+                            <th>Chip Cores</th>
+                            <td>{{ systemDataList.chipcores }}</td>
+                        </tr>
+                        <tr>
+                            <th>CPU Frequency</th>
+                            <td>{{ systemDataList.cpufreq }} MHz</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
     </div>
-    <div class="card-body">
-      <div class="table-responsive">
-        <table class="table table-hover table-condensed">
-          <tbody>
-            <tr>
-              <th>Chip Model</th>
-              <td>{{ systemDataList.chipmodel }}</td>
-            </tr>
-            <tr>
-              <th>Chip Revision</th>
-              <td>{{ systemDataList.chiprevision }}</td>
-            </tr>
-            <tr>
-              <th>Chip Cores</th>
-              <td>{{ systemDataList.chipcores }}</td>
-            </tr>
-            <tr>
-              <th>CPU Frequency</th>
-              <td>{{ systemDataList.cpufreq }} MHz</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  data() {
-    return {
-      systemDataList: [],
-    };
-  },
-  created() {
-    this.getSystemInfo();
-  },
-  methods: {
-    getSystemInfo() {
-      fetch("/api/system/status")
-        .then((response) => response.json())
-        .then((data) => (this.systemDataList = data));
+    data() {
+        return {
+            systemDataList: [],
+        };
+    },
+    created() {
+        this.getSystemInfo();
+    },
+    methods: {
+        getSystemInfo() {
+            fetch("/api/system/status")
+                .then((response) => response.json())
+                .then((data) => (this.systemDataList = data));
+        },
     },
-  },
 });
 </script>
diff --git a/webapp/src/components/partials/InterfaceApInfo.vue b/webapp/src/components/partials/InterfaceApInfo.vue
index 7ffa85d7..f1d83645 100644
--- a/webapp/src/components/partials/InterfaceApInfo.vue
+++ b/webapp/src/components/partials/InterfaceApInfo.vue
@@ -1,45 +1,45 @@
 <template>
-  <div class="card">
-    <div class="card-header text-white bg-primary">
-      Network Interface (Access Point)
+    <div class="card">
+        <div class="card-header text-white bg-primary">
+            Network Interface (Access Point)
+        </div>
+        <div class="card-body">
+            <div class="table-responsive">
+                <table class="table table-hover table-condensed">
+                    <tbody>
+                        <tr>
+                            <th>IP Address</th>
+                            <td>{{ networkDataList.ap_ip }}</td>
+                        </tr>
+                        <tr>
+                            <th>MAC Address</th>
+                            <td>{{ networkDataList.ap_mac }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
     </div>
-    <div class="card-body">
-      <div class="table-responsive">
-        <table class="table table-hover table-condensed">
-          <tbody>
-            <tr>
-              <th>IP Address</th>
-              <td>{{ networkDataList.ap_ip }}</td>
-            </tr>
-            <tr>
-              <th>MAC Address</th>
-              <td>{{ networkDataList.ap_mac }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  data() {
-    return {
-      networkDataList: [],
-    };
-  },
-  created() {
-    this.getNetworkInfo();
-  },
-  methods: {
-    getNetworkInfo() {
-      fetch("/api/network/status")
-        .then((response) => response.json())
-        .then((data) => (this.networkDataList = data));
+    data() {
+        return {
+            networkDataList: [],
+        };
+    },
+    created() {
+        this.getNetworkInfo();
+    },
+    methods: {
+        getNetworkInfo() {
+            fetch("/api/network/status")
+                .then((response) => response.json())
+                .then((data) => (this.networkDataList = data));
+        },
     },
-  },
 });
 </script>
diff --git a/webapp/src/components/partials/InterfaceStationInfo.vue b/webapp/src/components/partials/InterfaceStationInfo.vue
index f1c4fa3a..17f4aa57 100644
--- a/webapp/src/components/partials/InterfaceStationInfo.vue
+++ b/webapp/src/components/partials/InterfaceStationInfo.vue
@@ -1,61 +1,61 @@
 <template>
-  <div class="card">
-    <div class="card-header text-white bg-primary">
-      Network Interface (Station)
+    <div class="card">
+        <div class="card-header text-white bg-primary">
+            Network Interface (Station)
+        </div>
+        <div class="card-body">
+            <div class="table-responsive">
+                <table class="table table-hover table-condensed">
+                    <tbody>
+                        <tr>
+                            <th>IP Address</th>
+                            <td>{{ networkDataList.sta_ip }}</td>
+                        </tr>
+                        <tr>
+                            <th>Netmask</th>
+                            <td>{{ networkDataList.sta_netmask }}</td>
+                        </tr>
+                        <tr>
+                            <th>Default Gateway</th>
+                            <td>{{ networkDataList.sta_gateway }}</td>
+                        </tr>
+                        <tr>
+                            <th>DNS 1</th>
+                            <td>{{ networkDataList.sta_dns1 }}</td>
+                        </tr>
+                        <tr>
+                            <th>DNS 2</th>
+                            <td>{{ networkDataList.sta_dns2 }}</td>
+                        </tr>
+                        <tr>
+                            <th>MAC Address</th>
+                            <td>{{ networkDataList.sta_mac }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
     </div>
-    <div class="card-body">
-      <div class="table-responsive">
-        <table class="table table-hover table-condensed">
-          <tbody>
-            <tr>
-              <th>IP Address</th>
-              <td>{{ networkDataList.sta_ip }}</td>
-            </tr>
-            <tr>
-              <th>Netmask</th>
-              <td>{{ networkDataList.sta_netmask }}</td>
-            </tr>
-            <tr>
-              <th>Default Gateway</th>
-              <td>{{ networkDataList.sta_gateway }}</td>
-            </tr>
-            <tr>
-              <th>DNS 1</th>
-              <td>{{ networkDataList.sta_dns1 }}</td>
-            </tr>
-            <tr>
-              <th>DNS 2</th>
-              <td>{{ networkDataList.sta_dns2 }}</td>
-            </tr>
-            <tr>
-              <th>MAC Address</th>
-              <td>{{ networkDataList.sta_mac }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  data() {
-    return {
-      networkDataList: [],
-    };
-  },
-  created() {
-    this.getNetworkInfo();
-  },
-  methods: {
-    getNetworkInfo() {
-      fetch("/api/network/status")
-        .then((response) => response.json())
-        .then((data) => (this.networkDataList = data));
+    data() {
+        return {
+            networkDataList: [],
+        };
+    },
+    created() {
+        this.getNetworkInfo();
+    },
+    methods: {
+        getNetworkInfo() {
+            fetch("/api/network/status")
+                .then((response) => response.json())
+                .then((data) => (this.networkDataList = data));
+        },
     },
-  },
 });
 </script>
diff --git a/webapp/src/components/partials/InverterChannelInfo.vue b/webapp/src/components/partials/InverterChannelInfo.vue
index 1724bbde..b9460c1d 100644
--- a/webapp/src/components/partials/InverterChannelInfo.vue
+++ b/webapp/src/components/partials/InverterChannelInfo.vue
@@ -1,41 +1,41 @@
 <template>
-  <div class="col">
-    <div class="card">
-      <div class="card-header">Channel {{ channelNumber }}</div>
-      <div class="card-body">
-        <table class="table table-striped table-hover">
-          <thead>
-            <tr>
-              <th scope="col">Property</th>
-              <th scope="col">Value</th>
-              <th scope="col">Unit</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="(property, key) in channelData" :key="`prop-${key}`">
-              <th scope="row">{{ key }}</th>
-              <td style="text-align: right">{{ formatNumber(property.v) }}</td>
-              <td>{{ property.u }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+    <div class="col">
+        <div class="card">
+            <div class="card-header">Channel {{ channelNumber }}</div>
+            <div class="card-body">
+                <table class="table table-striped table-hover">
+                    <thead>
+                        <tr>
+                            <th scope="col">Property</th>
+                            <th scope="col">Value</th>
+                            <th scope="col">Unit</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(property, key) in channelData" :key="`prop-${key}`">
+                            <th scope="row">{{ key }}</th>
+                            <td style="text-align: right">{{ formatNumber(property.v) }}</td>
+                            <td>{{ property.u }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  props: {
-    channelData: Object,
-    channelNumber: Number,
-  },
-  methods: {
-    formatNumber(num) {
-      return parseFloat(num).toFixed(2);
+    props: {
+        channelData: Object,
+        channelNumber: Number,
+    },
+    methods: {
+        formatNumber(num) {
+            return parseFloat(num).toFixed(2);
+        },
     },
-  },
 });
 </script>
diff --git a/webapp/src/components/partials/MemoryInfo.vue b/webapp/src/components/partials/MemoryInfo.vue
index cfbe2182..a05ae7ae 100644
--- a/webapp/src/components/partials/MemoryInfo.vue
+++ b/webapp/src/components/partials/MemoryInfo.vue
@@ -1,27 +1,28 @@
 <template>
-  <div class="card">
-    <div class="card-header text-white bg-primary">Memory Information</div>
-    <div class="card-body">
-      <div class="table-responsive">
-        <table class="table table-hover table-condensed">
-          <thead>
-            <tr>
-              <th>Type</th>
-              <th>Usage</th>
-              <th class="rightCell">Free</th>
-              <th class="rightCell">Used</th>
-              <th class="rightCell">Size</th>
-            </tr>
-          </thead>
-          <tbody>
-              <FsInfo name="Heap" :total="systemDataList.heap_total" :used="systemDataList.heap_used" />
-              <FsInfo name="LittleFs" :total="systemDataList.littlefs_total" :used="systemDataList.littlefs_used" />
-              <FsInfo name="Sketch" :total="systemDataList.sketch_total" :used="systemDataList.sketch_used" />
-          </tbody>
-        </table>
-      </div>
+    <div class="card">
+        <div class="card-header text-white bg-primary">Memory Information</div>
+        <div class="card-body">
+            <div class="table-responsive">
+                <table class="table table-hover table-condensed">
+                    <thead>
+                        <tr>
+                            <th>Type</th>
+                            <th>Usage</th>
+                            <th class="rightCell">Free</th>
+                            <th class="rightCell">Used</th>
+                            <th class="rightCell">Size</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <FsInfo name="Heap" :total="systemDataList.heap_total" :used="systemDataList.heap_used" />
+                        <FsInfo name="LittleFs" :total="systemDataList.littlefs_total"
+                            :used="systemDataList.littlefs_used" />
+                        <FsInfo name="Sketch" :total="systemDataList.sketch_total" :used="systemDataList.sketch_used" />
+                    </tbody>
+                </table>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
@@ -29,23 +30,23 @@ import { defineComponent } from 'vue';
 import FsInfo from "@/components/partials/FsInfo.vue";
 
 export default defineComponent({
-  components: {
-    FsInfo,
-  },
-  data() {
-    return {
-      systemDataList: [],
-    };
-  },
-  created() {
-    this.getSystemInfo();
-  },
-  methods: {
-    getSystemInfo() {
-      fetch("/api/system/status")
-        .then((response) => response.json())
-        .then((data) => (this.systemDataList = data));
+    components: {
+        FsInfo,
+    },
+    data() {
+        return {
+            systemDataList: [],
+        };
+    },
+    created() {
+        this.getSystemInfo();
+    },
+    methods: {
+        getSystemInfo() {
+            fetch("/api/system/status")
+                .then((response) => response.json())
+                .then((data) => (this.systemDataList = data));
+        },
     },
-  },
 });
 </script>
diff --git a/webapp/src/components/partials/WifiApInfo.vue b/webapp/src/components/partials/WifiApInfo.vue
index 2af68acc..92dcd1bb 100644
--- a/webapp/src/components/partials/WifiApInfo.vue
+++ b/webapp/src/components/partials/WifiApInfo.vue
@@ -1,58 +1,55 @@
 <template>
-  <div class="card">
-    <div class="card-header text-white bg-primary">
-      WiFi Information (Access Point)
+    <div class="card">
+        <div class="card-header text-white bg-primary">
+            WiFi Information (Access Point)
+        </div>
+        <div class="card-body">
+            <div class="table-responsive">
+                <table class="table table-hover table-condensed">
+                    <tbody>
+                        <tr>
+                            <th>Status</th>
+                            <td class="badge" :class="{
+                                'bg-danger': !networkDataList.ap_status,
+                                'bg-success': networkDataList.ap_status,
+                            }">
+                                <span v-if="networkDataList.ap_status">enabled</span>
+                                <span v-else>disabled</span>
+                            </td>
+                        </tr>
+                        <tr>
+                            <th>SSID</th>
+                            <td>{{ networkDataList.ap_ssid }}</td>
+                        </tr>
+                        <tr>
+                            <th># Stations</th>
+                            <td>{{ networkDataList.ap_stationnum }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
     </div>
-    <div class="card-body">
-      <div class="table-responsive">
-        <table class="table table-hover table-condensed">
-          <tbody>
-            <tr>
-              <th>Status</th>
-              <td
-                class="badge"
-                :class="{
-                  'bg-danger': !networkDataList.ap_status,
-                  'bg-success': networkDataList.ap_status,
-                }"
-              >
-                <span v-if="networkDataList.ap_status">enabled</span>
-                <span v-else>disabled</span>
-              </td>
-            </tr>
-            <tr>
-              <th>SSID</th>
-              <td>{{ networkDataList.ap_ssid }}</td>
-            </tr>
-            <tr>
-              <th># Stations</th>
-              <td>{{ networkDataList.ap_stationnum }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  data() {
-    return {
-      networkDataList: [],
-    };
-  },
-  created() {
-    this.getNetworkInfo();
-  },
-  methods: {
-    getNetworkInfo() {
-      fetch("/api/network/status")
-        .then((response) => response.json())
-        .then((data) => (this.networkDataList = data));
+    data() {
+        return {
+            networkDataList: [],
+        };
+    },
+    created() {
+        this.getNetworkInfo();
+    },
+    methods: {
+        getNetworkInfo() {
+            fetch("/api/network/status")
+                .then((response) => response.json())
+                .then((data) => (this.networkDataList = data));
+        },
     },
-  },
 });
 </script>
diff --git a/webapp/src/components/partials/WifiStationInfo.vue b/webapp/src/components/partials/WifiStationInfo.vue
index 4b62e86e..d146a09e 100644
--- a/webapp/src/components/partials/WifiStationInfo.vue
+++ b/webapp/src/components/partials/WifiStationInfo.vue
@@ -1,75 +1,72 @@
 <template>
-  <div class="card">
-    <div class="card-header text-white bg-primary">
-      WiFi Information (Station)
+    <div class="card">
+        <div class="card-header text-white bg-primary">
+            WiFi Information (Station)
+        </div>
+        <div class="card-body">
+            <div class="table-responsive">
+                <table class="table table-hover table-condensed">
+                    <tbody>
+                        <tr>
+                            <th>Status</th>
+                            <td class="badge" :class="{
+                                'bg-danger': !networkDataList.sta_status,
+                                'bg-success': networkDataList.sta_status,
+                            }">
+                                <span v-if="networkDataList.sta_status">enabled</span>
+                                <span v-else>disabled</span>
+                            </td>
+                        </tr>
+                        <tr>
+                            <th>SSID</th>
+                            <td>{{ networkDataList.sta_ssid }}</td>
+                        </tr>
+                        <tr>
+                            <th>Quality</th>
+                            <td>{{ this.getRSSIasQuality(networkDataList.sta_rssi) }} %</td>
+                        </tr>
+                        <tr>
+                            <th>RSSI</th>
+                            <td>{{ networkDataList.sta_rssi }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
     </div>
-    <div class="card-body">
-      <div class="table-responsive">
-        <table class="table table-hover table-condensed">
-          <tbody>
-            <tr>
-              <th>Status</th>
-              <td
-                class="badge"
-                :class="{
-                  'bg-danger': !networkDataList.sta_status,
-                  'bg-success': networkDataList.sta_status,
-                }"
-              >
-                <span v-if="networkDataList.sta_status">enabled</span>
-                <span v-else>disabled</span>
-              </td>
-            </tr>
-            <tr>
-              <th>SSID</th>
-              <td>{{ networkDataList.sta_ssid }}</td>
-            </tr>
-            <tr>
-              <th>Quality</th>
-              <td>{{ this.getRSSIasQuality(networkDataList.sta_rssi) }} %</td>
-            </tr>
-            <tr>
-              <th>RSSI</th>
-              <td>{{ networkDataList.sta_rssi }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  data() {
-    return {
-      networkDataList: [],
-    };
-  },
-  created() {
-    this.getNetworkInfo();
-  },
-  methods: {
-    getNetworkInfo() {
-      fetch("/api/network/status")
-        .then((response) => response.json())
-        .then((data) => (this.networkDataList = data));
+    data() {
+        return {
+            networkDataList: [],
+        };
     },
-    getRSSIasQuality(rssi) {
-      let quality = 0;
-
-      if (rssi <= -100) {
-        quality = 0;
-      } else if (rssi >= -50) {
-        quality = 100;
-      } else {
-        quality = 2 * (rssi + 100);
-      }
-
-      return quality;
+    created() {
+        this.getNetworkInfo();
+    },
+    methods: {
+        getNetworkInfo() {
+            fetch("/api/network/status")
+                .then((response) => response.json())
+                .then((data) => (this.networkDataList = data));
+        },
+        getRSSIasQuality(rssi) {
+            let quality = 0;
+
+            if (rssi <= -100) {
+                quality = 0;
+            } else if (rssi >= -50) {
+                quality = 100;
+            } else {
+                quality = 2 * (rssi + 100);
+            }
+
+            return quality;
+        },
     },
-  },
 });
 </script>