<!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> <link rel="stylesheet" href="/css/app.css" /> </head> <body> <header> <h1 class="page-title">{{ $trip->name }}</h1> <nav class="other-links"> <ul> <li><p><a href="/">Current trip</a></p></li> <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>Tracking Ended: {{ date('j M Y (G:H)', strtotime($trip->updated_at)) }}</span> </p> </section> </header> <main id="routeContainer"> <div id="map"></div> <section id="checkinList"> <ol reversed> @foreach(array_reverse($trip->checkins) as $checkin) @if($checkin->id != 2607) <li> <details id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)"> <summary><h2>{{ $checkin->title ?? "[No title]" }}</h2> <span>{{ date('j M Y (G:H)', strtotime($checkin->date)) }}</span></summary> {{ $checkin->note ?? "[No note]" }} @if($checkin->image_url) <img class="popup__image" loading="lazy" src="{{ $checkin->image_url }}"> @endif </details> </li> @endif @endforeach </ol> </section> </main> <footer> <script> 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); 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) @if($checkin->id != 2602) marker = L.marker([{{ $checkin->location->latitude }}, {{ $checkin->location->longitude }}]).addTo(map); popupMarkup = '<h2 class="popup__title">{{ $checkin->title ?? "No Title" }}</h2>'; popupMarkup += `<p class="popup__note">{{ $checkin->note }}</p>`; popupMarkup += '<img class="popup__image" src="{{ $checkin->image_url }}">'; marker.bindPopup(popupMarkup).openPopup(); checkinMarkers[{{ $checkin->id }}] = marker; @endif @endforeach var currLocation = L.marker( [{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}], ).addTo(map).setZIndexOffset(1000); currLocation.bindPopup('<p>Current location</p>').openPopup(); 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(); } } </script> </footer> </body> </html>