Poprack

Features:

* Komplettes kabelmanagement auf Rack He Modul Basis

public/js/pages/pop/detail.js

@@ -3,70 +3,68 @@ $(document).ready(function () {
         Sortable.create(sortracklist, {
             handle: '.move-handle',
             onEnd: function () {
-
                 var popid = $('#sortracklist').data('popid');
                 var racksortids = [];
 
                 $('#sortracklist').find('th').each(function (index, value) {
-
                     racksortids.push($(this).data('rackid'));
                 });
                 $.post(linkSorTracklist + "&pop_id=" + popid, {
                     racksortids: racksortids
                 }, function (data) {
                     if (data.success === true) {
-
                     }
                 }, "json");
-
             }
-
         });
     }
+
     $('#pop-rack-div').show();
+
     $('#rackModal').on('show.bs.modal', function (event) {
-            var thisclick = $(event.relatedTarget);
-            var rackhe = thisclick.closest('table').find('th').data('rackhe');
-            var rackid = thisclick.closest('table').find('th').data('rackid');
-            var rackname = thisclick.closest('table').find('th').data('rackname');
-            var minhe = 1;
-            var modal = $(this);
-            var edit = 0;
-            modal.find('.alert').text('');
-            modal.find('.alert').hide();
-            if (rackid === undefined) {
-                $('#rack-name').val('');
-                $('#rack-he').val('');
-                var popid = thisclick.data('popid');
-                $('#rack-add').data('popid', popid);
-                $('#rack-update').hide();
-                $('#rack-remove').hide();
-                $('#rack-add').show();
-            } else {
-                edit = 1;
-                $('#rack-remove').hide();
-                $('#rack-add').hide();
-                $('#rack-update').show();
-                $('#rack-he').val(rackhe);
-                $('#rack-name').val(rackname);
-                for (let i = 1; i <= rackhe; i++) {
-                    if (!thisclick.closest('table').find('tbody').find('tr').eq(i - 1).find('td').eq(1).hasClass('he-free')) {
-                        minhe = i;
-                    }
-                }
-                if (minhe === 1) {
+        var thisclick = $(event.relatedTarget);
+        var rackhe = thisclick.closest('table').find('th').data('rackhe');
+        var rackid = thisclick.closest('table').find('th').data('rackid');
+        var rackname = thisclick.closest('table').find('th').data('rackname');
+        var minhe = 1;
+        var modal = $(this);
+        var edit = 0;
+        modal.find('.alert').text('');
+        modal.find('.alert').hide();
 
-                    $('#rack-remove').data('rackid', rackid);
-                    $('#rack-remove').show();
+        if (rackid === undefined) {
+            $('#rack-name').val('');
+            $('#rack-he').val('');
+            var popid = thisclick.data('popid');
+            $('#rack-add').data('popid', popid);
+            $('#rack-update').hide();
+            $('#rack-remove').hide();
+            $('#rack-add').show();
+        } else {
+            edit = 1;
+            $('#rack-remove').hide();
+            $('#rack-add').hide();
+            $('#rack-update').show();
+            $('#rack-he').val(rackhe);
+            $('#rack-name').val(rackname);
+
+            for (let i = 1; i <= rackhe; i++) {
+                if (!thisclick.closest('table').find('tbody').find('tr').eq(i - 1).find('td').eq(1).hasClass('he-free')) {
+                    minhe = i;
                 }
-                $('#rack-update').data('rackid', rackid);
-                $('#rack-update').data('rackminhe', minhe);
             }
-        }
-    )
-    ;
-    $('#rackModuleModal').on('show.bs.modal', function (event) {
 
+            if (minhe === 1) {
+                $('#rack-remove').data('rackid', rackid);
+                $('#rack-remove').show();
+            }
+
+            $('#rack-update').data('rackid', rackid);
+            $('#rack-update').data('rackminhe', minhe);
+        }
+    });
+
+    $('#rackModuleModal').on('show.bs.modal', function (event) {
         trigger = $(event.relatedTarget);
         var destinationname = trigger.closest('table').find('th').text();
         var rackhe = trigger.closest('table').find('th').data('rackhe');
@@ -74,8 +72,6 @@ $(document).ready(function () {
         modal.find('.modal-title').html('<span id="module-info">Modul (' + destinationname + ')</span>');
         modal.find('.alert').text('');
         modal.find('.alert').hide();
-        $('#module-slot-div').hide();
-        $('#module-position-div').hide();
         var options;
         var selected;
         var hemaxcount = 1;
@@ -84,6 +80,7 @@ $(document).ready(function () {
         var side = trigger.closest('tbody').data('side');
         $('#module-type option').prop('disabled', false);
         var parent = trigger.closest('tr');
+
         if (trigger.closest('tr').find('td').eq(1).html() === undefined) {
             edit = 1;
             parent = trigger.closest('tr').prev();
@@ -95,6 +92,7 @@ $(document).ready(function () {
                 }
             }
         }
+
         if (parent.find('td').eq(1).data('id') || parent.find('td').eq(2).data('id') || parent.find('td').eq(3).data('id') || parent.find('td').eq(4).data('id')) {
             var counttd = parent.find('td').length - 1;
             var newmodule = false;
@@ -118,10 +116,8 @@ $(document).ready(function () {
                 $('#module-slot').html(options);
                 $('#module-position').html(options);
                 $('#module-slot-div').show();
-            }
-            else
-            {
-
+            } else {
+                $('#module-slot-div').hide();
             }
 
             $('#module-width').attr('disabled', 'disabled');
@@ -138,18 +134,20 @@ $(document).ready(function () {
                 $('#module-update').show();
                 $('#module-add').hide();
 
-
                 $('#module-type').val(parent.find('td').eq(1).data('type')).change();
+
                 if ($('#module-type').val() == "1") {
                     $('#module-device-id').hide();
                     $('#module-device-text').text(parent.find('td').eq(1).data('name'));
                     $('#module-device-text').show();
                     $('#module-type option').prop('disabled', true);
                 }
+
                 if (parent.find('td').eq(1).data('ports') != "") {
                     $('#module-ports').val(parent.find('td').eq(1).data('ports')).change();
                     $('#module-plug').val(parent.find('td').eq(1).data('plug'));
                 }
+
                 $('#module-name').val(parent.find('td').eq(1).data('name'));
                 const status = parent.find('td').eq(1).data('status');
                 $('#module-type').val(parent.find('td').eq(1).data('type')).change();
@@ -157,7 +155,6 @@ $(document).ready(function () {
 
                 $('#module-type option[value="1"]').prop('disabled', true);
 
-
                 $('#module-remove').data('moduleid', parent.find('td').eq(1).data('id'));
                 $('#module-update').data('moduleid', parent.find('td').eq(1).data('id'));
             } else {
@@ -184,29 +181,37 @@ $(document).ready(function () {
             $('#module-remove').hide();
             $('#module-update').hide();
             $('#module-add').show();
+
             for (let i = 1; i <= rackhe; i++) {
                 if (i == trigger.data('he')) {
                     selected = 'selected="selected"';
                 } else {
                     selected = '';
                 }
+
                 if (trigger.closest('tbody').find('tr').eq(i - 1).find('td').eq(1).hasClass('he-free')) {
                     options = options + '<option ' + selected + ' value="' + i + '">' + i + '</option>';
                 }
+
                 if (hemaxcountactive == 1 && i > trigger.data('he') && !trigger.closest('tbody').find('tr').eq(i - 1).find('td').eq(1).hasClass('he-free')) {
                     hemaxcountactive = 0;
                 }
+
                 if (hemaxcountactive == 1 && i > trigger.data('he') && trigger.closest('tbody').find('tr').eq(i - 1).find('td').eq(1).hasClass('he-free')) {
                     hemaxcount++;
                 }
             }
+
             $('#he-start-div').html(`<select required="required" id="module-he-start" name="module-he-start" class="form-control">` + options + `</select>`);
             options = "";
             selected = "";
+
             for (let i = 1; i <= hemaxcount; i++) {
                 options = options + '<option ' + selected + ' value="' + i + '">' + i + '</option>';
             }
+
             $('#he-count-div').html(`<select required="required" id="module-he-count" name="module-he-count" class="form-control">` + options + `</select>`);
+
             if (edit == 0) {
                 $('#module-name-div').show();
                 $('#module-name').removeAttr('disabled');
@@ -225,9 +230,9 @@ $(document).ready(function () {
                 $('#module-position-div').hide();
                 $('#module-device-text').hide();
                 $('#module-device-id').show();
-
             }
         }
+
         $('#module-side').val(side);
     });
 
@@ -236,7 +241,6 @@ $(document).ready(function () {
             $('#module-name-div').hide();
             $('#module-name').attr('disabled', 'disabled');
             $('#module-device-div').show();
-
             $('#module-device-id').removeAttr('disabled');
             $('#module-ports-div').hide();
             $('#module-plug-div').hide();
@@ -266,6 +270,7 @@ $(document).ready(function () {
         var hemaxcountactive = 1
         var options;
         var selected;
+
         for (let i = 1; i <= rackhe; i++) {
             if (hemaxcountactive == 1 && i > $(this).val() && !trigger.closest('tbody').find('tr').eq(i - 1).find('td').eq(1).hasClass('he-free')) {
                 hemaxcountactive = 0;
@@ -275,9 +280,11 @@ $(document).ready(function () {
                 hemaxcount++;
             }
         }
+
         for (let i = 1; i <= hemaxcount; i++) {
             options = options + '<option ' + selected + ' value="' + i + '">' + i + '</option>';
         }
+
         $('#he-count-div').html(`<select required="required" id="module-he-count" name="module-he-count" class="form-control">` + options + `</select>`);
     });
 
@@ -286,15 +293,14 @@ $(document).ready(function () {
         var rackid = trigger.closest('table').find('th').data('rackid');
         var endhe = parseInt($.trim($('#module-he-start').val())) + parseInt($.trim($('#module-he-count').val())) - 1;
 
-
         if (!$.trim($('#module-name').val()) && $.trim($('#module-type').val()) != "1" && $.trim($('#module-type').val()) != "0") {
             error = "Modul Name darf nicht leer sein";
         }
+
         if ($.trim($('#module-type').val()) == "1" && !$.trim($('#module-device-id').val())) {
             error = "Kein Device ausgewählt";
         }
 
-
         if (!error) {
             $.post(linkAddModule + "&poprack_id=" + rackid, {
                 side: $.trim($('#module-side').val()),
@@ -308,14 +314,11 @@ $(document).ready(function () {
                 width: $.trim($('#module-width').val()),
                 status: $.trim($('#module-status').val()),
                 position: $.trim($('#module-position').val())
-
             }, function (data) {
                 if (data.success === true) {
                     $('#rackModuleModal').modal('toggle');
                     var currentSide = trigger.closest('tbody').data('side');
-                    $.get(linkGenerateRack + "&id=" + rackid + "&side=" + currentSide, function (data, status) {
-                        trigger.closest('tbody').html(data);
-                    });
+                    updateAllRackViews(rackid, currentSide);
                 }
             }, "json");
         } else {
@@ -323,9 +326,11 @@ $(document).ready(function () {
             $(this).closest('.modal').find('.alert').show();
         }
     });
+
     $("body").on("click", "#module-remove", function () {
         var moduleid = $(this).data('moduleid');
         var rackid = trigger.closest('table').find('th').data('rackid');
+
         if (confirm("Modul entfernen?")) {
             let side = trigger.closest('tbody').data('side');
             $.post(linkRemoveModule, {
@@ -333,21 +338,22 @@ $(document).ready(function () {
             }, function (data) {
                 if (data.success === true) {
                     $('#rackModuleModal').modal('toggle');
-                    $.get(linkGenerateRack + "&id=" + rackid + "&side=" + side, function (data, status) {
-                        trigger.closest('tbody').html(data);
-                    });
+                    updateAllRackViews(rackid, side);
                 }
             }, "json");
         }
     });
+
     $("body").on("click", "#module-update", function () {
         var moduleid = $(this).data('moduleid');
         var rackid = trigger.closest('table').find('th').data('rackid');
         var error;
         let side = trigger.closest('tbody').data('side');
+
         if (!$.trim($('#module-name').val()) && $.trim($('#module-type').val()) != "1" && $.trim($('#module-type').val()) != "0") {
             error = "Modul Name darf nicht leer sein";
         }
+
         if (!error) {
             $.post(linkUpdateModule, {
                 id: moduleid,
@@ -359,9 +365,7 @@ $(document).ready(function () {
             }, function (data) {
                 if (data.success === true) {
                     $('#rackModuleModal').modal('toggle');
-                    $.get(linkGenerateRack + "&id=" + rackid + "&side=" + side, function (data, status) {
-                        trigger.closest('tbody').html(data);
-                    });
+                    updateAllRackViews(rackid, side);
                 }
             }, "json");
         } else {
@@ -378,6 +382,7 @@ $(document).ready(function () {
         if ($('#rack-he').val() < rackmin) {
             error = "Minimale Höheneinheiten: " + rackmin;
         }
+
         if ($('#rack-he').val() > 60) {
             error = "Maximale Höheneinheiten: 60";
         }
@@ -389,14 +394,15 @@ $(document).ready(function () {
         if (!$.trim($('#rack-he').val())) {
             error = "Höheneinheiten darf nicht leer sein";
         }
+
         if (!$.trim($('#rack-name').val())) {
             error = "Schrank Name darf nicht leer sein";
         }
+
         if (!error) {
             $.post(linkEditRack + "&poprack_id=" + rackid, {
                 name: $.trim($('#rack-name').val()),
                 he: $.trim($('#rack-he').val())
-
             }, function (data) {
                 if (data.success === true) {
                     $('#rackModal').modal('toggle');
@@ -408,6 +414,7 @@ $(document).ready(function () {
             $(this).closest('.modal').find('.alert').show();
         }
     });
+
     $("body").on("click", "#rack-add", function () {
         var popid = $(this).data('popid');
         var error;
@@ -415,6 +422,7 @@ $(document).ready(function () {
         if ($('#rack-he').val() < 1) {
             error = "Minimale Höheneinheiten: " + 1;
         }
+
         if ($('#rack-he').val() > 60) {
             error = error = "Maximale Höheneinheiten: 60";
         }
@@ -426,14 +434,15 @@ $(document).ready(function () {
         if (!$.trim($('#rack-he').val())) {
             error = "Höheneinheiten darf nicht leer sein";
         }
+
         if (!$.trim($('#rack-name').val())) {
             error = "Schrank Name darf nicht leer sein";
         }
+
         if (!error) {
             $.post(linkAddRack + "&pop_id=" + popid, {
                 name: $.trim($('#rack-name').val()),
                 he: $.trim($('#rack-he').val())
-
             }, function (data) {
                 if (data.success === true) {
                     $('#rackModal').modal('toggle');
@@ -457,33 +466,29 @@ $(document).ready(function () {
                 location.reload();
             }
         }, "json");
-
     });
+
     $("body").on("change", "#module-width", function () {
         if ($(this).val() == "12") {
             $('#module-position-div').hide();
         } else if ($(this).val() == "6") {
             $('#module-position').html(`<option value="1">1</option>
-                                            <option value="2">2</option>
-`);
+                                            <option value="2">2</option>`);
             $('#module-position-div').show();
         } else if ($(this).val() == "4") {
             $('#module-position').html(`<option value="1">1</option>
                                             <option value="2">2</option>
-                                            <option value="3">3</option>
-                                  `);
+                                            <option value="3">3</option>`);
             $('#module-position-div').show();
         } else if ($(this).val() == "3") {
             $('#module-position').html(`<option value="1">1</option>
                                             <option value="2">2</option>
                                             <option value="3">3</option>
-                                            <option value="4">4</option>
-`);
+                                            <option value="4">4</option>`);
             $('#module-position-div').show();
         }
     });
 
-
     $("body").on("change", "#module-ports", function () {
         var plugs = [];
         if ($(this).find(':selected').data('plugs') !== undefined) {
@@ -504,6 +509,7 @@ $(document).ready(function () {
     $("body").on("change", "#module-slot", function () {
         $('#module-position').val($(this).val());
         var parent = trigger.closest('tr');
+
         if (trigger.closest('tr').find('td').eq(1).html() === undefined) {
             parent = trigger.closest('tr').prev();
             for (let i = 1; i <= rackhe; i++) {
@@ -514,31 +520,35 @@ $(document).ready(function () {
                 }
             }
         }
+
         var newmodule = false;
         var tdnumber = parseInt($(this).val())
+
         if (parent.find('td').eq(tdnumber).data('id') === undefined) {
             newmodule = true;
         }
+
         if (!newmodule) {
             $('#module-remove').show();
             $('#module-update').show();
             $('#module-add').hide();
 
-
             $('#module-type').val(parent.find('td').eq(tdnumber).data('type')).change();
+
             if ($('#module-type').val() == "1") {
                 $('#module-device-id').hide();
                 $('#module-device-text').text(parent.find('td').eq(tdnumber).data('name'));
                 $('#module-device-text').show();
             }
+
             if (parent.find('td').eq(tdnumber).data('ports') != "") {
                 $('#module-ports').val(parent.find('td').eq(tdnumber).data('ports')).change();
                 $('#module-plug').val(parent.find('td').eq(tdnumber).data('plug'));
             }
+
             $('#module-type').attr('disabled', 'disabled');
             $('#module-name').val(parent.find('td').eq(tdnumber).data('name'));
 
-
             $('#module-remove').data('moduleid', parent.find('td').eq(tdnumber).data('id'));
             $('#module-update').data('moduleid', parent.find('td').eq(tdnumber).data('id'));
         } else {
@@ -562,6 +572,7 @@ $(document).ready(function () {
             $('#module-device-text').hide();
         }
     });
+
     $("body").on("click", ".switch-rack-side", function () {
         var icon = $(this);
         var rackTh = icon.closest('th');
@@ -572,10 +583,13 @@ $(document).ready(function () {
 
         var currentSide = rackBody.data('side');
         var newSide = (currentSide === 'front') ? 'back' : 'front';
+
         if (icon.hasClass('is-loading')) {
             return;
         }
+
         icon.addClass('is-loading fa-spin');
+
         rackTable.fadeOut(150, function () {
             $.get(linkGenerateRack + "&id=" + rackId + "&side=" + newSide, function (data, status) {
                 rackBody.html(data);
@@ -586,6 +600,7 @@ $(document).ready(function () {
                 } else {
                     sideIndicator.text('- Rückseite');
                 }
+
                 rackTable.fadeIn(150);
             }).fail(function () {
                 rackBody.html('<tr><td colspan="13" class="text-center text-danger p-3">Fehler beim Laden.</td></tr>');
@@ -595,335 +610,138 @@ $(document).ready(function () {
             });
         });
     });
-    let currentCableTrigger;
-
-
-    $("body").on("click", ".cable-container", function (e) {
+    $("body").on("click", ".rack-fullscreen-btn", function (e) {
         e.stopPropagation();
-        let parentTd = $(this).closest('td');
-        currentCableTrigger = parentTd;
 
-        let moduleId = parentTd.data('id');
-        let totalPorts = parentTd.data('ports');
-        let moduleName = parentTd.data('name');
+        var $originalTable = $(this).closest('table');
+        var rackName = $(this).closest('th').find('.rack-name').text().trim();
+        var $clonedTable = $originalTable.clone();
 
-        $('#cableModal #cable-poprackmodule-id').val(moduleId);
-        $('#cableModal #port-start, #cableModal #port-end').attr('max', totalPorts);
-        $('#cableModal #cable-name, #cableModal #port-start, #cableModal #port-end').val('');
-        $('#cableModal #cable-modal-alert').hide();
-        $('#cableModal .modal-title').text('Kabel auf Panel ' + moduleName);
+        $clonedTable.find('.move-handle, .switch-rack-side, .fa-edit, .fa-expand').remove();
 
-        $('#cableModal').modal('show');
-    });
-
-    $("body").on("click", "#cable-add-button", function () {
-        if (!currentCableTrigger) return;
-
-        let rackid = currentCableTrigger.closest('table').find('th').data('rackid');
-        let modal = $('#cableModal');
-        let alert = modal.find('#cable-modal-alert');
-        let data = {
-            poprackmodule_id: modal.find('#cable-poprackmodule-id').val(),
-            cable_name: modal.find('#cable-name').val().trim(),
-            port_start: parseInt(modal.find('#port-start').val()),
-            port_end: parseInt(modal.find('#port-end').val()),
-            fiber_start: parseInt(modal.find('#fiber-start').val()) || null,
-            fiber_end: parseInt(modal.find('#fiber-end').val()) || null,
-            description: modal.find('#cable-description').val().trim()
-        };
-
-        if (!data.cable_name || !data.port_start || !data.port_end) {
-            alert.text('Bitte alle Felder ausfüllen.').show();
-            return;
-        }
-        if (data.port_start > data.port_end) {
-            alert.text('Start-Port muss kleiner oder gleich dem End-Port sein.').show();
-            return;
-        }
-        if (data.fiber_start && data.fiber_end) {
-            if (data.fiber_start > data.fiber_end) {
-                alert.text('Faser-Start muss kleiner oder gleich Faser-Ende sein.').show();
-                return;
-            }
-            const portCount = data.port_end - data.port_start + 1;
-            const fiberCount = data.fiber_end - data.fiber_start + 1;
-            if (fiberCount > portCount) {
-                alert.text('Die Anzahl der Fasern (' + fiberCount + ') darf nicht größer als die Anzahl der Ports (' + portCount + ') sein.').show();
-                return;
-            }
-        }
-        $.post(linkAddCable, data, function (response) {
-            if (response.success) {
-                modal.modal('hide');
-                let currentSide = currentCableTrigger.closest('tbody').data('side');
-                $.get(linkGenerateRack + "&id=" + rackid + "&side=" + currentSide, function (html) {
-                    currentCableTrigger.closest('tbody').html(html);
-                });
-            } else {
-                alert.text(response.error || 'Fehler beim Speichern.').show();
-            }
-        }, 'json');
-    });
-    let currentCableElement;
-    let cableMenuPopper = null;
-
-    function showCableMenuAtEvent(e) {
-        const $menu = $('#cable-context-menu');
-        if (!$menu.length) return;
-        $menu.removeAttr('x-placement');
-        if ($menu.parent()[0] !== document.body) $menu.detach().appendTo('body');
-        $menu.css({display: 'block'}).addClass('show');
-        const el = $menu[0];
-        const w = $menu.outerWidth(), h = $menu.outerHeight();
-        const vw = window.innerWidth, vh = window.innerHeight;
-
-        let x = e.clientX, y = e.clientY;
-        if (x + w > vw) x = vw - w - 6;
-        if (y + h > vh) y = vh - h - 6;
-
-        el.style.setProperty('position', 'fixed', 'important');
-        el.style.setProperty('left', x + 'px', 'important');
-        el.style.setProperty('top', y + 'px', 'important');
-        el.style.setProperty('z-index', '2147483000', 'important');
-    }
-
-    $('body').on('contextmenu click', '.cable-item', function (e) {
-        if (e.type === 'contextmenu' || e.type === 'click') {
-            if (e.which !== 1) return;
-            e.preventDefault();
-            e.stopPropagation();
-            currentCableElement = $(this);
-            $('.dropdown-menu').not('#cable-context-menu').removeClass('show').hide();
-            showCableMenuAtEvent(e);
-            requestAnimationFrame(() => {
-                const el = document.getElementById('cable-context-menu');
-                console.log('OPEN fired, ctx styles =', el ? el.style.cssText : 'NO ELEMENT');
-            });
-        }
-    });
-
-    function hideCableMenu() {
-        const $m = $('#cable-context-menu');
-        const el = $m[0];
-        if (!$m.length) return;
-
-        $m.removeClass('show').hide();
-
-        if (el) {
-            el.style.removeProperty('top');
-            el.style.removeProperty('left');
-            el.style.removeProperty('position');
-            el.style.removeProperty('z-index');
-        }
-    }
-
-    $('#cable-context-menu')
-        .off('mousedown.ctx click.ctx contextmenu.ctx')
-        .on('mousedown.ctx click.ctx contextmenu.ctx', function (e) {
-            e.stopPropagation();
+        $clonedTable.css({
+            'width': '800px',
+            'margin': '0 auto',
+            'background-color': '#fff',
+            'box-shadow': 'none'
         });
 
-    $(document)
-        .off('mousedown.ctx click.ctx contextmenu.ctx keydown.ctx')
-        .on('mousedown.ctx click.ctx contextmenu.ctx', function (e) {
-            if ($(e.target).closest('#cable-context-menu').length) return;
-            hideCableMenu();
-        })
-        .on('keydown.ctx', function (e) {
-            if (e.key === 'Escape' || e.keyCode === 27) hideCableMenu();
-        });
-
-    $(window)
-        .off('scroll.ctx resize.ctx')
-        .on('scroll.ctx resize.ctx', hideCableMenu);
-
-    $('#cable-context-menu .dropdown-item').on('click', function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-        hideCableMenu();
-
-        const action = $(this).data('action');
-        const rackid = currentCableElement.closest('table').find('th').data('rackid');
-        const cableId = currentCableElement.data('cable-id');
-        const cableName = currentCableElement.data('cable-name');
-
-        switch (action) {
-            case 'view':
-                alert("Detailansicht für Kabel '" + cableName + "' (ID: " + cableId + ")");
-                break;
-
-            case 'edit': {
-                const cableId = currentCableElement.data('cable-id');
-                const cableName = currentCableElement.data('cable-name');
-                const portStart = currentCableElement.data('port-start');
-                const portEnd = currentCableElement.data('port-end');
-                const fiberStart = currentCableElement.data('fiber-start');
-                const fiberEnd = currentCableElement.data('fiber-end');
-                const description = currentCableElement.data('description');
-                $('#edit-cable-id').val(cableId);
-                $('#edit-cable-name').val(cableName);
-                $('#edit-port-start').val(portStart);
-                $('#edit-port-end').val(portEnd);
-                $('#edit-fiber-start').val(fiberStart);
-                $('#edit-fiber-end').val(fiberEnd);
-                $('#edit-cable-description').val(description);
-                $('#cable-edit-modal-alert').hide();
-                $('#cableEditModal').modal('show');
-                break;
-            }
-
-            case 'delete':
-                if (confirm("Kabel '" + cableName + "' wirklich entfernen?")) {
-                    $.post(linkRemoveCable, {id: cableId}, function (response) {
-                        if (response.success) {
-                            let currentSide = currentCableElement.closest('tbody').data('side');
-                            $.get(linkGenerateRack + "&id=" + rackid + "&side=" + currentSide, function (html) {
-                                currentCableElement.closest('tbody').html(html);
-                            });
-                        } else {
-                            alert('Fehler beim Löschen des Kabels.');
-                        }
-                    }, 'json');
-                }
-                break;
-        }
+        $('#overlayTitle').text(rackName);
+        $('#overlayContent').html($clonedTable);
+        $('#customRackOverlay').fadeIn();
+        $('body').css('overflow', 'hidden');
+        $('#overlayContent [data-toggle="popover"]').popover();
     });
-
-    $("body").on("click", "#cable-update-button", function () {
-        const modal = $('#cableEditModal');
-        const cableId = modal.find('#edit-cable-id').val();
-        const rackid = currentCableElement.closest('table').find('th').data('rackid');
-
-        const data = {
-            id: cableId,
-            cable_name: modal.find('#edit-cable-name').val().trim(),
-            port_start: parseInt(modal.find('#edit-port-start').val()),
-            port_end: parseInt(modal.find('#edit-port-end').val()),
-            fiber_start: parseInt(modal.find('#edit-fiber-start').val()) || null,
-            fiber_end: parseInt(modal.find('#edit-fiber-end').val()) || null,
-            description: modal.find('#edit-cable-description').val().trim()
-        };
-        if (data.fiber_start && data.fiber_end) {
-            if (data.fiber_start > data.fiber_end) {
-                modal.find('#cable-edit-modal-alert').text('Faser-Start muss kleiner oder gleich Faser-Ende sein.').show();
-                return;
-            }
-            const portCount = data.port_end - data.port_start + 1;
-            const fiberCount = data.fiber_end - data.fiber_start + 1;
-            if (fiberCount > portCount) {
-                modal.find('#cable-edit-modal-alert').text('Die Anzahl der Fasern (' + fiberCount + ') darf nicht größer als die Anzahl der Ports (' + portCount + ') sein.').show();
-                return;
-            }
-        }
-
-        $.post(linkUpdateCable, data, function (response) {
-            if (response.success) {
-                modal.modal('hide');
-                let currentSide = currentCableElement.closest('tbody').data('side');
-                $.get(linkGenerateRack + "&id=" + rackid + "&side=" + currentSide, function (html) {
-                    currentCableElement.closest('tbody').html(html);
-                });
-            } else {
-                modal.find('#cable-edit-modal-alert').text(response.error || 'Fehler beim Speichern.').show();
-            }
-        }, 'json');
+});
+function updateAllRackViews(rackId, side) {
+    $.get(linkGenerateRack + "&id=" + rackId + "&side=" + side, function (data) {
+        var $targets = $('tbody[id="rack-body-' + rackId + '"]');
+        $targets.html(data);
+        $targets.data('side', side);
+        $targets.find('[data-toggle="popover"]').popover();
     });
-
-    function initCableSearch() {
-        // Zerstöre eine eventuell bereits existierende Select2-Instanz
-        if ($('#cable-search').data('select2')) {
-            $('#cable-search').select2('destroy');
-        }
-        $('#cable-search').empty().append(new Option());
-
-        // 1. Kabel nach Namen gruppieren und Fasern summieren
-        let cableGroups = {};
-        $('.cable-item').each(function () {
-            const $cableElement = $(this);
-            const cableName = $cableElement.data('cable-name');
-
-            // Überspringe Elemente ohne Kabelnamen
-            if (!cableName) return;
-
-            // Berechne die Anzahl der Fasern für DIESES Segment
-            let fiberCount = 0;
-            const fiberStart = parseInt($cableElement.data('fiber-start'));
-            const fiberEnd = parseInt($cableElement.data('fiber-end'));
-            if (!isNaN(fiberStart) && !isNaN(fiberEnd)) {
-                fiberCount = (fiberEnd - fiberStart) + 1;
+}
+function printRackOverlay(orientation = 'landscape') {
+    printJS({
+        printable: 'overlayContent',
+        type: 'html',
+        targetStyles: ['*'],
+        style: `
+            @page { 
+                size: ${orientation}; 
+                margin: 5mm;
+            }
+            
+            body { 
+                font-family: Arial, sans-serif; 
+                margin: 0; 
+                padding: 5px;
+                -webkit-print-color-adjust: exact !important; 
+                print-color-adjust: exact !important;
             }
 
-            // Wenn die Gruppe für diesen Namen noch nicht existiert, erstelle sie
-            if (!cableGroups[cableName]) {
-                cableGroups[cableName] = {
-                    totalFibers: 0
-                };
+            * {
+                color: #000 !important;
+                text-shadow: none !important;
             }
 
-            // Addiere die Fasern zur Gesamtsumme der Gruppe
-            cableGroups[cableName].totalFibers += fiberCount;
-        });
-
-        // 2. Erstelle die Datenquelle für Select2 aus den gruppierten Daten
-        let cableSearchData = [];
-        for (const name in cableGroups) {
-            let label = `Kabel: ${name}`;
-            if (cableGroups[name].totalFibers > 0) {
-                label += ` (Gesamt: ${cableGroups[name].totalFibers} Fasern)`;
+            table {
+                width: 100% !important;
+                border-collapse: collapse !important;
+                table-layout: fixed !important; 
+                font-size: ${orientation === 'landscape' ? '10px' : '8px'} !important; 
+            }
+            td, th {
+                padding: 1px !important;
+                border: 1px solid #666 !important;
+                overflow: hidden;
             }
 
-            // Die "id" ist jetzt der eindeutige Kabelname
-            cableSearchData.push({
-                id: name,
-                text: label
-            });
-        }
+            .rack-color-lwl { background-color: #81df44 !important; }
+            .rack-color-lwl-planned { background-color: #ff0000 !important; }
+            .rack-color-device { background-color: #b6c6f0 !important; }
+            .rack-color-infra { background-color: #f7b876 !important; }
+            .rack-color-panel { background-color: #96f3de !important; }
+            .rack-color-blocked { background-color: #ff0000 !important; }
+            .rack-color-rpanel { background-color: #58c9f0 !important; }
+            
+            .cable-container {
+                display: flex !important;
+                flex-direction: row !important;
+                width: 100% !important;
+                height: 100% !important;
+                min-height: 40px; 
+                align-items: stretch !important;
+                background-color: #fffbe9 !important;
+            }
 
-        // 3. Select2 mit den gruppierten Daten initialisieren
-        $('#cable-search').select2({
-            data: cableSearchData,
-            placeholder: "Kabelname suchen...",
-            allowClear: true,
-        });
-    }
+            .cable-item { 
+                display: flex !important;
+                flex-direction: column !important;
+                justify-content: flex-start !important;
+                align-items: flex-start !important;
+                box-sizing: border-box !important;
+                overflow: hidden !important;
+                padding: 2px !important;
+                text-align: left !important;
+                border-right: 1px solid #797979 !important;
+                background-color: #e1ffdf !important;
+            }
 
-    $('#cable-search').on('select2:select', function (e) {
-        const selectedData = e.params.data;
+            .hide-if-narrow { display: block !important; }
+            
+            .cable-item b {
+                font-size: ${orientation === 'landscape' ? '9px' : '7px'} !important;
+                white-space: normal !important;
+                line-height: 1.1 !important;
+                width: 100%;
+                text-align: center;
+                display: block;
+                margin-bottom: 2px;
+            }
 
-        // Die "id" aus der Auswahl ist jetzt der Kabelname
-        const selectedCableName = selectedData.id;
-        if (!selectedCableName) return;
+            .cable-description {
+                white-space: normal !important;
+                font-size: ${orientation === 'landscape' ? '8px' : '7px'} !important;
+                line-height: 1.0 !important;
+                font-style: italic !important;
+                width: 100%;
+            }
+            
+            .port-ranges-container {
+                display: flex !important;
+                flex-direction: column !important;
+                font-size: ${orientation === 'landscape' ? '8px' : '7px'} !important;
+                margin-top: 2px !important;
+                line-height: 1.0 !important;
+                width: 100%;
+            }
 
-        // 1. Finde ALLE .cable-item Elemente, die diesen Kabelnamen haben
-        const $targetElements = $('.cable-item[data-cable-name="' + selectedCableName + '"]');
-
-        if ($targetElements.length === 0) {
-            console.error("Keine Kabel-Elemente mit dem Namen '" + selectedCableName + "' gefunden.");
-            return;
-        }
-
-        // Alle alten Markierungen entfernen
-        $('.cable-highlight, .cable-flash').removeClass('cable-highlight cable-flash');
-        $('.module-highlight').removeClass('module-highlight');
-
-        // 2. Scrolle zum ERSTEN gefundenen Element
-
-
-        // 3. Hebe ALLE gefundenen Elemente und ihre zugehörigen Module hervor
-        $targetElements.each(function () {
-            const $el = $(this);
-            const $parentModule = $el.closest('td');
-
-            $el.addClass('cable-highlight cable-flash');
-            $parentModule.addClass('module-highlight');
-        });
+            #overlayContent { width: 100%; display: block; }
+            
+            .rack-fullscreen-btn, .switch-rack-side, .move-handle, .fa-edit {
+                display: none !important;
+            }
+        `
     });
-    $('#cable-search').on('change', function (e) {
-        if ($(this).val() === null || $(this).val() === '') {
-            $('.cable-highlight, .cable-flash').removeClass('cable-highlight cable-flash');
-            $('.module-highlight').removeClass('module-highlight');
-        }
-    });
-
-    initCableSearch();
-});
+}