troy-grunt/netwatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

closes #6

Browse Source
This commit is contained in:
fixclean
2026-02-16 09:16:54 +01:00
parent 87ba23cf57
commit 092811fda8
2 changed files with 102 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
app/assets/js/device-type-edit-form.js Normal file
View File

@@ -0,0 +1,88 @@
(() => {
function addPortRow() {
const body = document.getElementById('port-definition-body');
if (!body) {
return;
}
const emptyRow = body.querySelector('tr td em');
if (emptyRow) {
const emptyTableRow = emptyRow.closest('tr');
if (emptyTableRow) {
emptyTableRow.remove();
}
}
const rowCount = body.querySelectorAll('tr').length;
const index = rowCount;
const number = rowCount + 1;
const optionsTemplate = document.getElementById('port-type-options-template');
const portTypeOptions = optionsTemplate
? optionsTemplate.innerHTML
: '<option value="">- Kein Typ -</option>';
const row = document.createElement('tr');
row.innerHTML = `
<td>${number}</td>
<td>
<input type="hidden" name="port_rows[${index}][id]" value="">
<input type="text" name="port_rows[${index}][name]" value="" placeholder="z.B. Gi1/0/1">
</td>
<td>
<select name="port_rows[${index}][port_type_id]">
${portTypeOptions}
</select>
</td>
<td>
<label class="inline-checkbox">
<input type="checkbox" name="port_rows[${index}][delete]" value="1">
entfernen
</label>
</td>
`;
body.appendChild(row);
}
function bindAddPortRowButton() {
const addButton = document.getElementById('add-port-row');
if (!addButton || addButton.dataset.portRowBound === '1') {
return;
}
addButton.addEventListener('click', addPortRow);
addButton.dataset.portRowBound = '1';
}
function bindDeleteButton() {
const deleteButton = document.getElementById('device-type-delete');
if (!deleteButton || deleteButton.dataset.deleteBound === '1') {
return;
}
deleteButton.addEventListener('click', () => {
const id = Number(deleteButton.dataset.deviceTypeId || '0');
if (id <= 0) {
return;
}
if (window.confirm('Diesen Gerätetyp wirklich löschen? Alle zugeordneten Geräte werden angepasst.')) {
// TODO: Delete-Endpoint/Flow ist noch nicht implementiert.
window.alert('Löschen noch nicht implementiert');
}
});
deleteButton.dataset.deleteBound = '1';
}
function init() {
bindAddPortRowButton();
bindDeleteButton();
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();

78
app/modules/device_types/edit.php
View File

@@ -304,6 +304,12 @@ $pageTitle = $isEdit ? "Gerätetyp bearbeiten: " . htmlspecialchars($deviceType[
</tbody> </tbody>
</table> </table>
<input type="hidden" id="shape-port-options" value="<?php echo htmlspecialchars(json_encode(array_values(array_column($ports, 'name'))), ENT_QUOTES); ?>"> <input type="hidden" id="shape-port-options" value="<?php echo htmlspecialchars(json_encode(array_values(array_column($ports, 'name'))), ENT_QUOTES); ?>">
<template id="port-type-options-template">
<option value="">- Kein Typ -</option>
<?php foreach ($portTypes as $pt): ?>
<option value="<?php echo (int)$pt['id']; ?>"><?php echo htmlspecialchars($pt['name']); ?></option>
<?php endforeach; ?>
</template>
<div class="port-actions"> <div class="port-actions">
<button type="button" class="button" id="add-port-row">+ Port hinzufügen</button> <button type="button" class="button" id="add-port-row">+ Port hinzufügen</button>
@@ -319,73 +325,17 @@ $pageTitle = $isEdit ? "Gerätetyp bearbeiten: " . htmlspecialchars($deviceType[
<button type="submit" class="button button-primary">Speichern</button> <button type="submit" class="button button-primary">Speichern</button>
<a href="?module=device_types&action=list" class="button">Abbrechen</a> <a href="?module=device_types&action=list" class="button">Abbrechen</a>
<?php if ($isEdit): ?> <?php if ($isEdit): ?>
<a href="#" class="button button-danger" onclick="confirmDelete(<?php echo $deviceTypeId; ?>)">Löschen</a> <button
type="button"
class="button button-danger"
id="device-type-delete"
data-device-type-id="<?php echo (int)$deviceTypeId; ?>">
Löschen
</button>
<?php endif; ?> <?php endif; ?>
</fieldset> </fieldset>
</form> </form>
</div> </div>
<script>
function addPortRow() {
const body = document.getElementById('port-definition-body');
if (!body) {
return;
}
const emptyRow = body.querySelector('tr td em');
if (emptyRow) {
emptyRow.closest('tr').remove();
}
const rowCount = body.querySelectorAll('tr').length;
const index = rowCount;
const number = rowCount + 1;
const portTypeOptions = `<?php
$optionHtml = '<option value="">- Kein Typ -</option>';
foreach ($portTypes as $pt) {
$optionHtml .= '<option value="' . (int)$pt['id'] . '">' . htmlspecialchars($pt['name'], ENT_QUOTES) . '</option>';
}
echo str_replace('`', '\`', $optionHtml);
?>`;
const row = document.createElement('tr');
row.innerHTML = `
<td>${number}</td>
<td>
<input type="hidden" name="port_rows[${index}][id]" value="">
<input type="text" name="port_rows[${index}][name]" value="" placeholder="z.B. Gi1/0/1">
</td>
<td>
<select name="port_rows[${index}][port_type_id]">
${portTypeOptions}
</select>
</td>
<td>
<label class="inline-checkbox">
<input type="checkbox" name="port_rows[${index}][delete]" value="1">
entfernen
</label>
</td>
`;
body.appendChild(row);
}
function confirmDelete(id) {
if (confirm('Diesen Gerätetyp wirklich löschen? Alle zugeordneten Geräte werden angepasst.')) {
// TODO: AJAX-Delete implementieren
alert('Löschen noch nicht implementiert');
}
}
document.addEventListener('DOMContentLoaded', () => {
const addButton = document.getElementById('add-port-row');
if (addButton) {
addButton.addEventListener('click', addPortRow);
}
});
</script>
<script src="/assets/js/device-type-shape-editor.js" defer></script> <script src="/assets/js/device-type-shape-editor.js" defer></script>
<script src="/assets/js/device-type-edit-form.js" defer></script>