From e6c36dd0dbdfa06df20fd33d0ef416f6315469cc Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Wed, 22 Jun 2022 00:06:35 +0200
Subject: [PATCH] webapp: migrated first part form javascript to typescript

---
 webapp/package.json                           |  2 +
 webapp/src/components/DtuAdminView.vue        | 20 ++++---
 webapp/src/components/HomeView.vue            | 23 +++++---
 webapp/src/components/InverterAdminView.vue   | 56 +++++++++----------
 webapp/src/components/MqttAdminView.vue       | 24 ++++++--
 webapp/src/components/MqttInfoView.vue        | 13 ++++-
 webapp/src/components/NavBar.vue              |  6 --
 webapp/src/components/NetworkAdminView.vue    | 22 ++++++--
 webapp/src/components/NetworkInfoView.vue     |  2 +-
 webapp/src/components/NtpAdminView.vue        | 20 ++++---
 webapp/src/components/NtpInfoView.vue         | 10 +++-
 webapp/src/components/SystemInfoView.vue      |  2 +-
 .../components/partials/BootstrapAlert.vue    |  2 +-
 .../src/components/partials/FirmwareInfo.vue  | 23 +++++---
 webapp/src/components/partials/FsInfo.vue     | 12 ++--
 .../src/components/partials/HardwareInfo.vue  |  9 ++-
 .../components/partials/InterfaceApInfo.vue   |  7 ++-
 .../partials/InterfaceStationInfo.vue         | 11 +++-
 .../partials/InverterChannelInfo.vue          |  4 +-
 webapp/src/components/partials/MemoryInfo.vue | 11 +++-
 webapp/src/components/partials/WifiApInfo.vue |  8 ++-
 .../components/partials/WifiStationInfo.vue   | 12 ++--
 webapp/src/main.ts                            |  2 +-
 webapp/yarn.lock                              | 14 ++++-
 24 files changed, 206 insertions(+), 109 deletions(-)

diff --git a/webapp/package.json b/webapp/package.json
index e05fc83f..1a8c6356 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -20,6 +20,8 @@
   "devDependencies": {
     "@babel/core": "^7.18.5",
     "@babel/eslint-parser": "^7.18.2",
+    "@types/bootstrap": "^5.1.12",
+    "@types/node": "^18.0.0",
     "@typescript-eslint/parser": "^5.29.0",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
diff --git a/webapp/src/components/DtuAdminView.vue b/webapp/src/components/DtuAdminView.vue
index 29da8f9f..dfd25268 100644
--- a/webapp/src/components/DtuAdminView.vue
+++ b/webapp/src/components/DtuAdminView.vue
@@ -4,7 +4,7 @@
             <h1>DTU Settings</h1>
         </div>
         <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
-            {{ this.alertMessage }}
+            {{ alertMessage }}
         </BootstrapAlert>
         <form @submit="saveDtuConfig">
             <div class="card">
@@ -47,7 +47,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
 
@@ -57,7 +57,11 @@ export default defineComponent({
     },
     data() {
         return {
-            dtuConfigList: [],
+            dtuConfigList: {
+                dtu_serial: 0,
+                dtu_pollinterval: 0,
+                dtu_palevel: 0
+            },
             palevelList: [
                 { key: 0, value: "Minimum (-18 dBm)" },
                 { key: 1, value: "Low (-12 dBm)" },
@@ -77,12 +81,12 @@ export default defineComponent({
             fetch("/api/dtu/config")
                 .then((response) => response.json())
                 .then(
-                    function (data) {
+                    (data) => {
                         this.dtuConfigList = data;
-                    }.bind(this)
+                    }
                 );
         },
-        saveDtuConfig(e) {
+        saveDtuConfig(e: Event) {
             e.preventDefault();
 
             const formData = new FormData();
@@ -100,11 +104,11 @@ export default defineComponent({
                     }
                 })
                 .then(
-                    function (response) {
+                    (response) => {
                         this.alertMessage = response.message;
                         this.alertType = response.type;
                         this.showAlert = true;
-                    }.bind(this)
+                    }
                 );
         },
     },
diff --git a/webapp/src/components/HomeView.vue b/webapp/src/components/HomeView.vue
index 5c40ff06..89a8dcea 100644
--- a/webapp/src/components/HomeView.vue
+++ b/webapp/src/components/HomeView.vue
@@ -45,10 +45,17 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
-import InverterChannelInfo from "@/components/partials/InverterChannelInfo";
-import bootstrap from "bootstrap/dist/js/bootstrap.js";
+import InverterChannelInfo from "@/components/partials/InverterChannelInfo.vue";
+import * as bootstrap from 'bootstrap';
+
+declare interface Inverter {
+    serial: number,
+    name: string,
+    age_critical: boolean,
+    data_age: 0
+}
 
 export default defineComponent({
     components: {
@@ -56,10 +63,10 @@ export default defineComponent({
     },
     data() {
         return {
-            socket: null,
-            heartInterval: null,
+            socket: {} as WebSocket,
+            heartInterval: 0,
             waitForData: true,
-            inverterData: [],
+            inverterData: [] as Inverter[],
             isFirstFetchAfterConnect: true,
         };
     },
@@ -93,12 +100,12 @@ export default defineComponent({
 
             this.socket = new WebSocket(webSocketUrl);
 
-            this.socket.onmessage = function (event) {
+            this.socket.onmessage = (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);
diff --git a/webapp/src/components/InverterAdminView.vue b/webapp/src/components/InverterAdminView.vue
index 68074a2e..e0285ba0 100644
--- a/webapp/src/components/InverterAdminView.vue
+++ b/webapp/src/components/InverterAdminView.vue
@@ -5,7 +5,7 @@
         </div>
 
         <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
-            {{ this.alertMessage }}
+            {{ alertMessage }}
         </BootstrapAlert>
 
         <div class="card">
@@ -92,10 +92,17 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
 
+declare interface Inverter {
+    id: string,
+    serial: number,
+    name: string,
+    type: string
+}
+
 export default defineComponent({
     components: {
         BootstrapAlert,
@@ -103,18 +110,9 @@ export default defineComponent({
     data() {
         return {
             editId: "-1",
-            inverterData: {
-                id: "",
-                serial: "",
-                name: "",
-            },
-            editInverterData: {
-                id: "",
-                serial: "",
-                name: "",
-                type: "",
-            },
-            inverters: [],
+            inverterData: {} as Inverter,
+            editInverterData: {} as Inverter,
+            inverters: [] as Inverter[],
             alertMessage: "",
             alertType: "info",
             showAlert: false,
@@ -152,18 +150,18 @@ export default defineComponent({
                     }
                 })
                 .then(
-                    function (response) {
+                    (response) => {
                         this.alertMessage = response.message;
                         this.alertType = response.type;
                         this.showAlert = true;
-                    }.bind(this)
+                    }
                 )
-                .then(this.getInverters());
+                .then(() => { this.getInverters() });
 
-            this.inverterData.serial = "";
+            this.inverterData.serial = 0;
             this.inverterData.name = "";
         },
-        onDelete(id) {
+        onDelete(id: string) {
             const formData = new FormData();
             formData.append("data", JSON.stringify({ id: id }));
 
@@ -179,15 +177,15 @@ export default defineComponent({
                     }
                 })
                 .then(
-                    function (response) {
+                    (response) => {
                         this.alertMessage = response.message;
                         this.alertType = response.type;
                         this.showAlert = true;
-                    }.bind(this)
+                    }
                 )
-                .then(this.getInverters());
+                .then(() => { this.getInverters() });
         },
-        onEdit(inverter) {
+        onEdit(inverter: Inverter) {
             this.editId = inverter.id;
             this.editInverterData.serial = inverter.serial;
             this.editInverterData.name = inverter.name;
@@ -195,10 +193,10 @@ export default defineComponent({
         },
         onCancel() {
             this.editId = "-1";
-            this.editInverterData.serial = "";
+            this.editInverterData.serial = 0;
             this.editInverterData.name = "";
         },
-        onEditSubmit(id) {
+        onEditSubmit(id: string) {
             const formData = new FormData();
             this.editInverterData.id = id;
             formData.append("data", JSON.stringify(this.editInverterData));
@@ -215,16 +213,16 @@ export default defineComponent({
                     }
                 })
                 .then(
-                    function (response) {
+                    (response) => {
                         this.alertMessage = response.message;
                         this.alertType = response.type;
                         this.showAlert = true;
-                    }.bind(this)
+                    }
                 )
-                .then(this.getInverters());
+                .then(() => { this.getInverters() });
 
             this.editId = "-1";
-            this.editInverterData.serial = "";
+            this.editInverterData.serial = 0;
             this.editInverterData.name = "";
             this.editInverterData.type = "";
         },
diff --git a/webapp/src/components/MqttAdminView.vue b/webapp/src/components/MqttAdminView.vue
index 60afe191..385863ba 100644
--- a/webapp/src/components/MqttAdminView.vue
+++ b/webapp/src/components/MqttAdminView.vue
@@ -4,7 +4,7 @@
             <h1>MqTT Settings</h1>
         </div>
         <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
-            {{ this.alertMessage }}
+            {{ alertMessage }}
         </BootstrapAlert>
         <form @submit="saveMqttConfig">
             <div class="card">
@@ -132,7 +132,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
 
@@ -142,7 +142,19 @@ export default defineComponent({
     },
     data() {
         return {
-            mqttConfigList: [],
+            mqttConfigList: {
+                mqtt_enabled: false,
+                mqtt_hostname: "",
+                mqtt_port: 0,
+                mqtt_username: "",
+                mqtt_password: "",
+                mqtt_topic: "",
+                mqtt_publish_interval: 0,
+                mqtt_retain: false,
+                mqtt_lwt_topic: "",
+                mqtt_lwt_online: "",
+                mqtt_lwt_offline: ""
+            },
             alertMessage: "",
             alertType: "info",
             showAlert: false,
@@ -157,7 +169,7 @@ export default defineComponent({
                 .then((response) => response.json())
                 .then((data) => (this.mqttConfigList = data));
         },
-        saveMqttConfig(e) {
+        saveMqttConfig(e: Event) {
             e.preventDefault();
 
             const formData = new FormData();
@@ -175,11 +187,11 @@ export default defineComponent({
                     }
                 })
                 .then(
-                    function (response) {
+                    (response) => {
                         this.alertMessage = response.message;
                         this.alertType = response.type;
                         this.showAlert = true;
-                    }.bind(this)
+                    }
                 );
         },
     },
diff --git a/webapp/src/components/MqttInfoView.vue b/webapp/src/components/MqttInfoView.vue
index 76ae234d..e2ddc99a 100644
--- a/webapp/src/components/MqttInfoView.vue
+++ b/webapp/src/components/MqttInfoView.vue
@@ -80,13 +80,22 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 
 export default defineComponent({
     data() {
         return {
-            mqttDataList: [],
+            mqttDataList: {
+                mqtt_enabled: false,
+                mqtt_hostname: "",
+                mqtt_port: 0,
+                mqtt_username: "",
+                mqtt_topic: "",
+                mqtt_publish_interval: 0,
+                mqtt_retain: false,
+                mqtt_connected: false
+            },
         };
     },
     created() {
diff --git a/webapp/src/components/NavBar.vue b/webapp/src/components/NavBar.vue
index 3d53e16e..af15b01e 100644
--- a/webapp/src/components/NavBar.vue
+++ b/webapp/src/components/NavBar.vue
@@ -69,9 +69,3 @@
         </div>
     </nav>
 </template>
-
-<script>
-</script>
-
-<style>
-</style>
\ No newline at end of file
diff --git a/webapp/src/components/NetworkAdminView.vue b/webapp/src/components/NetworkAdminView.vue
index 52278849..38faa62e 100644
--- a/webapp/src/components/NetworkAdminView.vue
+++ b/webapp/src/components/NetworkAdminView.vue
@@ -4,7 +4,7 @@
             <h1>Network Settings</h1>
         </div>
         <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
-            {{ this.alertMessage }}
+            {{ alertMessage }}
         </BootstrapAlert>
         <form @submit="saveNetworkConfig">
             <div class="card">
@@ -97,7 +97,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
 
@@ -107,7 +107,17 @@ export default defineComponent({
     },
     data() {
         return {
-            networkConfigList: [],
+            networkConfigList: {
+                ssid: "",
+                password: "",
+                hostname: "",
+                dhcp: false,
+                ipaddress: "",
+                netmask: "",
+                gateway: "",
+                dns1: "",
+                dns2: ""
+            },
             alertMessage: "",
             alertType: "info",
             showAlert: false,
@@ -122,7 +132,7 @@ export default defineComponent({
                 .then((response) => response.json())
                 .then((data) => (this.networkConfigList = data));
         },
-        saveNetworkConfig(e) {
+        saveNetworkConfig(e: Event) {
             e.preventDefault();
 
             const formData = new FormData();
@@ -140,11 +150,11 @@ export default defineComponent({
                     }
                 })
                 .then(
-                    function (response) {
+                    (response) => {
                         this.alertMessage = response.message;
                         this.alertType = response.type;
                         this.showAlert = true;
-                    }.bind(this)
+                    }
                 );
         },
     },
diff --git a/webapp/src/components/NetworkInfoView.vue b/webapp/src/components/NetworkInfoView.vue
index 3f2173f4..d87c43b5 100644
--- a/webapp/src/components/NetworkInfoView.vue
+++ b/webapp/src/components/NetworkInfoView.vue
@@ -14,7 +14,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 import WifiStationInfo from "./partials/WifiStationInfo.vue";
 import WifiApInfo from "./partials/WifiApInfo.vue";
diff --git a/webapp/src/components/NtpAdminView.vue b/webapp/src/components/NtpAdminView.vue
index 274aa37e..aac3bc05 100644
--- a/webapp/src/components/NtpAdminView.vue
+++ b/webapp/src/components/NtpAdminView.vue
@@ -4,7 +4,7 @@
             <h1>NTP Settings</h1>
         </div>
         <BootstrapAlert v-model="showAlert" dismissible :variant="alertType">
-            {{ this.alertMessage }}
+            {{ alertMessage }}
         </BootstrapAlert>
         <form @submit="saveNtpConfig">
             <div class="card">
@@ -44,7 +44,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 import BootstrapAlert from "@/components/partials/BootstrapAlert.vue";
 
@@ -54,7 +54,11 @@ export default defineComponent({
     },
     data() {
         return {
-            ntpConfigList: [],
+            ntpConfigList: {
+                ntp_server: "",
+                ntp_timezone: "",
+                ntp_timezone_descr: ""
+            },
             timezoneList: {},
             timezoneSelect: "",
             alertMessage: "",
@@ -82,16 +86,16 @@ export default defineComponent({
             fetch("/api/ntp/config")
                 .then((response) => response.json())
                 .then(
-                    function (data) {
+                    (data) => {
                         this.ntpConfigList = data;
                         this.timezoneSelect =
                             this.ntpConfigList.ntp_timezone_descr +
                             "---" +
                             this.ntpConfigList.ntp_timezone;
-                    }.bind(this)
+                    }
                 );
         },
-        saveNtpConfig(e) {
+        saveNtpConfig(e: Event) {
             e.preventDefault();
 
             const formData = new FormData();
@@ -109,11 +113,11 @@ export default defineComponent({
                     }
                 })
                 .then(
-                    function (response) {
+                    (response) => {
                         this.alertMessage = response.message;
                         this.alertType = response.type;
                         this.showAlert = true;
-                    }.bind(this)
+                    }
                 );
         },
     },
diff --git a/webapp/src/components/NtpInfoView.vue b/webapp/src/components/NtpInfoView.vue
index 88723052..e1f54d36 100644
--- a/webapp/src/components/NtpInfoView.vue
+++ b/webapp/src/components/NtpInfoView.vue
@@ -56,13 +56,19 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 
 export default defineComponent({
     data() {
         return {
-            ntpDataList: [],
+            ntpDataList: {
+                ntp_server: "",
+                ntp_timezone: "",
+                ntp_timezone_descr: "",
+                ntp_status: false,
+                ntp_localtime: ""
+            },
         };
     },
     created() {
diff --git a/webapp/src/components/SystemInfoView.vue b/webapp/src/components/SystemInfoView.vue
index 841dda09..a60173fd 100644
--- a/webapp/src/components/SystemInfoView.vue
+++ b/webapp/src/components/SystemInfoView.vue
@@ -12,7 +12,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 import HardwareInfo from "@/components/partials/HardwareInfo.vue";
 import FirmwareInfo from "@/components/partials/FirmwareInfo.vue";
diff --git a/webapp/src/components/partials/BootstrapAlert.vue b/webapp/src/components/partials/BootstrapAlert.vue
index 66fc38f7..2971d721 100644
--- a/webapp/src/components/partials/BootstrapAlert.vue
+++ b/webapp/src/components/partials/BootstrapAlert.vue
@@ -15,7 +15,7 @@ export const toInteger = (value, defaultValue = NaN) => {
 };
 
 export default defineComponent({
-    name: "BAlert",
+    name: "BootstrapAlert",
     props: {
         dismissLabel: { type: String, default: "Close" },
         dismissible: { type: Boolean, default: false },
diff --git a/webapp/src/components/partials/FirmwareInfo.vue b/webapp/src/components/partials/FirmwareInfo.vue
index 49e69caf..c95d65e7 100644
--- a/webapp/src/components/partials/FirmwareInfo.vue
+++ b/webapp/src/components/partials/FirmwareInfo.vue
@@ -46,13 +46,22 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 
 export default defineComponent({
     data() {
         return {
-            systemDataList: [],
+            systemDataList: {
+                hostname: "",
+                sdkversion: "",
+                firmware_version: "",
+                git_hash: "",
+                resetreason_0: "",
+                resetreason_1: "",
+                cfgsavecount: 0,
+                uptime: 0
+            },
         };
     },
     created() {
@@ -60,11 +69,11 @@ export default defineComponent({
     },
     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);
+            return (value: number) => {
+                const days = Math.floor(value / 3600 / 24);
+                const hours = Math.floor((value - days * 3600 * 24) / 3600);
+                const minutes = Math.floor((value - days * 3600 * 24 - hours * 3600) / 60);
+                const seconds = (value - days * 3600 * 24 - hours * 3600 + minutes * 60) % 60;
 
                 const dHours = hours > 9 ? hours : "0" + hours;
                 const dMins = minutes > 9 ? minutes : "0" + minutes;
diff --git a/webapp/src/components/partials/FsInfo.vue b/webapp/src/components/partials/FsInfo.vue
index ea1c7f9c..9d433c96 100644
--- a/webapp/src/components/partials/FsInfo.vue
+++ b/webapp/src/components/partials/FsInfo.vue
@@ -3,9 +3,9 @@
         <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 class="progress-bar" role="progressbar" :style="{ width: getPercent() + '%' }"
+                    v-bind:aria-valuenow="getPercent()" aria-valuemin="0" aria-valuemax="100">
+                    {{ getPercent() }}%
                 </div>
             </div>
         </td>
@@ -18,14 +18,14 @@
     </tr>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 
 export default defineComponent({
     props: {
         name: String,
-        total: Number,
-        used: Number,
+        total: { type: Number, required: true },
+        used: { type: Number, required: true },
     },
     methods: {
         getPercent() {
diff --git a/webapp/src/components/partials/HardwareInfo.vue b/webapp/src/components/partials/HardwareInfo.vue
index 5b02df6e..6ff920cf 100644
--- a/webapp/src/components/partials/HardwareInfo.vue
+++ b/webapp/src/components/partials/HardwareInfo.vue
@@ -30,13 +30,18 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 
 export default defineComponent({
     data() {
         return {
-            systemDataList: [],
+            systemDataList: {
+                chipmodel: "",
+                chiprevision: "",
+                chipcores: "",
+                cpufreq: ""
+            },
         };
     },
     created() {
diff --git a/webapp/src/components/partials/InterfaceApInfo.vue b/webapp/src/components/partials/InterfaceApInfo.vue
index f1d83645..91e13350 100644
--- a/webapp/src/components/partials/InterfaceApInfo.vue
+++ b/webapp/src/components/partials/InterfaceApInfo.vue
@@ -22,13 +22,16 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 
 export default defineComponent({
     data() {
         return {
-            networkDataList: [],
+            networkDataList: {
+                ap_ip: "",
+                ap_mac: ""
+            },
         };
     },
     created() {
diff --git a/webapp/src/components/partials/InterfaceStationInfo.vue b/webapp/src/components/partials/InterfaceStationInfo.vue
index 17f4aa57..87e3ac34 100644
--- a/webapp/src/components/partials/InterfaceStationInfo.vue
+++ b/webapp/src/components/partials/InterfaceStationInfo.vue
@@ -38,13 +38,20 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 
 export default defineComponent({
     data() {
         return {
-            networkDataList: [],
+            networkDataList: {
+                sta_ip: "",
+                sta_netmask: "",
+                sta_gateway: "",
+                sta_dns1: "",
+                sta_dns2: "",
+                sta_mac: ""
+            },
         };
     },
     created() {
diff --git a/webapp/src/components/partials/InverterChannelInfo.vue b/webapp/src/components/partials/InverterChannelInfo.vue
index b9460c1d..7bfa0b16 100644
--- a/webapp/src/components/partials/InverterChannelInfo.vue
+++ b/webapp/src/components/partials/InverterChannelInfo.vue
@@ -24,7 +24,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 
 export default defineComponent({
@@ -33,7 +33,7 @@ export default defineComponent({
         channelNumber: Number,
     },
     methods: {
-        formatNumber(num) {
+        formatNumber(num: string) {
             return parseFloat(num).toFixed(2);
         },
     },
diff --git a/webapp/src/components/partials/MemoryInfo.vue b/webapp/src/components/partials/MemoryInfo.vue
index a05ae7ae..3700e167 100644
--- a/webapp/src/components/partials/MemoryInfo.vue
+++ b/webapp/src/components/partials/MemoryInfo.vue
@@ -25,7 +25,7 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 import FsInfo from "@/components/partials/FsInfo.vue";
 
@@ -35,7 +35,14 @@ export default defineComponent({
     },
     data() {
         return {
-            systemDataList: [],
+            systemDataList: {
+                heap_total: 0,
+                heap_used: 0,
+                littlefs_total: 0,
+                littlefs_used: 0,
+                sketch_total: 0,
+                sketch_used: 0
+            },
         };
     },
     created() {
diff --git a/webapp/src/components/partials/WifiApInfo.vue b/webapp/src/components/partials/WifiApInfo.vue
index 92dcd1bb..f8bc109d 100644
--- a/webapp/src/components/partials/WifiApInfo.vue
+++ b/webapp/src/components/partials/WifiApInfo.vue
@@ -32,13 +32,17 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 
 export default defineComponent({
     data() {
         return {
-            networkDataList: [],
+            networkDataList: {
+                ap_status: false,
+                ap_ssid: "",
+                ap_stationnum: 0
+            },
         };
     },
     created() {
diff --git a/webapp/src/components/partials/WifiStationInfo.vue b/webapp/src/components/partials/WifiStationInfo.vue
index d146a09e..47d703cb 100644
--- a/webapp/src/components/partials/WifiStationInfo.vue
+++ b/webapp/src/components/partials/WifiStationInfo.vue
@@ -23,7 +23,7 @@
                         </tr>
                         <tr>
                             <th>Quality</th>
-                            <td>{{ this.getRSSIasQuality(networkDataList.sta_rssi) }} %</td>
+                            <td>{{ getRSSIasQuality(networkDataList.sta_rssi) }} %</td>
                         </tr>
                         <tr>
                             <th>RSSI</th>
@@ -36,13 +36,17 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
 import { defineComponent } from 'vue';
 
 export default defineComponent({
     data() {
         return {
-            networkDataList: [],
+            networkDataList: {
+                sta_status: false,
+                sta_ssid: "",
+                sta_rssi: 0
+            },
         };
     },
     created() {
@@ -54,7 +58,7 @@ export default defineComponent({
                 .then((response) => response.json())
                 .then((data) => (this.networkDataList = data));
         },
-        getRSSIasQuality(rssi) {
+        getRSSIasQuality(rssi: number) {
             let quality = 0;
 
             if (rssi <= -100) {
diff --git a/webapp/src/main.ts b/webapp/src/main.ts
index e3673e5b..78162676 100644
--- a/webapp/src/main.ts
+++ b/webapp/src/main.ts
@@ -4,6 +4,6 @@ import router from './router'
 import { BootstrapIconsPlugin } from 'bootstrap-icons-vue';
 
 import "bootstrap/dist/css/bootstrap.min.css"
-import "bootstrap/dist/js/bootstrap.js"
+import "bootstrap"
 
 createApp(App).use(router).use(BootstrapIconsPlugin).mount('#app')
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 9be5cfe3..f111bae4 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -1151,7 +1151,7 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
   integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
 
-"@popperjs/core@^2.11.5":
+"@popperjs/core@^2.11.5", "@popperjs/core@^2.9.2":
   version "2.11.5"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
   integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
@@ -1208,6 +1208,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/bootstrap@^5.1.12":
+  version "5.1.12"
+  resolved "https://registry.yarnpkg.com/@types/bootstrap/-/bootstrap-5.1.12.tgz#4d704f6385fda2f1a56cc458f1f4cafab6e9f7e3"
+  integrity sha512-pSS5BGEgepwzdbsBGswBWFmgrnYpp7c4UfuYe1FJWwkrcjm/JVwfG4gBkOYtd92Otd3RdJK0ByBWMkBROfLEPw==
+  dependencies:
+    "@popperjs/core" "^2.9.2"
+
 "@types/connect-history-api-fallback@^1.3.5":
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz#d1f7a8a09d0ed5a57aee5ae9c18ab9b803205dae"
@@ -1303,6 +1310,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.35.tgz#635b7586086d51fb40de0a2ec9d1014a5283ba4a"
   integrity sha512-vu1SrqBjbbZ3J6vwY17jBs8Sr/BKA+/a/WtjRG+whKg1iuLFOosq872EXS0eXWILdO36DHQQeku/ZcL6hz2fpg==
 
+"@types/node@^18.0.0":
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.0.0.tgz#67c7b724e1bcdd7a8821ce0d5ee184d3b4dd525a"
+  integrity sha512-cHlGmko4gWLVI27cGJntjs/Sj8th9aYwplmZFwmmgYQQvL5NUsgVJG7OddLvNfLqYS31KFN0s3qlaD9qCaxACA==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"