Fix payment system balance integration and add calendar functionality

- Implement automated payment tracking with Django signals
- Fix duplicate transaction creation with unique referenz system
- Add calendar system with CRUD operations and event management
- Reorganize navigation menu (rename sections, move admin functions)
- Replace Geschichte editor with EasyMDE markdown editor
- Add management commands for balance reconciliation
- Create missing transactions for previously paid payments
- Ensure account balances accurately reflect all payment activity

Features added:
- Calendar entries creation and administration via menu
- Payment status tracking with automatic balance updates
- Duplicate prevention for payment transactions
- Markdown editor with live preview for Geschichte pages
- Database reconciliation tools for payment/balance sync

Bug fixes:
- Resolved IntegrityError on payment status changes
- Fixed missing account balance updates for paid payments
- Prevented duplicate balance deductions on re-saves
- Corrected menu structure and admin function placement
This commit is contained in:
2025-10-05 00:38:18 +02:00
parent 2961f376c3
commit c289cc3c58
36 changed files with 4039 additions and 99 deletions

View File

@@ -24,7 +24,7 @@
</div>
<div class="card-body">
<p class="text-muted mb-4">
Generieren Sie detaillierte Jahresberichte mit allen wichtigen Informationen zu Personen,
Generieren Sie detaillierte Jahresberichte mit allen wichtigen Informationen zu Destinatären,
Förderungen und Ländereien.
</p>
@@ -83,8 +83,8 @@
<div class="card bg-primary text-white">
<div class="card-body text-center">
<i class="fas fa-users fa-2x mb-2"></i>
<h5 class="card-title">Personen</h5>
<h3 class="card-text">{{ total_persons|default:"0" }}</h3>
<h5 class="card-title">Destinatäre</h5>
<h3 class="card-text">{{ total_destinataere|default:"0" }}</h3>
</div>
</div>
</div>
@@ -129,8 +129,8 @@
<div class="mt-4">
<h6 class="text-primary">Schnellzugriff:</h6>
<div class="d-grid gap-2">
<a href="{% url 'stiftung:person_list' %}" class="btn btn-outline-primary">
<i class="fas fa-users me-2"></i>Alle Personen anzeigen
<a href="{% url 'stiftung:destinataer_list' %}" class="btn btn-outline-primary">
<i class="fas fa-users me-2"></i>Alle Destinatäre anzeigen
</a>
<a href="{% url 'stiftung:foerderung_list' %}" class="btn btn-outline-success">
<i class="fas fa-gift me-2"></i>Alle Förderungen anzeigen

View File

@@ -0,0 +1,66 @@
{% extends 'base.html' %}
{% load help_tags %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'stiftung:dashboard' %}">Dashboard</a></li>
<li class="breadcrumb-item"><a href="{% url 'stiftung:geschichte_list' %}">Geschichte</a></li>
<li class="breadcrumb-item"><a href="{{ seite.get_absolute_url }}">{{ seite.titel }}</a></li>
<li class="breadcrumb-item active" aria-current="page">Bild löschen</li>
</ol>
</nav>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card shadow">
<div class="card-header bg-danger text-white">
<h5 class="mb-0">
<i class="fas fa-trash me-2"></i>{{ title }}
</h5>
</div>
<div class="card-body">
<div class="alert alert-warning">
<i class="fas fa-exclamation-triangle me-2"></i>
<strong>Achtung!</strong> Dieser Vorgang kann nicht rückgängig gemacht werden.
</div>
<div class="row">
<div class="col-md-4">
<img src="{{ bild.bild.url }}" alt="{{ bild.alt_text }}" class="img-fluid rounded">
</div>
<div class="col-md-8">
<h6>Bild-Details:</h6>
<ul class="list-unstyled">
<li><strong>Titel:</strong> {{ bild.titel }}</li>
<li><strong>Beschreibung:</strong> {{ bild.beschreibung|default:"Keine Beschreibung" }}</li>
<li><strong>Hochgeladen:</strong> {{ bild.hochgeladen_am|date:"d.m.Y H:i" }}</li>
{% if bild.hochgeladen_von %}
<li><strong>Hochgeladen von:</strong> {{ bild.hochgeladen_von.get_full_name|default:bild.hochgeladen_von.username }}</li>
{% endif %}
</ul>
</div>
</div>
<hr>
<p>Möchten Sie dieses Bild wirklich löschen?</p>
<form method="post">
{% csrf_token %}
<div class="d-flex justify-content-between">
<a href="{{ seite.get_absolute_url }}" class="btn btn-secondary">
<i class="fas fa-arrow-left me-1"></i>Abbrechen
</a>
<button type="submit" class="btn btn-danger">
<i class="fas fa-trash me-1"></i>Endgültig löschen
</button>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}

View File

@@ -67,7 +67,7 @@
</div>
<div class="card-body">
<div class="geschichte-content">
{{ seite.inhalt|linebreaks }}
{{ seite.inhalt|markdown_to_html }}
</div>
{% if bilder %}
@@ -75,13 +75,22 @@
<h4><i class="fas fa-images me-2"></i>Bildergalerie</h4>
{% for bild in bilder %}
<div class="geschichte-bild">
<img src="{{ bild.bild.url }}" alt="{{ bild.alt_text|default:bild.titel }}" class="img-fluid">
<div class="bild-beschreibung">
<strong>{{ bild.titel }}</strong>
{% if bild.beschreibung %}
<br>{{ bild.beschreibung }}
<div class="d-flex justify-content-between align-items-start mb-2">
<h6 class="mb-0">{{ bild.titel }}</h6>
{% if perms.stiftung.delete_geschichtebild %}
<a href="{% url 'stiftung:geschichte_bild_delete' slug=seite.slug bild_id=bild.id %}"
class="btn btn-outline-danger btn-sm"
title="Bild löschen">
<i class="fas fa-trash"></i>
</a>
{% endif %}
</div>
<img src="{{ bild.bild.url }}" alt="{{ bild.alt_text|default:bild.titel }}" class="img-fluid">
{% if bild.beschreibung %}
<div class="bild-beschreibung mt-2">
{{ bild.beschreibung }}
</div>
{% endif %}
</div>
{% endfor %}
</div>

View File

@@ -4,19 +4,37 @@
{% block title %}{{ title }}{% endblock %}
{% block extra_css %}
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde@2.18.0/dist/easymde.min.css">
<style>
.ql-editor {
.EasyMDEContainer {
margin-bottom: 1rem;
}
.EasyMDEContainer .editor-toolbar {
border-color: #dee2e6;
background: #f8f9fa;
}
.EasyMDEContainer .CodeMirror {
border-color: #dee2e6;
font-family: inherit;
font-size: 1rem;
min-height: 300px;
}
.ql-toolbar {
border-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
}
.ql-container {
border-bottom-left-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
.EasyMDEContainer .editor-preview,
.EasyMDEContainer .editor-preview-side {
font-family: inherit;
font-size: 1rem;
line-height: 1.5;
}
.editor-help {
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 0.375rem;
padding: 1rem;
margin-top: 0.5rem;
}
</style>
{% endblock %}
@@ -75,13 +93,37 @@
</div>
<div class="mb-3">
<label class="form-label">{{ form.inhalt.label }}</label>
<div id="quill-editor" style="height: 400px;"></div>
<textarea name="inhalt" id="id_inhalt" style="display: none;">{{ form.inhalt.value|default:"" }}</textarea>
<label class="form-label" for="{{ form.inhalt.id_for_label }}">{{ form.inhalt.label }}</label>
<!-- Markdown Editor -->
{{ form.inhalt }}
{% if form.inhalt.errors %}
<div class="text-danger">{{ form.inhalt.errors }}</div>
{% endif %}
<div class="form-text">{{ form.inhalt.help_text }}</div>
<div class="editor-help mt-2">
<h6><i class="fas fa-info-circle me-1"></i>Markdown-Hilfe</h6>
<div class="row">
<div class="col-md-6">
<small>
<strong>Formatierung:</strong><br>
<code>**Fett**</code><strong>Fett</strong><br>
<code>*Kursiv*</code><em>Kursiv</em><br>
<code>~~Durchgestrichen~~</code><del>Durchgestrichen</del>
</small>
</div>
<div class="col-md-6">
<small>
<strong>Überschriften:</strong><br>
<code># Überschrift 1</code><br>
<code>## Überschrift 2</code><br>
<code>### Überschrift 3</code>
</small>
</div>
</div>
</div>
</div>
<div class="mb-3 form-check">
@@ -110,18 +152,26 @@
<div class="col-lg-4">
<div class="card">
<div class="card-header bg-info text-white">
<h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>Rich Text Editor</h6>
<h6 class="mb-0"><i class="fas fa-markdown me-2"></i>Markdown Editor</h6>
</div>
<div class="card-body">
<p class="small">Der Editor unterstützt:</p>
<p class="small">Der Markdown-Editor unterstützt:</p>
<ul class="small">
<li>Formatierung (Fett, Kursiv, Unterstrichen)</li>
<li>Überschriften (H1, H2, H3)</li>
<li>Listen (nummeriert und Aufzählungen)</li>
<li>Links</li>
<li>Bilder (über separaten Upload)</li>
<li>Live-Vorschau beim Schreiben</li>
<li>Toolbar für häufige Formatierungen</li>
<li>Vollbild-Modus für fokussiertes Schreiben</li>
<li>Automatisches Speichern im Browser</li>
</ul>
<hr>
<h6 class="small">Häufige Markdown-Syntax:</h6>
<div class="small">
<code>- Listen-Element</code><br>
<code>1. Nummerierte Liste</code><br>
<code>[Link Text](URL)</code><br>
<code>&gt; Zitat</code><br>
<code>`Code`</code>
</div>
<hr>
<p class="small text-muted">
Tipp: Verwenden Sie die Bild-Upload-Funktion, um Bilder zur Seite hinzuzufügen.
</p>
@@ -132,46 +182,88 @@
{% endblock %}
{% block extra_js %}
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/easymde@2.18.0/dist/easymde.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize Quill editor
var quill = new Quill('#quill-editor', {
theme: 'snow',
modules: {
console.log('Initializing EasyMDE markdown editor...');
var textarea = document.getElementById('id_inhalt');
if (textarea) {
var easyMDE = new EasyMDE({
element: textarea,
autofocus: false,
autosave: {
enabled: true,
delay: 1000,
uniqueId: 'geschichte_' + (window.location.pathname.match(/\/(\w+)\//) || ['', 'new'])[1]
},
spellChecker: false,
toolbar: [
[{ 'header': [1, 2, 3, false] }],
['bold', 'italic', 'underline', 'strike'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'color': [] }, { 'background': [] }],
['link'],
['clean']
]
},
placeholder: 'Schreiben Sie hier den Inhalt der Geschichtsseite...'
});
// Load existing content
var existingContent = document.getElementById('id_inhalt').value;
if (existingContent) {
quill.root.innerHTML = existingContent;
'bold', 'italic', 'strikethrough', '|',
'heading-1', 'heading-2', 'heading-3', '|',
'unordered-list', 'ordered-list', '|',
'link', 'quote', 'code', '|',
'preview', 'side-by-side', 'fullscreen', '|',
'guide'
],
placeholder: 'Schreiben Sie hier den Inhalt der Geschichtsseite...\n\nSie können Markdown verwenden für:\n- **Fettdruck**\n- *Kursiv*\n- # Überschriften\n- [Links](URL)\n- Listen und vieles mehr',
renderingConfig: {
singleLineBreaks: false,
codeSyntaxHighlighting: false
},
previewRender: function(plainText) {
// Simple markdown to HTML conversion for preview
return plainText
.replace(/^### (.*$)/gim, '<h3>$1</h3>')
.replace(/^## (.*$)/gim, '<h2>$1</h2>')
.replace(/^# (.*$)/gim, '<h1>$1</h1>')
.replace(/^\> (.*$)/gim, '<blockquote>$1</blockquote>')
.replace(/\*\*(.*)\*\*/gim, '<strong>$1</strong>')
.replace(/\*(.*)\*/gim, '<em>$1</em>')
.replace(/~~(.*)~~/gim, '<del>$1</del>')
.replace(/`([^`]*)`/gim, '<code>$1</code>')
.replace(/\[([^\]]*)\]\(([^)]*)\)/gim, '<a href="$2">$1</a>')
.replace(/^\* (.*$)/gim, '<li>$1</li>')
.replace(/^\d+\. (.*$)/gim, '<li>$1</li>')
.replace(/\n/gim, '<br>');
},
status: ['autosave', 'lines', 'words', 'cursor'],
insertTexts: {
horizontalRule: ["", "\n\n-----\n\n"],
image: ["![", "](http://)"],
link: ["[", "](http://)"],
table: ["", "\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |\n\n"],
}
});
console.log('EasyMDE initialized successfully');
// Auto-generate slug from title
var titleField = document.querySelector('input[name="titel"]');
var slugField = document.querySelector('input[name="slug"]');
if (titleField && slugField) {
titleField.addEventListener('input', function() {
// Only auto-generate if slug is empty or matches previous title
if (!slugField.value || slugField.getAttribute('data-auto-generated') === 'true') {
var title = this.value;
var slug = title.toLowerCase()
.replace(/ä/g, 'ae').replace(/ö/g, 'oe').replace(/ü/g, 'ue').replace(/ß/g, 'ss')
.replace(/[^\w\s-]/g, '')
.replace(/[-\s]+/g, '-')
.replace(/^-+|-+$/g, '');
slugField.value = slug;
slugField.setAttribute('data-auto-generated', 'true');
}
});
// Mark slug as manually edited if user changes it
slugField.addEventListener('input', function() {
slugField.setAttribute('data-auto-generated', 'false');
});
}
}
// Auto-generate slug from title
document.getElementById('{{ form.titel.id_for_label }}').addEventListener('input', function() {
var title = this.value;
var slug = title.toLowerCase()
.replace(/ä/g, 'ae').replace(/ö/g, 'oe').replace(/ü/g, 'ue').replace(/ß/g, 'ss')
.replace(/[^\w\s-]/g, '')
.replace(/[-\s]+/g, '-')
.trim();
document.getElementById('{{ form.slug.id_for_label }}').value = slug;
});
// Update textarea on form submit
document.getElementById('geschichteForm').addEventListener('submit', function() {
document.getElementById('id_inhalt').value = quill.root.innerHTML;
});
});
</script>
{% endblock %}

View File

@@ -8,6 +8,18 @@
<div class="col-12">
<div class="card shadow">
<div class="card-body text-center py-5">
<!-- Logo Placeholder -->
<div class="mb-4">
<div class="logo-placeholder mx-auto mb-3" style="width: 150px; height: 150px; border: 3px dashed #dee2e6; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
<div class="text-center text-muted">
<i class="fas fa-image fa-2x mb-2"></i>
<div style="font-size: 0.8rem;">Logo hier<br>einfügen</div>
</div>
</div>
<!-- Alternative: Replace above div with actual logo when available -->
<!-- <img src="{% load static %}{% static 'images/stiftung-logo.png' %}" alt="Stiftung Logo" class="img-fluid mb-3" style="max-height: 150px;"> -->
</div>
<h1 class="display-4 mb-4">
<i class="fas fa-landmark text-primary me-3"></i>van Hees-Theyssen-Vogel'sche Stiftung
</h1>
@@ -40,10 +52,10 @@
<div class="col-md-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body text-center p-4">
<i class="fas fa-gift fa-3x text-success mb-3"></i>
<h5 class="card-title">💰 Förderungsverwaltung</h5>
<p class="card-text">Erfassen und verfolgen Sie Förderungen, Beträge und Verwendungsnachweise systematisch.</p>
<a href="{% url 'stiftung:foerderung_list' %}" class="btn btn-outline-success btn-sm mt-2">
<i class="fas fa-hand-holding-usd fa-3x text-success mb-3"></i>
<h5 class="card-title">💰 Unterstützungsverwaltung</h5>
<p class="card-text">Erfassen und verfolgen Sie Unterstützungen, Beträge und Verwendungsnachweise systematisch.</p>
<a href="{% url 'stiftung:unterstuetzungen_all' %}" class="btn btn-outline-success btn-sm mt-2">
<i class="fas fa-external-link-alt me-1"></i>Öffnen
</a>
</div>
@@ -64,6 +76,109 @@
</div>
</div>
<!-- Calendar and Events Section -->
<div class="row g-4 mb-5">
<div class="col-lg-8">
<div class="card h-100 border-0 shadow-sm">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">
<i class="fas fa-calendar-alt me-2"></i>Anstehende Termine & Ereignisse
</h5>
</div>
<div class="card-body">
{% if overdue_events %}
<div class="alert alert-danger" role="alert">
<h6><i class="fas fa-exclamation-triangle me-2"></i>Überfällige Termine ({{ overdue_events|length }})</h6>
{% for event in overdue_events %}
<div class="d-flex justify-content-between align-items-center border-bottom py-2">
<div>
<i class="{{ event.icon }} me-2"></i>
<strong>{{ event.title }}</strong>
<small class="text-muted d-block">{{ event.description }}</small>
</div>
<span class="badge bg-danger">{{ event.date }}</span>
</div>
{% endfor %}
</div>
{% endif %}
{% if upcoming_events %}
<h6 class="text-muted mb-3">Nächste {{ upcoming_events|length }} Termine</h6>
{% for event in upcoming_events %}
<div class="d-flex justify-content-between align-items-center border-bottom py-2">
<div class="flex-grow-1">
<i class="{{ event.icon }} me-2 text-{{ event.color }}"></i>
<strong>{{ event.title }}</strong>
{% if event.description %}
<small class="text-muted d-block">{{ event.description }}</small>
{% endif %}
</div>
<div class="text-end">
<span class="badge bg-{{ event.color }}">{{ event.date }}</span>
{% if event.time %}
<small class="d-block text-muted">{{ event.time }}</small>
{% endif %}
</div>
</div>
{% empty %}
<div class="text-center py-4 text-muted">
<i class="fas fa-calendar-check fa-3x mb-3"></i>
<p>Keine anstehenden Termine in den nächsten 14 Tagen.</p>
</div>
{% endfor %}
<div class="text-center mt-3">
<a href="{% url 'stiftung:kalender' %}" class="btn btn-outline-primary btn-sm">
<i class="fas fa-calendar me-1"></i>Vollständigen Kalender anzeigen
</a>
</div>
{% endif %}
</div>
</div>
</div>
<div class="col-lg-4">
<!-- Mini Calendar -->
<div class="card border-0 shadow-sm mb-3">
<div class="card-header bg-info text-white">
<h6 class="mb-0">
<i class="fas fa-calendar me-2"></i>{{ today|date:"F Y" }}
</h6>
</div>
<div class="card-body p-2">
<div class="mini-calendar">
<!-- Calendar will be generated by JavaScript -->
<div id="mini-calendar" data-events="{{ current_month_events|length }}">
<!-- Mini calendar grid will be inserted here -->
</div>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="card border-0 shadow-sm">
<div class="card-header bg-success text-white">
<h6 class="mb-0">
<i class="fas fa-plus me-2"></i>Schnellzugriff
</h6>
</div>
<div class="card-body">
<div class="d-grid gap-2">
<a href="{% url 'stiftung:kalender_create' %}" class="btn btn-outline-primary btn-sm">
<i class="fas fa-calendar-plus me-1"></i>Termin hinzufügen
</a>
<a href="{% url 'stiftung:unterstuetzung_create' %}" class="btn btn-outline-success btn-sm">
<i class="fas fa-euro-sign me-1"></i>Zahlung planen
</a>
<a href="{% url 'stiftung:destinataer_create' %}" class="btn btn-outline-info btn-sm">
<i class="fas fa-user-plus me-1"></i>Destinatär anlegen
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row g-4 mb-5">
<div class="col-md-4">
<div class="card h-100 border-0 shadow-sm">
@@ -97,7 +212,7 @@
<i class="fas fa-handshake fa-3x text-secondary mb-3"></i>
<h5 class="card-title">🤝 Verpachtungsverwaltung</h5>
<p class="card-text">Organisieren Sie Pachtverträge und deren Verwaltung effizient.</p>
<a href="{% url 'stiftung:land_list' %}" class="btn btn-outline-secondary btn-sm mt-2">
<a href="{% url 'stiftung:verpachtung_list' %}" class="btn btn-outline-secondary btn-sm mt-2">
<i class="fas fa-external-link-alt me-1"></i>Öffnen
</a>
</div>
@@ -176,4 +291,165 @@
</div>
</div>
{% endblock %}
{% block extra_css %}
<style>
.mini-calendar {
font-size: 0.8rem;
}
.mini-calendar .calendar-day {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 1px;
border-radius: 4px;
cursor: pointer;
}
.mini-calendar .calendar-day.today {
background-color: var(--bs-primary);
color: white;
font-weight: bold;
}
.mini-calendar .calendar-day.has-events {
background-color: var(--bs-success);
color: white;
}
.mini-calendar .calendar-day:hover {
background-color: var(--bs-light);
}
.mini-calendar .calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.mini-calendar .calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
text-align: center;
}
.mini-calendar .calendar-weekday {
font-weight: bold;
color: var(--bs-secondary);
padding: 4px;
font-size: 0.7rem;
}
</style>
{% endblock %}
{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
// Generate mini calendar for current month
const today = new Date();
const currentMonth = today.getMonth();
const currentYear = today.getFullYear();
function generateMiniCalendar(year, month) {
const firstDay = new Date(year, month, 1);
const lastDay = new Date(year, month + 1, 0);
const startDate = new Date(firstDay);
startDate.setDate(startDate.getDate() - firstDay.getDay()); // Start from Sunday
const calendarEl = document.getElementById('mini-calendar');
let html = '<div class="calendar-grid">';
// Weekday headers
const weekdays = ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'];
weekdays.forEach(day => {
html += `<div class="calendar-weekday">${day}</div>`;
});
// Generate calendar days
const currentDate = new Date(startDate);
for (let i = 0; i < 42; i++) { // 6 weeks
const isCurrentMonth = currentDate.getMonth() === month;
const isToday = currentDate.toDateString() === today.toDateString();
let classes = ['calendar-day'];
if (isToday) classes.push('today');
if (!isCurrentMonth) classes.push('text-muted');
html += `<div class="${classes.join(' ')}">${currentDate.getDate()}</div>`;
currentDate.setDate(currentDate.getDate() + 1);
if (currentDate > lastDay && currentDate.getDay() === 0) {
break; // Stop at end of month on Sunday
}
}
html += '</div>';
calendarEl.innerHTML = html;
}
// Generate the current month calendar
generateMiniCalendar(currentYear, currentMonth);
});
</script>
<style>
/* Mini Calendar Styles */
.mini-calendar .calendar-day {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
border-radius: 3px;
cursor: pointer;
transition: background-color 0.2s;
}
.mini-calendar .calendar-day:hover {
background-color: var(--bs-primary-bg-subtle);
}
.mini-calendar .calendar-day.today {
background-color: var(--bs-primary);
color: white;
font-weight: bold;
}
.mini-calendar .calendar-header {
font-weight: 600;
color: var(--bs-secondary);
font-size: 0.75rem;
}
/* Calendar event indicators */
.calendar-events-indicator {
position: absolute;
bottom: 2px;
right: 2px;
width: 6px;
height: 6px;
background-color: var(--bs-warning);
border-radius: 50%;
}
/* Overdue events styling */
.alert-danger .border-bottom:last-child {
border-bottom: none !important;
}
/* Calendar card hover effects */
.card.border-left-primary { border-left-color: var(--bs-primary) !important; }
.card.border-left-success { border-left-color: var(--bs-success) !important; }
.card.border-left-warning { border-left-color: var(--bs-warning) !important; }
.card.border-left-danger { border-left-color: var(--bs-danger) !important; }
.card.border-left-info { border-left-color: var(--bs-info) !important; }
</style>
{% endblock %}

View File

@@ -0,0 +1,346 @@
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div class="container-fluid">
<!-- Header -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">
<i class="fas fa-cogs me-2"></i>{{ title }}
</h1>
<div class="d-flex gap-2">
<a href="{% url 'stiftung:kalender' %}" class="btn btn-secondary">
<i class="fas fa-arrow-left me-1"></i>Zurück zum Kalender
</a>
<a href="{% url 'stiftung:kalender_create' %}" class="btn btn-success">
<i class="fas fa-plus me-1"></i>Neuer Termin
</a>
</div>
</div>
<!-- Statistics Cards -->
<div class="row mb-4">
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-primary shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
Benutzerdefinierte Termine
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.custom_count }}</div>
</div>
<div class="col-auto">
<i class="fas fa-calendar fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-success shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">
Zahlungsereignisse
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.payment_events }}</div>
</div>
<div class="col-auto">
<i class="fas fa-euro-sign fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-info shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">
Pachtverträge
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.lease_events }}</div>
</div>
<div class="col-auto">
<i class="fas fa-handshake fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card border-left-warning shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
Geburtstage
</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ stats.birthday_events }}</div>
</div>
<div class="col-auto">
<i class="fas fa-birthday-cake fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Filter Controls -->
<div class="row">
<div class="col-12">
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">
<i class="fas fa-filter me-2"></i>Ereignisquellen & Filter
</h6>
</div>
<div class="card-body">
<form method="get" class="row g-3">
<!-- Event Source Toggles -->
<div class="col-12">
<label class="form-label fw-bold">Ereignisquellen anzeigen:</label>
<div class="row">
<div class="col-md-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="show_custom"
name="show_custom" value="true"
{% if show_custom %}checked{% endif %}
onchange="this.form.submit()">
<label class="form-check-label" for="show_custom">
<i class="fas fa-calendar text-primary me-1"></i>Benutzerdefinierte Termine
</label>
</div>
</div>
<div class="col-md-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="show_payments"
name="show_payments" value="true"
{% if show_payments %}checked{% endif %}
onchange="this.form.submit()">
<label class="form-check-label" for="show_payments">
<i class="fas fa-euro-sign text-success me-1"></i>Zahlungserinnerungen
</label>
</div>
</div>
<div class="col-md-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="show_leases"
name="show_leases" value="true"
{% if show_leases %}checked{% endif %}
onchange="this.form.submit()">
<label class="form-check-label" for="show_leases">
<i class="fas fa-handshake text-info me-1"></i>Pachtverträge
</label>
</div>
</div>
<div class="col-md-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="show_birthdays"
name="show_birthdays" value="true"
{% if show_birthdays %}checked{% endif %}
onchange="this.form.submit()">
<label class="form-check-label" for="show_birthdays">
<i class="fas fa-birthday-cake text-warning me-1"></i>Geburtstage
</label>
</div>
</div>
</div>
</div>
<!-- Additional Filters -->
<div class="col-md-4">
<label for="category" class="form-label">Kategorie:</label>
<select class="form-control" id="category" name="category" onchange="this.form.submit()">
<option value="">Alle Kategorien</option>
{% for value, display in categories %}
<option value="{{ value }}" {% if category_filter == value %}selected{% endif %}>
{{ display }}
</option>
{% endfor %}
</select>
</div>
<div class="col-md-4">
<label for="priority" class="form-label">Priorität:</label>
<select class="form-control" id="priority" name="priority" onchange="this.form.submit()">
<option value="">Alle Prioritäten</option>
{% for value, display in priorities %}
<option value="{{ value }}" {% if priority_filter == value %}selected{% endif %}>
{{ display }}
</option>
{% endfor %}
</select>
</div>
<div class="col-md-4">
<label class="form-label">&nbsp;</label>
<div>
<button type="submit" class="btn btn-primary">
<i class="fas fa-search me-1"></i>Filter anwenden
</button>
<a href="{% url 'stiftung:kalender_admin' %}" class="btn btn-outline-secondary">
<i class="fas fa-undo me-1"></i>Zurücksetzen
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Events Table -->
<div class="row">
<div class="col-12">
<div class="card shadow">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">
<i class="fas fa-list me-2"></i>Ereignisse ({{ stats.total_events }} Einträge)
</h6>
</div>
<div class="card-body">
{% if events %}
<div class="table-responsive">
<table class="table table-bordered" id="eventsTable">
<thead>
<tr>
<th>Datum</th>
<th>Titel</th>
<th>Kategorie</th>
<th>Priorität</th>
<th>Quelle</th>
<th>Status</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody>
{% for event in events %}
<tr>
<td>
<strong>{{ event.date|date:"d.m.Y" }}</strong>
{% if event.time %}
<br><small class="text-muted">{{ event.time|time:"H:i" }}</small>
{% endif %}
</td>
<td>
<i class="{{ event.icon }} me-2"></i>{{ event.title }}
{% if event.description %}
<br><small class="text-muted">{{ event.description|truncatechars:50 }}</small>
{% endif %}
</td>
<td>
<span class="badge bg-secondary">{{ event.category_display }}</span>
</td>
<td>
<span class="badge bg-{% if event.priority == 'hoch' %}danger{% elif event.priority == 'mittel' %}warning{% else %}secondary{% endif %}">
{% if event.priority == 'hoch' %}
<i class="fas fa-exclamation-triangle me-1"></i>
{% elif event.priority == 'mittel' %}
<i class="fas fa-exclamation-circle me-1"></i>
{% else %}
<i class="fas fa-info-circle me-1"></i>
{% endif %}
{{ event.priority_display|default:"Normal" }}
</span>
</td>
<td>
{% if event.source == 'custom' %}
<span class="badge bg-primary">Benutzerdefiniert</span>
{% elif event.source == 'payment' %}
<span class="badge bg-success">Zahlung</span>
{% elif event.source == 'lease' %}
<span class="badge bg-info">Pacht</span>
{% elif event.source == 'birthday' %}
<span class="badge bg-warning">Geburtstag</span>
{% else %}
<span class="badge bg-secondary">System</span>
{% endif %}
</td>
<td>
{% if event.source == 'custom' %}
{% if event.completed %}
<span class="badge bg-success">
<i class="fas fa-check me-1"></i>Erledigt
</span>
{% else %}
<span class="badge bg-warning">
<i class="fas fa-clock me-1"></i>Ausstehend
</span>
{% endif %}
{% else %}
<span class="badge bg-light text-dark">
<i class="fas fa-robot me-1"></i>Automatisch
</span>
{% endif %}
</td>
<td>
{% if event.source == 'custom' and event.id %}
<div class="btn-group btn-group-sm">
<a href="{% url 'stiftung:kalender_detail' event.id %}"
class="btn btn-outline-primary btn-sm" title="Details">
<i class="fas fa-eye"></i>
</a>
<a href="{% url 'stiftung:kalender_edit' event.id %}"
class="btn btn-outline-secondary btn-sm" title="Bearbeiten">
<i class="fas fa-edit"></i>
</a>
<a href="{% url 'stiftung:kalender_delete' event.id %}"
class="btn btn-outline-danger btn-sm" title="Löschen">
<i class="fas fa-trash"></i>
</a>
</div>
{% else %}
<span class="text-muted small">
<i class="fas fa-lock me-1"></i>Systemereignis
</span>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="text-center py-5">
<i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
<h5 class="text-muted">Keine Ereignisse gefunden</h5>
<p class="text-muted">
Aktivieren Sie Ereignisquellen oder fügen Sie neue Termine hinzu.
</p>
<a href="{% url 'stiftung:kalender_create' %}" class="btn btn-primary">
<i class="fas fa-plus me-1"></i>Neuen Termin hinzufügen
</a>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<style>
.border-left-primary { border-left: 0.25rem solid #4e73df !important; }
.border-left-success { border-left: 0.25rem solid #1cc88a !important; }
.border-left-info { border-left: 0.25rem solid #36b9cc !important; }
.border-left-warning { border-left: 0.25rem solid #f6c23e !important; }
.form-switch .form-check-input {
width: 2rem;
height: 1rem;
}
#eventsTable th {
background-color: #f8f9fc;
border-top: none;
}
</style>
{% endblock %}

View File

@@ -0,0 +1,337 @@
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div class="container-fluid">
<!-- Calendar Header with View Controls -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">
<i class="fas fa-list me-2"></i>{{ title }}
</h1>
<div class="d-flex gap-2">
<!-- View Type Buttons -->
<div class="btn-group" role="group">
<a href="?view=month&year={{ year }}&month={{ month }}"
class="btn btn-sm btn-outline-primary">
<i class="fas fa-calendar me-1"></i>Monat
</a>
<a href="?view=week"
class="btn btn-sm btn-outline-primary">
<i class="fas fa-calendar-week me-1"></i>Woche
</a>
<a href="?view=agenda"
class="btn btn-sm btn-primary">
<i class="fas fa-list me-1"></i>Agenda
</a>
<a href="?view=list"
class="btn btn-sm btn-outline-primary">
<i class="fas fa-list-ul me-1"></i>Liste
</a>
</div>
<a href="{% url 'stiftung:kalender_create' %}" class="btn btn-success">
<i class="fas fa-plus me-1"></i>Neuer Termin
</a>
</div>
</div>
<!-- Agenda View -->
<div class="row">
<div class="col-12">
<div class="card shadow">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<i class="fas fa-clock me-2"></i>Agenda - Chronologische Übersicht
</h6>
<div class="btn-group btn-group-sm">
<!-- Date range filters -->
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button"
id="dateRangeDropdown" data-bs-toggle="dropdown">
Zeitraum
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="?view=agenda&range=today">Heute</a></li>
<li><a class="dropdown-item" href="?view=agenda&range=week">Diese Woche</a></li>
<li><a class="dropdown-item" href="?view=agenda&range=month">Dieser Monat</a></li>
<li><a class="dropdown-item" href="?view=agenda&range=3months">Nächste 3 Monate</a></li>
<li><a class="dropdown-item" href="?view=agenda">Alle</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="card-body p-0">
{% if events %}
<div class="agenda-timeline">
{% regroup events by date as events_by_date %}
{% for date_group in events_by_date %}
<div class="timeline-date-group">
<div class="date-divider">
<div class="date-line"></div>
<div class="date-badge {% if date_group.grouper == today %}today{% elif date_group.grouper < today %}past{% endif %}">
<div class="date-day">{{ date_group.grouper|date:"d" }}</div>
<div class="date-month-year">
{{ date_group.grouper|date:"M Y" }}
</div>
<div class="date-weekday">{{ date_group.grouper|date:"l" }}</div>
</div>
<div class="date-line"></div>
</div>
<div class="events-for-date">
{% for event in date_group.list %}
<div class="timeline-event event-{{ event.category }} {% if event.priority == 'hoch' %}high-priority{% elif event.priority == 'mittel' %}medium-priority{% endif %}">
<div class="event-time-indicator">
{% if event.time %}
<div class="event-time">{{ event.time|time:"H:i" }}</div>
{% else %}
<div class="event-time all-day">
<i class="fas fa-clock"></i>
<span>ganztags</span>
</div>
{% endif %}
</div>
<div class="event-content">
<div class="event-header">
<h6 class="event-title mb-1">
<i class="{{ event.icon }} me-2"></i>{{ event.title }}
{% if event.priority == 'hoch' %}
<span class="badge bg-danger ms-2">
<i class="fas fa-exclamation-triangle"></i>
</span>
{% endif %}
</h6>
<div class="event-meta">
<span class="badge bg-secondary me-2">{{ event.category_display }}</span>
{% if event.destinataer %}
<span class="badge bg-info">
<i class="fas fa-user me-1"></i>{{ event.destinataer }}
</span>
{% endif %}
</div>
</div>
{% if event.description %}
<div class="event-description">
{{ event.description }}
</div>
{% endif %}
{% if event.location %}
<div class="event-location">
<i class="fas fa-map-marker-alt me-1"></i>{{ event.location }}
</div>
{% endif %}
<div class="event-actions">
<a href="{% url 'stiftung:kalender_detail' event.id %}"
class="btn btn-sm btn-outline-primary">
<i class="fas fa-eye me-1"></i>Details
</a>
<a href="{% url 'stiftung:kalender_edit' event.id %}"
class="btn btn-sm btn-outline-secondary">
<i class="fas fa-edit me-1"></i>Bearbeiten
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="text-center py-5">
<i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
<h5 class="text-muted">Keine Termine gefunden</h5>
<p class="text-muted">Fügen Sie einen neuen Termin hinzu oder erweitern Sie den Zeitraum.</p>
<a href="{% url 'stiftung:kalender_create' %}" class="btn btn-primary">
<i class="fas fa-plus me-1"></i>Termin hinzufügen
</a>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<style>
.agenda-timeline {
padding: 20px;
}
.timeline-date-group {
margin-bottom: 40px;
}
.date-divider {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.date-line {
flex: 1;
height: 2px;
background: linear-gradient(to right, transparent, #dee2e6, transparent);
}
.date-badge {
background: white;
border: 2px solid #dee2e6;
border-radius: 15px;
padding: 15px 25px;
text-align: center;
margin: 0 20px;
min-width: 120px;
}
.date-badge.today {
background: #e3f2fd;
border-color: #2196f3;
color: #1976d2;
}
.date-badge.past {
background: #f5f5f5;
border-color: #bdbdbd;
color: #757575;
}
.date-day {
font-size: 2rem;
font-weight: bold;
line-height: 1;
}
.date-month-year {
font-size: 0.9rem;
font-weight: 600;
margin: 5px 0;
}
.date-weekday {
font-size: 0.8rem;
text-transform: uppercase;
opacity: 0.7;
}
.events-for-date {
padding-left: 40px;
}
.timeline-event {
display: flex;
margin-bottom: 20px;
border-left: 4px solid;
border-radius: 8px;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
overflow: hidden;
}
.timeline-event:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transform: translateX(5px);
transition: all 0.3s ease;
}
.timeline-event.high-priority {
box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
}
.event-time-indicator {
background: #f8f9fa;
padding: 20px 15px;
min-width: 120px;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid #dee2e6;
}
.event-time {
font-size: 1.2rem;
font-weight: bold;
color: #495057;
}
.event-time.all-day {
font-size: 0.9rem;
text-align: center;
color: #6c757d;
}
.event-time.all-day i {
display: block;
margin-bottom: 5px;
}
.event-content {
flex: 1;
padding: 20px;
}
.event-title {
color: #343a40;
margin-bottom: 8px;
}
.event-meta {
margin-bottom: 12px;
}
.event-description {
color: #6c757d;
margin-bottom: 12px;
line-height: 1.5;
}
.event-location {
color: #6c757d;
margin-bottom: 15px;
font-size: 0.9rem;
}
.event-actions {
display: flex;
gap: 8px;
}
/* Event category colors */
.event-termin { border-left-color: #2196f3; }
.event-zahlung { border-left-color: #ff9800; }
.event-deadline { border-left-color: #f44336; }
.event-geburtstag { border-left-color: #4caf50; }
.event-vertrag { border-left-color: #9c27b0; }
.event-pruefung { border-left-color: #009688; }
@media (max-width: 768px) {
.timeline-event {
flex-direction: column;
}
.event-time-indicator {
min-width: auto;
padding: 15px;
border-right: none;
border-bottom: 1px solid #dee2e6;
}
.events-for-date {
padding-left: 20px;
}
.date-badge {
margin: 0 10px;
min-width: 100px;
padding: 10px 15px;
}
}
</style>
{% endblock %}

View File

@@ -0,0 +1,125 @@
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">
<i class="fas fa-calendar-plus me-2"></i>{{ title }}
</h1>
</div>
<div class="row">
<div class="col-lg-8">
<div class="card shadow">
<div class="card-body">
<form method="post">
{% csrf_token %}
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="titel" class="form-label">Titel *</label>
<input type="text" class="form-control" id="titel" name="titel" required>
</div>
</div>
<div class="col-md-3">
<div class="mb-3">
<label for="datum" class="form-label">Datum *</label>
<input type="date" class="form-control" id="datum" name="datum" required>
</div>
</div>
<div class="col-md-3">
<div class="mb-3">
<label for="zeit" class="form-label">Uhrzeit</label>
<input type="time" class="form-control" id="zeit" name="zeit">
<small class="text-muted">Leer lassen für ganztägig</small>
</div>
</div>
</div>
<div class="mb-3">
<label for="beschreibung" class="form-label">Beschreibung</label>
<textarea class="form-control" id="beschreibung" name="beschreibung" rows="3"></textarea>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="kategorie" class="form-label">Kategorie</label>
<select class="form-select" id="kategorie" name="kategorie">
<option value="termin">Termin/Meeting</option>
<option value="zahlung">Zahlungserinnerung</option>
<option value="deadline">Frist/Deadline</option>
<option value="geburtstag">Geburtstag</option>
<option value="vertrag">Vertrag läuft aus</option>
<option value="pruefung">Prüfung/Nachweis</option>
<option value="sonstiges">Sonstiges</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="prioritaet" class="form-label">Priorität</label>
<select class="form-select" id="prioritaet" name="prioritaet">
<option value="niedrig">Niedrig</option>
<option value="normal" selected>Normal</option>
<option value="hoch">Hoch</option>
<option value="kritisch">Kritisch</option>
</select>
</div>
</div>
</div>
<div class="d-flex justify-content-between">
<a href="{% url 'stiftung:kalender' %}" class="btn btn-secondary">
<i class="fas fa-arrow-left me-1"></i>Abbrechen
</a>
<button type="submit" class="btn btn-primary">
<i class="fas fa-save me-1"></i>Speichern
</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card border-0 bg-light">
<div class="card-body">
<h6 class="card-title">
<i class="fas fa-info-circle me-2"></i>Hilfe
</h6>
<p class="small text-muted">
Erstellen Sie hier neue Kalenderereignisse für wichtige Termine,
Zahlungserinnerungen oder andere stiftungsbezogene Ereignisse.
</p>
<hr>
<h6 class="small">Kategorien:</h6>
<ul class="small text-muted">
<li><strong>Termin:</strong> Meetings, Besprechungen</li>
<li><strong>Zahlung:</strong> Fällige Unterstützungen</li>
<li><strong>Deadline:</strong> Fristen für Nachweise</li>
<li><strong>Vertrag:</strong> Auslaufende Pachtverträge</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script>
// Set today as default date
document.addEventListener('DOMContentLoaded', function() {
const dateInput = document.getElementById('datum');
if (dateInput && !dateInput.value) {
const today = new Date();
const yyyy = today.getFullYear();
const mm = String(today.getMonth() + 1).padStart(2, '0');
const dd = String(today.getDate()).padStart(2, '0');
dateInput.value = `${yyyy}-${mm}-${dd}`;
}
});
</script>
{% endblock %}

View File

@@ -0,0 +1,32 @@
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1><i class="fas fa-trash-alt me-2"></i>{{ title }}</h1>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="card shadow">
<div class="card-body">
<div class="alert alert-warning" role="alert">
<i class="fas fa-exclamation-triangle me-2"></i>
Löschfunktion wird implementiert.
</div>
<div class="mt-4">
<a href="{% url 'stiftung:kalender' %}" class="btn btn-secondary">
<i class="fas fa-arrow-left me-1"></i>Zurück zum Kalender
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,108 @@
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div class="container-fluid">
<!-- Header -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800 text-danger">
<i class="fas fa-exclamation-triangle me-2"></i>{{ title }}
</h1>
<div class="d-flex gap-2">
<a href="{% url 'stiftung:kalender_detail' event.pk %}" class="btn btn-secondary">
<i class="fas fa-arrow-left me-1"></i>Zurück
</a>
</div>
</div>
<!-- Confirmation Form -->
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card shadow border-danger">
<div class="card-header bg-danger text-white">
<h5 class="mb-0">
<i class="fas fa-trash me-2"></i>Termin löschen - Bestätigung erforderlich
</h5>
</div>
<div class="card-body">
<div class="alert alert-danger" role="alert">
<i class="fas fa-exclamation-triangle me-2"></i>
<strong>Achtung!</strong> Diese Aktion kann nicht rückgängig gemacht werden.
</div>
<p class="mb-4">
Sind Sie sicher, dass Sie den folgenden Kalendereintrag permanent löschen möchten?
</p>
<!-- Event Details Summary -->
<div class="bg-light p-4 rounded mb-4">
<h6 class="text-muted mb-3">Zu löschender Termin:</h6>
<div class="row mb-2">
<div class="col-sm-3"><strong>Titel:</strong></div>
<div class="col-sm-9">{{ event.titel }}</div>
</div>
<div class="row mb-2">
<div class="col-sm-3"><strong>Datum:</strong></div>
<div class="col-sm-9">
{{ event.datum|date:"d.m.Y" }}
{% if event.uhrzeit %}um {{ event.uhrzeit|time:"H:i" }} Uhr{% endif %}
</div>
</div>
<div class="row mb-2">
<div class="col-sm-3"><strong>Kategorie:</strong></div>
<div class="col-sm-9">
<span class="badge bg-info">{{ event.get_kategorie_display }}</span>
</div>
</div>
{% if event.beschreibung %}
<div class="row mb-2">
<div class="col-sm-3"><strong>Beschreibung:</strong></div>
<div class="col-sm-9">{{ event.beschreibung|truncatechars:100 }}</div>
</div>
{% endif %}
<div class="row">
<div class="col-sm-3"><strong>Erstellt:</strong></div>
<div class="col-sm-9">
{{ event.erstellt_am|date:"d.m.Y H:i" }}
{% if event.erstellt_von %}von {{ event.erstellt_von }}{% endif %}
</div>
</div>
</div>
<form method="post" class="d-flex justify-content-between align-items-center">
{% csrf_token %}
<a href="{% url 'stiftung:kalender_detail' event.pk %}" class="btn btn-secondary">
<i class="fas fa-times me-1"></i>Abbrechen
</a>
<button type="submit" class="btn btn-danger">
<i class="fas fa-trash me-1"></i>Ja, endgültig löschen
</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
// Add confirmation dialog as extra safety measure
document.addEventListener('DOMContentLoaded', function() {
const deleteForm = document.querySelector('form');
if (deleteForm) {
deleteForm.addEventListener('submit', function(e) {
if (!confirm('Sind Sie wirklich sicher? Diese Aktion kann nicht rückgängig gemacht werden!')) {
e.preventDefault();
}
});
}
});
</script>
{% endblock %}

View File

@@ -0,0 +1,167 @@
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div class="container-fluid">
<!-- Header -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">
<i class="fas fa-calendar-alt me-2"></i>{{ title }}
</h1>
<div class="d-flex gap-2">
<a href="{% url 'stiftung:kalender' %}" class="btn btn-secondary">
<i class="fas fa-arrow-left me-1"></i>Zurück zum Kalender
</a>
<a href="{% url 'stiftung:kalender_edit' event.pk %}" class="btn btn-primary">
<i class="fas fa-edit me-1"></i>Bearbeiten
</a>
<a href="{% url 'stiftung:kalender_delete' event.pk %}" class="btn btn-danger">
<i class="fas fa-trash me-1"></i>Löschen
</a>
</div>
</div>
<!-- Event Details -->
<div class="row">
<div class="col-lg-8">
<div class="card shadow">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">
<i class="fas fa-info-circle me-2"></i>Termindetails
</h5>
</div>
<div class="card-body">
<div class="row mb-4">
<div class="col-md-6">
<h6 class="text-muted">Titel</h6>
<p class="h5">{{ event.titel }}</p>
</div>
<div class="col-md-6">
<h6 class="text-muted">Datum</h6>
<p class="h5">
<i class="fas fa-calendar me-2"></i>{{ event.datum|date:"d.m.Y" }}
{% if event.uhrzeit %}
<br><small class="text-muted">
<i class="fas fa-clock me-1"></i>{{ event.uhrzeit|time:"H:i" }} Uhr
</small>
{% endif %}
</p>
</div>
</div>
<div class="row mb-4">
<div class="col-md-6">
<h6 class="text-muted">Kategorie</h6>
<span class="badge bg-info fs-6">
<i class="fas fa-tag me-1"></i>{{ event.get_kategorie_display }}
</span>
</div>
<div class="col-md-6">
<h6 class="text-muted">Priorität</h6>
<span class="badge bg-{% if event.prioritaet == 'hoch' %}danger{% elif event.prioritaet == 'mittel' %}warning{% else %}secondary{% endif %} fs-6">
<i class="fas fa-{% if event.prioritaet == 'hoch' %}exclamation-triangle{% elif event.prioritaet == 'mittel' %}exclamation-circle{% else %}info-circle{% endif %} me-1"></i>{{ event.get_prioritaet_display }}
</span>
</div>
</div>
{% if event.beschreibung %}
<div class="mb-4">
<h6 class="text-muted">Beschreibung</h6>
<div class="bg-light p-3 rounded">
{{ event.beschreibung|linebreaks }}
</div>
</div>
{% endif %}
{% if event.destinataer %}
<div class="row mb-4">
<div class="col-md-12">
<h6 class="text-muted">Bezogen auf Destinatär</h6>
<p>
<i class="fas fa-user me-2"></i>
<a href="{% url 'stiftung:destinataer_detail' event.destinataer.pk %}">
{{ event.destinataer }}
</a>
</p>
</div>
</div>
{% endif %}
{% if event.verpachtung %}
<div class="row mb-4">
<div class="col-md-12">
<h6 class="text-muted">Bezogen auf Verpachtung</h6>
<p>
<i class="fas fa-handshake me-2"></i>
<a href="{% url 'stiftung:verpachtung_detail' event.verpachtung.pk %}">
{{ event.verpachtung }}
</a>
</p>
</div>
</div>
{% endif %}
</div>
</div>
</div>
<div class="col-lg-4">
<!-- Status Card -->
<div class="card shadow mb-4">
<div class="card-header bg-{% if event.erledigt %}success{% else %}warning{% endif %} text-white">
<h6 class="mb-0">
<i class="fas fa-{% if event.erledigt %}check-circle{% else %}clock{% endif %} me-2"></i>Status
</h6>
</div>
<div class="card-body">
{% if event.erledigt %}
<div class="text-center">
<i class="fas fa-check-circle fa-3x text-success mb-3"></i>
<h6 class="text-success">Erledigt</h6>
<p class="text-muted">Dieser Termin wurde als erledigt markiert.</p>
</div>
{% else %}
<div class="text-center">
<i class="fas fa-clock fa-3x text-warning mb-3"></i>
<h6 class="text-warning">Ausstehend</h6>
<p class="text-muted">Dieser Termin steht noch aus.</p>
</div>
{% endif %}
</div>
</div>
<!-- Meta Information -->
<div class="card shadow">
<div class="card-header bg-secondary text-white">
<h6 class="mb-0">
<i class="fas fa-info me-2"></i>Meta-Informationen
</h6>
</div>
<div class="card-body">
<div class="mb-3">
<small class="text-muted">Erstellt von:</small><br>
<strong>{{ event.erstellt_von|default:"System" }}</strong>
</div>
<div class="mb-3">
<small class="text-muted">Erstellt am:</small><br>
<strong>{{ event.erstellt_am|date:"d.m.Y H:i" }}</strong>
</div>
{% if event.aktualisiert_am %}
<div class="mb-3">
<small class="text-muted">Zuletzt aktualisiert:</small><br>
<strong>{{ event.aktualisiert_am|date:"d.m.Y H:i" }}</strong>
</div>
{% endif %}
<div>
<small class="text-muted">Termin-ID:</small><br>
<code class="small">{{ event.pk }}</code>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,32 @@
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1><i class="fas fa-calendar-alt me-2"></i>{{ title }}</h1>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<div class="card shadow">
<div class="card-body">
<div class="alert alert-info" role="alert">
<i class="fas fa-info-circle me-2"></i>
Termin-Details werden hier angezeigt, sobald die Funktionalität vollständig implementiert ist.
</div>
<div class="mt-4">
<a href="{% url 'stiftung:kalender' %}" class="btn btn-secondary">
<i class="fas fa-arrow-left me-1"></i>Zurück zum Kalender
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,154 @@
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div class="container-fluid">
<!-- Header -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">
<i class="fas fa-edit me-2"></i>{{ title }}
</h1>
<div class="d-flex gap-2">
<a href="{% url 'stiftung:kalender_detail' event.pk %}" class="btn btn-secondary">
<i class="fas fa-arrow-left me-1"></i>Zurück
</a>
</div>
</div>
<!-- Edit Form -->
<div class="row">
<div class="col-lg-8">
<div class="card shadow">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">
<i class="fas fa-calendar-edit me-2"></i>Termin bearbeiten
</h5>
</div>
<div class="card-body">
<form method="post">
{% csrf_token %}
<div class="row mb-3">
<div class="col-md-12">
<label for="titel" class="form-label">
<i class="fas fa-heading me-1"></i>Titel *
</label>
<input type="text" class="form-control" id="titel" name="titel"
value="{{ event.titel }}" required>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label for="datum" class="form-label">
<i class="fas fa-calendar me-1"></i>Datum *
</label>
<input type="date" class="form-control" id="datum" name="datum"
value="{{ event.datum|date:'Y-m-d' }}" required>
</div>
<div class="col-md-6">
<label for="zeit" class="form-label">
<i class="fas fa-clock me-1"></i>Uhrzeit
</label>
<input type="time" class="form-control" id="zeit" name="zeit"
value="{% if event.uhrzeit %}{{ event.uhrzeit|time:'H:i' }}{% endif %}">
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label for="kategorie" class="form-label">
<i class="fas fa-tag me-1"></i>Kategorie
</label>
<select class="form-control" id="kategorie" name="kategorie">
<option value="termin" {% if event.kategorie == 'termin' %}selected{% endif %}>Termin</option>
<option value="zahlung" {% if event.kategorie == 'zahlung' %}selected{% endif %}>Zahlung</option>
<option value="deadline" {% if event.kategorie == 'deadline' %}selected{% endif %}>Deadline</option>
<option value="geburtstag" {% if event.kategorie == 'geburtstag' %}selected{% endif %}>Geburtstag</option>
<option value="vertrag" {% if event.kategorie == 'vertrag' %}selected{% endif %}>Vertrag</option>
<option value="pruefung" {% if event.kategorie == 'pruefung' %}selected{% endif %}>Prüfung</option>
</select>
</div>
<div class="col-md-6">
<label for="prioritaet" class="form-label">
<i class="fas fa-exclamation-circle me-1"></i>Priorität
</label>
<select class="form-control" id="prioritaet" name="prioritaet">
<option value="niedrig" {% if event.prioritaet == 'niedrig' %}selected{% endif %}>Niedrig</option>
<option value="normal" {% if event.prioritaet == 'normal' %}selected{% endif %}>Normal</option>
<option value="hoch" {% if event.prioritaet == 'hoch' %}selected{% endif %}>Hoch</option>
</select>
</div>
</div>
<div class="mb-3">
<label for="beschreibung" class="form-label">
<i class="fas fa-align-left me-1"></i>Beschreibung
</label>
<textarea class="form-control" id="beschreibung" name="beschreibung"
rows="4" placeholder="Optionale Beschreibung...">{{ event.beschreibung }}</textarea>
</div>
<div class="mb-3">
<label for="ort" class="form-label">
<i class="fas fa-map-marker-alt me-1"></i>Ort
</label>
<input type="text" class="form-control" id="ort" name="ort"
value="{{ event.ort }}" placeholder="Optional...">
</div>
<div class="mb-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="erledigt"
name="erledigt" {% if event.erledigt %}checked{% endif %}>
<label class="form-check-label" for="erledigt">
<i class="fas fa-check-circle me-1"></i>Als erledigt markieren
</label>
</div>
</div>
<div class="d-flex justify-content-between">
<a href="{% url 'stiftung:kalender_detail' event.pk %}" class="btn btn-secondary">
<i class="fas fa-times me-1"></i>Abbrechen
</a>
<button type="submit" class="btn btn-success">
<i class="fas fa-save me-1"></i>Änderungen speichern
</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-4">
<!-- Help Card -->
<div class="card shadow">
<div class="card-header bg-info text-white">
<h6 class="mb-0">
<i class="fas fa-question-circle me-2"></i>Hilfe
</h6>
</div>
<div class="card-body">
<h6>Kategorien:</h6>
<ul class="small">
<li><strong>Termin:</strong> Allgemeine Termine und Meetings</li>
<li><strong>Zahlung:</strong> Zahlungserinnerungen</li>
<li><strong>Deadline:</strong> Wichtige Fristen</li>
<li><strong>Geburtstag:</strong> Geburtstage</li>
<li><strong>Vertrag:</strong> Vertragsereignisse</li>
<li><strong>Prüfung:</strong> Überprüfungen und Kontrollen</li>
</ul>
<h6 class="mt-3">Prioritäten:</h6>
<ul class="small">
<li><span class="badge bg-secondary me-1">Niedrig</span> Optionale Termine</li>
<li><span class="badge bg-warning me-1">Normal</span> Standard-Priorität</li>
<li><span class="badge bg-danger me-1">Hoch</span> Wichtige/dringende Termine</li>
</ul>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,42 @@
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1><i class="fas fa-calendar-plus me-2"></i>{{ title }}</h1>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<div class="card shadow">
<div class="card-body">
<div class="alert alert-info" role="alert">
<i class="fas fa-info-circle me-2"></i>
Die Kalender-Funktionalität wird derzeit implementiert.
Bald können Sie hier Termine, Zahlungserinnerungen und wichtige Fristen verwalten.
</div>
<p>Geplante Funktionen:</p>
<ul>
<li>📅 Termine und Meetings</li>
<li>💰 Zahlungserinnerungen</li>
<li>⏰ Fristen und Deadlines</li>
<li>🎂 Geburtstage</li>
<li>📄 Vertragsauslauf-Erinnerungen</li>
</ul>
<div class="mt-4">
<a href="{% url 'stiftung:kalender' %}" class="btn btn-secondary">
<i class="fas fa-arrow-left me-1"></i>Zurück zum Kalender
</a>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,60 @@
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1><i class="fas fa-calendar-alt me-2"></i>{{ title }}</h1>
<a href="{% url 'stiftung:kalender_create' %}" class="btn btn-primary">
<i class="fas fa-plus me-1"></i>Neuer Eintrag
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="card shadow">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">{{ current_month }}</h5>
</div>
<div class="card-body">
{% if events %}
<div class="list-group">
{% for event in events %}
<div class="list-group-item">
<div class="d-flex w-100 justify-content-between">
<div>
<i class="{{ event.icon }} me-2 text-{{ event.color }}"></i>
<strong>{{ event.title }}</strong>
{% if event.description %}
<p class="mb-1 text-muted">{{ event.description }}</p>
{% endif %}
</div>
<small class="text-{{ event.color }}">
{{ event.date }}
{% if event.time %} {{ event.time }}{% endif %}
</small>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="text-center py-5">
<i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
<h5 class="text-muted">Keine Termine im aktuellen Monat</h5>
<p class="text-muted">Erstellen Sie Ihren ersten Kalendereintrag.</p>
<a href="{% url 'stiftung:kalender_create' %}" class="btn btn-primary">
<i class="fas fa-plus me-1"></i>Termin hinzufügen
</a>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,140 @@
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div class="container-fluid">
<!-- Calendar Header with View Controls -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">
<i class="fas fa-list me-2"></i>{{ title }}
</h1>
<div class="d-flex gap-2">
<!-- View Type Buttons -->
<div class="btn-group" role="group">
<a href="?view=month&year={{ year }}&month={{ month }}"
class="btn btn-sm btn-outline-primary">
<i class="fas fa-calendar me-1"></i>Monat
</a>
<a href="?view=week"
class="btn btn-sm btn-outline-primary">
<i class="fas fa-calendar-week me-1"></i>Woche
</a>
<a href="?view=agenda"
class="btn btn-sm btn-outline-primary">
<i class="fas fa-list me-1"></i>Agenda
</a>
<a href="?view=list"
class="btn btn-sm btn-primary">
<i class="fas fa-list-ul me-1"></i>Liste
</a>
</div>
<a href="{% url 'stiftung:kalender_create' %}" class="btn btn-success">
<i class="fas fa-plus me-1"></i>Neuer Termin
</a>
</div>
</div>
<!-- Event List -->
<div class="row">
<div class="col-12">
<div class="card shadow">
<div class="card-body">
{% if events %}
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th width="100">Datum</th>
<th width="60">Zeit</th>
<th>Titel</th>
<th>Beschreibung</th>
<th width="120">Kategorie</th>
<th width="100">Priorität</th>
<th width="80">Status</th>
<th width="100">Aktionen</th>
</tr>
</thead>
<tbody>
{% for event in events %}
<tr class="{% if event.overdue %}table-danger{% elif event.completed %}table-success{% endif %}">
<td>
<strong>{{ event.date|date:"d.m.Y" }}</strong>
<br>
<small class="text-muted">{{ event.date|date:"l" }}</small>
</td>
<td>
{% if event.time %}
{{ event.time }}
{% else %}
<small class="text-muted">ganztags</small>
{% endif %}
</td>
<td>
<div class="d-flex align-items-center">
<i class="{{ event.icon }} me-2 text-{{ event.color }}"></i>
<strong>{{ event.title }}</strong>
</div>
</td>
<td>
<small>{{ event.description|default:"-" }}</small>
</td>
<td>
<span class="badge bg-{{ event.color }}">
{{ event.category|title }}
</span>
</td>
<td>
{% if event.priority == 'kritisch' %}
<span class="badge bg-danger">{{ event.priority|title }}</span>
{% elif event.priority == 'hoch' %}
<span class="badge bg-warning">{{ event.priority|title }}</span>
{% elif event.priority == 'normal' %}
<span class="badge bg-primary">{{ event.priority|title }}</span>
{% else %}
<span class="badge bg-secondary">{{ event.priority|title }}</span>
{% endif %}
</td>
<td>
{% if event.overdue %}
<span class="badge bg-danger">Überfällig</span>
{% elif event.completed %}
<span class="badge bg-success">Erledigt</span>
{% else %}
<span class="badge bg-info">Offen</span>
{% endif %}
</td>
<td>
<div class="btn-group btn-group-sm">
{% if event.url %}
<a href="{{ event.url }}" class="btn btn-outline-primary" title="Details">
<i class="fas fa-eye"></i>
</a>
{% endif %}
<a href="{% url 'stiftung:kalender_edit' event.id %}" class="btn btn-outline-secondary" title="Bearbeiten">
<i class="fas fa-edit"></i>
</a>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="text-center py-5">
<i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
<h5 class="text-muted">Keine Termine im gewählten Zeitraum</h5>
<p class="text-muted">Fügen Sie Ihren ersten Kalendereintrag hinzu.</p>
<a href="{% url 'stiftung:kalender_create' %}" class="btn btn-primary">
<i class="fas fa-plus me-1"></i>Termin hinzufügen
</a>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,200 @@
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div class="container-fluid">
<!-- Calendar Header with View Controls -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">
<i class="fas fa-calendar-alt me-2"></i>{{ title }}
</h1>
<div class="d-flex gap-2">
<!-- View Type Buttons -->
<div class="btn-group" role="group">
<a href="?view=month&year={{ year }}&month={{ month }}"
class="btn btn-sm btn-primary">
<i class="fas fa-calendar me-1"></i>Monat
</a>
<a href="?view=week"
class="btn btn-sm btn-outline-primary">
<i class="fas fa-calendar-week me-1"></i>Woche
</a>
<a href="?view=agenda"
class="btn btn-sm btn-outline-primary">
<i class="fas fa-list me-1"></i>Agenda
</a>
<a href="?view=list"
class="btn btn-sm btn-outline-primary">
<i class="fas fa-list-ul me-1"></i>Liste
</a>
</div>
<a href="{% url 'stiftung:kalender_create' %}" class="btn btn-success">
<i class="fas fa-plus me-1"></i>Neuer Termin
</a>
</div>
</div>
<!-- Navigation for Month View -->
<div class="row mb-3">
<div class="col-12">
<div class="d-flex justify-content-between align-items-center">
<div class="btn-group" role="group">
<a href="?view=month&year={{ prev_year }}&month={{ prev_month }}"
class="btn btn-outline-secondary">
<i class="fas fa-chevron-left me-1"></i>Vorheriger Monat
</a>
<a href="?view=month&year={{ today.year }}&month={{ today.month }}"
class="btn btn-secondary">Heute</a>
<a href="?view=month&year={{ next_year }}&month={{ next_month }}"
class="btn btn-outline-secondary">
Nächster Monat<i class="fas fa-chevron-right ms-1"></i>
</a>
</div>
<h4 class="mb-0">{{ month_name }} {{ year }}</h4>
</div>
</div>
</div>
<!-- Month Calendar Grid -->
<div class="row">
<div class="col-12">
<div class="card shadow">
<div class="card-body p-0">
<div class="calendar-grid">
<!-- Weekday Headers -->
<div class="calendar-header">
{% for weekday in weekdays %}
<div class="weekday-header">{{ weekday }}</div>
{% endfor %}
</div>
<!-- Calendar Days -->
{% for week in calendar_grid %}
<div class="calendar-week">
{% for day_data in week %}
<div class="calendar-day {% if day_data.is_today %}today{% endif %} {% if not day_data %}empty{% endif %}">
{% if day_data %}
<div class="day-number">{{ day_data.day }}</div>
{% if day_data.events %}
<div class="day-events">
{% for event in day_data.events %}
<div class="event-item event-{{ event.category }}" title="{{ event.title }} - {{ event.description }}">
<i class="{{ event.icon }}"></i>
<span>{{ event.title|truncatechars:20 }}</span>
</div>
{% endfor %}
{% if day_data.event_count > 3 %}
<div class="more-events">+{{ day_data.event_count|add:"-3" }} weitere</div>
{% endif %}
</div>
{% endif %}
{% endif %}
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.calendar-grid {
display: grid;
grid-template-rows: auto repeat(6, 1fr);
gap: 1px;
background-color: #dee2e6;
border: 1px solid #dee2e6;
}
.calendar-header {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
}
.weekday-header {
background-color: #f8f9fa;
padding: 10px;
text-align: center;
font-weight: bold;
color: #495057;
}
.calendar-week {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
}
.calendar-day {
background-color: white;
min-height: 120px;
padding: 8px;
position: relative;
cursor: pointer;
}
.calendar-day.empty {
background-color: #f8f9fa;
}
.calendar-day.today {
background-color: #e3f2fd;
border: 2px solid #2196f3;
}
.calendar-day:hover {
background-color: #f5f5f5;
}
.day-number {
font-weight: bold;
margin-bottom: 5px;
color: #495057;
}
.calendar-day.today .day-number {
color: #1976d2;
}
.day-events {
display: flex;
flex-direction: column;
gap: 2px;
}
.event-item {
font-size: 0.75rem;
padding: 2px 4px;
border-radius: 3px;
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
}
.event-item i {
font-size: 0.6rem;
}
.event-termin { background-color: #e3f2fd; color: #1565c0; }
.event-zahlung { background-color: #fff3e0; color: #ef6c00; }
.event-deadline { background-color: #ffebee; color: #c62828; }
.event-geburtstag { background-color: #e8f5e8; color: #2e7d32; }
.event-vertrag { background-color: #f3e5f5; color: #7b1fa2; }
.event-pruefung { background-color: #e0f2f1; color: #00695c; }
.more-events {
font-size: 0.6rem;
color: #757575;
font-style: italic;
text-align: center;
margin-top: 2px;
}
</style>
{% endblock %}

View File

@@ -0,0 +1,184 @@
{% extends "base.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<div class="container-fluid">
<!-- Calendar Header with View Controls -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">
<i class="fas fa-calendar-week me-2"></i>{{ title }}
</h1>
<div class="d-flex gap-2">
<!-- View Type Buttons -->
<div class="btn-group" role="group">
<a href="?view=month&year={{ year }}&month={{ month }}"
class="btn btn-sm btn-outline-primary">
<i class="fas fa-calendar me-1"></i>Monat
</a>
<a href="?view=week"
class="btn btn-sm btn-primary">
<i class="fas fa-calendar-week me-1"></i>Woche
</a>
<a href="?view=agenda"
class="btn btn-sm btn-outline-primary">
<i class="fas fa-list me-1"></i>Agenda
</a>
<a href="?view=list"
class="btn btn-sm btn-outline-primary">
<i class="fas fa-list-ul me-1"></i>Liste
</a>
</div>
<a href="{% url 'stiftung:kalender_create' %}" class="btn btn-success">
<i class="fas fa-plus me-1"></i>Neuer Termin
</a>
</div>
</div>
<!-- Week View -->
<div class="row">
<div class="col-12">
<div class="card shadow">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<h6 class="mb-0">{{ start_date|date:"d.m.Y" }} - {{ end_date|date:"d.m.Y" }}</h6>
<div class="btn-group btn-group-sm">
<a href="?view=week&date={{ start_date|add:'-7'|date:'Y-m-d' }}" class="btn btn-outline-secondary">
<i class="fas fa-chevron-left"></i> Vorherige Woche
</a>
<a href="?view=week" class="btn btn-secondary">Diese Woche</a>
<a href="?view=week&date={{ start_date|add:'7'|date:'Y-m-d' }}" class="btn btn-outline-secondary">
Nächste Woche <i class="fas fa-chevron-right"></i>
</a>
</div>
</div>
</div>
<div class="card-body">
{% if events %}
<div class="week-timeline">
{% for i in "1234567"|make_list %}
{% with day_date=start_date|add:forloop.counter0 %}
<div class="day-column">
<div class="day-header {% if day_date == today %}today{% endif %}">
<div class="day-name">{{ day_date|date:"l" }}</div>
<div class="day-date">{{ day_date|date:"d.m" }}</div>
</div>
<div class="day-events">
{% for event in events %}
{% if event.date == day_date %}
<div class="event-block event-{{ event.category }}">
<div class="event-time">
{% if event.time %}{{ event.time }}{% else %}ganztags{% endif %}
</div>
<div class="event-title">
<i class="{{ event.icon }} me-1"></i>{{ event.title }}
</div>
{% if event.description %}
<div class="event-desc">{{ event.description|truncatechars:50 }}</div>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endwith %}
{% endfor %}
</div>
{% else %}
<div class="text-center py-5">
<i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
<h5 class="text-muted">Keine Termine diese Woche</h5>
<p class="text-muted">Fügen Sie einen neuen Termin hinzu.</p>
<a href="{% url 'stiftung:kalender_create' %}" class="btn btn-primary">
<i class="fas fa-plus me-1"></i>Termin hinzufügen
</a>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<style>
.week-timeline {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 1px;
background-color: #dee2e6;
border: 1px solid #dee2e6;
}
.day-column {
background-color: white;
min-height: 400px;
}
.day-header {
padding: 10px;
background-color: #f8f9fa;
text-align: center;
border-bottom: 1px solid #dee2e6;
}
.day-header.today {
background-color: #e3f2fd;
color: #1976d2;
font-weight: bold;
}
.day-name {
font-size: 0.8rem;
text-transform: uppercase;
margin-bottom: 2px;
}
.day-date {
font-size: 1.2rem;
font-weight: bold;
}
.day-events {
padding: 8px;
display: flex;
flex-direction: column;
gap: 4px;
}
.event-block {
padding: 8px;
border-radius: 4px;
border-left: 4px solid;
cursor: pointer;
}
.event-block:hover {
opacity: 0.8;
}
.event-time {
font-size: 0.75rem;
font-weight: bold;
margin-bottom: 2px;
}
.event-title {
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 2px;
}
.event-desc {
font-size: 0.75rem;
color: #666;
}
.event-termin { background-color: #e3f2fd; border-left-color: #2196f3; }
.event-zahlung { background-color: #fff3e0; border-left-color: #ff9800; }
.event-deadline { background-color: #ffebee; border-left-color: #f44336; }
.event-geburtstag { background-color: #e8f5e8; border-left-color: #4caf50; }
.event-vertrag { background-color: #f3e5f5; border-left-color: #9c27b0; }
.event-pruefung { background-color: #e0f2f1; border-left-color: #009688; }
</style>
{% endblock %}