Pop Feature Updates

* Vorbereitung für erweiterte Faserdarstellungen
* Pop Map Übersicht
* Leere Pop Kategorien werden nun als Unbekannt dargestellt

public/js/pages/Pop/Pop.css

@@ -0,0 +1,10 @@
+.fa-map-location-dot:before
+{
+    color: #d80000;
+}
+.fa-map-location-dot:after
+{
+    color: #147d00;
+    opacity: 0.9;
+
+}

public/js/pages/Pop/PopMap.js

@@ -0,0 +1,353 @@
+Vue.component('pop-map-modal', {
+    template: `
+    <div>
+        <div class="modal fade" id="popMapModal" tabindex="-1" role="dialog" aria-hidden="true">
+            <div class="modal-dialog modal-xl modal-dialog-centered" style="max-width: 95vw;">
+                <div class="modal-content" style="height: 90vh;">
+                    <div class="modal-header bg-dark text-white">
+                      <h5 class="modal-title"><i class="fas fa-map-marked-alt"></i><span class="text-light mt-1 d-inline-block"> POP Übersicht</span></h5>
+                         <div class="d-flex align-items-center ml-auto">
+                            <div class="input-group mr-3 position-relative" style="width: 300px;">
+                                <input type="text" class="form-control form-control-sm" 
+                                    v-model="searchQuery" 
+                                    @input="filterPops" 
+                                    @keydown.down.prevent="moveSelection(1)"
+                                    @keydown.up.prevent="moveSelection(-1)"
+                                    @keydown.enter.prevent="handleEnter"
+                                    placeholder="POP suchen...">
+                                <div class="input-group-append">
+                                    <button class="btn btn-primary btn-sm" @click="searchPop"><i class="fas fa-search"></i></button>
+                                    <button v-if="searchQuery" class="btn btn-secondary btn-sm" @click="clearSearch"><i class="fas fa-times"></i></button>
+                                </div>
+                                
+                                <div v-if="filteredPops.length > 0 && showSuggestions" class="list-group position-absolute w-100" style="top: 100%; z-index: 1050; max-height: 300px; overflow-y: auto; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
+                                    <a href="#" v-for="(pop, index) in filteredPops" :key="pop.id" 
+                                       class="list-group-item list-group-item-action py-2" 
+                                       :class="{ 'active': index === selectedIndex }"
+                                       @click.prevent="selectPop(pop)">
+                                        <div class="d-flex w-100 justify-content-between">
+                                            <h6 class="mb-1" :class="{ 'text-white': index === selectedIndex }">{{ pop.name }}</h6>
+                                        </div>
+                                        <small :class="index === selectedIndex ? 'text-white' : 'text-muted'">{{ categories[pop.category || 99] }} | {{ pop.location }}</small>
+                                    </a>
+                                </div>
+                            </div>
+                            <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
+                                <span aria-hidden="true">&times;</span>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="modal-body p-0 position-relative">
+                        <div id="pop-map" style="width: 100%; height: 100%;"></div>
+                        
+                        <div class="legend-box" style="position: absolute; bottom: 30px; right: 20px; background: white; padding: 15px; border-radius: 5px; box-shadow: 0 0 15px rgba(0,0,0,0.2); z-index: 1000; min-width: 200px;">
+                            <h6 class="border-bottom p-0 pb-2 mb-2 mt-0"><strong>Kategorien</strong></h6>
+                            <div v-for="(label, key) in categories" :key="key" class="mb-1 d-flex align-items-center">
+                                 <div class="custom-control custom-checkbox mr-2">
+                                    <input type="checkbox" class="custom-control-input" :id="'cat-'+key" v-model="visibleCategories[key]" @change="updateMap(false)">
+                                    <label class="custom-control-label" :for="'cat-'+key" style="cursor: pointer;">
+                                    </label>
+                                </div>
+                                <img :src="window.TT_CONFIG.BASE_URL + '/' + categoryImages[key]" style="height: 20px; margin-right: 5px;">
+                                <label :for="'cat-'+key" style="cursor: pointer; margin-bottom: 0;">{{ label }} ({{ categoryCounts[key] || 0 }})</label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    `,
+    data() {
+        return {
+            map: null,
+            popLayer: null,
+            searchQuery: '',
+            filteredPops: [],
+            showSuggestions: false,
+            selectedIndex: -1,
+            categories: {
+                1: 'Outdoor (Kasten/Schrank)',
+                2: 'Indoor (Keller Gebäude)',
+                3: 'Sender/Funk (Sendemast)',
+                4: 'Container (Garage, Container)',
+                99: 'Unbekannt'
+            },
+            states: {
+                1: "Planung (Innenleben)",
+                2: "Bauphase (Schrank)",
+                3: "Grobdoku",
+                4: "in Betrieb",
+                5: "von Techniker abgenommen (Altbestand)"
+            },
+            categoryImages: {
+                1: 'img/markers/marker-pop.png',
+                2: 'img/markers/marker-pop-o.png',
+                3: 'img/markers/marker-pop-b.png',
+                4: 'img/markers/marker-pop-v.png',
+                99: 'img/markers/marker-pop-bl.png'
+            },
+            categoryColors: {
+                1: '#a1dfa0', // Outdoor - Green
+                2: '#f8b767', // Indoor - Orange
+                3: '#a9b8ec', // Sender - Blue
+                4: '#f89797',  // Container - Yellow
+                99: '#808080'  // Unbekannt - Gray
+            },
+            visibleCategories: {
+                1: true,
+                2: true,
+                3: true,
+                4: true,
+                99: true
+            },
+            categoryCounts: {
+                1: 0,
+                2: 0,
+                3: 0,
+                4: 0,
+                99: 0
+            },
+            allPops: [],
+            markers: []
+        };
+    },
+    mounted() {
+        // Prepare data
+        const popsObj = window.TT_CONFIG.POPS || {};
+        this.allPops = Object.values(popsObj); 
+        
+        this.calculateCounts();
+
+        // Listen to modal open event to init map correctly (fix render issues)
+        $(document).on('shown.bs.modal', '#popMapModal', this.initMap);
+        
+        // Close suggestions when clicking outside
+        document.addEventListener('click', this.handleClickOutside);
+    },
+    beforeDestroy() {
+        $(document).off('shown.bs.modal', '#popMapModal', this.initMap);
+        document.removeEventListener('click', this.handleClickOutside);
+    },
+    methods: {
+        calculateCounts() {
+            // Reset counts
+            for (let key in this.categoryCounts) {
+                this.categoryCounts[key] = 0;
+            }
+            
+            this.allPops.forEach(pop => {
+                const category = pop.category || 99;
+                if (this.categoryCounts.hasOwnProperty(category)) {
+                    this.categoryCounts[category]++;
+                } else {
+                    // Just in case we have a category not in our list, count it as 99 or ignore
+                     this.categoryCounts[99]++;
+                }
+            });
+        },
+        open() {
+            $('#popMapModal').modal('show');
+        },
+        initMap() {
+            if (this.map) {
+                setTimeout(() => {
+                   this.map.invalidateSize();
+                }, 100);
+                return;
+            }
+
+            if (typeof L === 'undefined' || !L.MakiMarkers) {
+                console.error('Leaflet or MakiMarkers not loaded');
+                return;
+            }
+
+            L.MakiMarkers.accessToken = window.TT_CONFIG.MAPBOX_TOKEN;
+
+            this.map = L.map('pop-map').setView([51.1657, 10.4515], 6); 
+            
+            const standardLayer = L.tileLayer('https://mapsneu.wien.gv.at/basemap/{id}/normal/google3857/{z}/{y}/{x}.{imgtype}', {
+                maxZoom: 19,
+                id: "geolandbasemap",
+                imgtype: "png",
+                attribution: 'Basemap.at'
+            });
+
+            const satelliteLayer = L.tileLayer('https://mapsneu.wien.gv.at/basemap/{id}/normal/google3857/{z}/{y}/{x}.{imgtype}', {
+                maxZoom: 19,
+                id: "bmaporthofoto30cm",
+                imgtype: "jpeg",
+                attribution: 'Basemap.at'
+            });
+
+            standardLayer.addTo(this.map);
+
+            const baseMaps = {
+                "Karte": standardLayer,
+                "Satellit": satelliteLayer
+            };
+
+            L.control.layers(baseMaps).addTo(this.map);
+
+            this.popLayer = L.featureGroup().addTo(this.map);
+            
+            this.updateMap();
+        },
+        updateMap(shouldFit = true) {
+            if (!this.map) return;
+            
+            this.popLayer.clearLayers();
+            this.markers = [];
+            
+            const bounds = L.latLngBounds();
+            let hasMarkers = false;
+            
+            this.allPops.forEach(pop => {
+                const category = pop.category || 99;
+                
+                if (!this.visibleCategories[category]) return;
+                
+                const gps = pop.gps; 
+                if (!gps) return;
+                
+                const parts = gps.split(',');
+                if (parts.length !== 2) return;
+                
+                const lat = parseFloat(parts[0]);
+                const lng = parseFloat(parts[1]);
+                
+                if (isNaN(lat) || isNaN(lng) || (lat === 0 && lng === 0)) return;
+                
+                let iconUrl = this.categoryImages[category] || this.categoryImages[99];
+                let color = this.categoryColors[category] || '#808080';
+
+                const marker = L.marker([lat, lng], {
+                    icon: L.MakiMarkers.icon({
+                        icon: 'village',
+                        color: color,
+                        size: 'l'
+                    })
+                });
+                
+                let categoryName = this.categories[category] || 'Unbekannt';
+                let stateText = this.states[pop.state] || pop.state || '-';
+
+                const popupContent = `
+                    <div style="min-width: 200px;">
+                        <h6 class="p-0"><i class="fas fa-building"></i> <strong>${pop.name}</strong></h6>
+                        <hr class="my-2">
+                        <div><strong>Kategorie:</strong> ${categoryName}</div>
+                        <div><strong>Status:</strong> ${stateText}</div>
+                        <div><strong>Zutritt:</strong> ${pop.location || '-'}</div>
+                        <div class="mt-2">
+                             <a target="_blank" href="${window.TT_CONFIG.BASE_URL}/Pop/Detail?id=${pop.id}" class="btn btn-sm btn-info btn-block text-light"><i class="fas fa-info-circle"></i> Details</a>
+                        </div>
+                    </div>
+                `;
+                
+                marker.bindPopup(popupContent);
+                marker.popData = pop;
+                
+                this.popLayer.addLayer(marker);
+                this.markers.push(marker);
+                bounds.extend([lat, lng]);
+                hasMarkers = true;
+            });
+            
+            if (shouldFit === true && hasMarkers && !this.searchQuery) { 
+                 this.map.fitBounds(bounds, {padding: [50, 50]});
+            }
+        },
+        filterPops() {
+            const query = this.searchQuery.toLowerCase().trim();
+            this.selectedIndex = -1;
+            
+            if (query.length < 1) {
+                this.filteredPops = [];
+                this.showSuggestions = false;
+                return;
+            }
+            
+            this.filteredPops = this.allPops.filter(pop => 
+                pop.name.toLowerCase().includes(query) || 
+                (pop.location && pop.location.toLowerCase().includes(query))
+            ).slice(0, 10);
+            
+            this.showSuggestions = true;
+        },
+        moveSelection(step) {
+            if (!this.showSuggestions || this.filteredPops.length === 0) return;
+            
+            this.selectedIndex += step;
+            
+            if (this.selectedIndex < 0) {
+                this.selectedIndex = this.filteredPops.length - 1;
+            } else if (this.selectedIndex >= this.filteredPops.length) {
+                this.selectedIndex = 0;
+            }
+        },
+        handleEnter() {
+            if (this.showSuggestions && this.selectedIndex >= 0 && this.selectedIndex < this.filteredPops.length) {
+                this.selectPop(this.filteredPops[this.selectedIndex]);
+            } else {
+                this.searchPop();
+            }
+        },
+        selectPop(pop) {
+            this.searchQuery = pop.name;
+            this.showSuggestions = false;
+            this.selectedIndex = -1;
+            this.searchPop();
+        },
+        handleClickOutside(event) {
+            if (!event.target.closest('.input-group')) {
+                this.showSuggestions = false;
+                this.selectedIndex = -1;
+            }
+        },
+        searchPop() {
+            const query = this.searchQuery.toLowerCase().trim();
+            if (!query) {
+                this.clearSearch();
+                return;
+            }
+            
+            this.showSuggestions = false;
+            this.selectedIndex = -1;
+
+            let found = this.markers.find(m => m.popData.name.toLowerCase().includes(query));
+            
+            if (!found) {
+                const hiddenPop = this.allPops.find(p => p.name.toLowerCase().includes(query));
+                if (hiddenPop) {
+                    const category = hiddenPop.category || 99;
+                    if (!this.visibleCategories[category]) {
+                        this.visibleCategories[category] = true;
+                        this.updateMap(false);
+                        found = this.markers.find(m => m.popData.id === hiddenPop.id);
+                    }
+                }
+            }
+            
+            if (found) {
+                this.map.flyTo(found.getLatLng(), 15);
+                setTimeout(() => {
+                    found.openPopup();
+                }, 500);
+            } else {
+                alert('Kein POP gefunden (oder keine GPS Koordinaten).');
+            }
+        },
+        clearSearch() {
+            this.searchQuery = '';
+            this.filteredPops = [];
+            this.showSuggestions = false;
+            this.selectedIndex = -1;
+            const bounds = L.latLngBounds();
+            this.markers.forEach(m => bounds.extend(m.getLatLng()));
+            if (this.markers.length > 0) {
+                 this.map.fitBounds(bounds, {padding: [50, 50]});
+            }
+        }
+    }
+});

public/js/pages/Pop/PopView.js

@@ -11,12 +11,19 @@ Vue.component('Pop', {
               <i class="fas fa-plus"></i>
               Pop hinzufügen
             </button>
+            <button type="button" class="btn btn-light mr-2" @click="$refs.mapModal.open()">
+              <i class="fa-duotone fa-regular fa-map-location-dot"></i> <span class="font-weight-semibold">Übersichtskarte</span>
+            </button>
           </template>
 
           <template v-slot:name="{ row }">
             <a target="_blank" :href="window['TT_CONFIG']['BASE_URL'] +'/Pop/Detail?id=' + row.id">{{row.name}}</a>
           </template>
 
+          <template v-slot:category="{ row }">
+            {{ {1: 'Outdoor', 2: 'Indoor', 3: 'Sender/Funk', 4: 'Container', 99: 'Unbekannt'}[row.category] || 'Unbekannt' }}
+          </template>
+
           <template v-slot:doku_date="{ row }">
             <span>{{row.doku_date ? window.moment.unix(row.doku_date).format('DD.MM.YYYY') : ''}}</span>
           </template>
@@ -45,6 +52,7 @@ Vue.component('Pop', {
 
         </tt-table>
         
+        <pop-map-modal ref="mapModal"></pop-map-modal>
       </tt-card>
     `,
     data() {
@@ -60,7 +68,8 @@ Vue.component('Pop', {
                             {value: '1', text: 'Outdoor (Kasten/Schrank)'},
                             {value: '2', text: 'Indoor (Keller Gebäude)'},
                             {value: '3', text: 'Sender/Funk (Sendemast)'},
-                            {value: '4', text: 'Container (Garage, Container)'}]},
+                            {value: '4', text: 'Container (Garage, Container)'},
+                            {value: '99', text: 'Unbekannt'}]},
                     {text: 'Netzgebiet', key: 'networkArea', class: 'text-center',
                     // TODO: fix autocomplete Filter
                     //    filter: 'autocomplete',

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

@@ -0,0 +1,747 @@
+$(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;
+            }
+        `
+    });
+}