From de91695b07a84ad61d43f48d4b11fce9b3247d4c Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Thu, 11 Jan 2024 19:25:02 +0100
Subject: [PATCH] Personnel filtering

---
 content/personal/anezka-kolesova/index.md   |  1 +
 content/personal/bara-vavrinova/index.md    |  1 +
 content/personal/dalibor-brabec/index.md    |  1 +
 content/personal/david-maly/index.md        |  1 +
 content/personal/emil-miler/index.md        |  1 +
 content/personal/hanka-mala/index.md        |  1 +
 content/personal/hanka-vajsejtlova/index.md |  1 +
 content/personal/honza-kubicek/index.md     |  1 +
 content/personal/jan-sruc/index.md          |  1 +
 content/personal/janca-blahoudkova/index.md |  1 +
 content/personal/jara-dryml/index.md        |  1 +
 content/personal/jindra-jobbik/index.md     |  1 +
 content/personal/kacka-kolarova/index.md    |  1 +
 content/personal/kamil-koza/index.md        |  1 +
 content/personal/karel-matousek/index.md    |  1 +
 content/personal/kristyna-dusova/index.md   |  1 +
 content/personal/lucka-odradovcova/index.md |  1 +
 content/personal/lukas-bruzek/index.md      |  1 +
 content/personal/martin-kocourek/index.md   |  1 +
 content/personal/martina-babakova/index.md  |  1 +
 content/personal/micha-michalova/index.md   |  1 +
 content/personal/michal-roucka/index.md     |  1 +
 content/personal/mirka-liskova/index.md     |  1 +
 content/personal/ondra-slavik/index.md      |  1 +
 content/personal/pavel-kacirek/index.md     |  1 +
 content/personal/pavel-sebera/index.md      |  1 +
 content/personal/petra-skotnicova/index.md  |  1 +
 content/personal/sarka-seberova/index.md    |  1 +
 content/personal/standa-skotnica/index.md   |  1 +
 content/personal/terka-janova/index.md      |  1 +
 content/personal/tomas-bruzek/index.md      |  1 +
 content/personal/tomas-zdobnicky/index.md   |  1 +
 content/personal/venca-trestik/index.md     |  1 +
 content/personal/verca-pekarova/index.md    |  1 +
 content/personal/verca-rouckova/index.md    |  1 +
 sass/_personnel.scss                        | 28 ++++++++++++++++++++-
 static/js/personnel.js                      | 17 +++++++++++++
 templates/base.html                         |  2 ++
 templates/macros.html                       | 12 ++++++++-
 templates/personnel.html                    |  9 +++++++
 40 files changed, 101 insertions(+), 2 deletions(-)
 create mode 100644 static/js/personnel.js

diff --git a/content/personal/anezka-kolesova/index.md b/content/personal/anezka-kolesova/index.md
index 31a207e..b678cff 100644
--- a/content/personal/anezka-kolesova/index.md
+++ b/content/personal/anezka-kolesova/index.md
@@ -4,4 +4,5 @@ weight = 3
 [extra]
 name = "Anežka Kolešová"
 role = "Instruktor"
+beh = [3]
 +++
diff --git a/content/personal/bara-vavrinova/index.md b/content/personal/bara-vavrinova/index.md
index c7d5379..32ec62a 100644
--- a/content/personal/bara-vavrinova/index.md
+++ b/content/personal/bara-vavrinova/index.md
@@ -4,4 +4,5 @@ weight = 3
 [extra]
 name = "Bára Vavřínová"
 role = "Instruktor"
+beh = [1]
 +++
diff --git a/content/personal/dalibor-brabec/index.md b/content/personal/dalibor-brabec/index.md
index 1e41ff6..7f63b98 100644
--- a/content/personal/dalibor-brabec/index.md
+++ b/content/personal/dalibor-brabec/index.md
@@ -4,4 +4,5 @@ weight = 3
 [extra]
 name = "Dalibor Brabec"
 role = "Instruktor"
+beh = [1]
 +++
diff --git a/content/personal/david-maly/index.md b/content/personal/david-maly/index.md
index dff90de..be0d3f7 100644
--- a/content/personal/david-maly/index.md
+++ b/content/personal/david-maly/index.md
@@ -4,4 +4,5 @@ weight = 7
 [extra]
 name = "David Malý"
 role = "Hospodář"
+beh = [3]
 +++
diff --git a/content/personal/emil-miler/index.md b/content/personal/emil-miler/index.md
index ec8ca9a..1a20b2e 100644
--- a/content/personal/emil-miler/index.md
+++ b/content/personal/emil-miler/index.md
@@ -4,4 +4,5 @@ weight = 2
 [extra]
 name = "Emil Miler"
 role = "Oddílák"
+beh = [1,3]
 +++
diff --git a/content/personal/hanka-mala/index.md b/content/personal/hanka-mala/index.md
index 935592d..27e40f6 100644
--- a/content/personal/hanka-mala/index.md
+++ b/content/personal/hanka-mala/index.md
@@ -4,4 +4,5 @@ weight = 6
 [extra]
 name = "Hanka Malá"
 role = "Kuchař"
+beh = [3]
 +++
diff --git a/content/personal/hanka-vajsejtlova/index.md b/content/personal/hanka-vajsejtlova/index.md
index f9e0af4..aa015bc 100644
--- a/content/personal/hanka-vajsejtlova/index.md
+++ b/content/personal/hanka-vajsejtlova/index.md
@@ -4,4 +4,5 @@ weight = 3
 [extra]
 name = "Hanka Vajsejtlová"
 role = "Instruktor"
+beh = [1,3]
 +++
diff --git a/content/personal/honza-kubicek/index.md b/content/personal/honza-kubicek/index.md
index 0c20715..258d87d 100644
--- a/content/personal/honza-kubicek/index.md
+++ b/content/personal/honza-kubicek/index.md
@@ -4,4 +4,5 @@ weight = 99
 [extra]
 name = "Honza Kubíček"
 role = "Hlavas na dovolené"
+beh = [3]
 +++
diff --git a/content/personal/jan-sruc/index.md b/content/personal/jan-sruc/index.md
index d9cfb32..70a3dcb 100644
--- a/content/personal/jan-sruc/index.md
+++ b/content/personal/jan-sruc/index.md
@@ -4,4 +4,5 @@ weight = 2
 [extra]
 name = "Jan Šruc"
 role = "Oddílák"
+beh = [1]
 +++
diff --git a/content/personal/janca-blahoudkova/index.md b/content/personal/janca-blahoudkova/index.md
index 528560b..ae6aac3 100644
--- a/content/personal/janca-blahoudkova/index.md
+++ b/content/personal/janca-blahoudkova/index.md
@@ -4,4 +4,5 @@ weight = 2
 [extra]
 name = "Janča Blahoudková"
 role = "Oddílák"
+beh = [3]
 +++
diff --git a/content/personal/jara-dryml/index.md b/content/personal/jara-dryml/index.md
index 732367c..16445f4 100644
--- a/content/personal/jara-dryml/index.md
+++ b/content/personal/jara-dryml/index.md
@@ -4,4 +4,5 @@ weight = 5
 [extra]
 name = "Jára Dryml"
 role = "Technik"
+beh = [3]
 +++
diff --git a/content/personal/jindra-jobbik/index.md b/content/personal/jindra-jobbik/index.md
index 5175238..377a72b 100644
--- a/content/personal/jindra-jobbik/index.md
+++ b/content/personal/jindra-jobbik/index.md
@@ -4,4 +4,5 @@ weight = 7
 [extra]
 name = "Jindra Jobbik"
 role = "Hospodář"
+beh = [3]
 +++
diff --git a/content/personal/kacka-kolarova/index.md b/content/personal/kacka-kolarova/index.md
index 4339c0f..b95eb7a 100644
--- a/content/personal/kacka-kolarova/index.md
+++ b/content/personal/kacka-kolarova/index.md
@@ -4,4 +4,5 @@ weight = 3
 [extra]
 name = "Kačka Kolářová"
 role = "Instruktor"
+beh = [1,3]
 +++
diff --git a/content/personal/kamil-koza/index.md b/content/personal/kamil-koza/index.md
index 6b0389d..8d95f58 100644
--- a/content/personal/kamil-koza/index.md
+++ b/content/personal/kamil-koza/index.md
@@ -4,4 +4,5 @@ weight = 2
 [extra]
 name = "Kamil Koza"
 role = "Oddílák, Hokr"
+beh = [1,3]
 +++
diff --git a/content/personal/karel-matousek/index.md b/content/personal/karel-matousek/index.md
index e04e565..37382bf 100644
--- a/content/personal/karel-matousek/index.md
+++ b/content/personal/karel-matousek/index.md
@@ -4,4 +4,5 @@ weight = 6
 [extra]
 name = "Karel Matoušek"
 role = "Kuchař"
+beh = [3]
 +++
diff --git a/content/personal/kristyna-dusova/index.md b/content/personal/kristyna-dusova/index.md
index 2979831..52e78ad 100644
--- a/content/personal/kristyna-dusova/index.md
+++ b/content/personal/kristyna-dusova/index.md
@@ -4,4 +4,5 @@ weight = 3
 [extra]
 name = "Kristýna Dusová"
 role = "Instruktor"
+beh = [3]
 +++
diff --git a/content/personal/lucka-odradovcova/index.md b/content/personal/lucka-odradovcova/index.md
index b4f26ca..5ca7c45 100644
--- a/content/personal/lucka-odradovcova/index.md
+++ b/content/personal/lucka-odradovcova/index.md
@@ -4,4 +4,5 @@ weight = 3
 [extra]
 name = "Lucka Odradovcová"
 role = "Instruktor"
+beh = [1]
 +++
diff --git a/content/personal/lukas-bruzek/index.md b/content/personal/lukas-bruzek/index.md
index 1b08913..9d603c7 100644
--- a/content/personal/lukas-bruzek/index.md
+++ b/content/personal/lukas-bruzek/index.md
@@ -4,4 +4,5 @@ weight = 2
 [extra]
 name = "Lukáš Brůžek"
 role = "Oddílák"
+beh = [1]
 +++
diff --git a/content/personal/martin-kocourek/index.md b/content/personal/martin-kocourek/index.md
index 9288986..5fdf8f7 100644
--- a/content/personal/martin-kocourek/index.md
+++ b/content/personal/martin-kocourek/index.md
@@ -4,4 +4,5 @@ weight = 5
 [extra]
 name = "Martin Kocourek"
 role = "Technik"
+beh = [1]
 +++
diff --git a/content/personal/martina-babakova/index.md b/content/personal/martina-babakova/index.md
index 09beca4..df0e05c 100644
--- a/content/personal/martina-babakova/index.md
+++ b/content/personal/martina-babakova/index.md
@@ -4,4 +4,5 @@ weight = 3
 [extra]
 name = "Martina Babáková"
 role = "Instruktor"
+beh = [3]
 +++
diff --git a/content/personal/micha-michalova/index.md b/content/personal/micha-michalova/index.md
index b661115..05c6e52 100644
--- a/content/personal/micha-michalova/index.md
+++ b/content/personal/micha-michalova/index.md
@@ -4,4 +4,5 @@ weight = 2
 [extra]
 name = "Míša Michalová"
 role = "Oddílák"
+beh = [3]
 +++
diff --git a/content/personal/michal-roucka/index.md b/content/personal/michal-roucka/index.md
index 4827029..9dde665 100644
--- a/content/personal/michal-roucka/index.md
+++ b/content/personal/michal-roucka/index.md
@@ -4,4 +4,5 @@ weight = 1
 [extra]
 name = "Michal Roučka"
 role = "Hlavní vedoucí"
+beh = [1]
 +++
diff --git a/content/personal/mirka-liskova/index.md b/content/personal/mirka-liskova/index.md
index 899813f..8a56a2e 100644
--- a/content/personal/mirka-liskova/index.md
+++ b/content/personal/mirka-liskova/index.md
@@ -4,4 +4,5 @@ weight = 4
 [extra]
 name = "Mirka Lišková"
 role = "Zdravotník"
+beh = [1]
 +++
diff --git a/content/personal/ondra-slavik/index.md b/content/personal/ondra-slavik/index.md
index 449c5ee..44c9d45 100644
--- a/content/personal/ondra-slavik/index.md
+++ b/content/personal/ondra-slavik/index.md
@@ -4,4 +4,5 @@ weight = 2
 [extra]
 name = "Ondra Slavík"
 role = "Oddílák"
+beh = [3]
 +++
diff --git a/content/personal/pavel-kacirek/index.md b/content/personal/pavel-kacirek/index.md
index 752e8b1..e6ff237 100644
--- a/content/personal/pavel-kacirek/index.md
+++ b/content/personal/pavel-kacirek/index.md
@@ -4,4 +4,5 @@ weight = 5
 [extra]
 name = "Pavel Kačírek"
 role = "Technik"
+beh = [1]
 +++
diff --git a/content/personal/pavel-sebera/index.md b/content/personal/pavel-sebera/index.md
index a4bed6a..7f43d8e 100644
--- a/content/personal/pavel-sebera/index.md
+++ b/content/personal/pavel-sebera/index.md
@@ -4,4 +4,5 @@ weight = 5
 [extra]
 name = "Pavel Sebera"
 role = "Technik"
+beh = [3]
 +++
diff --git a/content/personal/petra-skotnicova/index.md b/content/personal/petra-skotnicova/index.md
index 9bb542c..9517b89 100644
--- a/content/personal/petra-skotnicova/index.md
+++ b/content/personal/petra-skotnicova/index.md
@@ -4,4 +4,5 @@ weight = 2
 [extra]
 name = "Petra Skotnicová"
 role = "Oddílák"
+beh = [1]
 +++
diff --git a/content/personal/sarka-seberova/index.md b/content/personal/sarka-seberova/index.md
index 57e8583..2a7445f 100644
--- a/content/personal/sarka-seberova/index.md
+++ b/content/personal/sarka-seberova/index.md
@@ -4,4 +4,5 @@ weight = 4
 [extra]
 name = "Šárka Seberová"
 role = "Zdravotník"
+beh = [3]
 +++
diff --git a/content/personal/standa-skotnica/index.md b/content/personal/standa-skotnica/index.md
index c8c43db..36de5fd 100644
--- a/content/personal/standa-skotnica/index.md
+++ b/content/personal/standa-skotnica/index.md
@@ -4,4 +4,5 @@ weight = 7
 [extra]
 name = "Standa Skotnica"
 role = "Hospodář"
+beh = [1]
 +++
diff --git a/content/personal/terka-janova/index.md b/content/personal/terka-janova/index.md
index 9186336..62a34d1 100644
--- a/content/personal/terka-janova/index.md
+++ b/content/personal/terka-janova/index.md
@@ -4,4 +4,5 @@ weight = 3
 [extra]
 name = "Terka Jánová"
 role = "Instruktor"
+beh = [1]
 +++
diff --git a/content/personal/tomas-bruzek/index.md b/content/personal/tomas-bruzek/index.md
index 0a5f50e..4597b9c 100644
--- a/content/personal/tomas-bruzek/index.md
+++ b/content/personal/tomas-bruzek/index.md
@@ -4,4 +4,5 @@ weight = 3
 [extra]
 name = "Tomáš Brůžek"
 role = "Instruktor"
+beh = [1,3]
 +++
diff --git a/content/personal/tomas-zdobnicky/index.md b/content/personal/tomas-zdobnicky/index.md
index 8866c14..4781ef4 100644
--- a/content/personal/tomas-zdobnicky/index.md
+++ b/content/personal/tomas-zdobnicky/index.md
@@ -4,4 +4,5 @@ weight = 0
 [extra]
 name = "Tomáš Zdobnický"
 role = "Předseda"
+beh = [1,3]
 +++
diff --git a/content/personal/venca-trestik/index.md b/content/personal/venca-trestik/index.md
index 0a1bf1c..4daa76b 100644
--- a/content/personal/venca-trestik/index.md
+++ b/content/personal/venca-trestik/index.md
@@ -4,4 +4,5 @@ weight = 6
 [extra]
 name = "Venca Třeštík"
 role = "Kuchař"
+beh = [1]
 +++
diff --git a/content/personal/verca-pekarova/index.md b/content/personal/verca-pekarova/index.md
index 07a6072..69a62cf 100644
--- a/content/personal/verca-pekarova/index.md
+++ b/content/personal/verca-pekarova/index.md
@@ -4,4 +4,5 @@ weight = 2
 [extra]
 name = "Verča Pekařová"
 role = "Oddílák"
+beh = [3]
 +++
diff --git a/content/personal/verca-rouckova/index.md b/content/personal/verca-rouckova/index.md
index 65cc38e..e2eb32c 100644
--- a/content/personal/verca-rouckova/index.md
+++ b/content/personal/verca-rouckova/index.md
@@ -4,4 +4,5 @@ weight = 1
 [extra]
 name = "Verča Roučková"
 role = "Hlavní vedoucí"
+beh = [1,3]
 +++
diff --git a/sass/_personnel.scss b/sass/_personnel.scss
index 0164722..adef804 100644
--- a/sass/_personnel.scss
+++ b/sass/_personnel.scss
@@ -1,17 +1,43 @@
 .personnel {
 
+	.filters {
+		display: flex;
+		justify-content: center;
+		gap: 1em;
+		margin-bottom: 5em;
+
+		.button {
+			padding: .5em 1.5em;
+			font-weight: bold;
+			border: 2px solid #ccc;
+			border-radius: .5em;
+			cursor: pointer;
+			box-shadow: 0 0 10px rgba(0,0,0,0.1);
+			transition: border-color .2s ease-out;
+
+			&:hover, &.active {
+				border-color: #333;
+			}
+		}
+	}
+
 	.person {
 		text-align: center;
+		transition: opacity .5s ease-out;
 
 		img {
 			border-radius: 1em;
 			margin-bottom: 1em;
-			filter: drop-shadow(0 0 10px rgba(0,0,0,0.3));
+			box-shadow: 0 0 15px rgba(0,0,0,0.3);
 		}
 
 		.name {
 			font-weight: bold;
 		}
+
+		&.hidden {
+			opacity: .3;
+		}
 	}
 }
 
diff --git a/static/js/personnel.js b/static/js/personnel.js
new file mode 100644
index 0000000..57fc5bd
--- /dev/null
+++ b/static/js/personnel.js
@@ -0,0 +1,17 @@
+let people = Array.from(document.getElementsByClassName("person"));
+let buttons = Array.from(document.getElementsByClassName("button"));
+
+buttons.forEach(button => {
+	button.addEventListener("click", function() {
+		buttons.forEach(button => {
+			button.classList.remove("active");
+		});
+		button.classList.add("active");
+		people.forEach(person => {
+			person.classList.remove("hidden");
+			if (button.dataset.value != 0 && !person.dataset.beh.includes(button.dataset.value)) {
+				person.classList.add("hidden");
+			}
+		});
+	});
+});
diff --git a/templates/base.html b/templates/base.html
index 0c9b17e..9bb956f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -25,6 +25,8 @@
 		<p>&copy; {{ now() | date(format="%Y") }} {{ config.title }}</p>
 	</footer>
 
+	{% block script %}
+	{% endblock %}
 </body>
 </html>
 
diff --git a/templates/macros.html b/templates/macros.html
index d5b648d..3c7aa66 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -10,6 +10,7 @@
 
 {% macro personnel() %}
 	{% for person in section.pages %}
+
 		{%- set_global image = "/static/img/placeholder.jpg" %}
 		{%- for asset in person.assets %}
 			{%- if asset is matching(person.slug~"[.](jpg|png)$") %}
@@ -18,10 +19,19 @@
 			{% endif %}
 		{%- endfor %}
 		{%- set image = resize_image(path=image, width=300, height=300, op="fill") %}
-		<div class="person">
+
+		{% set_global dataset = "" %}
+		{% if person.extra.beh %}
+			{% for beh in person.extra.beh %}
+				{% set_global dataset = dataset ~ beh %}
+			{% endfor %}
+		{% endif %}
+
+		<div class="person" data-beh="{{ dataset }}">
 			<img src="{{ image.url }}" alt={{ person.extra.name }}>
 			<div class="name">{{ person.extra.name }}</div>
 			<div class="role">{{ person.extra.role }}</div>
 		</div>
+
 	{% endfor %}
 {% endmacro %}
diff --git a/templates/personnel.html b/templates/personnel.html
index 8175f19..9e4c354 100644
--- a/templates/personnel.html
+++ b/templates/personnel.html
@@ -5,8 +5,17 @@
 		{{ section.content | safe }}
 	</section>
 	<section class="wrap personnel">
+		<div class="filters">
+			<div id="all" class="button active" data-value="0">Všichni</div>
+			<div id="1" class="button" data-value="1">1. Běh</div>
+			<div id="3" class="button" data-value="3">3. Běh</div>
+		</div>
 		<div class="grid grid-5 gap-3">
 			{{ macros::personnel() }}
 		</div>
 	</section>
 {% endblock %}
+
+{% block script %}
+	<script src="{{ get_url(path="/js/personnel.js") }}"></script>
+{% endblock %}