Where-in-the-World-is-Ben/resources/views/tracker.blade.php

110 lines
4.7 KiB
PHP
Raw Normal View History

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-08-23 19:11:43 +00:00
<header>
2022-09-24 19:36:06 +00:00
<h1 class="page-title">Where in the World is Ben?</h1>
<nav class="other-links">
<ul>
<li><p><a href="/past-trips">Past trips</a></p></li>
</ul>
</nav>
<section class="trip-meta">
<p>
<span> Tracking started: {{ date('j M Y (G:H)', strtotime($trip->date_start)) }}</span> |
<span class="{{ ($trip->is_active) ? "positive" : "negative" }}">{{ ($trip->is_active) ? "Active" : "Ended" }}</span> |
<span class="{{ ($trip->is_tracking) ? "positive" : "negative" }}">{{ ($trip->is_tracking) ? "Currently tracking" : "Not currently tracking" }}</span>
<span class="small">(Last update: {{ date('j M Y (G:H)', strtotime($trip->updated_at)) }})</span>
</p>
</section>
2022-08-23 19:11:43 +00:00
</header>
<main id="routeContainer">
<div id="map"></div>
<section id="checkinList">
2022-09-21 18:47:34 +00:00
<ol reversed>
@foreach(array_reverse($trip->checkins) as $checkin)
@if($checkin->id != 2607)
2022-08-24 10:41:23 +00:00
<li>
<details id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)">
2022-08-29 21:34:48 +00:00
<summary><h2>{{ $checkin->title ?? "[No title]" }}</h2> <span>{{ date('j M Y (G:H)', strtotime($checkin->date)) }}</span></summary>
2022-08-23 19:11:43 +00:00
{{ $checkin->note ?? "[No note]" }}
2022-09-21 18:47:53 +00:00
@if($checkin->image_url)
2022-09-21 19:40:14 +00:00
<img class="popup__image" loading="lazy" src="{{ $checkin->image_url }}">
2022-09-21 18:47:53 +00:00
@endif
2022-08-23 19:11:43 +00:00
</details>
</li>
2022-09-21 18:47:34 +00:00
@endif
2022-08-23 19:11:43 +00:00
@endforeach
</ol>
</section>
</main>
<footer>
<script>
2022-08-29 21:34:48 +00:00
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);
var routePoints = L.polyline([
@foreach($trip->locations as $location)
[{{ $location->latitude }}, {{ $location->longitude }}],
@endforeach
]).addTo(map);
var checkinMarkers = [];
var marker = null, popupMarkup = null;
@foreach($trip->checkins as $checkin)
2022-09-21 19:40:14 +00:00
@if($checkin->id != 2602)
2022-08-23 19:11:43 +00:00
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;
2022-09-21 19:40:14 +00:00
@endif
2022-08-23 19:11:43 +00:00
@endforeach
2022-08-29 21:34:48 +00:00
var currLocation = L.marker(
[{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}],
).addTo(map).setZIndexOffset(1000);
currLocation.bindPopup('<p>Current location</p>').openPopup();
2022-08-23 19:11:43 +00:00
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;
});
} else {
checkinMarkers[checkinId].closePopup();
}
2022-08-23 19:11:43 +00:00
}
</script>
</footer>
</body>
</html>