feat(svg): add partial connection indicator for SVG renderer (#62)

Introduces a third connection state for the SVG rendering path:
- Full connection  (green) — both cable ends resolve to a device
- Partial connection (yellow + dot) — cable attached but far-end has no device
- Unconnected/disabled — unchanged grey/red

A yellow warning dot is injected into the top-right corner of each
partially connected port via JS, remaining visible even when cable
colour mode overrides the fill colour.

Closes #61

Co-authored-by: Peter Baumert <peter.baumert@outlook.com>

Author: peterbaumert

netbox_device_view/static/netbox_device_view/css/device_view_svg.css

@@ -76,6 +76,8 @@
 .dv-port.bg-success    .dv-port-rect { fill: #198754; }
 .dv-port.bg-secondary  .dv-port-rect { fill: #6c757d; }
 .dv-port.bg-danger     .dv-port-rect { fill: #dc3545; }
+/* Partial connection: cable attached but far-end has no device */
+.dv-port.bg-warning    .dv-port-rect { fill: #ffc107; }
 
 /* Cable colour override — applied inline via JS (style attribute on .dv-port) */
 /* No rule needed; the JS sets fill on .dv-port-rect directly               */
@@ -85,6 +87,15 @@
     fill: url(#dv-nocolor-pattern);
 }
 
+/* Partial connection dot overlay — small warning circle in the top-right corner.
+   Always rendered on top of the port rect, visible even in cable colour mode. */
+.dv-partial-dot {
+    fill: #ffc107;
+    stroke: #333;
+    stroke-width: 0.5;
+    pointer-events: none;
+}
+
 /* ── Structural elements ───────────────────────────────────────────────────── */
 
 .dv-spacer {

netbox_device_view/templates/netbox_device_view/deviceview.html

@@ -118,6 +118,7 @@
       name: "{{ int.name|escapejs }}",
       enabled: {% if int.enabled or int.is_port %}true{% else %}false{% endif %},
       connected: {% if int.connected_endpoints|length > 0 or int.is_port and int.link_peers|length > 0 %}true{% else %}false{% endif %},
+      partiallyConnected: {% if int.link_peers|length > 0 and int.connected_endpoints|length == 0 %}true{% else %}false{% endif %},
       cableColor: "{% if cable_colors == 'on' and int.cable.color != '' %}{{ int.cable.color }}{% endif %}",
       cableNoColor: {% if cable_colors == "on" and int.cable.color == "" or cable_colors == "on" and int.cable == None %}true{% else %}false{% endif %},
       connectedEndpoints: [{% for ce in int.connected_endpoints %}"{{ ce.device }} | {{ ce.name }}"{% if not forloop.last %},{% endif %}{% endfor %}],
@@ -139,12 +140,25 @@
           if (rect) rect.setAttribute("fill", "#" + p.cableColor);
         } else if (p.connected) {
           g.classList.add("bg-success");
+        } else if (p.partiallyConnected) {
+          g.classList.add("bg-warning");
         } else if (p.enabled) {
           g.classList.add("bg-secondary");
         } else {
           g.classList.add("bg-danger");
         }
 
+        // Always show a small warning dot for partially connected ports,
+        // even when cable color mode overrides the fill colour.
+        if (p.partiallyConnected && rect) {
+          var dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+          dot.setAttribute("class", "dv-partial-dot");
+          dot.setAttribute("cx", parseFloat(rect.getAttribute("x")) + parseFloat(rect.getAttribute("width")) - 3);
+          dot.setAttribute("cy", parseFloat(rect.getAttribute("y")) + 3);
+          dot.setAttribute("r", "2.5");
+          g.appendChild(dot);
+        }
+
         g.setAttribute("role", "link");
         g.style.cursor = "pointer";
         g.addEventListener("click", function () { window.location.href = p.url; });

netbox_device_view/templates/netbox_device_view/ports.html

@@ -115,6 +115,7 @@ <h2 class="card-header">Deviceview {{ object.name }}</h2>
       name: "{{ int.name|escapejs }}",
       enabled: {% if int.enabled or int.is_port %}true{% else %}false{% endif %},
       connected: {% if int.connected_endpoints|length > 0 or int.is_port and int.link_peers|length > 0 %}true{% else %}false{% endif %},
+      partiallyConnected: {% if int.link_peers|length > 0 and int.connected_endpoints|length == 0 %}true{% else %}false{% endif %},
       cableColor: "{% if cable_colors == 'on' and int.cable.color != '' %}{{ int.cable.color }}{% endif %}",
       cableNoColor: {% if cable_colors == "on" and int.cable.color == "" or cable_colors == "on" and int.cable == None %}true{% else %}false{% endif %},
       connectedEndpoints: [{% for ce in int.connected_endpoints %}"{{ ce.device }} | {{ ce.name }}"{% if not forloop.last %},{% endif %}{% endfor %}],
@@ -135,11 +136,25 @@ <h2 class="card-header">Deviceview {{ object.name }}</h2>
           if (rect) rect.setAttribute("fill", "#" + p.cableColor);
         } else if (p.connected) {
           g.classList.add("bg-success");
+        } else if (p.partiallyConnected) {
+          g.classList.add("bg-warning");
         } else if (p.enabled) {
           g.classList.add("bg-secondary");
         } else {
           g.classList.add("bg-danger");
         }
+
+        // Always show a small warning dot for partially connected ports,
+        // even when cable color mode overrides the fill colour.
+        if (p.partiallyConnected && rect) {
+          var dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+          dot.setAttribute("class", "dv-partial-dot");
+          dot.setAttribute("cx", parseFloat(rect.getAttribute("x")) + parseFloat(rect.getAttribute("width")) - 3);
+          dot.setAttribute("cy", parseFloat(rect.getAttribute("y")) + 3);
+          dot.setAttribute("r", "2.5");
+          g.appendChild(dot);
+        }
+
         g.setAttribute("role", "link");
         g.style.cursor = "pointer";
         g.addEventListener("click", function () { window.location.href = p.url; });