From 4371f3dadb58504b47fbb03d9c4183f7eec54edf Mon Sep 17 00:00:00 2001
From: Stefan Allius <122395479+s-allius@users.noreply.github.com>
Date: Tue, 13 May 2025 21:38:33 +0200
Subject: [PATCH] S allius/issue396 (#412)

* add title to table icons

* optimize datetime formatting

* change icons

* translate n/a
---
 app/src/web/conn_table.py                   | 21 +++++++++++----------
 app/src/web/mqtt_table.py                   |  7 +++++--
 app/src/web/templates/page_mqtt.html.j2     |  6 +++---
 app/translations/de/LC_MESSAGES/messages.po |  6 +++++-
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/app/src/web/conn_table.py b/app/src/web/conn_table.py
index 4b81868..35d221d 100644
--- a/app/src/web/conn_table.py
+++ b/app/src/web/conn_table.py
@@ -10,39 +10,40 @@ from .log_handler import LogHandler
 def _get_device_icon(client_mode: bool):
     '''returns the icon for the device conntection'''
     if client_mode:
-        return 'fa-download fa-rotate-180'
+        return 'fa-download fa-rotate-180', 'Server Mode'
 
-    return 'fa-upload fa-rotate-180'
+    return 'fa-upload fa-rotate-180', 'Client Mode'
 
 
 def _get_cloud_icon(emu_mode: bool):
     '''returns the icon for the cloud conntection'''
     if emu_mode:
-        return 'fa-cloud-arrow-up-alt'
+        return 'fa-cloud-arrow-up-alt', 'Emu Mode'
 
-    return 'fa-cloud'
+    return 'fa-cloud', 'Proxy Mode'
 
 
 def _get_row(inv: InverterBase):
     '''build one row for the connection table'''
     client_mode = inv.client_mode
     inv_serial = inv.local.stream.inv_serial
-    icon1 = _get_device_icon(client_mode)
+    icon1, descr1 = _get_device_icon(client_mode)
     ip1, port1 = inv.addr
     icon2 = ''
+    descr2 = ''
     ip2 = '--'
     port2 = '--'
 
     if inv.remote.ifc:
         ip2, port2 = inv.remote.ifc.r_addr
-        icon2 = _get_cloud_icon(client_mode)
+        icon2, descr2 = _get_cloud_icon(client_mode)
 
     row = []
-    row.append(f'<i class="fa {icon1}"></i> {ip1}:{port1}')
-    row.append(f'<i class="fa {icon1}"></i> {ip1}')
+    row.append(f'<i class="fa {icon1}" title="{_(descr1)}"></i> {ip1}:{port1}')
+    row.append(f'<i class="fa {icon1}" title="{_(descr1)}"></i> {ip1}')
     row.append(inv_serial)
-    row.append(f'<i class="fa {icon2}"></i> {ip2}:{port2}')
-    row.append(f'<i class="fa {icon2}"></i> {ip2}')
+    row.append(f'<i class="fa {icon2}" title="{_(descr2)}"></i> {ip2}:{port2}')
+    row.append(f'<i class="fa {icon2}" title="{_(descr2)}"></i> {ip2}')
     return row
 
 
diff --git a/app/src/web/mqtt_table.py b/app/src/web/mqtt_table.py
index 8370c17..8530ef3 100644
--- a/app/src/web/mqtt_table.py
+++ b/app/src/web/mqtt_table.py
@@ -46,10 +46,13 @@ def get_table_data():
 @web.route('/mqtt-fetch')
 async def mqtt_fetch():
     mqtt = Mqtt(None)
-    ctime = format_datetime(dt=mqtt.ctime, format='short')
+    cdatetime = format_datetime(dt=mqtt.ctime, format='d.MM. HH:mm')
     data = {
         "update-time": format_datetime(format="medium"),
-        "mqtt-ctime": f"<h3>{ctime}</h3>",
+        "mqtt-ctime": f"""
+<h3 class="w3-hide-small w3-hide-medium">{cdatetime}</h3>
+<h4 class="w3-hide-large">{cdatetime}</h4>
+""",
         "mqtt-tx": f"<h3>{mqtt.published}</h3>",
         "mqtt-rx": f"<h3>{mqtt.received}</h3>",
     }
diff --git a/app/src/web/templates/page_mqtt.html.j2 b/app/src/web/templates/page_mqtt.html.j2
index 0f23492..9a1d181 100644
--- a/app/src/web/templates/page_mqtt.html.j2
+++ b/app/src/web/templates/page_mqtt.html.j2
@@ -8,7 +8,7 @@
     <div class="w3-third">
       <div class="w3-card-4">
       <div class="w3-container w3-indigo w3-padding-16">
-        <div class="w3-left"><i class="fa fa-link w3-xxxlarge"></i></div>
+        <div class="w3-left"><i class="fa fa-business-time w3-xxxlarge"></i></div>
         <div id = "mqtt-ctime" class="w3-right">
           <h3>-</h3>
         </div>
@@ -21,7 +21,7 @@
     <div class="w3-third">
       <div class="w3-card-4">
       <div class="w3-container w3-purple w3-padding-16">
-        <div class="w3-left"><i class="fa fa-server w3-xxxlarge"></i></div>
+        <div class="w3-left"><i class="fa fa-angle-double-right w3-xxxlarge"></i></div>
         <div id = "mqtt-tx" class="w3-right">
           <h3>-</h3>
         </div>
@@ -34,7 +34,7 @@
     <div class="w3-third">
       <div class="w3-card-4">
       <div class="w3-container w3-orange w3-text-white w3-padding-16">
-        <div class="w3-left"><i class="fa fa-user w3-xxxlarge"></i></div>
+        <div class="w3-left"><i class="fa fa-angle-double-left w3-xxxlarge"></i></div>
         <div id = "mqtt-rx" class="w3-right">
           <h3>-</h3>
         </div>
diff --git a/app/translations/de/LC_MESSAGES/messages.po b/app/translations/de/LC_MESSAGES/messages.po
index 8daf333..2bbbb99 100644
--- a/app/translations/de/LC_MESSAGES/messages.po
+++ b/app/translations/de/LC_MESSAGES/messages.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: tsun-gen3-proxy 0.14.0\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2025-05-04 18:16+0200\n"
+"POT-Creation-Date: 2025-05-13 20:55+0200\n"
 "PO-Revision-Date: 2025-04-18 16:24+0200\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: de\n"
@@ -43,6 +43,10 @@ msgstr "Cloud-IP:Port"
 msgid "Cloud-IP"
 msgstr "Cloud-IP"
 
+#: src/web/log_files.py:48
+msgid "n/a"
+msgstr "keine Angabe"
+
 #: src/web/mqtt_table.py:27
 msgid "MQTT devices"
 msgstr "MQTT Geräte"