dawarich/app/views/trips/index.html.erb
2024-11-28 15:29:17 +01:00

56 lines
2.3 KiB
Text
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<% content_for :title, 'Trips' %>
<div class="w-full">
<div id="trips" class="min-w-full">
<div class="flex justify-between items-center">
<h1 class="text-2xl font-bold">Trips</h1>
<%= link_to 'New trip', new_trip_path, class: 'btn btn-primary' %>
</div>
<% if @trips.empty? %>
<div class="hero min-h-80 bg-base-200">
<div class="hero-content text-center">
<div class="max-w-md">
<h1 class="text-5xl font-bold">Hello there!</h1>
<p class="py-6">
Here you'll find your trips, but now there are none. Let's <%= link_to 'create one', new_trip_path, class: 'link' %>!
</p>
</div>
</div>
</div>
<% else %>
<div class="flex justify-center my-5">
<div class='flex'>
<%= paginate @trips %>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 my-4">
<% @trips.each do |trip| %>
<div class="card bg-base-200 shadow-xl" data-trip-id="<%= trip.id %>" id="trip-<%= trip.id %>">
<div class="card-body">
<h2 class="card-title justify-center">
<%= link_to trip.name, trip, class: 'hover:underline' %>
</h2>
<p class="text-sm text-gray-600 text-center">
<%= "#{human_date(trip.started_at)} #{human_date(trip.ended_at)}, #{trip.distance} #{DISTANCE_UNIT}" %>
</p>
<div style="width: 100%; aspect-ratio: 1/1;"
id="map-<%= trip.id %>"
class="rounded-lg"
data-controller="trip-map"
data-trip-map-trip-id-value="<%= trip.id %>"
data-trip-map-coordinates-value="<%= trip.points.pluck(:latitude, :longitude, :battery, :altitude, :timestamp, :velocity, :id, :country).to_json %>"
data-trip-map-api-key-value="<%= current_user.api_key %>"
data-trip-map-user-settings-value="<%= current_user.settings.to_json %>"
data-trip-map-timezone-value="<%= Rails.configuration.time_zone %>"
data-trip-map-distance-unit-value="<%= DISTANCE_UNIT %>">
</div>
</div>
</div>
<% end %>
</div>
<% end %>
</div>
</div>