Rumperuu/Where-in-the-World-is-Ben
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

fix: show open checkin on map

Browse source
This commit is contained in:
Ben Goldsworthy 2024-03-14 20:11:55 +01:00
parent 56bc41f207
commit 28971a8876
Signed by: Rumperuu
SSH key fingerprint: SHA256:e5XfzNOr9UvWpEzyLfw0GtTMZWIFh3NmxH+/qQIi3xE
1 changed files with 48 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
resources/views/tracker.blade.php
View file

@ -82,7 +82,7 @@
/* /*
* Populate all the checkins and popup texts. * Populate all the checkins and popup texts.
* */
var checkinMarkers = []; var checkinMarkers = [];
var marker = null, popupMarkup = null; var marker = null, popupMarkup = null;
var markerIcon = L.icon({ var markerIcon = L.icon({
@ -94,43 +94,44 @@
shadowUrl: "images/marker-shadow.png", shadowUrl: "images/marker-shadow.png",
tooltipAnchor: [16, -28] tooltipAnchor: [16, -28]
}); });
@foreach($trip->checkins as $checkin) @foreach($trip->checkins as $checkin)
marker = L.marker([{{ $checkin->location->latitude }}, {{ $checkin->location->longitude }}], marker = L.marker([{{ $checkin->location->latitude }}, {{ $checkin->location->longitude }}],
{ {
icon: markerIcon icon: markerIcon
}).addTo(map); });
@php $popupContent = null; @endphp @php
@php $popupContent = null;
$embed = null; $embed = null;
if (preg_match("/\[\[([^\]]+)\]\]/", $checkin->note, $filepath)) { if (preg_match("/\[\[([^\]]+)\]\]/", $checkin->note, $filepath)) {
if (preg_match("/\.webm/", $filepath[1])) { if (preg_match("/\.webm/", $filepath[1])) {
$embed = '<video class="popup__video" controls>'; $embed = '<video class="popup__video" controls>';
$embed .= '<source src="' . url("/videos/" . $filepath[1]) . '" type="video/webm">'; $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 .= '</video>'; $embed .= url("/videos/" . $filepath[1]) . '">link to the video</a> instead.</p>';
} elseif (preg_match("/\.ogg/", $filepath[1])) { $embed .= '</video>';
$embed = '<audio class="popup__audio" controls>'; } elseif (preg_match("/\.ogg/", $filepath[1])) {
$embed .= '<source src="' . url("/audio/" . $filepath[1]) . '" type="audio/ogg">'; $embed = '<audio class="popup__audio" controls>';
$embed .= '<p>Download <a href="' . url("/audio/" . $filepath[1]) . '">OGG</a> audio.</p>'; $embed .= '<source src="' . url("/audio/" . $filepath[1]) . '" type="audio/ogg">';
$embed .= '</audio>'; $embed .= '<p>Download <a href="' . url("/audio/" . $filepath[1]) . '">OGG</a> audio.</p>';
} $embed .= '</audio>';
$checkin->note = preg_replace("/\[\[[^\]]+\]\]/", $embed, $checkin->note); }
} $checkin->note = preg_replace("/\[\[[^\]]+\]\]/", $embed, $checkin->note);
@endphp }
$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)
popupMarkup += '<img class="popup__image" src="{{ $checkin->image_url }}">';
@endif
marker.bindPopup(popupMarkup).openPopup();
popupMarkup = `<h2 class="popup__title">{!! $checkin->title ?? "<i>Untitled</i>" !!}</h2>`; checkinMarkers[{{ $checkin->id }}] = marker;
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 @endforeach
*/
/* /*
* Fit the map to the last 25 locations, and then zoom out * Fit the map to the last 25 locations, and then zoom out
* (to help provide context). * (to help provide context).
@ -152,7 +153,6 @@
* Add the current location marker. * Add the current location marker.
* *
* If this goes before the `fitBounds()`, it ends up uncentered. * If this goes before the `fitBounds()`, it ends up uncentered.
* TODO: Revisit once fixed with other popups.
*/ */
var currLocationMarker = L.icon({ var currLocationMarker = L.icon({
iconUrl: 'images/current-location-icon.png', iconUrl: 'images/current-location-icon.png',
@ -165,24 +165,26 @@
icon: currLocationMarker icon: currLocationMarker
} }
).addTo(map).setZIndexOffset(1000); ).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. * Changes the currently-selected popup.
*/ */
function toggleCheckin(isOpen, checkinId) { function toggleCheckin(isOpen, checkinId) {
if (isOpen) { if (isOpen) {
var checkins = document.querySelectorAll('details'); const checkins = document.querySelectorAll('details');
checkinMarkers[checkinId].openPopup(); checkinMarkers[checkinId].openPopup();
checkinMarkers[checkinId].addTo(map);
checkins.forEach(checkin => { for (checkin of checkins) {
if (checkin.id != checkinId && checkin.open) checkin.open = false; 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)); map.setView(new L.LatLng(checkinMarkers[checkinId].getLatLng().lat + 0.03, checkinMarkers[checkinId].getLatLng().lng));
} else { } else {
checkinMarkers[checkinId].closePopup(); checkinMarkers[checkinId].closePopup();
checkinMarkers[checkinId].removeFrom(map);
} }
} }
</script> </script>