From cd644958513830b25923c597f8c7ac19f8432dd2 Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Fri, 27 Sep 2024 14:29:12 +0200
Subject: [PATCH] feat: Use actual adoption notices for markers

---
 .../static/fellchensammlung/css/styles.css    |  2 +-
 .../partials/partial-map.html                 | 31 +++++++++++--------
 .../templatetags/custom_tags.py               |  5 +++
 src/fellchensammlung/views.py                 |  4 ++-
 4 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/fellchensammlung/static/fellchensammlung/css/styles.css b/src/fellchensammlung/static/fellchensammlung/css/styles.css
index a3873d0..df103f7 100644
--- a/src/fellchensammlung/static/fellchensammlung/css/styles.css
+++ b/src/fellchensammlung/static/fellchensammlung/css/styles.css
@@ -570,7 +570,7 @@ textarea {
 
 }
 
-#marker {
+.marker {
     background-image: url('../img/logo_transparent.png');
     background-size: cover;
     width: 50px;
diff --git a/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html b/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html
index 12739d4..728d17b 100644
--- a/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html
+++ b/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html
@@ -1,4 +1,6 @@
 {% load static %}
+{% load custom_tags %}
+
 <!-- add MapLibre JavaScript and CSS -->
 <script src="https://tiles.versatiles.org/assets/maplibre-gl/maplibre-gl.js"></script>
 <link href="https://tiles.versatiles.org/assets/maplibre-gl/maplibre-gl.css" rel="stylesheet"/>
@@ -15,19 +17,22 @@
         zoom: 5
     }).addControl(new maplibregl.NavigationControl());
 
-    // create the popup
-    const popup = new maplibregl.Popup({offset: 25}).setText(
-        'A sweet rat waiting for adoption.'
-    );
+    {% for an in adoption_notices %}
+        // create the popup
+        const popup_{{ forloop.counter }} = new maplibregl.Popup({offset: 25}).setText(
+            '{{ an.name }}'
+        );
 
-    // create DOM element for the marker
-    const el = document.createElement('div');
-    el.id = 'marker';
+        // create DOM element for the marker
+        const el_{{ forloop.counter }} = document.createElement('div');
+        el_{{ forloop.counter }}.id = 'marker_{{ forloop.counter }}';
+        el_{{ forloop.counter }}.classList.add('marker');
 
-    const monument = [10.7, 50.68];
-    // create the marker
-    new maplibregl.Marker({element: el})
-        .setLngLat(monument)
-        .setPopup(popup) // sets a popup on this marker
-        .addTo(map);
+        const location_popup_{{ forloop.counter }} = [{{ an.location.longitude | pointdecimal }}, {{ an.location.latitude | pointdecimal }}];
+        // create the marker
+        new maplibregl.Marker({element: el_{{ forloop.counter }}})
+            .setLngLat(location_popup_{{ forloop.counter }})
+            .setPopup(popup_{{ forloop.counter }}) // sets a popup on this marker
+            .addTo(map);
+    {% endfor %}
 </script>
diff --git a/src/fellchensammlung/templatetags/custom_tags.py b/src/fellchensammlung/templatetags/custom_tags.py
index 6e4b976..9ad1739 100644
--- a/src/fellchensammlung/templatetags/custom_tags.py
+++ b/src/fellchensammlung/templatetags/custom_tags.py
@@ -47,3 +47,8 @@ def get_oxitraffic_script_if_enabled():
         return mark_safe(f'<script type="module" src="https://{settings.OXITRAFFIC_BASE_URL}/count.js"></script>')
     else:
         return ""
+
+@register.filter
+@stringfilter
+def pointdecimal(value):
+    return f"{float(value):.9f}"
diff --git a/src/fellchensammlung/views.py b/src/fellchensammlung/views.py
index 452eb06..687130c 100644
--- a/src/fellchensammlung/views.py
+++ b/src/fellchensammlung/views.py
@@ -397,7 +397,9 @@ def modqueue(request):
 
 
 def map(request):
-    return render(request, 'fellchensammlung/map.html')
+    adoption_notices = AdoptionNotice.objects.all() #TODO: Filter to active
+    context = {"adoption_notices": adoption_notices}
+    return render(request, 'fellchensammlung/map.html', context=context)
 
 
 def metrics(request):