thetool/public/js/pages/Pop/detail/detail.js

$(document).ready(function () {
    if ($('#sortracklist').length > 0) {
        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) {
                $('#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');
        var modal = $(this);
        modal.find('.modal-title').html('<span id="module-info">Modul (' + destinationname + ')</span>');
        modal.find('.alert').text('');
        modal.find('.alert').hide();
        var options;
        var selected;
        var hemaxcount = 1;
        var hemaxcountactive = 1;
        var edit = 0;
        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();
            for (let i = 1; i <= rackhe; i++) {
                if (parent.find('td').eq(1).html() !== undefined) {
                    break;
                } else {
                    parent = parent.prev();
                }
            }
        }

        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;

            var modwidth;
            var totalPositions;
            if (parent.find('td').eq(1).data('width')) {
                modwidth = parent.find('td').eq(1).data('width');
                totalPositions = 12 / modwidth;
            } else {
                modwidth = 12 / counttd;
                totalPositions = counttd;
            }
            $('#module-width').val(modwidth);

            if (totalPositions > 1) {
                var options;
                for (let i = 1; i <= totalPositions; i++) {
                    options = options + '<option value="' + i + '">' + i + '</option>';
                }
                $('#module-slot').html(options);
                $('#module-position').html(options);
                $('#module-slot-div').show();
            } else {
                $('#module-slot-div').hide();
            }

            $('#module-width').attr('disabled', 'disabled');
            $('#he-count-div').html(`<select required="required" id="module-he-count" name="module-he-count" class="form-control" disabled="disabled"><option value="` + parent.find('td').eq(1).attr('rowspan') + `">` + parent.find('td').eq(1).attr('rowspan') + `</option><select>`);
            $('#he-start-div').html(`<select required="required" id="module-he-start" name="module-he-start" class="form-control" disabled="disabled"><option value="` + parent.find('td').eq(0).data('he') + `">` + parent.find('td').eq(0).data('he') + `</option></select>`);


            if (parent.find('td').eq(1).data('id') === undefined) {
                newmodule = true;
            }

            if (!newmodule) {
                $('#module-remove').show();
                $('#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();
                $('#module-status').val(status);

                $('#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 {
                $('#module-remove').hide();
                $('#module-update').hide();
                $('#module-add').show();
                $('#module-name-div').show();
                $('#module-name').removeAttr('disabled');
                $('#module-device-div').hide();
                $('#module-device-id').show();
                $('#module-device-id').attr('disabled', 'disabled');
                $('#module-type').val('0').change();
                $('#module-type').removeAttr('disabled');
                $('#module-plug').removeAttr('disabled');
                $('#module-ports').removeAttr('disabled');
                $('#module-name').val('');
                $('#module-ports').val('48');
                $('#module-ports').trigger("change");
                $('#module-position-div').hide();
                $('#module-update').hide();
                $('#module-device-text').hide();
            }
        } else {
            $('#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');
                $('#module-device-div').hide();
                $('#module-device-id').attr('disabled', 'disabled');
                $('#module-type').val('0').change();
                $('#module-type').removeAttr('disabled');
                $('#module-width').removeAttr('disabled');
                $('#module-plug').removeAttr('disabled');
                $('#module-ports').removeAttr('disabled');
                $('#module-name').val('');
                $('#module-width').val('12');
                $('#module-ports').val('48');
                $('#module-ports').trigger("change");
                $('#module-position').empty();
                $('#module-position-div').hide();
                $('#module-device-text').hide();
                $('#module-device-id').show();
            }
        }

        $('#module-side').val(side);
    });

    $("body").on("change", "#module-type", function () {
        if (parseInt($(this).val()) === 1) {
            $('#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();
            $('#module-status-div').hide();
        } else if (parseInt($(this).val()) === 0) {
            $('#module-name-div').show();
            $('#module-name').removeAttr('disabled');
            $('#module-device-div').hide();
            $('#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');
            $('#module-device-div').hide();
            $('#module-device-id').attr('disabled', 'disabled');
            $('#module-ports-div').hide();
            $('#module-plug-div').hide();
            $('#module-status-div').hide();
        }
    });

    $("body").on("change", "#module-he-start", function () {
        var rackhe = trigger.closest('table').find('th').data('rackhe');
        var hemaxcount = 1;
        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;
            }

            if (hemaxcountactive == 1 && i > $(this).val() && trigger.closest('tbody').find('tr').eq(i - 1).find('td').eq(1).hasClass('he-free')) {
                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>`);
    });

    $("body").on("click", "#module-add", function () {
        var error;
        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()),
                type: $.trim($('#module-type').val()),
                device_id: $.trim($('#module-device-id').val()),
                name: $.trim($('#module-name').val()),
                start_he: $.trim($('#module-he-start').val()),
                end_he: endhe,
                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) {
                if (data.success === true) {
                    $('#rackModuleModal').modal('toggle');
                    var currentSide = trigger.closest('tbody').data('side');
                    updateAllRackViews(rackid, currentSide);
                }
            }, "json");
        } else {
            $(this).closest('.modal').find('.alert').text(error);
            $(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, {
                id: moduleid
            }, function (data) {
                if (data.success === true) {
                    $('#rackModuleModal').modal('toggle');
                    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,
                type: $.trim($('#module-type').val()),
                name: $.trim($('#module-name').val()),
                ports: $.trim($('#module-ports').val()),
                plug: $.trim($('#module-plug').val()),
                status: $.trim($('#module-status').val())
            }, function (data) {
                if (data.success === true) {
                    $('#rackModuleModal').modal('toggle');
                    updateAllRackViews(rackid, side);
                }
            }, "json");
        } else {
            $(this).closest('.modal').find('.alert').text(error);
            $(this).closest('.modal').find('.alert').show();
        }
    });

    $("body").on("click", "#rack-update", function () {
        var rackid = $(this).data('rackid');
        var rackmin = $(this).data('rackminhe');
        var error;

        if ($('#rack-he').val() < rackmin) {
            error = "Minimale Höheneinheiten: " + rackmin;
        }

        if ($('#rack-he').val() > 60) {
            error = "Maximale Höheneinheiten: 60";
        }

        if (!$.isNumeric($('#rack-he').val())) {
            error = "Bitte Zahl bei Höheneinheiten eingeben";
        }

        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');
                    location.reload();
                }
            }, "json");
        } else {
            $(this).closest('.modal').find('.alert').text(error);
            $(this).closest('.modal').find('.alert').show();
        }
    });

    $("body").on("click", "#rack-add", function () {
        var popid = $(this).data('popid');
        var error;

        if ($('#rack-he').val() < 1) {
            error = "Minimale Höheneinheiten: " + 1;
        }

        if ($('#rack-he').val() > 60) {
            error = error = "Maximale Höheneinheiten: 60";
        }

        if (!$.isNumeric($('#rack-he').val())) {
            error = "Bitte Zahl bei Höheneinheiten eingeben";
        }

        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');
                    location.reload();
                }
            }, "json");
        } else {
            $(this).closest('.modal').find('.alert').text(error);
            $(this).closest('.modal').find('.alert').show();
        }
    });

    $("body").on("click", "#rack-remove", function () {
        var rackid = $(this).data('rackid');

        $.post(linkRemoveRack, {
            id: rackid
        }, function (data) {
            if (data.success === true) {
                $('#rackModal').modal('toggle');
                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>`);
            $('#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>`);
            $('#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>`);
            $('#module-position-div').show();
        }
    });

    $("body").on("change", "#module-ports", function () {
        var plugs = [];
        if ($(this).find(':selected').data('plugs') !== undefined) {
            plugs = $(this).find(':selected').data('plugs').split(';');
            $("#module-plug option").each(function () {
                if (plugs.includes($(this).val())) {
                    $(this).show();
                } else {
                    if ($(this).val() == $('#module-plug').val()) {
                        $('#module-plug').val(plugs[0]);
                    }
                    $(this).hide();
                }
            });
        }
    });

    $("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++) {
                if (parent.find('td').eq(1).html() !== undefined) {
                    break;
                } else {
                    parent = parent.prev();
                }
            }
        }

        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 {
            $('#module-remove').hide();
            $('#module-update').hide();
            $('#module-add').show();
            $('#module-name-div').show();
            $('#module-name').removeAttr('disabled');
            $('#module-device-div').hide();
            $('#module-device-id').show();
            $('#module-device-id').attr('disabled', 'disabled');
            $('#module-type').val('0').change();
            $('#module-type').removeAttr('disabled');
            $('#module-plug').removeAttr('disabled');
            $('#module-ports').removeAttr('disabled');
            $('#module-name').val('');
            $('#module-ports').val('48');
            $('#module-ports').trigger("change");
            $('#module-position-div').hide();
            $('#module-update').hide();
            $('#module-device-text').hide();
        }
    });

    $("body").on("click", ".switch-rack-side", function () {
        var icon = $(this);
        var rackTh = icon.closest('th');
        var rackId = rackTh.data('rackid');
        var rackTable = icon.closest('table');
        var rackBody = rackTable.find('tbody');
        var sideIndicator = rackTh.find('.rack-side-indicator');

        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);
                rackBody.data('side', newSide);

                if (newSide === 'front') {
                    sideIndicator.text('- Vorderseite');
                } 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>');
                rackTable.fadeIn(150);
            }).always(function () {
                icon.removeClass('is-loading fa-spin');
            });
        });
    });
    $("body").on("click", ".rack-fullscreen-btn", function (e) {
        e.stopPropagation();

        var $originalTable = $(this).closest('table');
        var rackName = $(this).closest('th').find('.rack-name').text().trim();
        var $clonedTable = $originalTable.clone();

        $clonedTable.find('.move-handle, .switch-rack-side, .fa-edit, .fa-expand').remove();

        $clonedTable.css({
            'width': '800px',
            'margin': '0 auto',
            'background-color': '#fff',
            'box-shadow': 'none'
        });

        $('#overlayTitle').text(rackName);
        $('#overlayContent').html($clonedTable);
        $('#customRackOverlay').fadeIn();
        $('body').css('overflow', 'hidden');
        $('#overlayContent [data-toggle="popover"]').popover();
    });
});
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 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;
            }

            * {
                color: #000 !important;
                text-shadow: none !important;
            }

            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;
            }

            .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;
            }

            .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;
            }

            .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;
            }

            .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%;
            }

            #overlayContent { width: 100%; display: block; }
            
            .rack-fullscreen-btn, .switch-rack-side, .move-handle, .fa-edit {
                display: none !important;
            }
        `
    });
}