Merge remote-tracking branch 'origin/master' into Database

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -84,3 +84,5 @@ body:
           required: true
         - label: I have updated the title field above with a concise description.
           required: true
+        - label: I have double checked that my inverter does not contain a W in the model name (like HMS-xxxW) as they are not supported
+          required: true

docs/DeviceProfiles/wt32-eth01.json

@@ -22,6 +22,34 @@
             "clk_mode": 0
         }
     },
+    {
+        "name": "WT32-ETH01 with SH1106",
+        "links": [
+            {"name": "Datasheet", "url": "http://www.wireless-tag.com/portfolio/wt32-eth01/"}
+        ],
+        "nrf24": {
+            "miso": 4,
+            "mosi": 2,
+            "clk": 32,
+            "irq": 33,
+            "en": 14,
+            "cs": 15
+        },
+        "eth": {
+            "enabled": true,
+            "phy_addr": 1,
+            "power": 16,
+            "mdc": 23,
+            "mdio": 18,
+            "type": 0,
+            "clk_mode": 0
+        },
+        "display": {
+            "type": 3,
+            "data": 5,
+            "clk": 17
+        }
+    },
     {
         "name": "WT32-ETH01 with SSD1306",
         "links": [

include/Configuration.h

@@ -16,6 +16,7 @@
 #define NTP_MAX_TIMEZONEDESCR_STRLEN 50
 
 #define MQTT_MAX_HOSTNAME_STRLEN 128
+#define MQTT_MAX_CLIENTID_STRLEN 64
 #define MQTT_MAX_USERNAME_STRLEN 64
 #define MQTT_MAX_PASSWORD_STRLEN 64
 #define MQTT_MAX_TOPIC_STRLEN 32
@@ -88,6 +89,7 @@ struct CONFIG_T {
         bool Enabled;
         char Hostname[MQTT_MAX_HOSTNAME_STRLEN + 1];
         uint32_t Port;
+        char ClientId[MQTT_MAX_CLIENTID_STRLEN + 1];
         char Username[MQTT_MAX_USERNAME_STRLEN + 1];
         char Password[MQTT_MAX_PASSWORD_STRLEN + 1];
         char Topic[MQTT_MAX_TOPIC_STRLEN + 1];

include/MqttHandleHass.h

@@ -63,7 +63,7 @@ private:
     void publishDtuBinarySensor(const char* name, const char* device_class, const char* category, const char* payload_on, const char* payload_off, const char* subTopic = "");
     void publishInverterField(std::shared_ptr<InverterAbstract> inv, const ChannelType_t type, const ChannelNum_t channel, const byteAssign_fieldDeviceClass_t fieldType, const bool clear = false);
     void publishInverterButton(std::shared_ptr<InverterAbstract> inv, const char* caption, const char* icon, const char* category, const char* deviceClass, const char* subTopic, const char* payload);
-    void publishInverterNumber(std::shared_ptr<InverterAbstract> inv, const char* caption, const char* icon, const char* category, const char* commandTopic, const char* stateTopic, const char* unitOfMeasure, const int16_t min = 1, const int16_t max = 100);
+    void publishInverterNumber(std::shared_ptr<InverterAbstract> inv, const char* caption, const char* icon, const char* category, const char* commandTopic, const char* stateTopic, const char* unitOfMeasure, const int16_t min = 1, const int16_t max = 100, float step = 1.0);
     void publishInverterBinarySensor(std::shared_ptr<InverterAbstract> inv, const char* caption, const char* subTopic, const char* payload_on, const char* payload_off);
 
     static void createInverterInfo(JsonDocument& doc, std::shared_ptr<InverterAbstract> inv);

include/MqttSettings.h

@@ -20,6 +20,7 @@ public:
     void unsubscribe(const String& topic);
 
     String getPrefix() const;
+    String getClientId();
 
 private:
     void NetworkEvent(network_event event);

include/WebApi_errors.h

@@ -60,6 +60,7 @@ enum WebApiError {
     MqttHassTopicLength,
     MqttHassTopicCharacter,
     MqttLwtQos,
+    MqttClientIdLength,
 
     NetworkBase = 8000,
     NetworkIpInvalid,

include/defaults.h

@@ -9,7 +9,7 @@
 
 #define ACCESS_POINT_NAME "OpenDTU-"
 #define ACCESS_POINT_PASSWORD "openDTU42"
-#define ACCESS_POINT_TIMEOUT 3;
+#define ACCESS_POINT_TIMEOUT 3
 #define AUTH_USERNAME "admin"
 #define SECURITY_ALLOW_READONLY true
 

lib/Hoymiles/src/commands/ActivePowerControlCommand.cpp

@@ -85,7 +85,7 @@ bool ActivePowerControlCommand::handleResponse(const fragment_t fragment[], cons
 
 float ActivePowerControlCommand::getLimit() const
 {
-    const uint16_t l = (((uint16_t)_payload[12] << 8) | _payload[13]);
+    const float l = (((uint16_t)_payload[12] << 8) | _payload[13]);
     return l / 10;
 }
 

lib/Hoymiles/src/inverters/HMS_2CH.cpp

@@ -42,7 +42,7 @@ bool HMS_2CH::isValidSerial(const uint64_t serial)
 {
     // serial >= 0x114400000000 && serial <= 0x1144ffffffff
     uint16_t preSerial = (serial >> 32) & 0xffff;
-    return preSerial == 0x1144;
+    return preSerial == 0x1144 || preSerial == 0x1143;
 }
 
 String HMS_2CH::typeName() const

lib/Hoymiles/src/inverters/README.md

@@ -7,7 +7,7 @@
 | HM_4CH        | HM-1000/1200/1500-4T        | 1161         |
 | HMS_1CH       | HMS-300/350/400/450/500-1T  | 1124         |
 | HMS_1CHv2     | HMS-500-1T v2               | 1125         |
-| HMS_2CH       | HMS-600/700/800/900/1000-2T | 1144         |
+| HMS_2CH       | HMS-600/700/800/900/1000-2T | 1143, 1144   |
 | HMS_4CH       | HMS-1600/1800/2000-4T       | 1164         |
 | HMT_4CH       | HMT-1600/1800/2000-4T       | 1361         |
 | HMT_6CH       | HMT-1800/2250-6T            | 1382         |

lib/Hoymiles/src/parser/AlarmLogParser.cpp

@@ -28,15 +28,15 @@ ID   Source Addr   Target Addr   Idx  ?       wcode   ?       Start   End     ?
 
 const std::array<const AlarmMessage_t, ALARM_MSG_COUNT> AlarmLogParser::_alarmMessages = { {
     { AlarmMessageType_t::ALL, 1, "Inverter start", "Wechselrichter gestartet", "L'onduleur a démarré" },
-    { AlarmMessageType_t::ALL, 2, "Time calibration", "", "" },
+    { AlarmMessageType_t::ALL, 2, "Time calibration", "Zeitabgleich", "" },
     { AlarmMessageType_t::ALL, 3, "EEPROM reading and writing error during operation", "", "" },
     { AlarmMessageType_t::ALL, 4, "Offline", "Offline", "Non connecté" },
 
-    { AlarmMessageType_t::ALL, 11, "Grid voltage surge", "", "" },
-    { AlarmMessageType_t::ALL, 12, "Grid voltage sharp drop", "", "" },
-    { AlarmMessageType_t::ALL, 13, "Grid frequency mutation", "", "" },
-    { AlarmMessageType_t::ALL, 14, "Grid phase mutation", "", "" },
-    { AlarmMessageType_t::ALL, 15, "Grid transient fluctuation", "", "" },
+    { AlarmMessageType_t::ALL, 11, "Grid voltage surge", "Netz: Überspannungsimpuls", "" },
+    { AlarmMessageType_t::ALL, 12, "Grid voltage sharp drop", "Netz: Spannungseinbruch", "" },
+    { AlarmMessageType_t::ALL, 13, "Grid frequency mutation", "Netz: Frequenzänderung", "" },
+    { AlarmMessageType_t::ALL, 14, "Grid phase mutation", "Netz: Phasenänderung", "" },
+    { AlarmMessageType_t::ALL, 15, "Grid transient fluctuation", "Netz: vorübergehende Schwankung", "" },
 
     { AlarmMessageType_t::ALL, 36, "INV overvoltage or overcurrent", "", "" },
 

lib/Hoymiles/src/parser/DevInfoParser.cpp

@@ -62,6 +62,7 @@ const devInfo_t devInfo[] = {
     { { 0x10, 0x20, 0x71, ALL }, 500, "HMS-500-1T v2" }, // 02
     { { 0x10, 0x21, 0x11, ALL }, 600, "HMS-600-2T" }, // 01
     { { 0x10, 0x21, 0x41, ALL }, 800, "HMS-800-2T" }, // 00
+    { { 0x10, 0x11, 0x41, ALL }, 800, "HMS-800-2T-LV" }, // 00
     { { 0x10, 0x11, 0x51, ALL }, 900, "HMS-900-2T" }, // 01
     { { 0x10, 0x21, 0x51, ALL }, 900, "HMS-900-2T" }, // 03
     { { 0x10, 0x21, 0x71, ALL }, 1000, "HMS-1000-2T" }, // 05

pio-scripts/auto_firmware_version.py

@@ -3,33 +3,27 @@
 # Copyright (C) 2022 Thomas Basler and others
 #
 import os
-import pkg_resources
 
 Import("env")
 
-required_pkgs = {'dulwich'}
-installed_pkgs = {pkg.key for pkg in pkg_resources.working_set}
-missing_pkgs = required_pkgs - installed_pkgs
-
-if missing_pkgs:
+try:
+    from dulwich import porcelain
+except ModuleNotFoundError:
     env.Execute('"$PYTHONEXE" -m pip install dulwich')
-
-from dulwich import porcelain
+    from dulwich import porcelain
 
 
 def updateFileIfChanged(filename, content):
     mustUpdate = True
     try:
-        fp = open(filename, "rb")
-        if fp.read() == content:
-            mustUpdate = False
-        fp.close()
+        with open(filename, "rb") as fp:
+            if fp.read() == content:
+                mustUpdate = False
     except:
         pass
     if mustUpdate:
-        fp = open(filename, "wb")
-        fp.write(content)
-        fp.close()
+        with open(filename, "wb") as fp:
+            fp.write(content)
     return mustUpdate
 
 

platformio.ini

@@ -19,7 +19,7 @@ extra_configs =
 custom_ci_action = generic,generic_esp32,generic_esp32s3,generic_esp32s3_usb
 
 framework = arduino
-platform = espressif32@6.7.0
+platform = espressif32@6.8.1
 
 build_flags =
     -DPIOENV=\"$PIOENV\"
@@ -27,6 +27,7 @@ build_flags =
     -D_TASK_THREAD_SAFE=1
     -DCONFIG_ASYNC_TCP_EVENT_QUEUE_SIZE=128
     -DCONFIG_ASYNC_TCP_QUEUE_SIZE=128
+    -DEMC_TASK_STACK_SIZE=6400
     -Wall -Wextra -Wunused -Wmisleading-indentation -Wduplicated-cond -Wlogical-op -Wnull-dereference
 ;   Have to remove -Werror because of
 ;   https://github.com/espressif/arduino-esp32/issues/9044 and
@@ -38,10 +39,10 @@ build_unflags =
     -std=gnu++11
 
 lib_deps =
-    mathieucarbou/ESP Async WebServer @ 2.10.8
-    bblanchon/ArduinoJson @ 7.0.4
+    mathieucarbou/ESPAsyncWebServer @ 3.1.2
+    bblanchon/ArduinoJson @ 7.1.0
     https://github.com/bertmelis/espMqttClient.git#v1.7.0
-    nrf24/RF24 @ 1.4.8
+    nrf24/RF24 @ 1.4.9
     olikraus/U8g2 @ 2.35.19
     buelowp/sunset @ 1.1.7
     https://github.com/arkhipenko/TaskScheduler#testing

src/Configuration.cpp

@@ -4,6 +4,7 @@
  */
 #include "Configuration.h"
 #include "MessageOutput.h"
+#include "NetworkSettings.h"
 #include "Utils.h"
 #include "defaults.h"
 #include <ArduinoJson.h>
@@ -58,6 +59,7 @@ bool ConfigurationClass::write()
     mqtt["enabled"] = config.Mqtt.Enabled;
     mqtt["hostname"] = config.Mqtt.Hostname;
     mqtt["port"] = config.Mqtt.Port;
+    mqtt["clientid"] = config.Mqtt.ClientId;
     mqtt["username"] = config.Mqtt.Username;
     mqtt["password"] = config.Mqtt.Password;
     mqtt["topic"] = config.Mqtt.Topic;
@@ -232,6 +234,7 @@ bool ConfigurationClass::read()
     config.Mqtt.Enabled = mqtt["enabled"] | MQTT_ENABLED;
     strlcpy(config.Mqtt.Hostname, mqtt["hostname"] | MQTT_HOST, sizeof(config.Mqtt.Hostname));
     config.Mqtt.Port = mqtt["port"] | MQTT_PORT;
+    strlcpy(config.Mqtt.ClientId, mqtt["clientid"] | NetworkSettings.getApName().c_str(), sizeof(config.Mqtt.ClientId));
     strlcpy(config.Mqtt.Username, mqtt["username"] | MQTT_USER, sizeof(config.Mqtt.Username));
     strlcpy(config.Mqtt.Password, mqtt["password"] | MQTT_PASSWORD, sizeof(config.Mqtt.Password));
     strlcpy(config.Mqtt.Topic, mqtt["topic"] | MQTT_TOPIC, sizeof(config.Mqtt.Topic));

src/MqttHandleHass.cpp

@@ -73,8 +73,8 @@ void MqttHandleHassClass::publishConfig()
         publishInverterButton(inv, "Turn Inverter On", "mdi:power-plug", "config", "", "cmd/power", "1");
         publishInverterButton(inv, "Restart Inverter", "", "config", "restart", "cmd/restart", "1");
 
-        publishInverterNumber(inv, "Limit NonPersistent Relative", "mdi:speedometer", "config", "cmd/limit_nonpersistent_relative", "status/limit_relative", "%", 0, 100);
-        publishInverterNumber(inv, "Limit Persistent Relative", "mdi:speedometer", "config", "cmd/limit_persistent_relative", "status/limit_relative", "%", 0, 100);
+        publishInverterNumber(inv, "Limit NonPersistent Relative", "mdi:speedometer", "config", "cmd/limit_nonpersistent_relative", "status/limit_relative", "%", 0, 100, 0.1);
+        publishInverterNumber(inv, "Limit Persistent Relative", "mdi:speedometer", "config", "cmd/limit_persistent_relative", "status/limit_relative", "%", 0, 100, 0.1);
 
         publishInverterNumber(inv, "Limit NonPersistent Absolute", "mdi:speedometer", "config", "cmd/limit_nonpersistent_absolute", "status/limit_absolute", "W", 0, MAX_INVERTER_LIMIT);
         publishInverterNumber(inv, "Limit Persistent Absolute", "mdi:speedometer", "config", "cmd/limit_persistent_absolute", "status/limit_absolute", "W", 0, MAX_INVERTER_LIMIT);
@@ -215,7 +215,7 @@ void MqttHandleHassClass::publishInverterButton(std::shared_ptr<InverterAbstract
 void MqttHandleHassClass::publishInverterNumber(
     std::shared_ptr<InverterAbstract> inv, const char* caption, const char* icon, const char* category,
     const char* commandTopic, const char* stateTopic, const char* unitOfMeasure,
-    const int16_t min, const int16_t max)
+    const int16_t min, const int16_t max, float step)
 {
     const String serial = inv->serialString();
 
@@ -243,6 +243,7 @@ void MqttHandleHassClass::publishInverterNumber(
     root["unit_of_meas"] = unitOfMeasure;
     root["min"] = min;
     root["max"] = max;
+    root["step"] = step;
 
     createInverterInfo(root, inv);
 

src/MqttHandleInverter.cpp

@@ -183,7 +183,7 @@ void MqttHandleInverterClass::onMqttMessage(const espMqttClientTypes::MessagePro
     char* strlimit = new char[len + 1];
     memcpy(strlimit, payload, len);
     strlimit[len] = '\0';
-    const int32_t payload_val = strtol(strlimit, NULL, 10);
+    const float payload_val = strtof(strlimit, NULL);
     delete[] strlimit;
 
     if (payload_val < 0) {
@@ -193,17 +193,17 @@ void MqttHandleInverterClass::onMqttMessage(const espMqttClientTypes::MessagePro
 
     if (!strcmp(setting, TOPIC_SUB_LIMIT_PERSISTENT_RELATIVE)) {
         // Set inverter limit relative persistent
-        MessageOutput.printf("Limit Persistent: %d %%\r\n", payload_val);
+        MessageOutput.printf("Limit Persistent: %.1f %%\r\n", payload_val);
         inv->sendActivePowerControlRequest(payload_val, PowerLimitControlType::RelativPersistent);
 
     } else if (!strcmp(setting, TOPIC_SUB_LIMIT_PERSISTENT_ABSOLUTE)) {
         // Set inverter limit absolute persistent
-        MessageOutput.printf("Limit Persistent: %d W\r\n", payload_val);
+        MessageOutput.printf("Limit Persistent: %.1f W\r\n", payload_val);
         inv->sendActivePowerControlRequest(payload_val, PowerLimitControlType::AbsolutPersistent);
 
     } else if (!strcmp(setting, TOPIC_SUB_LIMIT_NONPERSISTENT_RELATIVE)) {
         // Set inverter limit relative non persistent
-        MessageOutput.printf("Limit Non-Persistent: %d %%\r\n", payload_val);
+        MessageOutput.printf("Limit Non-Persistent: %.1f %%\r\n", payload_val);
         if (!properties.retain) {
             inv->sendActivePowerControlRequest(payload_val, PowerLimitControlType::RelativNonPersistent);
         } else {
@@ -212,7 +212,7 @@ void MqttHandleInverterClass::onMqttMessage(const espMqttClientTypes::MessagePro
 
     } else if (!strcmp(setting, TOPIC_SUB_LIMIT_NONPERSISTENT_ABSOLUTE)) {
         // Set inverter limit absolute non persistent
-        MessageOutput.printf("Limit Non-Persistent: %d W\r\n", payload_val);
+        MessageOutput.printf("Limit Non-Persistent: %.1f W\r\n", payload_val);
         if (!properties.retain) {
             inv->sendActivePowerControlRequest(payload_val, PowerLimitControlType::AbsolutNonPersistent);
         } else {
@@ -221,8 +221,8 @@ void MqttHandleInverterClass::onMqttMessage(const espMqttClientTypes::MessagePro
 
     } else if (!strcmp(setting, TOPIC_SUB_POWER)) {
         // Turn inverter on or off
-        MessageOutput.printf("Set inverter power to: %d\r\n", payload_val);
-        inv->sendPowerControlRequest(payload_val > 0);
+        MessageOutput.printf("Set inverter power to: %d\r\n", static_cast<int32_t>(payload_val));
+        inv->sendPowerControlRequest(static_cast<int32_t>(payload_val) > 0);
 
     } else if (!strcmp(setting, TOPIC_SUB_RESTART)) {
         // Restart inverter
@@ -230,7 +230,7 @@ void MqttHandleInverterClass::onMqttMessage(const espMqttClientTypes::MessagePro
         if (!properties.retain && payload_val == 1) {
             inv->sendRestartControlRequest();
         } else {
-            MessageOutput.println("Ignored because retained");
+            MessageOutput.println("Ignored because retained or numeric value not '1'");
         }
     }
 }

src/MqttSettings.cpp

@@ -115,7 +115,7 @@ void MqttSettingsClass::performConnect()
         MessageOutput.println("Connecting to MQTT...");
         const CONFIG_T& config = Configuration.get();
         const String willTopic = getPrefix() + config.Mqtt.Lwt.Topic;
-        const String clientId = NetworkSettings.getApName();
+        String clientId = getClientId();
         if (config.Mqtt.Tls.Enabled) {
             static_cast<espMqttClientSecure*>(_mqttClient)->setCACert(config.Mqtt.Tls.RootCaCert);
             static_cast<espMqttClientSecure*>(_mqttClient)->setServer(config.Mqtt.Hostname, config.Mqtt.Port);
@@ -180,6 +180,15 @@ String MqttSettingsClass::getPrefix() const
     return Configuration.get().Mqtt.Topic;
 }
 
+String MqttSettingsClass::getClientId()
+{
+    String clientId = Configuration.get().Mqtt.ClientId;
+    if (clientId == "") {
+        clientId = NetworkSettings.getApName();
+    }
+    return clientId;
+}
+
 void MqttSettingsClass::publish(const String& subtopic, const String& payload)
 {
     String topic = getPrefix();

src/NetworkSettings.cpp

@@ -27,6 +27,8 @@ void NetworkSettingsClass::init(Scheduler& scheduler)
     WiFi.setScanMethod(WIFI_ALL_CHANNEL_SCAN);
     WiFi.setSortMethod(WIFI_CONNECT_AP_BY_SIGNAL);
 
+    WiFi.disconnect(true, true);
+
     WiFi.onEvent(std::bind(&NetworkSettingsClass::NetworkEvent, this, _1));
     setupMode();
 
@@ -77,7 +79,8 @@ void NetworkSettingsClass::NetworkEvent(const WiFiEvent_t event)
         MessageOutput.println("WiFi disconnected");
         if (_networkMode == network_mode::WiFi) {
             MessageOutput.println("Try reconnecting");
-            WiFi.reconnect();
+            WiFi.disconnect(true, false);
+            WiFi.begin();
             raiseEvent(network_event::NETWORK_DISCONNECTED);
         }
         break;

src/WebApi_limit.cpp

@@ -83,7 +83,7 @@ void WebApiLimitClass::onLimitPost(AsyncWebServerRequest* request)
         return;
     }
 
-    if (root["limit_value"].as<uint16_t>() > MAX_INVERTER_LIMIT) {
+    if (root["limit_value"].as<float>() > MAX_INVERTER_LIMIT) {
         retMsg["message"] = "Limit must between 0 and " STR(MAX_INVERTER_LIMIT) "!";
         retMsg["code"] = WebApiError::LimitInvalidLimit;
         retMsg["param"]["max"] = MAX_INVERTER_LIMIT;
@@ -102,7 +102,7 @@ void WebApiLimitClass::onLimitPost(AsyncWebServerRequest* request)
         return;
     }
 
-    uint16_t limit = root["limit_value"].as<uint16_t>();
+    float limit = root["limit_value"].as<float>();
     PowerLimitControlType type = root["limit_type"].as<PowerLimitControlType>();
 
     auto inv = Hoymiles.getInverterBySerial(serial);

src/WebApi_mqtt.cpp

@@ -34,6 +34,7 @@ void WebApiMqttClass::onMqttStatus(AsyncWebServerRequest* request)
     root["mqtt_enabled"] = config.Mqtt.Enabled;
     root["mqtt_hostname"] = config.Mqtt.Hostname;
     root["mqtt_port"] = config.Mqtt.Port;
+    root["mqtt_clientid"] = MqttSettings.getClientId();
     root["mqtt_username"] = config.Mqtt.Username;
     root["mqtt_topic"] = config.Mqtt.Topic;
     root["mqtt_connected"] = MqttSettings.getConnected();
@@ -67,6 +68,7 @@ void WebApiMqttClass::onMqttAdminGet(AsyncWebServerRequest* request)
     root["mqtt_enabled"] = config.Mqtt.Enabled;
     root["mqtt_hostname"] = config.Mqtt.Hostname;
     root["mqtt_port"] = config.Mqtt.Port;
+    root["mqtt_clientid"] = config.Mqtt.ClientId;
     root["mqtt_username"] = config.Mqtt.Username;
     root["mqtt_password"] = config.Mqtt.Password;
     root["mqtt_topic"] = config.Mqtt.Topic;
@@ -108,6 +110,7 @@ void WebApiMqttClass::onMqttAdminPost(AsyncWebServerRequest* request)
     if (!(root.containsKey("mqtt_enabled")
             && root.containsKey("mqtt_hostname")
             && root.containsKey("mqtt_port")
+            && root.containsKey("mqtt_clientid")
             && root.containsKey("mqtt_username")
             && root.containsKey("mqtt_password")
             && root.containsKey("mqtt_topic")
@@ -142,6 +145,13 @@ void WebApiMqttClass::onMqttAdminPost(AsyncWebServerRequest* request)
             return;
         }
 
+        if (root["mqtt_clientid"].as<String>().length() > MQTT_MAX_CLIENTID_STRLEN) {
+            retMsg["message"] = "Client ID must not be longer than " STR(MQTT_MAX_CLIENTID_STRLEN) " characters!";
+            retMsg["code"] = WebApiError::MqttClientIdLength;
+            retMsg["param"]["max"] = MQTT_MAX_CLIENTID_STRLEN;
+            WebApi.sendJsonResponse(request, response, __FUNCTION__, __LINE__);
+            return;
+        }
         if (root["mqtt_username"].as<String>().length() > MQTT_MAX_USERNAME_STRLEN) {
             retMsg["message"] = "Username must not be longer than " STR(MQTT_MAX_USERNAME_STRLEN) " characters!";
             retMsg["code"] = WebApiError::MqttUsernameLength;
@@ -271,6 +281,7 @@ void WebApiMqttClass::onMqttAdminPost(AsyncWebServerRequest* request)
     strlcpy(config.Mqtt.Tls.ClientKey, root["mqtt_client_key"].as<String>().c_str(), sizeof(config.Mqtt.Tls.ClientKey));
     config.Mqtt.Port = root["mqtt_port"].as<uint>();
     strlcpy(config.Mqtt.Hostname, root["mqtt_hostname"].as<String>().c_str(), sizeof(config.Mqtt.Hostname));
+    strlcpy(config.Mqtt.ClientId, root["mqtt_clientid"].as<String>().c_str(), sizeof(config.Mqtt.ClientId));
     strlcpy(config.Mqtt.Username, root["mqtt_username"].as<String>().c_str(), sizeof(config.Mqtt.Username));
     strlcpy(config.Mqtt.Password, root["mqtt_password"].as<String>().c_str(), sizeof(config.Mqtt.Password));
     strlcpy(config.Mqtt.Lwt.Topic, root["mqtt_lwt_topic"].as<String>().c_str(), sizeof(config.Mqtt.Lwt.Topic));

src/WebApi_webapp.cpp

@@ -42,7 +42,7 @@ void WebApiWebappClass::responseBinaryDataWithETagCache(AsyncWebServerRequest *r
     if (eTagMatch) {
         response = request->beginResponse(304);
     } else {
-        response = request->beginResponse_P(200, contentType, content, len);
+        response = request->beginResponse(200, contentType, content, len);
         if (contentEncoding.length() > 0) {
             response->addHeader("Content-Encoding", contentEncoding);
         }

webapp/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": true,
+  "tabWidth": 4,
+  "singleQuote": true,
+  "printWidth": 120,
+  "trailingComma": "es5"
+}

webapp/README.md

@@ -1,6 +1,6 @@
 # OpenDTU web frontend
 
-You can run the webapp locally with `yarn dev`. If you enter the IP of your ESP in the `vite.config.ts` beforehand, all api requests will even be proxied to the real ESP. Then you can develop the webapp as if it were running directly on the ESP. The `yarn dev` also supports hot reload, i.e. as soon as you save a vue file, it is automatically reloaded in the browser.
+You can run the webapp locally with `yarn dev`. If you enter the IP of your ESP in the `vite.user.ts` beforehand (template can be found in `vite.config.ts`), all api requests will even be proxied to the real ESP. Then you can develop the webapp as if it were running directly on the ESP. The `yarn dev` also supports hot reload, i.e. as soon as you save a vue file, it is automatically reloaded in the browser.
 
 ## Project Setup
 

webapp/env.d.ts

@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+import { Router, Route } from 'vue-router'
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $router: Router
+    $route: Route
+  }
+}

webapp/eslint.config.js

@@ -30,7 +30,7 @@ export default [
         "**/*.mts",
       ],
       languageOptions: {
-        ecmaVersion: 'latest'
+        ecmaVersion: 2022
       },
     }
   ]

webapp/package.json

@@ -9,7 +9,8 @@
     "preview": "vite preview --port 4173",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "format": "prettier --write src/"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
@@ -19,34 +20,35 @@
     "pure-vue-chart": "^0.4.0",
     "sortablejs": "^1.15.2",
     "spark-md5": "^3.0.2",
-    "vue": "^3.4.27",
+    "vue": "^3.4.35",
     "tippy.js": "^6.3.7",
     "vue-google-charts": "^1.1.0",
     "vue3-calendar-heatmap": "^2.0.5",
     "vue-i18n": "^9.13.1",
-    "vue-router": "^4.3.3"
+    "vue-router": "^4.4.2"
   },
   "devDependencies": {
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@tsconfig/node18": "^18.2.4",
     "@types/bootstrap": "^5.2.10",
-    "@types/node": "^20.14.2",
+    "@types/node": "^22.1.0",
     "@types/pulltorefreshjs": "^0.1.7",
     "@types/sortablejs": "^1.15.8",
     "@types/spark-md5": "^3.0.4",
-    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue": "^5.1.2",
     "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/tsconfig": "^0.5.1",
-    "eslint": "^9.4.0",
-    "eslint-plugin-vue": "^9.26.0",
+    "eslint": "^9.8.0",
+    "eslint-plugin-vue": "^9.27.0",
     "npm-run-all": "^4.1.5",
+    "prettier": "^3.3.3",
     "pulltorefreshjs": "^0.1.22",
-    "sass": "^1.77.4",
-    "terser": "^5.31.1",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.13",
+    "sass": "^1.77.6",
+    "terser": "^5.31.3",
+    "typescript": "^5.5.4",
+    "vite": "^5.3.5",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-css-injected-by-js": "^3.5.1",
-    "vue-tsc": "^2.0.21"
+    "vue-tsc": "^2.0.29"
   }
 }

webapp/src/App.vue

@@ -5,10 +5,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import NavBar from "./components/NavBar.vue";
+import NavBar from './components/NavBar.vue';
 
 export default defineComponent({
-    name: "App",
+    name: 'App',
     components: {
         NavBar,
     },

webapp/src/components/BasePage.vue

@@ -1,19 +1,29 @@
 <template>
-    <div :class="{'container-xxl': !isWideScreen,
-    'container-fluid': isWideScreen}" role="main">
+    <div :class="{ 'container-xxl': !isWideScreen, 'container-fluid': isWideScreen }" role="main">
         <div class="page-header">
             <div class="row">
                 <div class="col-sm-11">
-                    <h1>{{ title }}
-                        <span v-if="showWebSocket" :class="{
-                            'onlineMarker': isWebsocketConnected,
-                            'offlineMarker': !isWebsocketConnected,
-                        }"></span>
+                    <h1>
+                        {{ title }}
+                        <span
+                            v-if="showWebSocket"
+                            :class="{
+                                onlineMarker: isWebsocketConnected,
+                                offlineMarker: !isWebsocketConnected,
+                            }"
+                        ></span>
                     </h1>
                 </div>
                 <div class="col-sm-1" v-if="showReload">
-                    <button type="button" class="float-end btn btn-outline-primary"
-                        @click="$emit('reload')" v-tooltip :title="$t('base.Reload')" ><BIconArrowClockwise /></button>
+                    <button
+                        type="button"
+                        class="float-end btn btn-outline-primary"
+                        @click="$emit('reload')"
+                        v-tooltip
+                        :title="$t('base.Reload')"
+                    >
+                        <BIconArrowClockwise />
+                    </button>
                 </div>
             </div>
         </div>
@@ -48,7 +58,7 @@ export default defineComponent({
         showReload: { type: Boolean, required: false, default: false },
     },
     mounted() {
-        console.log("init");
+        console.log('init');
         PullToRefresh.init({
             mainElement: 'body', // above which element?
             instructionsPullToRefresh: this.$t('base.Pull'),
@@ -56,11 +66,11 @@ export default defineComponent({
             instructionsRefreshing: this.$t('base.Refreshing'),
             onRefresh: () => {
                 this.$emit('reload');
-            }
+            },
         });
     },
     unmounted() {
-        console.log("destroy");
+        console.log('destroy');
         PullToRefresh.destroyAll();
     },
 });
@@ -100,13 +110,15 @@ export default defineComponent({
     margin: -12px 0 0 -12px;
     border: 1px solid #00bb00;
     border-radius: 50%;
-    box-shadow: 0 0 4px #00bb00, inset 0 0 4px rgb(56, 111, 169);
+    box-shadow:
+        0 0 4px #00bb00,
+        inset 0 0 4px rgb(56, 111, 169);
     transform: scale(0);
     animation: online 2.5s ease-in-out infinite;
 }
 @keyframes online {
     0% {
-        transform: scale(.1);
+        transform: scale(0.1);
         opacity: 1;
     }
 

webapp/src/components/BootstrapAlert.vue

@@ -1,44 +1,50 @@
 <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" />
+        <button
+            v-if="dismissible"
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="alert"
+            :aria-label="dismissLabel"
+            @click="dismissClicked"
+        />
     </div>
 </template>
 
 <script lang="ts">
-import Alert from "bootstrap/js/dist/alert";
-import { computed, defineComponent, onBeforeUnmount, ref, watch } from "vue";
+import Alert from 'bootstrap/js/dist/alert';
+import { computed, defineComponent, onBeforeUnmount, ref, watch } from 'vue';
 
 export const toInteger = (value: number, defaultValue = NaN) => {
     return Number.isInteger(value) ? value : defaultValue;
 };
 
 export default defineComponent({
-    name: "BootstrapAlert",
+    name: 'BootstrapAlert',
     props: {
-        dismissLabel: { type: String, default: "Close" },
+        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" },
+        variant: { type: String, default: 'info' },
     },
-    emits: ["dismissed", "dismiss-count-down", "update:modelValue"],
+    emits: ['dismissed', 'dismiss-count-down', 'update:modelValue'],
     setup(props, { emit }) {
         const element = ref<HTMLElement>();
         const instance = ref<Alert>();
         const classes = computed(() => ({
             [`alert-${props.variant}`]: props.variant,
             show: props.modelValue,
-            "alert-dismissible": props.dismissible,
+            'alert-dismissible': props.dismissible,
             fade: props.modelValue,
         }));
 
         let _countDownTimeout: number | undefined = 0;
 
         const parseCountDown = (value: boolean | number) => {
-            if (typeof value === "boolean") {
+            if (typeof value === 'boolean') {
                 return 0;
             }
 
@@ -53,9 +59,12 @@ export default defineComponent({
         };
 
         const countDown = ref();
-        watch(() => props.modelValue, () => {
-            countDown.value = parseCountDown(props.modelValue);
-        });
+        watch(
+            () => props.modelValue,
+            () => {
+                countDown.value = parseCountDown(props.modelValue);
+            }
+        );
 
         const isAlertVisible = computed(() => props.modelValue || props.show);
 
@@ -85,12 +94,12 @@ export default defineComponent({
         };
 
         const dismissClicked = () => {
-            if (typeof props.modelValue === "boolean") {
-                emit("update:modelValue", false);
+            if (typeof props.modelValue === 'boolean') {
+                emit('update:modelValue', false);
             } else {
-                emit("update:modelValue", 0);
+                emit('update:modelValue', 0);
             }
-            emit("dismissed");
+            emit('dismissed');
         };
 
         watch(() => props.modelValue, handleShowAndModelChanged);
@@ -98,10 +107,10 @@ export default defineComponent({
 
         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 (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--;

webapp/src/components/CardElement.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['card', addSpace ? 'mt-5' : '' ]">
+    <div :class="['card', addSpace ? 'mt-5' : '']">
         <div :class="['card-header', textVariant]">{{ text }}</div>
         <div :class="['card-body', 'card-text', centerContent ? 'text-center' : '']">
             <slot />
@@ -12,10 +12,10 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
     props: {
-        'text': String,
-        'textVariant': String,
-        'addSpace': Boolean,
-        'centerContent': Boolean,
+        text: String,
+        textVariant: String,
+        addSpace: Boolean,
+        centerContent: Boolean,
     },
 });
 </script>

webapp/src/components/DevInfo.vue

@@ -1,8 +1,7 @@
 <template>
     <BootstrapAlert :show="!devInfoList.valid_data">
-        <h4 class="alert-heading">
-            <BIconInfoSquare class="fs-2" />&nbsp;{{ $t('devinfo.NoInfo') }}
-        </h4>{{ $t('devinfo.NoInfoLong') }}
+        <h4 class="alert-heading"><BIconInfoSquare class="fs-2" />&nbsp;{{ $t('devinfo.NoInfo') }}</h4>
+        {{ $t('devinfo.NoInfoLong') }}
     </BootstrapAlert>
     <table v-if="devInfoList.valid_data" class="table table-hover">
         <tbody>
@@ -53,7 +52,7 @@
 
 <script lang="ts">
 import BootstrapAlert from '@/components/BootstrapAlert.vue';
-import type { DevInfoStatus } from "@/types/DevInfoStatus";
+import type { DevInfoStatus } from '@/types/DevInfoStatus';
 import { BIconInfoSquare } from 'bootstrap-icons-vue';
 import { defineComponent, type PropType } from 'vue';
 
@@ -70,20 +69,20 @@ export default defineComponent({
             return (value: number) => {
                 const version_major = Math.floor(value / 10000);
                 const version_minor = Math.floor((value - version_major * 10000) / 100);
-                const version_patch = Math.floor((value - version_major * 10000 - version_minor * 100));
-                return version_major + "." + version_minor + "." + version_patch;
+                const version_patch = Math.floor(value - version_major * 10000 - version_minor * 100);
+                return version_major + '.' + version_minor + '.' + version_patch;
             };
         },
         productionYear() {
-            return() => {
-                return ((parseInt(this.devInfoList.serial, 16) >> (7 * 4)) & 0xF) + 2014;
-            }
+            return () => {
+                return ((parseInt(this.devInfoList.serial, 16) >> (7 * 4)) & 0xf) + 2014;
+            };
         },
         productionWeek() {
-            return() => {
-                return ((parseInt(this.devInfoList.serial, 16) >> (5 * 4)) & 0xFF).toString(16);
-            }
-        }
-    }
+            return () => {
+                return ((parseInt(this.devInfoList.serial, 16) >> (5 * 4)) & 0xff).toString(16);
+            };
+        },
+    },
 });
 </script>

webapp/src/components/FirmwareInfo.vue

@@ -17,10 +17,16 @@
                     </tr>
                     <tr>
                         <th>{{ $t('firmwareinfo.FirmwareVersion') }}</th>
-                        <td><a :href="versionInfoUrl"
-                                target="_blank" v-tooltip :title="$t('firmwareinfo.FirmwareVersionHint')">
+                        <td>
+                            <a
+                                :href="versionInfoUrl"
+                                target="_blank"
+                                v-tooltip
+                                :title="$t('firmwareinfo.FirmwareVersionHint')"
+                            >
                                 {{ systemStatus.git_hash }}
-                            </a></td>
+                            </a>
+                        </td>
                     </tr>
                     <tr>
                         <th>{{ $t('firmwareinfo.PioEnv') }}</th>
@@ -30,16 +36,32 @@
                         <th>{{ $t('firmwareinfo.FirmwareUpdate') }}</th>
                         <td>
                             <div class="form-check form-check-inline form-switch">
-                                <input v-model="modelAllowVersionInfo" class="form-check-input" type="checkbox" role="switch" v-tooltip :title="$t('firmwareinfo.FrmwareUpdateAllow')" />
+                                <input
+                                    v-model="modelAllowVersionInfo"
+                                    class="form-check-input"
+                                    type="checkbox"
+                                    role="switch"
+                                    v-tooltip
+                                    :title="$t('firmwareinfo.FrmwareUpdateAllow')"
+                                />
                                 <label class="form-check-label">
-                                    <a v-if="modelAllowVersionInfo && systemStatus.update_url !== undefined" :href="systemStatus.update_url" target="_blank" v-tooltip
-                                        :title="$t('firmwareinfo.FirmwareUpdateHint')">
+                                    <a
+                                        v-if="modelAllowVersionInfo && systemStatus.update_url !== undefined"
+                                        :href="systemStatus.update_url"
+                                        target="_blank"
+                                        v-tooltip
+                                        :title="$t('firmwareinfo.FirmwareUpdateHint')"
+                                    >
                                         <span class="badge" :class="systemStatus.update_status">
                                             {{ systemStatus.update_text }}
                                         </span>
                                     </a>
-                                    <span v-else-if="modelAllowVersionInfo" class="badge" :class="systemStatus.update_status">
-                                            {{ systemStatus.update_text }}
+                                    <span
+                                        v-else-if="modelAllowVersionInfo"
+                                        class="badge"
+                                        :class="systemStatus.update_status"
+                                    >
+                                        {{ systemStatus.update_text }}
                                     </span>
                                 </label>
                             </div>
@@ -59,7 +81,9 @@
                     </tr>
                     <tr>
                         <th>{{ $t('firmwareinfo.Uptime') }}</th>
-                        <td>{{ $t('firmwareinfo.UptimeValue', timeInHours(systemStatus.uptime)) }}</td>
+                        <td>
+                            {{ $t('firmwareinfo.UptimeValue', timeInHours(systemStatus.uptime)) }}
+                        </td>
                     </tr>
                 </tbody>
             </table>
@@ -93,7 +117,7 @@ export default defineComponent({
         timeInHours() {
             return (value: number) => {
                 const [count, time] = timestampToString(this.$i18n.locale, value, true);
-                return {count, time};
+                return { count, time };
             };
         },
         versionInfoUrl(): string {
@@ -101,7 +125,7 @@ export default defineComponent({
                 return 'https://github.com/tbnobody/OpenDTU/commits/' + this.systemStatus.git_hash;
             }
             return 'https://github.com/tbnobody/OpenDTU/releases/tag/' + this.systemStatus.git_hash;
-        }
+        },
     },
 });
 </script>

webapp/src/components/FormFooter.vue

@@ -1,7 +1,9 @@
 <template>
-    <hr class="border border-3 opacity-75">
+    <hr class="border border-3 opacity-75" />
     <div class="d-grid gap-2 d-md-flex justify-content-md-end">
-        <button type="button" class="btn btn-secondary" @click="$emit('reload')">{{ $t('base.Cancel') }}</button>
+        <button type="button" class="btn btn-secondary" @click="$emit('reload')">
+            {{ $t('base.Cancel') }}
+        </button>
         <button type="submit" class="btn btn-primary">{{ $t('base.Save') }}</button>
     </div>
 </template>

webapp/src/components/FsInfo.vue

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

webapp/src/components/GridProfile.vue

@@ -1,47 +1,57 @@
 <template>
     <BootstrapAlert :show="!hasValidData">
-        <h4 class="alert-heading">
-            <BIconInfoSquare class="fs-2" />&nbsp;{{ $t('gridprofile.NoInfo') }}
-        </h4>{{ $t('gridprofile.NoInfoLong') }}
+        <h4 class="alert-heading"><BIconInfoSquare class="fs-2" />&nbsp;{{ $t('gridprofile.NoInfo') }}</h4>
+        {{ $t('gridprofile.NoInfoLong') }}
     </BootstrapAlert>
 
     <template v-if="hasValidData">
         <table class="table table-hover">
-        <tbody>
-            <tr>
-                <td>{{ $t('gridprofile.Name') }}</td>
-                <td>{{ gridProfileList.name }}</td>
-            </tr>
-            <tr>
-                <td>{{ $t('gridprofile.Version') }}</td>
-                <td>{{ gridProfileList.version }}</td>
-            </tr>
-        </tbody>
+            <tbody>
+                <tr>
+                    <td>{{ $t('gridprofile.Name') }}</td>
+                    <td>{{ gridProfileList.name }}</td>
+                </tr>
+                <tr>
+                    <td>{{ $t('gridprofile.Version') }}</td>
+                    <td>{{ gridProfileList.version }}</td>
+                </tr>
+            </tbody>
         </table>
 
         <div class="accordion" id="accordionProfile">
             <div class="accordion-item" v-for="(section, index) in gridProfileList.sections" :key="index">
                 <h2 class="accordion-header">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" :data-bs-target="`#collapse${index}`" aria-expanded="true" :aria-controls="`collapse${index}`">
+                    <button
+                        class="accordion-button collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        :data-bs-target="`#collapse${index}`"
+                        aria-expanded="true"
+                        :aria-controls="`collapse${index}`"
+                    >
                         {{ section.name }}
                     </button>
                 </h2>
                 <div :id="`collapse${index}`" class="accordion-collapse collapse" data-bs-parent="#accordionProfile">
                     <div class="accordion-body">
                         <table class="table table-hover">
-                        <tbody>
-                            <tr v-for="value in section.items" :key="value.n">
-                                <th>{{ value.n }}</th>
-                                <td>
-                                    <template v-if="value.u!='bool'">
-                                        {{ $n(value.v, 'decimal') }} {{ value.u }}
-                                    </template>
-                                    <template v-else>
-                                        <StatusBadge :status="value.v==1" true_text="gridprofile.Enabled" false_text="gridprofile.Disabled"/>
-                                    </template>
-                                </td>
-                            </tr>
-                        </tbody>
+                            <tbody>
+                                <tr v-for="value in section.items" :key="value.n">
+                                    <th>{{ value.n }}</th>
+                                    <td>
+                                        <template v-if="value.u != 'bool'">
+                                            {{ $n(value.v, 'decimal') }} {{ value.u }}
+                                        </template>
+                                        <template v-else>
+                                            <StatusBadge
+                                                :status="value.v == 1"
+                                                true_text="gridprofile.Enabled"
+                                                false_text="gridprofile.Disabled"
+                                            />
+                                        </template>
+                                    </td>
+                                </tr>
+                            </tbody>
                         </table>
                     </div>
                 </div>
@@ -53,7 +63,14 @@
         <div class="accordion" id="accordionDev">
             <div class="accordion-item">
                 <h2 class="accordion-header">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDev" aria-expanded="true" aria-controls="collapseDev">
+                    <button
+                        class="accordion-button collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseDev"
+                        aria-expanded="true"
+                        aria-controls="collapseDev"
+                    >
                         {{ $t('gridprofile.GridprofileSupport') }}
                     </button>
                 </h2>
@@ -62,7 +79,8 @@
                         <BootstrapAlert :show="true" variant="danger">
                             <h4 class="info-heading">
                                 <BIconInfoSquare class="fs-2" />&nbsp;{{ $t('gridprofile.GridprofileSupport') }}
-                            </h4><div v-html="$t('gridprofile.GridprofileSupportLong')"></div>
+                            </h4>
+                            <div v-html="$t('gridprofile.GridprofileSupportLong')"></div>
                         </BootstrapAlert>
                         <samp>
                             {{ rawContent() }}
@@ -71,15 +89,13 @@
                 </div>
             </div>
         </div>
-
     </template>
-
 </template>
 
 <script lang="ts">
 import BootstrapAlert from '@/components/BootstrapAlert.vue';
 import type { GridProfileRawdata } from '@/types/GridProfileRawdata';
-import type { GridProfileStatus } from "@/types/GridProfileStatus";
+import type { GridProfileStatus } from '@/types/GridProfileStatus';
 import { BIconInfoSquare } from 'bootstrap-icons-vue';
 import { defineComponent, type PropType } from 'vue';
 import StatusBadge from './StatusBadge.vue';
@@ -97,12 +113,14 @@ export default defineComponent({
     computed: {
         rawContent() {
             return () => {
-                return this.gridProfileRawList.raw.map(function (x) {
-                    let y = x.toString(16); // to hex
-                    y = ("00" + y).substr(-2); // zero-pad to 2-digits
-                    return y
-                }).join(' ');
-            }
+                return this.gridProfileRawList.raw
+                    .map(function (x) {
+                        let y = x.toString(16); // to hex
+                        y = ('00' + y).substr(-2); // zero-pad to 2-digits
+                        return y;
+                    })
+                    .join(' ');
+            };
         },
         hasValidData() {
             return this.gridProfileRawList.raw.reduce((sum, x) => sum + x, 0) > 0;

webapp/src/components/HardwareInfo.vue

@@ -19,7 +19,7 @@
                         <th>{{ $t('hardwareinfo.CpuFrequency') }}</th>
                         <td>{{ systemStatus.cpufreq }} {{ $t('hardwareinfo.Mhz') }}</td>
                     </tr>
-                    <tr>
+                    <tr v-if="systemStatus.cputemp">
                         <th>{{ $t('hardwareinfo.CpuTemperature') }}</th>
                         <td>{{ $n(systemStatus.cputemp, 'celsius') }}</td>
                     </tr>

webapp/src/components/HeapDetails.vue

@@ -9,7 +9,9 @@
                     </tr>
                     <tr>
                         <th>{{ $t('heapdetails.LargestFreeBlock') }}</th>
-                        <td>{{ $n(Math.round(systemStatus.heap_max_block / 1024), 'kilobyte') }}</td>
+                        <td>
+                            {{ $n(Math.round(systemStatus.heap_max_block / 1024), 'kilobyte') }}
+                        </td>
                     </tr>
                     <tr>
                         <th>{{ $t('heapdetails.Fragmentation') }}</th>
@@ -17,7 +19,11 @@
                     </tr>
                     <tr>
                         <th>{{ $t('heapdetails.MaxUsage') }}</th>
-                        <td>{{ $n(Math.round(getMaxUsageAbs() / 1024), 'kilobyte') }} ({{ $n(getMaxUsageRel(), 'percent') }})</td>
+                        <td>
+                            {{ $n(Math.round(getMaxUsageAbs() / 1024), 'kilobyte') }} ({{
+                                $n(getMaxUsageRel(), 'percent')
+                            }})
+                        </td>
                     </tr>
                 </tbody>
             </table>
@@ -48,7 +54,7 @@ export default defineComponent({
             return this.getMaxUsageAbs() / this.systemStatus.heap_total;
         },
         getFragmentation() {
-            return 1 - (this.systemStatus.heap_max_block / this.getFreeHeap());
+            return 1 - this.systemStatus.heap_max_block / this.getFreeHeap();
         },
     },
 });

webapp/src/components/HintView.vue

@@ -17,11 +17,7 @@
 <script lang="ts">
 import BootstrapAlert from '@/components/BootstrapAlert.vue';
 import type { Hints } from '@/types/LiveDataStatus';
-import {
-    BIconBroadcast,
-    BIconClock,
-    BIconExclamationCircle
-} from 'bootstrap-icons-vue';
+import { BIconBroadcast, BIconClock, BIconExclamationCircle } from 'bootstrap-icons-vue';
 import { defineComponent, type PropType } from 'vue';
 
 export default defineComponent({
@@ -36,11 +32,11 @@ export default defineComponent({
     },
     methods: {
         gotoTimeSettings() {
-            this.$router.push("/settings/ntp");
+            this.$router.push('/settings/ntp');
         },
         gotoPasswordSettings() {
-            this.$router.push("/settings/security");
-        }
-    }
+            this.$router.push('/settings/security');
+        },
+    },
 });
 </script>

webapp/src/components/InputElement.vue

@@ -2,25 +2,19 @@
     <div class="row mb-3">
         <label
             :for="inputId"
-            :class="[ wide ? 'col-sm-4' : 'col-sm-2', isCheckbox ? 'form-check-label' : 'col-form-label' ]"
+            :class="[wide ? 'col-sm-4' : 'col-sm-2', isCheckbox ? 'form-check-label' : 'col-form-label']"
         >
             {{ label }}
             <BIconInfoCircle v-if="tooltip !== undefined" v-tooltip :title="tooltip" />
         </label>
-        <div :class="[ wide ? 'col-sm-8' : 'col-sm-10' ]">
-            <div v-if="!isTextarea"
-                 :class="{'form-check form-switch': isCheckbox,
-                          'input-group': postfix || prefix }"
-            >
-                 <span v-if="prefix"
-                       class="input-group-text"
-                       :id="descriptionId"
-                 >
+        <div :class="[wide ? 'col-sm-8' : 'col-sm-10']">
+            <div v-if="!isTextarea" :class="{ 'form-check form-switch': isCheckbox, 'input-group': postfix || prefix }">
+                <span v-if="prefix" class="input-group-text" :id="descriptionId">
                     {{ prefix }}
                 </span>
                 <input
                     v-model="model"
-                    :class="[ isCheckbox ? 'form-check-input' : 'form-control' ]"
+                    :class="[isCheckbox ? 'form-check-input' : 'form-control']"
                     :id="inputId"
                     :placeholder="placeholder"
                     :type="type"
@@ -31,13 +25,10 @@
                     :disabled="disabled"
                     :aria-describedby="descriptionId"
                 />
-                <span v-if="postfix"
-                      class="input-group-text"
-                      :id="descriptionId"
-                >
+                <span v-if="postfix" class="input-group-text" :id="descriptionId">
                     {{ postfix }}
                 </span>
-                <slot/>
+                <slot />
             </div>
             <div v-else>
                 <textarea
@@ -63,20 +54,20 @@ export default defineComponent({
         BIconInfoCircle,
     },
     props: {
-        'modelValue': [String, Number, Boolean, Date],
-        'label': String,
-        'placeholder': String,
-        'type': String,
-        'maxlength': String,
-        'min': String,
-        'max': String,
-        'step': String,
-        'rows': String,
-        'disabled': Boolean,
-        'postfix': String,
-        'prefix': String,
-        'wide': Boolean,
-        'tooltip': String,
+        modelValue: [String, Number, Boolean, Date],
+        label: String,
+        placeholder: String,
+        type: String,
+        maxlength: String,
+        min: String,
+        max: String,
+        step: String,
+        rows: String,
+        disabled: Boolean,
+        postfix: String,
+        prefix: String,
+        wide: Boolean,
+        tooltip: String,
     },
     data() {
         return {};
@@ -97,11 +88,13 @@ export default defineComponent({
             // normally, the label is sufficient to build a unique id
             // if two inputs with the same label text on one page is required,
             // use a unique placeholder even if it is a checkbox
-            return this.label?.replace(/[^A-Za-z0-9]/g, '') +
-                (this.placeholder ? this.placeholder.replace(/[^A-Za-z0-9]/g, '') : '');
+            return (
+                this.label?.replace(/[^A-Za-z0-9]/g, '') +
+                (this.placeholder ? this.placeholder.replace(/[^A-Za-z0-9]/g, '') : '')
+            );
         },
         inputId() {
-            return 'input' + this.uniqueLabel
+            return 'input' + this.uniqueLabel;
         },
         descriptionId() {
             return 'desc' + this.uniqueLabel;
@@ -111,7 +104,7 @@ export default defineComponent({
         },
         isCheckbox() {
             return this.type === 'checkbox';
-        }
+        },
     },
 });
 </script>

webapp/src/components/InputSerial.vue

@@ -14,16 +14,16 @@ export default defineComponent({
         BootstrapAlert,
     },
     props: {
-        'modelValue': { type: [String, Number], required: true },
-        'id': String,
-        'inputClass': String,
-        'required': Boolean,
+        modelValue: { type: [String, Number], required: true },
+        id: String,
+        inputClass: String,
+        required: Boolean,
     },
     data() {
         return {
-            inputSerial: "",
-            formatHint: "",
-            formatShow: "info",
+            inputSerial: '',
+            formatHint: '',
+            formatShow: 'info',
         };
     },
     computed: {
@@ -45,13 +45,13 @@ export default defineComponent({
         inputSerial: function (val) {
             const serial = val.toString().toUpperCase(); // Convert to lowercase for case-insensitivity
 
-            if (serial == "") {
-                this.formatHint = "";
-                this.model = "";
+            if (serial == '') {
+                this.formatHint = '';
+                this.model = '';
                 return;
             }
 
-            this.formatShow = "info";
+            this.formatShow = 'info';
 
             // Contains only numbers
             if (/^1{1}[\dA-F]{11}$/.test(serial)) {
@@ -70,30 +70,31 @@ export default defineComponent({
                 if (this.checkHerfChecksum(serial)) {
                     this.model = this.convertHerfToHoy(serial);
                     this.$nextTick(() => {
-                        this.formatHint = this.$t('inputserial.format_herf_valid', { serial: this.model });
+                        this.formatHint = this.$t('inputserial.format_herf_valid', {
+                            serial: this.model,
+                        });
                     });
-
                 } else {
                     this.formatHint = this.$t('inputserial.format_herf_invalid');
-                    this.formatShow = "danger";
+                    this.formatShow = 'danger';
                 }
 
-            // Any other format
+                // Any other format
             } else {
                 this.formatHint = this.$t('inputserial.format_unknown');
-                this.formatShow = "danger";
+                this.formatShow = 'danger';
             }
-        }
+        },
     },
     methods: {
         checkHerfChecksum(sn: string) {
             const chars64 = 'HMFLGW5XC301234567899Z67YRT2S8ABCDEFGHJKDVEJ4KQPUALMNPRSTUVWXYNB';
 
-            const checksum = sn.substring(sn.indexOf("-") + 1);
-            const serial = sn.substring(0, sn.indexOf("-"));
+            const checksum = sn.substring(sn.indexOf('-') + 1);
+            const serial = sn.substring(0, sn.indexOf('-'));
 
             const first_char = '1';
-            const i = chars32.indexOf(first_char)
+            const i = chars32.indexOf(first_char);
             const sum1: number = Array.from(serial).reduce((sum, c) => sum + c.charCodeAt(0), 0) & 31;
             const sum2: number = Array.from(serial).reduce((sum, c) => sum + chars32.indexOf(c), 0) & 31;
             const ext = first_char + chars64[sum1 + i] + chars64[sum2 + i];
@@ -106,11 +107,11 @@ export default defineComponent({
             for (let i = 0; i < 9; i++) {
                 const pos: bigint = BigInt(chars32.indexOf(sn[i].toUpperCase()));
                 const shift: bigint = BigInt(42 - 5 * i - (i <= 2 ? 0 : 2));
-                sn_int |= (pos << shift);
+                sn_int |= pos << shift;
             }
 
             return sn_int.toString(16);
-        }
+        },
     },
 });
 </script>

webapp/src/components/InterfaceNetworkInfo.vue

@@ -1,5 +1,6 @@
 <template>
-    <CardElement :text="$t('interfacenetworkinfo.NetworkInterface', { iface: networkStatus.network_mode })"
+    <CardElement
+        :text="$t('interfacenetworkinfo.NetworkInterface', { iface: networkStatus.network_mode })"
         textVariant="text-bg-primary"
     >
         <div class="table-responsive">

webapp/src/components/InverterChannelInfo.vue

@@ -1,8 +1,12 @@
 <template>
-    <div class="card" :class="{
-        'border-info': channelType == 'AC',
-        'border-secondary': channelType == 'INV'
-    }" style="overflow: hidden">
+    <div
+        class="card"
+        :class="{
+            'border-info': channelType == 'AC',
+            'border-secondary': channelType == 'INV',
+        }"
+        style="overflow: hidden"
+    >
         <div v-if="channelType == 'INV'" class="card-header text-bg-secondary">
             {{ $t('inverterchannelinfo.General') }}
         </div>
@@ -22,11 +26,12 @@
                     <tr v-for="(property, key) in channelData" :key="`prop-${key}`">
                         <template v-if="key != 'name' && property">
                             <th scope="row">{{ $t('inverterchannelproperty.' + key) }}</th>
-                            <td style="text-align: right; padding-right: 0;">
-                                {{ $n(property.v, 'decimal', {
-                                    minimumFractionDigits: property.d,
-                                    maximumFractionDigits: property.d
-                                })
+                            <td style="text-align: right; padding-right: 0">
+                                {{
+                                    $n(property.v, 'decimal', {
+                                        minimumFractionDigits: property.d,
+                                        maximumFractionDigits: property.d,
+                                    })
                                 }}
                             </td>
                             <td>{{ property.u }}</td>

webapp/src/components/InverterTotalInfo.vue

@@ -3,10 +3,12 @@
         <div class="col">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.TotalYieldTotal')">
                 <h2>
-                    {{ $n(totalData.YieldTotal.v, 'decimal', {
-                        minimumFractionDigits: totalData.YieldTotal.d,
-                        maximumFractionDigits: totalData.YieldTotal.d
-                    }) }}
+                    {{
+                        $n(totalData.YieldTotal.v, 'decimal', {
+                            minimumFractionDigits: totalData.YieldTotal.d,
+                            maximumFractionDigits: totalData.YieldTotal.d,
+                        })
+                    }}
                     <small class="text-muted">{{ totalData.YieldTotal.u }}</small>
                 </h2>
             </CardElement>
@@ -14,10 +16,12 @@
         <div class="col">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.TotalYieldDay')">
                 <h2>
-                    {{ $n(totalData.YieldDay.v, 'decimal', {
-                        minimumFractionDigits: totalData.YieldDay.d,
-                        maximumFractionDigits: totalData.YieldDay.d
-                    }) }}
+                    {{
+                        $n(totalData.YieldDay.v, 'decimal', {
+                            minimumFractionDigits: totalData.YieldDay.d,
+                            maximumFractionDigits: totalData.YieldDay.d,
+                        })
+                    }}
                     <small class="text-muted">{{ totalData.YieldDay.u }}</small>
                 </h2>
             </CardElement>
@@ -25,10 +29,12 @@
         <div class="col">
             <CardElement centerContent textVariant="text-bg-success" :text="$t('invertertotalinfo.TotalPower')">
                 <h2>
-                    {{ $n(totalData.Power.v, 'decimal', {
-                        minimumFractionDigits: totalData.Power.d,
-                        maximumFractionDigits: totalData.Power.d
-                    }) }}
+                    {{
+                        $n(totalData.Power.v, 'decimal', {
+                            minimumFractionDigits: totalData.Power.d,
+                            maximumFractionDigits: totalData.Power.d,
+                        })
+                    }}
                     <small class="text-muted">{{ totalData.Power.u }}</small>
                 </h2>
             </CardElement>

webapp/src/components/LocaleSwitcher.vue

@@ -11,20 +11,20 @@ import { defineComponent } from 'vue';
 import { LOCALES } from '@/locales';
 
 export default defineComponent({
-    name: "LocaleSwitcher",
+    name: 'LocaleSwitcher',
     methods: {
         updateLanguage() {
-            localStorage.setItem("locale", this.$i18n.locale);
+            localStorage.setItem('locale', this.$i18n.locale);
         },
         getLocaleName(locale: string): string {
-            return LOCALES.find(i => i.value === locale)?.caption || "";
-        }
+            return LOCALES.find((i) => i.value === locale)?.caption || '';
+        },
     },
     mounted() {
-        if (localStorage.getItem("locale")) {
-            this.$i18n.locale = localStorage.getItem("locale") || "en";
+        if (localStorage.getItem('locale')) {
+            this.$i18n.locale = localStorage.getItem('locale') || 'en';
         } else {
-            localStorage.setItem("locale", this.$i18n.locale);
+            localStorage.setItem('locale', this.$i18n.locale);
         }
     },
 });

webapp/src/components/MemoryInfo.vue

@@ -12,15 +12,27 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <FsInfo :name="$t('memoryinfo.Heap')" :total="systemStatus.heap_total"
-                        :used="systemStatus.heap_used" />
-                    <FsInfo :name="$t('memoryinfo.PsRam')" :total="systemStatus.psram_total"
-                        :used="systemStatus.psram_used" />
+                    <FsInfo
+                        :name="$t('memoryinfo.Heap')"
+                        :total="systemStatus.heap_total"
+                        :used="systemStatus.heap_used"
+                    />
+                    <FsInfo
+                        :name="$t('memoryinfo.PsRam')"
+                        :total="systemStatus.psram_total"
+                        :used="systemStatus.psram_used"
+                    />
                     <a href='/api/database'>Read Database</a>
-                    <FsInfo :name="$t('memoryinfo.LittleFs')" :total="systemStatus.littlefs_total"
-                        :used="systemStatus.littlefs_used" />
-                    <FsInfo :name="$t('memoryinfo.Sketch')" :total="systemStatus.sketch_total"
-                        :used="systemStatus.sketch_used" />
+                    <FsInfo
+                        :name="$t('memoryinfo.LittleFs')"
+                        :total="systemStatus.littlefs_total"
+                        :used="systemStatus.littlefs_used"
+                    />
+                    <FsInfo
+                        :name="$t('memoryinfo.Sketch')"
+                        :total="systemStatus.sketch_total"
+                        :used="systemStatus.sketch_used"
+                    />
                 </tbody>
             </table>
         </div>
@@ -29,7 +41,7 @@
 
 <script lang="ts">
 import CardElement from '@/components/CardElement.vue';
-import FsInfo from "@/components/FsInfo.vue";
+import FsInfo from '@/components/FsInfo.vue';
 import type { SystemStatus } from '@/types/SystemStatus';
 import { defineComponent, type PropType } from 'vue';
 

webapp/src/components/ModalDialog.vue

@@ -4,8 +4,13 @@
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title">{{ title }}</h5>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" :aria-label="getCloseText"
-                        @click="close"></button>
+                    <button
+                        type="button"
+                        class="btn-close"
+                        data-bs-dismiss="modal"
+                        :aria-label="getCloseText"
+                        @click="close"
+                    ></button>
                 </div>
                 <div class="modal-body">
                     <div class="text-center" v-if="loading">
@@ -13,14 +18,13 @@
                             <span class="visually-hidden">{{ $t('home.Loading') }}</span>
                         </div>
                     </div>
-                    <slot v-else>
-                    </slot>
+                    <slot v-else> </slot>
                 </div>
                 <div class="modal-footer">
-                    <slot name="footer">
-                    </slot>
-                    <button type="button" class="btn btn-secondary" @click="close" data-bs-dismiss="modal">{{
-                        getCloseText }}</button>
+                    <slot name="footer"> </slot>
+                    <button type="button" class="btn btn-secondary" @click="close" data-bs-dismiss="modal">
+                        {{ getCloseText }}
+                    </button>
                 </div>
             </div>
         </div>
@@ -32,16 +36,16 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
     props: {
-        'modalId': { type: String, required: true },
-        'title': { type: String, required: true },
-        'closeText': { type: String, required: false, default: '' },
-        'small': Boolean,
-        'loading': Boolean,
+        modalId: { type: String, required: true },
+        title: { type: String, required: true },
+        closeText: { type: String, required: false, default: '' },
+        small: Boolean,
+        loading: Boolean,
     },
     computed: {
         getCloseText() {
             return this.closeText == '' ? this.$t('base.Close') : this.closeText;
-        }
+        },
     },
     methods: {
         close() {

webapp/src/components/NavBar.vue

@@ -1,19 +1,24 @@
 <template>
     <nav class="navbar navbar-expand-md fixed-top bg-body-tertiary" data-bs-theme="dark">
         <div class="container-fluid">
-            <router-link @click="onClick" class="navbar-brand" to="/" style="display: flex; height: 30px; padding: 0;">
+            <router-link @click="onClick" class="navbar-brand" to="/" style="display: flex; height: 30px; padding: 0">
                 <BIconTree v-if="isXmas" width="30" height="30" class="d-inline-block align-text-top text-success" />
 
                 <BIconEgg v-else-if="isEaster" width="30" height="30" class="d-inline-block align-text-top text-info" />
 
                 <BIconSun v-else width="30" height="30" class="d-inline-block align-text-top text-warning" />
 
-                <span style="margin-left: .5rem">
-                    OpenDTU
-                </span>
+                <span style="margin-left: 0.5rem"> OpenDTU </span>
             </router-link>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
-                aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
+            <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" ref="navbarCollapse" id="navbarNavAltMarkup">
@@ -22,71 +27,111 @@
                         <router-link @click="onClick" class="nav-link" to="/">{{ $t('menu.LiveView') }}</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">
+                        <a
+                            class="nav-link dropdown-toggle"
+                            href="#"
+                            id="navbarScrollingDropdown"
+                            role="button"
+                            data-bs-toggle="dropdown"
+                            aria-expanded="false"
+                        >
                             {{ $t('menu.Settings') }}
                         </a>
                         <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/network">{{ $t('menu.NetworkSettings') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/network">{{
+                                    $t('menu.NetworkSettings')
+                                }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/ntp">{{ $t('menu.NTPSettings') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/ntp">{{
+                                    $t('menu.NTPSettings')
+                                }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/mqtt">{{ $t('menu.MQTTSettings') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/mqtt">{{
+                                    $t('menu.MQTTSettings')
+                                }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/inverter">{{ $t('menu.InverterSettings') }}
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/inverter"
+                                    >{{ $t('menu.InverterSettings') }}
                                 </router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/security">{{ $t('menu.SecuritySettings') }}
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/security"
+                                    >{{ $t('menu.SecuritySettings') }}
                                 </router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/dtu">{{ $t('menu.DTUSettings') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/dtu">{{
+                                    $t('menu.DTUSettings')
+                                }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/device">{{ $t('menu.DeviceManager') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/device">{{
+                                    $t('menu.DeviceManager')
+                                }}</router-link>
                             </li>
                             <li>
                                 <hr class="dropdown-divider" />
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/settings/config">{{ $t('menu.ConfigManagement') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/settings/config">{{
+                                    $t('menu.ConfigManagement')
+                                }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/firmware/upgrade">{{ $t('menu.FirmwareUpgrade') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/firmware/upgrade">{{
+                                    $t('menu.FirmwareUpgrade')
+                                }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/maintenance/reboot">{{ $t('menu.DeviceReboot') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/maintenance/reboot">{{
+                                    $t('menu.DeviceReboot')
+                                }}</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">
+                        <a
+                            class="nav-link dropdown-toggle"
+                            href="#"
+                            id="navbarScrollingDropdown"
+                            role="button"
+                            data-bs-toggle="dropdown"
+                            aria-expanded="false"
+                        >
                             {{ $t('menu.Info') }}
                         </a>
                         <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/info/system">{{ $t('menu.System') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/info/system">{{
+                                    $t('menu.System')
+                                }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/info/network">{{ $t('menu.Network') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/info/network">{{
+                                    $t('menu.Network')
+                                }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/info/ntp">{{ $t('menu.NTP') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/info/ntp">{{
+                                    $t('menu.NTP')
+                                }}</router-link>
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/info/mqtt">{{ $t('menu.MQTT') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/info/mqtt">{{
+                                    $t('menu.MQTT')
+                                }}</router-link>
                             </li>
                             <li>
                                 <hr class="dropdown-divider" />
                             </li>
                             <li>
-                                <router-link @click="onClick" class="dropdown-item" to="/info/console">{{ $t('menu.Console') }}</router-link>
+                                <router-link @click="onClick" class="dropdown-item" to="/info/console">{{
+                                    $t('menu.Console')
+                                }}</router-link>
                             </li>
                         </ul>
                     </li>
@@ -97,8 +142,12 @@
                     <ThemeSwitcher class="me-2" />
                     <form class="d-flex" role="search">
                         <LocaleSwitcher class="me-2" />
-                        <button v-if="isLogged" class="btn btn-outline-danger" @click="signout">{{ $t('menu.Logout') }}</button>
-                        <button v-if="!isLogged" class="btn btn-outline-success" @click="signin">{{ $t('menu.Login') }}</button>
+                        <button v-if="isLogged" class="btn btn-outline-danger" @click="signout">
+                            {{ $t('menu.Logout') }}
+                        </button>
+                        <button v-if="!isLogged" class="btn btn-outline-success" @click="signin">
+                            {{ $t('menu.Login') }}
+                        </button>
                     </form>
                 </ul>
             </div>
@@ -125,24 +174,24 @@ export default defineComponent({
         return {
             isLogged: this.isLoggedIn(),
             now: {} as Date,
-        }
+        };
     },
     created() {
-        this.$emitter.on("logged-in", () => {
+        this.$emitter.on('logged-in', () => {
             this.isLogged = this.isLoggedIn();
         });
-        this.$emitter.on("logged-out", () => {
+        this.$emitter.on('logged-out', () => {
             this.isLogged = this.isLoggedIn();
         });
 
         this.now = new Date();
         setInterval(() => {
             this.now = new Date();
-        }, 10000)
+        }, 10000);
     },
     computed: {
         isXmas() {
-            return (this.now.getMonth() + 1 == 12 && (this.now.getDate() >= 24 && this.now.getDate() <= 26));
+            return this.now.getMonth() + 1 == 12 && this.now.getDate() >= 24 && this.now.getDate() <= 26;
         },
         isEaster() {
             const easter = this.getEasterSunday(this.now.getFullYear());
@@ -163,11 +212,11 @@ export default defineComponent({
         signout(e: Event) {
             e.preventDefault();
             this.logout();
-            this.$emitter.emit("logged-out");
+            this.$emitter.emit('logged-out');
             this.$router.push('/');
         },
         onClick() {
-            this.$refs.navbarCollapse && (this.$refs.navbarCollapse as HTMLElement).classList.remove("show");
+            this.$refs.navbarCollapse && (this.$refs.navbarCollapse as HTMLElement).classList.remove('show');
         },
         getEasterSunday(year: number): Date {
             const f = Math.floor;
@@ -181,7 +230,7 @@ export default defineComponent({
             const day = L + 28 - 31 * f(month / 4);
 
             return new Date(year, month - 1, day);
-        }
+        },
     },
 });
 </script>

webapp/src/components/PinInfo.vue

@@ -11,18 +11,23 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <template v-for="(category) in categories" :key="category">
+                    <template v-for="category in categories" :key="category">
                         <tr v-for="(prop, prop_idx) in properties(category)" :key="prop">
                             <td v-if="prop_idx == 0" :rowspan="properties(category).length">
-                                {{ capitalizeFirstLetter(category) }}</td>
-                            <td :class="{ 'table-danger': !isEqual(category, prop) }">{{ prop }}</td>
+                                {{ capitalizeFirstLetter(category) }}
+                            </td>
+                            <td :class="{ 'table-danger': !isEqual(category, prop) }">
+                                {{ prop }}
+                            </td>
                             <td>
                                 <template v-if="selectedPinAssignment && category in selectedPinAssignment">
-                                    {{ (selectedPinAssignment as any)[category][prop] }}</template>
+                                    {{ (selectedPinAssignment as any)[category][prop] }}</template
+                                >
                             </td>
                             <td>
                                 <template v-if="currentPinAssignment && category in currentPinAssignment">
-                                    {{ (currentPinAssignment as any)[category][prop] }}</template>
+                                    {{ (currentPinAssignment as any)[category][prop] }}</template
+                                >
                             </td>
                         </tr>
                     </template>
@@ -59,7 +64,9 @@ export default defineComponent({
 
             let total: Array<string> = [];
             total = total.concat(curArray, selArray);
-            return Array.from(new Set(total)).filter(cat => cat !=  'name' && cat != 'links').sort();
+            return Array.from(new Set(total))
+                .filter((cat) => cat != 'name' && cat != 'links')
+                .sort();
         },
     },
     methods: {
@@ -105,6 +112,6 @@ export default defineComponent({
         capitalizeFirstLetter(value: string): string {
             return value.charAt(0).toUpperCase() + value.slice(1);
         },
-    }
+    },
 });
 </script>

webapp/src/components/RadioInfo.vue

@@ -4,58 +4,83 @@
             <table class="table table-hover table-condensed">
                 <tbody>
                     <tr>
-                        <th>{{ $t('radioinfo.Status', { module: "nRF24" }) }}</th>
+                        <th>{{ $t('radioinfo.Status', { module: 'nRF24' }) }}</th>
                         <td>
-                            <StatusBadge :status="systemStatus.nrf_configured" true_text="radioinfo.Configured" false_text="radioinfo.NotConfigured" false_class="text-bg-secondary" />
+                            <StatusBadge
+                                :status="systemStatus.nrf_configured"
+                                true_text="radioinfo.Configured"
+                                false_text="radioinfo.NotConfigured"
+                                false_class="text-bg-secondary"
+                            />
                         </td>
                     </tr>
                     <tr>
-                        <th>{{ $t('radioinfo.ChipStatus', { module: "nRF24" }) }}</th>
+                        <th>{{ $t('radioinfo.ChipStatus', { module: 'nRF24' }) }}</th>
                         <td>
-                            <span class="badge" :class="{
-                                'text-bg-danger': systemStatus.nrf_configured && !systemStatus.nrf_connected,
-                                'text-bg-success': systemStatus.nrf_configured && systemStatus.nrf_connected,
-                            }">
-                                <template
-                                    v-if="systemStatus.nrf_configured && systemStatus.nrf_connected">{{ $t('radioinfo.Connected') }}</template>
-                                <template
-                                    v-else-if="systemStatus.nrf_configured && !systemStatus.nrf_connected">{{ $t('radioinfo.NotConnected') }}</template>
+                            <span
+                                class="badge"
+                                :class="{
+                                    'text-bg-danger': systemStatus.nrf_configured && !systemStatus.nrf_connected,
+                                    'text-bg-success': systemStatus.nrf_configured && systemStatus.nrf_connected,
+                                }"
+                            >
+                                <template v-if="systemStatus.nrf_configured && systemStatus.nrf_connected">{{
+                                    $t('radioinfo.Connected')
+                                }}</template>
+                                <template v-else-if="systemStatus.nrf_configured && !systemStatus.nrf_connected">{{
+                                    $t('radioinfo.NotConnected')
+                                }}</template>
                             </span>
                         </td>
                     </tr>
                     <tr>
-                        <th>{{ $t('radioinfo.ChipType', { module: "nRF24" }) }}</th>
+                        <th>{{ $t('radioinfo.ChipType', { module: 'nRF24' }) }}</th>
                         <td>
-                            <span class="badge" :class="{
-                                'text-bg-danger': systemStatus.nrf_connected && !systemStatus.nrf_pvariant,
-                                'text-bg-success': systemStatus.nrf_connected && systemStatus.nrf_pvariant,
-                                'text-bg-secondary': !systemStatus.nrf_connected,
-                            }">
-                                <template
-                                    v-if="systemStatus.nrf_connected && systemStatus.nrf_pvariant">nRF24L01+</template>
-                                <template
-                                    v-else-if="systemStatus.nrf_connected && !systemStatus.nrf_pvariant">nRF24L01</template>
+                            <span
+                                class="badge"
+                                :class="{
+                                    'text-bg-danger': systemStatus.nrf_connected && !systemStatus.nrf_pvariant,
+                                    'text-bg-success': systemStatus.nrf_connected && systemStatus.nrf_pvariant,
+                                    'text-bg-secondary': !systemStatus.nrf_connected,
+                                }"
+                            >
+                                <template v-if="systemStatus.nrf_connected && systemStatus.nrf_pvariant"
+                                    >nRF24L01+</template
+                                >
+                                <template v-else-if="systemStatus.nrf_connected && !systemStatus.nrf_pvariant"
+                                    >nRF24L01</template
+                                >
                                 <template v-else>{{ $t('radioinfo.Unknown') }}</template>
                             </span>
                         </td>
                     </tr>
                     <tr>
-                        <th>{{ $t('radioinfo.Status', { module: "CMT2300A" }) }}</th>
+                        <th>{{ $t('radioinfo.Status', { module: 'CMT2300A' }) }}</th>
                         <td>
-                            <StatusBadge :status="systemStatus.cmt_configured" true_text="radioinfo.Configured" false_text="radioinfo.NotConfigured" false_class="text-bg-secondary" />
+                            <StatusBadge
+                                :status="systemStatus.cmt_configured"
+                                true_text="radioinfo.Configured"
+                                false_text="radioinfo.NotConfigured"
+                                false_class="text-bg-secondary"
+                            />
                         </td>
                     </tr>
                     <tr>
-                        <th>{{ $t('radioinfo.ChipStatus', { module: "CMT2300A" }) }}</th>
+                        <th>{{ $t('radioinfo.ChipStatus', { module: 'CMT2300A' }) }}</th>
                         <td>
-                            <span class="badge" :class="{
-                                'text-bg-danger': systemStatus.cmt_configured && !systemStatus.cmt_connected,
-                                'text-bg-success': systemStatus.cmt_configured && systemStatus.cmt_connected,
-                            }">
-                                <template
-                                    v-if="systemStatus.cmt_configured && systemStatus.cmt_connected">{{ $t('radioinfo.Connected') }}</template>
-                                <template
-                                    v-else-if="systemStatus.cmt_configured && !systemStatus.cmt_connected">{{ $t('radioinfo.NotConnected') }}</template>
+                            <span
+                                class="badge"
+                                :class="{
+                                    'text-bg-danger': systemStatus.cmt_configured && !systemStatus.cmt_connected,
+                                    'text-bg-success': systemStatus.cmt_configured && systemStatus.cmt_connected,
+                                }"
+                            >
+                                <template v-if="systemStatus.cmt_configured && systemStatus.cmt_connected">{{
+                                    $t('radioinfo.Connected')
+                                }}</template>
+                                <template v-else-if="systemStatus.cmt_configured && !systemStatus.cmt_connected">{{
+                                    $t('radioinfo.NotConnected')
+                                }}</template>
                             </span>
                         </td>
                     </tr>

webapp/src/components/StatusBadge.vue

@@ -10,23 +10,23 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
     props: {
-        'status': Boolean,
-        'true_text': {
+        status: Boolean,
+        true_text: {
             type: String,
-            required: true
+            required: true,
         },
-        'false_text': {
+        false_text: {
             type: String,
-            required: true
+            required: true,
         },
-        'true_class': {
+        true_class: {
             type: String,
-            default: 'text-bg-success'
+            default: 'text-bg-success',
         },
-        'false_class': {
+        false_class: {
             type: String,
-            default: 'text-bg-danger'
-        }
+            default: 'text-bg-danger',
+        },
     },
 });
 </script>

webapp/src/components/ThemeSwitcher.vue

@@ -1,28 +1,46 @@
 <template>
     <li class="nav-item dropdown">
-        <button class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center" id="bd-theme"
-            type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static"
-            aria-label="Toggle theme (auto)">
+        <button
+            class="btn btn-link nav-link py-2 px-0 px-lg-2 dropdown-toggle d-flex align-items-center"
+            id="bd-theme"
+            type="button"
+            aria-expanded="false"
+            data-bs-toggle="dropdown"
+            data-bs-display="static"
+            aria-label="Toggle theme (auto)"
+        >
             <BIconCircleHalf class="bi my-1 theme-icon-active" />
         </button>
         <ul class="dropdown-menu dropdown-menu-end">
             <li>
-                <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light"
-                    aria-pressed="false">
+                <button
+                    type="button"
+                    class="dropdown-item d-flex align-items-center"
+                    data-bs-theme-value="light"
+                    aria-pressed="false"
+                >
                     <BIconSunFill class="bi me-2 opacity-50 theme-icon" />
                     {{ $t('localeswitcher.Light') }}
                 </button>
             </li>
             <li>
-                <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark"
-                    aria-pressed="false">
+                <button
+                    type="button"
+                    class="dropdown-item d-flex align-items-center"
+                    data-bs-theme-value="dark"
+                    aria-pressed="false"
+                >
                     <BIconMoonStarsFill class="bi me-2 opacity-50 theme-icon" />
                     {{ $t('localeswitcher.Dark') }}
                 </button>
             </li>
             <li>
-                <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto"
-                    aria-pressed="true">
+                <button
+                    type="button"
+                    class="dropdown-item d-flex align-items-center active"
+                    data-bs-theme-value="auto"
+                    aria-pressed="true"
+                >
                     <BIconCircleHalf class="bi me-2 opacity-50 theme-icon" />
                     {{ $t('localeswitcher.Auto') }}
                 </button>
@@ -33,14 +51,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import {
-    BIconCircleHalf,
-    BIconSunFill,
-    BIconMoonStarsFill,
-} from 'bootstrap-icons-vue';
+import { BIconCircleHalf, BIconSunFill, BIconMoonStarsFill } from 'bootstrap-icons-vue';
 
 export default defineComponent({
-    name: "ThemeSwitcher",
+    name: 'ThemeSwitcher',
     components: {
         BIconCircleHalf,
         BIconSunFill,
@@ -70,9 +84,9 @@ export default defineComponent({
             const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
             const svgOfActiveBtn = btnToActive?.querySelector('.theme-icon');
 
-            document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+            document.querySelectorAll('[data-bs-theme-value]').forEach((element) => {
                 element.classList.remove('active');
-            })
+            });
 
             btnToActive?.classList.add('active');
 
@@ -92,15 +106,14 @@ export default defineComponent({
             }
         });
 
-        document.querySelectorAll('[data-bs-theme-value]')
-            .forEach(toggle => {
-                toggle.addEventListener('click', () => {
-                    const theme = toggle.getAttribute('data-bs-theme-value') || 'auto';
-                    localStorage.setItem('theme', theme);
-                    this.setTheme(theme);
-                    this.showActiveTheme(theme);
-                })
+        document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
+            toggle.addEventListener('click', () => {
+                const theme = toggle.getAttribute('data-bs-theme-value') || 'auto';
+                localStorage.setItem('theme', theme);
+                this.setTheme(theme);
+                this.showActiveTheme(theme);
             });
+        });
     },
 });
 </script>

webapp/src/components/WifiApInfo.vue

@@ -6,7 +6,11 @@
                     <tr>
                         <th>{{ $t('wifiapinfo.Status') }}</th>
                         <td>
-                            <StatusBadge :status="networkStatus.ap_status" true_text="wifiapinfo.Enabled" false_text="wifiapinfo.Disabled" />
+                            <StatusBadge
+                                :status="networkStatus.ap_status"
+                                true_text="wifiapinfo.Enabled"
+                                false_text="wifiapinfo.Disabled"
+                            />
                         </td>
                     </tr>
                     <tr>

webapp/src/components/WifiStationInfo.vue

@@ -6,7 +6,11 @@
                     <tr>
                         <th>{{ $t('wifistationinfo.Status') }}</th>
                         <td>
-                            <StatusBadge :status="networkStatus.sta_status" true_text="wifistationinfo.Enabled" false_text="wifistationinfo.Disabled" />
+                            <StatusBadge
+                                :status="networkStatus.sta_status"
+                                true_text="wifistationinfo.Enabled"
+                                false_text="wifistationinfo.Disabled"
+                            />
                         </td>
                     </tr>
                     <tr>
@@ -40,7 +44,7 @@ import { defineComponent, type PropType } from 'vue';
 export default defineComponent({
     components: {
         CardElement,
-        StatusBadge
+        StatusBadge,
     },
     props: {
         networkStatus: { type: Object as PropType<NetworkStatus>, required: true },

webapp/src/emitter.d.ts

@@ -4,4 +4,4 @@ declare module '@vue/runtime-core' {
     }
 }
 
-export { }  // Important! See note.
+export {}; // Important! See note.

webapp/src/locales/de.json

@@ -85,6 +85,7 @@
         "7014": "Hass-Topic darf nicht länger als {max} Zeichen sein!",
         "7015": "Hass-Topic darf keine Leerzeichen enthalten!",
         "7016": "LWT QOS darf icht größer als {max} sein!",
+        "7017": "Client ID darf nicht länger als {max} Zeichen sein!",
         "8001": "IP-Adresse ist ungültig!",
         "8002": "Netzmaske ist ungültig!",
         "8003": "Standardgateway ist ungültig!",
@@ -297,6 +298,7 @@
         "Disabled": "nicht aktiv",
         "Server": "@:ntpinfo.Server",
         "Port": "Port",
+        "ClientId": "Client ID",
         "Username": "Benutzername",
         "BaseTopic": "Basis-Topic",
         "PublishInterval": "Veröffentlichungsintervall",
@@ -441,6 +443,7 @@
         "Hostname": "Hostname:",
         "HostnameHint": "Hostname oder IP-Adresse",
         "Port": "Port:",
+        "ClientId": "Client ID:",
         "Username": "Benutzername:",
         "UsernameHint": "Benutzername, leer lassen für anonyme Verbindung",
         "Password": "Passwort:",

webapp/src/locales/en.json

@@ -85,6 +85,7 @@
         "7014": "Hass topic must not longer then {max} characters!",
         "7015": "Hass topic must not contain space characters!",
         "7016": "LWT QOS must not greater then {max}!",
+        "7017": "Client ID must not longer then {max} characters!",
         "8001": "IP address is invalid!",
         "8002": "Netmask is invalid!",
         "8003": "Gateway is invalid!",
@@ -297,6 +298,7 @@
         "Disabled": "Disabled",
         "Server": "@:ntpinfo.Server",
         "Port": "Port",
+        "ClientId": "Client ID",
         "Username": "Username",
         "BaseTopic": "Base Topic",
         "PublishInterval": "Publish Interval",
@@ -441,6 +443,7 @@
         "Hostname": "Hostname:",
         "HostnameHint": "Hostname or IP address",
         "Port": "Port:",
+        "ClientId": "Client ID:",
         "Username": "Username:",
         "UsernameHint": "Username, leave empty for anonymous connection",
         "Password": "Password:",

webapp/src/locales/fr.json

@@ -85,6 +85,7 @@
         "7014": "Le sujet Hass ne doit pas dépasser {max} caractères !",
         "7015": "Le sujet Hass ne doit pas contenir d'espace !",
         "7016": "LWT QOS ne doit pas être supérieur à {max}!",
+        "7017": "Client ID must not longer then {max} characters!",
         "8001": "L'adresse IP n'est pas valide !",
         "8002": "Le masque de réseau n'est pas valide !",
         "8003": "La passerelle n'est pas valide !",
@@ -297,6 +298,7 @@
         "Disabled": "Désactivé",
         "Server": "@:ntpinfo.Server",
         "Port": "Port",
+        "ClientId": "Client ID",
         "Username": "Nom d'utilisateur",
         "BaseTopic": "Sujet de base",
         "PublishInterval": "Intervalle de publication",
@@ -441,6 +443,7 @@
         "Hostname": "Nom d'hôte",
         "HostnameHint": "Nom d'hôte ou adresse IP",
         "Port": "Port",
+        "ClientId": "Client ID:",
         "Username": "Nom d'utilisateur",
         "UsernameHint": "Nom d'utilisateur, laisser vide pour une connexion anonyme",
         "Password": "Mot de passe:",

webapp/src/locales/index.ts

@@ -1,4 +1,4 @@
-import type { I18nOptions } from "vue-i18n";
+import type { I18nOptions } from 'vue-i18n';
 
 export enum Locales {
     EN = 'en',
@@ -10,22 +10,22 @@ export const LOCALES = [
     { value: Locales.EN, caption: 'English' },
     { value: Locales.DE, caption: 'Deutsch' },
     { value: Locales.FR, caption: 'Français' },
-]
+];
 
-export const dateTimeFormats: I18nOptions["datetimeFormats"] = {};
-export const numberFormats: I18nOptions["numberFormats"] = {};
+export const dateTimeFormats: I18nOptions['datetimeFormats'] = {};
+export const numberFormats: I18nOptions['numberFormats'] = {};
 
 LOCALES.forEach((locale) => {
     dateTimeFormats[locale.value] = {
-        'datetime': {
+        datetime: {
             hour: 'numeric',
             minute: 'numeric',
             second: 'numeric',
             year: 'numeric',
             month: 'numeric',
             day: 'numeric',
-            hour12: false
-        }
+            hour12: false,
+        },
     };
 
     numberFormats[locale.value] = {
@@ -33,25 +33,44 @@ LOCALES.forEach((locale) => {
             style: 'decimal',
         },
         decimalNoDigits: {
-            style: 'decimal', minimumFractionDigits: 0, maximumFractionDigits: 0
+            style: 'decimal',
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+        },
+        decimalOneDigit: {
+            style: 'decimal',
+            minimumFractionDigits: 1,
+            maximumFractionDigits: 1,
         },
         decimalTwoDigits: {
-            style: 'decimal', minimumFractionDigits: 2, maximumFractionDigits: 2
+            style: 'decimal',
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
         },
         percent: {
             style: 'percent',
         },
+        percentOneDigit: {
+            style: 'percent',
+            minimumFractionDigits: 1,
+            maximumFractionDigits: 1,
+        },
         byte: {
-            style: 'unit', unit: 'byte',
+            style: 'unit',
+            unit: 'byte',
         },
         kilobyte: {
-            style: 'unit', unit: 'kilobyte',
+            style: 'unit',
+            unit: 'kilobyte',
         },
         megabyte: {
-            style: 'unit', unit: 'megabyte',
+            style: 'unit',
+            unit: 'megabyte',
         },
         celsius: {
-            style: 'unit', unit: 'celsius', maximumFractionDigits: 1,
+            style: 'unit',
+            unit: 'celsius',
+            maximumFractionDigits: 1,
         },
     };
 });

webapp/src/main.ts

@@ -1,21 +1,21 @@
-import messages from '@intlify/unplugin-vue-i18n/messages'
-import mitt from 'mitt'
-import { createApp } from 'vue'
-import { createI18n } from 'vue-i18n'
-import App from './App.vue'
-import { dateTimeFormats, defaultLocale, numberFormats } from './locales'
-import { tooltip } from './plugins/bootstrap'
-import router from './router'
+import messages from '@intlify/unplugin-vue-i18n/messages';
+import mitt from 'mitt';
+import { createApp } from 'vue';
+import { createI18n } from 'vue-i18n';
+import App from './App.vue';
+import { dateTimeFormats, defaultLocale, numberFormats } from './locales';
+import { tooltip } from './plugins/bootstrap';
+import router from './router';
 
-import "bootstrap"
-import './scss/styles.scss'
+import 'bootstrap';
+import './scss/styles.scss';
 
-const app = createApp(App)
+const app = createApp(App);
 
 const emitter = mitt();
 app.config.globalProperties.$emitter = emitter;
 
-app.directive('tooltip', tooltip)
+app.directive('tooltip', tooltip);
 
 const i18n = createI18n({
     legacy: false,
@@ -24,10 +24,10 @@ const i18n = createI18n({
     fallbackLocale: defaultLocale,
     messages,
     datetimeFormats: dateTimeFormats,
-    numberFormats: numberFormats
-})
+    numberFormats: numberFormats,
+});
 
-app.use(router)
-app.use(i18n)
+app.use(router);
+app.use(i18n);
 
-app.mount('#app')
+app.mount('#app');

webapp/src/plugins/bootstrap.ts

@@ -3,5 +3,5 @@ import { Tooltip } from 'bootstrap';
 export const tooltip = {
     mounted(el: HTMLElement) {
         new Tooltip(el);
-    }
-}
+    },
+};

webapp/src/router/index.ts

@@ -1,7 +1,7 @@
 import AboutView from '@/views/AboutView.vue';
 import ConfigAdminView from '@/views/ConfigAdminView.vue';
 import ConsoleInfoView from '@/views/ConsoleInfoView.vue';
-import DeviceAdminView from '@/views/DeviceAdminView.vue'
+import DeviceAdminView from '@/views/DeviceAdminView.vue';
 import DtuAdminView from '@/views/DtuAdminView.vue';
 import ErrorView from '@/views/ErrorView.vue';
 import FirmwareUpgradeView from '@/views/FirmwareUpgradeView.vue';
@@ -21,104 +21,104 @@ import { createRouter, createWebHistory } from 'vue-router';
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
-    linkActiveClass: "active",
+    linkActiveClass: 'active',
     routes: [
-    {
-        path: '/',
-        name: 'Home',
-        component: HomeView
-    },
-    {
-        path: '/login',
-        name: 'Login',
-        component: LoginView
-    },
-    {
-        path: '/error?status=:status&message=:message',
-        name: 'Error',
-        component: ErrorView
-    },
-    {
-        path: '/about',
-        name: 'About',
-        component: AboutView
-    },
-    {
-        path: '/info/network',
-        name: 'Network',
-        component: NetworkInfoView
-    },
-    {
-        path: '/info/system',
-        name: 'System',
-        component: SystemInfoView
-    },
-    {
-        path: '/info/ntp',
-        name: 'NTP',
-        component: NtpInfoView
-    },
-    {
-        path: '/info/mqtt',
-        name: 'MqTT',
-        component: MqttInfoView
-    },
-    {
-        path: '/info/console',
-        name: 'Web Console',
-        component: ConsoleInfoView
-    },
-    {
-        path: '/settings/network',
-        name: 'Network Settings',
-        component: NetworkAdminView
-    },
-    {
-        path: '/settings/ntp',
-        name: 'NTP Settings',
-        component: NtpAdminView
-    },
-    {
-        path: '/settings/mqtt',
-        name: 'MqTT Settings',
-        component: MqttAdminView
-    },
-    {
-        path: '/settings/inverter',
-        name: 'Inverter Settings',
-        component: InverterAdminView
-    },
-    {
-        path: '/settings/dtu',
-        name: 'DTU Settings',
-        component: DtuAdminView
-    },
-    {
-        path: '/settings/device',
-        name: 'Device Manager',
-        component: DeviceAdminView
-    },
-    {
-        path: '/firmware/upgrade',
-        name: 'Firmware Upgrade',
-        component: FirmwareUpgradeView
-    },
-    {
-        path: '/settings/config',
-        name: 'Config Management',
-        component: ConfigAdminView
-    },
-    {
-        path: '/settings/security',
-        name: 'Security',
-        component: SecurityAdminView
-    },
-    {
-        path: '/maintenance/reboot',
-        name: 'Device Reboot',
-        component: MaintenanceRebootView
-    }
-]
+        {
+            path: '/',
+            name: 'Home',
+            component: HomeView,
+        },
+        {
+            path: '/login',
+            name: 'Login',
+            component: LoginView,
+        },
+        {
+            path: '/error?status=:status&message=:message',
+            name: 'Error',
+            component: ErrorView,
+        },
+        {
+            path: '/about',
+            name: 'About',
+            component: AboutView,
+        },
+        {
+            path: '/info/network',
+            name: 'Network',
+            component: NetworkInfoView,
+        },
+        {
+            path: '/info/system',
+            name: 'System',
+            component: SystemInfoView,
+        },
+        {
+            path: '/info/ntp',
+            name: 'NTP',
+            component: NtpInfoView,
+        },
+        {
+            path: '/info/mqtt',
+            name: 'MqTT',
+            component: MqttInfoView,
+        },
+        {
+            path: '/info/console',
+            name: 'Web Console',
+            component: ConsoleInfoView,
+        },
+        {
+            path: '/settings/network',
+            name: 'Network Settings',
+            component: NetworkAdminView,
+        },
+        {
+            path: '/settings/ntp',
+            name: 'NTP Settings',
+            component: NtpAdminView,
+        },
+        {
+            path: '/settings/mqtt',
+            name: 'MqTT Settings',
+            component: MqttAdminView,
+        },
+        {
+            path: '/settings/inverter',
+            name: 'Inverter Settings',
+            component: InverterAdminView,
+        },
+        {
+            path: '/settings/dtu',
+            name: 'DTU Settings',
+            component: DtuAdminView,
+        },
+        {
+            path: '/settings/device',
+            name: 'Device Manager',
+            component: DeviceAdminView,
+        },
+        {
+            path: '/firmware/upgrade',
+            name: 'Firmware Upgrade',
+            component: FirmwareUpgradeView,
+        },
+        {
+            path: '/settings/config',
+            name: 'Config Management',
+            component: ConfigAdminView,
+        },
+        {
+            path: '/settings/security',
+            name: 'Security',
+            component: SecurityAdminView,
+        },
+        {
+            path: '/maintenance/reboot',
+            name: 'Device Reboot',
+            component: MaintenanceRebootView,
+        },
+    ],
 });
 
 export default router;

webapp/src/scss/styles.scss

@@ -1,6 +1,6 @@
 // Import all of Bootstrap's CSS
-@import "~bootstrap/scss/bootstrap";
+@import '~bootstrap/scss/bootstrap';
 
 .container-fluid .row {
-    font-feature-settings: "tnum";
+    font-feature-settings: 'tnum';
 }

webapp/src/types/DeviceConfig.ts

@@ -1,4 +1,4 @@
-import type { Device } from "./PinMapping";
+import type { Device } from './PinMapping';
 
 export interface Display {
     rotation: number;

webapp/src/types/LiveDataStatus.ts

@@ -6,11 +6,11 @@ export interface ValueObject {
 }
 
 export interface InverterStatistics {
-    name: ValueObject,
+    name: ValueObject;
     Power?: ValueObject;
     Voltage?: ValueObject;
     Current?: ValueObject;
-    "Power DC"?: ValueObject;
+    'Power DC'?: ValueObject;
     YieldDay?: ValueObject;
     YieldTotal?: ValueObject;
     Frequency?: ValueObject;

webapp/src/types/MqttConfig.ts

@@ -2,6 +2,7 @@ export interface MqttConfig {
     mqtt_enabled: boolean;
     mqtt_hostname: string;
     mqtt_port: number;
+    mqtt_clientid: string;
     mqtt_username: string;
     mqtt_password: string;
     mqtt_topic: string;

webapp/src/types/MqttStatus.ts

@@ -2,6 +2,7 @@ export interface MqttStatus {
     mqtt_enabled: boolean;
     mqtt_hostname: string;
     mqtt_port: number;
+    mqtt_clientid: string;
     mqtt_username: string;
     mqtt_topic: string;
     mqtt_publish_interval: number;

webapp/src/types/NtpStatus.ts

@@ -1,7 +1,7 @@
 export interface NtpStatus {
     ntp_server: string;
     ntp_timezone: string;
-    ntp_timezone_descr: string
+    ntp_timezone_descr: string;
     ntp_status: boolean;
     ntp_localtime: string;
     sun_risetime: string;

webapp/src/types/PinMapping.ts

@@ -14,7 +14,7 @@ export interface Cmt2300 {
     sdio: number;
     gpio2: number;
     gpio3: number;
- }
+}
 
 export interface Ethernet {
     enabled: boolean;
@@ -39,7 +39,7 @@ export interface Links {
     url: string;
 }
 
-export interface Device  {
+export interface Device {
     name: string;
     links: Array<Links>;
     nrf24: Nrf24;
@@ -48,4 +48,4 @@ export interface Device  {
     display: Display;
 }
 
-export interface PinMapping extends Array<Device>{}
+export interface PinMapping extends Array<Device> {}

webapp/src/utils/authentication.ts

@@ -1,11 +1,11 @@
-import type { Emitter, EventType } from "mitt";
-import type { Router } from "vue-router";
+import type { Emitter, EventType } from 'mitt';
+import type { Router } from 'vue-router';
 
 export function authHeader(): Headers {
     // return authorization header with basic auth credentials
     let user = null;
     try {
-        user = JSON.parse(localStorage.getItem('user') || "");
+        user = JSON.parse(localStorage.getItem('user') || '');
     } catch {
         // continue regardless of error
     }
@@ -21,15 +21,15 @@ export function authHeader(): Headers {
 export function authUrl(): string {
     let user = null;
     try {
-        user = JSON.parse(localStorage.getItem('user') || "");
+        user = JSON.parse(localStorage.getItem('user') || '');
     } catch {
         // continue regardless of error
     }
 
     if (user && user.authdata) {
-        return encodeURIComponent(atob(user.authdata)).replace("%3A", ":") + '@';
+        return encodeURIComponent(atob(user.authdata)).replace('%3A', ':') + '@';
     }
-    return "";
+    return '';
 }
 
 export function logout() {
@@ -38,7 +38,7 @@ export function logout() {
 }
 
 export function isLoggedIn(): boolean {
-    return (localStorage.getItem('user') != null);
+    return localStorage.getItem('user') != null;
 }
 
 export function login(username: string, password: string) {
@@ -46,13 +46,13 @@ export function login(username: string, password: string) {
         method: 'GET',
         headers: {
             'X-Requested-With': 'XMLHttpRequest',
-            'Authorization': 'Basic ' + btoa(unescape(encodeURIComponent(username + ':' + password))),
+            Authorization: 'Basic ' + btoa(unescape(encodeURIComponent(username + ':' + password))),
         },
     };
 
     return fetch('/api/security/authenticate', requestOptions)
         .then(handleAuthResponse)
-        .then(retVal => {
+        .then((retVal) => {
             // login successful if there's a user in the response
             if (retVal) {
                 // store user details and basic auth credentials in local storage
@@ -65,21 +65,32 @@ export function login(username: string, password: string) {
         });
 }
 
-export function handleResponse(response: Response, emitter: Emitter<Record<EventType, unknown>>, router: Router, ignore_error: boolean = false) {
-    return response.text().then(text => {
+export function handleResponse(
+    response: Response,
+    emitter: Emitter<Record<EventType, unknown>>,
+    router: Router,
+    ignore_error: boolean = false
+) {
+    return response.text().then((text) => {
         const data = text && JSON.parse(text);
         if (!response.ok) {
             if (response.status === 401) {
                 // auto logout if 401 response returned from api
                 logout();
-                emitter.emit("logged-out");
-                router.push({ path: "/login", query: { returnUrl: router.currentRoute.value.fullPath } });
+                emitter.emit('logged-out');
+                router.push({
+                    path: '/login',
+                    query: { returnUrl: router.currentRoute.value.fullPath },
+                });
                 return Promise.reject();
             }
 
-            const error = { message: (data && data.message) || response.statusText, status: response.status || 0 };
+            const error = {
+                message: (data && data.message) || response.statusText,
+                status: response.status || 0,
+            };
             if (!ignore_error) {
-                router.push({ name: "Error", params: error });
+                router.push({ name: 'Error', params: error });
             }
             return Promise.reject(error);
         }
@@ -89,7 +100,7 @@ export function handleResponse(response: Response, emitter: Emitter<Record<Event
 }
 
 function handleAuthResponse(response: Response) {
-    return response.text().then(text => {
+    return response.text().then((text) => {
         const data = text && JSON.parse(text);
         if (!response.ok) {
             if (response.status === 401) {
@@ -97,7 +108,7 @@ function handleAuthResponse(response: Response) {
                 logout();
             }
 
-            const error = "Invalid credentials";
+            const error = 'Invalid credentials';
             return Promise.reject(error);
         }
 

webapp/src/utils/index.ts

@@ -1,16 +1,11 @@
 import { isLoggedIn, login, logout } from './authentication';
 import { timestampToString } from './time';
 
-export {
-    timestampToString,
-    login,
-    logout,
-    isLoggedIn,
-};
+export { timestampToString, login, logout, isLoggedIn };
 
 export default {
     timestampToString,
     login,
     logout,
     isLoggedIn,
-}
+};

webapp/src/utils/time.ts

@@ -1,7 +1,14 @@
 export function timestampToString(locale: string, timestampSeconds: number, includeDays: true): [number, string];
 export function timestampToString(locale: string, timestampSeconds: number, includeDays?: false): [string];
-export function timestampToString(locale: string, timestampSeconds: number, includeDays = false): [number, string] | [string] {
-    const timeString = new Date(timestampSeconds * 1000).toLocaleTimeString(locale, { timeZone: "UTC", hour12: false });
+export function timestampToString(
+    locale: string,
+    timestampSeconds: number,
+    includeDays = false
+): [number, string] | [string] {
+    const timeString = new Date(timestampSeconds * 1000).toLocaleTimeString(locale, {
+        timeZone: 'UTC',
+        hour12: false,
+    });
     if (!includeDays) return [timeString];
 
     const secondsPerDay = 60 * 60 * 24;

webapp/src/views/AboutView.vue

@@ -3,15 +3,25 @@
         <div class="accordion" id="accordionExample">
             <div class="accordion-item">
                 <h2 class="accordion-header" id="headingDocumentation">
-                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
-                        data-bs-target="#collapseDocumentation" aria-expanded="true" aria-controls="collapseOne">
-                        <span class="badge text-bg-secondary">
-                            <BIconInfoCircle class="fs-4" />
-                        </span>&nbsp;{{ $t('about.Documentation') }}
+                    <button
+                        class="accordion-button"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseDocumentation"
+                        aria-expanded="true"
+                        aria-controls="collapseOne"
+                    >
+                        <span class="badge text-bg-secondary"> <BIconInfoCircle class="fs-4" /> </span>&nbsp;{{
+                            $t('about.Documentation')
+                        }}
                     </button>
                 </h2>
-                <div id="collapseDocumentation" class="accordion-collapse collapse show" aria-labelledby="headingDocumentation"
-                    data-bs-parent="#accordionExample">
+                <div
+                    id="collapseDocumentation"
+                    class="accordion-collapse collapse show"
+                    aria-labelledby="headingDocumentation"
+                    data-bs-parent="#accordionExample"
+                >
                     <div class="accordion-body">
                         <p class="fw-normal" v-html="$t('about.DocumentationBody')"></p>
                     </div>
@@ -19,15 +29,25 @@
             </div>
             <div class="accordion-item">
                 <h2 class="accordion-header" id="headingOne">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                        data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
-                        <span class="badge text-bg-secondary">
-                            <BIconInfoCircle class="fs-4" />
-                        </span>&nbsp;{{ $t('about.ProjectOrigin') }}
+                    <button
+                        class="accordion-button collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseOne"
+                        aria-expanded="false"
+                        aria-controls="collapseOne"
+                    >
+                        <span class="badge text-bg-secondary"> <BIconInfoCircle class="fs-4" /> </span>&nbsp;{{
+                            $t('about.ProjectOrigin')
+                        }}
                     </button>
                 </h2>
-                <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
-                    data-bs-parent="#accordionExample">
+                <div
+                    id="collapseOne"
+                    class="accordion-collapse collapse"
+                    aria-labelledby="headingOne"
+                    data-bs-parent="#accordionExample"
+                >
                     <div class="accordion-body">
                         <p class="fw-normal" v-html="$t('about.ProjectOriginBody1')"></p>
                         <p class="fw-normal" v-html="$t('about.ProjectOriginBody2')"></p>
@@ -38,61 +58,83 @@
             </div>
             <div class="accordion-item">
                 <h2 class="accordion-header" id="headingTwo">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                        data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-                        <span class="badge text-bg-secondary">
-                            <BIconActivity class="fs-4" />
-                        </span>&nbsp;{{ $t('about.NewsUpdates') }}
+                    <button
+                        class="accordion-button collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseTwo"
+                        aria-expanded="false"
+                        aria-controls="collapseTwo"
+                    >
+                        <span class="badge text-bg-secondary"> <BIconActivity class="fs-4" /> </span>&nbsp;{{
+                            $t('about.NewsUpdates')
+                        }}
                     </button>
                 </h2>
-                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
-                    data-bs-parent="#accordionExample">
+                <div
+                    id="collapseTwo"
+                    class="accordion-collapse collapse"
+                    aria-labelledby="headingTwo"
+                    data-bs-parent="#accordionExample"
+                >
                     <div class="accordion-body" v-html="$t('about.NewsUpdatesBody')"></div>
                 </div>
             </div>
             <div class="accordion-item">
                 <h2 class="accordion-header" id="headingThree">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                        data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
-                        <span class="badge text-bg-secondary">
-                            <BIconBug class="fs-4" />
-                        </span>&nbsp;{{ $t('about.ErrorReporting') }}
+                    <button
+                        class="accordion-button collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseThree"
+                        aria-expanded="false"
+                        aria-controls="collapseThree"
+                    >
+                        <span class="badge text-bg-secondary"> <BIconBug class="fs-4" /> </span>&nbsp;{{
+                            $t('about.ErrorReporting')
+                        }}
                     </button>
                 </h2>
-                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
-                    data-bs-parent="#accordionExample">
+                <div
+                    id="collapseThree"
+                    class="accordion-collapse collapse"
+                    aria-labelledby="headingThree"
+                    data-bs-parent="#accordionExample"
+                >
                     <div class="accordion-body" v-html="$t('about.ErrorReportingBody')"></div>
                 </div>
             </div>
             <div class="accordion-item">
                 <h2 class="accordion-header" id="headingFour">
-                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
-                        data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
-                        <span class="badge text-bg-secondary">
-                            <BIconChat class="fs-4" />
-                        </span>&nbsp;{{ $t('about.Discussion') }}
+                    <button
+                        class="accordion-button collapsed"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#collapseFour"
+                        aria-expanded="false"
+                        aria-controls="collapseFour"
+                    >
+                        <span class="badge text-bg-secondary"> <BIconChat class="fs-4" /> </span>&nbsp;{{
+                            $t('about.Discussion')
+                        }}
                     </button>
                 </h2>
-                <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
-                    data-bs-parent="#accordionExample">
+                <div
+                    id="collapseFour"
+                    class="accordion-collapse collapse"
+                    aria-labelledby="headingFour"
+                    data-bs-parent="#accordionExample"
+                >
                     <div class="accordion-body" v-html="$t('about.DiscussionBody')"></div>
                 </div>
             </div>
-
         </div>
-
     </BasePage>
-
 </template>
 
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
-import {
-    BIconActivity,
-    BIconBug,
-    BIconChat,
-    BIconInfoCircle
-} from 'bootstrap-icons-vue';
+import { BIconActivity, BIconBug, BIconChat, BIconInfoCircle } from 'bootstrap-icons-vue';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
@@ -104,5 +146,4 @@ export default defineComponent({
         BIconInfoCircle,
     },
 });
-
 </script>

webapp/src/views/ConfigAdminView.vue

@@ -11,13 +11,14 @@
                 </div>
                 <div class="col-sm">
                     <select class="form-select" v-model="backupFileSelect">
-                        <option v-for="(file) in fileList.configs" :key="file.name" :value="file.name">
+                        <option v-for="file in fileList.configs" :key="file.name" :value="file.name">
                             {{ file.name }}
                         </option>
                     </select>
                 </div>
                 <div class="col-sm">
-                    <button class="btn btn-primary" @click="downloadConfig">{{ $t('configadmin.Backup') }}
+                    <button class="btn btn-primary" @click="downloadConfig">
+                        {{ $t('configadmin.Backup') }}
                     </button>
                 </div>
             </div>
@@ -33,9 +34,7 @@
                 </span>
                 <br />
                 <br />
-                <button class="btn btn-light" @click="clear">
-                    <BIconArrowLeft /> {{ $t('configadmin.Back') }}
-                </button>
+                <button class="btn btn-light" @click="clear"><BIconArrowLeft /> {{ $t('configadmin.Back') }}</button>
             </div>
 
             <div v-else-if="!uploading && UploadSuccess">
@@ -45,9 +44,7 @@
                 <span> {{ $t('configadmin.UploadSuccess') }} </span>
                 <br />
                 <br />
-                <button class="btn btn-primary" @click="clear">
-                    <BIconArrowLeft /> {{ $t('configadmin.Back') }}
-                </button>
+                <button class="btn btn-primary" @click="clear"><BIconArrowLeft /> {{ $t('configadmin.Back') }}</button>
             </div>
 
             <div v-else-if="!uploading">
@@ -63,7 +60,8 @@
                         <input class="form-control" type="file" ref="file" accept=".json" />
                     </div>
                     <div class="col-sm">
-                        <button class="btn btn-primary" @click="uploadConfig">{{ $t('configadmin.Restore') }}
+                        <button class="btn btn-primary" @click="uploadConfig">
+                            {{ $t('configadmin.Restore') }}
                         </button>
                     </div>
                 </div>
@@ -71,8 +69,14 @@
 
             <div v-else-if="uploading">
                 <div class="progress">
-                    <div class="progress-bar" role="progressbar" :style="{ width: progress + '%' }"
-                        v-bind:aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100">
+                    <div
+                        class="progress-bar"
+                        role="progressbar"
+                        :style="{ width: progress + '%' }"
+                        v-bind:aria-valuenow="progress"
+                        aria-valuemin="0"
+                        aria-valuemax="100"
+                    >
                         {{ progress }}%
                     </div>
                 </div>
@@ -82,14 +86,20 @@
         </CardElement>
 
         <CardElement :text="$t('configadmin.ResetHeader')" textVariant="text-bg-primary" center-content add-space>
-            <button class="btn btn-danger" @click="onFactoryResetModal">{{ $t('configadmin.FactoryResetButton') }}
+            <button class="btn btn-danger" @click="onFactoryResetModal">
+                {{ $t('configadmin.FactoryResetButton') }}
             </button>
 
             <div class="alert alert-danger mt-3" role="alert" v-html="$t('configadmin.ResetHint')"></div>
         </CardElement>
     </BasePage>
 
-    <ModalDialog modalId="factoryReset" small :title="$t('configadmin.FactoryReset')" :closeText="$t('configadmin.Cancel')">
+    <ModalDialog
+        modalId="factoryReset"
+        small
+        :title="$t('configadmin.FactoryReset')"
+        :closeText="$t('configadmin.Cancel')"
+    >
         {{ $t('configadmin.ResetMsg') }}
         <template #footer>
             <button type="button" class="btn btn-danger" @click="onFactoryResetPerform">
@@ -101,17 +111,13 @@
 
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
-import BootstrapAlert from "@/components/BootstrapAlert.vue";
+import BootstrapAlert from '@/components/BootstrapAlert.vue';
 import CardElement from '@/components/CardElement.vue';
 import ModalDialog from '@/components/ModalDialog.vue';
 import type { ConfigFileList } from '@/types/Config';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import * as bootstrap from 'bootstrap';
-import {
-    BIconArrowLeft,
-    BIconCheckCircle,
-    BIconExclamationCircleFill
-} from 'bootstrap-icons-vue';
+import { BIconArrowLeft, BIconCheckCircle, BIconExclamationCircleFill } from 'bootstrap-icons-vue';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
@@ -127,18 +133,18 @@ export default defineComponent({
     data() {
         return {
             modalFactoryReset: {} as bootstrap.Modal,
-            alertMessage: "",
-            alertType: "info",
+            alertMessage: '',
+            alertType: 'info',
             showAlert: false,
             loading: true,
             uploading: false,
             progress: 0,
-            UploadError: "",
+            UploadError: '',
             UploadSuccess: false,
             file: {} as Blob,
             fileList: {} as ConfigFileList,
-            backupFileSelect: "",
-            restoreFileSelect: "config.json",
+            backupFileSelect: '',
+            restoreFileSelect: 'config.json',
         };
     },
     mounted() {
@@ -156,26 +162,24 @@ export default defineComponent({
         },
         onFactoryResetPerform() {
             const formData = new FormData();
-            formData.append("data", JSON.stringify({ delete: true }));
+            formData.append('data', JSON.stringify({ delete: true }));
 
-            fetch("/api/config/delete", {
-                method: "POST",
+            fetch('/api/config/delete', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (response) => {
-                        this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
-                        this.alertType = response.type;
-                        this.showAlert = true;
-                    }
-                )
+                .then((response) => {
+                    this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
+                    this.alertType = response.type;
+                    this.showAlert = true;
+                });
             this.modalFactoryReset.hide();
         },
         getFileList() {
             this.loading = true;
-            fetch("/api/config/list", { headers: authHeader() })
+            fetch('/api/config/list', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.fileList = data;
@@ -186,9 +190,9 @@ export default defineComponent({
                 });
         },
         downloadConfig() {
-            fetch("/api/config/get?file=" + this.backupFileSelect, { headers: authHeader() })
-                .then(res => res.blob())
-                .then(blob => {
+            fetch('/api/config/get?file=' + this.backupFileSelect, { headers: authHeader() })
+                .then((res) => res.blob())
+                .then((blob) => {
                     const file = window.URL.createObjectURL(blob);
                     const a = document.createElement('a');
                     a.href = file;
@@ -205,13 +209,13 @@ export default defineComponent({
             if (target.files !== null && target.files?.length > 0) {
                 this.file = target.files[0];
             } else {
-                this.UploadError = this.$t("configadmin.NoFileSelected");
+                this.UploadError = this.$t('configadmin.NoFileSelected');
                 this.uploading = false;
                 this.progress = 0;
                 return;
             }
             const request = new XMLHttpRequest();
-            request.addEventListener("load", () => {
+            request.addEventListener('load', () => {
                 // request.response will hold the response from the server
                 if (request.status === 200) {
                     this.UploadSuccess = true;
@@ -224,20 +228,20 @@ export default defineComponent({
                 this.progress = 0;
             });
             // Upload progress
-            request.upload.addEventListener("progress", (e) => {
+            request.upload.addEventListener('progress', (e) => {
                 this.progress = Math.trunc((e.loaded / e.total) * 100);
             });
             request.withCredentials = true;
 
-            formData.append("config", this.file, "config");
-            request.open("post", "/api/config/upload?file=" + this.restoreFileSelect);
+            formData.append('config', this.file, 'config');
+            request.open('post', '/api/config/upload?file=' + this.restoreFileSelect);
             authHeader().forEach((value, key) => {
                 request.setRequestHeader(key, value);
             });
             request.send(formData);
         },
         clear() {
-            this.UploadError = "";
+            this.UploadError = '';
             this.UploadSuccess = false;
             this.getFileList();
         },

webapp/src/views/ConsoleInfoView.vue

@@ -4,8 +4,13 @@
             <div class="row g-3 align-items-center">
                 <div class="col">
                     <div class="form-check form-switch">
-                        <input class="form-check-input" type="checkbox" role="switch" id="autoScroll"
-                            v-model="isAutoScroll">
+                        <input
+                            class="form-check-input"
+                            type="checkbox"
+                            role="switch"
+                            id="autoScroll"
+                            v-model="isAutoScroll"
+                        />
                         <label class="form-check-label" for="autoScroll">
                             {{ $t('console.EnableAutoScroll') }}
                         </label>
@@ -14,9 +19,11 @@
                 <div class="col text-end">
                     <div class="btn-group" role="group">
                         <button type="button" class="btn btn-primary" :onClick="clearConsole">
-                            {{ $t('console.ClearConsole') }}</button>
+                            {{ $t('console.ClearConsole') }}
+                        </button>
                         <button type="button" class="btn btn-secondary" :onClick="copyConsole">
-                            {{ $t('console.CopyToClipboard') }}</button>
+                            {{ $t('console.CopyToClipboard') }}
+                        </button>
                     </div>
                 </div>
             </div>
@@ -41,7 +48,7 @@ export default defineComponent({
             socket: {} as WebSocket,
             heartInterval: 0,
             dataLoading: true,
-            consoleBuffer: "",
+            consoleBuffer: '',
             isAutoScroll: true,
             endWithNewline: false,
         };
@@ -56,21 +63,20 @@ export default defineComponent({
     watch: {
         consoleBuffer() {
             if (this.isAutoScroll) {
-                const textarea = this.$el.querySelector("#console");
+                const textarea = this.$el.querySelector('#console');
                 setTimeout(() => {
                     textarea.scrollTop = textarea.scrollHeight;
                 }, 0);
             }
-        }
+        },
     },
     methods: {
         initSocket() {
-            console.log("Starting connection to WebSocket Server");
+            console.log('Starting connection to WebSocket Server');
 
             const { protocol, host } = location;
             const authString = authUrl();
-            const webSocketUrl = `${protocol === "https:" ? "wss" : "ws"
-                }://${authString}${host}/console`;
+            const webSocketUrl = `${protocol === 'https:' ? 'wss' : 'ws'}://${authString}${host}/console`;
 
             this.closeSocket();
             this.socket = new WebSocket(webSocketUrl);
@@ -84,14 +90,15 @@ export default defineComponent({
                     outstr = outstr.substring(0, outstr.length - 1);
                     removedNewline = true;
                 }
-                this.consoleBuffer += (this.endWithNewline ? this.getOutDate() : '') + outstr.replaceAll("\n", "\n" + this.getOutDate());
+                this.consoleBuffer +=
+                    (this.endWithNewline ? this.getOutDate() : '') + outstr.replaceAll('\n', '\n' + this.getOutDate());
                 this.endWithNewline = removedNewline;
                 this.heartCheck(); // Reset heartbeat detection
             };
 
             this.socket.onopen = function (event) {
                 console.log(event);
-                console.log("Successfully connected to the echo websocket server...");
+                console.log('Successfully connected to the echo websocket server...');
             };
 
             // Listen to window events , When the window closes , Take the initiative to disconnect websocket Connect
@@ -105,7 +112,7 @@ export default defineComponent({
             this.heartInterval = setInterval(() => {
                 if (this.socket.readyState === 1) {
                     // Connection status
-                    this.socket.send("ping");
+                    this.socket.send('ping');
                 } else {
                     this.initSocket(); // Breakpoint reconnection 5 Time
                 }
@@ -123,13 +130,19 @@ export default defineComponent({
         },
         getOutDate(): string {
             const u = new Date();
-            return ('0' + u.getHours()).slice(-2) + ':' +
-                ('0' + u.getMinutes()).slice(-2) + ':' +
-                ('0' + u.getSeconds()).slice(-2) + '.' +
-                (u.getMilliseconds() / 1000).toFixed(3).slice(2, 5) + ' > ';
+            return (
+                ('0' + u.getHours()).slice(-2) +
+                ':' +
+                ('0' + u.getMinutes()).slice(-2) +
+                ':' +
+                ('0' + u.getSeconds()).slice(-2) +
+                '.' +
+                (u.getMilliseconds() / 1000).toFixed(3).slice(2, 5) +
+                ' > '
+            );
         },
         clearConsole() {
-            this.consoleBuffer = "";
+            this.consoleBuffer = '';
         },
         copyConsole() {
             const input = document.createElement('textarea');
@@ -138,17 +151,17 @@ export default defineComponent({
             input.select();
             document.execCommand('copy');
             document.body.removeChild(input);
-        }
-    }
+        },
+    },
 });
 </script>
 
 <style>
 #console {
-    background-color: #0C0C0C;
-    color: #CCCCCC;
+    background-color: #0c0c0c;
+    color: #cccccc;
     padding: 8px;
     font-family: courier new;
-    font-size: .875em;
+    font-size: 0.875em;
 }
 </style>

webapp/src/views/DeviceAdminView.vue

@@ -7,19 +7,50 @@
         <form @submit="savePinConfig">
             <nav>
                 <div class="nav nav-tabs" id="nav-tab" role="tablist">
-                    <button class="nav-link active" id="nav-pin-tab" data-bs-toggle="tab" data-bs-target="#nav-pin"
-                        type="button" role="tab" aria-controls="nav-pin" aria-selected="true">{{
-                            $t('deviceadmin.PinAssignment')
-                        }}</button>
-                    <button class="nav-link" id="nav-display-tab" data-bs-toggle="tab" data-bs-target="#nav-display"
-                        type="button" role="tab" aria-controls="nav-display">{{ $t('deviceadmin.Display') }}</button>
-                    <button class="nav-link" id="nav-leds-tab" data-bs-toggle="tab" data-bs-target="#nav-leds"
-                        type="button" role="tab" aria-controls="nav-leds">{{ $t('deviceadmin.Leds') }}</button>
+                    <button
+                        class="nav-link active"
+                        id="nav-pin-tab"
+                        data-bs-toggle="tab"
+                        data-bs-target="#nav-pin"
+                        type="button"
+                        role="tab"
+                        aria-controls="nav-pin"
+                        aria-selected="true"
+                    >
+                        {{ $t('deviceadmin.PinAssignment') }}
+                    </button>
+                    <button
+                        class="nav-link"
+                        id="nav-display-tab"
+                        data-bs-toggle="tab"
+                        data-bs-target="#nav-display"
+                        type="button"
+                        role="tab"
+                        aria-controls="nav-display"
+                    >
+                        {{ $t('deviceadmin.Display') }}
+                    </button>
+                    <button
+                        class="nav-link"
+                        id="nav-leds-tab"
+                        data-bs-toggle="tab"
+                        data-bs-target="#nav-leds"
+                        type="button"
+                        role="tab"
+                        aria-controls="nav-leds"
+                    >
+                        {{ $t('deviceadmin.Leds') }}
+                    </button>
                 </div>
             </nav>
             <div class="tab-content" id="nav-tabContent">
-                <div class="tab-pane fade show active" id="nav-pin" role="tabpanel" aria-labelledby="nav-pin-tab"
-                    tabindex="0">
+                <div
+                    class="tab-pane fade show active"
+                    id="nav-pin"
+                    role="tabpanel"
+                    aria-labelledby="nav-pin-tab"
+                    tabindex="0"
+                >
                     <div class="card">
                         <div class="card-body">
                             <div class="row mb-3">
@@ -27,10 +58,21 @@
                                     $t('deviceadmin.SelectedProfile')
                                 }}</label>
                                 <div class="col-sm-10">
-                                    <select class="form-select" id="inputPinProfile"
-                                        v-model="deviceConfigList.curPin.name">
-                                        <option v-for="device in pinMappingList" :value="device.name" :key="device.name">
-                                            {{ device.name === "Default" ? $t('deviceadmin.DefaultProfile') : device.name }}
+                                    <select
+                                        class="form-select"
+                                        id="inputPinProfile"
+                                        v-model="deviceConfigList.curPin.name"
+                                    >
+                                        <option
+                                            v-for="device in pinMappingList"
+                                            :value="device.name"
+                                            :key="device.name"
+                                        >
+                                            {{
+                                                device.name === 'Default'
+                                                    ? $t('deviceadmin.DefaultProfile')
+                                                    : device.name
+                                            }}
                                         </option>
                                     </select>
                                 </div>
@@ -39,33 +81,56 @@
                             <div class="row mb-3">
                                 <div class="col-sm-2"></div>
                                 <div class="col-sm-10">
-                                    <div class="btn-group mb-2 me-2" v-for="(doc, index) in pinMappingList.find(i => i.name === deviceConfigList.curPin.name)?.links" :key="index">
+                                    <div
+                                        class="btn-group mb-2 me-2"
+                                        v-for="(doc, index) in pinMappingList.find(
+                                            (i) => i.name === deviceConfigList.curPin.name
+                                        )?.links"
+                                        :key="index"
+                                    >
                                         <a :href="doc.url" class="btn btn-primary" target="_blank">{{ doc.name }}</a>
                                     </div>
                                 </div>
                             </div>
 
-                            <div class="alert alert-danger mt-3" role="alert" v-html="$t('deviceadmin.ProfileHint')">
-                            </div>
+                            <div
+                                class="alert alert-danger mt-3"
+                                role="alert"
+                                v-html="$t('deviceadmin.ProfileHint')"
+                            ></div>
 
                             <PinInfo
-                                :selectedPinAssignment="pinMappingList.find(i => i.name === deviceConfigList.curPin.name)"
-                                :currentPinAssignment="deviceConfigList.curPin" />
+                                :selectedPinAssignment="
+                                    pinMappingList.find((i) => i.name === deviceConfigList.curPin.name)
+                                "
+                                :currentPinAssignment="deviceConfigList.curPin"
+                            />
                         </div>
                     </div>
                 </div>
 
-                <div class="tab-pane fade show" id="nav-display" role="tabpanel" aria-labelledby="nav-display-tab"
-                    tabindex="0">
+                <div
+                    class="tab-pane fade show"
+                    id="nav-display"
+                    role="tabpanel"
+                    aria-labelledby="nav-display-tab"
+                    tabindex="0"
+                >
                     <div class="card">
                         <div class="card-body">
-                            <InputElement :label="$t('deviceadmin.PowerSafe')"
-                                v-model="deviceConfigList.display.power_safe" type="checkbox"
-                                :tooltip="$t('deviceadmin.PowerSafeHint')" />
+                            <InputElement
+                                :label="$t('deviceadmin.PowerSafe')"
+                                v-model="deviceConfigList.display.power_safe"
+                                type="checkbox"
+                                :tooltip="$t('deviceadmin.PowerSafeHint')"
+                            />
 
-                            <InputElement :label="$t('deviceadmin.Screensaver')"
-                                v-model="deviceConfigList.display.screensaver" type="checkbox"
-                                :tooltip="$t('deviceadmin.ScreensaverHint')" />
+                            <InputElement
+                                :label="$t('deviceadmin.Screensaver')"
+                                v-model="deviceConfigList.display.screensaver"
+                                type="checkbox"
+                                :tooltip="$t('deviceadmin.ScreensaverHint')"
+                            />
 
                             <div class="row mb-3">
                                 <label class="col-sm-2 col-form-label">
@@ -80,10 +145,15 @@
                                 </div>
                             </div>
 
-                            <InputElement :label="$t('deviceadmin.DiagramDuration')"
-                                v-model="deviceConfigList.display.diagramduration" type="number"
-                                min=600 max=86400
-                                :tooltip="$t('deviceadmin.DiagramDurationHint')" :postfix="$t('deviceadmin.Seconds')" />
+                            <InputElement
+                                :label="$t('deviceadmin.DiagramDuration')"
+                                v-model="deviceConfigList.display.diagramduration"
+                                type="number"
+                                min="600"
+                                max="86400"
+                                :tooltip="$t('deviceadmin.DiagramDurationHint')"
+                                :postfix="$t('deviceadmin.Seconds')"
+                            />
 
                             <div class="row mb-3">
                                 <label class="col-sm-2 col-form-label">
@@ -91,7 +161,11 @@
                                 </label>
                                 <div class="col-sm-10">
                                     <select class="form-select" v-model="deviceConfigList.display.language">
-                                        <option v-for="language in displayLanguageList" :key="language.key" :value="language.key">
+                                        <option
+                                            v-for="language in displayLanguageList"
+                                            :key="language.key"
+                                            :value="language.key"
+                                        >
                                             {{ $t(`deviceadmin.` + language.value) }}
                                         </option>
                                     </select>
@@ -104,7 +178,11 @@
                                 </label>
                                 <div class="col-sm-10">
                                     <select class="form-select" v-model="deviceConfigList.display.rotation">
-                                        <option v-for="rotation in displayRotationList" :key="rotation.key" :value="rotation.key">
+                                        <option
+                                            v-for="rotation in displayRotationList"
+                                            :key="rotation.key"
+                                            :value="rotation.key"
+                                        >
                                             {{ $t(`deviceadmin.` + rotation.value) }}
                                         </option>
                                     </select>
@@ -113,36 +191,57 @@
 
                             <div class="row mb-3">
                                 <label for="inputDisplayContrast" class="col-sm-2 col-form-label">{{
-                                    $t('deviceadmin.Contrast', { contrast: $n(deviceConfigList.display.contrast / 100,
-                                            'percent')
-                                    }) }}</label>
+                                    $t('deviceadmin.Contrast', {
+                                        contrast: $n(deviceConfigList.display.contrast / 100, 'percent'),
+                                    })
+                                }}</label>
                                 <div class="col-sm-10">
-                                    <input type="range" class="form-range" min="0" max="100" id="inputDisplayContrast"
-                                        v-model="deviceConfigList.display.contrast" />
+                                    <input
+                                        type="range"
+                                        class="form-range"
+                                        min="0"
+                                        max="100"
+                                        id="inputDisplayContrast"
+                                        v-model="deviceConfigList.display.contrast"
+                                    />
                                 </div>
                             </div>
-
                         </div>
                     </div>
                 </div>
 
-                <div class="tab-pane fade show" id="nav-leds" role="tabpanel" aria-labelledby="nav-leds-tab" tabindex="0">
+                <div
+                    class="tab-pane fade show"
+                    id="nav-leds"
+                    role="tabpanel"
+                    aria-labelledby="nav-leds-tab"
+                    tabindex="0"
+                >
                     <div class="card">
                         <div class="card-body">
-                            <InputElement :label="$t('deviceadmin.EqualBrightness')"
-                                v-model="equalBrightnessCheckVal" type="checkbox" />
+                            <InputElement
+                                :label="$t('deviceadmin.EqualBrightness')"
+                                v-model="equalBrightnessCheckVal"
+                                type="checkbox"
+                            />
 
                             <div class="row mb-3" v-for="(ledSetting, index) in deviceConfigList.led" :key="index">
                                 <label :for="getLedIdFromNumber(index)" class="col-sm-2 col-form-label">{{
                                     $t('deviceadmin.LedBrightness', {
                                         led: index,
-                                        brightness: $n(ledSetting.brightness / 100,
-                                            'percent')
+                                        brightness: $n(ledSetting.brightness / 100, 'percent'),
                                     })
                                 }}</label>
                                 <div class="col-sm-10">
-                                    <input type="range" class="form-range" min="0" max="100" :id="getLedIdFromNumber(index)"
-                                        v-model="ledSetting.brightness" @change="syncSliders" />
+                                    <input
+                                        type="range"
+                                        class="form-range"
+                                        min="0"
+                                        max="100"
+                                        :id="getLedIdFromNumber(index)"
+                                        v-model="ledSetting.brightness"
+                                        @change="syncSliders"
+                                    />
                                 </div>
                             </div>
                         </div>
@@ -150,20 +249,19 @@
                 </div>
             </div>
 
-            <FormFooter @reload="getDeviceConfig"/>
-
+            <FormFooter @reload="getDeviceConfig" />
         </form>
     </BasePage>
 </template>
 
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
-import BootstrapAlert from "@/components/BootstrapAlert.vue";
+import BootstrapAlert from '@/components/BootstrapAlert.vue';
 import FormFooter from '@/components/FormFooter.vue';
 import InputElement from '@/components/InputElement.vue';
 import PinInfo from '@/components/PinInfo.vue';
-import type { DeviceConfig, Led } from "@/types/DeviceConfig";
-import type { PinMapping, Device } from "@/types/PinMapping";
+import type { DeviceConfig, Led } from '@/types/DeviceConfig';
+import type { PinMapping, Device } from '@/types/PinMapping';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { defineComponent } from 'vue';
 
@@ -181,8 +279,8 @@ export default defineComponent({
             pinMappingLoading: true,
             deviceConfigList: {} as DeviceConfig,
             pinMappingList: {} as PinMapping,
-            alertMessage: "",
-            alertType: "info",
+            alertMessage: '',
+            alertType: 'info',
             showAlert: false,
             equalBrightnessCheckVal: false,
             displayRotationList: [
@@ -192,66 +290,64 @@ export default defineComponent({
                 { key: 3, value: 'rot270' },
             ],
             displayLanguageList: [
-                { key: 0, value: "en" },
-                { key: 1, value: "de" },
-                { key: 2, value: "fr" },
+                { key: 0, value: 'en' },
+                { key: 1, value: 'de' },
+                { key: 2, value: 'fr' },
             ],
             diagramModeList: [
-                { key: 0, value: "off" },
-                { key: 1, value: "small" },
-                { key: 2, value: "fullscreen" },
-            ]
-        }
+                { key: 0, value: 'off' },
+                { key: 1, value: 'small' },
+                { key: 2, value: 'fullscreen' },
+            ],
+        };
     },
     created() {
         this.getDeviceConfig();
         this.getPinMappingList();
     },
     watch: {
-        equalBrightnessCheckVal: function(val) {
+        equalBrightnessCheckVal: function (val) {
             if (!val) {
                 return;
             }
-            this.deviceConfigList.led.every(v => v.brightness = this.deviceConfigList.led[0].brightness);
-        }
+            this.deviceConfigList.led.every((v) => (v.brightness = this.deviceConfigList.led[0].brightness));
+        },
     },
     methods: {
         getPinMappingList() {
             this.pinMappingLoading = true;
-            fetch("/api/config/get?file=pin_mapping.json", { headers: authHeader() })
+            fetch('/api/config/get?file=pin_mapping.json', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router, true))
-                .then(
-                    (data) => {
-                        this.pinMappingList = data;
-                    }
-                )
+                .then((data) => {
+                    this.pinMappingList = data;
+                })
                 .catch((error) => {
                     if (error.status != 404) {
-                        this.alertMessage = this.$t('deviceadmin.ParseError', { error: error.message });
+                        this.alertMessage = this.$t('deviceadmin.ParseError', {
+                            error: error.message,
+                        });
                         this.alertType = 'danger';
                         this.showAlert = true;
                     }
                     this.pinMappingList = Array<Device>();
                 })
                 .finally(() => {
-                    this.pinMappingList.sort((a, b) => (a.name < b.name) ? -1 : 1);
-                    this.pinMappingList.splice(0, 0, { "name": "Default" } as Device);
+                    this.pinMappingList.sort((a, b) => (a.name < b.name ? -1 : 1));
+                    this.pinMappingList.splice(0, 0, { name: 'Default' } as Device);
                     this.pinMappingLoading = false;
                 });
         },
         getDeviceConfig() {
             this.dataLoading = true;
-            fetch("/api/device/config", { headers: authHeader() })
+            fetch('/api/device/config', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (data) => {
-                        this.deviceConfigList = data;
-                        if (this.deviceConfigList.curPin.name === "") {
-                            this.deviceConfigList.curPin.name = "Default";
-                        }
-                        this.dataLoading = false;
+                .then((data) => {
+                    this.deviceConfigList = data;
+                    if (this.deviceConfigList.curPin.name === '') {
+                        this.deviceConfigList.curPin.name = 'Default';
                     }
-                )
+                    this.dataLoading = false;
+                })
                 .then(() => {
                     this.equalBrightnessCheckVal = this.isEqualBrightness();
                 });
@@ -260,30 +356,28 @@ export default defineComponent({
             e.preventDefault();
 
             const formData = new FormData();
-            formData.append("data", JSON.stringify(this.deviceConfigList));
+            formData.append('data', JSON.stringify(this.deviceConfigList));
 
-            fetch("/api/device/config", {
-                method: "POST",
+            fetch('/api/device/config', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (response) => {
-                        this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
-                        this.alertType = response.type;
-                        this.showAlert = true;
-                    }
-                );
+                .then((response) => {
+                    this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
+                    this.alertType = response.type;
+                    this.showAlert = true;
+                });
         },
-        getLedIdFromNumber(ledNo: number) : string {
+        getLedIdFromNumber(ledNo: number): string {
             return 'inputLED' + ledNo + 'Brightness';
         },
         getNumberFromLedId(id: string): number {
-            return parseInt(id.replace("inputLED", "").replace("Brightness", ""));
+            return parseInt(id.replace('inputLED', '').replace('Brightness', ''));
         },
         isEqualBrightness(): boolean {
-            const allEqual = (arr : Led[]) => arr.every(v => v.brightness === arr[0].brightness);
+            const allEqual = (arr: Led[]) => arr.every((v) => v.brightness === arr[0].brightness);
             return allEqual(this.deviceConfigList.led);
         },
         syncSliders(event: Event) {
@@ -291,8 +385,8 @@ export default defineComponent({
                 return;
             }
             const srcId = this.getNumberFromLedId((event.target as Element).id);
-            this.deviceConfigList.led.every(v => v.brightness = this.deviceConfigList.led[srcId].brightness);
-        }
+            this.deviceConfigList.led.every((v) => (v.brightness = this.deviceConfigList.led[srcId].brightness));
+        },
     },
 });
 </script>

webapp/src/views/DtuAdminView.vue

@@ -6,15 +6,23 @@
 
         <form @submit="saveDtuConfig">
             <CardElement :text="$t('dtuadmin.DtuConfiguration')" textVariant="text-bg-primary">
-                <InputElement :label="$t('dtuadmin.Serial')"
-                                v-model="dtuConfigList.serial"
-                                type="number" min="1" max="199999999999"
-                                :tooltip="$t('dtuadmin.SerialHint')"/>
+                <InputElement
+                    :label="$t('dtuadmin.Serial')"
+                    v-model="dtuConfigList.serial"
+                    type="number"
+                    min="1"
+                    max="199999999999"
+                    :tooltip="$t('dtuadmin.SerialHint')"
+                />
 
-                <InputElement :label="$t('dtuadmin.PollInterval')"
-                                v-model="dtuConfigList.pollinterval"
-                                type="number" min="1" max="86400"
-                                :postfix="$t('dtuadmin.Seconds')"/>
+                <InputElement
+                    :label="$t('dtuadmin.PollInterval')"
+                    v-model="dtuConfigList.pollinterval"
+                    type="number"
+                    min="1"
+                    max="86400"
+                    :postfix="$t('dtuadmin.Seconds')"
+                />
 
                 <div class="row mb-3" v-if="dtuConfigList.nrf_enabled">
                     <label for="inputNrfPaLevel" class="col-sm-2 col-form-label">
@@ -37,11 +45,16 @@
                     </label>
                     <div class="col-sm-10">
                         <div class="input-group mb-3">
-                            <input type="range" class="form-control form-range"
+                            <input
+                                type="range"
+                                class="form-control form-range"
                                 v-model="dtuConfigList.cmt_palevel"
-                                min="-10" max="20"
-                                id="inputCmtPaLevel" aria-describedby="basic-addon1"
-                                style="height: unset;" />
+                                min="-10"
+                                max="20"
+                                id="inputCmtPaLevel"
+                                aria-describedby="basic-addon1"
+                                style="height: unset"
+                            />
                             <span class="input-group-text" id="basic-addon1">{{ cmtPaLevelText }}</span>
                         </div>
                     </div>
@@ -55,7 +68,12 @@
                     <div class="col-sm-10">
                         <select id="inputCmtCountry" class="form-select" v-model="dtuConfigList.cmt_country">
                             <option v-for="(country, index) in dtuConfigList.country_def" :key="index" :value="index">
-                                {{ $t(`dtuadmin.country_` + index, {min: country.freq_min / 1e6, max: country.freq_max / 1e6}) }}
+                                {{
+                                    $t(`dtuadmin.country_` + index, {
+                                        min: country.freq_min / 1e6,
+                                        max: country.freq_max / 1e6,
+                                    })
+                                }}
                             </option>
                         </select>
                     </div>
@@ -68,30 +86,40 @@
                     </label>
                     <div class="col-sm-10">
                         <div class="input-group mb-3">
-                            <input type="range" class="form-control form-range"
+                            <input
+                                type="range"
+                                class="form-control form-range"
                                 v-model="dtuConfigList.cmt_frequency"
-                                :min="cmtMinFrequency" :max="cmtMaxFrequency" :step="dtuConfigList.cmt_chan_width"
-                                id="cmtFrequency" aria-describedby="basic-addon2"
-                                style="height: unset;" />
+                                :min="cmtMinFrequency"
+                                :max="cmtMaxFrequency"
+                                :step="dtuConfigList.cmt_chan_width"
+                                id="cmtFrequency"
+                                aria-describedby="basic-addon2"
+                                style="height: unset"
+                            />
                             <span class="input-group-text" id="basic-addon2">{{ cmtFrequencyText }}</span>
                         </div>
-                        <div class="alert alert-danger" role="alert" v-html="$t('dtuadmin.CmtFrequencyWarning')" v-if="cmtIsOutOfLegalRange"></div>
+                        <div
+                            class="alert alert-danger"
+                            role="alert"
+                            v-html="$t('dtuadmin.CmtFrequencyWarning')"
+                            v-if="cmtIsOutOfLegalRange"
+                        ></div>
                     </div>
                 </div>
-
             </CardElement>
-            <FormFooter @reload="getDtuConfig"/>
+            <FormFooter @reload="getDtuConfig" />
         </form>
     </BasePage>
 </template>
 
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
-import BootstrapAlert from "@/components/BootstrapAlert.vue";
+import BootstrapAlert from '@/components/BootstrapAlert.vue';
 import CardElement from '@/components/CardElement.vue';
 import FormFooter from '@/components/FormFooter.vue';
 import InputElement from '@/components/InputElement.vue';
-import type { DtuConfig } from "@/types/DtuConfig";
+import type { DtuConfig } from '@/types/DtuConfig';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { BIconInfoCircle } from 'bootstrap-icons-vue';
 import { defineComponent } from 'vue';
@@ -110,13 +138,13 @@ export default defineComponent({
             dataLoading: true,
             dtuConfigList: {} as DtuConfig,
             nrfpalevelList: [
-                { key: 0, value: 'Min', db: "-18" },
-                { key: 1, value: 'Low', db: "-12" },
-                { key: 2, value: 'High', db: "-6" },
-                { key: 3, value: 'Max', db: "0" },
+                { key: 0, value: 'Min', db: '-18' },
+                { key: 1, value: 'Low', db: '-12' },
+                { key: 2, value: 'High', db: '-6' },
+                { key: 3, value: 'Max', db: '0' },
             ],
-            alertMessage: "",
-            alertType: "info",
+            alertMessage: '',
+            alertType: 'info',
             showAlert: false,
         };
     },
@@ -125,10 +153,12 @@ export default defineComponent({
     },
     computed: {
         cmtFrequencyText() {
-            return this.$t("dtuadmin.MHz", { mhz: this.$n(this.dtuConfigList.cmt_frequency / 1000000, "decimalTwoDigits") });
+            return this.$t('dtuadmin.MHz', {
+                mhz: this.$n(this.dtuConfigList.cmt_frequency / 1000000, 'decimalTwoDigits'),
+            });
         },
         cmtPaLevelText() {
-            return this.$t("dtuadmin.dBm", { dbm: this.$n(this.dtuConfigList.cmt_palevel * 1) });
+            return this.$t('dtuadmin.dBm', { dbm: this.$n(this.dtuConfigList.cmt_palevel * 1) });
         },
         cmtMinFrequency() {
             return this.dtuConfigList.country_def[this.dtuConfigList.cmt_country].freq_min;
@@ -137,9 +167,13 @@ export default defineComponent({
             return this.dtuConfigList.country_def[this.dtuConfigList.cmt_country].freq_max;
         },
         cmtIsOutOfLegalRange() {
-            return this.dtuConfigList.cmt_frequency < this.dtuConfigList.country_def[this.dtuConfigList.cmt_country].freq_legal_min
-                || this.dtuConfigList.cmt_frequency > this.dtuConfigList.country_def[this.dtuConfigList.cmt_country].freq_legal_max;
-        }
+            return (
+                this.dtuConfigList.cmt_frequency <
+                    this.dtuConfigList.country_def[this.dtuConfigList.cmt_country].freq_legal_min ||
+                this.dtuConfigList.cmt_frequency >
+                    this.dtuConfigList.country_def[this.dtuConfigList.cmt_country].freq_legal_max
+            );
+        },
     },
     watch: {
         'dtuConfigList.cmt_country'(newValue, oldValue) {
@@ -149,39 +183,35 @@ export default defineComponent({
                     this.dtuConfigList.cmt_frequency = this.dtuConfigList.country_def[newValue].freq_default;
                 });
             }
-        }
+        },
     },
     methods: {
         getDtuConfig() {
             this.dataLoading = true;
-            fetch("/api/dtu/config", { headers: authHeader() })
+            fetch('/api/dtu/config', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (data) => {
-                        this.dtuConfigList = data;
-                        this.dataLoading = false;
-                    }
-                );
+                .then((data) => {
+                    this.dtuConfigList = data;
+                    this.dataLoading = false;
+                });
         },
         saveDtuConfig(e: Event) {
             e.preventDefault();
 
             const formData = new FormData();
-            formData.append("data", JSON.stringify(this.dtuConfigList));
+            formData.append('data', JSON.stringify(this.dtuConfigList));
 
-            fetch("/api/dtu/config", {
-                method: "POST",
+            fetch('/api/dtu/config', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (response) => {
-                        this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
-                        this.alertType = response.type;
-                        this.showAlert = true;
-                    }
-                );
+                .then((response) => {
+                    this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
+                    this.alertType = response.type;
+                    this.showAlert = true;
+                });
         },
     },
 });

webapp/src/views/FirmwareUpgradeView.vue

@@ -8,8 +8,11 @@
             </div>
         </div>
 
-        <CardElement :text="$t('firmwareupgrade.OtaError')" textVariant="text-bg-danger" center-content
-                     v-if="!loading && !uploading && OTAError != ''"
+        <CardElement
+            :text="$t('firmwareupgrade.OtaError')"
+            textVariant="text-bg-danger"
+            center-content
+            v-if="!loading && !uploading && OTAError != ''"
         >
             <p class="h1 mb-2">
                 <BIconExclamationCircleFill />
@@ -20,16 +23,17 @@
             </span>
             <br />
             <br />
-            <button class="btn btn-light" @click="clear">
-                <BIconArrowLeft /> {{ $t('firmwareupgrade.Back') }}
-            </button>
+            <button class="btn btn-light" @click="clear"><BIconArrowLeft /> {{ $t('firmwareupgrade.Back') }}</button>
             <button class="btn btn-primary" @click="retryOTA">
                 <BIconArrowRepeat /> {{ $t('firmwareupgrade.Retry') }}
             </button>
         </CardElement>
 
-        <CardElement :text="$t('firmwareupgrade.OtaStatus')" textVariant="text-bg-success" center-content
-                     v-else-if="!loading && !uploading && OTASuccess"
+        <CardElement
+            :text="$t('firmwareupgrade.OtaStatus')"
+            textVariant="text-bg-success"
+            center-content
+            v-else-if="!loading && !uploading && OTASuccess"
         >
             <span class="h1 mb-2">
                 <BIconCheckCircle />
@@ -44,25 +48,36 @@
             </div>
         </CardElement>
 
-        <CardElement :text="$t('firmwareupgrade.FirmwareUpload')" textVariant="text-bg-primary" center-content
-                     v-else-if="!loading && !uploading"
+        <CardElement
+            :text="$t('firmwareupgrade.FirmwareUpload')"
+            textVariant="text-bg-primary"
+            center-content
+            v-else-if="!loading && !uploading"
         >
             <div class="form-group pt-2 mt-3">
                 <input class="form-control" type="file" ref="file" accept=".bin,.bin.gz" @change="uploadOTA" />
             </div>
         </CardElement>
 
-        <CardElement :text="$t('firmwareupgrade.UploadProgress')" textVariant="text-bg-primary" center-content
-                     v-else-if="!loading && uploading"
+        <CardElement
+            :text="$t('firmwareupgrade.UploadProgress')"
+            textVariant="text-bg-primary"
+            center-content
+            v-else-if="!loading && uploading"
         >
             <div class="progress">
-                <div class="progress-bar" role="progressbar" :style="{ width: progress + '%' }"
-                    v-bind:aria-valuenow="progress" aria-valuemin="0" aria-valuemax="100">
+                <div
+                    class="progress-bar"
+                    role="progressbar"
+                    :style="{ width: progress + '%' }"
+                    v-bind:aria-valuenow="progress"
+                    aria-valuemin="0"
+                    aria-valuemax="100"
+                >
                     {{ progress }}%
                 </div>
             </div>
         </CardElement>
-
     </BasePage>
 </template>
 
@@ -70,13 +85,8 @@
 import BasePage from '@/components/BasePage.vue';
 import CardElement from '@/components/CardElement.vue';
 import { authHeader, isLoggedIn } from '@/utils/authentication';
-import {
-    BIconArrowLeft,
-    BIconArrowRepeat,
-    BIconCheckCircle,
-    BIconExclamationCircleFill
-} from 'bootstrap-icons-vue';
-import SparkMD5 from "spark-md5";
+import { BIconArrowLeft, BIconArrowRepeat, BIconCheckCircle, BIconExclamationCircleFill } from 'bootstrap-icons-vue';
+import SparkMD5 from 'spark-md5';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
@@ -93,11 +103,11 @@ export default defineComponent({
             loading: true,
             uploading: false,
             progress: 0,
-            OTAError: "",
+            OTAError: '',
             OTASuccess: false,
-            type: "firmware",
+            type: 'firmware',
             file: {} as Blob,
-            hostCheckInterval: 0
+            hostCheckInterval: 0,
         };
     },
     methods: {
@@ -124,8 +134,7 @@ export default defineComponent({
                 };
                 const loadNext = () => {
                     const start = currentChunk * chunkSize;
-                    const end =
-                        start + chunkSize >= file.size ? file.size : start + chunkSize;
+                    const end = start + chunkSize >= file.size ? file.size : start + chunkSize;
                     fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
                 };
                 loadNext();
@@ -141,7 +150,7 @@ export default defineComponent({
                 }
             }
             const request = new XMLHttpRequest();
-            request.addEventListener("load", () => {
+            request.addEventListener('load', () => {
                 // request.response will hold the response from the server
                 if (request.status === 200) {
                     this.OTASuccess = true;
@@ -155,56 +164,55 @@ export default defineComponent({
                 this.progress = 0;
             });
             // Upload progress
-            request.upload.addEventListener("progress", (e) => {
+            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 as string));
-                    formData.append("firmware", this.file, "firmware");
-                    request.open("post", "/api/firmware/update");
+                    formData.append('MD5', md5 as string);
+                    formData.append('firmware', this.file, 'firmware');
+                    request.open('post', '/api/firmware/update');
                     authHeader().forEach((value, key) => {
                         request.setRequestHeader(key, value);
                     });
                     request.send(formData);
                 })
                 .catch(() => {
-                    this.OTAError =
-                        "Unknown error while upload, check the console for details.";
+                    this.OTAError = 'Unknown error while upload, check the console for details.';
                     this.uploading = false;
                     this.progress = 0;
                 });
         },
         retryOTA() {
-            this.OTAError = "";
+            this.OTAError = '';
             this.OTASuccess = false;
             this.uploadOTA(null);
         },
         clear() {
-            this.OTAError = "";
+            this.OTAError = '';
             this.OTASuccess = false;
         },
         checkRemoteHostAndReload(): void {
             // Check if the browser is online
             if (navigator.onLine) {
-                const remoteHostUrl = "/api/system/status";
+                const remoteHostUrl = '/api/system/status';
 
                 // Use a simple fetch request to check if the remote host is reachable
                 fetch(remoteHostUrl, { method: 'GET' })
-                    .then(response => {
+                    .then((response) => {
                         // Check if the response status is OK (200-299 range)
                         if (response.ok) {
                             console.log('Remote host is available. Reloading page...');
                             clearInterval(this.hostCheckInterval);
                             this.hostCheckInterval = 0;
                             // Perform a page reload
-                            window.location.replace("/");
+                            window.location.replace('/');
                         } else {
                             console.log('Remote host is not reachable. Do something else if needed.');
                         }
                     })
-                    .catch(error => {
+                    .catch((error) => {
                         console.error('Error checking remote host:', error);
                     });
             } else {
@@ -214,12 +222,15 @@ export default defineComponent({
     },
     mounted() {
         if (!isLoggedIn()) {
-            this.$router.push({ path: "/login", query: { returnUrl: this.$router.currentRoute.value.fullPath } });
+            this.$router.push({
+                path: '/login',
+                query: { returnUrl: this.$router.currentRoute.value.fullPath },
+            });
         }
         this.loading = false;
     },
     unmounted() {
         clearInterval(this.hostCheckInterval);
-    }
+    },
 });
 </script>

webapp/src/views/HomeView.vue

@@ -1,5 +1,12 @@
 <template>
-    <BasePage :title="$t('home.LiveData')" :isLoading="dataLoading" :isWideScreen="true" :showWebSocket="true" :isWebsocketConnected="isWebsocketConnected" @reload="reloadData">
+    <BasePage
+        :title="$t('home.LiveData')"
+        :isLoading="dataLoading"
+        :isWideScreen="true"
+        :showWebSocket="true"
+        :isWebsocketConnected="isWebsocketConnected"
+        @reload="reloadData"
+    >
         <HintView :hints="liveData.hints" />
         <InverterTotalInfo :totalData="liveData.total" /><br />
         <div class="card">
@@ -9,16 +16,27 @@
             </div>
         </div>
         <div class="row gy-3">
-            <div class="col-sm-3 col-md-2" :style="[inverterData.length == 1 ? { 'display': 'none' } : {}]">
+            <div class="col-sm-3 col-md-2" :style="[inverterData.length == 1 ? { display: 'none' } : {}]">
                 <div class="nav nav-pills row-cols-sm-1" id="v-pills-tab" role="tablist" aria-orientation="vertical">
-                    <button v-for="inverter in inverterData" :key="inverter.serial" class="nav-link border border-primary text-break"
-                        :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">
+                    <button
+                        v-for="inverter in inverterData"
+                        :key="inverter.serial"
+                        class="nav-link border border-primary text-break"
+                        :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"
+                    >
                         <div class="row">
                             <div class="col-auto col-sm-2">
                                 <BIconXCircleFill class="fs-4" v-if="!inverter.reachable" />
-                                <BIconExclamationCircleFill class="fs-4" v-if="inverter.reachable && !inverter.producing" />
+                                <BIconExclamationCircleFill
+                                    class="fs-4"
+                                    v-if="inverter.reachable && !inverter.producing"
+                                />
                                 <BIconCheckCircleFill class="fs-4" v-if="inverter.reachable && inverter.producing" />
                             </div>
                             <div class="col-sm-9">
@@ -29,35 +47,50 @@
                 </div>
             </div>
 
-            <div class="tab-content" id="v-pills-tabContent" :class="{
-                'col-sm-9 col-md-10': inverterData.length > 1,
-                'col-sm-12 col-md-12': inverterData.length == 1
-            }">
-                <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="tab-content"
+                id="v-pills-tabContent"
+                :class="{
+                    'col-sm-9 col-md-10': inverterData.length > 1,
+                    'col-sm-12 col-md-12': inverterData.length == 1,
+                }"
+            >
+                <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 d-flex justify-content-between align-items-center" :class="{
-                            'text-bg-tertiary': !inverter.poll_enabled,
-                            'text-bg-danger': inverter.poll_enabled && !inverter.reachable,
-                            'text-bg-warning': inverter.poll_enabled && inverter.reachable && !inverter.producing,
-                            'text-bg-primary': inverter.poll_enabled && inverter.reachable && inverter.producing,
-                        }">
+                        <div
+                            class="card-header d-flex justify-content-between align-items-center"
+                            :class="{
+                                'text-bg-tertiary': !inverter.poll_enabled,
+                                'text-bg-danger': inverter.poll_enabled && !inverter.reachable,
+                                'text-bg-warning': inverter.poll_enabled && inverter.reachable && !inverter.producing,
+                                'text-bg-primary': inverter.poll_enabled && inverter.reachable && inverter.producing,
+                            }"
+                        >
                             <div class="p-1 flex-grow-1">
                                 <div class="d-flex flex-wrap">
-                                    <div style="padding-right: 2em;">
+                                    <div style="padding-right: 2em">
                                         {{ inverter.name }}
                                     </div>
-                                    <div style="padding-right: 2em;">
+                                    <div style="padding-right: 2em">
                                         {{ $t('home.SerialNumber') }}{{ inverter.serial }}
                                     </div>
-                                    <div style="padding-right: 2em;">
-                                        {{ $t('home.CurrentLimit') }}<template v-if="inverter.limit_absolute > -1"> {{
-                                            $n(inverter.limit_absolute, 'decimalNoDigits')
-                                        }} W | </template>{{ $n(inverter.limit_relative / 100, 'percent') }}
+                                    <div style="padding-right: 2em">
+                                        {{ $t('home.CurrentLimit')
+                                        }}<template v-if="inverter.limit_absolute > -1">
+                                            {{ $n(inverter.limit_absolute, 'decimalNoDigits') }} W | </template
+                                        >{{ $n(inverter.limit_relative / 100, 'percentOneDigit') }}
                                     </div>
-                                    <div style="padding-right: 2em;">
-                                        {{ $t('home.DataAge') }} {{ $t('home.Seconds', { 'val': $n(inverter.data_age) }) }}
+                                    <div style="padding-right: 2em">
+                                        {{ $t('home.DataAge') }}
+                                        {{ $t('home.Seconds', { val: $n(inverter.data_age) }) }}
                                         <template v-if="inverter.data_age > 300">
                                             / {{ calculateAbsoluteTime(inverter.data_age) }}
                                         </template>
@@ -66,48 +99,68 @@
                             </div>
                             <div class="btn-toolbar p-2" role="toolbar">
                                 <div class="btn-group me-2" role="group">
-                                    <button :disabled="!isLogged" type="button" class="btn btn-sm btn-danger"
-                                        @click="onShowLimitSettings(inverter.serial)" v-tooltip
-                                        :title="$t('home.ShowSetInverterLimit')">
-                                        <BIconSpeedometer style="font-size:24px;" />
-
+                                    <button
+                                        :disabled="!isLogged"
+                                        type="button"
+                                        class="btn btn-sm btn-danger"
+                                        @click="onShowLimitSettings(inverter.serial)"
+                                        v-tooltip
+                                        :title="$t('home.ShowSetInverterLimit')"
+                                    >
+                                        <BIconSpeedometer style="font-size: 24px" />
                                     </button>
                                 </div>
 
                                 <div class="btn-group me-2" role="group">
-                                    <button :disabled="!isLogged" type="button" class="btn btn-sm btn-danger"
-                                        @click="onShowPowerSettings(inverter.serial)" v-tooltip
-                                        :title="$t('home.TurnOnOff')">
-                                        <BIconPower style="font-size:24px;" />
-
+                                    <button
+                                        :disabled="!isLogged"
+                                        type="button"
+                                        class="btn btn-sm btn-danger"
+                                        @click="onShowPowerSettings(inverter.serial)"
+                                        v-tooltip
+                                        :title="$t('home.TurnOnOff')"
+                                    >
+                                        <BIconPower style="font-size: 24px" />
                                     </button>
                                 </div>
 
                                 <div class="btn-group me-2" role="group">
-                                    <button type="button" class="btn btn-sm btn-info"
-                                        @click="onShowDevInfo(inverter.serial)" v-tooltip
-                                        :title="$t('home.ShowInverterInfo')">
-                                        <BIconCpu style="font-size:24px;" />
-
+                                    <button
+                                        type="button"
+                                        class="btn btn-sm btn-info"
+                                        @click="onShowDevInfo(inverter.serial)"
+                                        v-tooltip
+                                        :title="$t('home.ShowInverterInfo')"
+                                    >
+                                        <BIconCpu style="font-size: 24px" />
                                     </button>
                                 </div>
 
                                 <div class="btn-group me-2" role="group">
-                                    <button type="button" class="btn btn-sm btn-info"
-                                        @click="onShowGridProfile(inverter.serial)" v-tooltip
-                                        :title="$t('home.ShowGridProfile')">
-                                        <BIconOutlet style="font-size:24px;" />
-
+                                    <button
+                                        type="button"
+                                        class="btn btn-sm btn-info"
+                                        @click="onShowGridProfile(inverter.serial)"
+                                        v-tooltip
+                                        :title="$t('home.ShowGridProfile')"
+                                    >
+                                        <BIconOutlet style="font-size: 24px" />
                                     </button>
                                 </div>
 
                                 <div class="btn-group" role="group">
-                                    <button v-if="inverter.events >= 0" type="button"
+                                    <button
+                                        v-if="inverter.events >= 0"
+                                        type="button"
                                         class="btn btn-sm btn-secondary position-relative"
-                                        @click="onShowEventlog(inverter.serial)" v-tooltip :title="$t('home.ShowEventlog')">
-                                        <BIconJournalText style="font-size:24px;" />
+                                        @click="onShowEventlog(inverter.serial)"
+                                        v-tooltip
+                                        :title="$t('home.ShowEventlog')"
+                                    >
+                                        <BIconJournalText style="font-size: 24px" />
                                         <span
-                                            class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger">
+                                            class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-danger"
+                                        >
                                             {{ inverter.events }}
                                             <span class="visually-hidden">{{ $t('home.UnreadMessages') }}</span>
                                         </span>
@@ -117,17 +170,37 @@
                         </div>
                         <div class="card-body">
                             <div class="row flex-row-reverse flex-wrap-reverse g-3">
-                                <template v-for="chanType in [{obj: inverter.INV, name: 'INV'}, {obj: inverter.AC, name: 'AC'}, {obj: inverter.DC, name: 'DC'}].reverse()">
+                                <template
+                                    v-for="chanType in [
+                                        { obj: inverter.INV, name: 'INV' },
+                                        { obj: inverter.AC, name: 'AC' },
+                                        { obj: inverter.DC, name: 'DC' },
+                                    ].reverse()"
+                                >
                                     <template v-if="chanType.obj != null">
-                                        <template v-for="channel in Object.keys(chanType.obj).sort().reverse().map(x=>+x)" :key="channel">
-                                            <template v-if="(chanType.name != 'DC') ||
-                                                (chanType.name == 'DC' && getSumIrridiation(inverter) == 0) ||
-                                                (chanType.name == 'DC' && getSumIrridiation(inverter) > 0 && chanType.obj[channel].Irradiation?.max || 0 > 0)
-                                                ">
+                                        <template
+                                            v-for="channel in Object.keys(chanType.obj)
+                                                .sort()
+                                                .reverse()
+                                                .map((x) => +x)"
+                                            :key="channel"
+                                        >
+                                            <template
+                                                v-if="
+                                                    chanType.name != 'DC' ||
+                                                    (chanType.name == 'DC' && getSumIrridiation(inverter) == 0) ||
+                                                    (chanType.name == 'DC' &&
+                                                        getSumIrridiation(inverter) > 0 &&
+                                                        chanType.obj[channel].Irradiation?.max) ||
+                                                    0 > 0
+                                                "
+                                            >
                                                 <div class="col">
-                                                    <InverterChannelInfo :channelData="chanType.obj[channel]"
+                                                    <InverterChannelInfo
+                                                        :channelData="chanType.obj[channel]"
                                                         :channelType="chanType.name"
-                                                        :channelNumber="channel" />
+                                                        :channelNumber="channel"
+                                                    />
                                                 </div>
                                             </template>
                                         </template>
@@ -167,20 +240,31 @@
         </BootstrapAlert>
 
         <div class="row mb-3">
-            <label for="inputCurrentLimit" class="col-sm-3 col-form-label">{{ $t('home.CurrentLimit') }}
-            </label>
+            <label for="inputCurrentLimit" class="col-sm-3 col-form-label">{{ $t('home.CurrentLimit') }} </label>
             <div class="col-sm-4">
                 <div class="input-group">
-                    <input type="text" class="form-control" id="inputCurrentLimit" aria-describedby="currentLimitType"
-                        v-model="currentLimitRelative" disabled />
+                    <input
+                        type="text"
+                        class="form-control"
+                        id="inputCurrentLimit"
+                        aria-describedby="currentLimitType"
+                        v-model="currentLimitRelative"
+                        disabled
+                    />
                     <span class="input-group-text" id="currentLimitType">%</span>
                 </div>
             </div>
 
             <div class="col-sm-4" v-if="currentLimitList.max_power > 0">
                 <div class="input-group">
-                    <input type="text" class="form-control" id="inputCurrentLimitAbsolute"
-                        aria-describedby="currentLimitTypeAbsolute" v-model="currentLimitAbsolute" disabled />
+                    <input
+                        type="text"
+                        class="form-control"
+                        id="inputCurrentLimitAbsolute"
+                        aria-describedby="currentLimitTypeAbsolute"
+                        v-model="currentLimitAbsolute"
+                        disabled
+                    />
                     <span class="input-group-text" id="currentLimitTypeAbsolute">W</span>
                 </div>
             </div>
@@ -191,45 +275,67 @@
                 {{ $t('home.LastLimitSetStatus') }}
             </label>
             <div class="col-sm-9">
-                <span class="badge" :class="{
-                    'text-bg-danger': currentLimitList.limit_set_status == 'Failure',
-                    'text-bg-warning': currentLimitList.limit_set_status == 'Pending',
-                    'text-bg-success': currentLimitList.limit_set_status == 'Ok',
-                    'text-bg-secondary': currentLimitList.limit_set_status == 'Unknown',
-                }">
+                <span
+                    class="badge"
+                    :class="{
+                        'text-bg-danger': currentLimitList.limit_set_status == 'Failure',
+                        'text-bg-warning': currentLimitList.limit_set_status == 'Pending',
+                        'text-bg-success': currentLimitList.limit_set_status == 'Ok',
+                        'text-bg-secondary': currentLimitList.limit_set_status == 'Unknown',
+                    }"
+                >
                     {{ $t('home.' + currentLimitList.limit_set_status) }}
                 </span>
             </div>
         </div>
 
         <div class="row mb-3">
-            <label for="inputTargetLimit" class="col-sm-3 col-form-label">{{ $t('home.SetLimit')
-            }}</label>
+            <label for="inputTargetLimit" class="col-sm-3 col-form-label">{{ $t('home.SetLimit') }}</label>
             <div class="col-sm-9">
                 <div class="input-group">
-                    <input type="number" name="inputTargetLimit" class="form-control" id="inputTargetLimit"
-                        :min="targetLimitMin" :max="targetLimitMax" v-model="targetLimitList.limit_value">
-                    <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown"
-                        aria-expanded="false">{{ targetLimitTypeText
-                        }}</button>
+                    <input
+                        type="number"
+                        name="inputTargetLimit"
+                        class="form-control"
+                        id="inputTargetLimit"
+                        :min="targetLimitMin"
+                        :max="targetLimitMax"
+                        v-model="targetLimitList.limit_value"
+                    />
+                    <button
+                        class="btn btn-primary dropdown-toggle"
+                        type="button"
+                        data-bs-toggle="dropdown"
+                        aria-expanded="false"
+                    >
+                        {{ targetLimitTypeText }}
+                    </button>
                     <ul class="dropdown-menu dropdown-menu-end">
-                        <li><a class="dropdown-item" @click="onSelectType(1)" href="#">{{
-                            $t('home.Relative') }}</a></li>
-                        <li><a class="dropdown-item" @click="onSelectType(0)" href="#">{{
-                            $t('home.Absolute') }}</a></li>
+                        <li>
+                            <a class="dropdown-item" @click="onSelectType(1)" href="#">{{ $t('home.Relative') }}</a>
+                        </li>
+                        <li>
+                            <a class="dropdown-item" @click="onSelectType(0)" href="#">{{ $t('home.Absolute') }}</a>
+                        </li>
                     </ul>
                 </div>
-                <div v-if="targetLimitType == 0" class="alert alert-secondary mt-3" role="alert"
-                    v-html="$t('home.LimitHint')"></div>
+                <div
+                    v-if="targetLimitType == 0"
+                    class="alert alert-secondary mt-3"
+                    role="alert"
+                    v-html="$t('home.LimitHint')"
+                ></div>
             </div>
         </div>
 
         <template #footer>
-            <button type="button" class="btn btn-danger" @click="onSetLimitSettings(true)">{{
-                $t('home.SetPersistent') }}</button>
+            <button type="button" class="btn btn-danger" @click="onSetLimitSettings(true)">
+                {{ $t('home.SetPersistent') }}
+            </button>
 
-            <button type="button" class="btn btn-danger" @click="onSetLimitSettings(false)">{{
-                $t('home.SetNonPersistent') }}</button>
+            <button type="button" class="btn btn-danger" @click="onSetLimitSettings(false)">
+                {{ $t('home.SetNonPersistent') }}
+            </button>
         </template>
     </ModalDialog>
 
@@ -239,15 +345,17 @@
         </BootstrapAlert>
 
         <div class="row mb-3 align-items-center">
-            <label for="inputLastPowerSet" class="col col-form-label">{{ $t('home.LastPowerSetStatus')
-            }}</label>
+            <label for="inputLastPowerSet" class="col col-form-label">{{ $t('home.LastPowerSetStatus') }}</label>
             <div class="col">
-                <span class="badge" :class="{
+                <span
+                    class="badge"
+                    :class="{
                         'text-bg-danger': successCommandPower == 'Failure',
                         'text-bg-warning': successCommandPower == 'Pending',
                         'text-bg-success': successCommandPower == 'Ok',
                         'text-bg-secondary': successCommandPower == 'Unknown',
-                    }">
+                    }"
+                >
                     {{ $t('home.' + successCommandPower) }}
                 </span>
             </div>
@@ -277,6 +385,7 @@ import HintView from '@/components/HintView.vue';
 import InverterChannelInfo from "@/components/InverterChannelInfo.vue";
 import BarChart from "@/components/BarChart.vue";
 import CalendarChart from "@/components/CalendarChart.vue";
+import InverterChannelInfo from '@/components/InverterChannelInfo.vue';
 import InverterTotalInfo from '@/components/InverterTotalInfo.vue';
 import ModalDialog from '@/components/ModalDialog.vue';
 import type { DevInfoStatus } from '@/types/DevInfoStatus';
@@ -299,7 +408,7 @@ import {
     BIconSpeedometer,
     BIconToggleOff,
     BIconToggleOn,
-    BIconXCircleFill
+    BIconXCircleFill,
 } from 'bootstrap-icons-vue';
 import { defineComponent } from 'vue';
 
@@ -360,17 +469,17 @@ export default defineComponent({
             targetLimitTypeText: this.$t('home.Relative'),
             targetLimitType: 1,
 
-            alertMessageLimit: "",
-            alertTypeLimit: "info",
+            alertMessageLimit: '',
+            alertTypeLimit: 'info',
             showAlertLimit: false,
 
             powerSettingView: {} as bootstrap.Modal,
-            powerSettingSerial: "",
+            powerSettingSerial: '',
             powerSettingLoading: true,
-            alertMessagePower: "",
-            alertTypePower: "info",
+            alertMessagePower: '',
+            alertTypePower: 'info',
             showAlertPower: false,
-            successCommandPower: "",
+            successCommandPower: '',
 
             isWebsocketConnected: false,
         };
@@ -379,10 +488,10 @@ export default defineComponent({
         this.getInitialData();
         this.initSocket();
         this.initDataAgeing();
-        this.$emitter.on("logged-in", () => {
+        this.$emitter.on('logged-in', () => {
             this.isLogged = this.isLoggedIn();
         });
-        this.$emitter.on("logged-out", () => {
+        this.$emitter.on('logged-out', () => {
             this.isLogged = this.isLoggedIn();
         });
     },
@@ -397,19 +506,17 @@ export default defineComponent({
         this.closeSocket();
     },
     updated() {
-        console.log("Updated");
+        console.log('Updated');
         // Select first tab
         if (this.isFirstFetchAfterConnect) {
-            console.log("isFirstFetchAfterConnect");
+            console.log('isFirstFetchAfterConnect');
 
             this.$nextTick(() => {
-                console.log("nextTick");
-                const firstTabEl = document.querySelector(
-                    "#v-pills-tab:first-child button"
-                );
+                console.log('nextTick');
+                const firstTabEl = document.querySelector('#v-pills-tab:first-child button');
                 if (firstTabEl != null) {
                     this.isFirstFetchAfterConnect = false;
-                    console.log("Show");
+                    console.log('Show');
                     const firstTab = new bootstrap.Tab(firstTabEl);
                     firstTab.show();
                 }
@@ -419,20 +526,21 @@ export default defineComponent({
     computed: {
         currentLimitAbsolute(): string {
             if (this.currentLimitList.max_power > 0) {
-                return this.$n(this.currentLimitList.limit_relative * this.currentLimitList.max_power / 100,
-                    'decimalTwoDigits');
+                return this.$n(
+                    (this.currentLimitList.limit_relative * this.currentLimitList.max_power) / 100,
+                    'decimalNoDigits'
+                );
             }
-            return "0";
+            return '0';
         },
         currentLimitRelative(): string {
-            return this.$n(this.currentLimitList.limit_relative,
-                'decimalTwoDigits');
+            return this.$n(this.currentLimitList.limit_relative, 'decimalOneDigit');
         },
         inverterData(): Inverter[] {
             return this.liveData.inverters.slice().sort((a: Inverter, b: Inverter) => {
                 return a.order - b.order;
             });
-        }
+        },
     },
     methods: {
         isLoggedIn,
@@ -440,7 +548,7 @@ export default defineComponent({
             if (triggerLoading) {
                 this.dataLoading = true;
             }
-            fetch("/api/livedata/status", { headers: authHeader() })
+            fetch('/api/livedata/status', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.liveData = data;
@@ -458,23 +566,24 @@ export default defineComponent({
             }, 1000);
         },
         initSocket() {
-            console.log("Starting connection to WebSocket Server");
+            console.log('Starting connection to WebSocket Server');
 
             const { protocol, host } = location;
             const authString = authUrl();
-            const webSocketUrl = `${protocol === "https:" ? "wss" : "ws"
-                }://${authString}${host}/livedata`;
+            const webSocketUrl = `${protocol === 'https:' ? 'wss' : 'ws'}://${authString}${host}/livedata`;
 
             this.socket = new WebSocket(webSocketUrl);
 
             this.socket.onmessage = (event) => {
                 console.log(event);
-                if (event.data != "{}") {
+                if (event.data != '{}') {
                     const newData = JSON.parse(event.data);
                     Object.assign(this.liveData.total, newData.total);
                     Object.assign(this.liveData.hints, newData.hints);
 
-                    const foundIdx = this.liveData.inverters.findIndex((element) => element.serial == newData.inverters[0].serial);
+                    const foundIdx = this.liveData.inverters.findIndex(
+                        (element) => element.serial == newData.inverters[0].serial
+                    );
                     if (foundIdx == -1) {
                         Object.assign(this.liveData.inverters, newData.inverters);
                     } else {
@@ -491,14 +600,14 @@ export default defineComponent({
 
             this.socket.onopen = (event) => {
                 console.log(event);
-                console.log("Successfully connected to the echo websocket server...");
+                console.log('Successfully connected to the echo websocket server...');
                 this.isWebsocketConnected = true;
             };
 
             this.socket.onclose = () => {
-                console.log("Connection to websocket closed...")
+                console.log('Connection to websocket closed...');
                 this.isWebsocketConnected = false;
-            }
+            };
 
             // Listen to window events , When the window closes , Take the initiative to disconnect websocket Connect
             window.onbeforeunload = () => {
@@ -508,7 +617,7 @@ export default defineComponent({
         initDataAgeing() {
             this.dataAgeInterval = setInterval(() => {
                 if (this.inverterData) {
-                    this.inverterData.forEach(element => {
+                    this.inverterData.forEach((element) => {
                         element.data_age++;
                     });
                 }
@@ -520,7 +629,7 @@ export default defineComponent({
             this.heartInterval = setInterval(() => {
                 if (this.socket.readyState === 1) {
                     // Connection status
-                    this.socket.send("ping");
+                    this.socket.send('ping');
                 } else {
                     this.initSocket(); // Breakpoint reconnection 5 Time
                 }
@@ -534,7 +643,9 @@ export default defineComponent({
         },
         onShowEventlog(serial: string) {
             this.eventLogLoading = true;
-            fetch("/api/eventlog/status?inv=" + serial + "&locale=" + this.$i18n.locale, { headers: authHeader() })
+            fetch('/api/eventlog/status?inv=' + serial + '&locale=' + this.$i18n.locale, {
+                headers: authHeader(),
+            })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.eventLogList = data;
@@ -545,7 +656,7 @@ export default defineComponent({
         },
         onShowDevInfo(serial: string) {
             this.devInfoLoading = true;
-            fetch("/api/devinfo/status?inv=" + serial, { headers: authHeader() })
+            fetch('/api/devinfo/status?inv=' + serial, { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.devInfoList = data;
@@ -557,30 +668,30 @@ export default defineComponent({
         },
         onShowGridProfile(serial: string) {
             this.gridProfileLoading = true;
-            fetch("/api/gridprofile/status?inv=" + serial, { headers: authHeader() })
+            fetch('/api/gridprofile/status?inv=' + serial, { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.gridProfileList = data;
 
-                    fetch("/api/gridprofile/rawdata?inv=" + serial, { headers: authHeader() })
+                    fetch('/api/gridprofile/rawdata?inv=' + serial, { headers: authHeader() })
                         .then((response) => handleResponse(response, this.$emitter, this.$router))
                         .then((data) => {
                             this.gridProfileRawList = data;
                             this.gridProfileLoading = false;
-                        })
+                        });
                 });
 
             this.gridProfileView.show();
         },
         onShowLimitSettings(serial: string) {
             this.showAlertLimit = false;
-            this.targetLimitList.serial = "";
+            this.targetLimitList.serial = '';
             this.targetLimitList.limit_value = 0;
             this.targetLimitType = 1;
             this.targetLimitTypeText = this.$t('home.Relative');
 
             this.limitSettingLoading = true;
-            fetch("/api/limit/status", { headers: authHeader() })
+            fetch('/api/limit/status', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.currentLimitList = data[serial];
@@ -591,29 +702,27 @@ export default defineComponent({
             this.limitSettingView.show();
         },
         onSetLimitSettings(setPersistent: boolean) {
-            this.targetLimitList.limit_type = (setPersistent ? 256 : 0) + this.targetLimitType
+            this.targetLimitList.limit_type = (setPersistent ? 256 : 0) + this.targetLimitType;
             const formData = new FormData();
-            formData.append("data", JSON.stringify(this.targetLimitList));
+            formData.append('data', JSON.stringify(this.targetLimitList));
 
             console.log(this.targetLimitList);
 
-            fetch("/api/limit/config", {
-                method: "POST",
+            fetch('/api/limit/config', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (response) => {
-                        if (response.type == "success") {
-                            this.limitSettingView.hide();
-                        } else {
-                            this.alertMessageLimit = this.$t('apiresponse.' + response.code, response.param);
-                            this.alertTypeLimit = response.type;
-                            this.showAlertLimit = true;
-                        }
+                .then((response) => {
+                    if (response.type == 'success') {
+                        this.limitSettingView.hide();
+                    } else {
+                        this.alertMessageLimit = this.$t('apiresponse.' + response.code, response.param);
+                        this.alertTypeLimit = response.type;
+                        this.showAlertLimit = true;
                     }
-                )
+                });
         },
         onSelectType(type: number) {
             if (type == 1) {
@@ -623,16 +732,16 @@ export default defineComponent({
             } else {
                 this.targetLimitTypeText = this.$t('home.Absolute');
                 this.targetLimitMin = 0;
-                this.targetLimitMax = (this.currentLimitList.max_power > 0 ? this.currentLimitList.max_power : 2250);
+                this.targetLimitMax = this.currentLimitList.max_power > 0 ? this.currentLimitList.max_power : 2250;
             }
             this.targetLimitType = type;
         },
 
         onShowPowerSettings(serial: string) {
             this.showAlertPower = false;
-            this.powerSettingSerial = "";
+            this.powerSettingSerial = '';
             this.powerSettingLoading = true;
-            fetch("/api/power/status", { headers: authHeader() })
+            fetch('/api/power/status', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.successCommandPower = data[serial].power_set_status;
@@ -657,27 +766,25 @@ export default defineComponent({
             }
 
             const formData = new FormData();
-            formData.append("data", JSON.stringify(data));
+            formData.append('data', JSON.stringify(data));
 
             console.log(data);
 
-            fetch("/api/power/config", {
-                method: "POST",
+            fetch('/api/power/config', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (response) => {
-                        if (response.type == "success") {
-                            this.powerSettingView.hide();
-                        } else {
-                            this.alertMessagePower = this.$t('apiresponse.' + response.code, response.param);
-                            this.alertTypePower = response.type;
-                            this.showAlertPower = true;
-                        }
+                .then((response) => {
+                    if (response.type == 'success') {
+                        this.powerSettingView.hide();
+                    } else {
+                        this.alertMessagePower = this.$t('apiresponse.' + response.code, response.param);
+                        this.alertTypePower = response.type;
+                        this.showAlertPower = true;
                     }
-                )
+                });
         },
         calculateAbsoluteTime(lastTime: number): string {
             const date = new Date(Date.now() - lastTime * 1000);
@@ -689,7 +796,7 @@ export default defineComponent({
                 total += inv.DC[key as unknown as number].Irradiation?.max || 0;
             });
             return total;
-        }
+        },
     },
 });
 </script>

webapp/src/views/InverterAdminView.vue

@@ -12,11 +12,18 @@
                 </div>
                 <div class="form-group">
                     <label>{{ $t('inverteradmin.Name') }}</label>
-                    <input v-model="newInverterData.name" type="text" class="form-control ml-sm-2 mr-sm-4 my-2"
-                        maxlength="31" required />
+                    <input
+                        v-model="newInverterData.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">{{ $t('inverteradmin.Add') }}</button>
+                    <button type="submit" class="btn btn-primary my-2">
+                        {{ $t('inverteradmin.Add') }}
+                    </button>
                 </div>
                 <div class="alert alert-secondary" role="alert" v-html="$t('inverteradmin.AddHint')"></div>
             </form>
@@ -39,23 +46,33 @@
                         <tr v-for="inverter in inverters" v-bind:key="inverter.id" :data-id="inverter.id">
                             <td><BIconGripHorizontal class="drag-handle" /></td>
                             <td>
-                                <span class="badge" :title="$t('inverteradmin.Receive')" :class="{
-                                    'text-bg-warning': !inverter.poll_enable_night,
-                                    'text-bg-dark': inverter.poll_enable_night,}"
-                                    ><BIconArrowDown v-if="inverter.poll_enable"  /></span>
+                                <span
+                                    class="badge"
+                                    :title="$t('inverteradmin.Receive')"
+                                    :class="{
+                                        'text-bg-warning': !inverter.poll_enable_night,
+                                        'text-bg-dark': inverter.poll_enable_night,
+                                    }"
+                                    ><BIconArrowDown v-if="inverter.poll_enable"
+                                /></span>
 
-                                <span class="badge" :title="$t('inverteradmin.Send')" :class="{
-                                    'text-bg-warning': !inverter.command_enable_night,
-                                    'text-bg-dark': inverter.command_enable_night,}"
-                                    ><BIconArrowUp v-if="inverter.command_enable" /></span>
+                                <span
+                                    class="badge"
+                                    :title="$t('inverteradmin.Send')"
+                                    :class="{
+                                        'text-bg-warning': !inverter.command_enable_night,
+                                        'text-bg-dark': inverter.command_enable_night,
+                                    }"
+                                    ><BIconArrowUp v-if="inverter.command_enable"
+                                /></span>
                             </td>
                             <td>{{ inverter.serial }}</td>
                             <td>{{ inverter.name }}</td>
                             <td>{{ inverter.type }}</td>
                             <td>
                                 <a href="#" class="icon text-danger" :title="$t('inverteradmin.DeleteInverter')">
-                                    <BIconTrash v-on:click="onOpenModal(modalDelete, inverter)" />
-                                </a>&nbsp;
+                                    <BIconTrash v-on:click="onOpenModal(modalDelete, inverter)" /> </a
+                                >&nbsp;
                                 <a href="#" class="icon" :title="$t('inverteradmin.EditInverter')">
                                     <BIconPencil v-on:click="onOpenModal(modal, inverter)" />
                                 </a>
@@ -65,54 +82,122 @@
                 </table>
             </div>
             <div class="ml-auto text-right">
-                <button class="btn btn-primary my-2" @click="onSaveOrder()">{{ $t('inverteradmin.SaveOrder') }}</button>
+                <button class="btn btn-primary my-2" @click="onSaveOrder()">
+                    {{ $t('inverteradmin.SaveOrder') }}
+                </button>
             </div>
         </CardElement>
     </BasePage>
 
-    <ModalDialog modalId="inverterEdit" :title="$t('inverteradmin.EditInverter')" :closeText="$t('inverteradmin.Cancel')">
+    <ModalDialog
+        modalId="inverterEdit"
+        :title="$t('inverteradmin.EditInverter')"
+        :closeText="$t('inverteradmin.Cancel')"
+    >
         <nav>
             <div class="nav nav-tabs" id="nav-tab" role="tablist">
-                <button class="nav-link active" id="nav-general-tab" data-bs-toggle="tab" data-bs-target="#nav-general"
-                    type="button" role="tab" aria-controls="nav-general" aria-selected="true">{{
-                        $t('inverteradmin.General')
-                    }}</button>
-                <button class="nav-link" id="nav-string-tab" data-bs-toggle="tab" data-bs-target="#nav-string" type="button"
-                    role="tab" aria-controls="nav-string">{{ $t('inverteradmin.String') }}</button>
-                <button class="nav-link" id="nav-advanced-tab" data-bs-toggle="tab" data-bs-target="#nav-advanced"
-                    type="button" role="tab" aria-controls="nav-advanced">{{ $t('inverteradmin.Advanced') }}</button>
+                <button
+                    class="nav-link active"
+                    id="nav-general-tab"
+                    data-bs-toggle="tab"
+                    data-bs-target="#nav-general"
+                    type="button"
+                    role="tab"
+                    aria-controls="nav-general"
+                    aria-selected="true"
+                >
+                    {{ $t('inverteradmin.General') }}
+                </button>
+                <button
+                    class="nav-link"
+                    id="nav-string-tab"
+                    data-bs-toggle="tab"
+                    data-bs-target="#nav-string"
+                    type="button"
+                    role="tab"
+                    aria-controls="nav-string"
+                >
+                    {{ $t('inverteradmin.String') }}
+                </button>
+                <button
+                    class="nav-link"
+                    id="nav-advanced-tab"
+                    data-bs-toggle="tab"
+                    data-bs-target="#nav-advanced"
+                    type="button"
+                    role="tab"
+                    aria-controls="nav-advanced"
+                >
+                    {{ $t('inverteradmin.Advanced') }}
+                </button>
             </div>
         </nav>
         <div class="tab-content" id="nav-tabContent">
-            <div class="tab-pane fade show active" id="nav-general" role="tabpanel" aria-labelledby="nav-general-tab"
-                tabindex="0">
+            <div
+                class="tab-pane fade show active"
+                id="nav-general"
+                role="tabpanel"
+                aria-labelledby="nav-general-tab"
+                tabindex="0"
+            >
                 <div class="mb-3">
                     <label for="inverter-serial" class="col-form-label">
                         {{ $t('inverteradmin.InverterSerial') }}
                     </label>
                     <InputSerial v-model="selectedInverterData.serial" id="inverter-serial" />
-                    <label for="inverter-name" class="col-form-label">{{ $t('inverteradmin.InverterName') }}
+                    <label for="inverter-name" class="col-form-label"
+                        >{{ $t('inverteradmin.InverterName') }}
                         <BIconInfoCircle v-tooltip :title="$t('inverteradmin.InverterNameHint')" />
                     </label>
-                    <input v-model="selectedInverterData.name" type="text" id="inverter-name" class="form-control"
-                        maxlength="31" />
+                    <input
+                        v-model="selectedInverterData.name"
+                        type="text"
+                        id="inverter-name"
+                        class="form-control"
+                        maxlength="31"
+                    />
 
                     <CardElement :text="$t('inverteradmin.InverterStatus')" addSpace>
-                        <InputElement :label="$t('inverteradmin.PollEnable')" v-model="selectedInverterData.poll_enable"
-                            type="checkbox" wide />
-                        <InputElement :label="$t('inverteradmin.PollEnableNight')"
-                            v-model="selectedInverterData.poll_enable_night" type="checkbox" wide />
-                        <InputElement :label="$t('inverteradmin.CommandEnable')"
-                            v-model="selectedInverterData.command_enable" type="checkbox" wide />
-                        <InputElement :label="$t('inverteradmin.CommandEnableNight')"
-                            v-model="selectedInverterData.command_enable_night" type="checkbox" wide />
-                        <div class="alert alert-secondary mt-3" role="alert" v-html="$t('inverteradmin.StatusHint')">
-                        </div>
+                        <InputElement
+                            :label="$t('inverteradmin.PollEnable')"
+                            v-model="selectedInverterData.poll_enable"
+                            type="checkbox"
+                            wide
+                        />
+                        <InputElement
+                            :label="$t('inverteradmin.PollEnableNight')"
+                            v-model="selectedInverterData.poll_enable_night"
+                            type="checkbox"
+                            wide
+                        />
+                        <InputElement
+                            :label="$t('inverteradmin.CommandEnable')"
+                            v-model="selectedInverterData.command_enable"
+                            type="checkbox"
+                            wide
+                        />
+                        <InputElement
+                            :label="$t('inverteradmin.CommandEnableNight')"
+                            v-model="selectedInverterData.command_enable_night"
+                            type="checkbox"
+                            wide
+                        />
+                        <div
+                            class="alert alert-secondary mt-3"
+                            role="alert"
+                            v-html="$t('inverteradmin.StatusHint')"
+                        ></div>
                     </CardElement>
                 </div>
             </div>
 
-            <div class="tab-pane fade show" id="nav-string" role="tabpanel" aria-labelledby="nav-string-tab" tabindex="0">
+            <div
+                class="tab-pane fade show"
+                id="nav-string"
+                role="tabpanel"
+                aria-labelledby="nav-string-tab"
+                tabindex="0"
+            >
                 <div v-for="(ch, index) in selectedInverterData.channel" :key="`${index}`">
                     <div class="row g-2">
                         <div class="col-md">
@@ -122,8 +207,13 @@
                             </label>
                             <div class="d-flex mb-2">
                                 <div class="input-group">
-                                    <input type="text" class="form-control" :id="`inverter-name_${index}`" maxlength="31"
-                                        v-model="ch.name" />
+                                    <input
+                                        type="text"
+                                        class="form-control"
+                                        :id="`inverter-name_${index}`"
+                                        maxlength="31"
+                                        v-model="ch.name"
+                                    />
                                 </div>
                             </div>
                         </div>
@@ -136,11 +226,17 @@
                             </label>
                             <div class="d-flex mb-2">
                                 <div class="input-group">
-                                    <input type="number" class="form-control" :id="`inverter-max_${index}`" min="0"
+                                    <input
+                                        type="number"
+                                        class="form-control"
+                                        :id="`inverter-max_${index}`"
+                                        min="0"
                                         v-model="ch.max_power"
-                                        :aria-describedby="`inverter-maxDescription_${index} inverter-customizer`" />
-                                    <span class="input-group-text"
-                                        :id="`inverter-maxDescription_${index}`">W<sub>p</sub><sup>*</sup></span>
+                                        :aria-describedby="`inverter-maxDescription_${index} inverter-customizer`"
+                                    />
+                                    <span class="input-group-text" :id="`inverter-maxDescription_${index}`"
+                                        >W<sub>p</sub><sup>*</sup></span
+                                    >
                                 </div>
                             </div>
                         </div>
@@ -151,61 +247,104 @@
                             </label>
                             <div class="d-flex mb-2">
                                 <div class="input-group">
-                                    <input type="number" class="form-control" :id="`inverter-ytoffset_${index}`" min="0"
+                                    <input
+                                        type="number"
+                                        class="form-control"
+                                        :id="`inverter-ytoffset_${index}`"
+                                        min="0"
                                         v-model="ch.yield_total_offset"
-                                        :aria-describedby="`inverter-ytoffsetDescription_${index} inverter-customizer`" />
-                                    <span class="input-group-text" :id="`inverter-ytoffsetDescription_${index}`">kWh</span>
+                                        :aria-describedby="`inverter-ytoffsetDescription_${index} inverter-customizer`"
+                                    />
+                                    <span class="input-group-text" :id="`inverter-ytoffsetDescription_${index}`"
+                                        >kWh</span
+                                    >
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div :id="`inverter-customizer`" class="form-text" v-html="$t('inverteradmin.InverterHint')">
-                </div>
+                <div :id="`inverter-customizer`" class="form-text" v-html="$t('inverteradmin.InverterHint')"></div>
             </div>
 
-            <div class="tab-pane fade show" id="nav-advanced" role="tabpanel" aria-labelledby="nav-advanced-tab"
-                tabindex="0">
-                <InputElement :label="$t('inverteradmin.ReachableThreshold')"
-                    v-model="selectedInverterData.reachable_threshold" type="number" min="1" max="100"
-                    :tooltip="$t('inverteradmin.ReachableThresholdHint')" wide />
+            <div
+                class="tab-pane fade show"
+                id="nav-advanced"
+                role="tabpanel"
+                aria-labelledby="nav-advanced-tab"
+                tabindex="0"
+            >
+                <InputElement
+                    :label="$t('inverteradmin.ReachableThreshold')"
+                    v-model="selectedInverterData.reachable_threshold"
+                    type="number"
+                    min="1"
+                    max="100"
+                    :tooltip="$t('inverteradmin.ReachableThresholdHint')"
+                    wide
+                />
 
-                <InputElement :label="$t('inverteradmin.ZeroRuntime')" v-model="selectedInverterData.zero_runtime"
-                    type="checkbox" :tooltip="$t('inverteradmin.ZeroRuntimeHint')" wide />
+                <InputElement
+                    :label="$t('inverteradmin.ZeroRuntime')"
+                    v-model="selectedInverterData.zero_runtime"
+                    type="checkbox"
+                    :tooltip="$t('inverteradmin.ZeroRuntimeHint')"
+                    wide
+                />
 
-                <InputElement :label="$t('inverteradmin.ZeroDay')" v-model="selectedInverterData.zero_day" type="checkbox"
-                    :tooltip="$t('inverteradmin.ZeroDayHint')" wide />
+                <InputElement
+                    :label="$t('inverteradmin.ZeroDay')"
+                    v-model="selectedInverterData.zero_day"
+                    type="checkbox"
+                    :tooltip="$t('inverteradmin.ZeroDayHint')"
+                    wide
+                />
 
-                <InputElement :label="$t('inverteradmin.ClearEventlog')" v-model="selectedInverterData.clear_eventlog" type="checkbox" wide />
+                <InputElement
+                    :label="$t('inverteradmin.ClearEventlog')"
+                    v-model="selectedInverterData.clear_eventlog"
+                    type="checkbox"
+                    wide
+                />
 
-                <InputElement :label="$t('inverteradmin.YieldDayCorrection')"
-                    v-model="selectedInverterData.yieldday_correction" type="checkbox"
-                    :tooltip="$t('inverteradmin.YieldDayCorrectionHint')" wide />
+                <InputElement
+                    :label="$t('inverteradmin.YieldDayCorrection')"
+                    v-model="selectedInverterData.yieldday_correction"
+                    type="checkbox"
+                    :tooltip="$t('inverteradmin.YieldDayCorrectionHint')"
+                    wide
+                />
             </div>
         </div>
         <template #footer>
             <button type="button" class="btn btn-primary" @click="onEditSubmit">
-                {{ $t('inverteradmin.Save') }}</button>
+                {{ $t('inverteradmin.Save') }}
+            </button>
         </template>
     </ModalDialog>
 
-    <ModalDialog modalId="inverterDelete" small :title="$t('inverteradmin.DeleteInverter')"
-        :closeText="$t('inverteradmin.Cancel')">
-        {{ $t('inverteradmin.DeleteMsg', {
-            name: selectedInverterData.name,
-            serial: selectedInverterData.serial
-        })
+    <ModalDialog
+        modalId="inverterDelete"
+        small
+        :title="$t('inverteradmin.DeleteInverter')"
+        :closeText="$t('inverteradmin.Cancel')"
+    >
+        {{
+            $t('inverteradmin.DeleteMsg', {
+                name: selectedInverterData.name,
+                serial: selectedInverterData.serial,
+            })
         }}
         <template #footer>
             <button type="button" class="btn btn-danger" @click="onDelete">
-                {{ $t('inverteradmin.Delete') }}</button>
+                {{ $t('inverteradmin.Delete') }}
+            </button>
         </template>
     </ModalDialog>
 </template>
 
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
-import BootstrapAlert from "@/components/BootstrapAlert.vue";
+import BootstrapAlert from '@/components/BootstrapAlert.vue';
 import CardElement from '@/components/CardElement.vue';
 import InputElement from '@/components/InputElement.vue';
 import InputSerial from '@/components/InputSerial.vue';
@@ -268,7 +407,7 @@ export default defineComponent({
     methods: {
         getInverters() {
             this.dataLoading = true;
-            fetch("/api/inverter/list", { headers: authHeader() })
+            fetch('/api/inverter/list', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.inverters = data.inverter.slice().sort((a: Inverter, b: Inverter) => {
@@ -290,10 +429,10 @@ export default defineComponent({
         },
         callInverterApiEndpoint(endpoint: string, jsonData: string) {
             const formData = new FormData();
-            formData.append("data", jsonData);
+            formData.append('data', jsonData);
 
-            fetch("/api/inverter/" + endpoint, {
-                method: "POST",
+            fetch('/api/inverter/' + endpoint, {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
@@ -306,15 +445,15 @@ export default defineComponent({
                 });
         },
         onSubmit() {
-            this.callInverterApiEndpoint("add", JSON.stringify(this.newInverterData));
+            this.callInverterApiEndpoint('add', JSON.stringify(this.newInverterData));
             this.newInverterData = {} as Inverter;
         },
         onDelete() {
-            this.callInverterApiEndpoint("del", JSON.stringify({ id: this.selectedInverterData.id }));
+            this.callInverterApiEndpoint('del', JSON.stringify({ id: this.selectedInverterData.id }));
             this.onCloseModal(this.modalDelete);
         },
         onEditSubmit() {
-            this.callInverterApiEndpoint("edit", JSON.stringify(this.selectedInverterData));
+            this.callInverterApiEndpoint('edit', JSON.stringify(this.selectedInverterData));
             this.onCloseModal(this.modal);
         },
         onOpenModal(modal: bootstrap.Modal, inverter: Inverter) {
@@ -326,7 +465,7 @@ export default defineComponent({
             modal.hide();
         },
         onSaveOrder() {
-            this.callInverterApiEndpoint("order", JSON.stringify({ order: this.sortable.toArray() }));
+            this.callInverterApiEndpoint('order', JSON.stringify({ order: this.sortable.toArray() }));
         },
     },
 });

webapp/src/views/LoginView.vue

@@ -8,20 +8,35 @@
             <form @submit.prevent="handleSubmit">
                 <div class="form-group">
                     <label for="username">{{ $t('login.Username') }}</label>
-                    <input type="text" v-model="username" name="username" class="form-control"
-                        :class="{ 'is-invalid': submitted && !username }" @keydown.space.prevent />
-                    <div v-show="submitted && !username" class="invalid-feedback">{{ $t('login.UsernameRequired') }}
+                    <input
+                        type="text"
+                        v-model="username"
+                        name="username"
+                        class="form-control"
+                        :class="{ 'is-invalid': submitted && !username }"
+                        @keydown.space.prevent
+                    />
+                    <div v-show="submitted && !username" class="invalid-feedback">
+                        {{ $t('login.UsernameRequired') }}
                     </div>
                 </div>
                 <div class="form-group">
                     <label htmlFor="password">{{ $t('login.Password') }}</label>
-                    <input type="password" v-model="password" name="password" class="form-control"
-                        :class="{ 'is-invalid': submitted && !password }" />
+                    <input
+                        type="password"
+                        v-model="password"
+                        name="password"
+                        class="form-control"
+                        :class="{ 'is-invalid': submitted && !password }"
+                    />
                     <div v-show="submitted && !password" class="invalid-feedback">
-                        {{ $t('login.PasswordRequired') }}</div>
+                        {{ $t('login.PasswordRequired') }}
+                    </div>
                 </div>
                 <div class="form-group">
-                    <button class="btn btn-primary" :disabled="dataLoading">{{ $t('login.LoginButton') }}</button>
+                    <button class="btn btn-primary" :disabled="dataLoading">
+                        {{ $t('login.LoginButton') }}
+                    </button>
                 </div>
             </form>
         </CardElement>
@@ -30,7 +45,7 @@
 
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
-import BootstrapAlert from "@/components/BootstrapAlert.vue";
+import BootstrapAlert from '@/components/BootstrapAlert.vue';
 import CardElement from '@/components/CardElement.vue';
 import router from '@/router';
 import { login } from '@/utils';
@@ -45,8 +60,8 @@ export default defineComponent({
     data() {
         return {
             dataLoading: false,
-            alertMessage: "",
-            alertType: "info",
+            alertMessage: '',
+            alertType: 'info',
             showAlert: false,
             returnUrl: '',
             username: '',
@@ -69,21 +84,20 @@ export default defineComponent({
             }
 
             this.dataLoading = true;
-            login(username, password)
-                .then(
-                    () => {
-                        this.$emitter.emit("logged-in");
-                        router.push(this.returnUrl);
-                    },
-                    error => {
-                        this.$emitter.emit("logged-out");
-                        this.alertMessage = error;
-                        this.alertType = 'danger';
-                        this.showAlert = true;
-                        this.dataLoading = false;
-                    }
-                )
-        }
-    }
+            login(username, password).then(
+                () => {
+                    this.$emitter.emit('logged-in');
+                    router.push(this.returnUrl);
+                },
+                (error) => {
+                    this.$emitter.emit('logged-out');
+                    this.alertMessage = error;
+                    this.alertType = 'danger';
+                    this.showAlert = true;
+                    this.dataLoading = false;
+                }
+            );
+        },
+    },
 });
 </script>

webapp/src/views/MaintenanceRebootView.vue

@@ -5,25 +5,32 @@
         </BootstrapAlert>
 
         <CardElement :text="$t('maintenancereboot.PerformReboot')" textVariant="text-bg-primary" center-content>
-            <button class="btn btn-danger" @click="onOpenModal(performReboot)">{{ $t('maintenancereboot.Reboot') }}
+            <button class="btn btn-danger" @click="onOpenModal(performReboot)">
+                {{ $t('maintenancereboot.Reboot') }}
             </button>
 
             <div class="alert alert-danger mt-3" role="alert" v-html="$t('maintenancereboot.RebootHint')"></div>
         </CardElement>
     </BasePage>
 
-    <ModalDialog modalId="performReboot" small :title="$t('maintenancereboot.RebootOpenDTU')" :closeText="$t('maintenancereboot.Cancel')">
+    <ModalDialog
+        modalId="performReboot"
+        small
+        :title="$t('maintenancereboot.RebootOpenDTU')"
+        :closeText="$t('maintenancereboot.Cancel')"
+    >
         {{ $t('maintenancereboot.RebootQuestion') }}
         <template #footer>
             <button type="button" class="btn btn-danger" @click="onReboot">
-                        {{ $t('maintenancereboot.Reboot') }}</button>
+                {{ $t('maintenancereboot.Reboot') }}
+            </button>
         </template>
     </ModalDialog>
 </template>
 
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
-import BootstrapAlert from "@/components/BootstrapAlert.vue";
+import BootstrapAlert from '@/components/BootstrapAlert.vue';
 import CardElement from '@/components/CardElement.vue';
 import ModalDialog from '@/components/ModalDialog.vue';
 import { authHeader, handleResponse, isLoggedIn } from '@/utils/authentication';
@@ -43,14 +50,17 @@ export default defineComponent({
 
             dataLoading: false,
 
-            alertMessage: "",
-            alertType: "info",
+            alertMessage: '',
+            alertType: 'info',
             showAlert: false,
         };
     },
     mounted() {
         if (!isLoggedIn()) {
-            this.$router.push({ path: "/login", query: { returnUrl: this.$router.currentRoute.value.fullPath } });
+            this.$router.push({
+                path: '/login',
+                query: { returnUrl: this.$router.currentRoute.value.fullPath },
+            });
         }
 
         this.performReboot = new bootstrap.Modal('#performReboot');
@@ -58,10 +68,10 @@ export default defineComponent({
     methods: {
         onReboot() {
             const formData = new FormData();
-            formData.append("data", JSON.stringify({ reboot: true }));
+            formData.append('data', JSON.stringify({ reboot: true }));
 
-            fetch("/api/maintenance/reboot", {
-                method: "POST",
+            fetch('/api/maintenance/reboot', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
@@ -78,7 +88,7 @@ export default defineComponent({
         },
         onCloseModal(modal: bootstrap.Modal) {
             modal.hide();
-        }
+        },
     },
 });
 </script>

webapp/src/views/MqttAdminView.vue

@@ -6,98 +6,163 @@
 
         <form @submit="saveMqttConfig">
             <CardElement :text="$t('mqttadmin.MqttConfiguration')" textVariant="text-bg-primary">
-                <InputElement :label="$t('mqttadmin.EnableMqtt')"
-                              v-model="mqttConfigList.mqtt_enabled"
-                              type="checkbox" wide/>
+                <InputElement
+                    :label="$t('mqttadmin.EnableMqtt')"
+                    v-model="mqttConfigList.mqtt_enabled"
+                    type="checkbox"
+                    wide
+                />
 
-                <InputElement v-show="mqttConfigList.mqtt_enabled"
-                              :label="$t('mqttadmin.EnableHass')"
-                              v-model="mqttConfigList.mqtt_hass_enabled"
-                              type="checkbox" wide/>
+                <InputElement
+                    v-show="mqttConfigList.mqtt_enabled"
+                    :label="$t('mqttadmin.EnableHass')"
+                    v-model="mqttConfigList.mqtt_hass_enabled"
+                    type="checkbox"
+                    wide
+                />
             </CardElement>
 
-            <CardElement :text="$t('mqttadmin.MqttBrokerParameter')" textVariant="text-bg-primary" add-space
-                         v-show="mqttConfigList.mqtt_enabled"
+            <CardElement
+                :text="$t('mqttadmin.MqttBrokerParameter')"
+                textVariant="text-bg-primary"
+                add-space
+                v-show="mqttConfigList.mqtt_enabled"
             >
-                <InputElement :label="$t('mqttadmin.Hostname')"
-                              v-model="mqttConfigList.mqtt_hostname"
-                              type="text" maxlength="128"
-                              :placeholder="$t('mqttadmin.HostnameHint')"/>
+                <InputElement
+                    :label="$t('mqttadmin.Hostname')"
+                    v-model="mqttConfigList.mqtt_hostname"
+                    type="text"
+                    maxlength="128"
+                    :placeholder="$t('mqttadmin.HostnameHint')"
+                />
 
-                <InputElement :label="$t('mqttadmin.Port')"
-                              v-model="mqttConfigList.mqtt_port"
-                              type="number" min="1" max="65535"/>
+                <InputElement
+                    :label="$t('mqttadmin.Port')"
+                    v-model="mqttConfigList.mqtt_port"
+                    type="number"
+                    min="1"
+                    max="65535"
+                />
 
-                <InputElement :label="$t('mqttadmin.Username')"
-                              v-model="mqttConfigList.mqtt_username"
-                              type="text" maxlength="64"
-                              :placeholder="$t('mqttadmin.UsernameHint')"/>
+                <InputElement
+                    :label="$t('mqttadmin.ClientId')"
+                    v-model="mqttConfigList.mqtt_clientid"
+                    type="text"
+                    maxlength="64"
+                />
 
-                <InputElement :label="$t('mqttadmin.Password')"
-                              v-model="mqttConfigList.mqtt_password"
-                              type="password" maxlength="64"
-                              :placeholder="$t('mqttadmin.PasswordHint')"/>
+                <InputElement
+                    :label="$t('mqttadmin.Username')"
+                    v-model="mqttConfigList.mqtt_username"
+                    type="text"
+                    maxlength="64"
+                    :placeholder="$t('mqttadmin.UsernameHint')"
+                />
 
-                <InputElement :label="$t('mqttadmin.BaseTopic')"
-                              v-model="mqttConfigList.mqtt_topic"
-                              type="text" maxlength="32"
-                              :placeholder="$t('mqttadmin.BaseTopicHint')"/>
+                <InputElement
+                    :label="$t('mqttadmin.Password')"
+                    v-model="mqttConfigList.mqtt_password"
+                    type="password"
+                    maxlength="64"
+                    :placeholder="$t('mqttadmin.PasswordHint')"
+                />
 
-                <InputElement :label="$t('mqttadmin.PublishInterval')"
-                              v-model="mqttConfigList.mqtt_publish_interval"
-                              type="number" min="5" max="86400"
-                              :postfix="$t('mqttadmin.Seconds')"/>
+                <InputElement
+                    :label="$t('mqttadmin.BaseTopic')"
+                    v-model="mqttConfigList.mqtt_topic"
+                    type="text"
+                    maxlength="32"
+                    :placeholder="$t('mqttadmin.BaseTopicHint')"
+                />
 
-                <InputElement :label="$t('mqttadmin.CleanSession')"
-                              v-model="mqttConfigList.mqtt_clean_session"
-                              type="checkbox"/>
+                <InputElement
+                    :label="$t('mqttadmin.PublishInterval')"
+                    v-model="mqttConfigList.mqtt_publish_interval"
+                    type="number"
+                    min="5"
+                    max="86400"
+                    :postfix="$t('mqttadmin.Seconds')"
+                />
 
-                <InputElement :label="$t('mqttadmin.EnableRetain')"
-                              v-model="mqttConfigList.mqtt_retain"
-                              type="checkbox"/>
+                <InputElement
+                    :label="$t('mqttadmin.CleanSession')"
+                    v-model="mqttConfigList.mqtt_clean_session"
+                    type="checkbox"
+                />
 
-                <InputElement :label="$t('mqttadmin.EnableTls')"
-                              v-model="mqttConfigList.mqtt_tls"
-                              type="checkbox"/>
+                <InputElement
+                    :label="$t('mqttadmin.EnableRetain')"
+                    v-model="mqttConfigList.mqtt_retain"
+                    type="checkbox"
+                />
 
-                <InputElement v-show="mqttConfigList.mqtt_tls"
-                              :label="$t('mqttadmin.RootCa')"
-                              v-model="mqttConfigList.mqtt_root_ca_cert"
-                              type="textarea" maxlength="2560" rows="10"/>
+                <InputElement :label="$t('mqttadmin.EnableTls')" v-model="mqttConfigList.mqtt_tls" type="checkbox" />
 
-                <InputElement v-show="mqttConfigList.mqtt_tls"
-                              :label="$t('mqttadmin.TlsCertLoginEnable')"
-                              v-model="mqttConfigList.mqtt_tls_cert_login"
-                              type="checkbox"/>
+                <InputElement
+                    v-show="mqttConfigList.mqtt_tls"
+                    :label="$t('mqttadmin.RootCa')"
+                    v-model="mqttConfigList.mqtt_root_ca_cert"
+                    type="textarea"
+                    maxlength="2560"
+                    rows="10"
+                />
 
-                <InputElement v-show="mqttConfigList.mqtt_tls_cert_login"
-                              :label="$t('mqttadmin.ClientCert')"
-                              v-model="mqttConfigList.mqtt_client_cert"
-                              type="textarea" maxlength="2560" rows="10"/>
+                <InputElement
+                    v-show="mqttConfigList.mqtt_tls"
+                    :label="$t('mqttadmin.TlsCertLoginEnable')"
+                    v-model="mqttConfigList.mqtt_tls_cert_login"
+                    type="checkbox"
+                />
 
-                <InputElement v-show="mqttConfigList.mqtt_tls_cert_login"
-                              :label="$t('mqttadmin.ClientKey')"
-                              v-model="mqttConfigList.mqtt_client_key"
-                              type="textarea" maxlength="2560" rows="10"/>
+                <InputElement
+                    v-show="mqttConfigList.mqtt_tls_cert_login"
+                    :label="$t('mqttadmin.ClientCert')"
+                    v-model="mqttConfigList.mqtt_client_cert"
+                    type="textarea"
+                    maxlength="2560"
+                    rows="10"
+                />
+
+                <InputElement
+                    v-show="mqttConfigList.mqtt_tls_cert_login"
+                    :label="$t('mqttadmin.ClientKey')"
+                    v-model="mqttConfigList.mqtt_client_key"
+                    type="textarea"
+                    maxlength="2560"
+                    rows="10"
+                />
             </CardElement>
 
-            <CardElement :text="$t('mqttadmin.LwtParameters')" textVariant="text-bg-primary" add-space
-                         v-show="mqttConfigList.mqtt_enabled"
+            <CardElement
+                :text="$t('mqttadmin.LwtParameters')"
+                textVariant="text-bg-primary"
+                add-space
+                v-show="mqttConfigList.mqtt_enabled"
             >
-                <InputElement :label="$t('mqttadmin.LwtTopic')"
-                              v-model="mqttConfigList.mqtt_lwt_topic"
-                              type="text" maxlength="32" :prefix="mqttConfigList.mqtt_topic"
-                              :placeholder="$t('mqttadmin.LwtTopicHint')"/>
+                <InputElement
+                    :label="$t('mqttadmin.LwtTopic')"
+                    v-model="mqttConfigList.mqtt_lwt_topic"
+                    type="text"
+                    maxlength="32"
+                    :prefix="mqttConfigList.mqtt_topic"
+                    :placeholder="$t('mqttadmin.LwtTopicHint')"
+                />
 
-                <InputElement :label="$t('mqttadmin.LwtOnline')"
-                              v-model="mqttConfigList.mqtt_lwt_online"
-                              type="text" maxlength="20"
-                              :placeholder="$t('mqttadmin.LwtOnlineHint')"/>
+                <InputElement
+                    :label="$t('mqttadmin.LwtOnline')"
+                    v-model="mqttConfigList.mqtt_lwt_online"
+                    type="text"
+                    maxlength="20"
+                    :placeholder="$t('mqttadmin.LwtOnlineHint')"
+                />
 
-                <InputElement :label="$t('mqttadmin.LwtOffline')"
-                              v-model="mqttConfigList.mqtt_lwt_offline"
-                              type="text" maxlength="20"
-                              :placeholder="$t('mqttadmin.LwtOfflineHint')"/>
+                <InputElement
+                    :label="$t('mqttadmin.LwtOffline')"
+                    v-model="mqttConfigList.mqtt_lwt_offline"
+                    type="text"
+                    maxlength="20"
+                    :placeholder="$t('mqttadmin.LwtOfflineHint')"
+                />
 
                 <div class="row mb-3">
                     <label class="col-sm-2 col-form-label">
@@ -113,39 +178,51 @@
                 </div>
             </CardElement>
 
-            <CardElement :text="$t('mqttadmin.HassParameters')" textVariant="text-bg-primary" add-space
-                         v-show="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled"
+            <CardElement
+                :text="$t('mqttadmin.HassParameters')"
+                textVariant="text-bg-primary"
+                add-space
+                v-show="mqttConfigList.mqtt_enabled && mqttConfigList.mqtt_hass_enabled"
             >
-                <InputElement :label="$t('mqttadmin.HassPrefixTopic')"
-                              v-model="mqttConfigList.mqtt_hass_topic"
-                              type="text" maxlength="32"
-                              :placeholder="$t('mqttadmin.HassPrefixTopicHint')"/>
+                <InputElement
+                    :label="$t('mqttadmin.HassPrefixTopic')"
+                    v-model="mqttConfigList.mqtt_hass_topic"
+                    type="text"
+                    maxlength="32"
+                    :placeholder="$t('mqttadmin.HassPrefixTopicHint')"
+                />
 
-                <InputElement :label="$t('mqttadmin.HassRetain')"
-                              v-model="mqttConfigList.mqtt_hass_retain"
-                              type="checkbox"/>
+                <InputElement
+                    :label="$t('mqttadmin.HassRetain')"
+                    v-model="mqttConfigList.mqtt_hass_retain"
+                    type="checkbox"
+                />
 
-                <InputElement :label="$t('mqttadmin.HassExpire')"
-                              v-model="mqttConfigList.mqtt_hass_expire"
-                              type="checkbox"/>
+                <InputElement
+                    :label="$t('mqttadmin.HassExpire')"
+                    v-model="mqttConfigList.mqtt_hass_expire"
+                    type="checkbox"
+                />
 
-                <InputElement :label="$t('mqttadmin.HassIndividual')"
-                              v-model="mqttConfigList.mqtt_hass_individualpanels"
-                              type="checkbox"/>
+                <InputElement
+                    :label="$t('mqttadmin.HassIndividual')"
+                    v-model="mqttConfigList.mqtt_hass_individualpanels"
+                    type="checkbox"
+                />
             </CardElement>
 
-            <FormFooter @reload="getMqttConfig"/>
+            <FormFooter @reload="getMqttConfig" />
         </form>
     </BasePage>
 </template>
 
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
-import BootstrapAlert from "@/components/BootstrapAlert.vue";
+import BootstrapAlert from '@/components/BootstrapAlert.vue';
 import CardElement from '@/components/CardElement.vue';
 import FormFooter from '@/components/FormFooter.vue';
 import InputElement from '@/components/InputElement.vue';
-import type { MqttConfig } from "@/types/MqttConfig";
+import type { MqttConfig } from '@/types/MqttConfig';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { defineComponent } from 'vue';
 
@@ -161,8 +238,8 @@ export default defineComponent({
         return {
             dataLoading: true,
             mqttConfigList: {} as MqttConfig,
-            alertMessage: "",
-            alertType: "info",
+            alertMessage: '',
+            alertType: 'info',
             showAlert: false,
             qosTypeList: [
                 { key: 0, value: 'QOS0' },
@@ -177,7 +254,7 @@ export default defineComponent({
     methods: {
         getMqttConfig() {
             this.dataLoading = true;
-            fetch("/api/mqtt/config", { headers: authHeader() })
+            fetch('/api/mqtt/config', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.mqttConfigList = data;
@@ -188,21 +265,19 @@ export default defineComponent({
             e.preventDefault();
 
             const formData = new FormData();
-            formData.append("data", JSON.stringify(this.mqttConfigList));
+            formData.append('data', JSON.stringify(this.mqttConfigList));
 
-            fetch("/api/mqtt/config", {
-                method: "POST",
+            fetch('/api/mqtt/config', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (response) => {
-                        this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
-                        this.alertType = response.type;
-                        this.showAlert = true;
-                    }
-                );
+                .then((response) => {
+                    this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
+                    this.alertType = response.type;
+                    this.showAlert = true;
+                });
         },
     },
 });

webapp/src/views/MqttInfoView.vue

@@ -1,5 +1,10 @@
 <template>
-    <BasePage :title="$t('mqttinfo.MqttInformation')" :isLoading="dataLoading" :show-reload="true" @reload="getMqttInfo">
+    <BasePage
+        :title="$t('mqttinfo.MqttInformation')"
+        :isLoading="dataLoading"
+        :show-reload="true"
+        @reload="getMqttInfo"
+    >
         <CardElement :text="$t('mqttinfo.ConfigurationSummary')" textVariant="text-bg-primary">
             <div class="table-responsive">
                 <table class="table table-hover table-condensed">
@@ -7,7 +12,11 @@
                         <tr>
                             <th>{{ $t('mqttinfo.Status') }}</th>
                             <td>
-                                <StatusBadge :status="mqttDataList.mqtt_enabled" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
+                                <StatusBadge
+                                    :status="mqttDataList.mqtt_enabled"
+                                    true_text="mqttinfo.Enabled"
+                                    false_text="mqttinfo.Disabled"
+                                />
                             </td>
                         </tr>
                         <tr>
@@ -18,6 +27,10 @@
                             <th>{{ $t('mqttinfo.Port') }}</th>
                             <td>{{ mqttDataList.mqtt_port }}</td>
                         </tr>
+                        <tr>
+                            <th>{{ $t('mqttinfo.ClientId') }}</th>
+                            <td>{{ mqttDataList.mqtt_clientid }}</td>
+                        </tr>
                         <tr>
                             <th>{{ $t('mqttinfo.Username') }}</th>
                             <td>{{ mqttDataList.mqtt_username }}</td>
@@ -28,24 +41,42 @@
                         </tr>
                         <tr>
                             <th>{{ $t('mqttinfo.PublishInterval') }}</th>
-                            <td>{{ $t('mqttinfo.Seconds', { sec: mqttDataList.mqtt_publish_interval }) }}</td>
+                            <td>
+                                {{
+                                    $t('mqttinfo.Seconds', {
+                                        sec: mqttDataList.mqtt_publish_interval,
+                                    })
+                                }}
+                            </td>
                         </tr>
                         <tr>
                             <th>{{ $t('mqttinfo.CleanSession') }}</th>
                             <td>
-                                <StatusBadge :status="mqttDataList.mqtt_clean_session" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
+                                <StatusBadge
+                                    :status="mqttDataList.mqtt_clean_session"
+                                    true_text="mqttinfo.Enabled"
+                                    false_text="mqttinfo.Disabled"
+                                />
                             </td>
                         </tr>
                         <tr>
                             <th>{{ $t('mqttinfo.Retain') }}</th>
                             <td>
-                                <StatusBadge :status="mqttDataList.mqtt_retain" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
+                                <StatusBadge
+                                    :status="mqttDataList.mqtt_retain"
+                                    true_text="mqttinfo.Enabled"
+                                    false_text="mqttinfo.Disabled"
+                                />
                             </td>
                         </tr>
                         <tr>
                             <th>{{ $t('mqttinfo.Tls') }}</th>
                             <td>
-                                <StatusBadge :status="mqttDataList.mqtt_tls" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
+                                <StatusBadge
+                                    :status="mqttDataList.mqtt_tls"
+                                    true_text="mqttinfo.Enabled"
+                                    false_text="mqttinfo.Disabled"
+                                />
                             </td>
                         </tr>
                         <tr v-show="mqttDataList.mqtt_tls">
@@ -55,7 +86,11 @@
                         <tr>
                             <th>{{ $t('mqttinfo.TlsCertLogin') }}</th>
                             <td>
-                                <StatusBadge :status="mqttDataList.mqtt_tls_cert_login" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
+                                <StatusBadge
+                                    :status="mqttDataList.mqtt_tls_cert_login"
+                                    true_text="mqttinfo.Enabled"
+                                    false_text="mqttinfo.Disabled"
+                                />
                             </td>
                         </tr>
                         <tr v-show="mqttDataList.mqtt_tls_cert_login">
@@ -74,7 +109,11 @@
                         <tr>
                             <th>{{ $t('mqttinfo.Status') }}</th>
                             <td>
-                                <StatusBadge :status="mqttDataList.mqtt_hass_enabled" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
+                                <StatusBadge
+                                    :status="mqttDataList.mqtt_hass_enabled"
+                                    true_text="mqttinfo.Enabled"
+                                    false_text="mqttinfo.Disabled"
+                                />
                             </td>
                         </tr>
                         <tr>
@@ -84,19 +123,31 @@
                         <tr>
                             <th>{{ $t('mqttinfo.Retain') }}</th>
                             <td>
-                                <StatusBadge :status="mqttDataList.mqtt_hass_retain" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
+                                <StatusBadge
+                                    :status="mqttDataList.mqtt_hass_retain"
+                                    true_text="mqttinfo.Enabled"
+                                    false_text="mqttinfo.Disabled"
+                                />
                             </td>
                         </tr>
                         <tr>
                             <th>{{ $t('mqttinfo.Expire') }}</th>
                             <td>
-                                <StatusBadge :status="mqttDataList.mqtt_hass_expire" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
+                                <StatusBadge
+                                    :status="mqttDataList.mqtt_hass_expire"
+                                    true_text="mqttinfo.Enabled"
+                                    false_text="mqttinfo.Disabled"
+                                />
                             </td>
                         </tr>
                         <tr>
                             <th>{{ $t('mqttinfo.IndividualPanels') }}</th>
                             <td>
-                                <StatusBadge :status="mqttDataList.mqtt_hass_individualpanels" true_text="mqttinfo.Enabled" false_text="mqttinfo.Disabled" />
+                                <StatusBadge
+                                    :status="mqttDataList.mqtt_hass_individualpanels"
+                                    true_text="mqttinfo.Enabled"
+                                    false_text="mqttinfo.Disabled"
+                                />
                             </td>
                         </tr>
                     </tbody>
@@ -111,7 +162,11 @@
                         <tr>
                             <th>{{ $t('mqttinfo.ConnectionStatus') }}</th>
                             <td>
-                                <StatusBadge :status="mqttDataList.mqtt_connected" true_text="mqttinfo.Connected" false_text="mqttinfo.Disconnected" />
+                                <StatusBadge
+                                    :status="mqttDataList.mqtt_connected"
+                                    true_text="mqttinfo.Connected"
+                                    false_text="mqttinfo.Disconnected"
+                                />
                             </td>
                         </tr>
                     </tbody>
@@ -133,7 +188,7 @@ export default defineComponent({
     components: {
         BasePage,
         CardElement,
-        StatusBadge
+        StatusBadge,
     },
     data() {
         return {
@@ -147,7 +202,7 @@ export default defineComponent({
     methods: {
         getMqttInfo() {
             this.dataLoading = true;
-            fetch("/api/mqtt/status", { headers: authHeader() })
+            fetch('/api/mqtt/status', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.mqttDataList = data;

webapp/src/views/NetworkAdminView.vue

@@ -6,75 +6,105 @@
 
         <form @submit="saveNetworkConfig">
             <CardElement :text="$t('networkadmin.WifiConfiguration')" textVariant="text-bg-primary">
-                <InputElement :label="$t('networkadmin.WifiSsid')"
-                              v-model="networkConfigList.ssid"
-                              type="text" maxlength="32"/>
+                <InputElement
+                    :label="$t('networkadmin.WifiSsid')"
+                    v-model="networkConfigList.ssid"
+                    type="text"
+                    maxlength="32"
+                />
 
-                <InputElement :label="$t('networkadmin.WifiPassword')"
-                              v-model="networkConfigList.password"
-                              type="password" maxlength="64"/>
+                <InputElement
+                    :label="$t('networkadmin.WifiPassword')"
+                    v-model="networkConfigList.password"
+                    type="password"
+                    maxlength="64"
+                />
 
-                <InputElement :label="$t('networkadmin.Hostname')"
-                              v-model="networkConfigList.hostname"
-                              type="text" maxlength="32"
+                <InputElement
+                    :label="$t('networkadmin.Hostname')"
+                    v-model="networkConfigList.hostname"
+                    type="text"
+                    maxlength="32"
                 >
                     <div class="alert alert-secondary" role="alert" v-html="$t('networkadmin.HostnameHint')"></div>
                 </InputElement>
 
-                <InputElement :label="$t('networkadmin.EnableDhcp')"
-                              v-model="networkConfigList.dhcp"
-                              type="checkbox"/>
+                <InputElement :label="$t('networkadmin.EnableDhcp')" v-model="networkConfigList.dhcp" type="checkbox" />
             </CardElement>
 
-            <CardElement :text="$t('networkadmin.StaticIpConfiguration')" textVariant="text-bg-primary" add-space
-                         v-show="!networkConfigList.dhcp"
+            <CardElement
+                :text="$t('networkadmin.StaticIpConfiguration')"
+                textVariant="text-bg-primary"
+                add-space
+                v-show="!networkConfigList.dhcp"
             >
-                <InputElement :label="$t('networkadmin.IpAddress')"
-                              v-model="networkConfigList.ipaddress"
-                              type="text" maxlength="32"/>
+                <InputElement
+                    :label="$t('networkadmin.IpAddress')"
+                    v-model="networkConfigList.ipaddress"
+                    type="text"
+                    maxlength="32"
+                />
 
-                <InputElement :label="$t('networkadmin.Netmask')"
-                              v-model="networkConfigList.netmask"
-                              type="text" maxlength="32"/>
+                <InputElement
+                    :label="$t('networkadmin.Netmask')"
+                    v-model="networkConfigList.netmask"
+                    type="text"
+                    maxlength="32"
+                />
 
-                <InputElement :label="$t('networkadmin.DefaultGateway')"
-                              v-model="networkConfigList.gateway"
-                              type="text" maxlength="32"/>
+                <InputElement
+                    :label="$t('networkadmin.DefaultGateway')"
+                    v-model="networkConfigList.gateway"
+                    type="text"
+                    maxlength="32"
+                />
 
-                <InputElement :label="$t('networkadmin.Dns', { num: 1 })"
-                              v-model="networkConfigList.dns1"
-                              type="text" maxlength="32"/>
+                <InputElement
+                    :label="$t('networkadmin.Dns', { num: 1 })"
+                    v-model="networkConfigList.dns1"
+                    type="text"
+                    maxlength="32"
+                />
 
-                <InputElement :label="$t('networkadmin.Dns', { num: 2 })"
-                              v-model="networkConfigList.dns2"
-                              type="text" maxlength="32"/>
+                <InputElement
+                    :label="$t('networkadmin.Dns', { num: 2 })"
+                    v-model="networkConfigList.dns2"
+                    type="text"
+                    maxlength="32"
+                />
             </CardElement>
 
             <CardElement :text="$t('networkadmin.MdnsSettings')" textVariant="text-bg-primary" add-space>
-                <InputElement :label="$t('networkadmin.EnableMdns')"
-                              v-model="networkConfigList.mdnsenabled"
-                              type="checkbox"/>
+                <InputElement
+                    :label="$t('networkadmin.EnableMdns')"
+                    v-model="networkConfigList.mdnsenabled"
+                    type="checkbox"
+                />
             </CardElement>
 
             <CardElement :text="$t('networkadmin.AdminAp')" textVariant="text-bg-primary" add-space>
-                <InputElement :label="$t('networkadmin.ApTimeout')"
-                              v-model="networkConfigList.aptimeout"
-                              type="number" min="0" max="99999"
-                              :postfix="$t('networkadmin.Minutes')"
-                              :tooltip="$t('networkadmin.ApTimeoutHint')"/>
+                <InputElement
+                    :label="$t('networkadmin.ApTimeout')"
+                    v-model="networkConfigList.aptimeout"
+                    type="number"
+                    min="0"
+                    max="99999"
+                    :postfix="$t('networkadmin.Minutes')"
+                    :tooltip="$t('networkadmin.ApTimeoutHint')"
+                />
             </CardElement>
-            <FormFooter @reload="getNetworkConfig"/>
+            <FormFooter @reload="getNetworkConfig" />
         </form>
     </BasePage>
 </template>
 
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
-import BootstrapAlert from "@/components/BootstrapAlert.vue";
+import BootstrapAlert from '@/components/BootstrapAlert.vue';
 import CardElement from '@/components/CardElement.vue';
 import FormFooter from '@/components/FormFooter.vue';
 import InputElement from '@/components/InputElement.vue';
-import type { NetworkConfig } from "@/types/NetworkConfig";
+import type { NetworkConfig } from '@/types/NetworkConfig';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { defineComponent } from 'vue';
 
@@ -90,8 +120,8 @@ export default defineComponent({
         return {
             dataLoading: true,
             networkConfigList: {} as NetworkConfig,
-            alertMessage: "",
-            alertType: "info",
+            alertMessage: '',
+            alertType: 'info',
             showAlert: false,
         };
     },
@@ -101,7 +131,7 @@ export default defineComponent({
     methods: {
         getNetworkConfig() {
             this.dataLoading = true;
-            fetch("/api/network/config", { headers: authHeader() })
+            fetch('/api/network/config', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.networkConfigList = data;
@@ -112,21 +142,19 @@ export default defineComponent({
             e.preventDefault();
 
             const formData = new FormData();
-            formData.append("data", JSON.stringify(this.networkConfigList));
+            formData.append('data', JSON.stringify(this.networkConfigList));
 
-            fetch("/api/network/config", {
-                method: "POST",
+            fetch('/api/network/config', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (response) => {
-                        this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
-                        this.alertType = response.type;
-                        this.showAlert = true;
-                    }
-                );
+                .then((response) => {
+                    this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
+                    this.alertType = response.type;
+                    this.showAlert = true;
+                });
         },
     },
 });

webapp/src/views/NetworkInfoView.vue

@@ -1,5 +1,10 @@
 <template>
-    <BasePage :title="$t('networkinfo.NetworkInformation')" :isLoading="dataLoading" :show-reload="true" @reload="getNetworkInfo">
+    <BasePage
+        :title="$t('networkinfo.NetworkInformation')"
+        :isLoading="dataLoading"
+        :show-reload="true"
+        @reload="getNetworkInfo"
+    >
         <WifiStationInfo :networkStatus="networkDataList" />
         <div class="mt-5"></div>
         <WifiApInfo :networkStatus="networkDataList" />
@@ -13,10 +18,10 @@
 
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
-import InterfaceApInfo from "@/components/InterfaceApInfo.vue";
-import InterfaceNetworkInfo from "@/components/InterfaceNetworkInfo.vue";
-import WifiApInfo from "@/components/WifiApInfo.vue";
-import WifiStationInfo from "@/components/WifiStationInfo.vue";
+import InterfaceApInfo from '@/components/InterfaceApInfo.vue';
+import InterfaceNetworkInfo from '@/components/InterfaceNetworkInfo.vue';
+import WifiApInfo from '@/components/WifiApInfo.vue';
+import WifiStationInfo from '@/components/WifiStationInfo.vue';
 import type { NetworkStatus } from '@/types/NetworkStatus';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { defineComponent } from 'vue';
@@ -33,7 +38,7 @@ export default defineComponent({
         return {
             dataLoading: true,
             networkDataList: {} as NetworkStatus,
-        }
+        };
     },
     created() {
         this.getNetworkInfo();
@@ -41,7 +46,7 @@ export default defineComponent({
     methods: {
         getNetworkInfo() {
             this.dataLoading = true;
-            fetch("/api/network/status", { headers: authHeader() })
+            fetch('/api/network/status', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.networkDataList = data;

webapp/src/views/NtpAdminView.vue

@@ -6,37 +6,56 @@
 
         <form @submit="saveNtpConfig">
             <CardElement :text="$t('ntpadmin.NtpConfiguration')" textVariant="text-bg-primary">
-                <InputElement :label="$t('ntpadmin.TimeServer')"
-                              v-model="ntpConfigList.ntp_server"
-                              type="text" maxlength="32"
-                              :tooltip="$t('ntpadmin.TimeServerHint')"/>
+                <InputElement
+                    :label="$t('ntpadmin.TimeServer')"
+                    v-model="ntpConfigList.ntp_server"
+                    type="text"
+                    maxlength="32"
+                    :tooltip="$t('ntpadmin.TimeServerHint')"
+                />
 
                 <div class="row mb-3">
                     <label for="inputTimezone" class="col-sm-2 col-form-label">{{ $t('ntpadmin.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">
+                            <option
+                                v-for="(config, name) in timezoneList"
+                                :key="name + '---' + config"
+                                :value="name + '---' + config"
+                            >
                                 {{ name }}
                             </option>
                         </select>
                     </div>
                 </div>
 
-                <InputElement :label="$t('ntpadmin.TimezoneConfig')"
-                              v-model="ntpConfigList.ntp_timezone"
-                              type="text" maxlength="32" disabled/>
+                <InputElement
+                    :label="$t('ntpadmin.TimezoneConfig')"
+                    v-model="ntpConfigList.ntp_timezone"
+                    type="text"
+                    maxlength="32"
+                    disabled
+                />
             </CardElement>
 
             <CardElement :text="$t('ntpadmin.LocationConfiguration')" textVariant="text-bg-primary" add-space>
-                <InputElement :label="$t('ntpadmin.Latitude')"
-                              v-model="ntpConfigList.latitude"
-                              type="number" min="-90" max="90" step="any"/>
-
-                <InputElement :label="$t('ntpadmin.Longitude')"
-                              v-model="ntpConfigList.longitude"
-                              type="number" min="-180" max="180" step="any"/>
+                <InputElement
+                    :label="$t('ntpadmin.Latitude')"
+                    v-model="ntpConfigList.latitude"
+                    type="number"
+                    min="-90"
+                    max="90"
+                    step="any"
+                />
 
+                <InputElement
+                    :label="$t('ntpadmin.Longitude')"
+                    v-model="ntpConfigList.longitude"
+                    type="number"
+                    min="-180"
+                    max="180"
+                    step="any"
+                />
 
                 <div class="row mb-3">
                     <label class="col-sm-2 col-form-label">
@@ -52,17 +71,13 @@
                     </div>
                 </div>
             </CardElement>
-            <FormFooter @reload="getNtpConfig"/>
+            <FormFooter @reload="getNtpConfig" />
         </form>
 
         <CardElement :text="$t('ntpadmin.ManualTimeSynchronization')" textVariant="text-bg-primary" add-space>
-            <InputElement :label="$t('ntpadmin.CurrentOpenDtuTime')"
-                           v-model="mcuTime"
-                           type="text" disabled/>
+            <InputElement :label="$t('ntpadmin.CurrentOpenDtuTime')" v-model="mcuTime" type="text" disabled />
 
-            <InputElement :label="$t('ntpadmin.CurrentLocalTime')"
-                          v-model="localTime"
-                          type="text" disabled/>
+            <InputElement :label="$t('ntpadmin.CurrentLocalTime')" v-model="localTime" type="text" disabled />
 
             <div class="text-center mb-3">
                 <button type="button" class="btn btn-danger" @click="setCurrentTime()">
@@ -76,11 +91,11 @@
 
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
-import BootstrapAlert from "@/components/BootstrapAlert.vue";
+import BootstrapAlert from '@/components/BootstrapAlert.vue';
 import CardElement from '@/components/CardElement.vue';
 import InputElement from '@/components/InputElement.vue';
 import FormFooter from '@/components/FormFooter.vue';
-import type { NtpConfig } from "@/types/NtpConfig";
+import type { NtpConfig } from '@/types/NtpConfig';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { defineComponent } from 'vue';
 import { BIconInfoCircle } from 'bootstrap-icons-vue';
@@ -100,12 +115,12 @@ export default defineComponent({
             timezoneLoading: true,
             ntpConfigList: {} as NtpConfig,
             timezoneList: {},
-            timezoneSelect: "",
+            timezoneSelect: '',
             mcuTime: new Date(),
             localTime: new Date(),
             dataAgeInterval: 0,
-            alertMessage: "",
-            alertType: "info",
+            alertMessage: '',
+            alertType: 'info',
             showAlert: false,
             sunsetTypeList: [
                 { key: 0, value: 'OFFICIAL' },
@@ -117,8 +132,8 @@ export default defineComponent({
     },
     watch: {
         timezoneSelect: function (newValue) {
-            this.ntpConfigList.ntp_timezone = newValue.split("---")[1];
-            this.ntpConfigList.ntp_timezone_descr = newValue.split("---")[0];
+            this.ntpConfigList.ntp_timezone = newValue.split('---')[1];
+            this.ntpConfigList.ntp_timezone_descr = newValue.split('---')[0];
         },
     },
     created() {
@@ -136,7 +151,7 @@ export default defineComponent({
         },
         getTimezoneList() {
             this.timezoneLoading = true;
-            fetch("/zones.json")
+            fetch('/zones.json')
                 .then((response) => response.json())
                 .then((data) => {
                     this.timezoneList = data;
@@ -145,31 +160,23 @@ export default defineComponent({
         },
         getNtpConfig() {
             this.dataLoading = true;
-            fetch("/api/ntp/config", { headers: authHeader() })
+            fetch('/api/ntp/config', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (data) => {
-                        this.ntpConfigList = data;
-                        this.timezoneSelect =
-                            this.ntpConfigList.ntp_timezone_descr +
-                            "---" +
-                            this.ntpConfigList.ntp_timezone;
-                        this.dataLoading = false;
-                    }
-                );
+                .then((data) => {
+                    this.ntpConfigList = data;
+                    this.timezoneSelect =
+                        this.ntpConfigList.ntp_timezone_descr + '---' + this.ntpConfigList.ntp_timezone;
+                    this.dataLoading = false;
+                });
         },
         getCurrentTime() {
             this.dataLoading = true;
-            fetch("/api/ntp/time", { headers: authHeader() })
+            fetch('/api/ntp/time', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (data) => {
-                        this.mcuTime = new Date(
-                            data.year, data.month - 1, data.day,
-                            data.hour, data.minute, data.second);
-                        this.dataLoading = false;
-                    }
-                );
+                .then((data) => {
+                    this.mcuTime = new Date(data.year, data.month - 1, data.day, data.hour, data.minute, data.second);
+                    this.dataLoading = false;
+                });
         },
         setCurrentTime() {
             const formData = new FormData();
@@ -182,21 +189,19 @@ export default defineComponent({
                 second: this.localTime.getSeconds(),
             };
             console.log(time);
-            formData.append("data", JSON.stringify(time));
+            formData.append('data', JSON.stringify(time));
 
-            fetch("/api/ntp/time", {
-                method: "POST",
+            fetch('/api/ntp/time', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (response) => {
-                        this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
-                        this.alertType = response.type;
-                        this.showAlert = true;
-                    }
-                )
+                .then((response) => {
+                    this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
+                    this.alertType = response.type;
+                    this.showAlert = true;
+                })
                 .then(() => {
                     this.getCurrentTime();
                 });
@@ -205,21 +210,19 @@ export default defineComponent({
             e.preventDefault();
 
             const formData = new FormData();
-            formData.append("data", JSON.stringify(this.ntpConfigList));
+            formData.append('data', JSON.stringify(this.ntpConfigList));
 
-            fetch("/api/ntp/config", {
-                method: "POST",
+            fetch('/api/ntp/config', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (response) => {
-                        this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
-                        this.alertType = response.type;
-                        this.showAlert = true;
-                    }
-                );
+                .then((response) => {
+                    this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
+                    this.alertType = response.type;
+                    this.showAlert = true;
+                });
         },
     },
 });

webapp/src/views/NtpInfoView.vue

@@ -28,7 +28,11 @@
                         <tr>
                             <th>{{ $t('ntpinfo.Status') }}</th>
                             <td>
-                                <StatusBadge :status="ntpDataList.ntp_status" true_text="ntpinfo.Synced" false_text="ntpinfo.NotSynced" />
+                                <StatusBadge
+                                    :status="ntpDataList.ntp_status"
+                                    true_text="ntpinfo.Synced"
+                                    false_text="ntpinfo.NotSynced"
+                                />
                             </td>
                         </tr>
                         <tr>
@@ -38,20 +42,28 @@
 
                         <tr>
                             <th>{{ $t('ntpinfo.Sunrise') }}</th>
-                            <td v-if="ntpDataList.sun_isSunsetAvailable">{{ ntpDataList.sun_risetime }}</td>
+                            <td v-if="ntpDataList.sun_isSunsetAvailable">
+                                {{ ntpDataList.sun_risetime }}
+                            </td>
                             <td v-else>{{ $t('ntpinfo.NotAvailable') }}</td>
                         </tr>
                         <tr>
                             <th>{{ $t('ntpinfo.Sunset') }}</th>
-                            <td v-if="ntpDataList.sun_isSunsetAvailable">{{ ntpDataList.sun_settime }}</td>
+                            <td v-if="ntpDataList.sun_isSunsetAvailable">
+                                {{ ntpDataList.sun_settime }}
+                            </td>
                             <td v-else>{{ $t('ntpinfo.NotAvailable') }}</td>
                         </tr>
                         <tr>
                             <th>{{ $t('ntpinfo.Mode') }}</th>
                             <td>
-                                <StatusBadge :status="ntpDataList.sun_isDayPeriod"
-                                    true_text="ntpinfo.Day" true_class="text-bg-warning"
-                                    false_text="ntpinfo.Night" false_class="text-bg-dark" />
+                                <StatusBadge
+                                    :status="ntpDataList.sun_isDayPeriod"
+                                    true_text="ntpinfo.Day"
+                                    true_class="text-bg-warning"
+                                    false_text="ntpinfo.Night"
+                                    false_class="text-bg-dark"
+                                />
                             </td>
                         </tr>
                     </tbody>
@@ -65,7 +77,7 @@
 import BasePage from '@/components/BasePage.vue';
 import CardElement from '@/components/CardElement.vue';
 import StatusBadge from '@/components/StatusBadge.vue';
-import type { NtpStatus } from "@/types/NtpStatus";
+import type { NtpStatus } from '@/types/NtpStatus';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { defineComponent } from 'vue';
 
@@ -87,7 +99,7 @@ export default defineComponent({
     methods: {
         getNtpInfo() {
             this.dataLoading = true;
-            fetch("/api/ntp/status", { headers: authHeader() })
+            fetch('/api/ntp/status', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.ntpDataList = data;

webapp/src/views/SecurityAdminView.vue

@@ -6,31 +6,40 @@
 
         <form @submit="savePasswordConfig">
             <CardElement :text="$t('securityadmin.AdminPassword')" textVariant="text-bg-primary">
-                <InputElement :label="$t('securityadmin.Password')"
-                              v-model="securityConfigList.password"
-                              type="password" maxlength="64"/>
+                <InputElement
+                    :label="$t('securityadmin.Password')"
+                    v-model="securityConfigList.password"
+                    type="password"
+                    maxlength="64"
+                />
 
-                <InputElement :label="$t('securityadmin.RepeatPassword')"
-                              v-model="passwordRepeat"
-                              type="password" maxlength="64"/>
+                <InputElement
+                    :label="$t('securityadmin.RepeatPassword')"
+                    v-model="passwordRepeat"
+                    type="password"
+                    maxlength="64"
+                />
 
                 <div class="alert alert-secondary" role="alert" v-html="$t('securityadmin.PasswordHint')"></div>
             </CardElement>
 
             <CardElement :text="$t('securityadmin.Permissions')" textVariant="text-bg-primary" add-space>
-                <InputElement :label="$t('securityadmin.ReadOnly')"
-                              v-model="securityConfigList.allow_readonly"
-                              type="checkbox" wide/>
+                <InputElement
+                    :label="$t('securityadmin.ReadOnly')"
+                    v-model="securityConfigList.allow_readonly"
+                    type="checkbox"
+                    wide
+                />
             </CardElement>
 
-            <FormFooter @reload="getPasswordConfig"/>
+            <FormFooter @reload="getPasswordConfig" />
         </form>
     </BasePage>
 </template>
 
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
-import BootstrapAlert from "@/components/BootstrapAlert.vue";
+import BootstrapAlert from '@/components/BootstrapAlert.vue';
 import CardElement from '@/components/CardElement.vue';
 import FormFooter from '@/components/FormFooter.vue';
 import InputElement from '@/components/InputElement.vue';
@@ -49,12 +58,12 @@ export default defineComponent({
     data() {
         return {
             dataLoading: true,
-            alertMessage: "",
-            alertType: "info",
+            alertMessage: '',
+            alertType: 'info',
             showAlert: false,
 
             securityConfigList: {} as SecurityConfig,
-            passwordRepeat: "",
+            passwordRepeat: '',
         };
     },
     created() {
@@ -63,42 +72,38 @@ export default defineComponent({
     methods: {
         getPasswordConfig() {
             this.dataLoading = true;
-            fetch("/api/security/config", { headers: authHeader() })
+            fetch('/api/security/config', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (data) => {
-                        this.securityConfigList = data;
-                        this.passwordRepeat = this.securityConfigList.password;
-                        this.dataLoading = false;
-                    }
-                );
+                .then((data) => {
+                    this.securityConfigList = data;
+                    this.passwordRepeat = this.securityConfigList.password;
+                    this.dataLoading = false;
+                });
         },
         savePasswordConfig(e: Event) {
             e.preventDefault();
 
             if (this.securityConfigList.password != this.passwordRepeat) {
-                this.alertMessage = "Passwords are not equal";
-                this.alertType = "warning";
+                this.alertMessage = 'Passwords are not equal';
+                this.alertType = 'warning';
                 this.showAlert = true;
                 return;
             }
 
             const formData = new FormData();
-            formData.append("data", JSON.stringify(this.securityConfigList));
+            formData.append('data', JSON.stringify(this.securityConfigList));
 
-            fetch("/api/security/config", {
-                method: "POST",
+            fetch('/api/security/config', {
+                method: 'POST',
                 headers: authHeader(),
                 body: formData,
             })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
-                .then(
-                    (response) => {
-                        this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
-                        this.alertType = response.type;
-                        this.showAlert = true;
-                    }
-                );
+                .then((response) => {
+                    this.alertMessage = this.$t('apiresponse.' + response.code, response.param);
+                    this.alertType = response.type;
+                    this.showAlert = true;
+                });
         },
     },
 });

webapp/src/views/SystemInfoView.vue

@@ -15,11 +15,11 @@
 
 <script lang="ts">
 import BasePage from '@/components/BasePage.vue';
-import FirmwareInfo from "@/components/FirmwareInfo.vue";
-import HardwareInfo from "@/components/HardwareInfo.vue";
-import MemoryInfo from "@/components/MemoryInfo.vue";
-import HeapDetails from "@/components/HeapDetails.vue";
-import RadioInfo from "@/components/RadioInfo.vue";
+import FirmwareInfo from '@/components/FirmwareInfo.vue';
+import HardwareInfo from '@/components/HardwareInfo.vue';
+import MemoryInfo from '@/components/MemoryInfo.vue';
+import HeapDetails from '@/components/HeapDetails.vue';
+import RadioInfo from '@/components/RadioInfo.vue';
 import type { SystemStatus } from '@/types/SystemStatus';
 import { authHeader, handleResponse } from '@/utils/authentication';
 import { defineComponent } from 'vue';
@@ -38,16 +38,16 @@ export default defineComponent({
             dataLoading: true,
             systemDataList: {} as SystemStatus,
             allowVersionInfo: false,
-        }
+        };
     },
     created() {
-        this.allowVersionInfo = (localStorage.getItem("allowVersionInfo") || "0") == "1";
+        this.allowVersionInfo = (localStorage.getItem('allowVersionInfo') || '0') == '1';
         this.getSystemInfo();
     },
     methods: {
         getSystemInfo() {
             this.dataLoading = true;
-            fetch("/api/system/status", { headers: authHeader() })
+            fetch('/api/system/status', { headers: authHeader() })
                 .then((response) => handleResponse(response, this.$emitter, this.$router))
                 .then((data) => {
                     this.systemDataList = data;
@@ -55,7 +55,7 @@ export default defineComponent({
                     if (this.allowVersionInfo) {
                         this.getUpdateInfo();
                     }
-                })
+                });
         },
         getUpdateInfo() {
             if (this.systemDataList.git_hash === undefined) {
@@ -64,47 +64,51 @@ export default defineComponent({
 
             // If the left char is a "g" the value is the git hash (remove the "g")
             this.systemDataList.git_is_hash = this.systemDataList.git_hash?.substring(0, 1) == 'g';
-            this.systemDataList.git_hash = this.systemDataList.git_is_hash ? this.systemDataList.git_hash?.substring(1) : this.systemDataList.git_hash;
+            this.systemDataList.git_hash = this.systemDataList.git_is_hash
+                ? this.systemDataList.git_hash?.substring(1)
+                : this.systemDataList.git_hash;
 
             // Handle format "v0.1-5-gabcdefh"
-            if (this.systemDataList.git_hash?.lastIndexOf("-") >= 0) {
-                this.systemDataList.git_hash = this.systemDataList.git_hash.substring(this.systemDataList.git_hash.lastIndexOf("-") + 2)
+            if (this.systemDataList.git_hash?.lastIndexOf('-') >= 0) {
+                this.systemDataList.git_hash = this.systemDataList.git_hash.substring(
+                    this.systemDataList.git_hash.lastIndexOf('-') + 2
+                );
                 this.systemDataList.git_is_hash = true;
             }
 
-            const fetchUrl = "https://api.github.com/repos/tbnobody/OpenDTU/compare/"
-                + this.systemDataList.git_hash + "...HEAD";
+            const fetchUrl =
+                'https://api.github.com/repos/tbnobody/OpenDTU/compare/' + this.systemDataList.git_hash + '...HEAD';
 
             fetch(fetchUrl)
                 .then((response) => {
                     if (response.ok) {
-                        return response.json()
+                        return response.json();
                     }
-                    throw new Error(this.$t("systeminfo.VersionError"));
+                    throw new Error(this.$t('systeminfo.VersionError'));
                 })
                 .then((data) => {
                     if (data.total_commits > 0) {
-                        this.systemDataList.update_text = this.$t("systeminfo.VersionNew");
-                        this.systemDataList.update_status = "text-bg-danger";
+                        this.systemDataList.update_text = this.$t('systeminfo.VersionNew');
+                        this.systemDataList.update_status = 'text-bg-danger';
                         this.systemDataList.update_url = data.html_url;
                     } else {
-                        this.systemDataList.update_text = this.$t("systeminfo.VersionOk");
-                        this.systemDataList.update_status = "text-bg-success";
+                        this.systemDataList.update_text = this.$t('systeminfo.VersionOk');
+                        this.systemDataList.update_status = 'text-bg-success';
                     }
                 })
                 .catch((error: Error) => {
                     this.systemDataList.update_text = error.message;
-                    this.systemDataList.update_status = "text-bg-secondary";
+                    this.systemDataList.update_status = 'text-bg-secondary';
                 });
-        }
+        },
     },
     watch: {
         allowVersionInfo(allow: boolean) {
-            localStorage.setItem("allowVersionInfo", allow ? "1" : "0");
+            localStorage.setItem('allowVersionInfo', allow ? '1' : '0');
             if (allow) {
                 this.getUpdateInfo();
             }
-        }
-    }
+        },
+    },
 });
 </script>

webapp/yarn.lock

@@ -22,125 +22,125 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.9.tgz#7b903b6149b0f8fa7ad564af646c4c38a77fc44b"
   integrity sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==
 
-"@babel/parser@^7.24.4":
-  version "7.24.4"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.4.tgz#234487a110d89ad5a3ed4a8a566c36b9453e8c88"
-  integrity sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==
+"@babel/parser@^7.24.7":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.7.tgz#9a5226f92f0c5c8ead550b750f5608e766c8ce85"
+  integrity sha512-9uUYRm6OqQrCqQdG1iCBwBPZgN8ciDBro2nIOFaiRz1/BCxaI7CNvQbDHvsArAC7Tw9Hda/B3U+6ui9u4HWXPw==
 
-"@esbuild/aix-ppc64@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz#a70f4ac11c6a1dfc18b8bbb13284155d933b9537"
-  integrity sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==
+"@esbuild/aix-ppc64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz#c7184a326533fcdf1b8ee0733e21c713b975575f"
+  integrity sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==
 
-"@esbuild/android-arm64@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz#db1c9202a5bc92ea04c7b6840f1bbe09ebf9e6b9"
-  integrity sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==
+"@esbuild/android-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz#09d9b4357780da9ea3a7dfb833a1f1ff439b4052"
+  integrity sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==
 
-"@esbuild/android-arm@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.20.2.tgz#3b488c49aee9d491c2c8f98a909b785870d6e995"
-  integrity sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==
+"@esbuild/android-arm@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-arm/-/android-arm-0.21.5.tgz#9b04384fb771926dfa6d7ad04324ecb2ab9b2e28"
+  integrity sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==
 
-"@esbuild/android-x64@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.20.2.tgz#3b1628029e5576249d2b2d766696e50768449f98"
-  integrity sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==
+"@esbuild/android-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/android-x64/-/android-x64-0.21.5.tgz#29918ec2db754cedcb6c1b04de8cd6547af6461e"
+  integrity sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==
 
-"@esbuild/darwin-arm64@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz#6e8517a045ddd86ae30c6608c8475ebc0c4000bb"
-  integrity sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==
+"@esbuild/darwin-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz#e495b539660e51690f3928af50a76fb0a6ccff2a"
+  integrity sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==
 
-"@esbuild/darwin-x64@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz#90ed098e1f9dd8a9381695b207e1cff45540a0d0"
-  integrity sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==
+"@esbuild/darwin-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz#c13838fa57372839abdddc91d71542ceea2e1e22"
+  integrity sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==
 
-"@esbuild/freebsd-arm64@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz#d71502d1ee89a1130327e890364666c760a2a911"
-  integrity sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==
+"@esbuild/freebsd-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz#646b989aa20bf89fd071dd5dbfad69a3542e550e"
+  integrity sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==
 
-"@esbuild/freebsd-x64@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz#aa5ea58d9c1dd9af688b8b6f63ef0d3d60cea53c"
-  integrity sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==
+"@esbuild/freebsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz#aa615cfc80af954d3458906e38ca22c18cf5c261"
+  integrity sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==
 
-"@esbuild/linux-arm64@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz#055b63725df678379b0f6db9d0fa85463755b2e5"
-  integrity sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==
+"@esbuild/linux-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz#70ac6fa14f5cb7e1f7f887bcffb680ad09922b5b"
+  integrity sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==
 
-"@esbuild/linux-arm@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz#76b3b98cb1f87936fbc37f073efabad49dcd889c"
-  integrity sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==
+"@esbuild/linux-arm@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz#fc6fd11a8aca56c1f6f3894f2bea0479f8f626b9"
+  integrity sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==
 
-"@esbuild/linux-ia32@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz#c0e5e787c285264e5dfc7a79f04b8b4eefdad7fa"
-  integrity sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==
+"@esbuild/linux-ia32@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz#3271f53b3f93e3d093d518d1649d6d68d346ede2"
+  integrity sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==
 
-"@esbuild/linux-loong64@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz#a6184e62bd7cdc63e0c0448b83801001653219c5"
-  integrity sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==
+"@esbuild/linux-loong64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz#ed62e04238c57026aea831c5a130b73c0f9f26df"
+  integrity sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==
 
-"@esbuild/linux-mips64el@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz#d08e39ce86f45ef8fc88549d29c62b8acf5649aa"
-  integrity sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==
+"@esbuild/linux-mips64el@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz#e79b8eb48bf3b106fadec1ac8240fb97b4e64cbe"
+  integrity sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==
 
-"@esbuild/linux-ppc64@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz#8d252f0b7756ffd6d1cbde5ea67ff8fd20437f20"
-  integrity sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==
+"@esbuild/linux-ppc64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz#5f2203860a143b9919d383ef7573521fb154c3e4"
+  integrity sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==
 
-"@esbuild/linux-riscv64@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz#19f6dcdb14409dae607f66ca1181dd4e9db81300"
-  integrity sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==
+"@esbuild/linux-riscv64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz#07bcafd99322d5af62f618cb9e6a9b7f4bb825dc"
+  integrity sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==
 
-"@esbuild/linux-s390x@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz#3c830c90f1a5d7dd1473d5595ea4ebb920988685"
-  integrity sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==
+"@esbuild/linux-s390x@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz#b7ccf686751d6a3e44b8627ababc8be3ef62d8de"
+  integrity sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==
 
-"@esbuild/linux-x64@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz#86eca35203afc0d9de0694c64ec0ab0a378f6fff"
-  integrity sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==
+"@esbuild/linux-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz#6d8f0c768e070e64309af8004bb94e68ab2bb3b0"
+  integrity sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==
 
-"@esbuild/netbsd-x64@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz#e771c8eb0e0f6e1877ffd4220036b98aed5915e6"
-  integrity sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==
+"@esbuild/netbsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz#bbe430f60d378ecb88decb219c602667387a6047"
+  integrity sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==
 
-"@esbuild/openbsd-x64@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz#9a795ae4b4e37e674f0f4d716f3e226dd7c39baf"
-  integrity sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==
+"@esbuild/openbsd-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz#99d1cf2937279560d2104821f5ccce220cb2af70"
+  integrity sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==
 
-"@esbuild/sunos-x64@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz#7df23b61a497b8ac189def6e25a95673caedb03f"
-  integrity sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==
+"@esbuild/sunos-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz#08741512c10d529566baba837b4fe052c8f3487b"
+  integrity sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==
 
-"@esbuild/win32-arm64@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz#f1ae5abf9ca052ae11c1bc806fb4c0f519bacf90"
-  integrity sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==
+"@esbuild/win32-arm64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz#675b7385398411240735016144ab2e99a60fc75d"
+  integrity sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==
 
-"@esbuild/win32-ia32@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz#241fe62c34d8e8461cd708277813e1d0ba55ce23"
-  integrity sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==
+"@esbuild/win32-ia32@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz#1bfc3ce98aa6ca9a0969e4d2af72144c59c1193b"
+  integrity sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==
 
-"@esbuild/win32-x64@0.20.2":
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz#9c907b21e30a52db959ba4f80bb01a0cc403d5cc"
-  integrity sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==
+"@esbuild/win32-x64@0.21.5":
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz#acad351d582d157bb145535db2a6ff53dd514b5c"
+  integrity sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==
 
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
@@ -149,24 +149,24 @@
   dependencies:
     eslint-visitor-keys "^3.3.0"
 
+"@eslint-community/regexpp@^4.11.0":
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.11.0.tgz#b0ffd0312b4a3fd2d6f77237e7248a5ad3a680ae"
+  integrity sha512-G/M/tIiMrTAxEWRfLfQJMmGNX28IxBg4PBz8XqQhqUHLFI6TL2htpIB1iQCj144V5ee/JaKyT9/WZ0MGZWfA7A==
+
 "@eslint-community/regexpp@^4.5.1":
   version "4.8.1"
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.8.1.tgz#8c4bb756cc2aa7eaf13cfa5e69c83afb3260c20c"
   integrity sha512-PWiOzLIUAjN/w5K17PoF4n6sKBw0gqLHPhywmYHP4t1VFQQVYeb1yWsJwnMVEMl3tUHME7X/SJPZLmtG7XBDxQ==
 
-"@eslint-community/regexpp@^4.6.1":
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.6.2.tgz#1816b5f6948029c5eaacb0703b850ee0cb37d8f8"
-  integrity sha512-pPTNuaAG3QMH+buKyBIGJs3g/S5y0caxw0ygM3YyE6yJFySwiGGSzA+mM3KJ8QQvzeLh3blwgSonkFjgQdxzMw==
-
-"@eslint/config-array@^0.15.1":
-  version "0.15.1"
-  resolved "https://registry.yarnpkg.com/@eslint/config-array/-/config-array-0.15.1.tgz#1fa78b422d98f4e7979f2211a1fde137e26c7d61"
-  integrity sha512-K4gzNq+yymn/EVsXYmf+SBcBro8MTf+aXJZUphM96CdzUEr+ClGDvAbpmaEK+cGVigVXIgs9gNmvHAlrzzY5JQ==
+"@eslint/config-array@^0.17.1":
+  version "0.17.1"
+  resolved "https://registry.yarnpkg.com/@eslint/config-array/-/config-array-0.17.1.tgz#d9b8b8b6b946f47388f32bedfd3adf29ca8f8910"
+  integrity sha512-BlYOpej8AQ8Ev9xVqroV7a02JK3SkBAaN9GfMMH9W6Ch8FlQlkjGw4Ir7+FgYwfirivAf4t+GtzuAxqfukmISA==
   dependencies:
-    "@eslint/object-schema" "^2.1.3"
+    "@eslint/object-schema" "^2.1.4"
     debug "^4.3.1"
-    minimatch "^3.0.5"
+    minimatch "^3.1.2"
 
 "@eslint/eslintrc@^3.1.0":
   version "3.1.0"
@@ -183,15 +183,15 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@9.4.0":
-  version "9.4.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-9.4.0.tgz#96a2edd37ec0551ce5f9540705be23951c008a0c"
-  integrity sha512-fdI7VJjP3Rvc70lC4xkFXHB0fiPeojiL1PxVG6t1ZvXQrarj893PweuBTujxDUFk0Fxj4R7PIIAZ/aiiyZPZcg==
+"@eslint/js@9.8.0":
+  version "9.8.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-9.8.0.tgz#ae9bc14bb839713c5056f5018bcefa955556d3a4"
+  integrity sha512-MfluB7EUfxXtv3i/++oh89uzAr4PDI4nn201hsp+qaXqsjAWzinlZEHEfPgAX4doIlKvPG/i0A9dpKxOLII8yA==
 
-"@eslint/object-schema@^2.1.3":
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/@eslint/object-schema/-/object-schema-2.1.3.tgz#e65ae80ee2927b4fd8c5c26b15ecacc2b2a6cc2a"
-  integrity sha512-HAbhAYKfsAC2EkTqve00ibWIZlaU74Z1EHwAjYr4PXF0YU2VEA1zSIKSSpKszRLRWwHzzRZXvK632u+uXzvsvw==
+"@eslint/object-schema@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@eslint/object-schema/-/object-schema-2.1.4.tgz#9e69f8bb4031e11df79e03db09f9dbbae1740843"
+  integrity sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==
 
 "@humanwhocodes/module-importer@^1.0.1":
   version "1.0.1"
@@ -447,12 +447,12 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
-"@types/node@^20.14.2":
-  version "20.14.2"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.14.2.tgz#a5f4d2bcb4b6a87bffcaa717718c5a0f208f4a18"
-  integrity sha512-xyu6WAMVwv6AKFLB+e/7ySZVr/0zLCzOa7rSpq6jNwpqOrUbcACDWC+53d4n2QHOnDou0fbIsg8wZu/sxrnI4Q==
+"@types/node@^22.1.0":
+  version "22.1.0"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.1.0.tgz#6d6adc648b5e03f0e83c78dc788c2b037d0ad94b"
+  integrity sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw==
   dependencies:
-    undici-types "~5.26.4"
+    undici-types "~6.13.0"
 
 "@types/pulltorefreshjs@^0.1.7":
   version "0.1.7"
@@ -560,31 +560,29 @@
     "@typescript-eslint/types" "7.2.0"
     eslint-visitor-keys "^3.4.1"
 
-"@vitejs/plugin-vue@^5.0.5":
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.0.5.tgz#e3dc11e427d4b818b7e3202766ad156e3d5e2eaa"
-  integrity sha512-LOjm7XeIimLBZyzinBQ6OSm3UBCNVCpLkxGC0oWmm2YPzVZoxMsdvNVimLTBzpAnR9hl/yn1SHGuRfe6/Td9rQ==
+"@vitejs/plugin-vue@^5.1.2":
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-5.1.2.tgz#f11091e0130eca6c1ca8cfb85ee71ea53b255d31"
+  integrity sha512-nY9IwH12qeiJqumTCLJLE7IiNx7HZ39cbHaysEUd+Myvbz9KAqd2yq+U01Kab1R/H1BmiyM2ShTYlNH32Fzo3A==
 
-"@volar/language-core@2.3.0", "@volar/language-core@~2.3.0-alpha.15":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@volar/language-core/-/language-core-2.3.0.tgz#ffb9b64c8b19d7f45b1fdcd9ae9d98d94bad7179"
-  integrity sha512-pvhL24WUh3VDnv7Yw5N1sjhPtdx7q9g+Wl3tggmnkMcyK8GcCNElF2zHiKznryn0DiUGk+eez/p2qQhz+puuHw==
+"@volar/language-core@2.4.0-alpha.18", "@volar/language-core@~2.4.0-alpha.18":
+  version "2.4.0-alpha.18"
+  resolved "https://registry.yarnpkg.com/@volar/language-core/-/language-core-2.4.0-alpha.18.tgz#dafffd68ac07c26d69de16741187fd4c06bfa345"
+  integrity sha512-JAYeJvYQQROmVRtSBIczaPjP3DX4QW1fOqW1Ebs0d3Y3EwSNRglz03dSv0Dm61dzd0Yx3WgTW3hndDnTQqgmyg==
   dependencies:
-    "@volar/source-map" "2.3.0"
+    "@volar/source-map" "2.4.0-alpha.18"
 
-"@volar/source-map@2.3.0":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-2.3.0.tgz#faf4df8f10ca40788f03c35eed3e2b7848110cc9"
-  integrity sha512-G/228aZjAOGhDjhlyZ++nDbKrS9uk+5DMaEstjvzglaAw7nqtDyhnQAsYzUg6BMP9BtwZ59RIw5HGePrutn00Q==
-  dependencies:
-    muggle-string "^0.4.0"
+"@volar/source-map@2.4.0-alpha.18":
+  version "2.4.0-alpha.18"
+  resolved "https://registry.yarnpkg.com/@volar/source-map/-/source-map-2.4.0-alpha.18.tgz#a2413932ff6b1821ae8efcbd9249d4da3f99f223"
+  integrity sha512-MTeCV9MUwwsH0sNFiZwKtFrrVZUK6p8ioZs3xFzHc2cvDXHWlYN3bChdQtwKX+FY2HG6H3CfAu1pKijolzIQ8g==
 
-"@volar/typescript@~2.3.0-alpha.15":
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/@volar/typescript/-/typescript-2.3.0.tgz#00306942e95e2e22fed8daf73ec386cd72601ecf"
-  integrity sha512-PtUwMM87WsKVeLJN33GSTUjBexlKfKgouWlOUIv7pjrOnTwhXHZNSmpc312xgXdTjQPpToK6KXSIcKu9sBQ5LQ==
+"@volar/typescript@~2.4.0-alpha.18":
+  version "2.4.0-alpha.18"
+  resolved "https://registry.yarnpkg.com/@volar/typescript/-/typescript-2.4.0-alpha.18.tgz#806aca9ce1bd7c48dc5fcd0fcf7f33bdd04e5b35"
+  integrity sha512-sXh5Y8sqGUkgxpMWUGvRXggxYHAVxg0Pa1C42lQZuPDrW6vHJPR0VCK8Sr7WJsAW530HuNQT/ZIskmXtxjybMQ==
   dependencies:
-    "@volar/language-core" "2.3.0"
+    "@volar/language-core" "2.4.0-alpha.18"
     path-browserify "^1.0.1"
     vscode-uri "^3.0.8"
 
@@ -609,14 +607,14 @@
     estree-walker "^2.0.2"
     source-map-js "^1.0.2"
 
-"@vue/compiler-core@3.4.27":
-  version "3.4.27"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.27.tgz#e69060f4b61429fe57976aa5872cfa21389e4d91"
-  integrity sha512-E+RyqY24KnyDXsCuQrI+mlcdW3ALND6U7Gqa/+bVwbcpcR3BRRIckFoz7Qyd4TTlnugtwuI7YgjbvsLmxb+yvg==
+"@vue/compiler-core@3.4.36":
+  version "3.4.36"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.36.tgz#4e28dfcbaa8a85e135f7a94c44372b6d52329e42"
+  integrity sha512-qBkndgpwFKdupmOPoiS10i7oFdN7a+4UNDlezD0GlQ1kuA1pNrscg9g12HnB5E8hrWSuEftRsbJhL1HI2zpJhg==
   dependencies:
-    "@babel/parser" "^7.24.4"
-    "@vue/shared" "3.4.27"
-    entities "^4.5.0"
+    "@babel/parser" "^7.24.7"
+    "@vue/shared" "3.4.36"
+    entities "^5.0.0"
     estree-walker "^2.0.2"
     source-map-js "^1.2.0"
 
@@ -628,13 +626,13 @@
     "@vue/compiler-core" "3.2.47"
     "@vue/shared" "3.2.47"
 
-"@vue/compiler-dom@3.4.27":
-  version "3.4.27"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.27.tgz#d51d35f40d00ce235d7afc6ad8b09dfd92b1cc1c"
-  integrity sha512-kUTvochG/oVgE1w5ViSr3KUBh9X7CWirebA3bezTbB5ZKBQZwR2Mwj9uoSKRMFcz4gSMzzLXBPD6KpCLb9nvWw==
+"@vue/compiler-dom@3.4.36":
+  version "3.4.36"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.36.tgz#32f5f65d1fb242211df2ddc65a336779cd8b974c"
+  integrity sha512-eEIjy4GwwZTFon/Y+WO8tRRNGqylaRlA79T1RLhUpkOzJ7EtZkkb8MurNfkqY6x6Qiu0R7ESspEF7GkPR/4yYg==
   dependencies:
-    "@vue/compiler-core" "3.4.27"
-    "@vue/shared" "3.4.27"
+    "@vue/compiler-core" "3.4.36"
+    "@vue/shared" "3.4.36"
 
 "@vue/compiler-dom@^3.4.0":
   version "3.4.21"
@@ -655,19 +653,19 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
-"@vue/compiler-sfc@3.4.27":
-  version "3.4.27"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.27.tgz#399cac1b75c6737bf5440dc9cf3c385bb2959701"
-  integrity sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==
+"@vue/compiler-sfc@3.4.36":
+  version "3.4.36"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.36.tgz#887809183a273dc0ef8337d5e84ef6a781727ccc"
+  integrity sha512-rhuHu7qztt/rNH90dXPTzhB7hLQT2OC4s4GrPVqmzVgPY4XBlfWmcWzn4bIPEWNImt0CjO7kfHAf/1UXOtx3vw==
   dependencies:
-    "@babel/parser" "^7.24.4"
-    "@vue/compiler-core" "3.4.27"
-    "@vue/compiler-dom" "3.4.27"
-    "@vue/compiler-ssr" "3.4.27"
-    "@vue/shared" "3.4.27"
+    "@babel/parser" "^7.24.7"
+    "@vue/compiler-core" "3.4.36"
+    "@vue/compiler-dom" "3.4.36"
+    "@vue/compiler-ssr" "3.4.36"
+    "@vue/shared" "3.4.36"
     estree-walker "^2.0.2"
     magic-string "^0.30.10"
-    postcss "^8.4.38"
+    postcss "^8.4.40"
     source-map-js "^1.2.0"
 
 "@vue/compiler-sfc@^3.2.47":
@@ -694,23 +692,31 @@
     "@vue/compiler-dom" "3.2.47"
     "@vue/shared" "3.2.47"
 
-"@vue/compiler-ssr@3.4.27":
-  version "3.4.27"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.27.tgz#2a8ecfef1cf448b09be633901a9c020360472e3d"
-  integrity sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==
+"@vue/compiler-ssr@3.4.36":
+  version "3.4.36"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.36.tgz#5881f9303ad6a4fdf04fb4238ebb483caf040707"
+  integrity sha512-Wt1zyheF0zVvRJyhY74uxQbnkXV2Le/JPOrAxooR4rFYKC7cFr+cRqW6RU3cM/bsTy7sdZ83IDuy/gLPSfPGng==
   dependencies:
-    "@vue/compiler-dom" "3.4.27"
-    "@vue/shared" "3.4.27"
+    "@vue/compiler-dom" "3.4.36"
+    "@vue/shared" "3.4.36"
+
+"@vue/compiler-vue2@^2.7.16":
+  version "2.7.16"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz#2ba837cbd3f1b33c2bc865fbe1a3b53fb611e249"
+  integrity sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==
+  dependencies:
+    de-indent "^1.0.2"
+    he "^1.2.0"
 
 "@vue/devtools-api@^6.5.0":
   version "6.5.0"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.0.tgz#98b99425edee70b4c992692628fa1ea2c1e57d07"
   integrity sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q==
 
-"@vue/devtools-api@^6.5.1":
-  version "6.6.1"
-  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.1.tgz#7c14346383751d9f6ad4bea0963245b30220ef83"
-  integrity sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==
+"@vue/devtools-api@^6.6.3":
+  version "6.6.3"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.6.3.tgz#b23a588154cba8986bba82b6e1d0248bde3fd1a0"
+  integrity sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw==
 
 "@vue/eslint-config-typescript@^13.0.0":
   version "13.0.0"
@@ -721,18 +727,19 @@
     "@typescript-eslint/parser" "^7.1.1"
     vue-eslint-parser "^9.3.1"
 
-"@vue/language-core@2.0.21":
-  version "2.0.21"
-  resolved "https://registry.yarnpkg.com/@vue/language-core/-/language-core-2.0.21.tgz#882667d0c9f07bc884f163e75eed666234df77fe"
-  integrity sha512-vjs6KwnCK++kIXT+eI63BGpJHfHNVJcUCr3RnvJsccT3vbJnZV5IhHR2puEkoOkIbDdp0Gqi1wEnv3hEd3WsxQ==
+"@vue/language-core@2.0.29":
+  version "2.0.29"
+  resolved "https://registry.yarnpkg.com/@vue/language-core/-/language-core-2.0.29.tgz#19462d786cd7a1c21dbe575b46970a57094e0357"
+  integrity sha512-o2qz9JPjhdoVj8D2+9bDXbaI4q2uZTHQA/dbyZT4Bj1FR9viZxDJnLcKVHfxdn6wsOzRgpqIzJEEmSSvgMvDTQ==
   dependencies:
-    "@volar/language-core" "~2.3.0-alpha.15"
+    "@volar/language-core" "~2.4.0-alpha.18"
     "@vue/compiler-dom" "^3.4.0"
+    "@vue/compiler-vue2" "^2.7.16"
     "@vue/shared" "^3.4.0"
     computeds "^0.0.1"
     minimatch "^9.0.3"
+    muggle-string "^0.4.1"
     path-browserify "^1.0.1"
-    vue-template-compiler "^2.7.14"
 
 "@vue/reactivity-transform@3.2.47":
   version "3.2.47"
@@ -745,37 +752,38 @@
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
-"@vue/reactivity@3.4.27":
-  version "3.4.27"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.27.tgz#6ece72331bf719953f5eaa95ec60b2b8d49e3791"
-  integrity sha512-kK0g4NknW6JX2yySLpsm2jlunZJl2/RJGZ0H9ddHdfBVHcNzxmQ0sS0b09ipmBoQpY8JM2KmUw+a6sO8Zo+zIA==
+"@vue/reactivity@3.4.36":
+  version "3.4.36"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.4.36.tgz#f0797308b1639db7f303e91fdd20577ad538a817"
+  integrity sha512-wN1aoCwSoqrt1yt8wO0gc13QaC+Vk1o6AoSt584YHNnz6TGDhh1NCMUYgAnvp4HEIkLdGsaC1bvu/P+wpoDEXw==
   dependencies:
-    "@vue/shared" "3.4.27"
+    "@vue/shared" "3.4.36"
 
-"@vue/runtime-core@3.4.27":
-  version "3.4.27"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.27.tgz#1b6e1d71e4604ba7442dd25ed22e4a1fc6adbbda"
-  integrity sha512-7aYA9GEbOOdviqVvcuweTLe5Za4qBZkUY7SvET6vE8kyypxVgaT1ixHLg4urtOlrApdgcdgHoTZCUuTGap/5WA==
+"@vue/runtime-core@3.4.36":
+  version "3.4.36"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.4.36.tgz#7d956671800b2567deebf4a5f92cb476404dfa94"
+  integrity sha512-9+TR14LAVEerZWLOm/N/sG2DVYhrH2bKgFrbH/FVt/Q8Jdw4OtdcGMRC6Tx8VAo0DA1eqAqrZaX0fbOaOxxZ4A==
   dependencies:
-    "@vue/reactivity" "3.4.27"
-    "@vue/shared" "3.4.27"
+    "@vue/reactivity" "3.4.36"
+    "@vue/shared" "3.4.36"
 
-"@vue/runtime-dom@3.4.27":
-  version "3.4.27"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.27.tgz#fe8d1ce9bbe8921d5dd0ad5c10df0e04ef7a5ee7"
-  integrity sha512-ScOmP70/3NPM+TW9hvVAz6VWWtZJqkbdf7w6ySsws+EsqtHvkhxaWLecrTorFxsawelM5Ys9FnDEMt6BPBDS0Q==
+"@vue/runtime-dom@3.4.36":
+  version "3.4.36"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.4.36.tgz#e4eeeba2cb2b9645de45eebd023939a35fff5e30"
+  integrity sha512-2Qe2fKkLxgZBVvHrG0QMNLL4bsx7Ae88pyXebY2WnQYABpOnGYvA+axMbcF9QwM4yxnsv+aELbC0eiNVns7mGw==
   dependencies:
-    "@vue/runtime-core" "3.4.27"
-    "@vue/shared" "3.4.27"
+    "@vue/reactivity" "3.4.36"
+    "@vue/runtime-core" "3.4.36"
+    "@vue/shared" "3.4.36"
     csstype "^3.1.3"
 
-"@vue/server-renderer@3.4.27":
-  version "3.4.27"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.27.tgz#3306176f37e648ba665f97dda3ce705687be63d2"
-  integrity sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==
+"@vue/server-renderer@3.4.36":
+  version "3.4.36"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.4.36.tgz#352138e6a31a5eeabcbb75e66f6919f607f8c870"
+  integrity sha512-2XW90Rq8+Y7S1EIsAuubZVLm0gCU8HYb5mRAruFdwfC3XSOU5/YKePz29csFzsch8hXaY5UHh7ZMddmi1XTJEA==
   dependencies:
-    "@vue/compiler-ssr" "3.4.27"
-    "@vue/shared" "3.4.27"
+    "@vue/compiler-ssr" "3.4.36"
+    "@vue/shared" "3.4.36"
 
 "@vue/shared@3.2.47":
   version "3.2.47"
@@ -787,10 +795,10 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.21.tgz#de526a9059d0a599f0b429af7037cd0c3ed7d5a1"
   integrity sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==
 
-"@vue/shared@3.4.27":
-  version "3.4.27"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.27.tgz#f05e3cd107d157354bb4ae7a7b5fc9cf73c63b50"
-  integrity sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==
+"@vue/shared@3.4.36":
+  version "3.4.36"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.36.tgz#7551f41684966acb6a307152b49a8308e7f69203"
+  integrity sha512-fdPLStwl1sDfYuUftBaUVn2pIrVFDASYerZSrlBvVBfylObPA1gtcWJHy5Ox8jLEJ524zBibss488Q3SZtU1uA==
 
 "@vue/tsconfig@^0.5.1":
   version "0.5.1"
@@ -802,15 +810,30 @@ acorn-jsx@^5.3.2:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn@^8.11.3, acorn@^8.8.0:
+acorn@^8.11.3:
   version "8.11.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a"
   integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
 
-acorn@^8.5.0, acorn@^8.8.2, acorn@^8.9.0:
-  version "8.11.2"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.2.tgz#ca0d78b51895be5390a5903c5b3bdcdaf78ae40b"
-  integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
+acorn@^8.12.0:
+  version "8.12.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.12.1.tgz#71616bdccbe25e27a54439e0046e89ca76df2248"
+  integrity sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==
+
+acorn@^8.5.0, acorn@^8.9.0:
+  version "8.10.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.10.0.tgz#8be5b3907a67221a81ab23c7889c4c5526b62ec5"
+  integrity sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==
+
+acorn@^8.8.0:
+  version "8.8.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
+  integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
+
+acorn@^8.8.2:
+  version "8.8.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
+  integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
 
 ajv@^6.12.4:
   version "6.12.6"
@@ -1136,6 +1159,11 @@ entities@^4.5.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
 
+entities@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-5.0.0.tgz#b2ab51fe40d995817979ec79dd621154c3c0f62b"
+  integrity sha512-BeJFvFRJddxobhvEdm5GqHzRV/X+ACeuw0/BuuxsCh1EUZcAIz8+kYmBp/LrQuloy6K1f3a0M7+IhmZ7QnkISA==
+
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -1218,34 +1246,34 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-esbuild@^0.20.1:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.20.2.tgz#9d6b2386561766ee6b5a55196c6d766d28c87ea1"
-  integrity sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==
+esbuild@^0.21.3:
+  version "0.21.5"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.21.5.tgz#9ca301b120922959b766360d8ac830da0d02997d"
+  integrity sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==
   optionalDependencies:
-    "@esbuild/aix-ppc64" "0.20.2"
-    "@esbuild/android-arm" "0.20.2"
-    "@esbuild/android-arm64" "0.20.2"
-    "@esbuild/android-x64" "0.20.2"
-    "@esbuild/darwin-arm64" "0.20.2"
-    "@esbuild/darwin-x64" "0.20.2"
-    "@esbuild/freebsd-arm64" "0.20.2"
-    "@esbuild/freebsd-x64" "0.20.2"
-    "@esbuild/linux-arm" "0.20.2"
-    "@esbuild/linux-arm64" "0.20.2"
-    "@esbuild/linux-ia32" "0.20.2"
-    "@esbuild/linux-loong64" "0.20.2"
-    "@esbuild/linux-mips64el" "0.20.2"
-    "@esbuild/linux-ppc64" "0.20.2"
-    "@esbuild/linux-riscv64" "0.20.2"
-    "@esbuild/linux-s390x" "0.20.2"
-    "@esbuild/linux-x64" "0.20.2"
-    "@esbuild/netbsd-x64" "0.20.2"
-    "@esbuild/openbsd-x64" "0.20.2"
-    "@esbuild/sunos-x64" "0.20.2"
-    "@esbuild/win32-arm64" "0.20.2"
-    "@esbuild/win32-ia32" "0.20.2"
-    "@esbuild/win32-x64" "0.20.2"
+    "@esbuild/aix-ppc64" "0.21.5"
+    "@esbuild/android-arm" "0.21.5"
+    "@esbuild/android-arm64" "0.21.5"
+    "@esbuild/android-x64" "0.21.5"
+    "@esbuild/darwin-arm64" "0.21.5"
+    "@esbuild/darwin-x64" "0.21.5"
+    "@esbuild/freebsd-arm64" "0.21.5"
+    "@esbuild/freebsd-x64" "0.21.5"
+    "@esbuild/linux-arm" "0.21.5"
+    "@esbuild/linux-arm64" "0.21.5"
+    "@esbuild/linux-ia32" "0.21.5"
+    "@esbuild/linux-loong64" "0.21.5"
+    "@esbuild/linux-mips64el" "0.21.5"
+    "@esbuild/linux-ppc64" "0.21.5"
+    "@esbuild/linux-riscv64" "0.21.5"
+    "@esbuild/linux-s390x" "0.21.5"
+    "@esbuild/linux-x64" "0.21.5"
+    "@esbuild/netbsd-x64" "0.21.5"
+    "@esbuild/openbsd-x64" "0.21.5"
+    "@esbuild/sunos-x64" "0.21.5"
+    "@esbuild/win32-arm64" "0.21.5"
+    "@esbuild/win32-ia32" "0.21.5"
+    "@esbuild/win32-x64" "0.21.5"
 
 escape-string-regexp@^1.0.5:
   version "1.0.5"
@@ -1268,10 +1296,10 @@ escodegen@^2.1.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-plugin-vue@^9.26.0:
-  version "9.26.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.26.0.tgz#bf7f5cce62c8f878059b91edae44d22974133af5"
-  integrity sha512-eTvlxXgd4ijE1cdur850G6KalZqk65k1JKoOI2d1kT3hr8sPD07j1q98FRFdNnpxBELGPWxZmInxeHGF/GxtqQ==
+eslint-plugin-vue@^9.27.0:
+  version "9.27.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.27.0.tgz#c22dae704a03d9ecefa81364ff89f60ce0481f94"
+  integrity sha512-5Dw3yxEyuBSXTzT5/Ge1X5kIkRTQ3nvBn/VwPwInNiZBSJOO/timWMUaflONnFBzU6NhB68lxnCda7ULV5N7LA==
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
     globals "^13.24.0"
@@ -1279,7 +1307,7 @@ eslint-plugin-vue@^9.26.0:
     nth-check "^2.1.1"
     postcss-selector-parser "^6.0.15"
     semver "^7.6.0"
-    vue-eslint-parser "^9.4.2"
+    vue-eslint-parser "^9.4.3"
     xml-name-validator "^4.0.0"
 
 eslint-scope@^7.1.1:
@@ -1290,10 +1318,10 @@ eslint-scope@^7.1.1:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
 
-eslint-scope@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-8.0.1.tgz#a9601e4b81a0b9171657c343fb13111688963cfc"
-  integrity sha512-pL8XjgP4ZOmmwfFE8mEhSxA7ZY4C+LWyqjQ3o4yWkkmD0qcMT9kkW3zWHOczhWcjTSgqycYAgwSlXvZltv65og==
+eslint-scope@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-8.0.2.tgz#5cbb33d4384c9136083a71190d548158fe128f94"
+  integrity sha512-6E4xmrTw5wtxnLA5wYL3WDfhZ/1bUBGOXV0zQvVRDOtrR8D0p6W7fs3JweNYhwRYeGvd/1CKX2se0/2s7Q/nJA==
   dependencies:
     esrecurse "^4.3.0"
     estraverse "^5.2.0"
@@ -1318,16 +1346,16 @@ eslint-visitor-keys@^4.0.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-4.0.0.tgz#e3adc021aa038a2a8e0b2f8b0ce8f66b9483b1fb"
   integrity sha512-OtIRv/2GyiF6o/d8K7MYKKbXrOUBIK6SfkIRM4Z0dY3w+LiQ0vy3F57m0Z71bjbyeiWFiHJ8brqnmE6H6/jEuw==
 
-eslint@^9.4.0:
-  version "9.4.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-9.4.0.tgz#79150c3610ae606eb131f1d648d5f43b3d45f3cd"
-  integrity sha512-sjc7Y8cUD1IlwYcTS9qPSvGjAC8Ne9LctpxKKu3x/1IC9bnOg98Zy6GxEJUfr1NojMgVPlyANXYns8oE2c1TAA==
+eslint@^9.8.0:
+  version "9.8.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-9.8.0.tgz#a4f4a090c8ea2d10864d89a6603e02ce9f649f0f"
+  integrity sha512-K8qnZ/QJzT2dLKdZJVX6W4XOwBzutMYmt0lqUS+JdXgd+HTYFlonFgkJ8s44d/zMPPCnOOk0kMWCApCPhiOy9A==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
-    "@eslint-community/regexpp" "^4.6.1"
-    "@eslint/config-array" "^0.15.1"
+    "@eslint-community/regexpp" "^4.11.0"
+    "@eslint/config-array" "^0.17.1"
     "@eslint/eslintrc" "^3.1.0"
-    "@eslint/js" "9.4.0"
+    "@eslint/js" "9.8.0"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@humanwhocodes/retry" "^0.3.0"
     "@nodelib/fs.walk" "^1.2.8"
@@ -1336,10 +1364,10 @@ eslint@^9.4.0:
     cross-spawn "^7.0.2"
     debug "^4.3.2"
     escape-string-regexp "^4.0.0"
-    eslint-scope "^8.0.1"
+    eslint-scope "^8.0.2"
     eslint-visitor-keys "^4.0.0"
-    espree "^10.0.1"
-    esquery "^1.4.2"
+    espree "^10.1.0"
+    esquery "^1.5.0"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
     file-entry-cache "^8.0.0"
@@ -1367,6 +1395,15 @@ espree@^10.0.1:
     acorn-jsx "^5.3.2"
     eslint-visitor-keys "^4.0.0"
 
+espree@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-10.1.0.tgz#8788dae611574c0f070691f522e4116c5a11fc56"
+  integrity sha512-M1M6CpiE6ffoigIOWYO9UDP8TMUw9kqb21tf+08IgDYjCsOvCuDt4jQcZmoYxx+w7zlKw9/N0KXfto+I8/FrXA==
+  dependencies:
+    acorn "^8.12.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^4.0.0"
+
 espree@^9.0.0:
   version "9.6.1"
   resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
@@ -1390,10 +1427,17 @@ esprima@^4.0.1:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.4.0, esquery@^1.4.2:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
-  integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
+esquery@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
+  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+  dependencies:
+    estraverse "^5.1.0"
+
+esquery@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.6.0.tgz#91419234f804d852a82dceec3e16cdc22cf9dae7"
+  integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
   dependencies:
     estraverse "^5.1.0"
 
@@ -2008,7 +2052,7 @@ minimatch@9.0.3, minimatch@^9.0.3:
   dependencies:
     brace-expansion "^2.0.1"
 
-minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.2:
+minimatch@^3.0.4, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -2035,7 +2079,7 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-muggle-string@^0.4.0:
+muggle-string@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/muggle-string/-/muggle-string-0.4.1.tgz#3b366bd43b32f809dc20659534dd30e7c8a0d328"
   integrity sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==
@@ -2205,6 +2249,11 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
+picocolors@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1"
+  integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==
+
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
@@ -2251,13 +2300,22 @@ postcss@^8.1.10:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-postcss@^8.4.14, postcss@^8.4.38:
-  version "8.4.38"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.38.tgz#b387d533baf2054288e337066d81c6bee9db9e0e"
-  integrity sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==
+postcss@^8.4.14, postcss@^8.4.39:
+  version "8.4.41"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.41.tgz#d6104d3ba272d882fe18fc07d15dc2da62fa2681"
+  integrity sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==
   dependencies:
     nanoid "^3.3.7"
-    picocolors "^1.0.0"
+    picocolors "^1.0.1"
+    source-map-js "^1.2.0"
+
+postcss@^8.4.40:
+  version "8.4.40"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.40.tgz#eb81f2a4dd7668ed869a6db25999e02e9ad909d8"
+  integrity sha512-YF2kKIUzAofPMpfH6hOi2cGnv/HrUlfucspc7pDyvv7kGdqXrfj8SCl/t8owkEgKEuu8ZcRjSOxFxVLqwChZ2Q==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.1"
     source-map-js "^1.2.0"
 
 prelude-ls@^1.2.1:
@@ -2270,6 +2328,11 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
   integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
+prettier@^3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.3.3.tgz#30c54fe0be0d8d12e6ae61dbb10109ea00d53105"
+  integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
+
 pulltorefreshjs@^0.1.22:
   version "0.1.22"
   resolved "https://registry.yarnpkg.com/pulltorefreshjs/-/pulltorefreshjs-0.1.22.tgz#ddb5e3feee0b2a49fd46e1b18e84fffef2c47ac0"
@@ -2387,10 +2450,10 @@ safe-regex-test@^1.0.0:
     es-errors "^1.3.0"
     is-regex "^1.1.4"
 
-sass@^1.77.4:
-  version "1.77.4"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.4.tgz#92059c7bfc56b827c56eb116778d157ec017a5cd"
-  integrity sha512-vcF3Ckow6g939GMA4PeU7b2K/9FALXk2KF9J87txdHzXbUF9XRQRwSxcAs/fGaTnJeBFd7UoV22j3lzMLdM0Pw==
+sass@^1.77.6:
+  version "1.77.6"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.6.tgz#898845c1348078c2e6d1b64f9ee06b3f8bd489e4"
+  integrity sha512-ByXE1oLD79GVq9Ht1PeHWCPMPB8XHpBuz1r85oByKHjZY6qV6rWnQovQzXJXuQ/XyE1Oj3iPk3lo28uzaRA2/Q==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
@@ -2617,10 +2680,10 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
-terser@^5.31.1:
-  version "5.31.1"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.31.1.tgz#735de3c987dd671e95190e6b98cfe2f07f3cf0d4"
-  integrity sha512-37upzU1+viGvuFtBo9NPufCb9dwM0+l9hMxYyWfBA+fbwrPqNJAhbZ6W47bBFnZHKHTUBnMvi87434qq+qnxOg==
+terser@^5.31.3:
+  version "5.31.3"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.31.3.tgz#b24b7beb46062f4653f049eea4f0cd165d0f0c38"
+  integrity sha512-pAfYn3NIZLyZpa83ZKigvj6Rn9c/vd5KfYGX7cN1mnzqgDcxWvrU5ZtAfIKhEXz9nRecw4z3LXkjaq96/qZqAA==
   dependencies:
     "@jridgewell/source-map" "^0.3.3"
     acorn "^8.8.2"
@@ -2707,10 +2770,10 @@ typed-array-length@^1.0.4:
     is-typed-array "^1.1.13"
     possible-typed-array-names "^1.0.0"
 
-typescript@^5.4.5:
-  version "5.4.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.4.5.tgz#42ccef2c571fdbd0f6718b1d1f5e6e5ef006f611"
-  integrity sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==
+typescript@^5.5.4:
+  version "5.5.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.4.tgz#d9852d6c82bad2d2eda4fd74a5762a8f5909e9ba"
+  integrity sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==
 
 ufo@^1.3.2:
   version "1.4.0"
@@ -2727,10 +2790,10 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
-undici-types@~5.26.4:
-  version "5.26.5"
-  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
-  integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
+undici-types@~6.13.0:
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.13.0.tgz#e3e79220ab8c81ed1496b5812471afd7cf075ea5"
+  integrity sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==
 
 universalify@^2.0.0:
   version "2.0.1"
@@ -2781,13 +2844,13 @@ vite-plugin-css-injected-by-js@^3.5.1:
   resolved "https://registry.yarnpkg.com/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-3.5.1.tgz#b9c568c21b131d08e31aa6d368ee39c9d6c1b6c1"
   integrity sha512-9ioqwDuEBxW55gNoWFEDhfLTrVKXEEZgl5adhWmmqa88EQGKfTmexy4v1Rh0pAS6RhKQs2bUYQArprB32JpUZQ==
 
-vite@^5.2.13:
-  version "5.2.13"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-5.2.13.tgz#945ababcbe3d837ae2479c29f661cd20bc5e1a80"
-  integrity sha512-SSq1noJfY9pR3I1TUENL3rQYDQCFqgD+lM6fTRAM8Nv6Lsg5hDLaXkjETVeBt+7vZBCMoibD+6IWnT2mJ+Zb/A==
+vite@^5.3.5:
+  version "5.3.5"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-5.3.5.tgz#b847f846fb2b6cb6f6f4ed50a830186138cb83d8"
+  integrity sha512-MdjglKR6AQXQb9JGiS7Rc2wC6uMjcm7Go/NHNO63EwiJXfuk9PgqiP/n5IDJCziMkfw9n4Ubp7lttNwz+8ZVKA==
   dependencies:
-    esbuild "^0.20.1"
-    postcss "^8.4.38"
+    esbuild "^0.21.3"
+    postcss "^8.4.39"
     rollup "^4.13.0"
   optionalDependencies:
     fsevents "~2.3.3"
@@ -2810,10 +2873,10 @@ vue-eslint-parser@^9.3.1:
     lodash "^4.17.21"
     semver "^7.3.6"
 
-vue-eslint-parser@^9.4.2:
-  version "9.4.2"
-  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.4.2.tgz#02ffcce82042b082292f2d1672514615f0d95b6d"
-  integrity sha512-Ry9oiGmCAK91HrKMtCrKFWmSFWvYkpGglCeFAIqDdr9zdXmMMpJOmUJS7WWsW7fX81h6mwHmUZCQQ1E0PkSwYQ==
+vue-eslint-parser@^9.4.3:
+  version "9.4.3"
+  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz#9b04b22c71401f1e8bca9be7c3e3416a4bde76a8"
+  integrity sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==
   dependencies:
     debug "^4.3.4"
     eslint-scope "^7.1.1"
@@ -2837,28 +2900,20 @@ vue-i18n@^9.13.1:
     "@intlify/shared" "9.13.1"
     "@vue/devtools-api" "^6.5.0"
 
-vue-router@^4.3.3:
-  version "4.3.3"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.3.3.tgz#7505509d429a36694b12ba1f6530016c5ce5f6bf"
-  integrity sha512-8Q+u+WP4N2SXY38FDcF2H1dUEbYVHVPtPCPZj/GTZx8RCbiB8AtJP9+YIxn4Vs0svMTNQcLIzka4GH7Utkx9xQ==
+vue-router@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.4.2.tgz#bc7bf27f108fc15e5cc2a30b314a662275e2b2bb"
+  integrity sha512-1qNybkn2L7QsLzaXs8nvlQmRKp8XF8DCxZys/Jr1JpQcHsKUxTKzTxCVA1G7NfBfwRIBgCJPoujOG5lHCCNUxw==
   dependencies:
-    "@vue/devtools-api" "^6.5.1"
+    "@vue/devtools-api" "^6.6.3"
 
-vue-template-compiler@^2.7.14:
-  version "2.7.16"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz#c81b2d47753264c77ac03b9966a46637482bb03b"
-  integrity sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==
+vue-tsc@^2.0.29:
+  version "2.0.29"
+  resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-2.0.29.tgz#bf7e9605af9fadec7fd6037d242217f5c6ad2c3b"
+  integrity sha512-MHhsfyxO3mYShZCGYNziSbc63x7cQ5g9kvijV7dRe1TTXBRLxXyL0FnXWpUF1xII2mJ86mwYpYsUmMwkmerq7Q==
   dependencies:
-    de-indent "^1.0.2"
-    he "^1.2.0"
-
-vue-tsc@^2.0.21:
-  version "2.0.21"
-  resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-2.0.21.tgz#c574a2c20e8a5e5643af546c6051319cdf983239"
-  integrity sha512-E6x1p1HaHES6Doy8pqtm7kQern79zRtIewkf9fiv7Y43Zo4AFDS5hKi+iHi2RwEhqRmuiwliB1LCEFEGwvxQnw==
-  dependencies:
-    "@volar/typescript" "~2.3.0-alpha.15"
-    "@vue/language-core" "2.0.21"
+    "@volar/typescript" "~2.4.0-alpha.18"
+    "@vue/language-core" "2.0.29"
     semver "^7.5.4"
 
 vue3-calendar-heatmap@^2.0.5:
@@ -2874,16 +2929,16 @@ vue@^2.6.10:
     "@vue/compiler-sfc" "2.7.16"
     csstype "^3.1.0"
 
-vue@^3.4.27:
-  version "3.4.27"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.27.tgz#40b7d929d3e53f427f7f5945386234d2854cc2a1"
-  integrity sha512-8s/56uK6r01r1icG/aEOHqyMVxd1bkYcSe9j8HcKtr/xTOFWvnzIVTehNW+5Yt89f+DLBe4A569pnZLS5HzAMA==
+vue@^3.4.35:
+  version "3.4.36"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.4.36.tgz#b2d9af110c8e9afdf08f4eec0d9196949877447c"
+  integrity sha512-mIFvbLgjODfx3Iy1SrxOsiPpDb8Bo3EU+87ioimOZzZTOp15IEdAels70IjBOLO3ZFlLW5AhdwY4dWbXVQKYow==
   dependencies:
-    "@vue/compiler-dom" "3.4.27"
-    "@vue/compiler-sfc" "3.4.27"
-    "@vue/runtime-dom" "3.4.27"
-    "@vue/server-renderer" "3.4.27"
-    "@vue/shared" "3.4.27"
+    "@vue/compiler-dom" "3.4.36"
+    "@vue/compiler-sfc" "3.4.36"
+    "@vue/runtime-dom" "3.4.36"
+    "@vue/server-renderer" "3.4.36"
+    "@vue/shared" "3.4.36"
 
 webpack-sources@^3.2.3:
   version "3.2.3"