From 28971a88763b887ed52c2616a044edc6e7f2d80a Mon Sep 17 00:00:00 2001
From: Rumperuu <admin@track.bengoldsworthy.net>
Date: Thu, 14 Mar 2024 20:11:55 +0100
Subject: [PATCH] fix: show open checkin on map

---
 resources/views/tracker.blade.php | 94 ++++++++++++++++---------------
 1 file changed, 48 insertions(+), 46 deletions(-)

diff --git a/resources/views/tracker.blade.php b/resources/views/tracker.blade.php
index 5f2fc7d..ce9a09a 100644
--- a/resources/views/tracker.blade.php
+++ b/resources/views/tracker.blade.php
@@ -16,9 +16,9 @@
             <section class="trip-meta">
                 <p>
                     <span> Tracking started: {!! render_date_difference($trip->date_start) !!}</span> |
-                    <span class="{{ ($trip->is_active) ? "positive" : "negative" }}">{{ ($trip->is_active) ? "Active" : "Ended" }}</span> | 
+                    <span class="{{ ($trip->is_active) ? "positive" : "negative" }}">{{ ($trip->is_active) ? "Active" : "Ended" }}</span> |
                     @if ($trip->is_active)
-                    <span class="{{ ($trip->is_tracking) ? "positive" : "negative" }}">{{ ($trip->is_tracking) ? "Currently tracking" : "Not currently tracking" }}</span> 
+                    <span class="{{ ($trip->is_tracking) ? "positive" : "negative" }}">{{ ($trip->is_tracking) ? "Currently tracking" : "Not currently tracking" }}</span>
                     @endif
                     <span class="small">(Last update: {!! render_date_difference($trip->updated_at) !!})</span>
                 </p>
@@ -82,7 +82,7 @@
 
                 /*
                  * Populate all the checkins and popup texts.
-                 *
+                 */
                 var checkinMarkers = [];
                 var marker = null, popupMarkup = null;
                 var markerIcon = L.icon({
@@ -94,43 +94,44 @@
                     shadowUrl: "images/marker-shadow.png",
                     tooltipAnchor: [16, -28]
                 });
-                @foreach($trip->checkins as $checkin)
-                marker = L.marker([{{ $checkin->location->latitude }}, {{ $checkin->location->longitude }}],
-                {
-                    icon: markerIcon
-                }).addTo(map);
-                
-                @php $popupContent = null; @endphp
-                @php
-                  $embed = null;
-                if (preg_match("/\[\[([^\]]+)\]\]/", $checkin->note, $filepath)) {
-                  if (preg_match("/\.webm/", $filepath[1])) {
-                    $embed = '<video class="popup__video" controls>';
-                    $embed .= '<source src="' . url("/videos/" . $filepath[1]) . '" type="video/webm">';
-                    $embed .= '<p>Your browser doesn\'t support HTML video. Here is a <a href="' . url("/videos/" . $filepath[1]) . '">link to the video</a> instead.</p>';
-                    $embed .= '</video>'; 
-                  } elseif (preg_match("/\.ogg/", $filepath[1])) {
-                    $embed = '<audio class="popup__audio" controls>';
-                    $embed .= '<source src="' . url("/audio/" . $filepath[1]) . '" type="audio/ogg">';
-                    $embed .= '<p>Download <a href="' . url("/audio/" . $filepath[1]) . '">OGG</a> audio.</p>';
-                    $embed .= '</audio>'; 
-                  }
-                  $checkin->note = preg_replace("/\[\[[^\]]+\]\]/", $embed, $checkin->note);
-                }
-                @endphp
 
-                @php $popupContent ='<p class="popup__note">' . $checkin->note . '</p>'; @endphp
-                  
-                popupMarkup = `<h2 class="popup__title">{!! $checkin->title ?? "<i>Untitled</i>" !!}</h2>`;
-                popupMarkup += `{!! $popupContent !!}`;
-                @if($checkin->image_url)
-                  popupMarkup += '<img class="popup__image" src="{{ $checkin->image_url }}">';
-                @endif
-                marker.bindPopup(popupMarkup).openPopup();
-                
-                checkinMarkers[{{ $checkin->id }}] = marker;
+                @foreach($trip->checkins as $checkin)
+                    marker = L.marker([{{ $checkin->location->latitude }}, {{ $checkin->location->longitude }}],
+                    {
+                        icon: markerIcon
+                    });
+
+                    @php
+                        $popupContent = null;
+                        $embed = null;
+                        if (preg_match("/\[\[([^\]]+)\]\]/", $checkin->note, $filepath)) {
+                            if (preg_match("/\.webm/", $filepath[1])) {
+                                $embed = '<video class="popup__video" controls>';
+                                $embed .= '<source src="' . url("/videos/" . $filepath[1]) . '" type="video/webm">';
+                                $embed .= '<p>Your browser doesn\'t support HTML video. Here is a <a href="';
+                                $embed .= url("/videos/" . $filepath[1]) . '">link to the video</a> instead.</p>';
+                                $embed .= '</video>';
+                            } elseif (preg_match("/\.ogg/", $filepath[1])) {
+                                $embed = '<audio class="popup__audio" controls>';
+                                $embed .= '<source src="' . url("/audio/" . $filepath[1]) . '" type="audio/ogg">';
+                                $embed .= '<p>Download <a href="' . url("/audio/" . $filepath[1]) . '">OGG</a> audio.</p>';
+                                $embed .= '</audio>';
+                            }
+                            $checkin->note = preg_replace("/\[\[[^\]]+\]\]/", $embed, $checkin->note);
+                        }
+                        $popupContent ='<p class="popup__note">' . $checkin->note . '</p>';
+                    @endphp
+
+                    popupMarkup = `<h2 class="popup__title">{!! $checkin->title ?? "<i>Untitled</i>" !!}</h2>`;
+                    popupMarkup += `{!! $popupContent !!}`;
+                    @if($checkin->image_url)
+                    popupMarkup += '<img class="popup__image" src="{{ $checkin->image_url }}">';
+                    @endif
+                    marker.bindPopup(popupMarkup).openPopup();
+
+                    checkinMarkers[{{ $checkin->id }}] = marker;
                 @endforeach
-                */
+
                 /*
                  * Fit the map to the last 25 locations, and then zoom out
                  * (to help provide context).
@@ -139,11 +140,11 @@
                 @if ($trip->is_active)
                     @foreach(array_slice(array_reverse($trip->checkins), 0, 25) as $checkin)
                     [{{ $checkin->location->latitude }}, {{$checkin->location->longitude }}],
-                    @endforeach    
+                    @endforeach
                 @else
                     @foreach($trip->locations as $location)
                     [{{ $location->latitude }}, {{$location->longitude }}],
-                    @endforeach    
+                    @endforeach
                 @endif
                 ]);
                 @if ($trip->is_active) map.zoomOut(2.5); @endif
@@ -152,7 +153,6 @@
                  * Add the current location marker.
                  *
                  * If this goes before the `fitBounds()`, it ends up uncentered.
-                 * TODO: Revisit once fixed with other popups.
                  */
                 var currLocationMarker = L.icon({
                     iconUrl: 'images/current-location-icon.png',
@@ -165,24 +165,26 @@
                         icon: currLocationMarker
                     }
                 ).addTo(map).setZIndexOffset(1000);
-                currLocation.bindPopup('<p>Current location</p>').openPopup();
+                @if($trip->is_active) currLocation.bindPopup('<p>Current location</p>').openPopup(); @endif
 
                 /*
                  * Changes the currently-selected popup.
                  */
                 function toggleCheckin(isOpen, checkinId) {
                     if (isOpen) {
-                        var checkins = document.querySelectorAll('details');
+                        const checkins = document.querySelectorAll('details');
 
                         checkinMarkers[checkinId].openPopup();
+                        checkinMarkers[checkinId].addTo(map);
 
-                        checkins.forEach(checkin => {
+                        for (checkin of checkins) {
                             if (checkin.id != checkinId && checkin.open) checkin.open = false;
-                        });
-                        console.log(checkinMarkers[checkinId].getLatLng());
+                        }
+
                         map.setView(new L.LatLng(checkinMarkers[checkinId].getLatLng().lat + 0.03, checkinMarkers[checkinId].getLatLng().lng));
                     } else {
                         checkinMarkers[checkinId].closePopup();
+                        checkinMarkers[checkinId].removeFrom(map);
                     }
                 }
             </script>