fix: show open checkin on map
This commit is contained in:
parent
56bc41f207
commit
28971a8876
1 changed files with 48 additions and 46 deletions
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue