From e3833b4505cdee0723b0490f625e64f7118766b6 Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Mon, 6 Jan 2025 08:36:51 +0100
Subject: [PATCH] feat: Show position of shelter on the map

---
 src/fellchensammlung/models.py                | 10 ++-
 .../details/detail-rescue-organization.html   | 88 ++++++++++---------
 .../partials/partial-map.html                 | 33 ++++++-
 src/fellchensammlung/views.py                 |  3 +-
 4 files changed, 90 insertions(+), 44 deletions(-)

diff --git a/src/fellchensammlung/models.py b/src/fellchensammlung/models.py
index b935472..b017a81 100644
--- a/src/fellchensammlung/models.py
+++ b/src/fellchensammlung/models.py
@@ -13,7 +13,7 @@ from django.contrib.auth.models import AbstractUser
 
 from .tools import misc, geo
 from notfellchen.settings import MEDIA_URL
-from .tools.geo import LocationProxy
+from .tools.geo import LocationProxy, Position
 from .tools.misc import age_as_hr_string, time_since_as_hr_string
 
 
@@ -134,6 +134,14 @@ class RescueOrganization(models.Model):
     def adoption_notices(self):
         return AdoptionNotice.objects.filter(organization=self)
 
+    @property
+    def position(self):
+        if self.location:
+            return Position(latitude=self.location.latitude, longitude=self.location.longitude)
+        else:
+            return None
+
+
 
 # Admins can perform all actions and have the highest trust associated with them
 # Moderators can make moderation decisions regarding the deletion of content
diff --git a/src/fellchensammlung/templates/fellchensammlung/details/detail-rescue-organization.html b/src/fellchensammlung/templates/fellchensammlung/details/detail-rescue-organization.html
index 066bd5a..0d1037c 100644
--- a/src/fellchensammlung/templates/fellchensammlung/details/detail-rescue-organization.html
+++ b/src/fellchensammlung/templates/fellchensammlung/details/detail-rescue-organization.html
@@ -5,51 +5,57 @@
 {% block title %}<title>{{ org.name }}</title>{% endblock %}
 
 {% block content %}
-    <div class="card">
-        <h1>{{ org.name }}</h1>
+    <div class="container-cards">
+        <div class="card half">
+            <h1>{{ org.name }}</h1>
 
-        <b><i class="fa-solid fa-location-dot"></i></b>
-        {% if org.location %}
-            {{ org.location.str_hr }}
-        {% else %}
-            {{ org.location_string }}
-        {% endif %}
-        <p>{{ org.description | render_markdown }}</p>
-        <table class="responsive">
-            <thead>
-            <tr>
-                {% if org.website %}
-                    <td>{% translate "Website" %}</td>
-                {% endif %}
-                {% if org.phone_number %}
-                    <td>{% translate "Telefonnummer" %}</td>
-                {% endif %}
-                {% if org.email %}
-                    <td>{% translate "E-Mail" %}</td>
-                {% endif %}
-            </tr>
-            </thead>
-            <tr>
-                {% if org.website %}
-                    <td data-label="{% trans 'Website' %} ">
-                        {{ org.website }}
-                    </td>
-                {% endif %}
-                {% if org.phone_number %}
-                    <td data-label="{% trans 'Telefonnummer' %}">
-                        {{ org.phone_number }}
-                    </td>
-                {% endif %}
+            <b><i class="fa-solid fa-location-dot"></i></b>
+            {% if org.location %}
+                {{ org.location.str_hr }}
+            {% else %}
+                {{ org.location_string }}
+            {% endif %}
+            <p>{{ org.description | render_markdown }}</p>
+            <table class="responsive">
+                <thead>
+                <tr>
+                    {% if org.website %}
+                        <td>{% translate "Website" %}</td>
+                    {% endif %}
+                    {% if org.phone_number %}
+                        <td>{% translate "Telefonnummer" %}</td>
+                    {% endif %}
+                    {% if org.email %}
+                        <td>{% translate "E-Mail" %}</td>
+                    {% endif %}
+                </tr>
+                </thead>
+                <tr>
+                    {% if org.website %}
+                        <td data-label="{% trans 'Website' %} ">
+                            {{ org.website }}
+                        </td>
+                    {% endif %}
+                    {% if org.phone_number %}
+                        <td data-label="{% trans 'Telefonnummer' %}">
+                            {{ org.phone_number }}
+                        </td>
+                    {% endif %}
 
-                {% if org.email %}
-                    <td data-label="{% trans 'E-Mail' %}">
-                        {{ org.email }}
-                    </td>
-                {% endif %}
-            </tr>
-        </table>
+                    {% if org.email %}
+                        <td data-label="{% trans 'E-Mail' %}">
+                            {{ org.email }}
+                        </td>
+                    {% endif %}
+                </tr>
+            </table>
+        </div>
+        <div class="card half">
+            {% include "fellchensammlung/partials/partial-map.html" %}
+        </div>
     </div>
 
+
     <h2>{% translate 'Vermittlungen der Organisation' %}</h2>
     <div class="container-cards">
         {% if org.adoption_notices %}
diff --git a/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html b/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html
index d9381c8..bd04728 100644
--- a/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html
+++ b/src/fellchensammlung/templates/fellchensammlung/partials/partial-map.html
@@ -15,7 +15,7 @@
 <!-- start map -->
 <script>
     {% if map_center %}
-        var center = [{{ map_center.longitude }}, {{ map_center.latitude }}];
+        var center = [parseFloat({{ map_center.longitude }}), parseFloat({{ map_center.latitude }})];
     {% else %}
         var center = [10.49, 50.68];
     {% endif %}
@@ -52,6 +52,37 @@
         {% endif %}
     {% endfor %}
 
+    {% for map_pin in map_pins %}
+        map.on('load', async () => {
+            image = await map.loadImage("{% static 'fellchensammlung/img/animal_shelter.png' %}");
+            map.addImage('cat', image.data);
+            map.addSource('point', {
+                'type': 'geojson',
+                'data': {
+                    'type': 'FeatureCollection',
+                    'features': [
+                        {
+                            'type': 'Feature',
+                            'geometry': {
+                                'type': 'Point',
+                                'coordinates': [parseFloat({{ map_pin.longitude }}), parseFloat({{ map_pin.latitude }})]
+                            }
+                        }
+                    ]
+                }
+            });
+            map.addLayer({
+                'id': 'points',
+                'type': 'symbol',
+                'source': 'point',
+                'layout': {
+                    'icon-image': 'cat',
+                    'icon-size': 0.25
+                }
+            });
+        });
+    {% endfor %}
+
     {% if search_radius  %}
         map.on('load', () => {
             const radius = {{ search_radius }}; // kilometer
diff --git a/src/fellchensammlung/views.py b/src/fellchensammlung/views.py
index 8e147b2..405a507 100644
--- a/src/fellchensammlung/views.py
+++ b/src/fellchensammlung/views.py
@@ -608,7 +608,8 @@ def external_site_warning(request):
 
 def detail_view_rescue_organization(request, rescue_organization_id):
     org = RescueOrganization.objects.get(pk=rescue_organization_id)
-    return render(request, 'fellchensammlung/details/detail-rescue-organization.html', context={"org": org})
+    return render(request, 'fellchensammlung/details/detail-rescue-organization.html',
+                  context={"org": org, "map_center": org.position, "zoom_level": 6, "map_pins": [org.position]})
 
 
 def export_own_profile(request):