From d34e91dafe994ac722541d160aec1bad31730da0 Mon Sep 17 00:00:00 2001
From: Daniel Nitsikopoulos <daniel@dnitza.com>
Date: Sun, 27 Aug 2023 17:29:32 +1000
Subject: [PATCH] Add map to trip view

---
 app/templates/trips/show.html.slim | 7 +++++++
 app/views/trips/show.rb            | 8 ++++++++
 public/assets/index.js             | 9 ++++++---
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/app/templates/trips/show.html.slim b/app/templates/trips/show.html.slim
index 4ac1c87..c657f21 100644
--- a/app/templates/trips/show.html.slim
+++ b/app/templates/trips/show.html.slim
@@ -1,5 +1,9 @@
 - context.content_for(:title, "#{trip.name} | ")
 
+- if places.count > 0
+  script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'
+  link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet'
+
 div class="mb-4 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200"
   h1 class="mb-0" #{trip.name}
   / p class="mt-2" class="text-gray-600 dark:text-gray-200 text-sm" (#{trip.start_date} - #{trip.end_date})
@@ -8,6 +12,9 @@ div class="mb-4 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:t
   div class="mb-4 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200 bg-gray-100 p-2 rounded prose-p:mb-0 prose-ul:mt-0"
     == trip.summary
 
+div class="mb-4 max-w-prose mx-auto"
+  div id='map' style='width: 100%; height: 400px' data-markers="#{JSON.generate(places.map(&:value))}"
+
 div class="h-feed mb-12 max-w-prose mx-auto"
   - posts.each do |post|
     == render "shared/compact_post", post: post, trip: trip, first: post.id == posts.first.id, last: post.id == posts.last.id
diff --git a/app/views/trips/show.rb b/app/views/trips/show.rb
index fd957ae..c0bcf7e 100644
--- a/app/views/trips/show.rb
+++ b/app/views/trips/show.rb
@@ -12,6 +12,14 @@ module Adamantium
           end
         end
 
+        expose :places do |posts|
+          posts.map do |post|
+            next if post.location.nil?
+            p = Decorators::Posts::Decorator.new(post)
+            [p.lon, p.lat]
+          end.compact
+        end
+
         expose :trip do |id:|
           trip_repo.fetch!(id)
         end
diff --git a/public/assets/index.js b/public/assets/index.js
index b32a0c4..4b66fd4 100644
--- a/public/assets/index.js
+++ b/public/assets/index.js
@@ -27,10 +27,13 @@
         });
 
     const mapContainer = document.getElementById("map");
+    const goBack = document.getElementById("go-back");
     if (mapContainer !== null) {
-        document.getElementById("go-back").addEventListener("click", () => {
-          history.back();
-        });
+        if (goBack !== null) {
+            document.getElementById("go-back").addEventListener("click", () => {
+            history.back();
+            });
+        }
 
         mapboxgl.accessToken = 'pk.eyJ1IjoiZG5pdHphIiwiYSI6ImNsZWIyY3ZzaTE0cjUzdm4xdnZ6czRlYjUifQ.FRETOXYRID6T2IoB7qqRLg';
         var map = new mapboxgl.Map({