diff --git a/public/js/pages/pop/detail.js b/public/js/pages/pop/detail.js
new file mode 100644
index 000000000..df889e27b
--- /dev/null
+++ b/public/js/pages/pop/detail.js
@@ -0,0 +1,533 @@
+$(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 = $.trim(thisclick.closest('table').find('th').text());
+            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 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;
+            if (counttd > 1) {
+                var options;
+                for (let i = 1; i <= counttd; i++) {
+                    options = options + '<option value="' + i + '">' + i + '</option>';
+                }
+                $('#module-slot').html(options);
+                $('#module-position').html(options);
+                $('#module-slot-div').show();
+            }
+            $('#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;
+            }
+            var modwidth = 12 / counttd;
+            $('#module-width').val(modwidth);
+
+            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();
+                }
+                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-type').attr('disabled', 'disabled');
+                $('#module-name').val(parent.find('td').eq(1).data('name'));
+                // $('#module-name').attr('disabled', 'disabled');
+
+
+                $('#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();
+
+            }
+        }
+    });
+
+    $("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();
+        } 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();
+        } 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();
+        }
+    });
+
+    $("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") {
+            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, {
+                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()),
+                position: $.trim($('#module-position').val())
+
+            }, function (data) {
+                if (data.success === true) {
+                    $('#rackModuleModal').modal('toggle');
+                    $.get(linkGenerateRack + "&id=" + rackid, function (data, status) {
+                        trigger.closest('tbody').html(data);
+                    });
+                }
+            }, "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?")) {
+            $.post(linkRemoveModule, {
+                id: moduleid
+            }, function (data) {
+                if (data.success === true) {
+                    $('#rackModuleModal').modal('toggle');
+                    $.get(linkGenerateRack + "&id=" + rackid, function (data, status) {
+                        trigger.closest('tbody').html(data);
+                    });
+                }
+            }, "json");
+        }
+    });
+    $("body").on("click", "#module-update", function () {
+        var moduleid = $(this).data('moduleid');
+        var rackid = trigger.closest('table').find('th').data('rackid');
+        var error;
+        if (!$.trim($('#module-name').val())) {
+            error = "Modul Name darf nicht leer sein";
+        }
+        if (!error) {
+            $.post(linkUpdateModule, {
+                id: moduleid,
+                name: $.trim($('#module-name').val()),
+                ports: $.trim($('#module-ports').val()),
+                plug: $.trim($('#module-plug').val())
+            }, function (data) {
+                if (data.success === true) {
+                    $('#rackModuleModal').modal('toggle');
+                    $.get(linkGenerateRack + "&id=" + rackid, function (data, status) {
+                        trigger.closest('tbody').html(data);
+                    });
+                }
+            }, "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-name').attr('disabled', 'disabled');
+
+
+            $('#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();
+        }
+    });
+
+
+});
\ No newline at end of file