192 lines
9.1 KiB
PHP
192 lines
9.1 KiB
PHP
<!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) Posts @else Recent Posts @endif</h2>
|
|
<p style="font-weight: bold; text-align: center;">Want to receive a regular email digest of updates?</p>
|
|
<p style="text-align: center;">Ask me and I'll add you to the list: weekly, fortnightly and monthly options available (or daily if you're really keen).</p>
|
|
<ol @if(!($showAllCheckins || $toCheckin || $fromCheckin)) start="{{ count($trip->checkins) }}" reversed @endif>
|
|
@if($showAllCheckins || $toCheckin || $fromCheckin)
|
|
@php $checkinsList = $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 posts</a></p>
|
|
@endif
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<script>
|
|
/*
|
|
* Initialise the map
|
|
*/
|
|
var map = L.map('map', { fullscreenControl: true });
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: 'OpenStreetMap'
|
|
}).addTo(map);
|
|
|
|
@for($idx = 3; $idx <= count($trip->locations); $idx += 99)
|
|
/*
|
|
* Populate the route line.
|
|
*/
|
|
L.polyline([
|
|
@foreach(array_slice($trip->locations, $idx, 100) as $location)
|
|
@if(!in_array($location->id, config('app.current_trip_ignore')))
|
|
@if(in_array($location->id, [19014, 19015, 19016, 19017, 19018, 19019]))
|
|
[9.071389, -79.383611],
|
|
@else
|
|
[{{ $location->latitude }}, {{ $location->longitude }}],
|
|
@endif
|
|
@endif
|
|
@endforeach
|
|
], {
|
|
@php $colour = 180 * ( 1.0 - ( ( $idx ) / ( count($trip->locations) ) ) ); @endphp
|
|
color: 'rgb({{ $colour }}, {{ $colour }}, {{ $colour }})',
|
|
weight: 5,
|
|
//color: 'rgba(62, 62, 62, {{ ( $idx - 0.5) / (count($trip->locations) - 0.5 ) }})'
|
|
}).addTo(map);
|
|
@endfor
|
|
|
|
/*
|
|
* 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
|
|
@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;
|
|
@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->checkins), 0, 25) as $checkin)
|
|
[{{ $checkin->location->latitude }}, {{$checkin->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>
|