feat: Erweiterung der Module für Geräte, Stockwerke und Racks mit grundlegenden Funktionen und Strukturen
This commit is contained in:
Troy Grunt
@@ -1 +1,122 @@
|
|||||||
// Globale JS-Funktionen, Initialisierung
|
/**
|
||||||
|
* app/assets/js/app.js
|
||||||
|
*
|
||||||
|
* Zentrale JS-Datei für die Webanwendung
|
||||||
|
* - Initialisiert alle Module
|
||||||
|
* - SVG-Editor, Netzwerk-Ansicht, Drag & Drop, Floorplan
|
||||||
|
* - Event-Handler, globale Variablen
|
||||||
|
*/
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// Global Variables / Config
|
||||||
|
// =========================
|
||||||
|
|
||||||
|
window.APP = {
|
||||||
|
deviceTypes: [], // TODO: alle Gerätetypen laden
|
||||||
|
devices: [], // TODO: alle Geräte laden
|
||||||
|
racks: [], // TODO: alle Racks laden
|
||||||
|
floors: [], // TODO: alle Floors laden
|
||||||
|
connections: [], // TODO: alle Verbindungen laden
|
||||||
|
};
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// Init Functions
|
||||||
|
// =========================
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
|
||||||
|
console.log('App initialized');
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// SVG-Port-Editor initialisieren
|
||||||
|
// =========================
|
||||||
|
// TODO: import / init svg-editor.js
|
||||||
|
// if (window.SVGEditor) window.SVGEditor.init();
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// Netzwerk-Ansicht initialisieren
|
||||||
|
// =========================
|
||||||
|
// TODO: import / init network-view.js
|
||||||
|
// if (window.NetworkView) window.NetworkView.init();
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// Drag & Drop für Floors / Racks / Devices
|
||||||
|
// =========================
|
||||||
|
// TODO: init drag & drop logic
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// Event-Handler für Buttons / Forms
|
||||||
|
// =========================
|
||||||
|
initEventHandlers();
|
||||||
|
});
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// Event Handler Setup
|
||||||
|
// =========================
|
||||||
|
|
||||||
|
function initEventHandlers() {
|
||||||
|
|
||||||
|
// TODO: Save-Button Device-Type
|
||||||
|
const saveDeviceTypeBtn = document.querySelector('#save-device-type');
|
||||||
|
if (saveDeviceTypeBtn) {
|
||||||
|
saveDeviceTypeBtn.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
// TODO: Save Device-Type via AJAX
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Save-Button Device
|
||||||
|
const saveDeviceBtn = document.querySelector('#save-device');
|
||||||
|
if (saveDeviceBtn) {
|
||||||
|
saveDeviceBtn.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
// TODO: Save Device via AJAX
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Save-Button Floor
|
||||||
|
const saveFloorBtn = document.querySelector('#save-floor');
|
||||||
|
if (saveFloorBtn) {
|
||||||
|
saveFloorBtn.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
// TODO: Save Floor via AJAX
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Save-Button Rack
|
||||||
|
const saveRackBtn = document.querySelector('#save-rack');
|
||||||
|
if (saveRackBtn) {
|
||||||
|
saveRackBtn.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
// TODO: Save Rack via AJAX
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: Weitere Event-Handler (Löschen, Import, Export, Filter)
|
||||||
|
}
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// Utility Functions
|
||||||
|
// =========================
|
||||||
|
|
||||||
|
/**
|
||||||
|
* AJAX Request Helper
|
||||||
|
* @param {string} url
|
||||||
|
* @param {object} data
|
||||||
|
* @param {function} callback
|
||||||
|
*/
|
||||||
|
function ajaxPost(url, data, callback) {
|
||||||
|
const xhr = new XMLHttpRequest();
|
||||||
|
xhr.open('POST', url, true);
|
||||||
|
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
|
||||||
|
xhr.onload = function() {
|
||||||
|
if (xhr.status >= 200 && xhr.status < 300) {
|
||||||
|
callback(JSON.parse(xhr.responseText));
|
||||||
|
} else {
|
||||||
|
console.error('AJAX Error:', xhr.statusText);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.send(JSON.stringify(data));
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO: weitere Utility-Funktionen (DOM-Helper, SVG-Helper, etc.)
|
||||||
|
|||||||
@@ -1,2 +1,156 @@
|
|||||||
<?php
|
<?php
|
||||||
// Gerät anlegen oder bearbeiten
|
/**
|
||||||
|
* app/devices/edit.php
|
||||||
|
*
|
||||||
|
* Konkretes Gerät anlegen / bearbeiten
|
||||||
|
* - Name, Beschreibung, Standort (Rack / Floor)
|
||||||
|
* - Gerätetyp wählen
|
||||||
|
* - Ports automatisch vom Device-Type übernehmen
|
||||||
|
* - SVG-Position im Rack / Floor
|
||||||
|
* - Optional: Notizen / Kommentare
|
||||||
|
*/
|
||||||
|
|
||||||
|
// TODO: bootstrap laden
|
||||||
|
// require_once __DIR__ . '/../../bootstrap.php';
|
||||||
|
|
||||||
|
// TODO: Auth erzwingen
|
||||||
|
// requireAuth();
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// Kontext bestimmen
|
||||||
|
// =========================
|
||||||
|
|
||||||
|
// Gerät-ID aus GET
|
||||||
|
// $deviceId = (int)($_GET['id'] ?? 0);
|
||||||
|
|
||||||
|
// TODO: Gerät aus DB laden, falls ID vorhanden
|
||||||
|
// $device = null;
|
||||||
|
|
||||||
|
// TODO: Alle Device-Types laden
|
||||||
|
// $deviceTypes = $sql->get("SELECT * FROM device_types ORDER BY name", "", []);
|
||||||
|
|
||||||
|
// TODO: Wenn Gerät vorhanden, Ports laden (vom Device-Type)
|
||||||
|
$ports = []; // TODO: Ports vorbereiten
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
<h2>Gerät bearbeiten</h2>
|
||||||
|
|
||||||
|
<form method="post" action="/app/devices/save.php" enctype="multipart/form-data">
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Basisdaten
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>Allgemein</legend>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Name<br>
|
||||||
|
<input type="text" name="name" value="">
|
||||||
|
<!-- TODO: Name vorbelegen -->
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Beschreibung<br>
|
||||||
|
<textarea name="description"></textarea>
|
||||||
|
<!-- TODO: Beschreibung vorbelegen -->
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Gerätetyp<br>
|
||||||
|
<select name="device_type_id">
|
||||||
|
<!-- TODO: Device-Types aus DB -->
|
||||||
|
<option value="1">Switch</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Standort / Rack / Floor
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>Standort</legend>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Stockwerk<br>
|
||||||
|
<select name="floor_id">
|
||||||
|
<!-- TODO: Floors laden -->
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Rack<br>
|
||||||
|
<select name="rack_id">
|
||||||
|
<!-- TODO: Racks laden -->
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Position im Rack<br>
|
||||||
|
<input type="number" name="rack_position" value="">
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Ports
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>Ports</legend>
|
||||||
|
|
||||||
|
<p class="hint">Ports werden vom Device-Type übernommen. Positionen können angepasst werden.</p>
|
||||||
|
|
||||||
|
<div class="svg-editor-container">
|
||||||
|
<svg
|
||||||
|
id="device-svg"
|
||||||
|
viewBox="0 0 800 400"
|
||||||
|
width="100%"
|
||||||
|
height="400"
|
||||||
|
>
|
||||||
|
<!-- TODO: SVG laden -->
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- TODO: Port-Liste -->
|
||||||
|
<div class="port-list">
|
||||||
|
<!-- Ports mit Typ, Name, Modus, VLAN -->
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Aktionen
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<button type="submit">Speichern</button>
|
||||||
|
<button type="button" onclick="history.back()">Abbrechen</button>
|
||||||
|
<!-- TODO: Löschen, falls edit -->
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
JS-Konfiguration
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* SVG-Editor Konfiguration
|
||||||
|
*/
|
||||||
|
|
||||||
|
// TODO: Device-ID setzen
|
||||||
|
// window.DEVICE_ID = <?= (int)$deviceId ?>;
|
||||||
|
|
||||||
|
// TODO: Ports an JS übergeben
|
||||||
|
// window.DEVICE_PORTS = <?= json_encode($ports) ?>;
|
||||||
|
</script>
|
||||||
|
|||||||
@@ -1,2 +1,111 @@
|
|||||||
<?php
|
<?php
|
||||||
// Liste aller Geräte anzeigen
|
/**
|
||||||
|
* app/devices/list.php
|
||||||
|
*
|
||||||
|
* Übersicht aller Geräte
|
||||||
|
* - Anzeigen
|
||||||
|
* - Bearbeiten
|
||||||
|
* - Löschen
|
||||||
|
* - SVG / JPG Vorschau
|
||||||
|
*/
|
||||||
|
|
||||||
|
// TODO: bootstrap laden
|
||||||
|
// require_once __DIR__ . '/../../bootstrap.php';
|
||||||
|
|
||||||
|
// TODO: Auth erzwingen
|
||||||
|
// requireAuth();
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// Geräte laden
|
||||||
|
// =========================
|
||||||
|
|
||||||
|
// TODO: Geräte aus DB laden
|
||||||
|
// $devices = $sql->get("SELECT * FROM devices ORDER BY name", "", []);
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
<h2>Geräte</h2>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Toolbar
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<div class="toolbar">
|
||||||
|
<a href="/?page=devices/edit" class="button">
|
||||||
|
+ Neues Gerät
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- TODO: Suchfeld -->
|
||||||
|
<!-- TODO: Filter (Device-Type, Standort, Floor, Rack) -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Geräte-Tabelle
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<table class="device-list">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Vorschau</th>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Gerätetyp</th>
|
||||||
|
<th>Standort</th>
|
||||||
|
<th>Rack</th>
|
||||||
|
<th>Rack-Pos</th>
|
||||||
|
<th>Ports</th>
|
||||||
|
<th>Aktionen</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
|
||||||
|
<?php /* foreach ($devices as $device): */ ?>
|
||||||
|
<tr>
|
||||||
|
<td class="preview">
|
||||||
|
<!-- TODO: SVG / JPG Thumbnail -->
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<!-- TODO: Name -->
|
||||||
|
Gerät XY
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<!-- TODO: Gerätetyp -->
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<!-- TODO: Standort / Floor -->
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<!-- TODO: Rack -->
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<!-- TODO: Rack-Position -->
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<!-- TODO: Anzahl Ports -->
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<a href="/?page=devices/edit&id=1">Bearbeiten</a>
|
||||||
|
<button> Löschen </button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<?php /* endforeach; */ ?>
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Leerer Zustand
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<?php /* if (empty($devices)): */ ?>
|
||||||
|
<div class="empty-state">
|
||||||
|
<p>Noch keine Geräte angelegt.</p>
|
||||||
|
<p><a href="/?page=devices/edit">Erstes Gerät anlegen</a></p>
|
||||||
|
</div>
|
||||||
|
<?php /* endif; */ ?>
|
||||||
|
|||||||
@@ -1,2 +1,104 @@
|
|||||||
<?php
|
<?php
|
||||||
// Gerät speichern (Rack-Position, Typ, Name)
|
/**
|
||||||
|
* app/devices/save.php
|
||||||
|
*
|
||||||
|
* Speichert:
|
||||||
|
* - Basisdaten (Name, Beschreibung)
|
||||||
|
* - Gerätetyp-Zuordnung
|
||||||
|
* - Standort (Floor, Rack, Rack-Position)
|
||||||
|
* - Ports (vom Device-Type übernommen)
|
||||||
|
* - SVG-Positionen
|
||||||
|
*
|
||||||
|
* POST JSON oder multipart/form-data
|
||||||
|
*/
|
||||||
|
|
||||||
|
// TODO: bootstrap laden
|
||||||
|
// require_once __DIR__ . '/../../bootstrap.php';
|
||||||
|
|
||||||
|
// TODO: Auth erzwingen
|
||||||
|
// requireAuth();
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// Request prüfen
|
||||||
|
// =========================
|
||||||
|
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
|
||||||
|
http_response_code(405);
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// Daten aus POST / JSON
|
||||||
|
// =========================
|
||||||
|
|
||||||
|
// TODO: Prüfen, ob multipart/form-data oder JSON
|
||||||
|
// $data = json_decode(file_get_contents('php://input'), true);
|
||||||
|
|
||||||
|
// Basisfelder
|
||||||
|
// $deviceId = $data['id'] ?? null;
|
||||||
|
// $name = $data['name'] ?? '';
|
||||||
|
// $description = $data['description'] ?? '';
|
||||||
|
// $deviceTypeId = $data['device_type_id'] ?? null;
|
||||||
|
// $floorId = $data['floor_id'] ?? null;
|
||||||
|
// $rackId = $data['rack_id'] ?? null;
|
||||||
|
// $rackPosition = $data['rack_position'] ?? null;
|
||||||
|
// $svgPositions = $data['svg_positions'] ?? [];
|
||||||
|
// $portsData = $data['ports'] ?? [];
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// Validierung
|
||||||
|
// =========================
|
||||||
|
|
||||||
|
// TODO:
|
||||||
|
// - Name nicht leer
|
||||||
|
// - Device-Type existiert
|
||||||
|
// - Floor / Rack gültig
|
||||||
|
// - Ports valide
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// Bild / SVG Upload (optional)
|
||||||
|
// =========================
|
||||||
|
|
||||||
|
// TODO: $_FILES['image'] prüfen
|
||||||
|
// - Upload in /uploads/devices
|
||||||
|
// - SVG prüfen / sanitizen
|
||||||
|
// - Pfad speichern
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// Device speichern
|
||||||
|
// =========================
|
||||||
|
|
||||||
|
if (!empty($deviceId)) {
|
||||||
|
// TODO: UPDATE devices SET ...
|
||||||
|
// $rows = $sql->set("UPDATE ...", "???", [...]);
|
||||||
|
} else {
|
||||||
|
// TODO: INSERT INTO devices ...
|
||||||
|
// $deviceId = $sql->set("INSERT ...", "???", [...], true);
|
||||||
|
}
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// Ports speichern / übernehmen vom Device-Type
|
||||||
|
// =========================
|
||||||
|
|
||||||
|
// TODO:
|
||||||
|
// - $portsData iterieren
|
||||||
|
// - Positionen aus SVG übernehmen
|
||||||
|
// - port_type_id, name, VLAN, Modus speichern
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// SVG-Positionen speichern
|
||||||
|
// =========================
|
||||||
|
|
||||||
|
// TODO:
|
||||||
|
// - device_positions Tabelle?
|
||||||
|
// - x/y Koordinaten
|
||||||
|
// - Rotation / Zoom (optional)
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// Antwort
|
||||||
|
// =========================
|
||||||
|
|
||||||
|
echo json_encode([
|
||||||
|
'status' => 'ok',
|
||||||
|
'id' => $deviceId
|
||||||
|
]);
|
||||||
|
|||||||
@@ -1,2 +1,128 @@
|
|||||||
<?php
|
<?php
|
||||||
// Stockwerk bearbeiten inkl. SVG-Plan
|
/**
|
||||||
|
* app/floors/edit.php
|
||||||
|
*
|
||||||
|
* Floor / Stockwerk anlegen oder bearbeiten
|
||||||
|
* - Name, Beschreibung
|
||||||
|
* - Zugehörige Räume / Netzwerkdosen
|
||||||
|
* - SVG-Grundriss laden / speichern
|
||||||
|
*/
|
||||||
|
|
||||||
|
// TODO: bootstrap laden
|
||||||
|
// require_once __DIR__ . '/../../bootstrap.php';
|
||||||
|
|
||||||
|
// TODO: Auth erzwingen
|
||||||
|
// requireAuth();
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// Kontext bestimmen
|
||||||
|
// =========================
|
||||||
|
|
||||||
|
// Floor-ID aus GET
|
||||||
|
// $floorId = (int)($_GET['id'] ?? 0);
|
||||||
|
|
||||||
|
// TODO: Floor aus DB laden, falls ID vorhanden
|
||||||
|
// $floor = null;
|
||||||
|
|
||||||
|
// TODO: Räume / Dosen laden, falls Floor existiert
|
||||||
|
$rooms = []; // TODO: Räume vorbereiten
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
<h2>Stockwerk bearbeiten</h2>
|
||||||
|
|
||||||
|
<form method="post" action="/app/floors/save.php" enctype="multipart/form-data">
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Basisdaten
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>Allgemein</legend>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Name<br>
|
||||||
|
<input type="text" name="name" value="">
|
||||||
|
<!-- TODO: Name vorbelegen -->
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Beschreibung<br>
|
||||||
|
<textarea name="description"></textarea>
|
||||||
|
<!-- TODO: Beschreibung vorbelegen -->
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Räume / Netzwerkdosen
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>Räume / Netzwerkdosen</legend>
|
||||||
|
|
||||||
|
<p class="hint">
|
||||||
|
Räume hinzufügen / bearbeiten. Netzwerkdosen können einzeln nummeriert / benannt werden.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="room-list">
|
||||||
|
<!-- TODO: Räume auflisten -->
|
||||||
|
<!-- TODO: Netzwerkdosen pro Raum anzeigen -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="button" id="add-room">
|
||||||
|
+ Raum hinzufügen
|
||||||
|
</button>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
SVG Floorplan
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>Grundriss / Floorplan</legend>
|
||||||
|
|
||||||
|
<div class="svg-editor-container">
|
||||||
|
<svg
|
||||||
|
id="floor-svg"
|
||||||
|
viewBox="0 0 2000 1000"
|
||||||
|
width="100%"
|
||||||
|
height="600"
|
||||||
|
>
|
||||||
|
<!-- TODO: Floorplan SVG laden -->
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="hint">
|
||||||
|
Räume und Netzwerkdosen per Drag & Drop platzieren. Nummerierung und Bezeichnungen editierbar.
|
||||||
|
</p>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Aktionen
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<button type="submit">Speichern</button>
|
||||||
|
<button type="button" onclick="history.back()">Abbrechen</button>
|
||||||
|
<!-- TODO: Löschen, falls edit -->
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
JS-Konfiguration
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* Konfiguration für Floorplan SVG-Editor
|
||||||
|
*/
|
||||||
|
|
||||||
|
// TODO: Floor-ID aus PHP setzen
|
||||||
|
// window.FLOOR_ID = <?= (int)$floorId ?>;
|
||||||
|
|
||||||
|
// TODO: Räume / Dosen an JS übergeben
|
||||||
|
// window.ROOMS = <?= json_encode($rooms) ?>;
|
||||||
|
</script>
|
||||||
|
|||||||
@@ -1,2 +1,96 @@
|
|||||||
<?php
|
<?php
|
||||||
// Übersicht aller Stockwerke
|
/**
|
||||||
|
* app/floors/list.php
|
||||||
|
*
|
||||||
|
* Übersicht aller Floors / Stockwerke
|
||||||
|
* - Anzeigen
|
||||||
|
* - Bearbeiten
|
||||||
|
* - Löschen
|
||||||
|
* - SVG-Vorschau optional
|
||||||
|
*/
|
||||||
|
|
||||||
|
// TODO: bootstrap laden
|
||||||
|
// require_once __DIR__ . '/../../bootstrap.php';
|
||||||
|
|
||||||
|
// TODO: Auth erzwingen
|
||||||
|
// requireAuth();
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// Floors laden
|
||||||
|
// =========================
|
||||||
|
|
||||||
|
// TODO: Floors aus DB laden
|
||||||
|
// $floors = $sql->get("SELECT * FROM floors ORDER BY name", "", []);
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
<h2>Stockwerke</h2>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Toolbar
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<div class="toolbar">
|
||||||
|
<a href="/?page=floors/edit" class="button">
|
||||||
|
+ Neues Stockwerk
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- TODO: Suchfeld -->
|
||||||
|
<!-- TODO: Filter (Gebäude / Standort) -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Floor-Tabelle
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<table class="floor-list">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Vorschau</th>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Beschreibung</th>
|
||||||
|
<th>Räume</th>
|
||||||
|
<th>Aktionen</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
|
||||||
|
<?php /* foreach ($floors as $floor): */ ?>
|
||||||
|
<tr>
|
||||||
|
<td class="preview">
|
||||||
|
<!-- TODO: SVG / JPG Thumbnail Floorplan -->
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<!-- TODO: Name -->
|
||||||
|
Floor 1
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<!-- TODO: Beschreibung -->
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<!-- TODO: Anzahl Räume -->
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<a href="/?page=floors/edit&id=1">Bearbeiten</a>
|
||||||
|
<button>Löschen</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<?php /* endforeach; */ ?>
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Leerer Zustand
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<?php /* if (empty($floors)): */ ?>
|
||||||
|
<div class="empty-state">
|
||||||
|
<p>Noch keine Stockwerke angelegt.</p>
|
||||||
|
<p><a href="/?page=floors/edit">Erstes Stockwerk anlegen</a></p>
|
||||||
|
</div>
|
||||||
|
<?php /* endif; */ ?>
|
||||||
|
|||||||
@@ -1,2 +1,131 @@
|
|||||||
<?php
|
<?php
|
||||||
// Rack anlegen oder bearbeiten
|
/**
|
||||||
|
* app/racks/edit.php
|
||||||
|
*
|
||||||
|
* Rack anlegen oder bearbeiten
|
||||||
|
* - Name, Beschreibung
|
||||||
|
* - Zugehöriges Stockwerk (Floor)
|
||||||
|
* - Höhe / Slots
|
||||||
|
* - Gerätepositionen (optional Vorschau)
|
||||||
|
*/
|
||||||
|
|
||||||
|
// TODO: bootstrap laden
|
||||||
|
// require_once __DIR__ . '/../../bootstrap.php';
|
||||||
|
|
||||||
|
// TODO: Auth erzwingen
|
||||||
|
// requireAuth();
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// Kontext bestimmen
|
||||||
|
// =========================
|
||||||
|
|
||||||
|
// Rack-ID aus GET
|
||||||
|
// $rackId = (int)($_GET['id'] ?? 0);
|
||||||
|
|
||||||
|
// TODO: Rack aus DB laden, falls ID vorhanden
|
||||||
|
// $rack = null;
|
||||||
|
|
||||||
|
// TODO: Floors laden für Auswahl
|
||||||
|
// $floors = $sql->get("SELECT * FROM floors ORDER BY name", "", []);
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
<h2>Rack bearbeiten</h2>
|
||||||
|
|
||||||
|
<form method="post" action="/app/racks/save.php" enctype="multipart/form-data">
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Basisdaten
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>Allgemein</legend>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Name<br>
|
||||||
|
<input type="text" name="name" value="">
|
||||||
|
<!-- TODO: Name vorbelegen -->
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Beschreibung<br>
|
||||||
|
<textarea name="description"></textarea>
|
||||||
|
<!-- TODO: Beschreibung vorbelegen -->
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Zugehöriges Floor
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>Stockwerk / Standort</legend>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Stockwerk<br>
|
||||||
|
<select name="floor_id">
|
||||||
|
<!-- TODO: Floors aus DB -->
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<label>
|
||||||
|
Höhe (Anzahl U)<br>
|
||||||
|
<input type="number" name="height" value="">
|
||||||
|
<!-- TODO: Höhe vorbelegen -->
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Rack-SVG / Gerätepositionen
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>Rack-Layout</legend>
|
||||||
|
|
||||||
|
<div class="svg-editor-container">
|
||||||
|
<svg
|
||||||
|
id="rack-svg"
|
||||||
|
viewBox="0 0 200 1000"
|
||||||
|
width="100%"
|
||||||
|
height="600"
|
||||||
|
>
|
||||||
|
<!-- TODO: Rack-SVG laden -->
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="hint">
|
||||||
|
Geräte per Drag & Drop im Rack positionieren.
|
||||||
|
</p>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Aktionen
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<button type="submit">Speichern</button>
|
||||||
|
<button type="button" onclick="history.back()">Abbrechen</button>
|
||||||
|
<!-- TODO: Löschen, falls edit -->
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
JS-Konfiguration
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* Konfiguration für Rack-SVG-Editor
|
||||||
|
*/
|
||||||
|
|
||||||
|
// TODO: Rack-ID aus PHP setzen
|
||||||
|
// window.RACK_ID = <?= (int)$rackId ?>;
|
||||||
|
|
||||||
|
// TODO: Gerätepositionen an JS übergeben
|
||||||
|
// window.RACK_DEVICES = <?= json_encode($rackDevices ?? []) ?>;
|
||||||
|
</script>
|
||||||
|
|||||||
@@ -1,2 +1,102 @@
|
|||||||
<?php
|
<?php
|
||||||
// Übersicht aller Racks
|
/**
|
||||||
|
* app/racks/list.php
|
||||||
|
*
|
||||||
|
* Übersicht aller Racks
|
||||||
|
* - Anzeigen
|
||||||
|
* - Bearbeiten
|
||||||
|
* - Löschen
|
||||||
|
* - Zugehöriges Floor anzeigen
|
||||||
|
* - SVG-Vorschau optional
|
||||||
|
*/
|
||||||
|
|
||||||
|
// TODO: bootstrap laden
|
||||||
|
// require_once __DIR__ . '/../../bootstrap.php';
|
||||||
|
|
||||||
|
// TODO: Auth erzwingen
|
||||||
|
// requireAuth();
|
||||||
|
|
||||||
|
// =========================
|
||||||
|
// Racks laden
|
||||||
|
// =========================
|
||||||
|
|
||||||
|
// TODO: Racks aus DB laden
|
||||||
|
// $racks = $sql->get("SELECT r.*, f.name AS floor_name FROM racks r LEFT JOIN floors f ON r.floor_id = f.id ORDER BY r.name", "", []);
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
<h2>Racks</h2>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Toolbar
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<div class="toolbar">
|
||||||
|
<a href="/?page=racks/edit" class="button">
|
||||||
|
+ Neues Rack
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- TODO: Suchfeld -->
|
||||||
|
<!-- TODO: Filter (Floor / Standort) -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Rack-Tabelle
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<table class="rack-list">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Vorschau</th>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Stockwerk</th>
|
||||||
|
<th>Höhe (U)</th>
|
||||||
|
<th>Geräte</th>
|
||||||
|
<th>Aktionen</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
|
||||||
|
<?php /* foreach ($racks as $rack): */ ?>
|
||||||
|
<tr>
|
||||||
|
<td class="preview">
|
||||||
|
<!-- TODO: SVG / JPG Thumbnail -->
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<!-- TODO: Rack-Name -->
|
||||||
|
Rack 1
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<!-- TODO: Floor / Standort -->
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<!-- TODO: Höhe -->
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<!-- TODO: Anzahl Geräte im Rack -->
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<a href="/?page=racks/edit&id=1">Bearbeiten</a>
|
||||||
|
<button>Löschen</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<?php /* endforeach; */ ?>
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<!-- =========================
|
||||||
|
Leerer Zustand
|
||||||
|
========================= -->
|
||||||
|
|
||||||
|
<?php /* if (empty($racks)): */ ?>
|
||||||
|
<div class="empty-state">
|
||||||
|
<p>Noch keine Racks angelegt.</p>
|
||||||
|
<p><a href="/?page=racks/edit">Erstes Rack anlegen</a></p>
|
||||||
|
</div>
|
||||||
|
<?php /* endif; */ ?>
|
||||||
|
|||||||
Reference in New Issue
Block a user