-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
637 lines (609 loc) · 41.2 KB
/
index.html
File metadata and controls
637 lines (609 loc) · 41.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="alternate icon" href="/favicon.svg">
<title>Semesterplan Visualisierung</title>
<style>
.area-block {
border-left-width: 4px; /* Stellt sicher, dass der linke Rand immer da ist */
}
.sort-indicator {
display: inline-block;
width: 1em; /* Platzhalter für Icons */
text-align: center;
}
/* Style für Filter Builder Zeilen */
.filter-condition-row select,
.filter-condition-row input {
min-width: 100px; /* Mindestbreite für Lesbarkeit */
}
</style>
</head>
<body class="bg-neutral-50">
<div class="container mx-auto p-4">
<!-- Header (unverändert) -->
<div class="flex flex-wrap justify-between items-center mb-6 gap-1">
<h1 class="text-3xl font-bold">Semesterplan Visualisierung</h1>
<!-- NEU: Startsemester Eingabe -->
<div class="flex items-center gap-2 mt-2 md:mt-0">
<label for="startYearInput" class="text-sm font-medium text-gray-700">Studienstart:</label>
<select id="startSemesterType" class="border p-1 rounded text-sm bg-white w-20">
<option value="WiSe">WiSe</option>
<option value="SoSe">SoSe</option>
</select>
<input type="number" id="startYearInput" placeholder="Jahr (z.B. 2023)" value="2023" min="2000" max="3099" class="border p-1 rounded text-sm w-16">
<button id="saveStartSemesterBtn" class="bg-indigo-500 hover:bg-indigo-600 text-white px-2 py-1 rounded text-xs">Speichern</button>
</div>
<!-- Export/Import/Scraper Buttons -->
<div class="flex flex-wrap gap-2 mt-2 md:mt-0">
<button id="exportButton" onclick="window.importExport.exportStudyPlan(areas, courses, startSemester)" class="bg-purple-500 hover:bg-purple-600 text-white p-2 rounded">
<i class="fas fa-file-export mr-1"></i>Plan (JSON)
</button>
<!-- NEU: Word Export Buttons -->
<button id="exportWordAreaButton" class="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded">
<i class="fas fa-file-word mr-1"></i>Plan (Word - Bereiche)
</button>
<button id="exportWordGridButton" class="bg-sky-500 hover:bg-sky-600 text-white p-2 rounded"> <!-- Andere Farbe -->
<i class="fas fa-file-word mr-1"></i>Plan (Word - Semester)
</button>
<button id="importButton" class="bg-purple-700 hover:bg-purple-800 text-white p-2 rounded">
<i class="fas fa-file-import mr-1"></i>Plan (JSON)
</button>
<a href="module-scraper.html" class="bg-teal-500 hover:bg-teal-600 text-white p-2 rounded inline-block">
<i class="fas fa-download mr-1"></i>Module holen
</a>
</div>
</div>
<!-- Bereich hinzufügen Form (Validierungstext angepasst) -->
<div class="mb-6 bg-white p-4 rounded shadow">
<h2 class="text-xl font-semibold mb-3">Bereich hinzufügen</h2>
<form id="addAreaForm" class="space-y-3">
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<div>
<label for="areaInput" class="block text-sm font-medium text-gray-700">Bereichsname *</label>
<div class="relative">
<input id="areaInput" type="text" placeholder="Bereich hinzufügen" class="border p-2 w-full rounded">
<div id="areaAutocompleteResults" class="absolute z-10 bg-white border shadow-lg rounded-md w-full max-h-60 overflow-y-auto hidden"></div>
</div>
<p id="areaInputError" class="text-red-500 text-xs mt-1 hidden">Bitte geben Sie einen Bereichsnamen ein.</p>
</div>
<div>
<label for="areaCreditPointsInput" class="block text-sm font-medium text-gray-700">Leistungspunkte (LP)</label>
<!-- min="0" ist der Standard für type=number, min Attribut nicht nötig -->
<input id="areaCreditPointsInput" type="number" placeholder="LP" value="6" class="border p-2 w-full rounded">
<!-- Fehlertext angepasst: Nur negativ ist verboten -->
<p id="areaCreditPointsError" class="text-red-500 text-xs mt-1 hidden">LP dürfen nicht negativ sein.</p>
</div>
<div>
<label for="parentAreaSelect" class="block text-sm font-medium text-gray-700">Übergeordneter Bereich</label>
<select id="parentAreaSelect" class="border p-2 w-full rounded">
<option value="">Kein Übergeordneter Bereich</option>
</select>
</div>
</div>
<div>
<button type="submit" class="bg-green-500 hover:bg-green-600 text-white p-2 rounded">Bereich hinzufügen</button>
</div>
</form>
</div>
<!-- Module hinzufügen Form (unverändert) -->
<div class="mb-6 bg-white p-4 rounded shadow">
<h2 class="text-xl font-semibold mb-3">Modul hinzufügen</h2>
<form id="addModuleForm" class="space-y-3">
<!-- ... unveränderter Formularinhalt ... -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<div>
<label for="moduleTitleInput" class="block text-sm font-medium text-gray-700">Modultitel *</label>
<div class="relative">
<input id="moduleTitleInput" type="text" placeholder="Modultitel" class="border p-2 w-full rounded">
<div id="moduleAutocompleteResults" class="absolute z-10 bg-white border shadow-lg rounded-md w-full max-h-60 overflow-y-auto hidden"></div>
<div class="text-xs text-gray-500 mt-1">
<span id="moduleDbCount">0</span> Module in der Datenbank <!-- ID korrigiert -->
</div>
</div>
<p id="moduleTitleError" class="text-red-500 text-xs mt-1 hidden">Bitte geben Sie einen Modultitel ein.</p>
</div>
<div>
<label for="moduleAreaSelect" class="block text-sm font-medium text-gray-700">Bereich *</label>
<select id="moduleAreaSelect" class="border p-2 w-full rounded">
<option value="">Bereich auswählen</option>
</select>
<p id="moduleAreaError" class="text-red-500 text-xs mt-1 hidden">Bitte wählen Sie einen Bereich aus.</p>
</div>
<div>
<label for="moduleSemesterInput" class="block text-sm font-medium text-gray-700">Semester *</label>
<input id="moduleSemesterInput" type="number" min="1" placeholder="Semester" value="1" class="border p-2 w-full rounded">
<p id="moduleSemesterError" class="text-red-500 text-xs mt-1 hidden">Bitte geben Sie ein gültiges Semester ein.</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<div>
<label for="moduleCreditPointsInput" class="block text-sm font-medium text-gray-700">Leistungspunkte (LP) *</label>
<input id="moduleCreditPointsInput" type="number" min="1" placeholder="LP" value="6" class="border p-2 w-full rounded">
<p id="moduleCreditPointsError" class="text-red-500 text-xs mt-1 hidden">Bitte geben Sie eine positive Anzahl von LP ein.</p>
</div>
<div>
<label for="moduleResponsibleInput" class="block text-sm font-medium text-gray-700">Verantwortlicher</label>
<div class="relative">
<input id="moduleResponsibleInput" type="text" placeholder="Verantwortlicher (optional)" class="border p-2 w-full rounded">
<div id="responsibleAutocompleteResults" class="absolute z-10 bg-white border shadow-lg rounded-md w-full max-h-40 overflow-y-auto hidden"></div>
</div>
</div>
<div>
<label for="moduleExamTypeInput" class="block text-sm font-medium text-gray-700">Prüfungsform</label>
<select id="moduleExamTypeInput" class="border p-2 w-full rounded">
<option value="schriftlich" selected>Schriftlich</option>
<option value="mündlich">Mündlich</option>
<option value="Projekt">Projekt</option>
<option value="Portfolio">Portfolio</option>
<option value="Bericht">Bericht</option>
<option value="Präsentation">Präsentation</option>
<option value="Hausarbeit">Hausarbeit</option>
<option value="Protokoll">Protokoll</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<div>
<label for="moduleLanguageSelect" class="block text-sm font-medium text-gray-700">Sprache</label>
<select id="moduleLanguageSelect" class="border p-2 w-full rounded">
<option value="de" selected>Deutsch</option>
<option value="en">Englisch</option>
<option value="de/en">Deutsch/Englisch</option>
</select>
</div>
<div>
<label for="moduleDepartmentInput" class="block text-sm font-medium text-gray-700">Fachgebiet</label>
<div class="relative">
<input id="moduleDepartmentInput" type="text" placeholder="Fachgebiet (optional)" class="border p-2 w-full rounded">
<div id="departmentAutocompleteResults" class="absolute z-10 bg-white border shadow-lg rounded-md w-full max-h-40 overflow-y-auto hidden"></div>
</div>
</div>
<div>
<label for="moduleSemesterOfferedSelect" class="block text-sm font-medium text-gray-700">Turnus</label>
<select id="moduleSemesterOfferedSelect" class="border p-2 w-full rounded">
<option value="SoSe">Sommersemester</option>
<option value="WiSe">Wintersemester</option>
<option value="Beides" selected>Beides</option>
<option value="">k.A.</option>
</select>
</div>
</div>
<div>
<label for="moduleDescriptionInput" class="block text-sm font-medium text-gray-700">Beschreibung</label>
<textarea id="moduleDescriptionInput" placeholder="Beschreibung (optional)" class="border p-2 w-full rounded" rows="1"></textarea> <!-- rows="1" -->
</div>
<div>
<label for="moduleLinkInput" class="block text-sm font-medium text-gray-700">Link</label>
<input id="moduleLinkInput" type="url" placeholder="https://... (optional)" class="border p-2 w-full rounded">
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Art</label>
<div class="flex flex-wrap gap-x-4 gap-y-1 mt-1"> <!-- Weniger vertikaler Gap -->
<label class="inline-flex items-center">
<input type="checkbox" name="moduleType" value="IV" class="form-checkbox h-4 w-4 text-blue-600 rounded"> <!-- Kleiner -->
<span class="ml-1.5 text-sm">IV</span> <!-- Weniger ml -->
</label>
<label class="inline-flex items-center">
<input type="checkbox" name="moduleType" value="VL" class="form-checkbox h-4 w-4 text-blue-600 rounded">
<span class="ml-1.5 text-sm">VL</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" name="moduleType" value="TUT" class="form-checkbox h-4 w-4 text-blue-600 rounded">
<span class="ml-1.5 text-sm">TUT</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" name="moduleType" value="UE" class="form-checkbox h-4 w-4 text-blue-600 rounded">
<span class="ml-1.5 text-sm">UE</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" name="moduleType" value="PJ" class="form-checkbox h-4 w-4 text-blue-600 rounded">
<span class="ml-1.5 text-sm">PJ</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" name="moduleType" value="SE" class="form-checkbox h-4 w-4 text-blue-600 rounded">
<span class="ml-1.5 text-sm">SE</span>
</label>
</div>
</div>
<div>
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" id="moduleProvisionalCheckbox" class="form-checkbox h-4 w-4 text-orange-600 rounded">
<span class="ml-2 text-sm font-medium text-gray-700">Unter Vorbehalt hinzufügen</span>
<span class="ml-1 text-gray-400 cursor-help" title="Module unter Vorbehalt werden nicht in die LP-Summen einberechnet und erscheinen ausgegraut in der Übersicht">
<i data-lucide="info" class="inline-block size-4"></i>
</span>
</label>
<p class="text-xs text-gray-500 mt-1 ml-6">Module unter Vorbehalt werden nicht in die LP-Summen einberechnet</p>
</div>
<div>
<button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded">Modul hinzufügen</button>
</div>
</form>
</div>
<!-- Layout Container -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<!-- Bereichsübersicht -->
<div>
<h2 class="text-xl font-semibold mb-2">Bereichsübersicht</h2>
<!-- Container mit weniger Außenabstand -->
<div id="areasContainer" class="space-y-1.5"> <!-- Weniger Abstand zwischen Bereichen -->
<!-- Bereiche und Module werden hier angezeigt (Styling in JS angepasst) -->
</div>
</div>
<!-- Semesterübersicht -->
<div>
<h2 class="text-xl font-semibold mb-2">Semesterübersicht
<span id="totalSemesterLPs" class="text-base font-normal ml-2 text-gray-600"></span>
</h2>
<!-- Container mit weniger Außenabstand -->
<div id="semesterContainer" class="space-y-2"> <!-- Weniger Abstand zwischen Semestern -->
<!-- Semester wird hier angezeigt (Styling in JS angepasst) -->
</div>
</div>
</div>
<!-- Modul-Datenbank -->
<div class="mb-6 bg-white p-4 rounded shadow">
<div class="flex justify-between items-center mb-3">
<h2 class="text-xl font-semibold">Modul-Datenbank</h2>
<div class="flex gap-2">
<button id="exportDatabaseButton" class="bg-purple-500 hover:bg-purple-600 text-white px-2 py-1 rounded text-sm">
<i class="fas fa-file-export mr-1"></i>DB Exportieren
</button>
<button id="importDatabaseButton" class="bg-purple-700 hover:bg-purple-800 text-white px-2 py-1 rounded text-sm">
<i class="fas fa-file-import mr-1"></i>DB Importieren
</button>
</div>
</div>
<p class="text-sm text-gray-600 mb-2"><span id="moduleDatabaseCount">0</span> Module verfügbar</p>
<!-- NEU: Filter- und Suchleiste -->
<div class="mb-4 p-3 bg-gray-50 rounded border border-gray-200 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-3 items-end"> <!-- 5 Spalten für neue Checkbox -->
<div>
<label for="dbSearchInput" class="block text-xs font-medium text-gray-600 mb-1">Suche</label>
<input type="search" id="dbSearchInput" placeholder="Titel, Bereich, etc." class="border p-1.5 w-full rounded text-sm">
</div>
<div>
<label for="dbAreaFilterSelect" class="block text-xs font-medium text-gray-600 mb-1">Bereich Filter</label>
<select id="dbAreaFilterSelect" class="border p-1.5 w-full rounded text-sm bg-white">
<option value="">Alle Bereiche</option>
<!-- Optionen via JS -->
</select>
</div>
<!-- Erweiterte Filter -->
<div class="md:col-span-2 flex flex-wrap gap-2 items-end">
<div>
<label for="dbSavedFilterSelect" class="block text-xs font-medium text-gray-600 mb-1">Gespeicherte Filter</label>
<select id="dbSavedFilterSelect" class="border p-1.5 w-full rounded text-sm bg-white">
<option value="">Kein Filter</option>
<!-- Optionen via JS -->
</select>
</div>
<button id="openFilterBuilderBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-2.5 py-1.5 rounded text-sm" title="Erweiterten Filter erstellen/bearbeiten">
<i class="fas fa-filter"></i>
</button>
<button id="clearFiltersBtn" class="bg-gray-400 hover:bg-gray-500 text-white px-2.5 py-1.5 rounded text-sm" title="Alle Filter zurücksetzen">
<i class="fas fa-times"></i>
</button>
<button id="saveCurrentFilterBtn" class="bg-green-500 hover:bg-green-600 text-white px-2.5 py-1.5 rounded text-sm" title="Aktuelle Filterkonfiguration speichern">
<i class="fas fa-save"></i>
</button>
</div>
<!-- NEU: Checkbox für ausgeblendete Module -->
<div class="flex items-center justify-start md:justify-end h-full pb-1"> <!-- Ausrichtung und Höhe anpassen -->
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" id="showHiddenDbModules" class="form-checkbox h-4 w-4 text-blue-600 rounded">
<span class="ml-1.5 text-xs text-gray-700">Ausgeblendete anzeigen</span>
</label>
</div>
</div>
<!-- Tabelle -->
<div class="overflow-x-auto max-h-[70vh]"> <!-- Größere max-h -->
<table class="min-w-full border-collapse text-sm"> <!-- text-sm für Tabelle -->
<thead class="sticky top-0 bg-gray-100 z-10">
<tr>
<!-- Header klickbar machen mit data-sort-by -->
<th class="border p-2 text-left cursor-pointer hover:bg-gray-200" data-sort-by="title">
Titel <span class="sort-indicator"></span>
</th>
<!-- NEU: Bereich -->
<th class="border p-2 text-left cursor-pointer hover:bg-gray-200" data-sort-by="areaName">
Bereich <span class="sort-indicator"></span>
</th>
<th class="border p-2 text-left cursor-pointer hover:bg-gray-200" data-sort-by="creditPoints">
LP <span class="sort-indicator"></span>
</th>
<th class="border p-2 text-left cursor-pointer hover:bg-gray-200" data-sort-by="examType">
Prüfungsform <span class="sort-indicator"></span>
</th>
<th class="border p-2 text-left cursor-pointer hover:bg-gray-200" data-sort-by="semester_offered">
Turnus <span class="sort-indicator"></span>
</th>
<!-- NEU: Aktualisiert -->
<th class="border p-2 text-left cursor-pointer hover:bg-gray-200" data-sort-by="lastUpdated">
Aktualisiert <span class="sort-indicator"></span>
</th>
<th class="border p-2 text-left">Aktionen</th>
</tr>
</thead>
<tbody id="moduleDatabaseTable">
<!-- Inhalt via JS -->
<tr>
<td class="border p-2" colspan="9">Lade Module...</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- NEU: Advanced Filter Builder Modal -->
<div id="filterBuilderModal" class="fixed inset-0 bg-gray-800 bg-opacity-50 hidden flex items-center justify-center z-50">
<div class="bg-white rounded-lg p-6 w-full max-w-3xl shadow-xl max-h-[90vh] overflow-y-auto">
<div class="flex justify-between items-center mb-4 border-b pb-2">
<h3 class="text-xl font-semibold">Erweiterter Filter Builder</h3>
<button id="closeFilterBuilderBtn" type="button" class="text-gray-400 hover:text-gray-600 text-2xl leading-none">×</button>
</div>
<div class="space-y-4">
<!-- Filter Name (optional beim Speichern) -->
<div>
<label for="filterNameInput" class="block text-sm font-medium text-gray-700 mb-1">Filtername (zum Speichern)</label>
<input type="text" id="filterNameInput" placeholder="z.B. Kernbereich WiSe > 3 LP" class="border p-2 w-full rounded text-sm">
</div>
<!-- Logik zwischen Gruppen -->
<div class="flex items-center space-x-4">
<span class="text-sm font-medium">Logik:</span>
<label class="inline-flex items-center">
<input type="radio" name="filterLogic" value="AND" class="form-radio h-4 w-4 text-blue-600" checked>
<span class="ml-2 text-sm">Alle Bedingungen müssen zutreffen (AND)</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="filterLogic" value="OR" class="form-radio h-4 w-4 text-blue-600">
<span class="ml-2 text-sm">Mindestens eine Bedingung muss zutreffen (OR)</span>
</label>
</div>
<!-- Filter Bedingungen Container -->
<div id="filterConditionsContainer" class="space-y-3 border p-3 rounded bg-gray-50">
<!-- Filterzeilen werden hier via JS eingefügt -->
<p id="noFiltersText" class="text-sm text-gray-500">Noch keine Bedingungen hinzugefügt.</p>
</div>
<!-- Button zum Hinzufügen einer Bedingung -->
<button id="addFilterConditionBtn" type="button" class="bg-green-500 hover:bg-green-600 text-white px-3 py-1 rounded text-sm">
<i class="fas fa-plus mr-1"></i> Bedingung hinzufügen
</button>
</div>
<!-- Modal Buttons -->
<div class="flex justify-end gap-3 pt-3 border-t mt-6">
<button type="button" id="cancelFilterBuilderBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded text-sm">Abbrechen</button>
<button type="button" id="applyFilterBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded text-sm">Filter anwenden</button>
<button type="button" id="saveAndApplyFilterBtn" class="bg-teal-500 hover:bg-teal-600 text-white px-4 py-2 rounded text-sm">Filter speichern & anwenden</button>
</div>
</div>
</div>
<!-- Area Edit Modal -->
<div id="areaEditModal" class="fixed inset-0 bg-gray-800 bg-opacity-50 hidden flex items-center justify-center z-50">
<div class="bg-white rounded-lg p-6 w-full max-w-2xl">
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold">Bereich bearbeiten</h3>
<button id="closeAreaModalBtn" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<form id="editAreaForm" class="space-y-4">
<input type="hidden" id="editAreaId">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="editAreaName" class="block text-sm font-medium text-gray-700">Name*</label>
<input type="text" id="editAreaName" class="border p-2 w-full rounded" required>
</div>
<div>
<label for="editAreaLP" class="block text-sm font-medium text-gray-700">Leistungspunkte</label>
<!-- min="0" ist Standard -->
<input type="number" id="editAreaLP" min="0" class="border p-2 w-full rounded" required>
<!-- Fehlertext angepasst -->
<p id="editAreaLPError" class="text-red-500 text-xs mt-1 hidden">LP dürfen nicht negativ sein.</p>
</div>
</div>
<div>
<label for="editAreaParent" class="block text-sm font-medium text-gray-700">Übergeordneter Bereich</label>
<select id="editAreaParent" class="border p-2 w-full rounded">
<option value="">Kein Übergeordneter Bereich</option>
</select>
</div>
<div class="flex justify-end gap-2">
<button type="button" id="cancelAreaEditBtn" class="bg-gray-300 hover:bg-gray-400 px-4 py-2 rounded">Abbrechen</button>
<button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">Speichern</button>
</div>
</form>
</div>
</div>
<!-- Module Edit Modal (weitgehend unverändert, nur zur Vollständigkeit) -->
<div id="moduleEditModal" class="fixed inset-0 bg-gray-800 bg-opacity-50 hidden flex items-center justify-center z-50">
<div class="bg-white rounded-lg p-6 w-full max-w-2xl overflow-y-auto max-h-[90vh]"> <!-- Scrollbar hinzugefügt -->
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold">Modul bearbeiten</h3>
<button id="closeModuleModalBtn" class="text-gray-500 hover:text-gray-700">
<i class="fas fa-times"></i>
</button>
</div>
<form id="editModuleForm" class="space-y-4">
<input type="hidden" id="editModuleId">
<!-- Titel und LP -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="editModuleTitle" class="block text-sm font-medium text-gray-700">Titel*</label>
<input type="text" id="editModuleTitle" class="border p-2 w-full rounded" required>
</div>
<div>
<label for="editModuleLP" class="block text-sm font-medium text-gray-700">Leistungspunkte*</label>
<input type="number" id="editModuleLP" min="1" class="border p-2 w-full rounded" required>
</div>
</div>
<!-- Semester und Bereich -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div id="editModuleSemesterContainer"> <!-- Container für Semester -->
<label for="editModuleSemester" class="block text-sm font-medium text-gray-700">Semester*</label>
<input type="number" id="editModuleSemester" min="1" class="border p-2 w-full rounded" required>
</div>
<div id="editModuleAreaContainer"> <!-- Container für Bereich -->
<label for="editModuleArea" class="block text-sm font-medium text-gray-700">Bereich*</label>
<!-- Wird dynamisch als Select oder Input erstellt -->
<select id="editModuleArea" class="border p-2 w-full rounded" required>
<option value="">Bitte wählen</option>
</select>
</div>
</div>
<!-- Prüfungsform und Sprache -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="editModuleExamType" class="block text-sm font-medium text-gray-700">Prüfungsform</label>
<select id="editModuleExamType" class="border p-2 w-full rounded">
<option value="schriftlich">Schriftlich</option>
<option value="mündlich">Mündlich</option>
<option value="Projekt">Projekt</option>
<option value="Portfolio">Portfolio</option>
<option value="Bericht">Bericht</option>
<option value="Präsentation">Präsentation</option>
<option value="Hausarbeit">Hausarbeit</option>
</select>
</div>
<div>
<label for="editModuleLanguage" class="block text-sm font-medium text-gray-700">Sprache</label>
<select id="editModuleLanguage" class="border p-2 w-full rounded">
<option value="de">Deutsch</option>
<option value="en">Englisch</option>
<option value="de/en">Deutsch/Englisch</option>
</select>
</div>
</div>
<!-- Verantwortlicher und Fachgebiet (nur für Kursmodule) -->
<div id="editModuleCourseSpecificFields" class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="editModuleResponsible" class="block text-sm font-medium text-gray-700">Verantwortlicher</label>
<input type="text" id="editModuleResponsible" class="border p-2 w-full rounded">
</div>
<div>
<label for="editModuleDepartment" class="block text-sm font-medium text-gray-700">Fachgebiet</label>
<input type="text" id="editModuleDepartment" class="border p-2 w-full rounded">
</div>
</div>
<!-- Turnus -->
<div>
<label for="editModuleOffered" class="block text-sm font-medium text-gray-700">Turnus</label>
<select id="editModuleOffered" class="border p-2 w-full rounded">
<option value="SoSe">Sommersemester</option>
<option value="WiSe">Wintersemester</option>
<option value="Beides">Beides</option>
<option value="">k.A.</option>
</select>
</div>
<!-- Art (nur für Kursmodule) -->
<div id="editModuleTypeSpecificContainer">
<label class="block text-sm font-medium text-gray-700">Art</label>
<div class="flex flex-wrap gap-4 mt-1" id="editModuleTypeContainer">
<label class="inline-flex items-center">
<input type="checkbox" name="editModuleType" value="IV" class="form-checkbox h-5 w-5 text-blue-600 rounded">
<span class="ml-2 text-sm">IV</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" name="editModuleType" value="VL" class="form-checkbox h-5 w-5 text-blue-600 rounded">
<span class="ml-2 text-sm">VL</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" name="editModuleType" value="TUT" class="form-checkbox h-5 w-5 text-blue-600 rounded">
<span class="ml-2 text-sm">TUT</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" name="editModuleType" value="UE" class="form-checkbox h-5 w-5 text-blue-600 rounded">
<span class="ml-2 text-sm">UE</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" name="editModuleType" value="PJ" class="form-checkbox h-5 w-5 text-blue-600 rounded">
<span class="ml-2 text-sm">PJ</span>
</label>
<label class="inline-flex items-center">
<input type="checkbox" name="editModuleType" value="SE" class="form-checkbox h-5 w-5 text-blue-600 rounded">
<span class="ml-2 text-sm">SE</span>
</label>
</div>
</div>
<!-- Unter Vorbehalt Checkbox (nur für Plan-Module) -->
<div id="editModuleProvisionalContainer">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" id="editModuleProvisionalCheckbox" class="form-checkbox h-4 w-4 text-orange-600 rounded">
<span class="ml-2 text-sm font-medium text-gray-700">Unter Vorbehalt</span>
<span class="ml-1 text-gray-400 cursor-help" title="Module unter Vorbehalt werden nicht in die LP-Summen einberechnet und erscheinen ausgegraut in der Übersicht">
<i data-lucide="info" class="inline-block size-4"></i>
</span>
</label>
<p class="text-xs text-gray-500 mt-1 ml-6">Module unter Vorbehalt werden nicht in die LP-Summen einberechnet</p>
</div>
<!-- Ausblenden Checkbox (nur für DB-Module) -->
<div id="editModuleHiddenContainer" class="hidden">
<label class="inline-flex items-center cursor-pointer">
<input type="checkbox" id="editModuleHiddenCheckbox" class="form-checkbox h-4 w-4 text-gray-600 rounded">
<span class="ml-2 text-sm font-medium text-gray-700">Modul ausblenden</span>
<span class="ml-1 text-gray-400 cursor-help" title="Ausgeblendete Module werden in der Datenbank grau dargestellt und können nicht zum Plan hinzugefügt werden">
<i data-lucide="info" class="inline-block size-4"></i>
</span>
</label>
<p class="text-xs text-gray-500 mt-1 ml-6">Ausgeblendete Module sind nur noch in der Datenbank sichtbar</p>
</div>
<!-- Buttons -->
<div class="flex justify-end gap-2 sticky bottom-0 bg-white py-3"> <!-- Sticky Buttons -->
<button type="button" id="cancelModuleEditBtn" class="bg-gray-300 hover:bg-gray-400 px-4 py-2 rounded">Abbrechen</button>
<button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">Speichern</button>
</div>
</form>
</div>
</div>
</div>
<div id="dbModuleAddModal" class="fixed inset-0 bg-gray-800 bg-opacity-50 hidden flex items-center justify-center z-50">
<div class="bg-white rounded-lg p-6 w-full max-w-lg shadow-xl">
<div class="flex justify-between items-center mb-4 border-b pb-2">
<h3 class="text-xl font-semibold">Modul zum Plan hinzufügen</h3>
<button id="closeDbAddModalBtn" type="button" class="text-gray-400 hover:text-gray-600 text-2xl leading-none">×</button>
</div>
<form id="dbModuleAddForm" class="space-y-4">
<div class="mb-3">
<p class="text-sm text-gray-600">Modul:</p>
<p><strong id="dbModalModuleName" class="text-base"></strong> (<span id="dbModalModuleLP" class="text-sm"></span> LP)</p>
<p class="text-xs text-gray-500 mt-1">Turnus: <span id="dbModalModuleTurnus"></span></p> <!-- Turnus Info -->
</div>
<div class="mb-3">
<label for="dbModuleAreaSelect" class="block text-sm font-medium text-gray-700 mb-1">Bereich zuordnen *</label>
<select id="dbModuleAreaSelect" class="border p-2 w-full rounded" required>
<option value="">Bitte wählen...</option>
</select>
<p id="dbModalAreaError" class="text-red-500 text-xs mt-1 hidden">Bitte wählen Sie einen Bereich.</p>
</div>
<!-- Semester Auswahl mit Vorschlägen -->
<div class="mb-4">
<label for="dbModuleSemesterInput" class="block text-sm font-medium text-gray-700 mb-1">Semester zuordnen *</label>
<div class="flex items-center gap-2">
<input type="number" id="dbModuleSemesterInput" min="1" value="1" class="border p-2 w-40 rounded" required> <!-- Breite angepasst -->
<!-- NEU: Container für Semestervorschläge -->
<div id="dbModuleSemesterSuggestions" class="flex flex-wrap gap-1">
<!-- Vorschläge werden hier via JS eingefügt -->
</div>
</div>
<p id="dbModalSemesterError" class="text-red-500 text-xs mt-1 hidden">Bitte geben Sie ein gültiges Semester (>= 1) ein.</p>
</div>
<input type="hidden" id="dbModalModuleData">
<div class="flex justify-end gap-3 pt-3 border-t mt-4">
<button type="button" id="cancelDbAddBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded text-sm">Abbrechen</button>
<button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded text-sm">Hinzufügen</button>
</div>
</form>
</div>
</div>
</div>
<script src="module-database.js"></script>
<script src="import-export.js"></script>
<script src="app.js"></script>
</body>
</html>