fix: show open checkin on map

.gitignore

@@ -5,6 +5,7 @@
 /public/*/videos
 /public/*/audio
 /storage/*.key
+/backup
 /vendor
 .phpunit.result.cache
 Homestead.json

app/Console/Kernel.php

@@ -30,7 +30,7 @@ class Kernel extends ConsoleKernel
                  });
 
         $schedule->command('digest:send --fortnightly')
-                 ->twiceMonthly(1,16,'13:00')
+                 ->twiceMonthly(1, 16, '13:00')
                  ->onFailure(function () {
                      Log::error("Fortnightly email digest send failed");
                  });

app/Http/Controllers/TrackerController.php

@@ -49,7 +49,8 @@ class TrackerController extends Controller
             return view(
                 'error',
                 [
-                    'message' => "App timed out whilst downloading trip data from Wayward's servers. They may be down currently."
+                    'message' => "App timed out whilst downloading trip data" .
+                    " from Wayward's servers. They may be down currently."
                 ]
             );
         }
@@ -145,7 +146,7 @@ class TrackerController extends Controller
         // Otherwise, download the trip data from the Wayward API.
         if ($forceDownload) {
             Log::debug("Forcing download for '{$tripFileName}'.");
-            Storage::disk('local')->delete($tripFileName); 
+            Storage::disk('local')->delete($tripFileName);
         } else {
             Log::debug("No cached trip file found for '{$tripFileName}'.");
         }
@@ -230,9 +231,9 @@ class TrackerController extends Controller
             $dlng = (($result & 1) ? ~($result >> 1) : ($result >> 1));
             $lng += $dlng;
 
-            array_push($points, (object)[ 
+            array_push($points, (object)[
                 'id' => $id++,
-                'latitude' => $lat/100000, 
+                'latitude' => $lat/100000,
                 'longitude' => $lng/100000
             ]);
         }

package.json

@@ -2,8 +2,12 @@
     "private": true,
     "scripts": {
         "dev": "vite",
-        "build": "vite build && rsync --delete -rP app artisan bootstrap composer.* config database lang public resources routes storage tests vendor ovhvps:~/track",
+        "build": "vite build",
-        "sync": "rsync -rP ./public/ ovhvps:~/track/public",
+        "deploy": "rsync --delete -rP app artisan bootstrap composer.* config database lang resources routes storage tests ovhvps:~/track",
+        "deploy:public": "rsync --delete -rP public ovhvps:~/track",
+        "deploy:dependencies": "rsync --delete -rP vendor ovhvps:~/track",
+        "deploy:full": "npm run deploy && npm run deploy:public && npm run deploy:dependencies && npm run deploy:finish",
+        "deploy:finish": "ssh ovhvps 'cd track && docker compose down && docker system prune -f && docker compose up -d --build'",
         "lint": "npm run lint:php; npm run lint:css",
         "lint:fix": "npm run lint:php:fix; npm run lint:css:fix",
         "lint:php": "./vendor/bin/phpcs",

resources/views/partials/head.blade.php

@@ -18,6 +18,8 @@
     <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
         integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
         crossorigin=""></script>
+    <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
+    <link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
 
     @vite(['resources/css/app.css', 'resources/js/app.js'])
 </head>

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>
@@ -52,7 +52,7 @@
                 /*
                  * Initialise the map
                  */
-                var map = L.map('map');
+                var map = L.map('map', { fullscreenControl: true });
                 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                     maxZoom: 19,
                     attribution: 'OpenStreetMap'
@@ -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
+                @foreach($trip->checkins as $checkin)
-                  
+                    marker = L.marker([{{ $checkin->location->latitude }}, {{ $checkin->location->longitude }}],
-                popupMarkup = `<h2 class="popup__title">{!! $checkin->title ?? "<i>Untitled</i>" !!}</h2>`;
+                    {
-                popupMarkup += `{!! $popupContent !!}`;
+                        icon: markerIcon
-                @if($checkin->image_url)
+                    });
-                  popupMarkup += '<img class="popup__image" src="{{ $checkin->image_url }}">';
+
-                @endif
+                    @php
-                marker.bindPopup(popupMarkup).openPopup();
+                        $popupContent = null;
-                
+                        $embed = null;
-                checkinMarkers[{{ $checkin->id }}] = marker;
+                        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>