Initial Commit
This commit is contained in:
DOMINIK SCHRADER
858
css/styles.css
Normal file
858
css/styles.css
Normal file
@@ -0,0 +1,858 @@
|
||||
:root {
|
||||
--primary: #2563eb;
|
||||
--primary-hover: #1d4ed8;
|
||||
--primary-light: #3b82f6;
|
||||
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8fafc;
|
||||
--bg-card: #ffffff;
|
||||
--bg-hover: #f1f5f9;
|
||||
|
||||
--text-primary: #0f172a;
|
||||
--text-secondary: #475569;
|
||||
--text-tertiary: #64748b;
|
||||
|
||||
--border: #e2e8f0;
|
||||
--border-light: #cbd5e1;
|
||||
|
||||
--success: #10b981;
|
||||
--danger: #ef4444;
|
||||
--warning: #f59e0b;
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--bg-primary: #0f172a;
|
||||
--bg-secondary: #1e293b;
|
||||
--bg-card: #1e293b;
|
||||
--bg-hover: #334155;
|
||||
|
||||
--text-primary: #f1f5f9;
|
||||
--text-secondary: #cbd5e1;
|
||||
--text-tertiary: #94a3b8;
|
||||
|
||||
--border: #334155;
|
||||
--border-light: #475569;
|
||||
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
|
||||
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
background: var(--bg-primary);
|
||||
border-bottom: 1px solid var(--border);
|
||||
box-shadow: var(--shadow-sm);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem 2rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background: var(--bg-hover);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
nav {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem 1rem;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0.625rem 1.25rem;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Main Content */
|
||||
main {
|
||||
flex: 1;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.view.active {
|
||||
display: block;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
color: var(--text-tertiary);
|
||||
margin-bottom: 2rem;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Form Styles */
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
cursor: help;
|
||||
color: var(--primary);
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.tooltip::after {
|
||||
content: attr(data-tip);
|
||||
position: absolute;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: var(--text-primary);
|
||||
color: var(--bg-primary);
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.75rem;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s;
|
||||
z-index: 100;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.tooltip:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
font-size: 1rem;
|
||||
background: var(--bg-card);
|
||||
color: var(--text-primary);
|
||||
transition: all 0.2s ease;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.form-group input::placeholder {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.form-group input:hover:not(:focus),
|
||||
.form-group select:hover:not(:focus) {
|
||||
border-color: var(--border-light);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
display: block;
|
||||
color: var(--danger);
|
||||
font-size: 0.75rem;
|
||||
margin-top: 0.25rem;
|
||||
min-height: 1rem;
|
||||
}
|
||||
|
||||
/* Loading */
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.loading::after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid var(--border);
|
||||
border-top-color: var(--primary);
|
||||
border-radius: 50%;
|
||||
margin-left: 0.5rem;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Kurse Container */
|
||||
.kurse-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.kurs-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.kurs-card:hover:not(.voll) {
|
||||
border-color: var(--primary);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.kurs-card.selected {
|
||||
border-color: var(--primary);
|
||||
background: rgba(37, 99, 235, 0.05);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.kurs-card.voll {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.kurs-card label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
cursor: pointer;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.kurs-card input[type="checkbox"] {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
cursor: pointer;
|
||||
accent-color: var(--primary);
|
||||
}
|
||||
|
||||
.kurs-card input[type="checkbox"]:checked {
|
||||
animation: checkboxPop 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes checkboxPop {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.15);
|
||||
}
|
||||
}
|
||||
|
||||
.kurs-card strong {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.kurs-info {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.kurs-info p {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.kurs-info strong {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.actions {
|
||||
margin-top: 1.5rem;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: var(--primary-hover);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--primary);
|
||||
border: 1px solid var(--primary);
|
||||
padding: 0.625rem 1.25rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border);
|
||||
padding: 0.625rem 1.25rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-loader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: white;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
/* Messages */
|
||||
.meldung {
|
||||
margin-top: 2rem;
|
||||
padding: 1rem 1.25rem;
|
||||
border-radius: 0.75rem;
|
||||
border-left: 4px solid;
|
||||
animation: slideIn 0.3s ease;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.meldung h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.meldung p {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.meldung.erfolg {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
border-color: var(--success);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.meldung.fehler {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border-color: var(--danger);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.meldungs-actions {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding-bottom: 0.5rem;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0.625rem 1.25rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
border-radius: 0.5rem;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tab-btn:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.bericht-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: var(--bg-card);
|
||||
border-radius: 0.75rem;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.bericht-table th,
|
||||
.bericht-table td {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.bericht-table thead th {
|
||||
background: var(--bg-secondary);
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.bericht-table tbody tr {
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.bericht-table tbody tr:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.bericht-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.bericht-table td {
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.bericht-table td strong {
|
||||
color: var(--text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bericht-table td small {
|
||||
color: var(--text-tertiary);
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.detail-liste {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.detail-liste li {
|
||||
padding: 0.25rem 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Rechnung */
|
||||
.rechnung {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 2rem;
|
||||
margin-top: 1.5rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.rechnung-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.rechnung-header h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.rechnung-header p,
|
||||
.rechnung p {
|
||||
margin: 0.25rem 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.rechnung h4 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.rechnung-table {
|
||||
width: 100%;
|
||||
margin-top: 1.5rem;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.rechnung-table th,
|
||||
.rechnung-table td {
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.rechnung-table th {
|
||||
background: var(--bg-secondary);
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.rechnung-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.rechnung-table td {
|
||||
font-size: 0.9375rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.rechnung-summe {
|
||||
margin-top: 1.5rem;
|
||||
text-align: right;
|
||||
border-top: 2px solid var(--border);
|
||||
padding-top: 1rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.rechnung-summe div {
|
||||
padding: 0.5rem 0;
|
||||
font-size: 1rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.rechnung-summe .gesamt {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background: var(--bg-primary);
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 1.5rem 2rem;
|
||||
text-align: center;
|
||||
color: var(--text-tertiary);
|
||||
font-size: 0.875rem;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Inline helpers */
|
||||
.inline {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
body {
|
||||
background: white;
|
||||
}
|
||||
.container {
|
||||
background: white;
|
||||
}
|
||||
header,
|
||||
nav,
|
||||
.btn-primary,
|
||||
footer {
|
||||
display: none;
|
||||
}
|
||||
main {
|
||||
padding: 20px;
|
||||
background: white;
|
||||
}
|
||||
.rechnung {
|
||||
border-color: #000;
|
||||
background: white;
|
||||
color: #000;
|
||||
}
|
||||
.rechnung * {
|
||||
color: #000 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1024px) {
|
||||
main {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.header-content,
|
||||
nav {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
main {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.header-content,
|
||||
nav {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.kurse-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.rechnung {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.rechnung-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.meldungs-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.inline {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.bericht-table th,
|
||||
.bericht-table td {
|
||||
padding: 0.75rem 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
font-size: 16px; /* prevents iOS zoom */
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
*:focus-visible {
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
161
index.html
Normal file
161
index.html
Normal file
@@ -0,0 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Sportarten-Anmeldung | Schulverwaltung</title>
|
||||
<link rel="stylesheet" href="css/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<div class="header-content">
|
||||
<h1>Sportarten-Anmeldung</h1>
|
||||
<div class="inline">
|
||||
<button id="theme-toggle" class="theme-toggle" aria-label="Theme umschalten" aria-pressed="false">
|
||||
<span class="theme-icon">🌙</span>
|
||||
</button>
|
||||
<button id="logout-btn" class="btn-ghost hidden">Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
<nav role="tablist" aria-label="Hauptnavigation">
|
||||
<button class="nav-btn active" data-view="anmeldung" role="tab" aria-selected="true">Anmeldung</button>
|
||||
<button class="nav-btn admin-only hidden" data-view="berichte" role="tab" aria-selected="false">Berichte</button>
|
||||
<button class="nav-btn admin-only hidden" data-view="rechnungen" role="tab" aria-selected="false">Rechnungen</button>
|
||||
<button class="nav-btn" data-view="login" role="tab" aria-selected="false" id="login-tab-btn">Login</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="anmeldung-view" class="view active" aria-labelledby="anmeldung">
|
||||
<h2 id="anmeldung">Kursanmeldung für Schüler</h2>
|
||||
<p class="section-subtitle">Wähle Betrieb und Sportarten aus. Mehrfachauswahl ist möglich.</p>
|
||||
|
||||
<form id="anmelde-form" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="vorname">Vorname *</label>
|
||||
<input type="text" id="vorname" name="vorname" placeholder="Max" required autocomplete="given-name" />
|
||||
<span class="error-message" id="vorname-error"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="nachname">Nachname *</label>
|
||||
<input type="text" id="nachname" name="nachname" placeholder="Mustermann" required autocomplete="family-name" />
|
||||
<span class="error-message" id="nachname-error"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">E-Mail *</label>
|
||||
<input type="email" id="email" name="email" placeholder="max.mustermann@beispiel.de" required autocomplete="email" />
|
||||
<span class="error-message" id="email-error"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="geburtsdatum">Geburtsdatum
|
||||
<span class="tooltip" data-tip="Optional – hilft uns bei der Kursplanung" aria-hidden="true">ℹ️</span>
|
||||
</label>
|
||||
<input type="date" id="geburtsdatum" name="geburtsdatum" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="betrieb">Betrieb *</label>
|
||||
<select id="betrieb" name="betrieb" required>
|
||||
<option value="">Bitte wählen...</option>
|
||||
</select>
|
||||
<span class="error-message" id="betrieb-error"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Sportarten auswählen (mehrere möglich) *</label>
|
||||
<div id="kurse-container" class="kurse-container" aria-live="polite">
|
||||
<div class="loading">Kurse werden geladen...</div>
|
||||
</div>
|
||||
<span class="error-message" id="kurse-error"></span>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="submit" class="btn-primary" id="submit-btn">
|
||||
<span class="btn-text">Anmeldung absenden</span>
|
||||
<span class="btn-loader hidden" aria-hidden="true">
|
||||
<span class="spinner"></span> Wird gesendet...
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="erfolg-meldung" class="meldung erfolg hidden" role="status" aria-live="polite">
|
||||
<h3>✅ Anmeldung erfolgreich</h3>
|
||||
<p id="erfolg-text"></p>
|
||||
<div class="meldungs-actions">
|
||||
<button class="btn-secondary" id="neu-anmelden">Weitere Person anmelden</button>
|
||||
<button class="btn-ghost" id="zur-uebersicht">Zur Übersicht</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="fehler-meldung" class="meldung fehler hidden" role="alert" aria-live="assertive">
|
||||
<h3>⚠️ Fehler bei der Anmeldung</h3>
|
||||
<p id="fehler-text"></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="login-view" class="view" aria-labelledby="login">
|
||||
<h2 id="login">Anmeldung Schulleitung</h2>
|
||||
<p class="section-subtitle">Bitte melden Sie sich an, um Berichte und Rechnungen zu sehen.</p>
|
||||
<form id="login-form" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="login-email">E-Mail</label>
|
||||
<input type="email" id="login-email" required autocomplete="username" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="login-password">Passwort</label>
|
||||
<input type="password" id="login-password" required autocomplete="current-password" />
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button type="submit" class="btn-primary">Einloggen</button>
|
||||
</div>
|
||||
<span class="error-message" id="login-error"></span>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section id="berichte-view" class="view" aria-labelledby="berichte">
|
||||
<h2 id="berichte">Berichte für Schulleitung</h2>
|
||||
<p class="section-subtitle">Abruf der aktuellen Teilnehmerzahlen pro Betrieb und pro Kurs.</p>
|
||||
<div class="tabs" role="tablist" aria-label="Berichte Tabs">
|
||||
<button class="tab-btn active" data-tab="betrieb" role="tab" aria-selected="true">Teilnehmer pro Betrieb</button>
|
||||
<button class="tab-btn" data-tab="kurs" role="tab" aria-selected="false">Teilnehmer pro Kurs</button>
|
||||
</div>
|
||||
<div id="betrieb-tab" class="tab-content active">
|
||||
<h3>Übersicht nach Betrieben</h3>
|
||||
<div id="betrieb-bericht" aria-live="polite">
|
||||
<div class="loading">Bericht wird geladen...</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="kurs-tab" class="tab-content">
|
||||
<h3>Übersicht nach Kursen</h3>
|
||||
<div id="kurs-bericht" aria-live="polite">
|
||||
<div class="loading">Bericht wird geladen...</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="rechnungen-view" class="view" aria-labelledby="rechnungen">
|
||||
<h2 id="rechnungen">Rechnungen erstellen</h2>
|
||||
<p class="section-subtitle">Wählen Sie einen Betrieb und generieren Sie eine aktuelle Rechnung.</p>
|
||||
<div class="form-group">
|
||||
<label for="rechnung-betrieb">Betrieb auswählen</label>
|
||||
<div class="inline">
|
||||
<select id="rechnung-betrieb">
|
||||
<option value="">Bitte wählen...</option>
|
||||
</select>
|
||||
<button id="rechnung-erstellen" class="btn-primary">Rechnung anzeigen</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="rechnung-container"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2024 Schulverwaltung - Alle Rechte vorbehalten</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
|
||||
<script src="js/config.js"></script>
|
||||
<script src="js/api.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
62
js/api.js
Normal file
62
js/api.js
Normal file
@@ -0,0 +1,62 @@
|
||||
const API = {
|
||||
async request(endpoint, options = {}) {
|
||||
const url = `${API_CONFIG.baseUrl}${endpoint}`;
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...(options.headers || {}),
|
||||
},
|
||||
credentials: 'include',
|
||||
...options,
|
||||
});
|
||||
const text = await response.text();
|
||||
if (!response.ok) {
|
||||
let error;
|
||||
try {
|
||||
error = JSON.parse(text);
|
||||
} catch {
|
||||
error = { message: text || 'Unbekannter Fehler' };
|
||||
}
|
||||
throw new Error(error.message || 'API-Fehler');
|
||||
}
|
||||
return text ? JSON.parse(text) : null;
|
||||
} catch (err) {
|
||||
console.error('API error:', err);
|
||||
throw err;
|
||||
}
|
||||
},
|
||||
getKurse() {
|
||||
return this.request(API_CONFIG.endpoints.kurse);
|
||||
},
|
||||
getBetriebe() {
|
||||
return this.request(API_CONFIG.endpoints.betriebe);
|
||||
},
|
||||
anmelden(data) {
|
||||
return this.request(API_CONFIG.endpoints.anmeldung, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
},
|
||||
getBerichtBetrieb() {
|
||||
return this.request(API_CONFIG.endpoints.berichtBetrieb);
|
||||
},
|
||||
getBerichtKurs() {
|
||||
return this.request(API_CONFIG.endpoints.berichtKurs);
|
||||
},
|
||||
getRechnung(betriebId) {
|
||||
return this.request(`${API_CONFIG.endpoints.rechnung}${betriebId}`);
|
||||
},
|
||||
login(email, password) {
|
||||
return this.request(API_CONFIG.endpoints.login, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ email, password }),
|
||||
});
|
||||
},
|
||||
logout() {
|
||||
return this.request(API_CONFIG.endpoints.logout, { method: 'POST' });
|
||||
},
|
||||
me() {
|
||||
return this.request(API_CONFIG.endpoints.me);
|
||||
},
|
||||
};
|
||||
506
js/app.js
Normal file
506
js/app.js
Normal file
@@ -0,0 +1,506 @@
|
||||
// Hauptanwendung
|
||||
class SportAnmeldungApp {
|
||||
constructor() {
|
||||
this.kurse = [];
|
||||
this.betriebe = [];
|
||||
this.user = null;
|
||||
this.init();
|
||||
}
|
||||
|
||||
async init() {
|
||||
this.setupThemeToggle();
|
||||
this.setupNavigation();
|
||||
this.setupTabs();
|
||||
this.setupLoginHandlers();
|
||||
this.setupLogoutHandler();
|
||||
|
||||
await this.checkAuthAndToggleUI();
|
||||
|
||||
await this.loadInitialData();
|
||||
this.setupFormHandlers();
|
||||
}
|
||||
|
||||
setupThemeToggle() {
|
||||
const toggle = document.getElementById('theme-toggle');
|
||||
const icon = toggle.querySelector('.theme-icon');
|
||||
|
||||
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||
document.documentElement.setAttribute('data-theme', savedTheme);
|
||||
icon.textContent = savedTheme === 'dark' ? '☀️' : '🌙';
|
||||
toggle.setAttribute('aria-pressed', savedTheme === 'dark' ? 'true' : 'false');
|
||||
|
||||
toggle.addEventListener('click', () => {
|
||||
const currentTheme = document.documentElement.getAttribute('data-theme');
|
||||
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
|
||||
document.documentElement.setAttribute('data-theme', newTheme);
|
||||
localStorage.setItem('theme', newTheme);
|
||||
icon.textContent = newTheme === 'dark' ? '☀️' : '🌙';
|
||||
toggle.setAttribute('aria-pressed', newTheme === 'dark' ? 'true' : 'false');
|
||||
});
|
||||
}
|
||||
|
||||
setupNavigation() {
|
||||
const navButtons = document.querySelectorAll('.nav-btn');
|
||||
navButtons.forEach((btn) => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
const view = e.target.dataset.view;
|
||||
this.switchView(view);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
switchView(viewName) {
|
||||
document.querySelectorAll('.view').forEach((v) => v.classList.remove('active'));
|
||||
document.querySelectorAll('.nav-btn').forEach((b) => b.classList.remove('active'));
|
||||
|
||||
const view = document.getElementById(`${viewName}-view`);
|
||||
if (view) view.classList.add('active');
|
||||
document.querySelector(`[data-view="${viewName}"]`)?.classList.add('active');
|
||||
|
||||
if (viewName === 'berichte') {
|
||||
this.loadBerichte();
|
||||
} else if (viewName === 'rechnungen') {
|
||||
this.loadRechnungsOptionen();
|
||||
}
|
||||
}
|
||||
|
||||
setupTabs() {
|
||||
const tabButtons = document.querySelectorAll('.tab-btn');
|
||||
tabButtons.forEach((btn) => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
const tab = e.target.dataset.tab;
|
||||
this.switchTab(tab);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
switchTab(tabName) {
|
||||
document.querySelectorAll('.tab-content').forEach((t) => t.classList.remove('active'));
|
||||
document.querySelectorAll('.tab-btn').forEach((b) => b.classList.remove('active'));
|
||||
|
||||
document.getElementById(`${tabName}-tab`).classList.add('active');
|
||||
document.querySelector(`[data-tab="${tabName}"]`).classList.add('active');
|
||||
}
|
||||
|
||||
async checkAuthAndToggleUI() {
|
||||
try {
|
||||
const me = await API.me();
|
||||
this.user = me.authenticated ? me.user : null;
|
||||
|
||||
const isAdmin = !!this.user && this.user.role === 'admin';
|
||||
document.querySelectorAll('.admin-only').forEach((el) => {
|
||||
el.classList.toggle('hidden', !isAdmin);
|
||||
});
|
||||
|
||||
document.getElementById('logout-btn').classList.toggle('hidden', !this.user);
|
||||
document.getElementById('login-tab-btn').classList.toggle('hidden', !!this.user);
|
||||
|
||||
// Wenn aktuell Berichte/Rechnungen aktiv sind, aber nicht admin → auf Anmeldung umschalten
|
||||
const activeView = document.querySelector('.view.active')?.id || '';
|
||||
if (!isAdmin && (activeView === 'berichte-view' || activeView === 'rechnungen-view')) {
|
||||
this.switchView('login');
|
||||
}
|
||||
} catch (e) {
|
||||
this.user = null;
|
||||
document.querySelectorAll('.admin-only').forEach((el) => el.classList.add('hidden'));
|
||||
document.getElementById('logout-btn').classList.add('hidden');
|
||||
document.getElementById('login-tab-btn').classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
async loadInitialData() {
|
||||
try {
|
||||
this.kurse = await API.getKurse();
|
||||
this.betriebe = await API.getBetriebe();
|
||||
this.renderKurse();
|
||||
this.renderBetriebe();
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden der Daten:', error);
|
||||
alert('Fehler beim Laden der Daten. Bitte überprüfen Sie die API-Verbindung.');
|
||||
}
|
||||
}
|
||||
|
||||
renderKurse() {
|
||||
const container = document.getElementById('kurse-container');
|
||||
container.innerHTML = this.kurse
|
||||
.map(
|
||||
(kurs) => `
|
||||
<div class="kurs-card ${!kurs.verfuegbar ? 'voll' : ''}" data-kurs-id="${kurs.id}" ${
|
||||
!kurs.verfuegbar ? 'aria-disabled="true" style="pointer-events:none;opacity:0.6"' : ''
|
||||
}>
|
||||
<label>
|
||||
<input type="checkbox" name="kurse" value="${kurs.id}" ${
|
||||
!kurs.verfuegbar ? 'disabled' : ''
|
||||
}>
|
||||
<strong>${kurs.name}</strong>
|
||||
</label>
|
||||
<div class="kurs-info">
|
||||
<p>${kurs.beschreibung ?? ''}</p>
|
||||
<p><strong>Gebühr:</strong> ${kurs.gebuehr}€</p>
|
||||
<p><strong>Verfügbar:</strong> ${kurs.freie_plaetze} von ${
|
||||
kurs.max_teilnehmer
|
||||
} Plätzen</p>
|
||||
${
|
||||
!kurs.verfuegbar
|
||||
? '<p style="color: var(--danger);"><strong>Kurs ist voll!</strong></p>'
|
||||
: ''
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join('');
|
||||
|
||||
document.querySelectorAll('.kurs-card').forEach((card) => {
|
||||
const checkbox = card.querySelector('input[type="checkbox"]');
|
||||
if (checkbox && !checkbox.disabled) {
|
||||
card.addEventListener('click', (e) => {
|
||||
if (e.target.tagName !== 'INPUT') {
|
||||
checkbox.checked = !checkbox.checked;
|
||||
card.classList.toggle('selected', checkbox.checked);
|
||||
}
|
||||
});
|
||||
checkbox.addEventListener('change', () => {
|
||||
card.classList.toggle('selected', checkbox.checked);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
renderBetriebe() {
|
||||
const select = document.getElementById('betrieb');
|
||||
const rechnungSelect = document.getElementById('rechnung-betrieb');
|
||||
|
||||
const options = this.betriebe
|
||||
.map((betrieb) => `<option value="${betrieb.id}">${betrieb.name}</option>`)
|
||||
.join('');
|
||||
|
||||
select.innerHTML = '<option value="">Bitte wählen...</option>' + options;
|
||||
rechnungSelect.innerHTML = '<option value="">Bitte wählen...</option>' + options;
|
||||
}
|
||||
|
||||
setupFormHandlers() {
|
||||
const form = document.getElementById('anmelde-form');
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
this.handleAnmeldung();
|
||||
});
|
||||
|
||||
const rechnungBtn = document.getElementById('rechnung-erstellen');
|
||||
rechnungBtn.addEventListener('click', () => {
|
||||
this.handleRechnungErstellen();
|
||||
});
|
||||
|
||||
document.getElementById('neu-anmelden')?.addEventListener('click', () => {
|
||||
document.getElementById('erfolg-meldung').classList.add('hidden');
|
||||
form.reset();
|
||||
document.querySelectorAll('.kurs-card').forEach((c) => c.classList.remove('selected'));
|
||||
});
|
||||
|
||||
document.getElementById('zur-uebersicht')?.addEventListener('click', () => {
|
||||
this.switchView('berichte');
|
||||
});
|
||||
}
|
||||
|
||||
setupLoginHandlers() {
|
||||
const form = document.getElementById('login-form');
|
||||
if (!form) return;
|
||||
form.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const email = document.getElementById('login-email').value.trim();
|
||||
const password = document.getElementById('login-password').value;
|
||||
const err = document.getElementById('login-error');
|
||||
err.textContent = '';
|
||||
try {
|
||||
await API.login(email, password);
|
||||
await this.checkAuthAndToggleUI();
|
||||
this.switchView('berichte');
|
||||
} catch (ex) {
|
||||
err.textContent = ex.message || 'Login fehlgeschlagen';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setupLogoutHandler() {
|
||||
const btn = document.getElementById('logout-btn');
|
||||
btn.addEventListener('click', async () => {
|
||||
try {
|
||||
await API.logout();
|
||||
this.user = null;
|
||||
await this.checkAuthAndToggleUI();
|
||||
this.switchView('anmeldung');
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async handleAnmeldung() {
|
||||
const form = document.getElementById('anmelde-form');
|
||||
const formData = new FormData(form);
|
||||
|
||||
const selectedKurse = Array.from(document.querySelectorAll('input[name="kurse"]:checked')).map(
|
||||
(cb) => parseInt(cb.value, 10)
|
||||
);
|
||||
|
||||
if (selectedKurse.length === 0) {
|
||||
this.showFehler('Bitte wählen Sie mindestens eine Sportart aus.');
|
||||
return;
|
||||
}
|
||||
|
||||
const data = {
|
||||
vorname: formData.get('vorname'),
|
||||
nachname: formData.get('nachname'),
|
||||
email: formData.get('email'),
|
||||
geburtsdatum: formData.get('geburtsdatum') || null,
|
||||
betrieb_id: parseInt(formData.get('betrieb'), 10),
|
||||
kurs_ids: selectedKurse,
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await API.anmelden(data);
|
||||
this.showErfolg(response);
|
||||
form.reset();
|
||||
document.querySelectorAll('.kurs-card').forEach((c) => c.classList.remove('selected'));
|
||||
await this.loadInitialData();
|
||||
} catch (error) {
|
||||
this.showFehler(error.message);
|
||||
}
|
||||
}
|
||||
|
||||
showErfolg(response) {
|
||||
const meldung = document.getElementById('erfolg-meldung');
|
||||
const text = document.getElementById('erfolg-text');
|
||||
text.innerHTML = `
|
||||
Vielen Dank für Ihre Anmeldung!<br><br>
|
||||
<strong>Angemeldete Kurse:</strong><br>
|
||||
${response.angemeldete_kurse.map((k) => `• ${k}`).join('<br>')}
|
||||
`;
|
||||
meldung.classList.remove('hidden');
|
||||
document.getElementById('fehler-meldung').classList.add('hidden');
|
||||
meldung.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
setTimeout(() => {
|
||||
meldung.classList.add('hidden');
|
||||
}, 8000);
|
||||
}
|
||||
|
||||
showFehler(message) {
|
||||
const meldung = document.getElementById('fehler-meldung');
|
||||
const text = document.getElementById('fehler-text');
|
||||
text.textContent = message;
|
||||
meldung.classList.remove('hidden');
|
||||
document.getElementById('erfolg-meldung').classList.add('hidden');
|
||||
meldung.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}
|
||||
|
||||
async loadBerichte() {
|
||||
await this.loadBerichtBetrieb();
|
||||
await this.loadBerichtKurs();
|
||||
}
|
||||
|
||||
async loadBerichtBetrieb() {
|
||||
try {
|
||||
const bericht = await API.getBerichtBetrieb();
|
||||
const container = document.getElementById('betrieb-bericht');
|
||||
|
||||
container.innerHTML = `
|
||||
<table class="bericht-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Betrieb</th>
|
||||
<th>Anzahl Schüler</th>
|
||||
<th>Anmeldungen</th>
|
||||
<th>Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${bericht
|
||||
.map(
|
||||
(b) => `
|
||||
<tr>
|
||||
<td>
|
||||
<strong>${b.betrieb_name}</strong><br>
|
||||
<small>${b.adresse}</small>
|
||||
</td>
|
||||
<td>${b.anzahl_schueler}</td>
|
||||
<td>${b.anzahl_anmeldungen}</td>
|
||||
<td>
|
||||
${
|
||||
b.schueler.length > 0
|
||||
? `
|
||||
<ul class="detail-liste">
|
||||
${b.schueler
|
||||
.map((s) => `<li>${s.vorname} ${s.nachname} - ${s.angemeldete_kurse}</li>`)
|
||||
.join('')}
|
||||
</ul>
|
||||
`
|
||||
: 'Keine Anmeldungen'
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
`
|
||||
)
|
||||
.join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden des Berichts:', error);
|
||||
document.getElementById('betrieb-bericht').innerHTML =
|
||||
'<div class="meldung fehler">Fehler beim Laden der Berichte</div>';
|
||||
if (error.message.includes('Nicht angemeldet') || error.message.includes('Zugriff')) {
|
||||
this.switchView('login');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async loadBerichtKurs() {
|
||||
try {
|
||||
const bericht = await API.getBerichtKurs();
|
||||
const container = document.getElementById('kurs-bericht');
|
||||
|
||||
container.innerHTML = `
|
||||
<table class="bericht-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Kurs</th>
|
||||
<th>Teilnehmer</th>
|
||||
<th>Auslastung</th>
|
||||
<th>Details</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${bericht
|
||||
.map(
|
||||
(k) => `
|
||||
<tr>
|
||||
<td><strong>${k.kurs_name}</strong></td>
|
||||
<td>${k.anzahl_teilnehmer} / ${k.max_teilnehmer}</td>
|
||||
<td>
|
||||
<div style="background: var(--border); border-radius: 10px; overflow: hidden;">
|
||||
<div style="width: ${k.auslastung_prozent}%; background: var(--primary); padding: 5px; color: white; text-align: center; min-width: 20px;">
|
||||
${k.auslastung_prozent}%
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
${
|
||||
k.teilnehmer.length > 0
|
||||
? `
|
||||
<ul class="detail-liste">
|
||||
${k.teilnehmer
|
||||
.map((t) => `<li>${t.vorname} ${t.nachname} (${t.betrieb_name})</li>`)
|
||||
.join('')}
|
||||
</ul>
|
||||
`
|
||||
: 'Keine Anmeldungen'
|
||||
}
|
||||
</td>
|
||||
</tr>
|
||||
`
|
||||
)
|
||||
.join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
`;
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Laden des Berichts:', error);
|
||||
document.getElementById('kurs-bericht').innerHTML =
|
||||
'<div class="meldung fehler">Fehler beim Laden der Berichte</div>';
|
||||
if (error.message.includes('Nicht angemeldet') || error.message.includes('Zugriff')) {
|
||||
this.switchView('login');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async loadRechnungsOptionen() {
|
||||
// Betriebe werden bereits geladen
|
||||
}
|
||||
|
||||
async handleRechnungErstellen() {
|
||||
const betriebId = document.getElementById('rechnung-betrieb').value;
|
||||
if (!betriebId) {
|
||||
alert('Bitte wählen Sie einen Betrieb aus.');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const rechnung = await API.getRechnung(betriebId);
|
||||
this.renderRechnung(rechnung);
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Erstellen der Rechnung:', error);
|
||||
alert('Fehler beim Erstellen der Rechnung: ' + error.message);
|
||||
if (error.message.includes('Nicht angemeldet') || error.message.includes('Zugriff')) {
|
||||
this.switchView('login');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
renderRechnung(rechnung) {
|
||||
const container = document.getElementById('rechnung-container');
|
||||
container.innerHTML = `
|
||||
<div class="rechnung">
|
||||
<div class="rechnung-header">
|
||||
<div>
|
||||
<h3>RECHNUNG</h3>
|
||||
<p><strong>Rechnungsnummer:</strong> ${rechnung.rechnungsnummer}</p>
|
||||
<p><strong>Datum:</strong> ${new Date(rechnung.datum).toLocaleDateString('de-DE')}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4>Schulverwaltung</h4>
|
||||
<p>Musterstraße 123</p>
|
||||
<p>12345 Musterstadt</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4>Rechnungsempfänger:</h4>
|
||||
<p><strong>${rechnung.betrieb.name}</strong></p>
|
||||
<p>${rechnung.betrieb.adresse}</p>
|
||||
<p>${rechnung.betrieb.email}</p>
|
||||
</div>
|
||||
|
||||
<h4 style="margin-top: 30px;">Kursanmeldungen:</h4>
|
||||
<table class="rechnung-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Kurs</th>
|
||||
<th>Anzahl Teilnehmer</th>
|
||||
<th>Gebühr pro Teilnehmer</th>
|
||||
<th>Gesamt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${rechnung.zusammenfassung
|
||||
.map(
|
||||
(z) => `
|
||||
<tr>
|
||||
<td>${z.kurs_name}</td>
|
||||
<td>${z.anzahl_teilnehmer}</td>
|
||||
<td>${z.gebuehr}€</td>
|
||||
<td>${z.gesamt_kurs}€</td>
|
||||
</tr>
|
||||
`
|
||||
)
|
||||
.join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="rechnung-summe">
|
||||
<div>Netto: ${rechnung.netto.toFixed(2)}€</div>
|
||||
<div>MwSt. (${rechnung.mwst_satz}%): ${rechnung.mwst_betrag.toFixed(2)}€</div>
|
||||
<div class="gesamt">Gesamt: ${rechnung.gesamtsumme.toFixed(2)}€</div>
|
||||
</div>
|
||||
|
||||
<p style="margin-top: 30px; font-size: 0.9em; color: var(--text-secondary);">
|
||||
Bitte überweisen Sie den Betrag innerhalb von 14 Tagen unter Angabe der Rechnungsnummer.
|
||||
</p>
|
||||
|
||||
<button class="btn-primary" onclick="window.print()" style="margin-top: 20px;">Rechnung drucken</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
new SportAnmeldungApp();
|
||||
});
|
||||
15
js/config.js
Normal file
15
js/config.js
Normal file
@@ -0,0 +1,15 @@
|
||||
const API_CONFIG = {
|
||||
baseUrl: 'http://127.0.0.1:8000',
|
||||
endpoints: {
|
||||
kurse: '/api/kurse',
|
||||
betriebe: '/api/betriebe',
|
||||
anmeldung: '/api/anmeldung',
|
||||
berichtBetrieb: '/api/berichte/teilnehmer-pro-betrieb',
|
||||
berichtKurs: '/api/berichte/teilnehmer-pro-kurs',
|
||||
rechnung: '/api/rechnungen/betrieb/',
|
||||
login: '/api/auth/login',
|
||||
logout: '/api/auth/logout',
|
||||
me: '/api/auth/me',
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user