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

<% content_for :title, 'Map' %>

<div class="flex flex-col lg:flex-row lg:space-x-4 mt-8 w-full">
  <div class='w-full lg:w-5/6'>
    <div class="flex flex-col space-y-4 mb-4 w-full">
      <%= form_with url: map_path(import_id: params[:import_id]), method: :get do |f| %>
        <div class="flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4 sm:items-end">
          <div class="w-full sm:w-2/12 md:w-1/12 lg: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 sm:w-2/12 md:w-1/12 lg: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 sm:w-6/12 md:w-2/12 lg:w-3/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 sm:w-6/12 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, import_id: params[:import_id]), class: "px-4 py-2 bg-gray-500 text-white rounded-md" %>
            </div>
          </div>
          <div class="w-full sm:w-6/12 md:w-3/12 lg: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, import_id: params[:import_id]), class: "px-4 py-2 bg-gray-500 text-white rounded-md" %>
            </div>
          </div>
          <div class="w-full sm:w-6/12 md:w-3/12 lg:w-2/12">
            <div class="flex flex-col space-y-2 text-center">
              <%= link_to "Last month", map_path(start_at: 1.month.ago.beginning_of_day, end_at: Time.current.end_of_day, import_id: params[:import_id]), class: "px-4 py-2 bg-gray-500 text-white rounded-md" %>
            </div>
          </div>
        </div>
      <% end %>

      <div
        class="w-full"
        data-controller="maps"
        data-distance_unit="<%= DISTANCE_UNIT %>"
        data-api_key="<%= current_user.api_key %>"
        data-user_settings=<%= current_user.settings.to_json %>
        data-coordinates="<%= @coordinates %>"
        data-timezone="<%= Rails.configuration.time_zone %>">
        <div data-maps-target="container" class="h-[25rem] w-full min-h-screen">
          <div id="fog" class="fog"></div>
        </div>
      </div>
    </div>
  </div>

  <div class='w-full lg:w-1/6 mt-8 lg:mt-0 mx-auto'>
    <%= render 'shared/right_sidebar' %>
  </div>
</div>

<%= render 'map/settings_modals' %>