From 53cb75f1d54c485e1947233abc1e6ee7d8f71f64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20M=C3=BCller?= <fabian@fablab-altmuehlfranken.de>
Date: Thu, 6 Feb 2025 01:01:45 +0100
Subject: [PATCH] Add configurable legend to footer

---
 fabcal/legend.py                       | 26 ++++++++++++++++
 fabcal/routers/frontend.py             |  2 ++
 static/style.css                       | 41 ++++++++++++++++++++++++++
 templates/sidebar/includes/footer.html | 20 +++++++++++++
 4 files changed, 89 insertions(+)
 create mode 100644 fabcal/legend.py

diff --git a/fabcal/legend.py b/fabcal/legend.py
new file mode 100644
index 0000000..0956133
--- /dev/null
+++ b/fabcal/legend.py
@@ -0,0 +1,26 @@
+from typing import NamedTuple, List
+
+import yaml
+from asyncache import cached
+from cachetools import FIFOCache
+
+
+class LegendItem(NamedTuple):
+    color: str
+    description: str
+    link: str = None
+
+
+# this will be cached permanently, i.e., the server process needs to be restarted to apply config changes
+# note that caching doesn't work at all with iterators (for obvious reasons)
+@cached(FIFOCache(1))
+def read_legend_from_config_file() -> List[LegendItem]:
+    rv = []
+
+    with open("config.yml") as f:
+        data = yaml.safe_load(f)
+
+        for item in data.get("legend", []):
+            rv.append(LegendItem(**item))
+
+    return rv
diff --git a/fabcal/routers/frontend.py b/fabcal/routers/frontend.py
index eb21830..64511a0 100644
--- a/fabcal/routers/frontend.py
+++ b/fabcal/routers/frontend.py
@@ -7,6 +7,7 @@ from fastapi.requests import Request
 from fastapi.responses import HTMLResponse
 
 from fabcal.calendar_client import get_future_events, group_by_date
+from fabcal.legend import read_legend_from_config_file
 from fabcal.routers import templates
 
 
@@ -21,6 +22,7 @@ async def generate_response(request: Request, template_name: str, **additional_c
     context = {
         "request": request,
         "grouped_events": grouped_events,
+        "legend": read_legend_from_config_file(),
     }
 
     context.update(additional_context)
diff --git a/static/style.css b/static/style.css
index e3634f7..0a32275 100644
--- a/static/style.css
+++ b/static/style.css
@@ -167,3 +167,44 @@ details.calendar-event-details[open] summary ~ * {
   0%    {opacity: 0; transform: translateY(-10px)}
   100%  {opacity: 1; transform: translateY(0)}
 }
+
+.calendar-legend {
+    padding: 5px;
+    border: var(--calendar-border);
+    border-radius: 5px;
+    background-color: #eee;
+    margin: 12px 2px 2px 2px;
+}
+.calendar-legend-list {
+    margin: 0;
+}
+.calendar-legend-heading {
+    font-size: 18px;
+    margin-bottom: 6px;
+    text-decoration: underline black;
+}
+.calendar-legend-item {
+    margin-bottom: 4px;
+    list-style: none;
+    font-size: 13px;
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+}
+.calendar-legend-item-color {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    margin-right: 4px;
+}
+.calendar-legend-item-description {
+    word-break: break-word;
+    word-wrap: break-word;
+    hyphens: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.calendar-legend-item-link {
+    display: flex;
+}
diff --git a/templates/sidebar/includes/footer.html b/templates/sidebar/includes/footer.html
index a50762f..e1e55f0 100644
--- a/templates/sidebar/includes/footer.html
+++ b/templates/sidebar/includes/footer.html
@@ -1,3 +1,23 @@
 <div class="calendar-subscription-buttons">
     <a href="{{ url_for('events_ics') }}"><i class="fa-solid fa-calendar"></i> Kalender abonnieren</a>
 </div>
+
+{% if legend %}
+<div class="calendar-legend">
+    <p class="calendar-legend-heading">Legende:</p>
+    <ul class="calendar-legend-list">
+        {% for item in legend %}
+        <li class="calendar-legend-item">
+            {% if item.link %}
+            <a class="calendar-legend-item-link" href="{{ item.link }}">
+            {% endif %}
+                <span class="calendar-legend-item-color" style="background-color: {{ item.color }};"></span>
+                <span class="calendar-legend-item-description">{{ item.description }}</span>
+            {% if item.link %}
+            </a>
+            {% endif %}
+        </li>
+        {% endfor %}
+    </ul>
+    {% endif %}
+</div>