2022-08-23 19:11:43 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
|
|
|
|
|
<title>Tracking | Ben Goldsworthy</title>
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
|
|
|
|
|
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
|
|
|
|
|
crossorigin=""/>
|
|
|
|
|
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
|
|
|
|
|
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
|
|
|
|
|
crossorigin=""></script>
|
2022-08-24 10:41:23 +00:00
|
|
|
<link rel="stylesheet" href="/css/app.css" />
|
2022-08-23 19:11:43 +00:00
|
|
|
</head>
|
|
|
|
|
|
2022-08-24 10:41:23 +00:00
|
|
|
<body>
|
2022-10-19 22:34:34 +00:00
|
|
|
<header class="page-header">
|
2022-10-19 22:53:52 +00:00
|
|
|
<h1 class="page-title">@if ($trip->is_active) Where in the World is Ben? @else {{ $trip->name }} @endif</h1>
|
2022-09-24 19:36:06 +00:00
|
|
|
<nav class="other-links">
|
|
|
|
|
<ul>
|
2022-10-19 23:28:56 +00:00
|
|
|
@if (!$trip->is_active)
|
|
|
|
|
<li><p><a href="/">Current trip</a></p></li>
|
|
|
|
|
@endif
|
2022-09-24 19:36:06 +00:00
|
|
|
<li><p><a href="/past-trips">Past trips</a></p></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</nav>
|
|
|
|
|
<section class="trip-meta">
|
|
|
|
|
<p>
|
2022-10-20 18:03:10 +00:00
|
|
|
<span> Tracking started: {!! render_date_difference($trip->date_start) !!}</span> |
|
2022-09-24 19:36:06 +00:00
|
|
|
<span class="{{ ($trip->is_active) ? "positive" : "negative" }}">{{ ($trip->is_active) ? "Active" : "Ended" }}</span> |
|
2022-10-07 19:03:09 +00:00
|
|
|
@if ($trip->is_active)
|
2022-09-24 19:36:06 +00:00
|
|
|
<span class="{{ ($trip->is_tracking) ? "positive" : "negative" }}">{{ ($trip->is_tracking) ? "Currently tracking" : "Not currently tracking" }}</span>
|
2022-10-07 19:03:09 +00:00
|
|
|
@endif
|
2022-10-20 18:03:10 +00:00
|
|
|
<span class="small">(Last update: {!! render_date_difference($trip->updated_at) !!})</span>
|
2022-09-24 19:36:06 +00:00
|
|
|
</p>
|
|
|
|
|
</section>
|
2022-08-23 19:11:43 +00:00
|
|
|
</header>
|
|
|
|
|
|
|
|
|
|
<main id="routeContainer">
|
2022-10-19 21:14:10 +00:00
|
|
|
<section id="mapContainer">
|
|
|
|
|
<div id="map"></div>
|
|
|
|
|
</section>
|
2022-08-23 19:11:43 +00:00
|
|
|
<section id="checkinList">
|
2022-10-20 18:03:10 +00:00
|
|
|
<h2 class="section__title">@if ($showAllCheckins) Check-ins @else Recent Check-ins @endif</h2>
|
2022-10-19 21:14:10 +00:00
|
|
|
<ol start="{{ count($trip->checkins) }}" reversed>
|
2022-10-19 23:28:56 +00:00
|
|
|
@if($showAllCheckins)
|
|
|
|
|
@php $checkinsList = array_reverse($trip->checkins) @endphp
|
|
|
|
|
@else
|
|
|
|
|
@php $checkinsList = array_slice(array_reverse($trip->checkins), 0, 10) @endphp
|
|
|
|
|
@endif
|
|
|
|
|
|
|
|
|
|
@foreach($checkinsList as $checkin)
|
2022-10-19 21:14:10 +00:00
|
|
|
<li>
|
2022-10-19 22:34:34 +00:00
|
|
|
<details class="checkin" id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)">
|
|
|
|
|
<summary class="checkin__summary">
|
|
|
|
|
<h2 class="checkin__title">{{ $checkin->title ?? "[No title]" }}</h2>
|
2022-10-20 18:03:10 +00:00
|
|
|
<p class="checkin__meta">{!! render_date_difference($trip->updated_at) !!}</p>
|
2022-10-19 22:34:34 +00:00
|
|
|
</summary>
|
2022-10-19 21:14:10 +00:00
|
|
|
{{ $checkin->note ?? "[No note]" }}
|
|
|
|
|
@if($checkin->image_url)
|
|
|
|
|
<img class="popup__image" loading="lazy" src="{{ $checkin->image_url }}">
|
|
|
|
|
@endif
|
|
|
|
|
</details>
|
|
|
|
|
</li>
|
2022-08-23 19:11:43 +00:00
|
|
|
@endforeach
|
2022-10-19 21:14:10 +00:00
|
|
|
</ol>
|
2022-10-20 15:53:32 +00:00
|
|
|
@if (!$showAllCheckins)
|
|
|
|
|
<p><a id="allCheckinsLink" href="?show=all">Show all checkins</a></p>
|
2022-10-19 23:28:56 +00:00
|
|
|
@endif
|
2022-08-23 19:11:43 +00:00
|
|
|
</section>
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
|
|
<footer>
|
|
|
|
|
<script>
|
2022-10-19 22:35:02 +00:00
|
|
|
/*
|
|
|
|
|
* Initialise the map
|
|
|
|
|
*/
|
|
|
|
|
var map = L.map('map');//.setView([{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}], 7);
|
2022-08-23 19:11:43 +00:00
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
|
|
|
maxZoom: 19,
|
|
|
|
|
attribution: 'OpenStreetMap'
|
|
|
|
|
}).addTo(map);
|
|
|
|
|
|
2022-10-19 22:35:02 +00:00
|
|
|
/*
|
|
|
|
|
* Populate the route line.
|
|
|
|
|
*/
|
2022-08-23 19:11:43 +00:00
|
|
|
var routePoints = L.polyline([
|
|
|
|
|
@foreach($trip->locations as $location)
|
|
|
|
|
[{{ $location->latitude }}, {{ $location->longitude }}],
|
|
|
|
|
@endforeach
|
|
|
|
|
]).addTo(map);
|
|
|
|
|
|
2022-10-19 22:35:02 +00:00
|
|
|
/*
|
|
|
|
|
* Populate all the checkins and popup texts.
|
|
|
|
|
*/
|
2022-08-23 19:11:43 +00:00
|
|
|
var checkinMarkers = [];
|
|
|
|
|
var marker = null, popupMarkup = null;
|
|
|
|
|
@foreach($trip->checkins as $checkin)
|
|
|
|
|
marker = L.marker([{{ $checkin->location->latitude }}, {{ $checkin->location->longitude }}]).addTo(map);
|
|
|
|
|
|
|
|
|
|
popupMarkup = '<h2 class="popup__title">{{ $checkin->title ?? "No Title" }}</h2>';
|
2022-08-29 21:35:04 +00:00
|
|
|
popupMarkup += `<p class="popup__note">{{ $checkin->note }}</p>`;
|
2022-08-23 19:11:43 +00:00
|
|
|
popupMarkup += '<img class="popup__image" src="{{ $checkin->image_url }}">';
|
|
|
|
|
marker.bindPopup(popupMarkup).openPopup();
|
|
|
|
|
|
|
|
|
|
checkinMarkers[{{ $checkin->id }}] = marker;
|
|
|
|
|
@endforeach
|
2022-08-29 21:34:48 +00:00
|
|
|
|
2022-10-19 22:35:02 +00:00
|
|
|
/*
|
|
|
|
|
* Fit the map to the last 25 locations, and then zoom out
|
|
|
|
|
* (to help provide context).
|
|
|
|
|
*/
|
|
|
|
|
map.fitBounds([
|
2022-10-19 23:28:56 +00:00
|
|
|
@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)
|
2022-10-19 22:35:02 +00:00
|
|
|
[{{ $location->latitude }}, {{$location->longitude }}],
|
2022-10-19 23:28:56 +00:00
|
|
|
@endforeach
|
|
|
|
|
@endif
|
2022-10-19 22:35:02 +00:00
|
|
|
]);
|
2022-10-19 23:28:56 +00:00
|
|
|
@if ($trip->is_active) map.zoomOut(2.5); @endif
|
2022-10-19 22:35:02 +00:00
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* 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: 'current-location-icon.png',
|
|
|
|
|
iconSize: [30, 45],
|
|
|
|
|
});
|
|
|
|
|
|
2022-08-29 21:34:48 +00:00
|
|
|
var currLocation = L.marker(
|
|
|
|
|
[{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}],
|
2022-10-19 22:35:02 +00:00
|
|
|
{icon: currLocationMarker}
|
2022-08-29 21:34:48 +00:00
|
|
|
).addTo(map).setZIndexOffset(1000);
|
|
|
|
|
currLocation.bindPopup('<p>Current location</p>').openPopup();
|
2022-10-19 22:35:02 +00:00
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* Changes the currently-selected popup.
|
|
|
|
|
*/
|
2022-08-24 10:41:23 +00:00
|
|
|
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;
|
|
|
|
|
});
|
2022-10-20 18:03:10 +00:00
|
|
|
console.log(checkinMarkers[checkinId].getLatLng());
|
|
|
|
|
map.setView(new L.LatLng(checkinMarkers[checkinId].getLatLng().lat + 0.03, checkinMarkers[checkinId].getLatLng().lng));
|
2022-08-24 10:41:23 +00:00
|
|
|
} else {
|
|
|
|
|
checkinMarkers[checkinId].closePopup();
|
|
|
|
|
}
|
2022-08-23 19:11:43 +00:00
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</footer>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
2022-10-20 18:03:10 +00:00
|
|
|
|
|
|
|
|
@php
|
|
|
|
|
function render_date_difference ($start_time) {
|
|
|
|
|
$minute = 60;
|
|
|
|
|
$hour = 60 * 60;
|
|
|
|
|
$day = 3600 * 24;
|
|
|
|
|
$week = 86400 * 7;
|
|
|
|
|
$month = 604800 * 4;
|
|
|
|
|
$year = 2629800 * 12;
|
|
|
|
|
|
|
|
|
|
$start_time_dt = new DateTime($start_time);
|
|
|
|
|
$now = new DateTime();
|
|
|
|
|
$trip_start_difference = intval(($now->getTimestamp() - $start_time_dt->getTimestamp()));
|
|
|
|
|
|
|
|
|
|
$start_tag = '<span title="' . date('j M Y (G:H)', strtotime($start_time)) . '">';
|
|
|
|
|
$end_tag = "ago</span>";
|
|
|
|
|
$unit = null;
|
|
|
|
|
$div = 1;
|
|
|
|
|
|
|
|
|
|
if ($trip_start_difference < $minute) {
|
|
|
|
|
$unit = ' seconds ';
|
|
|
|
|
} else if ($trip_start_difference < $hour) {
|
|
|
|
|
$div = 60;
|
|
|
|
|
$unit = ' minutes ';
|
|
|
|
|
} else if ($trip_start_difference < $day) {
|
|
|
|
|
$div = 3600;
|
|
|
|
|
$unit = ' hours ';
|
|
|
|
|
} else if ($trip_start_difference < $week) {
|
|
|
|
|
$div = 86400;
|
|
|
|
|
$unit = ' days ';
|
|
|
|
|
} else if ($trip_start_difference < $month) {
|
|
|
|
|
$div = 604800;
|
|
|
|
|
$unit = ' weeks ';
|
|
|
|
|
} else if ($trip_start_difference < $year) {
|
|
|
|
|
$div = 2629800;
|
|
|
|
|
$unit = ' months ';
|
|
|
|
|
} else {
|
|
|
|
|
$div = 31557600;
|
|
|
|
|
$unit = ' years ';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return $start_tag . (floor( $trip_start_difference / $div )) . $unit . $end_tag;
|
|
|
|
|
}
|
|
|
|
|
@endphp
|
