🐛 Update: Added support for the 'find' command in settings.local.json. Enhanced logging for various modules, including initialization and performance metrics. Improved SQLite database optimization and ensured better tracking of user interactions and system processes. 📚
This commit is contained in:
259
network-visualization/index.html
Normal file
259
network-visualization/index.html
Normal file
@ -0,0 +1,259 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MYP Netzwerk-Architektur | Mercedes-Benz 3D-Druck-Management</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="diagram-container">
|
||||
<!-- Header -->
|
||||
<header class="diagram-header">
|
||||
<h1>MYP Netzwerk-Architektur</h1>
|
||||
<p>Mercedes-Benz 3D-Druck-Management-System | TBA Marienfelde</p>
|
||||
<div class="system-status">
|
||||
<span class="status-indicator online"></span>
|
||||
<span>Production System Online</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Network Diagram -->
|
||||
<div class="network-diagram">
|
||||
|
||||
<!-- Frontend Nodes -->
|
||||
<div class="node frontend-node" id="kiosk" style="left: 100px; top: 100px;">
|
||||
<div class="node-content">
|
||||
<div class="node-icon">🏭</div>
|
||||
<div class="node-label">Mercedes Kiosk</div>
|
||||
<div class="node-detail">TBA Terminal</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="node frontend-node" id="webapp" style="left: 400px; top: 100px;">
|
||||
<div class="node-content">
|
||||
<div class="node-icon">⚛️</div>
|
||||
<div class="node-label">Next.js PWA</div>
|
||||
<div class="node-detail">Web Interface</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="node frontend-node" id="auth" style="left: 700px; top: 100px;">
|
||||
<div class="node-content">
|
||||
<div class="node-icon">🔐</div>
|
||||
<div class="node-label">Auth System</div>
|
||||
<div class="node-detail">bcrypt + OTP</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Backend Nodes -->
|
||||
<div class="node backend-node server-main" id="server" style="left: 100px; top: 300px;">
|
||||
<div class="node-content">
|
||||
<div class="node-icon">🖥️</div>
|
||||
<div class="node-label">Raspberry Pi 4B</div>
|
||||
<div class="node-detail">192.168.0.100</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="node backend-node" id="flask" style="left: 300px; top: 300px;">
|
||||
<div class="node-content">
|
||||
<div class="node-icon">🐍</div>
|
||||
<div class="node-label">Flask Backend</div>
|
||||
<div class="node-detail">REST API</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="node backend-node" id="database" style="left: 500px; top: 300px;">
|
||||
<div class="node-content">
|
||||
<div class="node-icon">🗄️</div>
|
||||
<div class="node-label">SQLite WAL</div>
|
||||
<div class="node-detail">Database</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="node backend-node" id="scheduler" style="left: 700px; top: 300px;">
|
||||
<div class="node-content">
|
||||
<div class="node-icon">⏰</div>
|
||||
<div class="node-label">Job Scheduler</div>
|
||||
<div class="node-detail">APScheduler</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="node backend-node" id="security" style="left: 900px; top: 300px;">
|
||||
<div class="node-content">
|
||||
<div class="node-icon">🛡️</div>
|
||||
<div class="node-label">Security Suite</div>
|
||||
<div class="node-detail">SSL/TLS</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="node backend-node" id="monitor" style="left: 1100px; top: 300px;">
|
||||
<div class="node-content">
|
||||
<div class="node-icon">📊</div>
|
||||
<div class="node-label">Monitoring</div>
|
||||
<div class="node-detail">Analytics</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Smart Plug Nodes -->
|
||||
<div class="node smartplug-node" id="plug1" style="left: 200px; top: 500px;">
|
||||
<div class="node-content">
|
||||
<div class="node-icon">🔌</div>
|
||||
<div class="node-label">Tapo P110 #1</div>
|
||||
<div class="node-detail">192.168.0.101</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="node smartplug-node" id="plug2" style="left: 400px; top: 500px;">
|
||||
<div class="node-content">
|
||||
<div class="node-icon">🔌</div>
|
||||
<div class="node-label">Tapo P110 #2</div>
|
||||
<div class="node-detail">192.168.0.102</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="node smartplug-node" id="plug3" style="left: 600px; top: 500px;">
|
||||
<div class="node-content">
|
||||
<div class="node-icon">🔌</div>
|
||||
<div class="node-label">Tapo P110 #3</div>
|
||||
<div class="node-detail">192.168.0.103</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="node smartplug-node" id="plug4" style="left: 800px; top: 500px;">
|
||||
<div class="node-content">
|
||||
<div class="node-icon">🔌</div>
|
||||
<div class="node-label">Tapo P110 #4</div>
|
||||
<div class="node-detail">192.168.0.104</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="node smartplug-node" id="plug6" style="left: 1000px; top: 500px;">
|
||||
<div class="node-content">
|
||||
<div class="node-icon">🔌</div>
|
||||
<div class="node-label">Tapo P110 #6</div>
|
||||
<div class="node-detail">192.168.0.106</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3D Printer Nodes -->
|
||||
<div class="node printer-node" id="printer1" style="left: 200px; top: 700px;">
|
||||
<div class="node-content">
|
||||
<div class="node-icon">🖨️</div>
|
||||
<div class="node-label">Arbeitsplatz 1</div>
|
||||
<div class="node-detail">Prusa MK3S+</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="node printer-node" id="printer2" style="left: 400px; top: 700px;">
|
||||
<div class="node-content">
|
||||
<div class="node-icon">🖨️</div>
|
||||
<div class="node-label">Arbeitsplatz 2</div>
|
||||
<div class="node-detail">Ender 3 Pro</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="node printer-node" id="printer3" style="left: 600px; top: 700px;">
|
||||
<div class="node-content">
|
||||
<div class="node-icon">🖨️</div>
|
||||
<div class="node-label">Arbeitsplatz 3</div>
|
||||
<div class="node-detail">Bambu Lab A1</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="node printer-node" id="printer4" style="left: 800px; top: 700px;">
|
||||
<div class="node-content">
|
||||
<div class="node-icon">🖨️</div>
|
||||
<div class="node-label">Arbeitsplatz 4</div>
|
||||
<div class="node-detail">Prusa MINI+</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="node printer-node" id="printer5" style="left: 1000px; top: 700px;">
|
||||
<div class="node-content">
|
||||
<div class="node-icon">🖨️</div>
|
||||
<div class="node-label">Arbeitsplatz 5</div>
|
||||
<div class="node-detail">Artillery X1</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Connection Lines SVG -->
|
||||
<svg class="connections-layer" width="1300" height="850">
|
||||
<!-- Frontend Internal Connections -->
|
||||
<line class="connection frontend-conn" x1="175" y1="150" x2="425" y2="150" />
|
||||
<line class="connection frontend-conn" x1="475" y1="150" x2="725" y2="150" />
|
||||
|
||||
<!-- Frontend to Backend -->
|
||||
<line class="connection api-conn" x1="175" y1="200" x2="175" y2="250" />
|
||||
<line class="connection api-conn" x1="475" y1="200" x2="375" y2="250" />
|
||||
<line class="connection auth-conn" x1="775" y1="200" x2="975" y2="250" />
|
||||
|
||||
<!-- Backend Chain -->
|
||||
<line class="connection backend-conn" x1="175" y1="350" x2="325" y2="350" />
|
||||
<line class="connection backend-conn" x1="375" y1="350" x2="525" y2="350" />
|
||||
<line class="connection backend-conn" x1="575" y1="350" x2="725" y2="350" />
|
||||
<line class="connection backend-conn" x1="775" y1="350" x2="925" y2="350" />
|
||||
<line class="connection backend-conn" x1="975" y1="350" x2="1125" y2="350" />
|
||||
|
||||
<!-- Scheduler to Smart Plugs -->
|
||||
<line class="connection control-conn" x1="775" y1="400" x2="275" y2="450" />
|
||||
<line class="connection control-conn" x1="775" y1="400" x2="475" y2="450" />
|
||||
<line class="connection control-conn" x1="775" y1="400" x2="675" y2="450" />
|
||||
<line class="connection control-conn" x1="775" y1="400" x2="875" y2="450" />
|
||||
<line class="connection control-conn" x1="775" y1="400" x2="1075" y2="450" />
|
||||
|
||||
<!-- Smart Plugs to Printers (1:1) -->
|
||||
<line class="connection power-conn" x1="275" y1="600" x2="275" y2="650" />
|
||||
<line class="connection power-conn" x1="475" y1="600" x2="475" y2="650" />
|
||||
<line class="connection power-conn" x1="675" y1="600" x2="675" y2="650" />
|
||||
<line class="connection power-conn" x1="875" y1="600" x2="875" y2="650" />
|
||||
<line class="connection power-conn" x1="1075" y1="600" x2="1075" y2="650" />
|
||||
|
||||
<!-- Monitoring Connections -->
|
||||
<line class="connection monitor-conn" x1="1175" y1="400" x2="1075" y2="450" stroke-dasharray="5,5" />
|
||||
<line class="connection monitor-conn" x1="1175" y1="400" x2="1075" y2="650" stroke-dasharray="5,5" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Legend -->
|
||||
<div class="diagram-legend">
|
||||
<h3>Verbindungstypen</h3>
|
||||
<div class="legend-items">
|
||||
<div class="legend-item">
|
||||
<div class="legend-line frontend-conn"></div>
|
||||
<span>Frontend-Kommunikation</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-line api-conn"></div>
|
||||
<span>HTTPS API Calls</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-line auth-conn"></div>
|
||||
<span>Authentifizierung</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-line backend-conn"></div>
|
||||
<span>Backend Module</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-line control-conn"></div>
|
||||
<span>Tapo API Control</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-line power-conn"></div>
|
||||
<span>230V Stromversorgung</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-line monitor-conn"></div>
|
||||
<span>System Monitoring</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user