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."
                 ]
             );
         }

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

@@ -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,20 +94,22 @@
                     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
+                        $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="' . url("/videos/" . $filepath[1]) . '">link to the video</a> instead.</p>';
+                                $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>';
@@ -117,10 +119,9 @@
                             }
                             $checkin->note = preg_replace("/\[\[[^\]]+\]\]/", $embed, $checkin->note);
                         }
+                        $popupContent ='<p class="popup__note">' . $checkin->note . '</p>';
                     @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)
@@ -130,7 +131,7 @@
 
                     checkinMarkers[{{ $checkin->id }}] = marker;
                 @endforeach
-                */
+
                 /*
                  * Fit the map to the last 25 locations, and then zoom out
                  * (to help provide context).
@@ -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>