Rumperuu/Where-in-the-World-is-Ben
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

Initial commit

Browse source
This commit is contained in:
Ben Goldsworthy 2022-08-23 19:11:43 +00:00
commit f7e6810eda
87 changed files with 11411 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

80
resources/views/tracker.blade.php Normal file
View file

@ -0,0 +1,80 @@
<!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="{{ url('/css/app.css') }}" />
</head>
<body class="antialiased">
<header>
<h1>Where in the World is Ben?</h1>
<p>
<span> Tracking started: {{ $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: {{ $trip->updated_at }})</span>
</p>
</header>
<main id="routeContainer">
<div id="map"></div>
<section id="checkinList">
<ol>
@foreach($trip->checkins as $checkin)
<li id="{{ $checkin->id }}" onClick="openCheckin(this.id)">
<details>
<summary><h2>{{ $checkin->title ?? "[No title]" }}</h2> <span>{{ $checkin->date }}</span></summary>
{{ $checkin->note ?? "[No note]" }}
</details>
</li>
@endforeach
</ol>
</section>
</main>
<footer>
<script>
var map = L.map('map').setView([{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}], 10);
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)
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;
@endforeach
function openCheckin(checkinId) {
checkinMarkers[checkinId].openPopup();
}
</script>
</footer>
</body>
</html>