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

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    @include('partials.head')

    <body>
        <header class="page-header">
            <h1 class="page-title">@if ($trip->is_active) Where in the World is Ben? @else {{ $trip->name }} @endif</h1>
            <nav class="other-links">
                <ul>
                    @if (!$trip->is_active)
                    <li><p><a href="/">Current trip</a></p></li>
                    @endif
                    <li><p><a href="/past-trips">Past trips</a></p></li>
                </ul>
            </nav>
            <section class="trip-meta">
                <p>
                    <span> Tracking started: {!! render_date_difference($trip->date_start) !!}</span> |
                    <span class="{{ ($trip->is_active) ? "positive" : "negative" }}">{{ ($trip->is_active) ? "Active" : "Ended" }}</span> | 
                    @if ($trip->is_active)
                    <span class="{{ ($trip->is_tracking) ? "positive" : "negative" }}">{{ ($trip->is_tracking) ? "Currently tracking" : "Not currently tracking" }}</span> 
                    @endif
                    <span class="small">(Last update: {!! render_date_difference($trip->updated_at) !!})</span>
                </p>
            </section>
        </header>

        <main id="routeContainer">
            <section id="mapContainer">
                <div id="map"></div>
            </section>
            <section id="checkinList">
                <h2 class="section__title">@if ($showAllCheckins) Check-ins @else Recent Check-ins @endif</h2>
                <ol start="{{ count($trip->checkins) }}" reversed>
                @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)
                    <li>
                        <details class="checkin" id="{{ $checkin->id }}" ontoggle="toggleCheckin(this.open, this.id)">
                            <summary class="checkin__summary">
                                <h2 class="checkin__title">{{ $checkin->title ?? "[No title]" }}</h2>
                                <p class="checkin__meta">{!! render_date_difference($checkin->date) !!}</p>
                            </summary>
                            {{ $checkin->note ?? "[No note]" }}
    @if($checkin->image_url)
    <img class="popup__image" loading="lazy" src="{{ $checkin->image_url }}">
    @endif
                        </details>
                    </li>
                @endforeach
                </ol>
                @if (!$showAllCheckins)
                <p><a id="allCheckinsLink" href="?show=all">Show all checkins</a></p>
                @endif
            </section>
        </main>

        <footer>
            <script>
                /*
                 * Initialise the map
                 */
                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);

                /*
                 * Populate the route line.
                 */
                var routePoints = L.polyline([
                    @foreach($trip->locations as $location)
                    [{{ $location->latitude }}, {{ $location->longitude }}],
                    @endforeach
                ], {
                    color: '#3d3d3d'
                }).addTo(map);

                /*
                 * Populate all the checkins and popup texts.
                 */
                var checkinMarkers = [];
                var marker = null, popupMarkup = null;
                L.Icon.Default.imagePath = "https://track.bengoldsworthy.net/images/";
                @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

                /*
                 * Fit the map to the last 25 locations, and then zoom out
                 * (to help provide context).
                 */
                map.fitBounds([
                @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)
                    [{{ $location->latitude }}, {{$location->longitude }}],
                    @endforeach    
                @endif
                ]);
                @if ($trip->is_active) map.zoomOut(2.5); @endif

                /*
                 * 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({
                    iconUrl: 'images/current-location-icon.png',
                    iconSize: [30, 45],
                });

                var currLocation = L.marker(
                    [{{ end($trip->locations)->latitude }}, {{ end($trip->locations)->longitude }}],
                    {
                        icon: currLocationMarker
                    }
                ).addTo(map).setZIndexOffset(1000);
                currLocation.bindPopup('<p>Current location</p>').openPopup();

                /*
                 * Changes the currently-selected popup.
                 */
                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;
                        });
                        console.log(checkinMarkers[checkinId].getLatLng());
                        map.setView(new L.LatLng(checkinMarkers[checkinId].getLatLng().lat + 0.03, checkinMarkers[checkinId].getLatLng().lng));
                    } else {
                        checkinMarkers[checkinId].closePopup();
                    }
                }
            </script>
        </footer>
    </body>
</html>

@php
function render_date_difference ($start_time) {
    $minute = 60;
    $hour = $minute * 60;
    $day = $hour * 24;
    $week = $day * 7;
    $month = $week * 4;
    $year = $month * 12;
     
    $start_time_dt = new DateTime($start_time);
    $now = new DateTime();
    $trip_start_difference = intval(($now->getTimestamp() - $start_time_dt->getTimestamp()));

    $start_tag = '<span title="' . date('G:H, j M Y', strtotime($start_time)) . '">';
    $end_tag = '</span>';
    $unit = null;
    $div = 1;

    if ($trip_start_difference < $minute) {
        $unit = 'second';
    } else if ($trip_start_difference < $hour) {
        $div = $minute;
        $unit = 'minute';
    } else if ($trip_start_difference < $day) {
        $div = $hour;
        $unit = 'hour';
    } else if ($trip_start_difference < $week) {
        $div = $day;
        $unit = 'day';
    } else if ($trip_start_difference < $month) {
        $div = $week;
        $unit = 'week';
    } else if ($trip_start_difference < $year) {
        $div = $month;
        $unit = 'month';
    } else {
        $div = $year;
        $unit = 'year';
    }

    return "{$start_tag}" . ( floor ( $trip_start_difference / $div ) ) . " {$unit}" . ( ( floor ( $trip_start_difference / $div ) > 1 ) ? 's' : '' ) . " ago{$end_tag}";
}
@endphp
Initial commit 2022-08-23 19:11:43 +00:00			`<!DOCTYPE html>`
			`<html 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">`
			`<h2 class="checkin__title">{{ $checkin->title ?? "[No title]" }}</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>`
Fix view styling 2022-10-19 21:14:10 +00:00			`{{ $checkin->note ?? "[No note]" }}`
			`@if($checkin->image_url)`
			`<img class="popup__image" loading="lazy" src="{{ $checkin->image_url }}">`
			`@endif`
			`</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;`
Align styling with bengoldsworthy.net 2022-10-29 23:24:06 +00:00			`L.Icon.Default.imagePath = "https://track.bengoldsworthy.net/images/";`
Initial commit 2022-08-23 19:11:43 +00:00			`@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>';`
Fix line-breaks-in-note bug 2022-08-29 21:35:04 +00:00			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`