implement grouping to the web ui

script-api.py

@@ -1301,7 +1301,8 @@ def timeout_result(
 
 def render_index():
 
-    cards = []
+    groups = {}
+
 
     for command_id, command in CONFIG["commands"].items():
 
@@ -1312,60 +1313,108 @@ def render_index():
             continue
 
 
-        title = html.escape(
-            command.get(
-                "web_title",
-                command_id
-            )
+        title = command.get(
+            "web_title",
+            command_id
         )
 
 
-        description = html.escape(
-            command.get(
-                "description",
-                ""
-            )
+        description = command.get(
+            "description",
+            ""
         )
 
 
-        cards.append(
-            f"""
-<div class="card">
+        # Gruppe anhand des ersten Wortes
+        group_name = title.split(
+            " ",
+            1
+        )[0]
 
+
+        groups.setdefault(
+            group_name,
+            []
+        )
+
+
+        groups[group_name].append(
+            {
+                "id": command_id,
+                "title": title,
+                "description": description
+            }
+        )
+
+
+
+    sections = []
+
+
+    for group_name, commands in sorted(
+        groups.items()
+    ):
+
+
+        buttons = []
+
+
+        for cmd in commands:
+
+
+            buttons.append(
+                f"""
 <form method="post"
-      action="/web/run/{command_id}">
-
+      action="/web/run/{html.escape(cmd["id"])}">
 
 <input type="hidden"
        name="csrf"
        value="{WEB_CSRF_TOKEN}">
 
 
-<div class="card-title">
-{title}
-</div>
+<button class="action-button"
+        type="submit">
 
+{html.escape(cmd["title"])}
 
-<div class="card-description">
-{description}
-</div>
-
-
-<button type="submit">
-▶ Ausführen
 </button>
 
-
 </form>
+"""
+            )
+
+
+
+        sections.append(
+            f"""
+
+<div class="group-card">
+
+
+<div class="group-title">
+
+{html.escape(group_name)}
 
 </div>
+
+
+<div class="button-grid">
+
+{"".join(buttons)}
+
+</div>
+
+
+</div>
+
 """
         )
 
 
-    if not cards:
 
-        cards.append(
+    if not sections:
+
+        sections.append(
             """
 <div class="empty">
 Keine Befehle verfügbar.
@@ -1374,23 +1423,14 @@ Keine Befehle verfügbar.
         )
 
 
+
     return render_page(
 
         "IR Steuerung",
 
-        """
-<div class="grid">
-"""
-        +
-        "\n".join(cards)
-        +
-        """
-</div>
-"""
+        "\n".join(sections)
 
     )
-
-
 def render_page(
     title,
     body
@@ -1579,6 +1619,70 @@ h1 {{
 
 }}
 
+.group-card {{}
+
+    background:
+    var(--card);
+
+    border-radius:
+    16px;
+
+    padding:
+    20px;
+
+    margin-bottom:
+    25px;
+
+}}
+
+
+
+.group-title {{}
+
+    font-size:
+    1.4rem;
+
+    font-weight:
+    700;
+
+    margin-bottom:
+    15px;
+
+}}
+
+
+
+.button-grid {{
+
+    display:
+    grid;
+
+    grid-template-columns:
+    repeat(
+        auto-fit,
+        minmax(
+            150px,
+            1fr
+        )
+    );
+
+    gap:
+    12px;
+
+}}
+
+
+
+.action-button {{
+
+    width:
+    100%;
+
+    margin:
+    0;
+
+}}
+
 
 
 button {{