"Refactor guest blueprint and related files for improved maintainability (feat)"
This commit is contained in:
parent
2e306cb0df
commit
1ee91cec0a
@ -51,14 +51,78 @@ def approver_required(f):
|
||||
return decorated_function
|
||||
|
||||
# Gast-Routen
|
||||
@guest_blueprint.route('/request', methods=['GET'])
|
||||
@guest_blueprint.route('/request', methods=['GET', 'POST'])
|
||||
def guest_request_form():
|
||||
"""Formular für Gastanfragen anzeigen."""
|
||||
"""Formular für Gastanfragen anzeigen und verarbeiten."""
|
||||
with get_cached_session() as db_session:
|
||||
# Aktive Drucker für SelectField laden
|
||||
printers = db_session.query(Printer).filter_by(active=True).all()
|
||||
|
||||
# Formular erstellen
|
||||
form = GuestRequestForm()
|
||||
|
||||
# Drucker-Optionen für SelectField setzen
|
||||
printer_choices = [(0, 'Keinen spezifischen Drucker auswählen')]
|
||||
printer_choices.extend([(p.id, f"{p.name} ({p.location or 'Kein Standort'})") for p in printers])
|
||||
form.printer_id.choices = printer_choices
|
||||
|
||||
if form.validate_on_submit():
|
||||
try:
|
||||
# Daten aus dem Formular extrahieren
|
||||
name = form.name.data
|
||||
email = form.email.data
|
||||
reason = form.reason.data
|
||||
duration_min = form.duration_min.data
|
||||
printer_id = form.printer_id.data if form.printer_id.data != 0 else None
|
||||
|
||||
# IP-Adresse erfassen
|
||||
author_ip = request.remote_addr
|
||||
|
||||
# Drucker validieren, falls angegeben
|
||||
if printer_id:
|
||||
printer = db_session.query(Printer).filter_by(id=printer_id, active=True).first()
|
||||
if not printer:
|
||||
flash("Ungültiger Drucker ausgewählt.", "error")
|
||||
return render_template('guest_request.html', form=form, printers=printers)
|
||||
|
||||
# Neue Anfrage erstellen
|
||||
guest_request = GuestRequest(
|
||||
name=name,
|
||||
email=email,
|
||||
reason=reason,
|
||||
duration_min=duration_min,
|
||||
printer_id=printer_id,
|
||||
author_ip=author_ip
|
||||
)
|
||||
|
||||
db_session.add(guest_request)
|
||||
db_session.commit()
|
||||
|
||||
# Benachrichtigung für Genehmiger erstellen
|
||||
Notification.create_for_approvers(
|
||||
notification_type="guest_request",
|
||||
payload={
|
||||
"request_id": guest_request.id,
|
||||
"name": guest_request.name,
|
||||
"created_at": guest_request.created_at.isoformat(),
|
||||
"status": guest_request.status
|
||||
}
|
||||
)
|
||||
|
||||
logger.info(f"Neue Gastanfrage erstellt: ID {guest_request.id}, Name: {name}")
|
||||
flash("Ihr Antrag wurde erfolgreich eingereicht!", "success")
|
||||
|
||||
# Weiterleitung zur Status-Seite
|
||||
return redirect(url_for('guest.guest_request_status', request_id=guest_request.id))
|
||||
|
||||
except Exception as e:
|
||||
logger.error(f"Fehler beim Erstellen der Gastanfrage: {str(e)}")
|
||||
flash("Fehler beim Verarbeiten Ihres Antrags. Bitte versuchen Sie es erneut.", "error")
|
||||
|
||||
# Drucker-Liste von der Session trennen für Template-Verwendung
|
||||
db_session.expunge_all()
|
||||
return render_template('guest_request.html', printers=printers)
|
||||
|
||||
return render_template('guest_request.html', form=form, printers=printers)
|
||||
|
||||
@guest_blueprint.route('/start-job', methods=['GET'])
|
||||
def guest_start_job_form():
|
||||
|
||||
Binary file not shown.
Binary file not shown.
@ -46,9 +46,21 @@ echo
|
||||
APP_USER="myp"
|
||||
KIOSK_USER="kiosk"
|
||||
APP_DIR="/opt/myp-druckerverwaltung"
|
||||
BACKUP_DIR="/opt/myp-backups"
|
||||
SERVICE_NAME="myp-druckerverwaltung"
|
||||
KIOSK_SERVICE_NAME="myp-kiosk"
|
||||
KIOSK_URL="http://localhost"
|
||||
CURRENT_DIR="$(pwd)"
|
||||
|
||||
# System-Pfade
|
||||
SYSTEMD_DIR="/etc/systemd/system"
|
||||
NGINX_SITES_AVAILABLE="/etc/nginx/sites-available"
|
||||
NGINX_SITES_ENABLED="/etc/nginx/sites-enabled"
|
||||
LIGHTDM_CONF="/etc/lightdm/lightdm.conf"
|
||||
LOCAL_BIN="/usr/local/bin"
|
||||
CRON_DIR="/etc/cron.d"
|
||||
KIOSK_HOME="/home/$KIOSK_USER"
|
||||
PI_HOME="/home/pi"
|
||||
|
||||
# Bereinige unbenötigte Pakete (entsprechend offizieller Anleitung)
|
||||
log "Entferne unbenötigte Pakete zur Speicheroptimierung..."
|
||||
@ -123,7 +135,7 @@ if [ ! -d "$APP_DIR/.git" ]; then
|
||||
log "Kopiere Anwendung..."
|
||||
if [ -f "app.py" ]; then
|
||||
log "Kopiere lokale Anwendung..."
|
||||
cp -r . "$APP_DIR/"
|
||||
cp -r "$CURRENT_DIR"/* "$APP_DIR/"
|
||||
chown -R "$APP_USER:$APP_USER" "$APP_DIR"
|
||||
else
|
||||
error "Anwendungsdateien nicht gefunden. Führe das Skript im Anwendungsverzeichnis aus."
|
||||
@ -131,7 +143,7 @@ if [ ! -d "$APP_DIR/.git" ]; then
|
||||
else
|
||||
log "Anwendung bereits vorhanden, aktualisiere..."
|
||||
cd "$APP_DIR"
|
||||
sudo -u "$APP_USER" git pull
|
||||
sudo -u "$APP_USER" git pull || log "Git pull nicht möglich - lokale Installation"
|
||||
fi
|
||||
|
||||
cd "$APP_DIR"
|
||||
@ -143,7 +155,7 @@ sudo -u "$APP_USER" ./venv/bin/pip install --upgrade pip
|
||||
|
||||
# Installiere Python-Abhängigkeiten
|
||||
log "Installiere Python-Abhängigkeiten..."
|
||||
if [ -f "requirements.txt" ]; then
|
||||
if [ -f "$CURRENT_DIR/requirements.txt" ]; then
|
||||
# Erstelle korrigierte requirements.txt ohne Verweis auf andere Datei
|
||||
cat > "$APP_DIR/requirements_fixed.txt" << 'EOF'
|
||||
# MYP Platform - Python Dependencies
|
||||
@ -182,12 +194,12 @@ else
|
||||
fi
|
||||
|
||||
# Node.js Abhängigkeiten installieren
|
||||
if [ -f "package.json" ]; then
|
||||
if [ -f "$CURRENT_DIR/package.json" ]; then
|
||||
log "Installiere Node.js Abhängigkeiten..."
|
||||
sudo -u "$APP_USER" npm install
|
||||
|
||||
# Baue Frontend-Assets falls Tailwind vorhanden
|
||||
if [ -f "tailwind.config.js" ]; then
|
||||
if [ -f "$CURRENT_DIR/tailwind.config.js" ]; then
|
||||
log "Baue Frontend-Assets mit Tailwind CSS..."
|
||||
sudo -u "$APP_USER" npm run build:css || true
|
||||
fi
|
||||
@ -195,7 +207,7 @@ fi
|
||||
|
||||
# Datenbank initialisieren
|
||||
log "Initialisiere Datenbank..."
|
||||
if [ -f "models.py" ]; then
|
||||
if [ -f "$CURRENT_DIR/models.py" ]; then
|
||||
# Erstelle einfaches DB-Init-Skript
|
||||
cat > "$APP_DIR/init_simple_db.py" << 'EOF'
|
||||
from app import app, db
|
||||
|
||||
2
backend/app/static/css/tailwind.min.css
vendored
2
backend/app/static/css/tailwind.min.css
vendored
File diff suppressed because one or more lines are too long
@ -3,234 +3,174 @@
|
||||
{% block title %}Job mit Code starten - Mercedes-Benz MYP Platform{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="bg-professional">
|
||||
<!-- Dark Mode Override -->
|
||||
<style>
|
||||
.dark .bg-professional {
|
||||
background: #000000 !important;
|
||||
}
|
||||
.dark .professional-hero {
|
||||
background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
|
||||
border-color: #333333 !important;
|
||||
}
|
||||
.dark .professional-container {
|
||||
background: #111111 !important;
|
||||
border-color: #333333 !important;
|
||||
}
|
||||
.dark .mb-glass {
|
||||
background: rgba(17, 17, 17, 0.95) !important;
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
.dark .code-input {
|
||||
background: #1a1a1a !important;
|
||||
border-color: #333333 !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
.dark .code-input:focus {
|
||||
border-color: #3b82f6 !important;
|
||||
background: #222222 !important;
|
||||
}
|
||||
.dark .code-input.valid {
|
||||
border-color: #10b981 !important;
|
||||
background: rgba(16, 185, 129, 0.1) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Professional Hero Header -->
|
||||
<div class="professional-hero hero-pattern animate-fade-in" style="margin: 2rem; margin-bottom: 3rem;">
|
||||
<div class="absolute inset-0 bg-gradient-to-r from-black/10 to-black/20 dark:from-black/40 dark:to-black/60"></div>
|
||||
|
||||
<!-- Status Indicator -->
|
||||
<div class="absolute top-6 right-6 flex items-center space-x-4 z-10">
|
||||
<div class="mb-glass rounded-full px-6 py-3 animate-scale-in">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="status-dot status-online"></div>
|
||||
<span class="text-sm font-semibold text-professional-primary">Live System</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-glass rounded-full px-6 py-3 animate-scale-in">
|
||||
<span id="live-time" class="text-sm font-semibold text-professional-primary"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative max-w-6xl mx-auto px-6 lg:px-8 py-20 z-10">
|
||||
<div class="text-center animate-slide-up">
|
||||
<!-- Mercedes-Benz Logo -->
|
||||
<div class="inline-flex items-center justify-center w-28 h-28 mb-glass rounded-full mb-10 professional-shadow">
|
||||
<svg class="w-14 h-14 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"/>
|
||||
<div class="space-y-8">
|
||||
<!-- Page Header -->
|
||||
<div class="dashboard-card p-6">
|
||||
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-12 h-12 flex-shrink-0">
|
||||
<svg class="w-full h-full text-slate-900 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-3a1 1 0 011-1h2.586l6.243-6.243A6 6 0 0121 9z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h1 class="title-professional text-6xl md:text-7xl font-bold mb-8 tracking-tight">
|
||||
Job starten
|
||||
</h1>
|
||||
<p class="subtitle-professional text-2xl md:text-3xl max-w-5xl mx-auto leading-relaxed mb-12">
|
||||
Geben Sie Ihren 6-stelligen Zugangscode ein, um Ihren genehmigten Druckauftrag zu starten
|
||||
</p>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-slate-900 dark:text-white tracking-tight">Job starten</h1>
|
||||
<p class="text-slate-500 dark:text-slate-400 mt-1">Geben Sie Ihren 6-stelligen Zugangscode ein</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<a href="{{ url_for('guest.guest_request_form') }}"
|
||||
class="btn-secondary flex items-center gap-2">
|
||||
<svg class="w-5 h-5" 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>Neue Anfrage</span>
|
||||
</a>
|
||||
<a href="{{ url_for('index') }}"
|
||||
class="btn-secondary flex items-center gap-2">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
|
||||
</svg>
|
||||
<span>Startseite</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-3xl mx-auto px-6 lg:px-8 -mt-12 relative z-10" style="margin-bottom: 4rem;">
|
||||
|
||||
<!-- Code-Eingabe Container -->
|
||||
<div class="professional-container animate-slide-up" style="padding: 3rem; border-radius: 2rem; margin-bottom: 2rem;">
|
||||
<div class="text-center mb-12">
|
||||
<div class="w-24 h-24 bg-gradient-to-r from-green-500 to-emerald-500 rounded-3xl flex items-center justify-center mx-auto mb-8">
|
||||
<svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-3a1 1 0 011-1h2.586l6.243-6.243A6 6 0 0121 9z"/>
|
||||
<!-- Success Message (versteckt) -->
|
||||
<div id="successMessage" class="hidden">
|
||||
<div class="dashboard-card p-6 border-l-4 border-green-400">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-6 h-6 text-green-600 dark:text-green-400" 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>
|
||||
</div>
|
||||
<h2 class="title-professional text-4xl font-bold mb-6">
|
||||
Zugangscode eingeben
|
||||
</h2>
|
||||
<p class="subtitle-professional text-xl">
|
||||
Ihr persönlicher 6-stelliger Code wurde Ihnen nach der Genehmigung mitgeteilt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Erfolgs-Nachricht (versteckt) -->
|
||||
<div id="successMessage" class="hidden mb-8 alert-professional alert-success" style="border-radius: 2rem; padding: 2rem;">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-white" 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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 ml-6">
|
||||
<h3 class="text-xl font-bold text-professional-primary mb-3">Job erfolgreich gestartet!</h3>
|
||||
<p class="text-professional-secondary" id="successDetails"></p>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-semibold text-green-900 dark:text-green-100 mb-2">Job erfolgreich gestartet!</h3>
|
||||
<p class="text-green-700 dark:text-green-300" id="successDetails"></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fehler-Nachricht (versteckt) -->
|
||||
<div id="errorMessage" class="hidden mb-8 alert-professional alert-danger" style="border-radius: 2rem; padding: 2rem;">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-red-500 to-red-600 rounded-2xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-white" 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>
|
||||
</div>
|
||||
<!-- Error Message (versteckt) -->
|
||||
<div id="errorMessage" class="hidden">
|
||||
<div class="dashboard-card p-6 border-l-4 border-red-400">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-12 h-12 bg-red-100 dark:bg-red-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-6 h-6 text-red-600 dark:text-red-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>
|
||||
</div>
|
||||
<div class="flex-1 ml-6">
|
||||
<h3 class="text-xl font-bold text-professional-primary mb-3">Fehler beim Starten</h3>
|
||||
<p class="text-professional-secondary" id="errorDetails"></p>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-semibold text-red-900 dark:text-red-100 mb-2">Fehler beim Starten</h3>
|
||||
<p class="text-red-700 dark:text-red-300" id="errorDetails"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form id="codeForm" class="space-y-10">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Code-Eingabe Container -->
|
||||
<div class="dashboard-card p-8">
|
||||
<div class="text-center mb-8">
|
||||
<div class="w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-xl flex items-center justify-center mx-auto mb-6">
|
||||
<svg class="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-3a1 1 0 011-1h2.586l6.243-6.243A6 6 0 0121 9z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-slate-900 dark:text-white mb-3">
|
||||
Zugangscode eingeben
|
||||
</h2>
|
||||
<p class="text-slate-500 dark:text-slate-400">
|
||||
Ihr persönlicher 6-stelliger Code wurde Ihnen nach der Genehmigung mitgeteilt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form id="codeForm" class="max-w-lg mx-auto">
|
||||
<!-- Code-Eingabe -->
|
||||
<div class="mb-8">
|
||||
<label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-6 text-center">
|
||||
6-stelliger Zugangscode <span class="text-red-500">*</span>
|
||||
</label>
|
||||
|
||||
<!-- Code-Eingabe -->
|
||||
<div class="group">
|
||||
<label for="accessCode" class="block text-base font-bold text-professional-primary mb-6 text-center">
|
||||
6-stelliger Zugangscode <span class="text-red-500 text-lg">*</span>
|
||||
</label>
|
||||
|
||||
<!-- Code-Input mit einzelnen Feldern -->
|
||||
<div class="flex justify-center space-x-4 mb-8">
|
||||
<input type="text" id="code1" maxlength="1"
|
||||
class="code-input w-20 h-20 text-center text-3xl font-bold border border-slate-300 dark:border-slate-600 rounded-2xl focus:ring-4 focus:ring-blue-500/25 focus:border-blue-500 transition-all duration-300"
|
||||
oninput="moveToNext(this, 'code2')" onkeydown="handleBackspace(event, this, null)">
|
||||
<input type="text" id="code2" maxlength="1"
|
||||
class="code-input w-20 h-20 text-center text-3xl font-bold border border-slate-300 dark:border-slate-600 rounded-2xl focus:ring-4 focus:ring-blue-500/25 focus:border-blue-500 transition-all duration-300"
|
||||
oninput="moveToNext(this, 'code3')" onkeydown="handleBackspace(event, this, 'code1')">
|
||||
<input type="text" id="code3" maxlength="1"
|
||||
class="code-input w-20 h-20 text-center text-3xl font-bold border border-slate-300 dark:border-slate-600 rounded-2xl focus:ring-4 focus:ring-blue-500/25 focus:border-blue-500 transition-all duration-300"
|
||||
oninput="moveToNext(this, 'code4')" onkeydown="handleBackspace(event, this, 'code2')">
|
||||
<input type="text" id="code4" maxlength="1"
|
||||
class="code-input w-20 h-20 text-center text-3xl font-bold border border-slate-300 dark:border-slate-600 rounded-2xl focus:ring-4 focus:ring-blue-500/25 focus:border-blue-500 transition-all duration-300"
|
||||
oninput="moveToNext(this, 'code5')" onkeydown="handleBackspace(event, this, 'code3')">
|
||||
<input type="text" id="code5" maxlength="1"
|
||||
class="code-input w-20 h-20 text-center text-3xl font-bold border border-slate-300 dark:border-slate-600 rounded-2xl focus:ring-4 focus:ring-blue-500/25 focus:border-blue-500 transition-all duration-300"
|
||||
oninput="moveToNext(this, 'code6')" onkeydown="handleBackspace(event, this, 'code4')">
|
||||
<input type="text" id="code6" maxlength="1"
|
||||
class="code-input w-20 h-20 text-center text-3xl font-bold border border-slate-300 dark:border-slate-600 rounded-2xl focus:ring-4 focus:ring-blue-500/25 focus:border-blue-500 transition-all duration-300"
|
||||
oninput="moveToNext(this, null)" onkeydown="handleBackspace(event, this, 'code5')">
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<p class="text-professional-muted text-base">
|
||||
Der Code besteht aus 6 Zeichen (Großbuchstaben und Zahlen)
|
||||
</p>
|
||||
</div>
|
||||
<!-- Code-Input mit einzelnen Feldern -->
|
||||
<div class="flex justify-center gap-3 mb-6">
|
||||
<input type="text" id="code1" maxlength="1"
|
||||
class="code-input w-12 h-12 text-center text-xl font-bold border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300"
|
||||
oninput="moveToNext(this, 'code2')" onkeydown="handleBackspace(event, this, null)">
|
||||
<input type="text" id="code2" maxlength="1"
|
||||
class="code-input w-12 h-12 text-center text-xl font-bold border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300"
|
||||
oninput="moveToNext(this, 'code3')" onkeydown="handleBackspace(event, this, 'code1')">
|
||||
<input type="text" id="code3" maxlength="1"
|
||||
class="code-input w-12 h-12 text-center text-xl font-bold border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300"
|
||||
oninput="moveToNext(this, 'code4')" onkeydown="handleBackspace(event, this, 'code2')">
|
||||
<input type="text" id="code4" maxlength="1"
|
||||
class="code-input w-12 h-12 text-center text-xl font-bold border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300"
|
||||
oninput="moveToNext(this, 'code5')" onkeydown="handleBackspace(event, this, 'code3')">
|
||||
<input type="text" id="code5" maxlength="1"
|
||||
class="code-input w-12 h-12 text-center text-xl font-bold border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300"
|
||||
oninput="moveToNext(this, 'code6')" onkeydown="handleBackspace(event, this, 'code4')">
|
||||
<input type="text" id="code6" maxlength="1"
|
||||
class="code-input w-12 h-12 text-center text-xl font-bold border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-300"
|
||||
oninput="moveToNext(this, null)" onkeydown="handleBackspace(event, this, 'code5')">
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="text-center pt-8">
|
||||
<button type="submit" id="submitBtn"
|
||||
class="btn-success-professional group px-12 py-5 text-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none">
|
||||
<svg class="w-6 h-6 mr-4 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="M14.828 14.828a4 4 0 01-5.656 0M9 10h1m4 0h1m-6 4h.01M12 5v.01M12 19v.01M12 12h.01M12 9a3 3 0 100-6 3 3 0 000 6zm0 0a3 3 0 100 6 3 3 0 000-6z"/>
|
||||
</svg>
|
||||
Job jetzt starten
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- Hilfe-Sektion -->
|
||||
<div class="mt-16 pt-8 border-t-2 border-slate-200 dark:border-slate-600">
|
||||
|
||||
<div class="text-center">
|
||||
<h3 class="text-2xl font-bold text-professional-primary mb-8">
|
||||
Brauchen Sie Hilfe?
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="mb-glass p-6 rounded-2xl">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl mx-auto mb-4 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-professional-secondary">Ihr Zugangscode wurde Ihnen nach der Genehmigung mitgeteilt</p>
|
||||
</div>
|
||||
<div class="mb-glass p-6 rounded-2xl">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl mx-auto mb-4 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-professional-secondary">Der Code ist nur einmalig verwendbar und hat eine begrenzte Gültigkeit</p>
|
||||
</div>
|
||||
<div class="mb-glass p-6 rounded-2xl">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl mx-auto mb-4 flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M12 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-professional-secondary">Bei Problemen wenden Sie sich an den Administrator</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-8">
|
||||
<a href="{{ url_for('guest.guest_request_form') }}"
|
||||
class="btn-professional group px-8 py-4">
|
||||
<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>
|
||||
Neue Anfrage stellen
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-sm">
|
||||
Der Code besteht aus 6 Zeichen (Großbuchstaben und Zahlen)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="text-center">
|
||||
<button type="submit" id="submitBtn"
|
||||
class="btn-primary disabled:opacity-50 disabled:cursor-not-allowed px-8 py-3 flex items-center gap-2 mx-auto">
|
||||
<svg class="w-5 h-5" 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 10h1m4 0h1m-6 4h.01M12 5v.01M12 19v.01M12 12h.01M12 9a3 3 0 100-6 3 3 0 000 6zm0 0a3 3 0 100 6 3 3 0 000-6z"/>
|
||||
</svg>
|
||||
Job jetzt starten
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Hilfe-Sektion -->
|
||||
<div class="dashboard-card p-6">
|
||||
<h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-6 text-center">
|
||||
Brauchen Sie Hilfe?
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="text-center p-4 bg-gray-50 dark:bg-slate-700/30 rounded-lg">
|
||||
<div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-lg mx-auto mb-3 flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400">Ihr Zugangscode wurde Ihnen nach der Genehmigung mitgeteilt</p>
|
||||
</div>
|
||||
<div class="text-center p-4 bg-gray-50 dark:bg-slate-700/30 rounded-lg">
|
||||
<div class="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-lg mx-auto mb-3 flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400">Der Code ist nur einmalig verwendbar und hat eine begrenzte Gültigkeit</p>
|
||||
</div>
|
||||
<div class="text-center p-4 bg-gray-50 dark:bg-slate-700/30 rounded-lg">
|
||||
<div class="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-lg mx-auto mb-3 flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M12 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-sm text-slate-600 dark:text-slate-400">Bei Problemen wenden Sie sich an den Administrator</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Live Time Update
|
||||
function updateLiveTime() {
|
||||
const now = new Date();
|
||||
document.getElementById('live-time').textContent = now.toLocaleTimeString('de-DE');
|
||||
}
|
||||
updateLiveTime();
|
||||
setInterval(updateLiveTime, 1000);
|
||||
|
||||
// Code-Eingabe-Logik
|
||||
function moveToNext(current, nextId) {
|
||||
const value = current.value.toUpperCase();
|
||||
@ -242,7 +182,7 @@ function moveToNext(current, nextId) {
|
||||
}
|
||||
|
||||
current.value = value;
|
||||
current.classList.add('valid');
|
||||
current.classList.add('border-green-500', 'bg-green-50', 'dark:bg-green-900/20');
|
||||
|
||||
// Zum nächsten Feld wechseln
|
||||
if (nextId && value) {
|
||||
@ -260,9 +200,9 @@ function handleBackspace(event, current, prevId) {
|
||||
const prevField = document.getElementById(prevId);
|
||||
prevField.focus();
|
||||
prevField.value = '';
|
||||
prevField.classList.remove('valid');
|
||||
prevField.classList.remove('border-green-500', 'bg-green-50', 'dark:bg-green-900/20');
|
||||
} else if (current.value !== '') {
|
||||
current.classList.remove('valid');
|
||||
current.classList.remove('border-green-500', 'bg-green-50', 'dark:bg-green-900/20');
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -273,12 +213,6 @@ function checkFormComplete() {
|
||||
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
submitBtn.disabled = !allFilled;
|
||||
|
||||
if (allFilled) {
|
||||
submitBtn.classList.add('ring-4', 'ring-green-500/25');
|
||||
} else {
|
||||
submitBtn.classList.remove('ring-4', 'ring-green-500/25');
|
||||
}
|
||||
}
|
||||
|
||||
function getCodeValue() {
|
||||
@ -291,7 +225,7 @@ function clearCode() {
|
||||
inputs.forEach(id => {
|
||||
const input = document.getElementById(id);
|
||||
input.value = '';
|
||||
input.classList.remove('valid');
|
||||
input.classList.remove('border-green-500', 'bg-green-50', 'dark:bg-green-900/20');
|
||||
});
|
||||
checkFormComplete();
|
||||
document.getElementById('code1').focus();
|
||||
@ -336,13 +270,11 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
submitBtn.disabled = true;
|
||||
const originalContent = submitBtn.innerHTML;
|
||||
submitBtn.innerHTML = `
|
||||
<span class="flex items-center justify-center">
|
||||
<svg class="animate-spin w-5 h-5 mr-3" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Wird überprüft...
|
||||
</span>
|
||||
<svg class="animate-spin w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Wird überprüft...
|
||||
`;
|
||||
|
||||
try {
|
||||
@ -401,7 +333,9 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
inputs.forEach((id, index) => {
|
||||
const input = document.getElementById(id);
|
||||
input.value = paste[index] || '';
|
||||
if (input.value) input.classList.add('valid');
|
||||
if (input.value) {
|
||||
input.classList.add('border-green-500', 'bg-green-50', 'dark:bg-green-900/20');
|
||||
}
|
||||
});
|
||||
checkFormComplete();
|
||||
document.getElementById('code6').focus();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user