Luca/thetool
1
0
Fork 0
Code Issues 5 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Pop Feature Updates

Browse Source 
* Vorbereitung für erweiterte Faserdarstellungen
* Pop Map Übersicht
* Leere Pop Kategorien werden nun als Unbekannt dargestellt
This commit is contained in:
Daniel Spitzer
2025-12-27 19:31:08 +01:00
parent 04cc5d2e9a
commit bb07cd1fb2
12 changed files with 1566 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/pages/Pop/detail/detail.js
+747
View File
@@ -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;
}
`
});
}