dawarich/app/views/map/index.html.erb

<% content_for :title, 'Map' %>

<div class='w-4/5 mt-8'>
  <div class="flex flex-col space-y-4 mb-4 w-full">
    <%= form_with url: map_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-2/12">
          <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: @start_at %>
          </div>
        </div>
        <div class="w-full md:w-2/12">
          <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: @end_at %>
          </div>
        </div>
        <div class="w-full md:w-2/12">
          <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 class="w-full md:w-2/12">
          <div class="flex flex-col space-y-2 text-center">
            <%= link_to "Today", map_path(start_at: Time.current.beginning_of_day, end_at: Time.current.end_of_day), class: "px-4 py-2 bg-gray-500 text-white rounded-md" %>
          </div>
        </div>
        <div class="w-full md:w-2/12">
          <div class="flex flex-col space-y-2 text-center">
            <%= link_to "Yesterday", map_path(start_at: Date.yesterday.beginning_of_day, end_at: Date.yesterday.end_of_day), class: "px-4 py-2 bg-gray-500 text-white rounded-md" %>
          </div>
        </div>
        <div class="w-full md:w-2/12">
          <div class="flex flex-col space-y-2 text-center">
            <%= link_to "Last 7 days", map_path(start_at: 1.week.ago.beginning_of_day, end_at: Time.current.end_of_day), class: "px-4 py-2 bg-gray-500 text-white rounded-md" %>
          </div>
        </div>
      </div>
    <% end %>

    <div
      class="w-full"
      data-api_key="<%= current_user.api_key %>"
      data-route_opacity="<%= current_user.settings['route_opacity'] %>"
      data-controller="maps"
      data-coordinates="<%= @coordinates %>"
      data-timezone="<%= Rails.configuration.time_zone %>"
      data-meters_between_routes="<%= current_user.settings['meters_between_routes'] %>"
      data-minutes_between_routes="<%= current_user.settings['minutes_between_routes'] %>"
      data-fog_of_war_meters="<%= current_user.settings['fog_of_war_meters'] %>">
      <div data-maps-target="container" class="h-[25rem] w-auto min-h-screen">
        <div id="fog" class="fog"></div>
      </div>
    </div>
  </div>

</div>
<div class='w-1/5 mt-8'>
  <%= render 'shared/right_sidebar' %>
</div>