<!DOCTYPE html>
<html itemscope itemtype="https://schema.org/WebSite" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
@include('partials.head')
<body>
<header class="page-header">
<h1 class="page-title">@if ($trip->is_active) Where in the World is Ben? @else {{ $trip->name }} @endif</h1>
<nav class="other-links">
<ul>
@if (!$trip->is_active)
<li><p><a href="/">Current trip</a></p></li>
@endif
<li><p><a href="/past-trips">Past trips</a></p></li>
</ul>
</nav>
<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> |
@if ($trip->is_active)
<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>
</section>
</header>
<main id="routeContainer">
<section id="mapContainer">
<div id="map"></div>
</section>
<section id="checkinList">
<h2 class="section__title">@if ($showAllCheckins) Check-ins @else Recent Check-ins @endif</h2>
<ol start="{{ $toCheckin ?? count($trip->checkins) }}" reversed>
@if($showAllCheckins || $toCheckin || $fromCheckin)
@php $checkinsList = array_reverse($trip->checkins) @endphp
@else
@php $checkinsList = array_slice(array_reverse($trip->checkins), 0, 10) @endphp
@endif
@include('partials.checkins-list')
</ol>
@if (!$showAllCheckins)
<p><a id="allCheckinsLink" href="?show=all">Show all checkins</a></p>
@endif
</section>
</main>
<footer>
<script>
/*
* Initialise the map
*/
var map = L.map('map');//.setView([{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}], 7);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: 'OpenStreetMap'
}).addTo(map);
/*
* Populate the route line.
*/
var routePoints = L.polyline([
@foreach($trip->locations as $location)
@if(!in_array($location->id, config('app.current_trip_ignore')))
[{{ $location->latitude }}, {{ $location->longitude }}],
@endif
@endforeach
], {
color: '#3d3d3d'
}).addTo(map);
/*
* Populate all the checkins and popup texts.
*/
var checkinMarkers = [];
var marker = null, popupMarkup = null;
var markerIcon = L.icon({
iconAnchor: [12, 41],
iconSize: [25, 41],
iconUrl: "images/marker-icon.png",
popupAnchor: [1, -34],
shadowSize: [41, 41],
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
@if(preg_match("/\[\[([^\]]+)\]\]/", $checkin->note, $filepath))
@if(preg_match("/\.webm/", $filepath[1]))
@php
$popupContent = '<video class="popup__video" controls><source src="/videos/';
$popupContent .= $filepath[1];
$popupContent .= '" type="video/webm">';
$popupContent .= '<p>Your browser doesn\'t support HTML video. Here is a <a href="/';
$popupContent .= $filepath[1];
$popupContent .= '">link to the video</a> instead.</p></video>';
@endphp
@elseif(preg_match("/\.ogg/", $filepath[1]))
@php
$popupContent = '<audio class="popup__audio" controls><source src="/audio/';
$popupContent .= $filepath[1];
$popupContent .= '" type="audio/ogg">';
$popupContent .= '<p>Download <a href="/';
$popupContent .= $filepath[1];
$popupContent .= '">OGG</a> audio.</p></audio>';
@endphp
@endif
@else
@php $popupContent ='<p class="popup__note">' . $checkin->note . '</p>'; @endphp
@endif
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).
*/
map.fitBounds([
@if ($trip->is_active)
@foreach(array_slice(array_reverse($trip->locations), 0, 25) as $location)
[{{ $location->latitude }}, {{$location->longitude }}],
@endforeach
@else
@foreach($trip->locations as $location)
[{{ $location->latitude }}, {{$location->longitude }}],
@endforeach
@endif
]);
@if ($trip->is_active) map.zoomOut(2.5); @endif
/*
* 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',
iconSize: [30, 45],
});
var currLocation = L.marker(
[{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}],
{
icon: currLocationMarker
}
).addTo(map).setZIndexOffset(1000);
currLocation.bindPopup('<p>Current location</p>').openPopup();
/*
* Changes the currently-selected popup.
*/
function toggleCheckin(isOpen, checkinId) {
if (isOpen) {
var checkins = document.querySelectorAll('details');
checkinMarkers[checkinId].openPopup();
checkins.forEach(checkin => {
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();
}
}
</script>
</footer>
</body>
</html>