Theodor-Springmann-Stiftung/kgpz_web
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/kgpz_web.git synced 2025-10-29 09:05:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

Page jumps

Browse Source
This commit is contained in:
Simon Martens
2025-09-19 17:05:32 +02:00
parent 2574124588
commit 1d218f55b8
6 changed files with 77 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
views/assets/style.css
View File

File diff suppressed because one or more lines are too long

69
views/routes/body.gohtml
View File

@@ -16,46 +16,61 @@
<!-- Page Jump Form -->
<div class="mt-8 w-full">
<div class="mx-auto max-w-md bg-slate-50 p-6 rounded-lg border border-slate-200">
<h3 class="text-lg font-semibold text-slate-800 mb-4 text-center">Direkt zu Seite springen</h3>
<div class="mx-auto text-center">
<h3 class="text-lg font-medium text-slate-700 mb-6">Direkt zu Seite springen</h3>
<form hx-post="/jump" hx-swap="outerHTML" class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<!-- Year Selection -->
<div>
<label for="jump-year" class="block text-sm font-medium text-slate-700 mb-1">Jahr</label>
<select id="jump-year" name="year" value="{{ $y }}" class="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
{{ range $year := .model.AvailableYears }}
<option value="{{ $year }}" {{ if eq $year $y }}selected{{ end }}>{{ $year }}</option>
{{ end }}
</select>
<div id="year-error"></div>
</div>
<form hx-post="/jump" hx-target="#jump-errors" hx-swap="innerHTML" hx-target-4*="#jump-errors" hx-target-5*="#jump-errors" hx-ext="response-targets" class="inline-flex items-center gap-3">
<!-- Year Selection -->
<div class="flex items-center gap-2">
<label for="jump-year" class="text-sm text-slate-600 whitespace-nowrap">Jahr</label>
<select id="jump-year" name="year" value="{{ $y }}" class="px-2 py-1 border border-slate-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-400 focus:border-blue-400">
{{ range $year := .model.AvailableYears }}
<option value="{{ $year }}" {{ if eq $year $y }}selected{{ end }}>{{ $year }}</option>
{{ end }}
</select>
</div>
<!-- Page Input -->
<div>
<label for="jump-page" class="block text-sm font-medium text-slate-700 mb-1">Seite</label>
<input type="number" id="jump-page" name="page" min="1" placeholder="z.B. 42" class="w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
<div id="page-error"></div>
</div>
<!-- Page Input -->
<div class="flex items-center gap-2">
<label for="jump-page" class="text-sm text-slate-600 whitespace-nowrap">Seite</label>
<input type="number" id="jump-page" name="page" min="1" placeholder="42" class="w-20 px-2 py-1 border border-slate-300 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-400 focus:border-blue-400">
</div>
<!-- Submit Button -->
<div class="text-center">
<button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
<i class="ri-arrow-right-line mr-2"></i>
Zur Seite springen
</button>
</div>
<button type="submit" class="inline-flex items-center px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1">
<i class="ri-arrow-right-line mr-1"></i>
Springen
</button>
</form>
<!-- Error Display Area -->
<div id="jump-errors" class="mt-3 min-h-[1.5rem]"></div>
<!-- Instructions -->
<div class="mt-4 text-sm text-slate-600 text-center">
<div class="mt-4 text-sm text-slate-500">
<p>Geben Sie Jahr und Seitenzahl ein, um direkt zur entsprechenden Ausgabe zu springen.</p>
</div>
</div>
</div>
<script>
// Clear errors when user starts typing
document.addEventListener('DOMContentLoaded', function() {
const errorContainer = document.getElementById('jump-errors');
const yearSelect = document.getElementById('jump-year');
const pageInput = document.getElementById('jump-page');
function clearErrors() {
if (errorContainer) {
errorContainer.innerHTML = '';
}
}
if (yearSelect) yearSelect.addEventListener('change', clearErrors);
if (pageInput) pageInput.addEventListener('input', clearErrors);
});
</script>
<div class="grid grid-cols-11 gap-x-2 gap-y-4 pt-8">
{{ range $index, $month := .model.Issues }}

1
views/routes/errors/jump_error/body.gohtml Normal file
View File

@@ -0,0 +1 @@
<div class="text-red-600 text-sm">{{ .Message }}</div>