"feat: Update admin and jobs templates for improved user experience"
This commit is contained in:
parent
25c9d1bffb
commit
6e8755775c
1177
backend/app/app.py
1177
backend/app/app.py
File diff suppressed because it is too large
Load Diff
@ -253,6 +253,12 @@
|
||||
</svg>
|
||||
Logs
|
||||
</a>
|
||||
|
||||
<a href="{{ url_for('admin_guest_requests') }}"
|
||||
class="group flex items-center px-6 py-3 text-sm font-medium rounded-xl transition-all duration-300 text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700/50 hover:text-slate-900 dark:hover:text-white">
|
||||
<i class="fas fa-user-friends w-5 h-5 mr-2 text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-300"></i>
|
||||
Gastaufträge
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
@ -864,13 +864,600 @@
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
// Globale Variable für Admin-Status
|
||||
// Globale Variablen
|
||||
window.isAdmin = {% if current_user.is_admin %}true{% else %}false{% endif %};
|
||||
let jobsData = [];
|
||||
let filteredJobs = [];
|
||||
let currentPage = 1;
|
||||
let itemsPerPage = 9;
|
||||
let batchModeActive = false;
|
||||
let selectedJobs = new Set();
|
||||
let refreshInterval;
|
||||
let lastUpdateTime;
|
||||
|
||||
// Job Management System
|
||||
class JobManager {
|
||||
constructor() {
|
||||
this.init();
|
||||
this.setupEventListeners();
|
||||
this.startAutoRefresh();
|
||||
}
|
||||
|
||||
async init() {
|
||||
await this.loadJobs();
|
||||
await this.loadPrinters();
|
||||
this.setupFormHandlers();
|
||||
this.initializeStatistics();
|
||||
}
|
||||
|
||||
setupEventListeners() {
|
||||
// Filter Event Listeners
|
||||
document.getElementById('search-input').addEventListener('input', this.debounce(this.filterJobs.bind(this), 300));
|
||||
document.getElementById('status-filter').addEventListener('change', this.filterJobs.bind(this));
|
||||
document.getElementById('printer-filter').addEventListener('change', this.filterJobs.bind(this));
|
||||
document.getElementById('date-filter').addEventListener('change', this.filterJobs.bind(this));
|
||||
document.getElementById('sort-by').addEventListener('change', this.sortAndDisplayJobs.bind(this));
|
||||
|
||||
// File Upload Handler
|
||||
const fileArea = document.getElementById('file-upload-area');
|
||||
const fileInput = document.getElementById('stl_file');
|
||||
|
||||
fileArea.addEventListener('click', () => fileInput.click());
|
||||
fileArea.addEventListener('dragover', this.handleDragOver.bind(this));
|
||||
fileArea.addEventListener('dragleave', this.handleDragLeave.bind(this));
|
||||
fileArea.addEventListener('drop', this.handleFileDrop.bind(this));
|
||||
fileInput.addEventListener('change', this.handleFileSelect.bind(this));
|
||||
|
||||
// Form Submissions
|
||||
document.getElementById('newJobForm').addEventListener('submit', this.handleJobSubmit.bind(this));
|
||||
document.getElementById('quickReservationForm').addEventListener('submit', this.handleQuickReservation.bind(this));
|
||||
|
||||
// Modal Close Events
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
this.closeAllModals();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async loadJobs() {
|
||||
try {
|
||||
document.getElementById('jobs-loading').classList.remove('hidden');
|
||||
document.getElementById('jobs-container').classList.add('hidden');
|
||||
|
||||
const response = await fetch('/api/jobs');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
jobsData = data.jobs || [];
|
||||
this.filterJobs();
|
||||
this.updateStatistics();
|
||||
lastUpdateTime = new Date();
|
||||
} else {
|
||||
this.showError('Fehler beim Laden der Jobs: ' + data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading jobs:', error);
|
||||
this.showError('Fehler beim Laden der Jobs');
|
||||
} finally {
|
||||
document.getElementById('jobs-loading').classList.add('hidden');
|
||||
document.getElementById('jobs-container').classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
async loadPrinters() {
|
||||
try {
|
||||
const response = await fetch('/api/printers');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
this.populatePrinterDropdowns(data.printers || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading printers:', error);
|
||||
}
|
||||
}
|
||||
|
||||
populatePrinterDropdowns(printers) {
|
||||
const printerSelect = document.getElementById('printer_id');
|
||||
const filterSelect = document.getElementById('printer-filter');
|
||||
const quickSelect = document.getElementById('quick-printer');
|
||||
|
||||
// Clear existing options
|
||||
[printerSelect, quickSelect].forEach(select => {
|
||||
while (select.children.length > 1) {
|
||||
select.removeChild(select.lastChild);
|
||||
}
|
||||
});
|
||||
|
||||
while (filterSelect.children.length > 1) {
|
||||
filterSelect.removeChild(filterSelect.lastChild);
|
||||
}
|
||||
|
||||
printers.forEach(printer => {
|
||||
const option = new Option(
|
||||
`${printer.name} (${printer.status})`,
|
||||
printer.id
|
||||
);
|
||||
|
||||
const filterOption = new Option(printer.name, printer.id);
|
||||
|
||||
if (printer.status === 'offline') {
|
||||
option.disabled = false; // Allow for queue mode
|
||||
option.text += ' - Warteschlange';
|
||||
}
|
||||
|
||||
printerSelect.appendChild(option.cloneNode(true));
|
||||
quickSelect.appendChild(option.cloneNode(true));
|
||||
filterSelect.appendChild(filterOption);
|
||||
});
|
||||
}
|
||||
|
||||
filterJobs() {
|
||||
const searchTerm = document.getElementById('search-input').value.toLowerCase();
|
||||
const statusFilter = document.getElementById('status-filter').value;
|
||||
const printerFilter = document.getElementById('printer-filter').value;
|
||||
const dateFilter = document.getElementById('date-filter').value;
|
||||
|
||||
filteredJobs = jobsData.filter(job => {
|
||||
const matchesSearch = !searchTerm ||
|
||||
job.title.toLowerCase().includes(searchTerm) ||
|
||||
job.id.toString().includes(searchTerm) ||
|
||||
(job.description && job.description.toLowerCase().includes(searchTerm));
|
||||
|
||||
const matchesStatus = !statusFilter || job.status === statusFilter;
|
||||
const matchesPrinter = !printerFilter || job.printer_id.toString() === printerFilter;
|
||||
const matchesDate = this.matchesDateFilter(job, dateFilter);
|
||||
|
||||
return matchesSearch && matchesStatus && matchesPrinter && matchesDate;
|
||||
});
|
||||
|
||||
document.getElementById('results-count').textContent = filteredJobs.length;
|
||||
this.sortAndDisplayJobs();
|
||||
}
|
||||
|
||||
matchesDateFilter(job, filter) {
|
||||
if (!filter) return true;
|
||||
|
||||
const now = new Date();
|
||||
const jobDate = new Date(job.created_at);
|
||||
|
||||
switch (filter) {
|
||||
case 'today':
|
||||
return jobDate.toDateString() === now.toDateString();
|
||||
case 'week':
|
||||
const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
|
||||
return jobDate >= weekAgo;
|
||||
case 'month':
|
||||
const monthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
|
||||
return jobDate >= monthAgo;
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
sortAndDisplayJobs() {
|
||||
const sortBy = document.getElementById('sort-by').value;
|
||||
|
||||
filteredJobs.sort((a, b) => {
|
||||
switch (sortBy) {
|
||||
case 'created_desc':
|
||||
return new Date(b.created_at) - new Date(a.created_at);
|
||||
case 'created_asc':
|
||||
return new Date(a.created_at) - new Date(b.created_at);
|
||||
case 'status':
|
||||
return a.status.localeCompare(b.status);
|
||||
case 'printer':
|
||||
return a.printer_name.localeCompare(b.printer_name);
|
||||
case 'progress':
|
||||
return (b.progress || 0) - (a.progress || 0);
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
});
|
||||
|
||||
currentPage = 1;
|
||||
this.displayJobs();
|
||||
this.updatePagination();
|
||||
}
|
||||
|
||||
displayJobs() {
|
||||
const container = document.getElementById('jobs-grid');
|
||||
const noJobsMessage = document.getElementById('no-jobs-message');
|
||||
|
||||
if (filteredJobs.length === 0) {
|
||||
container.innerHTML = '';
|
||||
noJobsMessage.classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
noJobsMessage.classList.add('hidden');
|
||||
|
||||
const startIndex = (currentPage - 1) * itemsPerPage;
|
||||
const endIndex = startIndex + itemsPerPage;
|
||||
const jobsToShow = filteredJobs.slice(startIndex, endIndex);
|
||||
|
||||
container.innerHTML = jobsToShow.map(job => this.createJobCard(job)).join('');
|
||||
|
||||
// Add event listeners to job cards
|
||||
container.querySelectorAll('.job-card').forEach(card => {
|
||||
const jobId = card.dataset.jobId;
|
||||
|
||||
// Batch selection
|
||||
if (batchModeActive) {
|
||||
const checkbox = card.querySelector('.job-checkbox');
|
||||
checkbox.addEventListener('change', () => this.toggleJobSelection(jobId));
|
||||
}
|
||||
|
||||
// Card click (not on buttons)
|
||||
card.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('button') && !e.target.closest('.job-checkbox')) {
|
||||
this.openJobDetails(jobId);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
createJobCard(job) {
|
||||
const statusClass = `status-${job.status}`;
|
||||
const progressPercent = job.progress || 0;
|
||||
const isSelected = selectedJobs.has(job.id.toString());
|
||||
|
||||
return `
|
||||
<div class="job-card ${statusClass} ${isSelected ? 'ring-2 ring-mercedes-blue' : ''}"
|
||||
data-job-id="${job.id}"
|
||||
tabindex="0">
|
||||
${batchModeActive ? `
|
||||
<div class="absolute top-4 left-4">
|
||||
<input type="checkbox" class="job-checkbox w-5 h-5 text-mercedes-blue rounded"
|
||||
${isSelected ? 'checked' : ''}>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<div class="p-6">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div class="flex-1 ${batchModeActive ? 'ml-8' : ''}">
|
||||
<h3 class="text-lg font-semibold text-mercedes-black dark:text-white mb-1 truncate">
|
||||
${job.title}
|
||||
</h3>
|
||||
<p class="text-sm text-mercedes-gray dark:text-slate-400">
|
||||
ID: ${job.id} • ${job.printer_name}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex-shrink-0 ml-4">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${this.getStatusBadgeClass(job.status)}">
|
||||
${this.getStatusText(job.status)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${job.status === 'running' || job.status === 'paused' ? `
|
||||
<div class="mb-4">
|
||||
<div class="flex justify-between text-sm text-mercedes-gray dark:text-slate-400 mb-2">
|
||||
<span>Fortschritt</span>
|
||||
<span>${progressPercent}%</span>
|
||||
</div>
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" style="width: ${progressPercent}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<div class="grid grid-cols-2 gap-3 text-sm text-mercedes-gray dark:text-slate-400 mb-4">
|
||||
<div>
|
||||
<span class="font-medium">Erstellt:</span><br>
|
||||
${this.formatDate(job.created_at)}
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium">Dauer:</span><br>
|
||||
${job.duration} Min
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
${this.getJobActionButtons(job)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
getStatusBadgeClass(status) {
|
||||
const classes = {
|
||||
'running': 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
|
||||
'queued': 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300',
|
||||
'completed': 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
|
||||
'failed': 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300',
|
||||
'paused': 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-300'
|
||||
};
|
||||
return classes[status] || 'bg-gray-100 text-gray-800';
|
||||
}
|
||||
|
||||
getStatusText(status) {
|
||||
const texts = {
|
||||
'running': 'Läuft',
|
||||
'queued': 'Warteschlange',
|
||||
'completed': 'Abgeschlossen',
|
||||
'failed': 'Fehlgeschlagen',
|
||||
'paused': 'Pausiert'
|
||||
};
|
||||
return texts[status] || status;
|
||||
}
|
||||
|
||||
getJobActionButtons(job) {
|
||||
let buttons = [];
|
||||
|
||||
// View button always available
|
||||
buttons.push(`
|
||||
<button onclick="jobManager.openJobDetails('${job.id}')"
|
||||
class="job-action-btn job-action-view">
|
||||
<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>
|
||||
`);
|
||||
|
||||
// Status-specific buttons
|
||||
switch (job.status) {
|
||||
case 'queued':
|
||||
buttons.push(`
|
||||
<button onclick="jobManager.startJob('${job.id}')"
|
||||
class="job-action-btn job-action-start">
|
||||
<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="M14.828 14.828a4 4 0 01-5.656 0M9 10h1.586a1 1 0 01.707.293l2.414 2.414a1 1 0 00.707.293H15M9 10V9a2 2 0 012-2h2a2 2 0 012 2v1M9 10v4a2 2 0 002 2h2a2 2 0 002-2v-4"/>
|
||||
</svg>
|
||||
Starten
|
||||
</button>
|
||||
`);
|
||||
break;
|
||||
case 'running':
|
||||
buttons.push(`
|
||||
<button onclick="jobManager.pauseJob('${job.id}')"
|
||||
class="job-action-btn job-action-pause">
|
||||
<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="M10 9v6m4-6v6"/>
|
||||
</svg>
|
||||
Pausieren
|
||||
</button>
|
||||
`);
|
||||
break;
|
||||
case 'paused':
|
||||
buttons.push(`
|
||||
<button onclick="jobManager.resumeJob('${job.id}')"
|
||||
class="job-action-btn job-action-start">
|
||||
<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="M14.828 14.828a4 4 0 01-5.656 0M9 10h1.586a1 1 0 01.707.293l2.414 2.414a1 1 0 00.707.293H15M9 10V9a2 2 0 012-2h2a2 2 0 012 2v1M9 10v4a2 2 0 002 2h2a2 2 0 002-2v-4"/>
|
||||
</svg>
|
||||
Fortsetzen
|
||||
</button>
|
||||
`);
|
||||
break;
|
||||
}
|
||||
|
||||
// Delete button (if user owns job or is admin)
|
||||
if (job.user_id === window.currentUserId || window.isAdmin) {
|
||||
buttons.push(`
|
||||
<button onclick="jobManager.deleteJob('${job.id}')"
|
||||
class="job-action-btn job-action-delete">
|
||||
<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
||||
</svg>
|
||||
Löschen
|
||||
</button>
|
||||
`);
|
||||
}
|
||||
|
||||
return buttons.join('');
|
||||
}
|
||||
|
||||
async openJobDetails(jobId) {
|
||||
try {
|
||||
const response = await fetch(`/api/jobs/${jobId}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
this.showJobDetailsModal(data.job);
|
||||
} else {
|
||||
this.showError('Fehler beim Laden der Job-Details');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading job details:', error);
|
||||
this.showError('Fehler beim Laden der Job-Details');
|
||||
}
|
||||
}
|
||||
|
||||
showJobDetailsModal(job) {
|
||||
const content = document.getElementById('jobDetailsContent');
|
||||
content.innerHTML = `
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="space-y-4">
|
||||
<h4 class="text-lg font-semibold text-mercedes-black dark:text-white">Allgemeine Informationen</h4>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span class="font-medium text-mercedes-gray dark:text-slate-400">Job-ID:</span>
|
||||
<p class="text-mercedes-black dark:text-white">${job.id}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium text-mercedes-gray dark:text-slate-400">Status:</span>
|
||||
<p class="text-mercedes-black dark:text-white">
|
||||
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${this.getStatusBadgeClass(job.status)}">
|
||||
${this.getStatusText(job.status)}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium text-mercedes-gray dark:text-slate-400">Drucker:</span>
|
||||
<p class="text-mercedes-black dark:text-white">${job.printer_name}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium text-mercedes-gray dark:text-slate-400">Dauer:</span>
|
||||
<p class="text-mercedes-black dark:text-white">${job.duration} Minuten</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium text-mercedes-gray dark:text-slate-400">Erstellt:</span>
|
||||
<p class="text-mercedes-black dark:text-white">${this.formatDate(job.created_at)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium text-mercedes-gray dark:text-slate-400">Ersteller:</span>
|
||||
<p class="text-mercedes-black dark:text-white">${job.user_name}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
${job.description ? `
|
||||
<div>
|
||||
<span class="font-medium text-mercedes-gray dark:text-slate-400">Beschreibung:</span>
|
||||
<p class="text-mercedes-black dark:text-white mt-1">${job.description}</p>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
${job.file_path ? `
|
||||
<div>
|
||||
<span class="font-medium text-mercedes-gray dark:text-slate-400">Datei:</span>
|
||||
<p class="text-mercedes-black dark:text-white mt-1">
|
||||
<a href="${job.file_path}" target="_blank" class="text-mercedes-blue hover:underline">
|
||||
${job.file_name || 'Datei herunterladen'}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
${(job.status === 'running' || job.status === 'paused') ? `
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold text-mercedes-black dark:text-white mb-3">Fortschritt</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-mercedes-gray dark:text-slate-400">Abgeschlossen:</span>
|
||||
<span class="text-mercedes-black dark:text-white">${job.progress || 0}%</span>
|
||||
</div>
|
||||
<div class="progress-container h-3">
|
||||
<div class="progress-bar" style="width: ${job.progress || 0}%"></div>
|
||||
</div>
|
||||
${job.estimated_completion ? `
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-mercedes-gray dark:text-slate-400">Voraussichtlich fertig:</span>
|
||||
<span class="text-mercedes-black dark:text-white">${this.formatDate(job.estimated_completion)}</span>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<div>
|
||||
<h4 class="text-lg font-semibold text-mercedes-black dark:text-white mb-3">Aktionen</h4>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
${this.getJobActionButtons(job)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
showModal('jobDetailsModal');
|
||||
}
|
||||
|
||||
updateStatistics() {
|
||||
const stats = {
|
||||
total: jobsData.length,
|
||||
active: jobsData.filter(job => job.status === 'running').length,
|
||||
queued: jobsData.filter(job => job.status === 'queued').length,
|
||||
failed: jobsData.filter(job => job.status === 'failed').length
|
||||
};
|
||||
|
||||
// Animate counter updates
|
||||
this.animateCounter('total-jobs', stats.total);
|
||||
this.animateCounter('active-jobs', stats.active);
|
||||
this.animateCounter('queued-jobs', stats.queued);
|
||||
this.animateCounter('failed-jobs', stats.failed);
|
||||
}
|
||||
|
||||
animateCounter(elementId, targetValue) {
|
||||
const element = document.getElementById(elementId);
|
||||
const currentValue = parseInt(element.textContent) || 0;
|
||||
const duration = 1000;
|
||||
const steps = 30;
|
||||
const stepValue = (targetValue - currentValue) / steps;
|
||||
let currentStep = 0;
|
||||
|
||||
const interval = setInterval(() => {
|
||||
currentStep++;
|
||||
const newValue = Math.round(currentValue + (stepValue * currentStep));
|
||||
element.textContent = newValue;
|
||||
|
||||
if (currentStep >= steps) {
|
||||
element.textContent = targetValue;
|
||||
clearInterval(interval);
|
||||
}
|
||||
}, duration / steps);
|
||||
}
|
||||
|
||||
formatDate(dateString) {
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('de-DE', {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
// Auto-refresh functionality
|
||||
startAutoRefresh() {
|
||||
refreshInterval = setInterval(() => {
|
||||
this.loadJobs();
|
||||
}, 30000); // Refresh every 30 seconds
|
||||
}
|
||||
|
||||
stopAutoRefresh() {
|
||||
if (refreshInterval) {
|
||||
clearInterval(refreshInterval);
|
||||
refreshInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
// Utility functions
|
||||
debounce(func, wait) {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
func(...args);
|
||||
};
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
}
|
||||
|
||||
showError(message) {
|
||||
// Implementation für Error Display
|
||||
console.error(message);
|
||||
}
|
||||
|
||||
showSuccess(message) {
|
||||
// Implementation für Success Display
|
||||
console.log(message);
|
||||
}
|
||||
|
||||
closeAllModals() {
|
||||
const modals = ['jobDetailsModal', 'quickReservationModal'];
|
||||
modals.forEach(modalId => {
|
||||
const modal = document.getElementById(modalId);
|
||||
if (modal && !modal.classList.contains('hidden')) {
|
||||
hideModal(modalId);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Modal Animations
|
||||
function showModal(modalId) {
|
||||
const modal = document.getElementById(modalId);
|
||||
const content = modal.querySelector('.dashboard-card');
|
||||
const content = modal.querySelector('.mercedes-modal, .dashboard-card');
|
||||
|
||||
modal.classList.remove('hidden');
|
||||
setTimeout(() => {
|
||||
@ -881,7 +1468,7 @@ function showModal(modalId) {
|
||||
|
||||
function hideModal(modalId) {
|
||||
const modal = document.getElementById(modalId);
|
||||
const content = modal.querySelector('.dashboard-card');
|
||||
const content = modal.querySelector('.mercedes-modal, .dashboard-card');
|
||||
|
||||
content.classList.remove('scale-100', 'opacity-100');
|
||||
content.classList.add('scale-95', 'opacity-0');
|
||||
@ -890,6 +1477,81 @@ function hideModal(modalId) {
|
||||
}, 200);
|
||||
}
|
||||
|
||||
// Global functions for UI interactions
|
||||
function refreshJobs() {
|
||||
const button = document.getElementById('refresh-button');
|
||||
button.disabled = true;
|
||||
button.querySelector('svg').classList.add('animate-spin');
|
||||
|
||||
jobManager.loadJobs().finally(() => {
|
||||
button.disabled = false;
|
||||
button.querySelector('svg').classList.remove('animate-spin');
|
||||
});
|
||||
}
|
||||
|
||||
function toggleBatchMode() {
|
||||
batchModeActive = !batchModeActive;
|
||||
const batchActions = document.getElementById('batch-actions');
|
||||
const toggleBtn = document.getElementById('batch-toggle');
|
||||
|
||||
if (batchModeActive) {
|
||||
batchActions.classList.remove('hidden');
|
||||
toggleBtn.classList.add('bg-mercedes-blue', 'text-white');
|
||||
toggleBtn.querySelector('span').textContent = 'Auswahl beenden';
|
||||
} else {
|
||||
batchActions.classList.add('hidden');
|
||||
toggleBtn.classList.remove('bg-mercedes-blue', 'text-white');
|
||||
toggleBtn.querySelector('span').textContent = 'Mehrfachauswahl';
|
||||
selectedJobs.clear();
|
||||
}
|
||||
|
||||
jobManager.displayJobs();
|
||||
}
|
||||
|
||||
function clearFilters() {
|
||||
document.getElementById('search-input').value = '';
|
||||
document.getElementById('status-filter').value = '';
|
||||
document.getElementById('printer-filter').value = '';
|
||||
document.getElementById('date-filter').value = '';
|
||||
document.getElementById('sort-by').value = 'created_desc';
|
||||
|
||||
jobManager.filterJobs();
|
||||
}
|
||||
|
||||
function toggleAdvancedFilters() {
|
||||
// Implementation für erweiterte Filter
|
||||
console.log('Toggle advanced filters');
|
||||
}
|
||||
|
||||
function changePage(direction) {
|
||||
const totalPages = Math.ceil(filteredJobs.length / itemsPerPage);
|
||||
currentPage = Math.max(1, Math.min(totalPages, currentPage + direction));
|
||||
|
||||
jobManager.displayJobs();
|
||||
jobManager.updatePagination();
|
||||
}
|
||||
|
||||
function showQuickReservation() {
|
||||
showModal('quickReservationModal');
|
||||
}
|
||||
|
||||
function toggleFormExpansion() {
|
||||
const expandedForm = document.getElementById('expanded-form');
|
||||
const toggleBtn = document.getElementById('form-toggle-btn');
|
||||
const toggleText = toggleBtn.querySelector('span');
|
||||
const toggleIcon = toggleBtn.querySelector('svg');
|
||||
|
||||
if (expandedForm.classList.contains('hidden')) {
|
||||
expandedForm.classList.remove('hidden');
|
||||
toggleText.textContent = 'Reduziert';
|
||||
toggleIcon.style.transform = 'rotate(180deg)';
|
||||
} else {
|
||||
expandedForm.classList.add('hidden');
|
||||
toggleText.textContent = 'Erweitert';
|
||||
toggleIcon.style.transform = 'rotate(0deg)';
|
||||
}
|
||||
}
|
||||
|
||||
function closeJobModal() {
|
||||
hideModal('jobDetailsModal');
|
||||
}
|
||||
@ -897,5 +1559,11 @@ function closeJobModal() {
|
||||
function closeQuickReservationModal() {
|
||||
hideModal('quickReservationModal');
|
||||
}
|
||||
|
||||
// Initialize Job Manager when page loads
|
||||
let jobManager;
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
jobManager = new JobManager();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Loading…
x
Reference in New Issue
Block a user