From 476701c5dfbe7f61bc54054ced2351bd06b0d56c Mon Sep 17 00:00:00 2001
From: Eugene Burmakin <iamfrey@gmail.com>
Date: Sat, 16 Mar 2024 22:39:03 +0100
Subject: [PATCH] Replace markers with circle markers and add right sidebar
 with countries and cities

---
 app/controllers/points_controller.rb          |  9 ++++-
 app/javascript/controllers/maps_controller.js |  4 +-
 app/views/layouts/application.html.erb        | 12 +++++-
 app/views/points/index.html.erb               | 40 +++++++++++--------
 app/views/shared/_right_sidebar.html.erb      | 10 +++++
 5 files changed, 54 insertions(+), 21 deletions(-)
 create mode 100644 app/views/shared/_right_sidebar.html.erb

diff --git a/app/controllers/points_controller.rb b/app/controllers/points_controller.rb
index 68b8d8c1..be701686 100644
--- a/app/controllers/points_controller.rb
+++ b/app/controllers/points_controller.rb
@@ -5,9 +5,14 @@ class PointsController < ApplicationController
     start_at = params[:start_at].to_datetime.to_i
     end_at = params[:end_at].to_datetime.to_i
 
-    @points = Point.all.order(timestamp: :asc)
-    @points = Point.all.where('timestamp >= ? AND timestamp <= ?', start_at, end_at).order(timestamp: :asc) if start_at && end_at
+    @points =
+      if start_at && end_at
+        Point.where('timestamp >= ? AND timestamp <= ?', start_at, end_at).order(timestamp: :asc)
+      else
+        Point.all.order(timestamp: :asc)
+      end
 
+    @countries_and_cities = @points.group_by(&:country).transform_values { _1.pluck(:city).uniq.compact }
     @coordinates = @points.pluck(:latitude, :longitude).map { [_1.to_f, _2.to_f] }
   end
 end
diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js
index 4e038cdd..28765665 100644
--- a/app/javascript/controllers/maps_controller.js
+++ b/app/javascript/controllers/maps_controller.js
@@ -22,10 +22,10 @@ export default class extends Controller {
       var lat = markers[i][0];
       var lon = markers[i][1];
 
-      L.marker([lat, lon]).addTo(map);
+      L.circleMarker([lat, lon], {radius: 3}).addTo(map);
     }
 
-    // L.polyline(markers).addTo(map);
+    L.polyline(markers).addTo(map);
   }
 
   disconnect() {
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 664d14e8..e1b2cc7d 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -18,7 +18,17 @@
     <div class='container mx-auto'>
       <%= render 'shared/navbar' %>
       <%= render 'shared/flash' %>
-      <%= yield %>
+      <div class="flex flex-row gap-5">
+        <!--div class='w-1/4 mt-10'>
+          <%#= render 'shared/left_sidebar' %>
+        </div-->
+        <div class='w-3/4'>
+          <%= yield %>
+        </div>
+        <div class='w-1/4 mt-10'>
+          <%= render 'shared/right_sidebar' %>
+        </div>
+      </div>
     </div>
   </body>
 </html>
diff --git a/app/views/points/index.html.erb b/app/views/points/index.html.erb
index f56ee026..5026529f 100644
--- a/app/views/points/index.html.erb
+++ b/app/views/points/index.html.erb
@@ -1,20 +1,28 @@
 
-<%= form_with url: points_path, method: :get do |f| %>
-  <div class="flex flex-col space-y-4">
-    <div class="flex flex-col space-y-2">
-      <%= f.label :start_at, class: "text-sm font-semibold" %>
-      <%= f.datetime_local_field :start_at, class: "rounded-md", value: params[:start_at] %>
-    </div>
-    <div class="flex flex-col space-y-2">
-      <%= f.label :end_at, class: "text-sm font-semibold" %>
-      <%= f.datetime_local_field :end_at, class: "rounded-md", value: params[:end_at] %>
-    </div>
-    <div class="flex justify-center">
-      <%= f.submit "Search", class: "px-4 py-2 bg-blue-500 text-white rounded-md" %>
+<div class="flex flex-col space-y-4 mb-4 w-full">
+  <%= form_with url: points_path, method: :get do |f| %>
+    <div class="flex flex-col md:flex-row md:space-x-4 md:items-end">
+      <div class="w-full md:w-1/3">
+        <div class="flex flex-col space-y-2">
+          <%= f.label :start_at, class: "text-sm font-semibold" %>
+          <%= f.datetime_local_field :start_at, class: "rounded-md w-full", value: params[:start_at] %>
+        </div>
+      </div>
+      <div class="w-full md:w-1/3">
+        <div class="flex flex-col space-y-2">
+          <%= f.label :end_at, class: "text-sm font-semibold" %>
+          <%= f.datetime_local_field :end_at, class: "rounded-md w-full", value: params[:end_at] %>
+        </div>
+      </div>
+      <div class="w-full md:w-1/3">
+        <div class="flex flex-col space-y-2">
+          <%= f.submit "Search", class: "px-4 py-2 bg-blue-500 text-white rounded-md" %>
+        </div>
+      </div>
     </div>
+  <% end %>
+
+  <div class="w-full" data-controller="maps" data-coordinates="<%= @coordinates %>">
+    <div data-maps-target="container" class="h-[25rem] w-auto min-h-screen"></div>
   </div>
-<% end %>
-
-<div data-controller="maps" data-coordinates="<%= @coordinates %>">
-  <div data-maps-target="container" class="h-[25rem] w-auto min-h-screen"></div>
 </div>
diff --git a/app/views/shared/_right_sidebar.html.erb b/app/views/shared/_right_sidebar.html.erb
new file mode 100644
index 00000000..9798125d
--- /dev/null
+++ b/app/views/shared/_right_sidebar.html.erb
@@ -0,0 +1,10 @@
+<% if @countries_and_cities.any? %>
+  <% @countries_and_cities.each do |country, cities| %>
+    <h2 class="text-lg font-semibold"><%= country %></h2>
+    <ul>
+      <% cities.each do |city| %>
+        <li><%= city %></li>
+      <% end %>
+    </ul>
+  <% end %>
+<% end %>