Add a form to filter the points by date range

app/controllers/points_controller.rb

@@ -2,7 +2,11 @@ class PointsController < ApplicationController
   before_action :authenticate_user!
 
   def index
+    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
 
     @coordinates = @points.pluck(:latitude, :longitude).map { [_1.to_f, _2.to_f] }
   end

app/javascript/controllers/maps_controller.js

@@ -6,8 +6,11 @@ export default class extends Controller {
   static targets = ["container"]
 
   connect() {
+    console.log("Map controller connected")
     var markers = JSON.parse(this.element.dataset.coordinates)
-    var map = L.map(this.containerTarget).setView(markers[0], 14);
+    var center = markers[0]
+    var center = (center === undefined) ? [52.516667, 13.383333] : center;
+    var map = L.map(this.containerTarget).setView(center, 14);
 
     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
       maxZoom: 19,
@@ -22,7 +25,7 @@ export default class extends Controller {
       L.marker([lat, lon]).addTo(map);
     }
 
-    L.polyline(markers).addTo(map);
+    // L.polyline(markers).addTo(map);
   }
 
   disconnect() {

app/views/points/index.html.erb

@@ -1,3 +1,20 @@
+
+<%= 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>
+  </div>
+<% end %>
+
 <div data-controller="maps" data-coordinates="<%= @coordinates %>">
   <div data-maps-target="container" class="h-[25rem] w-auto min-h-screen"></div>
 </div>