grouping online/offline cameras by those connected to bridges and those without bridge_id

templates/cameras_partial.html

@@ -4,7 +4,13 @@
     <h3>Online</h3>
     <ul>
     {% for camera in template_values['cameras'] %}
-        {% if camera.is_online() %}
+        {% if camera.is_online() and camera.bridge_id %}
+            <li hx-get="/camera/{{ camera.id }}" hx-trigger="click" hx-target="#camera_detail"> {{ camera.name }}</li>
+        {% endif %}
+    {% endfor %}
+    <hr>
+    {% for camera in template_values['cameras'] %}
+        {% if camera.is_online() and camera.bridge_id == None %}
             <li hx-get="/camera/{{ camera.id }}" hx-trigger="click" hx-target="#camera_detail"> {{ camera.name }}</li>
         {% endif %}
     {% endfor %}
@@ -13,11 +19,18 @@
     <h3>Offline</h3>
     <ul>
     {% for camera in template_values['cameras'] %}
-        {% if not camera.is_online() %}
+        {% if camera.is_offline() %}
+            <li hx-get="/camera/{{ camera.id }}" hx-trigger="click" hx-target="#camera_detail"> {{ camera.name }}</li>
+        {% endif %}
+    {% endfor %}
+    <hr>
+    {% for camera in template_values['cameras'] %}
+        {% if camera.is_offline() and camera.bridge_id == None %}
             <li hx-get="/camera/{{ camera.id }}" hx-trigger="click" hx-target="#camera_detail"> {{ camera.name }}</li>
         {% endif %}
     {% endfor %}
     </ul>
+
     <div class="col-md-6 offset-3">
          <button hx-get="/cameras" hx-trigger="click" hx-target="#camera_list">refresh</button>
     </div>