feat: add employee input fields and PDF export buttons
- Added input fields for employee name and ID in settings. - Introduced a button for exporting the current month as a PDF. - Added a button for bulk exporting selected entries as a PDF. - Included jsPDF and jsPDF-AutoTable libraries for PDF generation.
This commit is contained in:
936
public/app.js
936
public/app.js
File diff suppressed because it is too large
Load Diff
@@ -447,6 +447,18 @@
|
||||
<span class="text-lg">⚙️</span>
|
||||
<span>Einstellungen</span>
|
||||
</summary>
|
||||
<div class="mt-4 flex flex-wrap gap-4 items-center">
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label for="employeeName" class="block text-sm font-medium text-gray-300 mb-1">Mitarbeitername</label>
|
||||
<input type="text" id="employeeName" placeholder="Max Mustermann"
|
||||
class="w-full px-4 py-2 border border-gray-600 bg-gray-700 text-gray-100 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
||||
</div>
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label for="employeeId" class="block text-sm font-medium text-gray-300 mb-1">Personalnummer</label>
|
||||
<input type="text" id="employeeId" placeholder="12345"
|
||||
class="w-full px-4 py-2 border border-gray-600 bg-gray-700 text-gray-100 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex flex-wrap gap-4 items-center">
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label for="bundeslandSelect" class="block text-sm font-medium text-gray-300 mb-1">Bundesland (Feiertage)</label>
|
||||
@@ -560,6 +572,11 @@
|
||||
<i data-lucide="calendar-check" class="w-5 h-5"></i>
|
||||
<span>Ausfüllen</span>
|
||||
</button>
|
||||
<button id="btnExportPDF"
|
||||
class="btn-elevated inline-flex items-center gap-2 px-5 py-3 bg-gradient-to-r from-red-600 to-red-500 text-white rounded-xl font-semibold" title="Monat als PDF exportieren">
|
||||
<i data-lucide="file-text" class="w-5 h-5"></i>
|
||||
<span>PDF Export</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="monthNavigation" class="flex items-center gap-4">
|
||||
@@ -623,6 +640,11 @@
|
||||
<i data-lucide="trash-2" class="w-4 h-4"></i>
|
||||
<span>Löschen</span>
|
||||
</button>
|
||||
<button id="btnBulkExportPDF"
|
||||
class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-all duration-200 text-sm font-medium shadow-sm" title="Ausgewählte als PDF exportieren">
|
||||
<i data-lucide="file-text" class="w-4 h-4"></i>
|
||||
<span>PDF Export</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -763,6 +785,10 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/de.js"></script>
|
||||
|
||||
<!-- jsPDF for PDF export -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.2/jspdf.plugin.autotable.min.js"></script>
|
||||
|
||||
<!-- App Logic -->
|
||||
<script src="app.js"></script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user