feat: Implement initial application structure with network view and SVG editor
- Added network-view.js for visualizing network topology with devices and connections. - Introduced svg-editor.js for managing ports on device types with drag-and-drop functionality. - Created bootstrap.php for application initialization, including configuration and database connection. - Established config.php for centralized configuration settings. - Developed index.php as the main entry point with module-based routing. - Integrated _sql.php for database abstraction. - Added auth.php for single-user authentication handling. - Included helpers.php for utility functions. - Created modules for managing connections, device types, devices, and floors. - Implemented database schema in init.sql for locations, buildings, floors, rooms, network outlets, devices, and connections. - Added Docker support with docker-compose.yml for web and database services. - Documented database structure and UI/UX concepts in respective markdown files.
This commit is contained in:
Troy Grunt
1
app/assets/js/app.js
Normal file
1
app/assets/js/app.js
Normal file
@@ -0,0 +1 @@
|
||||
// Globale JS-Funktionen, Initialisierung
|
||||
289
app/assets/js/network-view.js
Normal file
289
app/assets/js/network-view.js
Normal file
@@ -0,0 +1,289 @@
|
||||
// Netzwerk-Graph-Ansicht (Nodes, Kanten, Filter)
|
||||
/**
|
||||
* network-view.js
|
||||
*
|
||||
* Darstellung der Netzwerk-Topologie:
|
||||
* - Geräte als Nodes
|
||||
* - Ports als Ankerpunkte
|
||||
* - Verbindungen als Linien
|
||||
* - Freie / selbstdefinierte Verbindungstypen
|
||||
*
|
||||
* Kein Layout-Framework (kein D3, kein Cytoscape)
|
||||
* -> bewusst simpel & erweiterbar
|
||||
*/
|
||||
|
||||
/* =========================
|
||||
* Konfiguration
|
||||
* ========================= */
|
||||
|
||||
// TODO: Standort / Rack / View-Kontext vom Backend setzen
|
||||
const CONTEXT_ID = null;
|
||||
|
||||
// TODO: API-Endpunkte definieren
|
||||
const API_LOAD_NETWORK = '/api/network_view.php?action=load';
|
||||
const API_SAVE_POSITIONS = '/api/network_view.php?action=save_positions';
|
||||
|
||||
/* =========================
|
||||
* State
|
||||
* ========================= */
|
||||
|
||||
let svgElement = null;
|
||||
|
||||
let devices = []; // Geräte inkl. Position
|
||||
let connections = []; // Verbindungen zwischen Ports
|
||||
|
||||
let selectedDeviceId = null;
|
||||
let isDragging = false;
|
||||
let dragOffset = { x: 0, y: 0 };
|
||||
|
||||
/* =========================
|
||||
* Initialisierung
|
||||
* ========================= */
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
svgElement = document.querySelector('#network-svg');
|
||||
|
||||
if (!svgElement) {
|
||||
console.warn('Network View: #network-svg nicht gefunden');
|
||||
return;
|
||||
}
|
||||
|
||||
bindSvgEvents();
|
||||
loadNetwork();
|
||||
});
|
||||
|
||||
/* =========================
|
||||
* Events
|
||||
* ========================= */
|
||||
|
||||
function bindSvgEvents() {
|
||||
svgElement.addEventListener('mousemove', onMouseMove);
|
||||
svgElement.addEventListener('mouseup', onMouseUp);
|
||||
svgElement.addEventListener('click', onSvgClick);
|
||||
}
|
||||
|
||||
/* =========================
|
||||
* Laden
|
||||
* ========================= */
|
||||
|
||||
function loadNetwork() {
|
||||
if (!CONTEXT_ID) {
|
||||
console.warn('CONTEXT_ID nicht gesetzt');
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`${API_LOAD_NETWORK}&context_id=${CONTEXT_ID}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
// TODO: Datenstruktur validieren
|
||||
devices = data.devices || [];
|
||||
connections = data.connections || [];
|
||||
|
||||
renderAll();
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Fehler beim Laden der Netzwerkansicht', err);
|
||||
});
|
||||
}
|
||||
|
||||
/* =========================
|
||||
* Rendering
|
||||
* ========================= */
|
||||
|
||||
function renderAll() {
|
||||
clearSvg();
|
||||
|
||||
renderConnections();
|
||||
renderDevices();
|
||||
}
|
||||
|
||||
function clearSvg() {
|
||||
while (svgElement.firstChild) {
|
||||
svgElement.removeChild(svgElement.firstChild);
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Geräte ---------- */
|
||||
|
||||
function renderDevices() {
|
||||
devices.forEach(device => renderDevice(device));
|
||||
}
|
||||
|
||||
function renderDevice(device) {
|
||||
const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
|
||||
group.classList.add('device-node');
|
||||
group.dataset.id = device.id;
|
||||
|
||||
group.setAttribute(
|
||||
'transform',
|
||||
`translate(${device.x || 0}, ${device.y || 0})`
|
||||
);
|
||||
|
||||
// TODO: Gerätetyp (SVG oder JPG) korrekt laden
|
||||
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
||||
rect.setAttribute('width', 120);
|
||||
rect.setAttribute('height', 60);
|
||||
rect.setAttribute('rx', 6);
|
||||
|
||||
rect.addEventListener('mousedown', (e) => {
|
||||
startDrag(e, device.id);
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
// Label
|
||||
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
|
||||
text.setAttribute('x', 60);
|
||||
text.setAttribute('y', 35);
|
||||
text.setAttribute('text-anchor', 'middle');
|
||||
text.textContent = device.name || 'Device';
|
||||
|
||||
group.appendChild(rect);
|
||||
group.appendChild(text);
|
||||
|
||||
// TODO: Ports als kleine Kreise anlegen (Position aus Portdefinition)
|
||||
// TODO: Ports klickbar machen (für Verbindungs-Erstellung)
|
||||
|
||||
svgElement.appendChild(group);
|
||||
}
|
||||
|
||||
/* ---------- Verbindungen ---------- */
|
||||
|
||||
function renderConnections() {
|
||||
connections.forEach(conn => renderConnection(conn));
|
||||
}
|
||||
|
||||
function renderConnection(connection) {
|
||||
// TODO: Quell- & Ziel-Port-Koordinaten berechnen
|
||||
// TODO: unterschiedliche Verbindungstypen (Farbe, Strichart, Dicke)
|
||||
|
||||
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
||||
|
||||
line.setAttribute('x1', 0);
|
||||
line.setAttribute('y1', 0);
|
||||
line.setAttribute('x2', 100);
|
||||
line.setAttribute('y2', 100);
|
||||
|
||||
line.classList.add('connection-line');
|
||||
|
||||
svgElement.appendChild(line);
|
||||
}
|
||||
|
||||
/* =========================
|
||||
* Interaktion
|
||||
* ========================= */
|
||||
|
||||
function onSvgClick(event) {
|
||||
// Klick ins Leere -> Auswahl aufheben
|
||||
if (event.target === svgElement) {
|
||||
selectedDeviceId = null;
|
||||
updateSelection();
|
||||
}
|
||||
}
|
||||
|
||||
function startDrag(event, deviceId) {
|
||||
const device = getDeviceById(deviceId);
|
||||
if (!device) return;
|
||||
|
||||
isDragging = true;
|
||||
selectedDeviceId = deviceId;
|
||||
|
||||
const point = getSvgCoordinates(event);
|
||||
dragOffset.x = (device.x || 0) - point.x;
|
||||
dragOffset.y = (device.y || 0) - point.y;
|
||||
|
||||
updateSelection();
|
||||
}
|
||||
|
||||
function onMouseMove(event) {
|
||||
if (!isDragging || !selectedDeviceId) return;
|
||||
|
||||
const device = getDeviceById(selectedDeviceId);
|
||||
if (!device) return;
|
||||
|
||||
const point = getSvgCoordinates(event);
|
||||
|
||||
device.x = point.x + dragOffset.x;
|
||||
device.y = point.y + dragOffset.y;
|
||||
|
||||
renderAll();
|
||||
}
|
||||
|
||||
function onMouseUp() {
|
||||
if (!isDragging) return;
|
||||
|
||||
isDragging = false;
|
||||
|
||||
// TODO: Positionen optional automatisch speichern
|
||||
}
|
||||
|
||||
/* =========================
|
||||
* Auswahl
|
||||
* ========================= */
|
||||
|
||||
function updateSelection() {
|
||||
svgElement.querySelectorAll('.device-node').forEach(el => {
|
||||
el.classList.toggle(
|
||||
'selected',
|
||||
el.dataset.id === String(selectedDeviceId)
|
||||
);
|
||||
});
|
||||
|
||||
// TODO: Sidebar mit Gerätedetails füllen
|
||||
}
|
||||
|
||||
/* =========================
|
||||
* Speichern
|
||||
* ========================= */
|
||||
|
||||
function savePositions() {
|
||||
fetch(API_SAVE_POSITIONS, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
context_id: CONTEXT_ID,
|
||||
devices: devices.map(d => ({
|
||||
id: d.id,
|
||||
x: d.x,
|
||||
y: d.y
|
||||
}))
|
||||
})
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
// TODO: Erfolg / Fehler anzeigen
|
||||
console.log('Positionen gespeichert', data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Fehler beim Speichern', err);
|
||||
});
|
||||
}
|
||||
|
||||
/* =========================
|
||||
* Hilfsfunktionen
|
||||
* ========================= */
|
||||
|
||||
function getSvgCoordinates(event) {
|
||||
const pt = svgElement.createSVGPoint();
|
||||
pt.x = event.clientX;
|
||||
pt.y = event.clientY;
|
||||
|
||||
const transformed = pt.matrixTransform(svgElement.getScreenCTM().inverse());
|
||||
return { x: transformed.x, y: transformed.y };
|
||||
}
|
||||
|
||||
function getDeviceById(id) {
|
||||
return devices.find(d => d.id === id);
|
||||
}
|
||||
|
||||
/* =========================
|
||||
* Keyboard Shortcuts
|
||||
* ========================= */
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
selectedDeviceId = null;
|
||||
updateSelection();
|
||||
}
|
||||
|
||||
// TODO: Delete -> Gerät entfernen?
|
||||
});
|
||||
258
app/assets/js/svg-editor.js
Normal file
258
app/assets/js/svg-editor.js
Normal file
@@ -0,0 +1,258 @@
|
||||
// Logik für den SVG-Port-Editor (Klicks, Drag & Drop, Speichern)
|
||||
/**
|
||||
* svg-editor.js
|
||||
*
|
||||
* Logik für den SVG-Port-Editor:
|
||||
* - Ports per Klick anlegen
|
||||
* - Ports auswählen
|
||||
* - Ports verschieben (Drag & Drop)
|
||||
* - Ports löschen
|
||||
* - Ports laden / speichern
|
||||
*
|
||||
* Abhängigkeiten: keine (Vanilla JS)
|
||||
*/
|
||||
|
||||
/* =========================
|
||||
* Konfiguration
|
||||
* ========================= */
|
||||
|
||||
// TODO: vom Backend setzen (z. B. via data-Attribut)
|
||||
const DEVICE_TYPE_ID = null;
|
||||
|
||||
// TODO: API-Endpunkte festlegen
|
||||
const API_LOAD_PORTS = '/api/device_type_ports.php?action=load';
|
||||
const API_SAVE_PORTS = '/api/device_type_ports.php?action=save';
|
||||
|
||||
/* =========================
|
||||
* State
|
||||
* ========================= */
|
||||
|
||||
let svgElement = null;
|
||||
let ports = [];
|
||||
let selectedPortId = null;
|
||||
let isDragging = false;
|
||||
let dragOffset = { x: 0, y: 0 };
|
||||
|
||||
/* =========================
|
||||
* Initialisierung
|
||||
* ========================= */
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
svgElement = document.querySelector('#device-svg');
|
||||
|
||||
if (!svgElement) {
|
||||
console.warn('SVG Editor: #device-svg nicht gefunden');
|
||||
return;
|
||||
}
|
||||
|
||||
bindSvgEvents();
|
||||
loadPorts();
|
||||
});
|
||||
|
||||
/* =========================
|
||||
* SVG Events
|
||||
* ========================= */
|
||||
|
||||
function bindSvgEvents() {
|
||||
svgElement.addEventListener('click', onSvgClick);
|
||||
svgElement.addEventListener('mousemove', onSvgMouseMove);
|
||||
svgElement.addEventListener('mouseup', onSvgMouseUp);
|
||||
}
|
||||
|
||||
/* =========================
|
||||
* Port-Erstellung
|
||||
* ========================= */
|
||||
|
||||
function onSvgClick(event) {
|
||||
// Klick auf bestehenden Port?
|
||||
if (event.target.classList.contains('port-point')) {
|
||||
selectPort(event.target.dataset.id);
|
||||
return;
|
||||
}
|
||||
|
||||
// TODO: Modifier-Key prüfen (z. B. nur mit SHIFT neuen Port erstellen?)
|
||||
const point = getSvgCoordinates(event);
|
||||
|
||||
createPort(point.x, point.y);
|
||||
}
|
||||
|
||||
function createPort(x, y) {
|
||||
const id = generateTempId();
|
||||
|
||||
const port = {
|
||||
id: id,
|
||||
name: `Port ${ports.length + 1}`,
|
||||
port_type_id: null, // TODO: Default-Porttyp?
|
||||
x: x,
|
||||
y: y,
|
||||
comment: ''
|
||||
};
|
||||
|
||||
ports.push(port);
|
||||
renderPort(port);
|
||||
selectPort(id);
|
||||
}
|
||||
|
||||
/* =========================
|
||||
* Rendering
|
||||
* ========================= */
|
||||
|
||||
function renderPort(port) {
|
||||
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
||||
|
||||
circle.setAttribute('cx', port.x);
|
||||
circle.setAttribute('cy', port.y);
|
||||
circle.setAttribute('r', 6);
|
||||
circle.classList.add('port-point');
|
||||
circle.dataset.id = port.id;
|
||||
|
||||
circle.addEventListener('mousedown', (e) => {
|
||||
startDrag(e, port.id);
|
||||
e.stopPropagation();
|
||||
});
|
||||
|
||||
svgElement.appendChild(circle);
|
||||
}
|
||||
|
||||
function rerenderPorts() {
|
||||
svgElement.querySelectorAll('.port-point').forEach(p => p.remove());
|
||||
ports.forEach(renderPort);
|
||||
}
|
||||
|
||||
/* =========================
|
||||
* Auswahl
|
||||
* ========================= */
|
||||
|
||||
function selectPort(id) {
|
||||
selectedPortId = id;
|
||||
|
||||
document.querySelectorAll('.port-point').forEach(el => {
|
||||
el.classList.toggle('selected', el.dataset.id === id);
|
||||
});
|
||||
|
||||
// TODO: Sidebar-Felder mit Portdaten füllen
|
||||
}
|
||||
|
||||
/* =========================
|
||||
* Drag & Drop
|
||||
* ========================= */
|
||||
|
||||
function startDrag(event, portId) {
|
||||
const port = getPortById(portId);
|
||||
if (!port) return;
|
||||
|
||||
isDragging = true;
|
||||
selectedPortId = portId;
|
||||
|
||||
const point = getSvgCoordinates(event);
|
||||
dragOffset.x = port.x - point.x;
|
||||
dragOffset.y = port.y - point.y;
|
||||
}
|
||||
|
||||
function onSvgMouseMove(event) {
|
||||
if (!isDragging || !selectedPortId) return;
|
||||
|
||||
const port = getPortById(selectedPortId);
|
||||
if (!port) return;
|
||||
|
||||
const point = getSvgCoordinates(event);
|
||||
|
||||
port.x = point.x + dragOffset.x;
|
||||
port.y = point.y + dragOffset.y;
|
||||
|
||||
rerenderPorts();
|
||||
}
|
||||
|
||||
function onSvgMouseUp() {
|
||||
isDragging = false;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
* Löschen
|
||||
* ========================= */
|
||||
|
||||
function deleteSelectedPort() {
|
||||
if (!selectedPortId) return;
|
||||
|
||||
// TODO: Sicherheitsabfrage (confirm)
|
||||
ports = ports.filter(p => p.id !== selectedPortId);
|
||||
selectedPortId = null;
|
||||
|
||||
rerenderPorts();
|
||||
|
||||
// TODO: Sidebar zurücksetzen
|
||||
}
|
||||
|
||||
/* =========================
|
||||
* Laden / Speichern
|
||||
* ========================= */
|
||||
|
||||
function loadPorts() {
|
||||
if (!DEVICE_TYPE_ID) {
|
||||
console.warn('DEVICE_TYPE_ID nicht gesetzt');
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`${API_LOAD_PORTS}&device_type_id=${DEVICE_TYPE_ID}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
// TODO: Datenformat validieren
|
||||
ports = data;
|
||||
rerenderPorts();
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Fehler beim Laden der Ports', err);
|
||||
});
|
||||
}
|
||||
|
||||
function savePorts() {
|
||||
if (!DEVICE_TYPE_ID) return;
|
||||
|
||||
fetch(API_SAVE_PORTS, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
device_type_id: DEVICE_TYPE_ID,
|
||||
ports: ports
|
||||
})
|
||||
})
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
// TODO: Erfolg / Fehler anzeigen
|
||||
console.log('Ports gespeichert', data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Fehler beim Speichern', err);
|
||||
});
|
||||
}
|
||||
|
||||
/* =========================
|
||||
* Hilfsfunktionen
|
||||
* ========================= */
|
||||
|
||||
function getSvgCoordinates(event) {
|
||||
const pt = svgElement.createSVGPoint();
|
||||
pt.x = event.clientX;
|
||||
pt.y = event.clientY;
|
||||
|
||||
const transformed = pt.matrixTransform(svgElement.getScreenCTM().inverse());
|
||||
return { x: transformed.x, y: transformed.y };
|
||||
}
|
||||
|
||||
function getPortById(id) {
|
||||
return ports.find(p => p.id === id);
|
||||
}
|
||||
|
||||
function generateTempId() {
|
||||
return 'tmp_' + Math.random().toString(36).substr(2, 9);
|
||||
}
|
||||
|
||||
/* =========================
|
||||
* Keyboard Shortcuts
|
||||
* ========================= */
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Delete') {
|
||||
deleteSelectedPort();
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user