📝 Commit Details:
This commit is contained in:
238
backend/templates/admin_manage_printer.html
Normal file
238
backend/templates/admin_manage_printer.html
Normal file
@ -0,0 +1,238 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Drucker verwalten - Mercedes-Benz MYP Platform{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-slate-900 dark:text-white">{{ printer.name }} verwalten</h1>
|
||||
<p class="text-slate-600 dark:text-slate-400 mt-2">Verwaltung und Überwachung des Druckers</p>
|
||||
</div>
|
||||
<a href="{{ url_for('admin_page', tab='printers') }}" class="inline-flex items-center px-4 py-2 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl hover:bg-slate-300 dark:hover:bg-slate-600 transition-all duration-300">
|
||||
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
|
||||
</svg>
|
||||
Zurück zur Druckerverwaltung
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Drucker-Info -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
||||
<!-- Status Card -->
|
||||
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl p-6">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-4">Status</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-slate-600 dark:text-slate-400">Aktueller Status:</span>
|
||||
<span class="px-3 py-1 rounded-full text-sm font-medium
|
||||
{% if printer.status == 'available' %}bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200{% elif printer.status == 'busy' %}bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200{% elif printer.status == 'maintenance' %}bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200{% else %}bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200{% endif %}">
|
||||
{{ printer.status|title }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-slate-600 dark:text-slate-400">IP-Adresse:</span>
|
||||
<span class="text-slate-900 dark:text-white font-mono">{{ printer.ip_address }}</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-slate-600 dark:text-slate-400">Standort:</span>
|
||||
<span class="text-slate-900 dark:text-white">{{ printer.location or 'Nicht angegeben' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Aktionen Card -->
|
||||
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl p-6">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-4">Aktionen</h3>
|
||||
<div class="space-y-3">
|
||||
<button onclick="togglePrinter({{ printer.id }})"
|
||||
class="w-full px-4 py-2 bg-blue-500 text-white rounded-xl hover:bg-blue-600 transition-all duration-300">
|
||||
{% if printer.status == 'available' %}Deaktivieren{% else %}Aktivieren{% endif %}
|
||||
</button>
|
||||
<button onclick="testConnection({{ printer.id }})"
|
||||
class="w-full px-4 py-2 bg-green-500 text-white rounded-xl hover:bg-green-600 transition-all duration-300">
|
||||
Verbindung testen
|
||||
</button>
|
||||
<a href="{{ url_for('admin_printer_settings_page', printer_id=printer.id) }}"
|
||||
class="block w-full px-4 py-2 bg-slate-500 text-white rounded-xl hover:bg-slate-600 transition-all duration-300 text-center">
|
||||
Einstellungen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistiken Card -->
|
||||
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl p-6">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-4">Statistiken</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-slate-600 dark:text-slate-400">Gesamte Jobs:</span>
|
||||
<span class="text-slate-900 dark:text-white font-semibold" id="total-jobs">-</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-slate-600 dark:text-slate-400">Aktive Jobs:</span>
|
||||
<span class="text-slate-900 dark:text-white font-semibold" id="active-jobs">-</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-slate-600 dark:text-slate-400">Erfolgsrate:</span>
|
||||
<span class="text-slate-900 dark:text-white font-semibold" id="success-rate">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Aktuelle Jobs -->
|
||||
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl p-6">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-4">Aktuelle Jobs</h3>
|
||||
<div id="current-jobs" class="space-y-4">
|
||||
<div class="text-center text-slate-500 dark:text-slate-400 py-8">
|
||||
Lade Jobs...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// CSRF Token
|
||||
function getCsrfToken() {
|
||||
const token = document.querySelector('meta[name="csrf-token"]');
|
||||
return token ? token.getAttribute('content') : '';
|
||||
}
|
||||
|
||||
// Notification anzeigen
|
||||
function showNotification(message, type = 'info') {
|
||||
if (type === 'success') {
|
||||
alert('✓ ' + message);
|
||||
} else if (type === 'error') {
|
||||
alert('✗ ' + message);
|
||||
} else {
|
||||
alert('ℹ ' + message);
|
||||
}
|
||||
}
|
||||
|
||||
// Drucker aktivieren/deaktivieren
|
||||
async function togglePrinter(printerId) {
|
||||
try {
|
||||
const response = await fetch(`/api/admin/printers/${printerId}/toggle`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': getCsrfToken()
|
||||
}
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok && result.success) {
|
||||
showNotification('Drucker-Status erfolgreich geändert', 'success');
|
||||
setTimeout(() => location.reload(), 1000);
|
||||
} else {
|
||||
showNotification(result.error || 'Fehler beim Ändern des Drucker-Status', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showNotification('Netzwerkfehler: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Verbindung testen
|
||||
async function testConnection(printerId) {
|
||||
try {
|
||||
const response = await fetch(`/api/printers/${printerId}/test`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': getCsrfToken()
|
||||
}
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
if (result.connected) {
|
||||
showNotification('Verbindung erfolgreich', 'success');
|
||||
} else {
|
||||
showNotification('Verbindung fehlgeschlagen', 'error');
|
||||
}
|
||||
} else {
|
||||
showNotification(result.error || 'Fehler beim Testen der Verbindung', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showNotification('Netzwerkfehler: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Statistiken laden
|
||||
async function loadStats() {
|
||||
try {
|
||||
const response = await fetch(`/api/printers/{{ printer.id }}/stats`);
|
||||
const stats = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
document.getElementById('total-jobs').textContent = stats.total_jobs || 0;
|
||||
document.getElementById('active-jobs').textContent = stats.active_jobs || 0;
|
||||
document.getElementById('success-rate').textContent = (stats.success_rate || 0) + '%';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Statistiken:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Jobs laden
|
||||
async function loadJobs() {
|
||||
try {
|
||||
const response = await fetch(`/api/printers/{{ printer.id }}/jobs`);
|
||||
const jobs = await response.json();
|
||||
|
||||
const container = document.getElementById('current-jobs');
|
||||
|
||||
if (response.ok && jobs.length > 0) {
|
||||
container.innerHTML = jobs.map(job => `
|
||||
<div class="border border-slate-200 dark:border-slate-700 rounded-xl p-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h4 class="font-medium text-slate-900 dark:text-white">${job.name}</h4>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400">von ${job.user_name}</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="px-3 py-1 rounded-full text-sm font-medium
|
||||
${job.status === 'running' ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' :
|
||||
job.status === 'pending' ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200' :
|
||||
'bg-slate-100 text-slate-800 dark:bg-slate-900 dark:text-slate-200'}">
|
||||
${job.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
} else {
|
||||
container.innerHTML = '<div class="text-center text-slate-500 dark:text-slate-400 py-8">Keine aktiven Jobs</div>';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Jobs:', error);
|
||||
document.getElementById('current-jobs').innerHTML = '<div class="text-center text-red-500 py-8">Fehler beim Laden der Jobs</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// Beim Laden der Seite
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
loadStats();
|
||||
loadJobs();
|
||||
|
||||
// Alle 30 Sekunden aktualisieren
|
||||
setInterval(() => {
|
||||
loadStats();
|
||||
loadJobs();
|
||||
}, 30000);
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user