[ui] Improve patch table with visual patching indicator

Instead of a definition list, we now have a compressed table where being patched or not is hinted at with a grey horizontal line. If unpatched, it terminates at an „x“ symbol, and if patched, it terminates at a switch icon with information about the switch port as before.
agdsn · Sep 18, 2023 · af930b7 · af930b7
1 parent 5567a54
commit af930b7
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 24 deletions.
diff --git a/web/resources/css/style.css b/web/resources/css/style.css
@@ -532,3 +532,13 @@ tr.row-membership-inactive {
 #toast.show {
   visibility: visible;
 }
+
+/* Room stuff */
+.patch-line {
+    margin: 5px;
+    min-height:3px;
+    min-width: 10em;
+    background-color: var(--bs-list-group-border-color);
+    background-position: 0 center;
+    background-size: 100% 2px;
+}
diff --git a/web/templates/facilities/room_show.html b/web/templates/facilities/room_show.html
@@ -90,33 +90,43 @@ <h3>Bewohner history</h3>
     <section id="patchports">
         <h2 class="page-header">Patchports</h2>
         {% if ports %}
-        <ul class="list-unstyled">
+        <ul class="list-group">
             {% for port in ports %}
-            <li><dl class="dl-horizontal">
-                <dt>Patchpanel-Port</dt>
-                <dd>{{ port.name }}</dd>
-
-                {% if port.switch_port %}
-                <dt>Gepatched zu</dt>
-                <dd><a href={{ url_for('infrastructure.switch_show',
-                                       switch_id=port.switch_port.switch.host_id) }}>
-                        {{ port.switch_port.switch.host.name }}/{{ port.switch_port.name }}
-                </a></dd>
-
+            <li class="list-group-item">
+              <!-- flex for easy vertical centering of the rectangle -->
+              <span class="d-flex align-items-center">
+                <span>
+                <i class="fa fa-ethernet mx-1"></i>
+                <a href="{{ url_for("facilities.room_show", room_id=port.switch_room_id) }}">{{ port.name }}</a>
+                </span>
+                <span class="patch-line"></span>
+                <span>
+                  {% if port.switch_port %}
+                  <i class="fa fa-solid fa-server mx-1"></i>
+                  <a href={{ url_for('infrastructure.switch_show', switch_id=port.switch_port.switch.host_id) }}>
+                    {{ port.switch_port.switch.host.name }}
+                  </a>
+                  / {{ port.switch_port.name }}
+                  {% else %}
+                  <i class="fa-solid fa-xmark"></i>
+                  {% endif %}
+                </span>
+              </span>
+              {% if port.switch_port %}
+              <span><ul>
                 {% for vlan in port.switch_port.default_vlans %}
-                <dt><a href="{{ url_for('infrastructure.subnets') }}">Subnets</a>
-                    (VLAN <code>{{ vlan.name }}</code>)</dt>
-                <dd>
-                    {% for subnet in vlan.subnets %}
-                        {{ subnet.address | string }}
-                    {% endfor %}
-                </dd>
+                <li>
+                  {% if vlan.subnets %}
+                  <code>{{ vlan.subnets | map(attribute="address") | map("string") | join(", ") }}</code>
+                  <small>(von VLAN <code>{{ vlan.name }}</code>)</small>
+                  {% else %}
+                  <small class="text-muted">keine Subnets von VLAN <code>{{ vlan.name }}</code></small>
+                  {% endif %}
+                </li>
                 {% endfor %}
-
-                {% else %}
-                    <dt>Gepatched zu</dt><dd><span class="text-muted">Ungepatched</span></dd>
-                {% endif %}
-            </dl></li>
+              </ul></span>
+              {% endif %}
+            </li>
             {% endfor %}
         </ul>
         {% else %}