"Update templates for improved UI/UX"
This commit is contained in:
@@ -451,8 +451,8 @@
|
||||
<div class="w-16 h-16 flex-shrink-0 bg-mercedes-blue text-white rounded-xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold text-mercedes-black dark:text-white tracking-tight">3D-Drucker</h1>
|
||||
<p class="text-mercedes-gray dark:text-slate-400 mt-1 text-lg">Live-Überwachung und Verwaltung Ihrer Produktionseinheiten</p>
|
||||
@@ -501,12 +501,12 @@
|
||||
<div class="flex items-center text-xs text-green-600 dark:text-green-400">
|
||||
<div class="w-2 h-2 bg-green-500 rounded-full mr-2 status-pulse"></div>
|
||||
<span>Betriebsbereit</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-xl flex items-center justify-center">
|
||||
<div class="w-6 h-6 bg-green-500 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-green-200 dark:border-green-800">
|
||||
<div class="text-xs text-mercedes-gray dark:text-slate-400">
|
||||
<span class="font-medium" id="online-percentage">0%</span> aller Drucker
|
||||
@@ -522,12 +522,12 @@
|
||||
<div class="flex items-center text-xs text-red-600 dark:text-red-400">
|
||||
<div class="w-2 h-2 bg-red-500 rounded-full mr-2"></div>
|
||||
<span>Nicht verfügbar</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-red-100 dark:bg-red-900/30 rounded-xl flex items-center justify-center">
|
||||
<div class="w-6 h-6 bg-red-500 rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-red-200 dark:border-red-800">
|
||||
<div class="text-xs text-mercedes-gray dark:text-slate-400">
|
||||
<span class="font-medium" id="offline-percentage">0%</span> aller Drucker
|
||||
@@ -543,12 +543,12 @@
|
||||
<div class="flex items-center text-xs text-blue-600 dark:text-blue-400">
|
||||
<div class="w-2 h-2 bg-blue-500 rounded-full mr-2 status-pulse"></div>
|
||||
<span>Druckt gerade</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center">
|
||||
<div class="w-6 h-6 bg-blue-500 rounded-full animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 pt-4 border-t border-blue-200 dark:border-blue-800">
|
||||
<div class="text-xs text-mercedes-gray dark:text-slate-400">
|
||||
<span class="font-medium" id="active-percentage">0%</span> Auslastung
|
||||
@@ -566,7 +566,7 @@
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
|
||||
<span>Drucker registriert</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-12 h-12 bg-mercedes-silver rounded-xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-mercedes-black dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -688,7 +688,7 @@
|
||||
<option value="">Alle Standorte</option>
|
||||
<!-- Wird dynamisch gefüllt -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Model Filter -->
|
||||
<div>
|
||||
@@ -702,9 +702,9 @@
|
||||
<option value="">Alle Modelle</option>
|
||||
<!-- Wird dynamisch gefüllt -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Advanced Filter Options -->
|
||||
<div class="mt-6 flex flex-wrap items-center justify-between gap-4">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
@@ -770,8 +770,8 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
|
||||
<!-- Loading State -->
|
||||
<div id="loading-state" class="space-y-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="printer-card p-6">
|
||||
@@ -835,9 +835,9 @@
|
||||
<div class="text-center">
|
||||
<div class="text-mercedes-gray dark:text-slate-400 mb-4">
|
||||
<svg class="w-8 h-8 mx-auto mb-3 animate-spin text-mercedes-blue" 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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<p class="text-mercedes-gray dark:text-slate-400">Lade Drucker-Informationen...</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -846,16 +846,16 @@
|
||||
<div id="printers-container" class="hidden">
|
||||
<div id="printers-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Printers will be loaded here -->
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div id="empty-state" class="hidden 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>
|
||||
</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, die den aktuellen Filterkriterien entsprechen.
|
||||
@@ -865,11 +865,11 @@
|
||||
<button onclick="clearAllFilters()" class="btn-secondary">
|
||||
Filter zurücksetzen
|
||||
</button>
|
||||
<button onclick="openAddPrinterModal()" class="btn-primary">
|
||||
Ersten Drucker hinzufügen
|
||||
</button>
|
||||
<button onclick="openAddPrinterModal()" class="btn-primary">
|
||||
Ersten Drucker hinzufügen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- No Results State -->
|
||||
@@ -898,7 +898,7 @@
|
||||
<div class="flex items-center justify-center min-h-screen p-4">
|
||||
<div class="mercedes-modal max-w-2xl w-full p-8 transform transition-all duration-300 scale-95 opacity-0" id="printerModalContent">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<div>
|
||||
<h3 id="printerModalTitle" class="text-2xl font-bold text-mercedes-black dark:text-white mb-2">
|
||||
Drucker hinzufügen
|
||||
</h3>
|
||||
@@ -913,7 +913,7 @@
|
||||
|
||||
<form id="printerForm" class="space-y-6">
|
||||
<input type="hidden" id="printerId" name="printerId">
|
||||
|
||||
|
||||
<!-- Basic Information -->
|
||||
<div class="space-y-4">
|
||||
<h4 class="text-lg font-semibold text-mercedes-black dark:text-white border-b border-mercedes-silver pb-2">
|
||||
@@ -921,20 +921,20 @@
|
||||
</h4>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div>
|
||||
<label for="printerName" class="block text-sm font-medium text-mercedes-black dark:text-slate-300 mb-2">
|
||||
Drucker-Name <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input type="text" id="printerName" name="name" required
|
||||
Drucker-Name <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<input type="text" id="printerName" name="name" required
|
||||
class="mercedes-form-input block w-full px-4 py-3 rounded-lg"
|
||||
placeholder="z.B. Ultimaker S3 #01">
|
||||
<p class="text-xs text-mercedes-gray dark:text-slate-400 mt-1">Eindeutiger Name zur Identifikation</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="printerModel" class="block text-sm font-medium text-mercedes-black dark:text-slate-300 mb-2">
|
||||
Modell
|
||||
</label>
|
||||
Modell
|
||||
</label>
|
||||
<select id="printerModel" name="model" class="mercedes-form-input block w-full px-4 py-3 rounded-lg">
|
||||
<option value="">Modell auswählen...</option>
|
||||
<option value="Ultimaker S3">Ultimaker S3</option>
|
||||
@@ -953,30 +953,30 @@
|
||||
<input type="text" id="customModel" name="customModel"
|
||||
class="mercedes-form-input block w-full px-4 py-3 rounded-lg"
|
||||
placeholder="Geben Sie das Druckermodell ein">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="printerLocation" class="block text-sm font-medium text-mercedes-black dark:text-slate-300 mb-2">
|
||||
Standort <span class="text-red-500">*</span>
|
||||
</label>
|
||||
</label>
|
||||
<input type="text" id="printerLocation" name="location" required
|
||||
class="mercedes-form-input block w-full px-4 py-3 rounded-lg"
|
||||
placeholder="z.B. Produktionshalle A, Raum 101">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="printerIP" class="block text-sm font-medium text-mercedes-black dark:text-slate-300 mb-2">
|
||||
IP-Adresse
|
||||
</label>
|
||||
<input type="text" id="printerIP" name="ip_address"
|
||||
IP-Adresse
|
||||
</label>
|
||||
<input type="text" id="printerIP" name="ip_address"
|
||||
class="mercedes-form-input block w-full px-4 py-3 rounded-lg"
|
||||
placeholder="192.168.1.100"
|
||||
pattern="^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}$">
|
||||
<p class="text-xs text-mercedes-gray dark:text-slate-400 mt-1">Für Netzwerk-Überwachung</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Technical Specifications -->
|
||||
<div class="space-y-4">
|
||||
<h4 class="text-lg font-semibold text-mercedes-black dark:text-white border-b border-mercedes-silver pb-2">
|
||||
@@ -1056,14 +1056,14 @@
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" id="printerActive" name="active" checked
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" id="printerActive" name="active" checked
|
||||
class="w-4 h-4 text-mercedes-blue bg-white dark:bg-slate-800 border-mercedes-silver rounded focus:ring-mercedes-blue focus:ring-2">
|
||||
<label for="printerActive" class="ml-3 text-sm text-mercedes-black dark:text-slate-300">
|
||||
Drucker aktiv
|
||||
</label>
|
||||
</div>
|
||||
|
||||
Drucker aktiv
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" id="autoQueue" name="auto_queue"
|
||||
class="w-4 h-4 text-mercedes-blue bg-white dark:bg-slate-800 border-mercedes-silver rounded focus:ring-mercedes-blue focus:ring-2">
|
||||
@@ -1123,22 +1123,22 @@
|
||||
</button>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<button type="button" onclick="closePrinterModal()" class="btn-secondary">
|
||||
Abbrechen
|
||||
</button>
|
||||
<button type="button" onclick="closePrinterModal()" class="btn-secondary">
|
||||
Abbrechen
|
||||
</button>
|
||||
<button type="submit" class="btn-primary flex items-center gap-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
Speichern
|
||||
</button>
|
||||
Speichern
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Enhanced Printer Details Modal -->
|
||||
<div id="printerDetailsModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm hidden z-50">
|
||||
<div class="flex items-center justify-center min-h-screen p-4">
|
||||
@@ -1149,14 +1149,14 @@
|
||||
Drucker Details
|
||||
</h3>
|
||||
<p class="text-mercedes-gray dark:text-slate-400">Live-Informationen und Steuerungsoptionen</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="closePrinterDetailsModal()" class="p-2 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-lg transition-colors">
|
||||
<svg class="w-6 h-6 text-mercedes-gray dark:text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="printerDetailsContent" class="space-y-6">
|
||||
<!-- Content will be loaded dynamically -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
@@ -1213,10 +1213,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let allPrinters = [];
|
||||
@@ -1273,22 +1273,22 @@ class PrinterManager {
|
||||
try {
|
||||
this.showLoadingState();
|
||||
|
||||
const response = await fetch('/api/printers');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
const response = await fetch('/api/printers');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
allPrinters = data.printers || [];
|
||||
this.applyFilters();
|
||||
this.updateStatistics();
|
||||
this.populateFilterDropdowns();
|
||||
this.updateLastUpdateTime();
|
||||
} else {
|
||||
} else {
|
||||
this.showError('Fehler beim Laden der Drucker: ' + data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading printers:', error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading printers:', error);
|
||||
this.showError('Fehler beim Laden der Drucker');
|
||||
} finally {
|
||||
} finally {
|
||||
this.hideLoadingState();
|
||||
}
|
||||
}
|
||||
@@ -1366,20 +1366,20 @@ class PrinterManager {
|
||||
}
|
||||
|
||||
displayPrinters() {
|
||||
const grid = document.getElementById('printers-grid');
|
||||
const emptyState = document.getElementById('empty-state');
|
||||
const grid = document.getElementById('printers-grid');
|
||||
const emptyState = document.getElementById('empty-state');
|
||||
const noResultsState = document.getElementById('no-results-state');
|
||||
|
||||
if (allPrinters.length === 0) {
|
||||
grid.innerHTML = '';
|
||||
emptyState.classList.remove('hidden');
|
||||
emptyState.classList.remove('hidden');
|
||||
noResultsState.classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (filteredPrinters.length === 0) {
|
||||
grid.innerHTML = '';
|
||||
emptyState.classList.add('hidden');
|
||||
emptyState.classList.add('hidden');
|
||||
noResultsState.classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
@@ -1400,24 +1400,24 @@ class PrinterManager {
|
||||
const statusClasses = this.getStatusClasses(printer.status);
|
||||
const temperature = printer.temperature || {};
|
||||
const currentJob = printer.current_job || {};
|
||||
|
||||
return `
|
||||
|
||||
return `
|
||||
<div class="printer-card ${statusClasses.container} p-6" data-printer-id="${printer.id}">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 ${statusClasses.iconBg} rounded-xl flex items-center justify-center">
|
||||
${this.getStatusIcon(printer.status)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-mercedes-black dark:text-white">${printer.name}</h3>
|
||||
<p class="text-sm text-mercedes-gray dark:text-slate-400">${printer.model || 'Unbekanntes Modell'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${statusClasses.badge}">
|
||||
${this.getStatusText(printer.status)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
|
||||
${printer.status === 'printing' && currentJob.progress ? `
|
||||
<div class="mb-4">
|
||||
<div class="flex justify-between text-sm text-mercedes-gray dark:text-slate-400 mb-2">
|
||||
@@ -1430,7 +1430,7 @@ class PrinterManager {
|
||||
${currentJob.time_remaining ? `
|
||||
<div class="text-xs text-mercedes-gray dark:text-slate-400 mt-1">
|
||||
Verbleibend: ${this.formatDuration(currentJob.time_remaining)}
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
` : ''}
|
||||
@@ -1463,30 +1463,30 @@ class PrinterManager {
|
||||
<p class="text-mercedes-black dark:text-white">${this.formatUptime(printer.uptime)}</p>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<button onclick="printerManager.openPrinterDetails('${printer.id}')"
|
||||
class="printer-action-btn btn-details flex-1">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
||||
</svg>
|
||||
Details
|
||||
</button>
|
||||
Details
|
||||
</button>
|
||||
<button onclick="printerManager.editPrinter('${printer.id}')"
|
||||
class="printer-action-btn btn-edit flex-1">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
|
||||
</svg>
|
||||
Bearbeiten
|
||||
</button>
|
||||
Bearbeiten
|
||||
</button>
|
||||
${this.getPrinterActionButton(printer)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
createPrinterListItem(printer) {
|
||||
const statusClasses = this.getStatusClasses(printer.status);
|
||||
|
||||
@@ -1575,47 +1575,47 @@ class PrinterManager {
|
||||
}
|
||||
|
||||
getStatusClasses(status) {
|
||||
const classes = {
|
||||
'online': {
|
||||
const classes = {
|
||||
'online': {
|
||||
container: 'status-online',
|
||||
iconBg: 'bg-green-100 dark:bg-green-900/30 text-green-600',
|
||||
badge: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
|
||||
},
|
||||
'offline': {
|
||||
badge: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
|
||||
},
|
||||
'offline': {
|
||||
container: 'status-offline',
|
||||
iconBg: 'bg-red-100 dark:bg-red-900/30 text-red-600',
|
||||
badge: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
|
||||
},
|
||||
'printing': {
|
||||
badge: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
|
||||
},
|
||||
'printing': {
|
||||
container: 'status-printing',
|
||||
iconBg: 'bg-blue-100 dark:bg-blue-900/30 text-blue-600',
|
||||
badge: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400'
|
||||
},
|
||||
'error': {
|
||||
badge: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400'
|
||||
},
|
||||
'error': {
|
||||
container: 'status-error',
|
||||
iconBg: 'bg-orange-100 dark:bg-orange-900/30 text-orange-600',
|
||||
badge: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400'
|
||||
badge: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400'
|
||||
},
|
||||
'maintenance': {
|
||||
container: 'status-maintenance',
|
||||
iconBg: 'bg-purple-100 dark:bg-purple-900/30 text-purple-600',
|
||||
badge: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400'
|
||||
}
|
||||
};
|
||||
return classes[status] || classes['offline'];
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
return classes[status] || classes['offline'];
|
||||
}
|
||||
|
||||
getStatusIcon(status) {
|
||||
const icons = {
|
||||
'online': '<div class="w-3 h-3 bg-green-500 rounded-full"></div>',
|
||||
'offline': '<div class="w-3 h-3 bg-red-500 rounded-full"></div>',
|
||||
const icons = {
|
||||
'online': '<div class="w-3 h-3 bg-green-500 rounded-full"></div>',
|
||||
'offline': '<div class="w-3 h-3 bg-red-500 rounded-full"></div>',
|
||||
'printing': '<div class="w-3 h-3 bg-blue-500 rounded-full status-pulse"></div>',
|
||||
'error': '<div class="w-3 h-3 bg-orange-500 rounded-full"></div>',
|
||||
'maintenance': '<div class="w-3 h-3 bg-purple-500 rounded-full"></div>'
|
||||
};
|
||||
return icons[status] || icons['offline'];
|
||||
}
|
||||
|
||||
};
|
||||
return icons[status] || icons['offline'];
|
||||
}
|
||||
|
||||
getStatusText(status) {
|
||||
const texts = {
|
||||
'online': 'Online',
|
||||
@@ -1629,7 +1629,7 @@ class PrinterManager {
|
||||
}
|
||||
|
||||
updateStatistics() {
|
||||
const stats = {
|
||||
const stats = {
|
||||
total: allPrinters.length,
|
||||
online: allPrinters.filter(p => ['online', 'idle'].includes(p.status)).length,
|
||||
offline: allPrinters.filter(p => p.status === 'offline').length,
|
||||
@@ -1689,11 +1689,11 @@ class PrinterManager {
|
||||
}
|
||||
|
||||
populateFilterDropdowns() {
|
||||
// Populate location filter
|
||||
const locationFilter = document.getElementById('filterLocation');
|
||||
const locations = [...new Set(allPrinters.map(p => p.location).filter(Boolean))];
|
||||
locationFilter.innerHTML = '<option value="">Alle Standorte</option>' +
|
||||
locations.map(location => `<option value="${location}">${location}</option>`).join('');
|
||||
// Populate location filter
|
||||
const locationFilter = document.getElementById('filterLocation');
|
||||
const locations = [...new Set(allPrinters.map(p => p.location).filter(Boolean))];
|
||||
locationFilter.innerHTML = '<option value="">Alle Standorte</option>' +
|
||||
locations.map(location => `<option value="${location}">${location}</option>`).join('');
|
||||
|
||||
// Populate model filter
|
||||
const modelFilter = document.getElementById('filterModel');
|
||||
@@ -1781,9 +1781,9 @@ class PrinterManager {
|
||||
|
||||
content.classList.remove('scale-100', 'opacity-100');
|
||||
content.classList.add('scale-95', 'opacity-0');
|
||||
setTimeout(() => {
|
||||
modal.classList.add('hidden');
|
||||
}, 200);
|
||||
setTimeout(() => {
|
||||
modal.classList.add('hidden');
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1845,7 +1845,7 @@ function toggleGridView(view) {
|
||||
gridBtn.classList.remove('text-mercedes-gray', 'hover:bg-mercedes-silver');
|
||||
listBtn.classList.remove('bg-mercedes-blue', 'text-white');
|
||||
listBtn.classList.add('text-mercedes-gray', 'hover:bg-mercedes-silver');
|
||||
} else {
|
||||
} else {
|
||||
listBtn.classList.add('bg-mercedes-blue', 'text-white');
|
||||
listBtn.classList.remove('text-mercedes-gray', 'hover:bg-mercedes-silver');
|
||||
gridBtn.classList.remove('bg-mercedes-blue', 'text-white');
|
||||
|
||||
Reference in New Issue
Block a user