webapp: Use volar formatter

webapp/src/components/AboutView.vue

@@ -3,9 +3,8 @@
         <div class="page-header">
             <h1>About</h1>
             This project was started from
-      <a href="https://www.mikrocontroller.net/topic/525778" target="_blank"
+            <a href="https://www.mikrocontroller.net/topic/525778" target="_blank">this discussion.
-        >this discussion. (Mikrocontroller.net)</a
+                (Mikrocontroller.net)</a>
-      >
         </div>
     </div>
 </template>

webapp/src/components/DtuAdminView.vue

@@ -11,56 +11,30 @@
                 <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"
+                        <label for="inputDtuSerial" class="col-sm-2 col-form-label">Serial:</label>
-              >Serial:</label
-            >
                         <div class="col-sm-10">
-              <input
+                            <input type="number" class="form-control" id="inputDtuSerial" min="1" max="99999999999"
-                type="number"
+                                placeholder="DTU Serial" v-model="dtuConfigList.dtu_serial" />
-                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"
+                        <label for="inputPollInterval" class="col-sm-2 col-form-label">Poll Interval:</label>
-              >Poll Interval:</label
-            >
                         <div class="col-sm-10">
                             <div class="input-group">
-                <input
+                                <input type="number" class="form-control" id="inputPollInterval" min="1" max="86400"
-                  type="number"
+                                    placeholder="Poll Interval in Seconds" v-model="dtuConfigList.dtu_pollinterval"
-                  class="form-control"
+                                    aria-describedby="pollIntervalDescription" />
-                  id="inputPollInterval"
+                                <span class="input-group-text" id="pollIntervalDescription">seconds</span>
-                  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"
+                        <label for="inputTimezone" class="col-sm-2 col-form-label">PA Level:</label>
-              >PA Level:</label
-            >
                         <div class="col-sm-10">
                             <select class="form-select" v-model="dtuConfigList.dtu_palevel">
-                <option
+                                <option v-for="palevel in palevelList" :key="palevel.key" :value="palevel.key">
-                  v-for="palevel in palevelList"
-                  :key="palevel.key"
-                  :value="palevel.key"
-                >
                                     {{ palevel.value }}
                                 </option>
                             </select>

webapp/src/components/FirmwareUpgradeView.vue

@@ -15,7 +15,9 @@
         <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>
+                <p class="h1 mb-2">
+                    <BIconExclamationCircleFill />
+                </p>
 
                 <span style="vertical-align: middle" class="ml-2">
                     {{ OTAError }}
@@ -34,7 +36,9 @@
         <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 class="h1 mb-2">
+                    <BIconCheckCircle />
+                </span>
                 <span> OTA Success </span>
                 <br />
                 <br />
@@ -48,13 +52,7 @@
             <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
+                    <input class="form-control" type="file" ref="file" accept=".bin,.bin.gz" @change="uploadOTA" />
-            class="form-control"
-            type="file"
-            ref="file"
-            accept=".bin,.bin.gz"
-            @change="uploadOTA"
-          />
                 </div>
             </div>
         </div>
@@ -63,14 +61,8 @@
             <div class="card-header text-white bg-primary">Upload Progress</div>
             <div class="card-body text-center">
                 <div class="progress">
-          <div
+                    <div class="progress-bar" role="progressbar" :style="{ width: this.progress + '%' }"
-            class="progress-bar"
+                        v-bind:aria-valuenow="this.progress" aria-valuemin="0" aria-valuemax="100">
-            role="progressbar"
-            :style="{ width: this.progress + '%' }"
-            v-bind:aria-valuenow="this.progress"
-            aria-valuemin="0"
-            aria-valuemax="100"
-          >
                         {{ progress }}%
                     </div>
                 </div>

webapp/src/components/HomeView.vue

@@ -5,46 +5,25 @@
             <template v-if="waitForData == true">Waiting for data... </template>
             <template v-else>
                 <div class="d-flex align-items-start">
-          <div
+                    <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist"
-            class="nav flex-column nav-pills me-3"
+                        aria-orientation="vertical">
-            id="v-pills-tab"
+                        <button v-for="inverter in inverterData" :key="inverter.serial" class="nav-link"
-            role="tablist"
+                            :id="'v-pills-' + inverter.serial + '-tab'" data-bs-toggle="pill"
-            aria-orientation="vertical"
+                            :data-bs-target="'#v-pills-' + inverter.serial" type="button" role="tab"
-          >
+                            aria-controls="'v-pills-' + inverter.serial" aria-selected="true">
-            <button
-              v-for="inverter in inverterData"
-              :key="inverter.serial"
-              class="nav-link"
-              :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
+                        <div v-for="inverter in inverterData" :key="inverter.serial" class="tab-pane fade show"
-              v-for="inverter in inverterData"
+                            :id="'v-pills-' + inverter.serial" role="tabpanel"
-              :key="inverter.serial"
+                            :aria-labelledby="'v-pills-' + inverter.serial + '-tab'" tabindex="0">
-              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
+                                <div class="card-header text-white bg-primary" :class="{
-                  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)
@@ -52,11 +31,8 @@
                                 <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
+                                            <InverterChannelInfo v-if="inverter[channel - 1]"
-                        v-if="inverter[channel - 1]"
+                                                :channelData="inverter[channel - 1]" :channelNumber="channel - 1" />
-                        :channelData="inverter[channel - 1]"
-                        :channelNumber="channel - 1"
-                      />
                                         </div>
                                     </div>
                                 </div>
@@ -112,8 +88,7 @@ export default defineComponent({
             console.log("Starting connection to WebSocket Server");
 
             const { protocol, host } = location;
-      const webSocketUrl = `${
+            const webSocketUrl = `${protocol === "https" ? "wss" : "ws"
-        protocol === "https" ? "wss" : "ws"
                 }://${host}/livedata`;
 
             this.socket = new WebSocket(webSocketUrl);

webapp/src/components/InverterAdminView.vue

@@ -14,22 +14,13 @@
                 <form class="form-inline" v-on:submit.prevent="onSubmit">
                     <div class="form-group">
                         <label>Serial</label>
-            <input
+                        <input v-model="inverterData.serial" type="number" class="form-control ml-sm-2 mr-sm-4 my-2"
-              v-model="inverterData.serial"
+                            required />
-              type="number"
-              class="form-control ml-sm-2 mr-sm-4 my-2"
-              required
-            />
                     </div>
                     <div class="form-group">
                         <label>Name</label>
-            <input
+                        <input v-model="inverterData.name" type="text" class="form-control ml-sm-2 mr-sm-4 my-2"
-              v-model="inverterData.name"
+                            maxlength="31" required />
-              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>
@@ -55,19 +46,11 @@
                             <tr v-for="inverter in sortedInverters" v-bind:key="inverter.id">
                                 <template v-if="editId == inverter.id">
                                     <td>
-                    <input
+                                        <input v-model="editInverterData.serial" type="number" class="form-control" />
-                      v-model="editInverterData.serial"
-                      type="number"
-                      class="form-control"
-                    />
                                     </td>
                                     <td>
-                    <input
+                                        <input v-model="editInverterData.name" type="text" class="form-control"
-                      v-model="editInverterData.name"
+                                            maxlength="31" />
-                      type="text"
-                      class="form-control"
-                      maxlength="31"
-                    />
                                     </td>
                                     <td>
                                         {{ editInverterData.type }}

webapp/src/components/MqttAdminView.vue

@@ -11,12 +11,8 @@
                 <div class="card-header text-white bg-primary">MqTT Configuration</div>
                 <div class="card-body">
                     <div class="form-check form-switch">
-            <input
+                        <input class="form-check-input" type="checkbox" id="inputMqtt"
-              class="form-check-input"
+                            v-model="mqttConfigList.mqtt_enabled" />
-              type="checkbox"
-              id="inputMqtt"
-              v-model="mqttConfigList.mqtt_enabled"
-            />
                         <label class="form-check-label" for="inputMqtt">Enable MqTT</label>
                     </div>
                 </div>
@@ -28,119 +24,67 @@
                 </div>
                 <div class="card-body">
                     <div class="row mb-3">
-            <label for="inputHostname" class="col-sm-2 col-form-label"
+                        <label for="inputHostname" class="col-sm-2 col-form-label">Hostname:</label>
-              >Hostname:</label
-            >
                         <div class="col-sm-10">
-              <input
+                            <input type="text" class="form-control" id="inputHostname" maxlength="32"
-                type="text"
+                                placeholder="Hostname or IP address" v-model="mqttConfigList.mqtt_hostname" />
-                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
+                            <input type="number" class="form-control" id="inputPort" min="1" max="65535"
-                type="number"
+                                placeholder="Port number" v-model="mqttConfigList.mqtt_port" />
-                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"
+                        <label for="inputUsername" class="col-sm-2 col-form-label">Username:</label>
-              >Username:</label
-            >
                         <div class="col-sm-10">
-              <input
+                            <input type="text" class="form-control" id="inputUsername" maxlength="32"
-                type="text"
-                class="form-control"
-                id="inputUsername"
-                maxlength="32"
                                 placeholder="Username, leave empty for anonymous connection"
-                v-model="mqttConfigList.mqtt_username"
+                                v-model="mqttConfigList.mqtt_username" />
-              />
                         </div>
                     </div>
 
                     <div class="row mb-3">
-            <label for="inputPassword" class="col-sm-2 col-form-label"
+                        <label for="inputPassword" class="col-sm-2 col-form-label">Password:</label>
-              >Password:</label
-            >
                         <div class="col-sm-10">
-              <input
+                            <input type="text" class="form-control" id="inputPassword" maxlength="32"
-                type="text"
-                class="form-control"
-                id="inputPassword"
-                maxlength="32"
                                 placeholder="Password, leave empty for anonymous connection"
-                v-model="mqttConfigList.mqtt_password"
+                                v-model="mqttConfigList.mqtt_password" />
-              />
                         </div>
                     </div>
 
                     <div class="row mb-3">
-            <label for="inputTopic" class="col-sm-2 col-form-label"
+                        <label for="inputTopic" class="col-sm-2 col-form-label">Base Topic:</label>
-              >Base Topic:</label
-            >
                         <div class="col-sm-10">
-              <input
+                            <input type="text" class="form-control" id="inputTopic" maxlength="32"
-                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"
+                                v-model="mqttConfigList.mqtt_topic" />
-              />
                         </div>
                     </div>
 
                     <div class="row mb-3">
-            <label for="inputPublishInterval" class="col-sm-2 col-form-label"
+                        <label for="inputPublishInterval" class="col-sm-2 col-form-label">Publish Interval:</label>
-              >Publish Interval:</label
-            >
                         <div class="col-sm-10">
                             <div class="input-group">
-                <input
+                                <input type="number" class="form-control" id="inputPublishInterval" min="5" max="86400"
-                  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"
+                                    aria-describedby="publishIntervalDescription" />
-                />
+                                <span class="input-group-text" id="publishIntervalDescription">seconds</span>
-                <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"
+                        <label class="col-sm-2 form-check-label" for="inputRetain">Enable Retain Flag</label>
-              >Enable Retain Flag</label
-            >
                         <div class="col-sm-10">
                             <div class="form-check form-switch">
-                <input
+                                <input class="form-check-input" type="checkbox" id="inputRetain"
-                  class="form-check-input"
+                                    v-model="mqttConfigList.mqtt_retain" />
-                  type="checkbox"
-                  id="inputRetain"
-                  v-model="mqttConfigList.mqtt_retain"
-                />
                             </div>
                         </div>
                     </div>
@@ -151,56 +95,34 @@
                 <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"
+                        <label for="inputLwtTopic" class="col-sm-2 col-form-label">LWT Topic:</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
+                                <input type="text" class="form-control" id="inputLwtTopic" maxlength="32"
-                  type="text"
-                  class="form-control"
-                  id="inputLwtTopic"
-                  maxlength="32"
                                     placeholder="LWT topic, will be append base topic"
-                  v-model="mqttConfigList.mqtt_lwt_topic"
+                                    v-model="mqttConfigList.mqtt_lwt_topic" aria-describedby="basic-addon3" />
-                  aria-describedby="basic-addon3"
-                />
                             </div>
                         </div>
                     </div>
 
                     <div class="row mb-3">
-            <label for="inputLwtOnline" class="col-sm-2 col-form-label"
+                        <label for="inputLwtOnline" class="col-sm-2 col-form-label">LWT Online message:</label>
-              >LWT Online message:</label
-            >
                         <div class="col-sm-10">
-              <input
+                            <input type="text" class="form-control" id="inputLwtOnline" maxlength="20"
-                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"
+                                v-model="mqttConfigList.mqtt_lwt_online" />
-              />
                         </div>
                     </div>
 
                     <div class="row mb-3">
-            <label for="inputLwtOffline" class="col-sm-2 col-form-label"
+                        <label for="inputLwtOffline" class="col-sm-2 col-form-label">LWT Offline message:</label>
-              >LWT Offline message:</label
-            >
                         <div class="col-sm-10">
-              <input
+                            <input type="text" class="form-control" id="inputLwtOffline" maxlength="20"
-                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"
+                                v-model="mqttConfigList.mqtt_lwt_offline" />
-              />
                         </div>
                     </div>
                 </div>

webapp/src/components/MqttInfoView.vue

@@ -12,13 +12,10 @@
                         <tbody>
                             <tr>
                                 <th>Status</th>
-                <td
+                                <td class="badge" :class="{
-                  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>
@@ -45,13 +42,10 @@
                             </tr>
                             <tr>
                                 <th>Retain</th>
-                <td
+                                <td class="badge" :class="{
-                  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>
@@ -70,13 +64,10 @@
                         <tbody>
                             <tr>
                                 <th>Connection Status</th>
-                <td
+                                <td class="badge" :class="{
-                  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>

webapp/src/components/NavBar.vue

@@ -2,15 +2,8 @@
     <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
         <div class="container-fluid">
             <a class="navbar-brand" href="#">OpenDTU</a>
-      <button
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
-        class="navbar-toggler"
+                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
-        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">
@@ -19,81 +12,52 @@
                         <router-link class="nav-link" to="/">Live Data</router-link>
                     </li>
                     <li class="nav-item dropdown">
-            <a
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button"
-              class="nav-link dropdown-toggle"
+                            data-bs-toggle="dropdown" aria-expanded="false">
-              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"
+                                <router-link class="dropdown-item" to="/settings/network">Network Settings</router-link>
-                  >Network Settings</router-link
-                >
                             </li>
                             <li>
-                <router-link class="dropdown-item" to="/settings/ntp"
+                                <router-link class="dropdown-item" to="/settings/ntp">NTP Settings</router-link>
-                  >NTP Settings</router-link
-                >
                             </li>
                             <li>
-                <router-link class="dropdown-item" to="/settings/mqtt"
+                                <router-link class="dropdown-item" to="/settings/mqtt">MqTT Settings</router-link>
-                  >MqTT Settings</router-link
-                >
                             </li>
                             <li>
-                <router-link class="dropdown-item" to="/settings/inverter"
+                                <router-link class="dropdown-item" to="/settings/inverter">Inverter Settings
-                  >Inverter Settings</router-link
+                                </router-link>
-                >
                             </li>
                             <li>
-                <router-link class="dropdown-item" to="/settings/dtu"
+                                <router-link class="dropdown-item" to="/settings/dtu">DTU Settings</router-link>
-                  >DTU Settings</router-link
-                >
                             </li>
-              <li><hr class="dropdown-divider" /></li>
                             <li>
-                <router-link class="dropdown-item" to="/firmware/upgrade"
+                                <hr class="dropdown-divider" />
-                  >Firmware Upgrade</router-link
+                            </li>
-                >
+                            <li>
+                                <router-link class="dropdown-item" to="/firmware/upgrade">Firmware Upgrade</router-link>
                             </li>
                         </ul>
                     </li>
                     <li class="nav-item dropdown">
-            <a
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button"
-              class="nav-link dropdown-toggle"
+                            data-bs-toggle="dropdown" aria-expanded="false">
-              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"
+                                <router-link class="dropdown-item" to="/info/system">System</router-link>
-                  >System</router-link
-                >
                             </li>
                             <li>
-                <router-link class="dropdown-item" to="/info/network"
+                                <router-link class="dropdown-item" to="/info/network">Network</router-link>
-                  >Network</router-link
-                >
                             </li>
                             <li>
-                <router-link class="dropdown-item" to="/info/ntp"
+                                <router-link class="dropdown-item" to="/info/ntp">NTP</router-link>
-                  >NTP</router-link
-                >
                             </li>
                             <li>
-                <router-link class="dropdown-item" to="/info/mqtt"
+                                <router-link class="dropdown-item" to="/info/mqtt">MqTT</router-link>
-                  >MqTT</router-link
-                >
                             </li>
                         </ul>
                     </li>

webapp/src/components/NetworkAdminView.vue

@@ -11,65 +11,35 @@
                 <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"
+                        <label for="inputSSID" class="col-sm-2 col-form-label">WiFi SSID:</label>
-              >WiFi SSID:</label
-            >
                         <div class="col-sm-10">
-              <input
+                            <input type="text" class="form-control" id="inputSSID" maxlength="32" placeholder="SSID"
-                type="text"
+                                v-model="networkConfigList.ssid" />
-                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"
+                        <label for="inputPassword" class="col-sm-2 col-form-label">WiFi Password:</label>
-              >WiFi Password:</label
-            >
                         <div class="col-sm-10">
-              <input
+                            <input type="password" class="form-control" id="inputPassword" maxlength="32"
-                type="password"
+                                placeholder="PSK" v-model="networkConfigList.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"
+                        <label for="inputHostname" class="col-sm-2 col-form-label">Hostname:</label>
-              >Hostname:</label
-            >
                         <div class="col-sm-10">
-              <input
+                            <input type="text" class="form-control" id="inputHostname" maxlength="32"
-                type="text"
+                                placeholder="Hostname" v-model="networkConfigList.hostname" />
-                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"
+                        <label class="col-sm-2 form-check-label" for="inputDHCP">Enable DHCP</label>
-              >Enable DHCP</label
-            >
                         <div class="col-sm-10">
                             <div class="form-check form-switch">
-                <input
+                                <input class="form-check-input" type="checkbox" id="inputDHCP"
-                  class="form-check-input"
+                                    v-model="networkConfigList.dhcp" />
-                  type="checkbox"
-                  id="inputDHCP"
-                  v-model="networkConfigList.dhcp"
-                />
                             </div>
                         </div>
                     </div>
@@ -82,82 +52,42 @@
                 </div>
                 <div class="card-body">
                     <div class="row mb-3">
-            <label for="inputIP" class="col-sm-2 col-form-label"
+                        <label for="inputIP" class="col-sm-2 col-form-label">IP Address:</label>
-              >IP Address:</label
-            >
                         <div class="col-sm-10">
-              <input
+                            <input type="text" class="form-control" id="inputIP" maxlength="32" placeholder="IP address"
-                type="text"
+                                v-model="networkConfigList.ipaddress" />
-                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"
+                        <label for="inputNetmask" class="col-sm-2 col-form-label">Netmask:</label>
-              >Netmask:</label
-            >
                         <div class="col-sm-10">
-              <input
+                            <input type="text" class="form-control" id="inputNetmask" maxlength="32"
-                type="text"
+                                placeholder="Netmask" v-model="networkConfigList.netmask" />
-                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"
+                        <label for="inputGateway" class="col-sm-2 col-form-label">Default Gateway:</label>
-              >Default Gateway:</label
-            >
                         <div class="col-sm-10">
-              <input
+                            <input type="text" class="form-control" id="inputGateway" maxlength="32"
-                type="text"
+                                placeholder="Default Gateway" v-model="networkConfigList.gateway" />
-                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"
+                        <label for="inputDNS1" class="col-sm-2 col-form-label">DNS Server 1:</label>
-              >DNS Server 1:</label
-            >
                         <div class="col-sm-10">
-              <input
+                            <input type="text" class="form-control" id="inputDNS1" maxlength="32"
-                type="text"
+                                placeholder="DNS Server 1" v-model="networkConfigList.dns1" />
-                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"
+                        <label for="inputDNS2" class="col-sm-2 col-form-label">DNS Server 2:</label>
-              >DNS Server 2:</label
-            >
                         <div class="col-sm-10">
-              <input
+                            <input type="text" class="form-control" id="inputDNS2" maxlength="32"
-                type="text"
+                                placeholder="DNS Server 2" v-model="networkConfigList.dns2" />
-                class="form-control"
-                id="inputDNS2"
-                maxlength="32"
-                placeholder="DNS Server 2"
-                v-model="networkConfigList.dns2"
-              />
                         </div>
                     </div>
                 </div>

webapp/src/components/NtpAdminView.vue

@@ -11,32 +11,19 @@
                 <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"
+                        <label for="inputNtpServer" class="col-sm-2 col-form-label">Time Server:</label>
-              >Time Server:</label
-            >
                         <div class="col-sm-10">
-              <input
+                            <input type="text" class="form-control" id="inputNtpServer" maxlength="32"
-                type="text"
+                                placeholder="Time Server" v-model="ntpConfigList.ntp_server" />
-                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"
+                        <label for="inputTimezone" class="col-sm-2 col-form-label">Timezone:</label>
-              >Timezone:</label
-            >
                         <div class="col-sm-10">
                             <select class="form-select" v-model="timezoneSelect">
-                <option
+                                <option v-for="(config, name) in timezoneList" :key="name + '---' + config"
-                  v-for="(config, name) in timezoneList"
+                                    :value="name + '---' + config">
-                  :key="name + '---' + config"
-                  :value="name + '---' + config"
-                >
                                     {{ name }}
                                 </option>
                             </select>
@@ -44,19 +31,10 @@
                     </div>
 
                     <div class="row mb-3">
-            <label for="inputTimezoneConfig" class="col-sm-2 col-form-label"
+                        <label for="inputTimezoneConfig" class="col-sm-2 col-form-label">Timezone Config:</label>
-              >Timezone Config:</label
-            >
                         <div class="col-sm-10">
-              <input
+                            <input type="text" class="form-control" id="inputTimezoneConfig" maxlength="32"
-                type="text"
+                                placeholder="Timezone" v-model="ntpConfigList.ntp_timezone" disabled />
-                class="form-control"
-                id="inputTimezoneConfig"
-                maxlength="32"
-                placeholder="Timezone"
-                v-model="ntpConfigList.ntp_timezone"
-                disabled
-              />
                         </div>
                     </div>
                 </div>

webapp/src/components/NtpInfoView.vue

@@ -36,13 +36,10 @@
                         <tbody>
                             <tr>
                                 <th>Status</th>
-                <td
+                                <td class="badge" :class="{
-                  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>

webapp/src/components/partials/BootstrapAlert.vue

@@ -1,20 +1,8 @@
 <template>
-  <div
+    <div v-if="isAlertVisible" ref="element" class="alert" role="alert" :class="classes">
-    v-if="isAlertVisible"
-    ref="element"
-    class="alert"
-    role="alert"
-    :class="classes"
-  >
         <slot />
-    <button
+        <button v-if="dismissible" type="button" class="btn-close" data-bs-dismiss="alert" :aria-label="dismissLabel"
-      v-if="dismissible"
+            @click="dismissClicked" />
-      type="button"
-      class="btn-close"
-      data-bs-dismiss="alert"
-      :aria-label="dismissLabel"
-      @click="dismissClicked"
-    />
     </div>
 </template>
 

webapp/src/components/partials/FsInfo.vue

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

webapp/src/components/partials/MemoryInfo.vue

@@ -15,7 +15,8 @@
                     </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="LittleFs" :total="systemDataList.littlefs_total"
+                            :used="systemDataList.littlefs_used" />
                         <FsInfo name="Sketch" :total="systemDataList.sketch_total" :used="systemDataList.sketch_used" />
                     </tbody>
                 </table>

webapp/src/components/partials/WifiApInfo.vue

@@ -9,13 +9,10 @@
                     <tbody>
                         <tr>
                             <th>Status</th>
-              <td
+                            <td class="badge" :class="{
-                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>

webapp/src/components/partials/WifiStationInfo.vue

@@ -9,13 +9,10 @@
                     <tbody>
                         <tr>
                             <th>Status</th>
-              <td
+                            <td class="badge" :class="{
-                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>