Rumperuu/Where-in-the-World-is-Ben
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity
Where-in-the-World-is-Ben/resources/views/tracker.blade.php

216 lines
8.8 KiB
PHP
Raw Normal View History

Initial commit
2022-08-23 19:11:43 +00:00
<!DOCTYPE html>
Add meta tags
2022-10-29 23:49:19 +00:00
<html itemscope itemtype="https://schema.org/WebSite" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
Move head to partial
2022-10-29 23:23:02 +00:00
@include('partials.head')
Initial commit
2022-08-23 19:11:43 +00:00
Fix details toggling
2022-08-24 10:41:23 +00:00
<body>
Add CSS classes
2022-10-19 22:34:34 +00:00
<header class="page-header">
Fix past trip view
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>
Update styling
2022-09-24 19:36:06 +00:00
<nav class="other-links">
<ul>
Add show-all-checkins route
2022-10-19 23:28:56 +00:00
@if (!$trip->is_active)
<li><p><a href="/">Current trip</a></p></li>
@endif
Update styling
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>
Fix popup centering, styling, a bunch of other stuff
2022-10-20 18:03:10 +00:00
<span> Tracking started: {!! render_date_difference($trip->date_start) !!}</span> |
Update styling
2022-09-24 19:36:06 +00:00
<span class="{{ ($trip->is_active) ? "positive" : "negative" }}">{{ ($trip->is_active) ? "Active" : "Ended" }}</span> |
Remove superfluous meta from finished trips
2022-10-07 19:03:09 +00:00
@if ($trip->is_active)
Update styling
2022-09-24 19:36:06 +00:00
<span class="{{ ($trip->is_tracking) ? "positive" : "negative" }}">{{ ($trip->is_tracking) ? "Currently tracking" : "Not currently tracking" }}</span>
Remove superfluous meta from finished trips
2022-10-07 19:03:09 +00:00
@endif
Fix popup centering, styling, a bunch of other stuff
2022-10-20 18:03:10 +00:00
<span class="small">(Last update: {!! render_date_difference($trip->updated_at) !!})</span>
Update styling
2022-09-24 19:36:06 +00:00
</p>
</section>
Initial commit
2022-08-23 19:11:43 +00:00
</header>
<main id="routeContainer">
Fix view styling
2022-10-19 21:14:10 +00:00
<section id="mapContainer">
<div id="map"></div>
</section>
Initial commit
2022-08-23 19:11:43 +00:00
<section id="checkinList">
Fix popup centering, styling, a bunch of other stuff
2022-10-20 18:03:10 +00:00
<h2 class="section__title">@if ($showAllCheckins) Check-ins @else Recent Check-ins @endif</h2>
Fix view styling
2022-10-19 21:14:10 +00:00
<ol start="{{ count($trip->checkins) }}" reversed>
Add show-all-checkins route
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)
Fix view styling
2022-10-19 21:14:10 +00:00
<li>
Add CSS classes
2022-10-19 22:34:34 +00:00
<details class="checkin" id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)">
<summary class="checkin__summary">
Tweak checkin rendering
2022-10-29 23:59:23 +00:00
<h2 class="checkin__title">{!! $checkin->title ?? "<i>Untitled</i>" !!}</h2>
Changing caching parameters, fix checkin dates
2022-10-21 21:05:53 +00:00
<p class="checkin__meta">{!! render_date_difference($checkin->date) !!}</p>
Add CSS classes
2022-10-19 22:34:34 +00:00
</summary>
Tweak checkin rendering
2022-10-29 23:59:23 +00:00
@if($checkin->note)
{!! $checkin->note !!}
@endif
@if($checkin->image_url)
<img class="popup__image" loading="lazy" src="{{ $checkin->image_url }}">
@endif
Fix view styling
2022-10-19 21:14:10 +00:00
</details>
</li>
Initial commit
2022-08-23 19:11:43 +00:00
@endforeach
Fix view styling
2022-10-19 21:14:10 +00:00
</ol>
Update routes to use query params, fix caching
2022-10-20 15:53:32 +00:00
@if (!$showAllCheckins)
<p><a id="allCheckinsLink" href="?show=all">Show all checkins</a></p>
Add show-all-checkins route
2022-10-19 23:28:56 +00:00
@endif
Initial commit
2022-08-23 19:11:43 +00:00
</section>
</main>
<footer>
<script>
Amend map centering, add comments
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);
Initial commit
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);
Amend map centering, add comments
2022-10-19 22:35:02 +00:00
/*
* Populate the route line.
*/
Initial commit
2022-08-23 19:11:43 +00:00
var routePoints = L.polyline([
@foreach($trip->locations as $location)
[{{ $location->latitude }}, {{ $location->longitude }}],
@endforeach
Align styling with bengoldsworthy.net
2022-10-29 23:24:06 +00:00
], {
color: '#3d3d3d'
}).addTo(map);
Initial commit
2022-08-23 19:11:43 +00:00
Amend map centering, add comments
2022-10-19 22:35:02 +00:00
/*
* Populate all the checkins and popup texts.
*/
Initial commit
2022-08-23 19:11:43 +00:00
var checkinMarkers = [];
var marker = null, popupMarkup = null;
Fix markers not showing on mobile browsers
2022-10-30 02:14:45 +00:00
var markerIcon = L.icon({
iconAnchor: [12, 41],
iconSize: [25, 41],
iconUrl: "images/marker-icon.png",
popupAnchor: [1, -34],
shadowSize: [41, 41],
shadowUrl: "images/marker-shadow.png",
tooltipAnchor: [16, -28]
});
Initial commit
2022-08-23 19:11:43 +00:00
@foreach($trip->checkins as $checkin)
Fix markers not showing on mobile browsers
2022-10-30 02:14:45 +00:00
marker = L.marker([{{ $checkin->location->latitude }}, {{ $checkin->location->longitude }}],
{
icon: markerIcon
}).addTo(map);
Initial commit
2022-08-23 19:11:43 +00:00
Tweak checkin rendering
2022-10-29 23:59:23 +00:00
popupMarkup = `<h2 class="popup__title">{!! $checkin->title ?? "<i>Untitled</i>" !!}</h2>`;
popupMarkup += `<p class="popup__note">{!! $checkin->note !!}</p>`;
Initial commit
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
Amend date formats, map zoom
2022-08-29 21:34:48 +00:00
Amend map centering, add comments
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([
Add show-all-checkins route
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)
Amend map centering, add comments
2022-10-19 22:35:02 +00:00
[{{ $location->latitude }}, {{$location->longitude }}],
Add show-all-checkins route
2022-10-19 23:28:56 +00:00
@endforeach
@endif
Amend map centering, add comments
2022-10-19 22:35:02 +00:00
]);
Add show-all-checkins route
2022-10-19 23:28:56 +00:00
@if ($trip->is_active) map.zoomOut(2.5); @endif
Amend map centering, add comments
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({
Align styling with bengoldsworthy.net
2022-10-29 23:24:06 +00:00
iconUrl: 'images/current-location-icon.png',
Amend map centering, add comments
2022-10-19 22:35:02 +00:00
iconSize: [30, 45],
});
Amend date formats, map zoom
2022-08-29 21:34:48 +00:00
var currLocation = L.marker(
Align styling with bengoldsworthy.net
2022-10-29 23:24:06 +00:00
[{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}],
{
icon: currLocationMarker
}
Amend date formats, map zoom
2022-08-29 21:34:48 +00:00
).addTo(map).setZIndexOffset(1000);
currLocation.bindPopup('<p>Current location</p>').openPopup();
Amend map centering, add comments
2022-10-19 22:35:02 +00:00
/*
* Changes the currently-selected popup.
*/
Fix details toggling
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;
});
Fix popup centering, styling, a bunch of other stuff
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));
Fix details toggling
2022-08-24 10:41:23 +00:00
} else {
checkinMarkers[checkinId].closePopup();
}
Initial commit
2022-08-23 19:11:43 +00:00
}
</script>
</footer>
</body>
</html>
Fix popup centering, styling, a bunch of other stuff
2022-10-20 18:03:10 +00:00
@php
function render_date_difference ($start_time) {
$minute = 60;
Fix time difference summaries
2022-10-21 21:20:28 +00:00
$hour = $minute * 60;
$day = $hour * 24;
$week = $day * 7;
$month = $week * 4;
$year = $month * 12;
Fix popup centering, styling, a bunch of other stuff
2022-10-20 18:03:10 +00:00
$start_time_dt = new DateTime($start_time);
$now = new DateTime();
$trip_start_difference = intval(($now->getTimestamp() - $start_time_dt->getTimestamp()));
Fix time difference summaries
2022-10-21 21:20:28 +00:00
$start_tag = '<span title="' . date('G:H, j M Y', strtotime($start_time)) . '">';
$end_tag = '</span>';
Fix popup centering, styling, a bunch of other stuff
2022-10-20 18:03:10 +00:00
$unit = null;
$div = 1;
if ($trip_start_difference < $minute) {
Fix time difference summaries
2022-10-21 21:20:28 +00:00
$unit = 'second';
Fix popup centering, styling, a bunch of other stuff
2022-10-20 18:03:10 +00:00
} else if ($trip_start_difference < $hour) {
Fix time difference summaries
2022-10-21 21:20:28 +00:00
$div = $minute;
$unit = 'minute';
Fix popup centering, styling, a bunch of other stuff
2022-10-20 18:03:10 +00:00
} else if ($trip_start_difference < $day) {
Fix time difference summaries
2022-10-21 21:20:28 +00:00
$div = $hour;
$unit = 'hour';
Fix popup centering, styling, a bunch of other stuff
2022-10-20 18:03:10 +00:00
} else if ($trip_start_difference < $week) {
Fix time difference summaries
2022-10-21 21:20:28 +00:00
$div = $day;
$unit = 'day';
Fix popup centering, styling, a bunch of other stuff
2022-10-20 18:03:10 +00:00
} else if ($trip_start_difference < $month) {
Fix time difference summaries
2022-10-21 21:20:28 +00:00
$div = $week;
$unit = 'week';
Fix popup centering, styling, a bunch of other stuff
2022-10-20 18:03:10 +00:00
} else if ($trip_start_difference < $year) {
Fix time difference summaries
2022-10-21 21:20:28 +00:00
$div = $month;
$unit = 'month';
Fix popup centering, styling, a bunch of other stuff
2022-10-20 18:03:10 +00:00
} else {
Fix time difference summaries
2022-10-21 21:20:28 +00:00
$div = $year;
$unit = 'year';
Fix popup centering, styling, a bunch of other stuff
2022-10-20 18:03:10 +00:00
}
Fix time difference summaries
2022-10-21 21:20:28 +00:00
return "{$start_tag}" . ( floor ( $trip_start_difference / $div ) ) . " {$unit}" . ( ( floor ( $trip_start_difference / $div ) > 1 ) ? 's' : '' ) . " ago{$end_tag}";
Fix popup centering, styling, a bunch of other stuff
2022-10-20 18:03:10 +00:00
}
@endphp
Reference in a new issue Copy permalink