Add configurable legend to footer

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

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)

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;
+}

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>