📝 'feat(database): Implement database backup on demand and immediate'
This commit is contained in:
@@ -1,85 +1,143 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Drucker - MYP Platform{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<link href="{{ url_for('static', filename='css/printers.css') }}" rel="stylesheet">
|
||||
{% endblock %}
|
||||
{% block title %}Drucker - Mercedes-Benz MYP Platform{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-4 sm:py-8">
|
||||
<!-- Header mit Status-Übersicht - Neu gestaltet -->
|
||||
<div class="mb-6 sm:mb-10">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div class="mb-4 sm:mb-0">
|
||||
<h1 class="text-2xl sm:text-3xl font-bold text-slate-900 dark:text-white mb-2">Drucker</h1>
|
||||
<p class="text-sm sm:text-base text-slate-600 dark:text-slate-400">Verwalten Sie Ihre 3D-Drucker</p>
|
||||
|
||||
<!-- Live-Status-Übersicht - Neu gestaltet -->
|
||||
<div id="status-overview" class="status-overview-new mt-3">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="status-dot online"></div>
|
||||
<span class="text-slate-700 dark:text-slate-300">Online: <span id="online-count" class="font-semibold text-green-600 dark:text-green-400">-</span></span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="status-dot offline"></div>
|
||||
<span class="text-slate-700 dark:text-slate-300">Offline: <span id="offline-count" class="font-semibold text-red-600 dark:text-red-400">-</span></span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<svg class="w-2.5 h-2.5 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span class="text-slate-700 dark:text-slate-300">Gesamt: <span id="total-count" class="font-semibold text-blue-600 dark:text-blue-400">-</span></span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2 ml-2">
|
||||
<svg id="auto-refresh-icon" class="w-3 h-3 text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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>
|
||||
<span class="text-xs text-slate-500 dark:text-slate-400">Auto-Update: <span id="next-update-time" class="font-mono">-</span>s</span>
|
||||
</div>
|
||||
<div class="bg-professional">
|
||||
|
||||
<!-- Professional Hero Header -->
|
||||
<div class="professional-hero hero-pattern animate-fade-in">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-black/10 to-black/20 dark:from-black/20 dark:to-black/40"></div>
|
||||
|
||||
<!-- Status Indicator -->
|
||||
<div class="absolute top-6 right-6 flex items-center space-x-3 z-10">
|
||||
<div class="mb-glass rounded-full px-4 py-2 animate-scale-in">
|
||||
<div class="flex items-center space-x-2">
|
||||
<div class="status-dot status-online"></div>
|
||||
<span class="text-sm font-semibold text-professional-primary">Live</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<!-- Filter-Buttons - Neu gestaltet -->
|
||||
<div class="filter-bar-new">
|
||||
<button id="filter-all" class="filter-btn-new active">Alle</button>
|
||||
<button id="filter-online" class="filter-btn-new">Online</button>
|
||||
<button id="filter-offline" class="filter-btn-new">Offline</button>
|
||||
<div class="mb-glass rounded-full px-4 py-2 animate-scale-in">
|
||||
<span id="live-time" class="text-sm font-semibold text-professional-primary"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative max-w-7xl mx-auto px-6 lg:px-8 py-16 z-10">
|
||||
<div class="text-center animate-slide-up">
|
||||
<!-- Mercedes-Benz Logo -->
|
||||
<div class="inline-flex items-center justify-center w-24 h-24 mb-glass rounded-full mb-8 professional-shadow">
|
||||
<svg class="w-12 h-12 text-professional-primary" viewBox="0 0 80 80" fill="currentColor">
|
||||
<path d="M58.6,4.5C53,1.6,46.7,0,40,0c-6.7,0-13,1.6-18.6,4.5v0C8.7,11.2,0,24.6,0,40c0,15.4,8.7,28.8,21.5,35.5
|
||||
C27,78.3,33.3,80,40,80c6.7,0,12.9-1.7,18.5-4.6C71.3,68.8,80,55.4,80,40C80,24.6,71.3,11.2,58.6,4.5z M4,40
|
||||
c0-13.1,7-24.5,17.5-30.9v0C26.6,6,32.5,4.2,39,4l-4.5,32.7L21.5,46.8v0L8.3,57.1C5.6,52,4,46.2,4,40z M58.6,70.8
|
||||
C53.1,74.1,46.8,76,40,76c-6.8,0-13.2-1.9-18.6-5.2c-4.9-2.9-8.9-6.9-11.9-11.7l11.9-4.9v0L40,46.6l18.6,7.5v0l12,4.9
|
||||
C67.6,63.9,63.4,67.9,58.6,70.8z M58.6,46.8L58.6,46.8l-12.9-10L41.1,4c6.3,0.2,12.3,2,17.4,5.1v0C69,15.4,76,26.9,76,40
|
||||
c0,6.2-1.5,12-4.3,17.1L58.6,46.8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<button onclick="toggleAutoRefresh()" id="auto-refresh-btn" class="action-btn-new primary">
|
||||
<svg class="h-4 w-4 sm:h-5 sm:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<span>Auto-Update</span>
|
||||
</button>
|
||||
<h1 class="title-professional text-5xl md:text-6xl font-bold mb-6 tracking-tight">
|
||||
3D-Drucker Management
|
||||
</h1>
|
||||
<p class="subtitle-professional text-xl md:text-2xl max-w-4xl mx-auto leading-relaxed mb-8">
|
||||
Verwalten Sie Ihre 3D-Drucker mit höchster Präzision und Mercedes-Benz Qualitätsstandard
|
||||
</p>
|
||||
|
||||
<button onclick="refreshPrinters()" class="action-btn-new primary">
|
||||
<svg class="h-4 w-4 sm:h-5 sm:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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>
|
||||
<span>Jetzt aktualisieren</span>
|
||||
</button>
|
||||
<!-- Status Overview -->
|
||||
<div class="flex flex-wrap justify-center gap-6 mb-8">
|
||||
<div class="mb-glass rounded-2xl px-6 py-4 animate-scale-in">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="status-dot status-online"></div>
|
||||
<span class="text-professional-primary font-semibold">Online: <span id="online-count" class="text-green-500 font-bold">-</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-glass rounded-2xl px-6 py-4 animate-scale-in">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="status-dot status-offline"></div>
|
||||
<span class="text-professional-primary font-semibold">Offline: <span id="offline-count" class="text-red-500 font-bold">-</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-glass rounded-2xl px-6 py-4 animate-scale-in">
|
||||
<div class="flex items-center space-x-3">
|
||||
<svg class="w-5 h-5 text-professional-primary" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<span class="text-professional-primary font-semibold">Gesamt: <span id="total-count" class="text-professional-accent font-bold">-</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if current_user.is_admin %}
|
||||
<button id="addPrinterBtn" class="action-btn-new success">
|
||||
<svg class="h-4 w-4 sm:h-5 sm:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<!-- Filter Buttons -->
|
||||
<div class="flex bg-white/10 dark:bg-black/20 backdrop-blur-sm rounded-2xl p-2 border border-white/20 dark:border-white/10">
|
||||
<button id="filter-all" class="filter-btn-mercedes active px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-300">
|
||||
Alle
|
||||
</button>
|
||||
<button id="filter-online" class="filter-btn-mercedes px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-300">
|
||||
Online
|
||||
</button>
|
||||
<button id="filter-offline" class="filter-btn-mercedes px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-300">
|
||||
Offline
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button onclick="toggleAutoRefresh()" id="auto-refresh-btn" class="btn-professional group">
|
||||
<svg class="w-6 h-6 mr-3 group-hover:rotate-180 transition-transform duration-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<span>Auto-Update</span>
|
||||
</button>
|
||||
|
||||
<button onclick="refreshPrinters()" class="btn-professional group">
|
||||
<svg class="w-6 h-6 mr-3 group-hover:rotate-180 transition-transform duration-500" 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>
|
||||
<span>Jetzt aktualisieren</span>
|
||||
</button>
|
||||
|
||||
{% if current_user.is_admin %}
|
||||
<button id="addPrinterBtn" class="btn-success-professional group">
|
||||
<svg class="w-6 h-6 mr-3 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
||||
</svg>
|
||||
<span>Drucker hinzufügen</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Auto-Update Info -->
|
||||
<div class="mt-6 flex items-center justify-center space-x-2 text-professional-muted">
|
||||
<svg id="auto-refresh-icon" class="w-4 h-4 animate-spin-slow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<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>
|
||||
<span>Drucker hinzufügen</span>
|
||||
</button>
|
||||
{% endif %}
|
||||
<span class="text-sm">Auto-Update: <span id="next-update-time" class="font-mono">-</span>s</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Printers Grid -->
|
||||
<div id="printers-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
|
||||
<!-- Loading state -->
|
||||
<div class="col-span-full text-center py-6 sm:py-12">
|
||||
<div class="animate-spin rounded-full h-8 w-8 sm:h-12 sm:w-12 border-b-2 border-indigo-600 dark:border-indigo-400 mx-auto"></div>
|
||||
<p class="mt-3 sm:mt-4 text-sm sm:text-base text-slate-600 dark:text-slate-400">Lade Drucker...</p>
|
||||
<p class="mt-1 text-xs text-slate-500 dark:text-slate-500">Dies sollte nur wenige Sekunden dauern</p>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-8 relative z-10 space-y-8">
|
||||
|
||||
<!-- Printers Grid -->
|
||||
<div class="professional-container p-8 lg:p-12 animate-slide-up">
|
||||
<div class="text-center mb-10">
|
||||
<h2 class="title-professional text-3xl font-bold mb-4">
|
||||
Verfügbare Drucker
|
||||
</h2>
|
||||
<p class="subtitle-professional text-lg">
|
||||
Übersicht und Verwaltung Ihrer 3D-Drucker-Infrastruktur
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="printers-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Loading state -->
|
||||
<div class="col-span-full text-center py-12">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-b-2 border-professional-accent mx-auto"></div>
|
||||
<p class="mt-4 text-base text-professional-secondary">Lade Drucker...</p>
|
||||
<p class="mt-1 text-sm text-professional-muted">Dies sollte nur wenige Sekunden dauern</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1074,7 +1132,7 @@
|
||||
|
||||
// Filter-Funktionalität
|
||||
function setupFilters() {
|
||||
const filterButtons = document.querySelectorAll('.filter-btn-new');
|
||||
const filterButtons = document.querySelectorAll('.filter-btn-mercedes');
|
||||
|
||||
filterButtons.forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
|
Reference in New Issue
Block a user