Poprack

Features:

* Komplettes kabelmanagement auf Rack He Modul Basis

public/js/pages/pop/detail.js

@@ -132,6 +132,10 @@ $(document).ready(function () {
                     $('#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(); // .change() ist hier wichtig!
+                $('#module-status').val(status);
+
                 $('#module-type option[value="1"]').prop('disabled', true);
 
 
@@ -217,6 +221,7 @@ $(document).ready(function () {
             $('#module-device-id').removeAttr('disabled');
             $('#module-ports-div').hide();
             $('#module-plug-div').hide();
+            $('#module-status-div').hide();
         } else if (parseInt($(this).val()) === 0) {
             $('#module-name-div').show();
             $('#module-name').removeAttr('disabled');
@@ -224,6 +229,7 @@ $(document).ready(function () {
             $('#module-device-id').attr('disabled', 'disabled');
             $('#module-ports-div').show();
             $('#module-plug-div').show();
+            $('#module-status-div').show();
         } else {
             $('#module-name-div').show();
             $('#module-name').removeAttr('disabled');
@@ -231,6 +237,7 @@ $(document).ready(function () {
             $('#module-device-id').attr('disabled', 'disabled');
             $('#module-ports-div').hide();
             $('#module-plug-div').hide();
+            $('#module-status-div').hide();
         }
     });
 
@@ -280,6 +287,7 @@ $(document).ready(function () {
                 ports: $.trim($('#module-ports').val()),
                 plug: $.trim($('#module-plug').val()),
                 width: $.trim($('#module-width').val()),
+                status: $.trim($('#module-status').val()),
                 position: $.trim($('#module-position').val())
 
             }, function (data) {
@@ -327,7 +335,8 @@ $(document).ready(function () {
                 type: $.trim($('#module-type').val()),
                 name: $.trim($('#module-name').val()),
                 ports: $.trim($('#module-ports').val()),
-                plug: $.trim($('#module-plug').val())
+                plug: $.trim($('#module-plug').val()),
+                status: $.trim($('#module-status').val())
             }, function (data) {
                 if (data.success === true) {
                     $('#rackModuleModal').modal('toggle');
@@ -509,7 +518,6 @@ $(document).ready(function () {
             }
             $('#module-type').attr('disabled', 'disabled');
             $('#module-name').val(parent.find('td').eq(tdnumber).data('name'));
-            // $('#module-name').attr('disabled', 'disabled');
 
 
             $('#module-remove').data('moduleid', parent.find('td').eq(tdnumber).data('id'));
@@ -568,5 +576,335 @@ $(document).ready(function () {
             });
         });
     });
+    let currentCableTrigger;
 
+
+    $("body").on("click", ".cable-container", 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');
+
+        $('#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);
+
+        $('#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();
+        });
+
+    $(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;
+        }
+    });
+
+    $("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 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;
+            }
+
+            // Wenn die Gruppe für diesen Namen noch nicht existiert, erstelle sie
+            if (!cableGroups[cableName]) {
+                cableGroups[cableName] = {
+                    totalFibers: 0
+                };
+            }
+
+            // 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)`;
+            }
+
+            // Die "id" ist jetzt der eindeutige Kabelname
+            cableSearchData.push({
+                id: name,
+                text: label
+            });
+        }
+
+        // 3. Select2 mit den gruppierten Daten initialisieren
+        $('#cable-search').select2({
+            data: cableSearchData,
+            placeholder: "Kabelname suchen...",
+            allowClear: true,
+        });
+    }
+
+    $('#cable-search').on('select2:select', function (e) {
+        const selectedData = e.params.data;
+
+        // Die "id" aus der Auswahl ist jetzt der Kabelname
+        const selectedCableName = selectedData.id;
+        if (!selectedCableName) return;
+
+        // 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');
+        });
+    });
+    $('#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();
 });