Replace markers with circle markers and add right sidebar with countries and cities

This commit is contained in:
Eugene Burmakin 2024-03-16 22:39:03 +01:00
parent fd43e8acc0
commit 476701c5df
5 changed files with 54 additions and 21 deletions

View file

@ -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

View file

@ -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() {

View file

@ -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>

View file

@ -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>

View file

@ -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 %>