From 842913659aa4d42303b6df418733e31b0f28e6d6 Mon Sep 17 00:00:00 2001
From: Jocadbz <joaquimmadureira@protonmail.com>
Date: Tue, 9 Jun 2026 18:54:37 -0300
Subject: [PATCH] Model form: hide height when non-rack, disable side selector
 for patch panels

Added toggleRackHeight() to show/hide the height-in-units field when the
rack-mountable checkbox changes. Added togglePatchMode() to disable the
port side selector when is_patch_panel is checked, with an explanatory
note that all ports get doubled to front+back anyway. Also initializes
both states on page load so edit view reflects saved values.
---
 templates/model_form.html | 42 +++++++++++++++++++++++++++++++++------
 1 file changed, 36 insertions(+), 6 deletions(-)

diff --git a/templates/model_form.html b/templates/model_form.html
index 9f2625f..540b30a 100644
--- a/templates/model_form.html
+++ b/templates/model_form.html
@@ -9,13 +9,28 @@
     </fieldset>
 
     <fieldset>
-        <label><input type="checkbox" name="is_rack_mountable" {{if not .Model}}checked{{else if .Model.IsRackMountable}}checked{{end}}> Rack-mountable</label>
-        <label>Height (U) <input type="number" name="height_units" value="{{if .Model}}{{if .Model.HeightUnits}}{{.Model.HeightUnits}}{{end}}{{end}}" min="1" style="width:5em"></label>
+        <label>
+            <input type="checkbox" name="is_rack_mountable" id="chk-rack" onchange="toggleRackHeight()"
+                {{if not .Model}}checked{{else if .Model.IsRackMountable}}checked{{end}}>
+            Rack-mountable
+        </label>
+        <label id="lbl-height">Height (U) <input type="number" name="height_units" value="{{if .Model}}{{if .Model.HeightUnits}}{{.Model.HeightUnits}}{{end}}{{end}}" min="1" style="width:5em"></label>
     </fieldset>
 
     <fieldset>
-        <label><input type="checkbox" name="is_patch_panel" {{if .Model}}{{if .Model.IsPatchPanel}}checked{{end}}{{end}}> Patch panel</label>
-        <label><input type="checkbox" name="is_wall_socket" {{if .Model}}{{if .Model.IsWallSocket}}checked{{end}}{{end}}> Wall socket</label>
+        <label>
+            <input type="checkbox" name="is_patch_panel" id="chk-patch" onchange="togglePatchMode()"
+                {{if .Model}}{{if .Model.IsPatchPanel}}checked{{end}}{{end}}>
+            Patch panel <small>(ports auto-doubled front+back at device creation)</small>
+        </label>
+        <label>
+            <input type="checkbox" name="is_wall_socket" id="chk-wall"
+                {{if .Model}}{{if .Model.IsWallSocket}}checked{{end}}{{end}}>
+            Wall socket <small>(behaves like patch panel)</small>
+        </label>
+        <div id="patch-note" style="display:none;color:var(--text-muted);font-size:0.85em;margin-top:0.3em">
+            Port side selectors disabled &mdash; patch panels create front+back pairs from every port regardless of side.
+        </div>
     </fieldset>
 
     <fieldset>
@@ -33,7 +48,7 @@
     {{range $i, $p := .Model.Ports}}
     <div class="port-entry">
         <input name="port_name" value="{{.Name}}" placeholder="Port name (e.g. Gig1/0/1)">
-        <select name="port_side"><option value="front" {{if eq .Side "front"}}selected{{end}}>Front</option><option value="back" {{if eq .Side "back"}}selected{{end}}>Back</option></select>
+        <select name="port_side" class="port-side-sel"><option value="front" {{if eq .Side "front"}}selected{{end}}>Front</option><option value="back" {{if eq .Side "back"}}selected{{end}}>Back</option></select>
         <button type="button" onclick="this.parentElement.remove()">Remove</button>
     </div>
     {{end}}
@@ -48,11 +63,26 @@
 </form>
 
 <script>
+function toggleRackHeight() {
+    var show = document.getElementById('chk-rack').checked;
+    document.getElementById('lbl-height').style.display = show ? '' : 'none';
+}
+function togglePatchMode() {
+    var patch = document.getElementById('chk-patch').checked;
+    document.getElementById('patch-note').style.display = patch ? '' : 'none';
+    document.querySelectorAll('.port-side-sel').forEach(function(sel) {
+        sel.disabled = patch;
+        sel.style.opacity = patch ? '0.5' : '';
+    });
+}
 function addPortRow() {
+    var patch = document.getElementById('chk-patch').checked;
     var div = document.createElement('div');
     div.className = 'port-entry';
-    div.innerHTML = '<input name="port_name" placeholder="Port name"> <select name="port_side"><option value="front">Front</option><option value="back">Back</option></select> <button type="button" onclick="this.parentElement.remove()">Remove</button>';
+    div.innerHTML = '<input name="port_name" placeholder="Port name"> <select name="port_side" class="port-side-sel"' + (patch ? ' disabled style="opacity:0.5"' : '') + '><option value="front">Front</option><option value="back">Back</option></select> <button type="button" onclick="this.parentElement.remove()">Remove</button>';
     document.getElementById('ports-container').appendChild(div);
 }
+toggleRackHeight();
+togglePatchMode();
 </script>
 {{end}}