srv/poe_manager/templates/index.html aktualisiert

srv/poe_manager/templates/index.html

@@ -7,31 +7,71 @@
         Nächste Prüfung in -- Sekunden
     </span>
 </h2>
-<div class="row g-3">
+#<div class="row g-3">
+#    {% for d in devices %}
+#    <div class="col-6 col-md-4 col-lg-3 col-xl-2">
+#        <div class="card text-center p-2"
+#     {% if last_seen.get(d[0]) %}
+#         title="{{ last_seen[d[0]] }}"
+#     {% elif status[d[0]] == 'offline' %}
+#         title="Noch nie online"
+#     {% endif %}>
+#            <div class="card-header">{{ d[1] }}</div>
+#            <div class="card-body">
+#                <span class="fw-bold" style="color: 
+#                    {% if d[2] == 0 %}gray
+#                    {% elif status[d[0]] == 'online' %}green
+#                    {% else %}red
+#                    {% endif %};">
+#                    {% if d[2] == 0 %}
+#                        Deaktiviert
+#                    {% else %}
+#                        {% if status[d[0]] %}{{ status[d[0]]|capitalize }}{% else %}Unbekannt{% endif %}
+#                    {% endif %}
+#                </span>
+#            </div>
+#        </div>
+#    </div>
+#    {% endfor %}
+#</div>
+<div class="container">
+    {% set current_prefix = None %}
+    <div class="row row-cols-1 row-cols-md-6 g-3">
     {% for d in devices %}
-    <div class="col-6 col-md-4 col-lg-3 col-xl-2">
-        <div class="card text-center p-2"
-     {% if last_seen.get(d[0]) %}
-         title="{{ last_seen[d[0]] }}"
-     {% elif status[d[0]] == 'offline' %}
-         title="Noch nie online"
-     {% endif %}>
-            <div class="card-header">{{ d[1] }}</div>
-            <div class="card-body">
-                <span class="fw-bold" style="color: 
-                    {% if d[2] == 0 %}gray
-                    {% elif status[d[0]] == 'online' %}green
-                    {% else %}red
-                    {% endif %};">
-                    {% if d[2] == 0 %}
-                        Deaktiviert
-                    {% else %}
-                        {% if status[d[0]] %}{{ status[d[0]]|capitalize }}{% else %}Unbekannt{% endif %}
-                    {% endif %}
-                </span>
+        {% set prefix = d[1][:3] %} {# die ersten 3 Buchstaben #}
+        
+        {% if current_prefix != prefix %}
+            {% if not loop.first %}
+                </div> {# vorige Reihe schließen #}
+            {% endif %}
+            <div class="row row-cols-1 row-cols-md-6 g-3"> {# neue Reihe starten #}
+            {% set current_prefix = prefix %}
+        {% endif %}
+
+        <div class="col">
+            <div class="card text-center p-2"
+                 {% if last_seen.get(d[0]) %} title="{{ last_seen[d[0]] }}" 
+                 {% elif status[d[0]] == 'offline' %} title="Noch nie online" {% endif %}>
+                <div class="card-header">{{ d[1] }}</div>
+                <div class="card-body">
+                    <span class="fw-bold" style="color: 
+                        {% if d[2] == 0 %}gray
+                        {% elif status[d[0]] == 'online' %}green
+                        {% else %}red
+                        {% endif %};">
+                        {% if d[2] == 0 %}
+                            Deaktiviert
+                        {% else %}
+                            {% if status[d[0]] %}{{ status[d[0]]|capitalize }}{% else %}Unbekannt{% endif %}
+                        {% endif %}
+                    </span>
+                </div>
             </div>
         </div>
-    </div>
+
+        {% if loop.last %}
+            </div> {# letzte Reihe schließen #}
+        {% endif %}
     {% endfor %}
 </div>
 <script>