Theodor-Springmann-Stiftung/musenalm
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/musenalm.git synced 2025-10-29 17:25:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Startseite filter

Browse Source
This commit is contained in:
Simon Martens
2025-02-19 21:37:41 +01:00
parent 0c5e19609f
commit aa7c5f4d6c
11 changed files with 529 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
views/routes/components/_alphabet.gohtml
View File

@@ -1,19 +1,21 @@
{{ $model := . }}
{{ if $model.letters }}
<div class="flex flex-row border-b px-3 border-zinc-300 items-end min-h-14">
<div id="alphabet" class="alphabet flex flex-row items-end" hx-swap-oob="true" hx-boost="false">
<div
class="flex flex-row border-b px-3 border-zinc-300 items-end min-h-14"
x-data="{ search : '{{ $model.search }}' }">
<div id="alphabet" class="alphabet flex flex-row items-end">
{{ range $id, $r := .letters }}
<a
class="odd:bg-stone-100 even:bg-zinc-100 mr-1 border-zinc-300 border-x border-t [&>a[aria-current='page']]:font-bold
px-2 no-underline transition-all duration-75
{{ if not $model.active -}}inactive{{- end -}}"
:class="search ? 'inactive' : 'active'"
href="?letter={{ $r }}"
{{ if eq $model.active $r }}aria-current="page"{{ end }}
hx-get="./?letter={{ $r }}"
hx-push-url="true"
hx-select="#searchcontent"
hx-target="#searchcontent"
hx-select="main"
hx-target="main"
hx-swap="outerHTML scroll:#pageheading:top"
>{{ $r }}</a
>
{{ end }}
@@ -21,28 +23,37 @@
<div class="flex-grow"></div>
<div>
<i class="ri-search-line"></i><i class="-ml-0.5 inline-block ri-arrow-right-s-line"></i>
<input
class="px-1.5 py-0.5 font-serif italic"
type="search"
name="search"
placeholder="Suchbegriff eingeben"
hx-get="./"
hx-trigger="input changed delay:=200ms, keyup[key=='Enter']"
hx-select="#searchcontent"
hx-target="#searchcontent"
autocomplete="off" />
</div>
<div id="permalink" class="font-serif ml-3 py-1" hx-swap-oob="true">
{{ if $model.search }}
<div
class="min-w-[22.5rem] max-w-96 flex flex-row bg-stone-50 relative"
:class="search ?
'activesearch' : ''">
<div class="pb-0">
<i class="ri-search-line"></i><i class="-ml-0.5 inline-block ri-arrow-right-s-line"></i>
</div>
<div class="pb-0 border-b-4 border-zinc-300 grow">
<input
class="px-1.5 font-serif placeholder:italic w-full"
type="search"
name="search"
value="{{ $model.search }}"
x-model="search"
placeholder="Band-ID od. Suchbegriff"
hx-get=""
hx-trigger="input changed delay:=200ms, keyup[key=='Enter']"
hx-select="#searchcontent"
hx-target="#searchcontent"
autocomplete="off" />
</div>
<div id="permalink" class="font-serif ml-3 min-w-7 pb-1">
<a
href="/reihen?search={{ $model.search }}"
:href="'/reihen/?search=' + search"
x-show="search"
class="inline-block px-1
text-white no-underline bg-stone-700 hover:bg-stone-900 rounded">
text-white no-underline bg-stone-700 hover:bg-stone-900 rounded"
hx-boost="false">
<i class="ri-links-line"></i
></a>
{{ end }}
</div>
</div>
</div>
{{ end }}

51
views/routes/components/_reihenfilter.gohtml Normal file
View File

@@ -0,0 +1,51 @@
{{ $model := . }}
<div class="min-w-96 max-w-96 float-right flex flex-col gap-y-4">
{{ if .agents }}
<filter-list
id="agent-list"
data-url="/reihen/?agent="
data-placeholder="Personen und Körperschaften filtern..."></filter-list>
<script type="module">
let agentList = document.getElementById("agent-list");
if (agentList) agentList.items = {{ .agents }};
</script>
{{ end }}
{{ if .places }}
<filter-list
id="place-list"
data-url="/reihen/?place="
data-placeholder="Erscheinungsorte filtern..."></filter-list>
<script type="module">
let placeList = document.getElementById("place-list");
if (placeList) placeList.items = {{ .places }};
</script>
{{ end }}
{{ if .years }}
<filter-list
id="year-list"
data-url="/reihen/?year="
data-filterstart="true"
data-placeholder="Erscheinungsjahr filtern..."></filter-list>
<script type="module">
let yearList = document.getElementById("year-list");
if (yearList) {
yearList.items = {{ .years }};
yearList.setHREFFunc((item) => {
if (item === 0) return "/reihen?year=0";
return `/reihen?year=${item}`;
});
yearList.setLinkTextFunc((item) => {
if (item === 0) return "ohne Jahr";
return String(item);
});
}
</script>
{{ end }}
</div>

52
views/routes/reihen/body.gohtml
View File

@@ -1,14 +1,18 @@
{{ $model := . }}
<div class="mt-4">
{{ template "_alphabet" Dict "active" .letter "letters" .letters "search" .search }}
<div id="pageheading" class="headingcontainer">
<h1 class="heading">Bände nach Reihentiteln</h1>
<div class="mt-2">
{{ template "_alphabet" Dict "active" .letter "letters" .letters "search" .search }}
</div>
</div>
<div class="mt-3">
{{ template "_reihenfilter" . }}
</div>
<div id="searchcontent" class="pt-4 font-serif">
{{ if .search }}
<div class="mt-8">Reihen für {{ .search }} gefunden.</div>
{{ end }}
{{ if or .series .altseries }}
{{ range $id, $r := .series }}
<div class="mb-1.5">
@@ -33,41 +37,3 @@
</div>
{{ end }}
</div>
<div class="flex flex-row">
{{ if .agents }}
<div class="mt-8">
{{ range $id, $r := .agents }}
<div>
<a href="/reihen?agent={{ $r.Id }}">{{ $r.Name }}</a>
</div>
{{ end }}
</div>
{{ end }}
{{ if .places }}
<div class="mt-8">
{{ range $id, $r := .places }}
<div>
<a href="/reihen?place={{ $r.Id }}">{{ $r.Name }}</a>
</div>
{{ end }}
</div>
{{ end }}
{{ if .years }}
<div class="mt-8">
{{ range $id, $r := .years }}
{{ if eq $r 0 }}
<div>
<a href="/reihen?year=0">ohne Jahr</a>
</div>
{{ else }}
<div>
<a href="/reihen?year={{ $r }}">{{ $r }}</a>
</div>
{{ end }}
{{ end }}
</div>
{{ end }}
</div>