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

<% content_for :title, 'Points' %>

<div class="w-full my-5">
  <%= form_with url: points_path(import_id: params[:import_id]), data: { turbo_method: :get }, 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: "input input-bordered hover:cursor-pointer hover:input-primary", 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: "input input-bordered hover:cursor-pointer hover:input-primary", value: @end_at %>
        </div>
      </div>
      <div class="w-full md:w-2/12">
        <div class="flex flex-col space-y-2">
          <%= f.label :import, class: "text-sm font-semibold" %>
          <%= f.select :import_id, options_for_select(@imports.map { |i| [i.name, i.id] }, params[:import_id]), { include_blank: true }, class: "input input-bordered hover:cursor-pointer hover:input-primary" %>
        </div>
      </div>
      <div class="w-full md:w-1/12">
        <div class="flex flex-col space-y-2">
          <%= f.submit "Search", class: "btn btn-primary" %>
        </div>
      </div>
      <div class="w-full md:w-2/12">
        <div class="flex flex-col space-y-2 text-center">
          <%= link_to 'Export as GeoJSON', exports_path(start_at: @start_at, end_at: @end_at, file_format: :json), data: {  turbo_confirm: "Are you sure? This will start background process of exporting points within timeframe, selected between #{@start_at} and #{@end_at}", turbo_method: :post }, class: "btn border border-base-300 hover:btn-ghost" %>
        </div>
      </div>
      <div class="w-full md:w-2/12">
        <div class="flex flex-col space-y-2 text-center">
          <%= link_to 'Export as GPX', exports_path(start_at: @start_at, end_at: @end_at, file_format: :gpx), data: { turbo_confirm: "Are you sure? This will start background process of exporting points within timeframe, selected between #{@start_at} and #{@end_at}", turbo_method: :post }, class: "btn border border-base-300 hover:btn-ghost" %>
        </div>
      </div>
    </div>
  <% end %>

  <div class='text-center my-5'>
    <%= paginate @points %>
  </div>

  <div id="points" class="min-w-full">
    <div data-controller='checkbox-select-all'>
      <%= form_with url: bulk_destroy_points_path(params.permit!), method: :delete, id: :bulk_destroy_form do |f| %>
        <div class="flex justify-between my-5">
          <%= f.submit "Delete Selected", class: "px-4 py-2 bg-red-500 text-white rounded-md", data: { turbo_confirm: "Are you sure?", checkbox_select_all_target: "deleteButton" }, style: "display: none;" %>
          <div>
            <%= page_entries_info @points, entry_name: 'point' %>
          </div>
          <div class="flex justify-end">
            <span class="mr-2">Order by:</span>
            <%= link_to 'Newest', points_path(order_by: :desc, import_id: params[:import_id], start_at: params[:start_at], end_at: params[:end_at]), class: 'btn btn-xs btn-primary mx-1' %>
            <%= link_to 'Oldest', points_path(order_by: :asc, import_id: params[:import_id], start_at: params[:start_at], end_at: params[:end_at]), class: 'btn btn-xs btn-primary mx-1' %>
          </div>
        </div>

        <table class='table'>
          <thead>
            <tr>
              <th>
                <%= label_tag do %>
                  <%= check_box_tag 'Select all',
                    id: :select_all_points,
                    data: {
                      checkbox_select_all_target: 'parent',
                      action: 'change->checkbox-select-all#toggleChildren'
                    },
                    class: 'mr-2'
                  %>
                  Select all
                <% end %>
                </div>
              </th>
              <th>Speed, km/h</th>
              <th>Recorded At</th>
              <th>Coordinates</th>
            </tr>
          </thead>
          <tbody>
            <% @points.each do |point| %>
              <%= render point %>
            <% end %>
          </tbody>
        </table>
      <% end %>
    </div>
  </div>

  <div class='text-center my-5'>
    <%= paginate @points %>
  </div>
</div>