📝 'feat(database): Implement database backup on demand and immediate'

This commit is contained in:
2025-05-29 15:08:11 +02:00
parent 56da1c9093
commit 486ed41c46
8 changed files with 759 additions and 69 deletions

View File

@@ -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() {