Add inline edit functionality to destinataer detail view - Added toggle between view and edit modes while maintaining elegant card design - Implemented AJAX form submission for seamless saving - Added JavaScript functionality for edit/save/cancel operations - Enhanced user experience with keyboard shortcuts and notifications
This commit is contained in:
Stiftung Development
@@ -17,9 +17,18 @@
|
||||
<a href="{% url 'stiftung:foerderung_create' %}?destinataer={{ destinataer.pk }}" class="btn btn-success me-2">
|
||||
<i class="fas fa-gift me-2"></i>Neue Förderung
|
||||
</a>
|
||||
<a href="{% url 'stiftung:destinataer_update' pk=destinataer.pk %}" class="btn btn-warning me-2">
|
||||
|
||||
<!-- Edit Mode Toggle Buttons -->
|
||||
<button id="edit-btn" class="btn btn-warning me-2" onclick="enableEditMode()">
|
||||
<i class="fas fa-edit me-2"></i>Bearbeiten
|
||||
</a>
|
||||
</button>
|
||||
<button id="save-btn" class="btn btn-success me-2" onclick="saveChanges()" style="display: none;">
|
||||
<i class="fas fa-save me-2"></i>Speichern
|
||||
</button>
|
||||
<button id="cancel-btn" class="btn btn-secondary me-2" onclick="cancelEdit()" style="display: none;">
|
||||
<i class="fas fa-times me-2"></i>Abbrechen
|
||||
</button>
|
||||
|
||||
<a href="{% url 'stiftung:destinataer_list' %}" class="btn btn-outline-secondary">
|
||||
<i class="fas fa-arrow-left me-2"></i>Zurück zur Liste
|
||||
</a>
|
||||
@@ -29,178 +38,429 @@
|
||||
<div class="row">
|
||||
<!-- Main Content -->
|
||||
<div class="col-lg-8">
|
||||
<!-- Persönliche Informationen -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="fas fa-user me-2"></i>Persönliche Informationen
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p><strong>Vorname:</strong> {{ destinataer.vorname }}</p>
|
||||
<p><strong>Nachname:</strong> {{ destinataer.nachname }}</p>
|
||||
{% if destinataer.geburtsdatum %}
|
||||
<p><strong>Geburtsdatum:</strong> {{ destinataer.geburtsdatum|date:"d.m.Y" }}</p>
|
||||
{% endif %}
|
||||
<p><strong>Familienzweig:</strong>
|
||||
<span class="badge bg-info">{{ destinataer.get_familienzweig_display }}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<p><strong>Status:</strong>
|
||||
{% if destinataer.aktiv %}
|
||||
<span class="badge bg-success">Aktiv</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">Inaktiv</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
<p><strong>Berufsgruppe:</strong>
|
||||
<span class="badge bg-secondary">{{ destinataer.get_berufsgruppe_display }}</span>
|
||||
</p>
|
||||
<!-- Edit Form (invisible wrapper) -->
|
||||
<form id="edit-form" method="post" action="{% url 'stiftung:destinataer_update' pk=destinataer.pk %}" style="display: contents;">
|
||||
{% csrf_token %}
|
||||
|
||||
<!-- Persönliche Informationen -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="fas fa-user me-2"></i>Persönliche Informationen
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<!-- Vorname -->
|
||||
<p class="mb-3">
|
||||
<strong>Vorname:</strong>
|
||||
<span class="view-mode">{{ destinataer.vorname }}</span>
|
||||
<input type="text" name="vorname" value="{{ destinataer.vorname }}" class="form-control edit-mode" style="display: none;" required>
|
||||
</p>
|
||||
|
||||
<!-- Nachname -->
|
||||
<p class="mb-3">
|
||||
<strong>Nachname:</strong>
|
||||
<span class="view-mode">{{ destinataer.nachname }}</span>
|
||||
<input type="text" name="nachname" value="{{ destinataer.nachname }}" class="form-control edit-mode" style="display: none;" required>
|
||||
</p>
|
||||
|
||||
<!-- Geburtsdatum -->
|
||||
<p class="mb-3">
|
||||
<strong>Geburtsdatum:</strong>
|
||||
<span class="view-mode">
|
||||
{% if destinataer.geburtsdatum %}
|
||||
{{ destinataer.geburtsdatum|date:"d.m.Y" }}
|
||||
{% else %}
|
||||
<em class="text-muted">Nicht angegeben</em>
|
||||
{% endif %}
|
||||
</span>
|
||||
<input type="date" name="geburtsdatum" value="{% if destinataer.geburtsdatum %}{{ destinataer.geburtsdatum|date:'Y-m-d' }}{% endif %}" class="form-control edit-mode" style="display: none;">
|
||||
</p>
|
||||
|
||||
<!-- Familienzweig -->
|
||||
<p class="mb-3">
|
||||
<strong>Familienzweig:</strong>
|
||||
<span class="view-mode">
|
||||
<span class="badge bg-info">{{ destinataer.get_familienzweig_display }}</span>
|
||||
</span>
|
||||
<select name="familienzweig" class="form-select edit-mode" style="display: none;">
|
||||
<option value="">Bitte wählen...</option>
|
||||
<option value="hagemann" {% if destinataer.familienzweig == 'hagemann' %}selected{% endif %}>Hagemann</option>
|
||||
<option value="bechstein" {% if destinataer.familienzweig == 'bechstein' %}selected{% endif %}>Bechstein</option>
|
||||
<option value="other" {% if destinataer.familienzweig == 'other' %}selected{% endif %}>Sonstige</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<!-- Status -->
|
||||
<p class="mb-3">
|
||||
<strong>Status:</strong>
|
||||
<span class="view-mode">
|
||||
{% if destinataer.aktiv %}
|
||||
<span class="badge bg-success">Aktiv</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">Inaktiv</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
<div class="edit-mode" style="display: none;">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" name="aktiv" id="aktiv" class="form-check-input" {% if destinataer.aktiv %}checked{% endif %}>
|
||||
<label class="form-check-label" for="aktiv">Aktiv</label>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
|
||||
<!-- Berufsgruppe -->
|
||||
<p class="mb-3">
|
||||
<strong>Berufsgruppe:</strong>
|
||||
<span class="view-mode">
|
||||
<span class="badge bg-secondary">{{ destinataer.get_berufsgruppe_display }}</span>
|
||||
</span>
|
||||
<select name="berufsgruppe" class="form-select edit-mode" style="display: none;">
|
||||
<option value="">Bitte wählen...</option>
|
||||
<option value="student_studentin" {% if destinataer.berufsgruppe == 'student_studentin' %}selected{% endif %}>Student/Studentin</option>
|
||||
<option value="auszubildende" {% if destinataer.berufsgruppe == 'auszubildende' %}selected{% endif %}>Auszubildende/r</option>
|
||||
<option value="berufsanfaenger" {% if destinataer.berufsgruppe == 'berufsanfaenger' %}selected{% endif %}>Berufsanfänger/in</option>
|
||||
<option value="sonstige" {% if destinataer.berufsgruppe == 'sonstige' %}selected{% endif %}>Sonstige</option>
|
||||
</select>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Kontaktinformationen -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="fas fa-address-book me-2"></i>Kontaktinformationen
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
{% if destinataer.email %}
|
||||
<p><strong>E-Mail:</strong> <a href="mailto:{{ destinataer.email }}">{{ destinataer.email }}</a></p>
|
||||
{% endif %}
|
||||
{% if destinataer.telefon %}
|
||||
<p><strong>Telefon:</strong> {{ destinataer.telefon }}</p>
|
||||
{% endif %}
|
||||
<!-- Kontaktinformationen -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header bg-info text-white">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="fas fa-address-book me-2"></i>Kontaktinformationen
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<!-- E-Mail -->
|
||||
<p class="mb-3">
|
||||
<strong>E-Mail:</strong>
|
||||
<span class="view-mode">
|
||||
{% if destinataer.email %}
|
||||
<a href="mailto:{{ destinataer.email }}">{{ destinataer.email }}</a>
|
||||
{% else %}
|
||||
<em class="text-muted">Nicht angegeben</em>
|
||||
{% endif %}
|
||||
</span>
|
||||
<input type="email" name="email" value="{{ destinataer.email }}" class="form-control edit-mode" style="display: none;" placeholder="max@example.com">
|
||||
</p>
|
||||
|
||||
<!-- Telefon -->
|
||||
<p class="mb-3">
|
||||
<strong>Telefon:</strong>
|
||||
<span class="view-mode">
|
||||
{% if destinataer.telefon %}
|
||||
{{ destinataer.telefon }}
|
||||
{% else %}
|
||||
<em class="text-muted">Nicht angegeben</em>
|
||||
{% endif %}
|
||||
</span>
|
||||
<input type="tel" name="telefon" value="{{ destinataer.telefon }}" class="form-control edit-mode" style="display: none;" placeholder="+49 123 456789">
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<!-- IBAN -->
|
||||
<p class="mb-3">
|
||||
<strong>IBAN:</strong>
|
||||
<span class="view-mode">
|
||||
{% if destinataer.iban %}
|
||||
{{ destinataer.iban }}
|
||||
{% else %}
|
||||
<em class="text-muted">Nicht angegeben</em>
|
||||
{% endif %}
|
||||
</span>
|
||||
<input type="text" name="iban" value="{{ destinataer.iban }}" class="form-control edit-mode" style="display: none;" placeholder="DE89 3704 0044 0532 0130 00">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
{% if destinataer.iban %}
|
||||
<p><strong>IBAN:</strong> {{ destinataer.iban }}</p>
|
||||
{% endif %}
|
||||
|
||||
<!-- Adresse (full width) -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p class="mb-3">
|
||||
<strong>Adresse:</strong>
|
||||
<span class="view-mode">
|
||||
{% if destinataer.adresse %}
|
||||
<br>{{ destinataer.adresse|linebreaks }}
|
||||
{% else %}
|
||||
<em class="text-muted">Nicht angegeben</em>
|
||||
{% endif %}
|
||||
</span>
|
||||
<textarea name="adresse" class="form-control edit-mode" style="display: none;" rows="3" placeholder="Straße Nr. PLZ Ort">{{ destinataer.adresse }}</textarea>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if destinataer.strasse or destinataer.plz or destinataer.ort %}
|
||||
<p><strong>Adresse:</strong><br>
|
||||
{% if destinataer.strasse %}{{ destinataer.strasse }}{% endif %}
|
||||
{% if destinataer.plz or destinataer.ort %}<br>{% endif %}
|
||||
{% if destinataer.plz %}{{ destinataer.plz }}{% endif %}
|
||||
{% if destinataer.plz and destinataer.ort %} {% endif %}
|
||||
{% if destinataer.ort %}{{ destinataer.ort }}{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Berufliche Informationen -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header bg-success text-white">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="fas fa-briefcase me-2"></i>Berufliche Informationen
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<!-- Ausbildungsstand -->
|
||||
<p class="mb-3">
|
||||
<strong>Ausbildungsstand:</strong>
|
||||
<span class="view-mode">
|
||||
{% if destinataer.ausbildungsstand %}
|
||||
{{ destinataer.ausbildungsstand }}
|
||||
{% else %}
|
||||
<em class="text-muted">Nicht angegeben</em>
|
||||
{% endif %}
|
||||
</span>
|
||||
<input type="text" name="ausbildungsstand" value="{{ destinataer.ausbildungsstand }}" class="form-control edit-mode" style="display: none;" placeholder="z.B. Bachelor, Master, Ausbildung">
|
||||
</p>
|
||||
|
||||
<!-- Institution -->
|
||||
<p class="mb-3">
|
||||
<strong>Institution/Organisation:</strong>
|
||||
<span class="view-mode">
|
||||
{% if destinataer.institution %}
|
||||
{{ destinataer.institution }}
|
||||
{% else %}
|
||||
<em class="text-muted">Nicht angegeben</em>
|
||||
{% endif %}
|
||||
</span>
|
||||
<input type="text" name="institution" value="{{ destinataer.institution }}" class="form-control edit-mode" style="display: none;" placeholder="Universität, Unternehmen, etc.">
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<!-- Projektbeschreibung -->
|
||||
<p class="mb-3">
|
||||
<strong>Projektbeschreibung:</strong>
|
||||
<span class="view-mode">
|
||||
{% if destinataer.projekt_beschreibung %}
|
||||
<br>{{ destinataer.projekt_beschreibung|linebreaks }}
|
||||
{% else %}
|
||||
<em class="text-muted">Nicht angegeben</em>
|
||||
{% endif %}
|
||||
</span>
|
||||
<textarea name="projekt_beschreibung" class="form-control edit-mode" style="display: none;" rows="4" placeholder="Beschreibung des Studiums/Projekts">{{ destinataer.projekt_beschreibung }}</textarea>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Finanzielle Informationen -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header bg-warning text-dark">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="fas fa-euro-sign me-2"></i>Finanzielle Informationen
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<!-- Jährliches Einkommen -->
|
||||
<p class="mb-3">
|
||||
<strong>Jährliches Einkommen:</strong>
|
||||
<span class="view-mode">
|
||||
{% if destinataer.jaehrliches_einkommen %}
|
||||
<span class="text-primary fw-bold">€{{ destinataer.jaehrliches_einkommen|floatformat:2 }}</span>
|
||||
{% else %}
|
||||
<em class="text-muted">Nicht angegeben</em>
|
||||
{% endif %}
|
||||
</span>
|
||||
<input type="number" name="jaehrliches_einkommen" value="{{ destinataer.jaehrliches_einkommen }}" class="form-control edit-mode" style="display: none;" step="0.01" placeholder="0.00">
|
||||
</p>
|
||||
|
||||
<!-- Vermögen -->
|
||||
<p class="mb-3">
|
||||
<strong>Vermögen:</strong>
|
||||
<span class="view-mode">
|
||||
{% if destinataer.vermoegen %}
|
||||
€{{ destinataer.vermoegen|floatformat:2 }}
|
||||
{% else %}
|
||||
<em class="text-muted">Nicht angegeben</em>
|
||||
{% endif %}
|
||||
</span>
|
||||
<input type="number" name="vermoegen" value="{{ destinataer.vermoegen }}" class="form-control edit-mode" style="display: none;" step="0.01" placeholder="0.00">
|
||||
</p>
|
||||
|
||||
<!-- Haushaltsgröße -->
|
||||
<p class="mb-3">
|
||||
<strong>Haushaltsgröße:</strong>
|
||||
<span class="view-mode">
|
||||
{% if destinataer.haushaltsgroesse %}
|
||||
{{ destinataer.haushaltsgroesse }}
|
||||
{% else %}
|
||||
<em class="text-muted">Nicht angegeben</em>
|
||||
{% endif %}
|
||||
</span>
|
||||
<input type="number" name="haushaltsgroesse" value="{{ destinataer.haushaltsgroesse }}" class="form-control edit-mode" style="display: none;" min="1" placeholder="1">
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<!-- Finanzielle Notlage -->
|
||||
<p class="mb-3">
|
||||
<strong>Finanzielle Notlage:</strong>
|
||||
<span class="view-mode">
|
||||
{% if destinataer.finanzielle_notlage %}
|
||||
<span class="badge bg-danger">
|
||||
<i class="fas fa-exclamation-triangle me-1"></i>Ja
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="badge bg-success">
|
||||
<i class="fas fa-check me-1"></i>Nein
|
||||
</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
<div class="edit-mode" style="display: none;">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" name="finanzielle_notlage" id="finanzielle_notlage" class="form-check-input" {% if destinataer.finanzielle_notlage %}checked{% endif %}>
|
||||
<label class="form-check-label" for="finanzielle_notlage">Finanzielle Notlage</label>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
|
||||
<!-- Vierteljährlicher Betrag -->
|
||||
<p class="mb-3">
|
||||
<strong>Vierteljährlicher Betrag:</strong>
|
||||
<span class="view-mode">
|
||||
{% if destinataer.vierteljaehrlicher_betrag %}
|
||||
<span class="fw-bold">€{{ destinataer.vierteljaehrlicher_betrag|floatformat:2 }}</span>
|
||||
{% else %}
|
||||
<em class="text-muted">Nicht angegeben</em>
|
||||
{% endif %}
|
||||
</span>
|
||||
<input type="number" name="vierteljaehrlicher_betrag" value="{{ destinataer.vierteljaehrlicher_betrag }}" class="form-control edit-mode" style="display: none;" step="0.01" placeholder="0.00">
|
||||
</p>
|
||||
|
||||
<!-- Unterstützung bestätigt -->
|
||||
<p class="mb-3">
|
||||
<strong>Unterstützung bestätigt:</strong>
|
||||
<span class="view-mode">
|
||||
{% if destinataer.unterstuetzung_bestaetigt %}
|
||||
<span class="badge bg-success">Ja</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">Nein</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
<div class="edit-mode" style="display: none;">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" name="unterstuetzung_bestaetigt" id="unterstuetzung_bestaetigt" class="form-check-input" {% if destinataer.unterstuetzung_bestaetigt %}checked{% endif %}>
|
||||
<label class="form-check-label" for="unterstuetzung_bestaetigt">Unterstützung bestätigt</label>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
|
||||
<!-- Standardkonto -->
|
||||
<p class="mb-3">
|
||||
<strong>Standardkonto:</strong>
|
||||
<span class="view-mode">
|
||||
{% if destinataer.standard_konto %}
|
||||
{{ destinataer.standard_konto }}
|
||||
{% else %}
|
||||
<em class="text-muted">Nicht angegeben</em>
|
||||
{% endif %}
|
||||
</span>
|
||||
<input type="text" name="standard_konto" value="{{ destinataer.standard_konto }}" class="form-control edit-mode" style="display: none;" placeholder="Kontobezeichnung">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Studiennachweis / Voraussetzungen -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header bg-light">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="fas fa-graduation-cap me-2"></i>Studiennachweis & Voraussetzungen
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<!-- Ist Abkömmling -->
|
||||
<p class="mb-3">
|
||||
<strong>Abkömmling gem. Satzung:</strong>
|
||||
<span class="view-mode">
|
||||
{% if destinataer.ist_abkoemmling %}
|
||||
<span class="badge bg-success">Ja</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">Nein</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
<div class="edit-mode" style="display: none;">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" name="ist_abkoemmling" id="ist_abkoemmling" class="form-check-input" {% if destinataer.ist_abkoemmling %}checked{% endif %}>
|
||||
<label class="form-check-label" for="ist_abkoemmling">Ist Abkömmling</label>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
|
||||
<!-- Studiennachweis erforderlich -->
|
||||
<p class="mb-3">
|
||||
<strong>Studiennachweis erforderlich:</strong>
|
||||
<span class="view-mode">
|
||||
{% if destinataer.studiennachweis_erforderlich %}
|
||||
<span class="badge bg-info">Ja</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">Nein</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
<div class="edit-mode" style="display: none;">
|
||||
<div class="form-check">
|
||||
<input type="checkbox" name="studiennachweis_erforderlich" id="studiennachweis_erforderlich" class="form-check-input" {% if destinataer.studiennachweis_erforderlich %}checked{% endif %}>
|
||||
<label class="form-check-label" for="studiennachweis_erforderlich">Studiennachweis erforderlich</label>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<!-- Letzter Studiennachweis -->
|
||||
<p class="mb-3">
|
||||
<strong>Letzter Nachweis:</strong>
|
||||
<span class="view-mode">
|
||||
{% if destinataer.letzter_studiennachweis %}
|
||||
{{ destinataer.letzter_studiennachweis|date:"d.m.Y" }}
|
||||
{% else %}
|
||||
<em class="text-muted">Nicht angegeben</em>
|
||||
{% endif %}
|
||||
</span>
|
||||
<input type="date" name="letzter_studiennachweis" value="{% if destinataer.letzter_studiennachweis %}{{ destinataer.letzter_studiennachweis|date:'Y-m-d' }}{% endif %}" class="form-control edit-mode" style="display: none;">
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notes Section -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header bg-secondary text-white">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="fas fa-sticky-note me-2"></i>Notizen
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="mb-0">
|
||||
<span class="view-mode">
|
||||
{% if destinataer.notizen %}
|
||||
{{ destinataer.notizen|linebreaks }}
|
||||
{% else %}
|
||||
<em class="text-muted">Keine Notizen vorhanden</em>
|
||||
{% endif %}
|
||||
</span>
|
||||
<textarea name="notizen" class="form-control edit-mode" style="display: none;" rows="4" placeholder="Notizen und Bemerkungen">{{ destinataer.notizen }}</textarea>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Berufliche Informationen -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header bg-success text-white">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="fas fa-briefcase me-2"></i>Berufliche Informationen
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
{% if destinataer.ausbildungsstand %}
|
||||
<p><strong>Ausbildungsstand:</strong> {{ destinataer.ausbildungsstand }}</p>
|
||||
{% endif %}
|
||||
{% if destinataer.institution %}
|
||||
<p><strong>Institution/Organisation:</strong> {{ destinataer.institution }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
{% if destinataer.projekt_beschreibung %}
|
||||
<p><strong>Projektbeschreibung:</strong><br>{{ destinataer.projekt_beschreibung|linebreaks }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Finanzielle Informationen -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header bg-warning text-dark">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="fas fa-euro-sign me-2"></i>Finanzielle Informationen
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
{% if destinataer.jaehrliches_einkommen %}
|
||||
<p><strong>Jährliches Einkommen:</strong> <span class="text-primary fw-bold">€{{ destinataer.jaehrliches_einkommen|floatformat:2 }}</span></p>
|
||||
{% endif %}
|
||||
{% if destinataer.monatliche_bezuege %}
|
||||
<p><strong>Monatliche Bezüge:</strong> €{{ destinataer.monatliche_bezuege|floatformat:2 }}</p>
|
||||
{% endif %}
|
||||
{% if destinataer.vermoegen %}
|
||||
<p><strong>Vermögen:</strong> €{{ destinataer.vermoegen|floatformat:2 }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<p><strong>Finanzielle Notlage:</strong>
|
||||
{% if destinataer.finanzielle_notlage %}
|
||||
<span class="badge bg-danger">
|
||||
<i class="fas fa-exclamation-triangle me-1"></i>Ja
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="badge bg-success">
|
||||
<i class="fas fa-check me-1"></i>Nein
|
||||
</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
{% if destinataer.vierteljaehrlicher_betrag %}
|
||||
<p><strong>Vierteljährlicher Betrag:</strong> <span class="fw-bold">€{{ destinataer.vierteljaehrlicher_betrag|floatformat:2 }}</span></p>
|
||||
{% endif %}
|
||||
<p><strong>Unterstützung bestätigt:</strong>
|
||||
{% if destinataer.unterstuetzung_bestaetigt %}
|
||||
<span class="badge bg-success">Ja</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">Nein</span>
|
||||
{% endif %}
|
||||
</p>
|
||||
{% if destinataer.standard_konto %}
|
||||
<p><strong>Standardkonto:</strong> {{ destinataer.standard_konto }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Studiennachweis / Voraussetzungen -->
|
||||
<div class="card shadow mb-4">
|
||||
<div class="card-header bg-light">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="fas fa-graduation-cap me-2"></i>Studiennachweis & Voraussetzungen
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p><strong>Abkömmling gem. Satzung:</strong>
|
||||
{% if destinataer.ist_abkoemmling %}<span class="badge bg-success">Ja</span>{% else %}<span class="badge bg-secondary">Nein</span>{% endif %}
|
||||
</p>
|
||||
<p><strong>Haushaltsgröße:</strong> {{ destinataer.haushaltsgroesse }}</p>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<p><strong>Studiennachweis erforderlich:</strong>
|
||||
{% if destinataer.studiennachweis_erforderlich %}<span class="badge bg-info">Ja</span>{% else %}<span class="badge bg-secondary">Nein</span>{% endif %}
|
||||
</p>
|
||||
{% if destinataer.letzter_studiennachweis %}
|
||||
<p><strong>Letzter Nachweis:</strong> {{ destinataer.letzter_studiennachweis|date:"d.m.Y" }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Förderungen -->
|
||||
{% if foerderungen %}
|
||||
@@ -513,4 +773,200 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block javascript %}
|
||||
<style>
|
||||
.edit-mode input,
|
||||
.edit-mode textarea,
|
||||
.edit-mode select {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.edit-mode .form-check {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.edit-mode-active .view-mode {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.edit-mode-active .edit-mode {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.card-body p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.edit-notification {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 1050;
|
||||
max-width: 300px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
let originalFormData = {};
|
||||
let isEditMode = false;
|
||||
|
||||
// Store original form data when page loads
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
storeOriginalData();
|
||||
});
|
||||
|
||||
function storeOriginalData() {
|
||||
const form = document.getElementById('edit-form');
|
||||
const formData = new FormData(form);
|
||||
originalFormData = {};
|
||||
|
||||
// Store all form field values
|
||||
for (let [key, value] of formData.entries()) {
|
||||
originalFormData[key] = value;
|
||||
}
|
||||
|
||||
// Also store checkbox states
|
||||
const checkboxes = form.querySelectorAll('input[type="checkbox"]');
|
||||
checkboxes.forEach(checkbox => {
|
||||
originalFormData[checkbox.name] = checkbox.checked;
|
||||
});
|
||||
}
|
||||
|
||||
function enableEditMode() {
|
||||
isEditMode = true;
|
||||
|
||||
// Hide view elements and show edit elements
|
||||
document.body.classList.add('edit-mode-active');
|
||||
|
||||
// Toggle buttons
|
||||
document.getElementById('edit-btn').style.display = 'none';
|
||||
document.getElementById('save-btn').style.display = 'inline-block';
|
||||
document.getElementById('cancel-btn').style.display = 'inline-block';
|
||||
|
||||
// Show notification
|
||||
showNotification('Bearbeitungsmodus aktiviert', 'info');
|
||||
|
||||
// Focus first input
|
||||
const firstInput = document.querySelector('.edit-mode input, .edit-mode textarea, .edit-mode select');
|
||||
if (firstInput) {
|
||||
firstInput.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
// Restore original values
|
||||
const form = document.getElementById('edit-form');
|
||||
|
||||
// Restore text inputs, textareas, and selects
|
||||
Object.keys(originalFormData).forEach(key => {
|
||||
const element = form.querySelector(`[name="${key}"]`);
|
||||
if (element) {
|
||||
if (element.type === 'checkbox') {
|
||||
element.checked = originalFormData[key];
|
||||
} else {
|
||||
element.value = originalFormData[key] || '';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
disableEditMode();
|
||||
showNotification('Änderungen verworfen', 'warning');
|
||||
}
|
||||
|
||||
function disableEditMode() {
|
||||
isEditMode = false;
|
||||
|
||||
// Show view elements and hide edit elements
|
||||
document.body.classList.remove('edit-mode-active');
|
||||
|
||||
// Toggle buttons
|
||||
document.getElementById('edit-btn').style.display = 'inline-block';
|
||||
document.getElementById('save-btn').style.display = 'none';
|
||||
document.getElementById('cancel-btn').style.display = 'none';
|
||||
}
|
||||
|
||||
function saveChanges() {
|
||||
const form = document.getElementById('edit-form');
|
||||
const formData = new FormData(form);
|
||||
|
||||
// Show loading state
|
||||
const saveBtn = document.getElementById('save-btn');
|
||||
const originalText = saveBtn.innerHTML;
|
||||
saveBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Speichern...';
|
||||
saveBtn.disabled = true;
|
||||
|
||||
// Submit form via AJAX
|
||||
fetch(form.action, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
}
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
// Update the page with new data
|
||||
location.reload(); // Simple approach - reload the page to show updated data
|
||||
} else {
|
||||
// Show errors
|
||||
showNotification('Fehler beim Speichern: ' + (data.error || 'Unbekannter Fehler'), 'danger');
|
||||
|
||||
// Reset button
|
||||
saveBtn.innerHTML = originalText;
|
||||
saveBtn.disabled = false;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
showNotification('Fehler beim Speichern der Änderungen', 'danger');
|
||||
|
||||
// Reset button
|
||||
saveBtn.innerHTML = originalText;
|
||||
saveBtn.disabled = false;
|
||||
});
|
||||
}
|
||||
|
||||
function showNotification(message, type = 'info') {
|
||||
// Remove existing notifications
|
||||
const existing = document.querySelector('.edit-notification');
|
||||
if (existing) {
|
||||
existing.remove();
|
||||
}
|
||||
|
||||
// Create notification
|
||||
const notification = document.createElement('div');
|
||||
notification.className = `alert alert-${type} alert-dismissible fade show edit-notification`;
|
||||
notification.innerHTML = `
|
||||
${message}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
||||
`;
|
||||
|
||||
document.body.appendChild(notification);
|
||||
|
||||
// Auto-remove after 3 seconds
|
||||
setTimeout(() => {
|
||||
if (notification.parentNode) {
|
||||
notification.remove();
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (isEditMode) {
|
||||
// ESC to cancel
|
||||
if (e.key === 'Escape') {
|
||||
cancelEdit();
|
||||
}
|
||||
// Ctrl+S to save (prevent default browser save)
|
||||
if (e.ctrlKey && e.key === 's') {
|
||||
e.preventDefault();
|
||||
saveChanges();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user