Add past trip view

Add checkin images to list
Reverse checkin ordering
2022-09-21 19:40:14 +00:00 · 2022-09-21 18:47:53 +00:00 · 2022-09-21 18:47:34 +00:00
6 changed files with 199 additions and 5 deletions
--- a/config/app.php
+++ b/config/app.php
@ -58,7 +58,7 @@ return [

    'asset_url' => env('ASSET_URL'),

-    'trip' => env('TRIP'),
+    'current_trip_id' => env('CURRENT_TRIP_ID'),

    /*
    |--------------------------------------------------------------------------
--- a/resources/views/no-trip.blade.php
+++ b/resources/views/no-trip.blade.php
@ -0,0 +1,27 @@
+<!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>No Trip in Progress at the Moment</h1>
+            <p><a href="/past-trips">Past trips</a></p>
+        </header>
+
+    </body>
+
+</html>
--- a/resources/views/past-trip.blade.php
+++ b/resources/views/past-trip.blade.php
@ -0,0 +1,102 @@
+<!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>Where in the World was Ben?</h1>
+            <p><a href="/">Current trip</a></p>
+            <p><a href="/past-trips">Past trips</a></p>
+            <p>
+                <span> Tracking started: {{ date('j M Y (G:H)', strtotime($trip->date_start)) }}</span> |
+                <span class="small">(Last update: {{ date('j M Y (G:H)', strtotime($trip->updated_at)) }})</span>
+            </p>
+        </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>
--- a/resources/views/past-trips.blade.php
+++ b/resources/views/past-trips.blade.php
@ -0,0 +1,33 @@
+<!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>Past Trips</h1>
+            <p><a href="/">Current trip</a></p>
+        </header>
+
+        <main id="routeContainer">
+            <ul>
+                <li><a href="/past-trip/47xj8go928ql9mq3r20p">Europespedition III: Leds Free or Die Hard</a></li>
+            </ul>
+        </main>
+
+    </body>
+
+</html>
--- a/resources/views/tracker.blade.php
+++ b/resources/views/tracker.blade.php
@ -19,6 +19,7 @@

        <header>
            <h1>Where in the World is Ben?</h1>
+            <p><a href="/past-trips">Past trips</a></p>
            <p>
                <span> Tracking started: {{ date('j M Y (G:H)', strtotime($trip->date_start)) }}</span> |
                <span class="{{ ($trip->is_active) ? "positive" : "negative" }}">{{ ($trip->is_active) ? "Active" : "Ended" }}</span> | 
@ -30,14 +31,19 @@
        <main id="routeContainer">
            <div id="map"></div>
            <section id="checkinList">
-            <ol>
-                @foreach($trip->checkins as $checkin)
+            <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>
@ -61,6 +67,7 @@
                
                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>';
@ -69,6 +76,7 @@
                marker.bindPopup(popupMarkup).openPopup();
                
                checkinMarkers[{{ $checkin->id }}] = marker;
+                @endif
                @endforeach

                var currLocation = L.marker(
--- a/routes/web.php
+++ b/routes/web.php
@ -15,16 +15,40 @@ use GuzzleHttp\Client;
 */

 Route::get('/', function () {
+    if (config('app.current_trip_id')) {
+        $client = new Client([
+            'base_uri' => 'https://app.wayward.travel/',
+            'timeout' => 3.0
+        ]);
+        
+        $response = $client->get('trip/'.config('app.current_trip_id').'/user/zmld8ko6qy7d9j3xvq10/json');
+
+        if ($response->getStatusCode() == 200) {
+            $data = json_decode($response->getBody());
+            return view('tracker', ['trip' => $data->trip]);
+        } else {
+            return 'Something went wrong';
+        }
+    } else {
+        return view('no-trip');
+    }
+});
+
+Route::get('/past-trips', function () {
+    return view('past-trips');
+});
+
+Route::get('/past-trip/{tripId}', function ($tripId) {
    $client = new Client([
        'base_uri' => 'https://app.wayward.travel/',
        'timeout' => 3.0
    ]);
    
-    $response = $client->get('trip/'.config('app.trip').'/user/zmld8ko6qy7d9j3xvq10/json');
+    $response = $client->get('trip/'.$tripId.'/user/zmld8ko6qy7d9j3xvq10/json');

    if ($response->getStatusCode() == 200) {
        $data = json_decode($response->getBody());
-        return view('tracker', ['trip' => $data->trip]);
+        return view('past-trip', ['trip' => $data->trip]);
    } else {
        return 'Something went wrong';
    }
Author	SHA1	Message	Date
Rumperuu	7793a01828	Add past trip view	2022-09-21 19:40:14 +00:00
Rumperuu	a75d45b03f	Add checkin images to list	2022-09-21 18:47:53 +00:00
Rumperuu	8b793de39d	Reverse checkin ordering	2022-09-21 18:47:34 +00:00