From d0ba065f70d5ed2dd20d34c8e8e94168f1b69d29 Mon Sep 17 00:00:00 2001
From: Bernhard Kirchen <schlimmchen@posteo.net>
Date: Sat, 28 Sep 2024 21:35:18 +0200
Subject: [PATCH] webapp: optimize syslog settings

* avoid duplicate id for hostname input
* hide server and port inputs if syslog disabled
---
 webapp/src/locales/de.json            |  3 ++-
 webapp/src/locales/en.json            |  3 ++-
 webapp/src/views/NetworkAdminView.vue | 30 ++++++++++++++-------------
 3 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/webapp/src/locales/de.json b/webapp/src/locales/de.json
index 140b18b0d..d050860b8 100644
--- a/webapp/src/locales/de.json
+++ b/webapp/src/locales/de.json
@@ -511,7 +511,8 @@
         "MdnsSettings": "mDNS-Einstellungen",
         "EnableSyslog": "Syslog aktivieren",
         "SyslogSettings": "Syslog-Einstellungen",
-        "Port": "Port:"
+        "SyslogHostname": "Syslog Server",
+        "SyslogPort": "Port"
     },
     "mqttadmin": {
         "MqttSettings": "MQTT-Einstellungen",
diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
index 9d1bebedc..bb4d5f299 100644
--- a/webapp/src/locales/en.json
+++ b/webapp/src/locales/en.json
@@ -513,7 +513,8 @@
         "MdnsSettings": "mDNS Settings",
         "EnableSyslog": "Enable Syslog",
         "SyslogSettings": "Syslog Settings",
-        "Port": "Port:"
+        "SyslogHostname": "Syslog Server",
+        "SyslogPort": "Port"
     },
     "mqttadmin": {
         "MqttSettings": "MQTT Settings",
diff --git a/webapp/src/views/NetworkAdminView.vue b/webapp/src/views/NetworkAdminView.vue
index 8c3da6977..058dfe322 100644
--- a/webapp/src/views/NetworkAdminView.vue
+++ b/webapp/src/views/NetworkAdminView.vue
@@ -89,20 +89,22 @@
                     type="checkbox"
                 />
 
-                <InputElement
-                    :label="$t('networkadmin.Hostname', { num: 1 })"
-                    v-model="networkConfigList.sysloghostname"
-                    type="text"
-                    maxlength="128"
-                />
-
-                <InputElement
-                    :label="$t('networkadmin.Port')"
-                    v-model="networkConfigList.syslogport"
-                    type="number"
-                    min="1"
-                    max="65535"
-                />
+                <div v-if="networkConfigList.syslogenabled">
+                    <InputElement
+                        :label="$t('networkadmin.SyslogHostname')"
+                        v-model="networkConfigList.sysloghostname"
+                        type="text"
+                        maxlength="128"
+                    />
+
+                    <InputElement
+                        :label="$t('networkadmin.SyslogPort')"
+                        v-model="networkConfigList.syslogport"
+                        type="number"
+                        min="1"
+                        max="65535"
+                    />
+                </div>
             </CardElement>
 
             <CardElement :text="$t('networkadmin.AdminAp')" textVariant="text-bg-primary" add-space>