356 lines
16 KiB
HTML
356 lines
16 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Drucker-Steckdosen - Mercedes-Benz TBA Marienfelde{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
/* Mercedes-Benz Corporate Design */
|
|
.text-mercedes-black { color: #000000; }
|
|
.text-mercedes-gray { color: #6b7280; }
|
|
.text-mercedes-silver { color: #9ca3af; }
|
|
.text-mercedes-blue { color: #0073ce; }
|
|
.text-mercedes-green { color: #008c32; }
|
|
.text-mercedes-red { color: #dc2626; }
|
|
|
|
.bg-mercedes-black { background-color: #000000; }
|
|
.bg-mercedes-silver { background-color: #e5e7eb; }
|
|
.bg-mercedes-blue { background-color: #0073ce; }
|
|
.bg-mercedes-green { background-color: #008c32; }
|
|
|
|
.border-mercedes-silver { border-color: #d1d5db; }
|
|
.border-mercedes-blue { border-color: #0073ce; }
|
|
|
|
/* Enhanced Form Elements */
|
|
.mercedes-form-input {
|
|
transition: all 0.2s ease;
|
|
border: 1px solid #d1d5db;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.mercedes-form-input:focus {
|
|
border-color: #0073ce;
|
|
box-shadow:
|
|
0 0 0 3px rgba(0, 115, 206, 0.1),
|
|
0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
transform: translateY(-1px);
|
|
background: rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
.dark .mercedes-form-input {
|
|
background: rgba(30, 41, 59, 0.9);
|
|
border-color: #475569;
|
|
color: #f8fafc;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.dark .mercedes-form-input:focus {
|
|
border-color: #0ea5e9;
|
|
background: rgba(30, 41, 59, 1);
|
|
box-shadow:
|
|
0 0 0 3px rgba(14, 165, 233, 0.15),
|
|
0 4px 6px -1px rgba(0, 0, 0, 0.4);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* Dark Mode Select Arrows */
|
|
.dark .mercedes-form-input select {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23f8fafc' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
/* Dark Mode Option Elements */
|
|
.dark .mercedes-form-input option {
|
|
background: #1e293b;
|
|
color: #f8fafc;
|
|
border: none;
|
|
}
|
|
|
|
/* Printer Control Buttons */
|
|
.printer-action-btn {
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 0.5rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
transition: all 0.2s ease;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-success {
|
|
background: #10b981;
|
|
color: white;
|
|
}
|
|
|
|
.btn-success:hover:not(:disabled) {
|
|
background: #059669;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.btn-danger {
|
|
background: #ef4444;
|
|
color: white;
|
|
}
|
|
|
|
.btn-danger:hover:not(:disabled) {
|
|
background: #dc2626;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.printer-action-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
transform: none !important;
|
|
}
|
|
|
|
/* Dark Mode Button Styles */
|
|
.dark .btn-success {
|
|
background: #047857;
|
|
}
|
|
|
|
.dark .btn-success:hover:not(:disabled) {
|
|
background: #065f46;
|
|
}
|
|
|
|
.dark .btn-danger {
|
|
background: #dc2626;
|
|
}
|
|
|
|
.dark .btn-danger:hover:not(:disabled) {
|
|
background: #b91c1c;
|
|
}
|
|
|
|
/* Enhanced Printer Cards */
|
|
.printer-card {
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
|
border: 1px solid #e2e8f0;
|
|
box-shadow:
|
|
0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
border-radius: 16px;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dark .printer-card {
|
|
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
|
border-color: #334155;
|
|
box-shadow:
|
|
0 4px 6px -1px rgba(0, 0, 0, 0.3),
|
|
0 2px 4px -1px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Filter Section */
|
|
.filter-section {
|
|
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.dark .filter-section {
|
|
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
|
border-color: #334155;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid px-4 py-6">
|
|
<!-- Header -->
|
|
<div class="mb-8">
|
|
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-mercedes-black dark:text-white mb-2">
|
|
<svg class="w-8 h-8 inline mr-3 text-mercedes-blue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
|
|
</svg>
|
|
3D-Drucker Verwaltung
|
|
</h1>
|
|
<p class="text-mercedes-gray dark:text-slate-300">
|
|
Verwalten Sie Ihre 3D-Drucker und Steckdosen über das Mercedes-Benz TBA Marienfelde System
|
|
</p>
|
|
</div>
|
|
|
|
{% if error %}
|
|
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
|
|
<strong>Fehler:</strong> {{ error }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filter Section -->
|
|
<div class="filter-section mb-8">
|
|
<h3 class="text-lg font-semibold text-mercedes-black dark:text-white mb-4">Filter & Suche</h3>
|
|
|
|
<form method="GET" action="{{ url_for('printers_page') }}" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<!-- Status Filter -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-mercedes-black dark:text-slate-300 mb-2">Status</label>
|
|
<select name="status_filter" class="mercedes-form-input block w-full px-4 py-3 rounded-lg">
|
|
<option value="">Alle Status</option>
|
|
<option value="on">An</option>
|
|
<option value="off">Aus</option>
|
|
<option value="unreachable">Nicht erreichbar</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Location Filter -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-mercedes-black dark:text-slate-300 mb-2">Standort</label>
|
|
<select name="location_filter" class="mercedes-form-input block w-full px-4 py-3 rounded-lg">
|
|
<option value="">Alle Standorte</option>
|
|
{% if locations %}
|
|
{% for location in locations %}
|
|
<option value="{{ location }}">{{ location }}</option>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Model Filter -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-mercedes-black dark:text-slate-300 mb-2">Modell</label>
|
|
<select name="model_filter" class="mercedes-form-input block w-full px-4 py-3 rounded-lg">
|
|
<option value="">Alle Modelle</option>
|
|
{% if models %}
|
|
{% for model in models %}
|
|
<option value="{{ model }}">{{ model }}</option>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<div class="flex items-end">
|
|
<button type="submit" class="w-full bg-mercedes-blue text-white px-4 py-3 rounded-lg hover:bg-blue-700 transition">
|
|
Filter anwenden
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Printers Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{% if printers %}
|
|
{% for printer in printers %}
|
|
<div class="printer-card p-6 border-l-4 {% if printer.plug_status == 'on' %}border-green-500{% elif printer.plug_status == 'off' %}border-gray-400{% else %}border-red-500{% endif %}">
|
|
<!-- Printer Header -->
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="{% if printer.plug_status == 'on' %}bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200{% elif printer.plug_status == 'off' %}bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200{% else %}bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200{% endif %} w-12 h-12 rounded-xl flex items-center justify-center">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-semibold text-lg text-mercedes-black dark:text-white">{{ printer.name }}</h3>
|
|
<p class="text-sm text-mercedes-gray dark:text-slate-400">{{ printer.model }}</p>
|
|
</div>
|
|
</div>
|
|
<span class="{% if printer.plug_status == 'on' %}bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200{% elif printer.plug_status == 'off' %}bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200{% else %}bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200{% endif %} px-3 py-1 rounded-full text-xs font-medium">
|
|
{{ printer.status_display.text }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Printer Details -->
|
|
<div class="space-y-2 mb-4 text-sm">
|
|
<div class="flex justify-between">
|
|
<span class="text-mercedes-gray dark:text-slate-400">Standort:</span>
|
|
<span class="text-mercedes-black dark:text-white">{{ printer.location }}</span>
|
|
</div>
|
|
{% if printer.plug_ip %}
|
|
<div class="flex justify-between">
|
|
<span class="text-mercedes-gray dark:text-slate-400">Steckdose:</span>
|
|
<span class="text-mercedes-black dark:text-white">{{ printer.plug_ip }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% if printer.last_checked %}
|
|
<div class="flex justify-between">
|
|
<span class="text-mercedes-gray dark:text-slate-400">Letzter Check:</span>
|
|
<span class="text-mercedes-black dark:text-white text-xs">{{ printer.last_checked[:19] }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Control Buttons (NO JAVASCRIPT!) -->
|
|
{% if printer.can_control %}
|
|
<div class="flex gap-2">
|
|
<form method="POST" action="{{ url_for('printer_control') }}" class="inline">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
|
<input type="hidden" name="printer_id" value="{{ printer.id }}"/>
|
|
<input type="hidden" name="action" value="on"/>
|
|
<button type="submit"
|
|
class="printer-action-btn btn-success"
|
|
{% if printer.plug_status == 'on' %}disabled{% endif %}>
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
|
|
</svg>
|
|
Einschalten
|
|
</button>
|
|
</form>
|
|
<form method="POST" action="{{ url_for('printer_control') }}" class="inline">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
|
<input type="hidden" name="printer_id" value="{{ printer.id }}"/>
|
|
<input type="hidden" name="action" value="off"/>
|
|
<button type="submit"
|
|
class="printer-action-btn btn-danger"
|
|
{% if printer.plug_status == 'off' %}disabled{% endif %}>
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L18 12M6 12l12.728 6.364M6 12l6.364-6.364"/>
|
|
</svg>
|
|
Ausschalten
|
|
</button>
|
|
</form>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-2">
|
|
<span class="text-sm text-mercedes-gray dark:text-slate-400">
|
|
{% if printer.plug_ip %}Steckdose nicht erreichbar{% else %}Keine Steckdose konfiguriert{% endif %}
|
|
</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<!-- Empty State -->
|
|
<div class="col-span-full py-16 text-center">
|
|
<div class="max-w-md mx-auto">
|
|
<div class="text-mercedes-silver mb-6">
|
|
<svg class="w-20 h-20 mx-auto" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01"/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-2xl font-semibold text-mercedes-black dark:text-white mb-3">Keine Drucker gefunden</h3>
|
|
<p class="text-mercedes-gray dark:text-slate-400 mb-8 leading-relaxed">
|
|
Es wurden keine 3D-Drucker gefunden. Bitte fügen Sie Drucker über das Admin-Panel hinzu.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Refresh Button -->
|
|
<div class="mt-8 text-center">
|
|
<form method="GET" action="{{ url_for('printers_page') }}" class="inline">
|
|
<button type="submit" class="bg-mercedes-blue text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition">
|
|
<svg class="w-4 h-4 mr-2 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
|
|
</svg>
|
|
Seite aktualisieren
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- NO JAVASCRIPT FOR PRINTER OPERATIONS! -->
|
|
<script>
|
|
// ===== KOMPLETT JAVASCRIPT-FREIE DRUCKER-SEITE =====
|
|
console.log('✅ Drucker-Seite OHNE JavaScript für Drucker-Abfragen geladen!');
|
|
console.log('🔧 Alle Drucker-Steuerung erfolgt über Server-Side Forms!');
|
|
</script>
|
|
{% endblock %} |