Fix past trip view
This commit is contained in:
parent
ff3c265968
commit
6563a4b5e2
3 changed files with 5 additions and 114 deletions
|
|
@ -1,109 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<body>
|
||||
<header class="page-header">
|
||||
<h1 class="page-title">@if ($trip->is_active) Where in the World is Ben? @else {{ $trip->title }} @endif</h1>
|
||||
<h1 class="page-title">@if ($trip->is_active) Where in the World is Ben? @else {{ $trip->name }} @endif</h1>
|
||||
<nav class="other-links">
|
||||
<ul>
|
||||
<li><p><a href="/past-trips">Past trips</a></p></li>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,10 @@ use GuzzleHttp\Client;
|
|||
|
|
||||
*/
|
||||
|
||||
Route::get('/past-trips', function () {
|
||||
return view('past-trips');
|
||||
});
|
||||
|
||||
Route::get('/{tripId?}', function ($tripId = null) {
|
||||
if (!$tripId && !config('app.current_trip_id')) return view('no-trip');
|
||||
|
||||
|
|
@ -62,7 +66,3 @@ Route::get('/{tripId?}', function ($tripId = null) {
|
|||
return 'Something went wrong';
|
||||
}
|
||||
});
|
||||
|
||||
Route::get('/past-trips', function () {
|
||||
return view('past-trips');
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue