mirror of
https://github.com/Freika/dawarich.git
synced 2026-01-10 01:01:39 -05:00
164 lines
7.2 KiB
Text
164 lines
7.2 KiB
Text
<% content_for :title, 'Map' %>
|
|
|
|
<!-- Date Navigation Controls - Native Page Element -->
|
|
<div class="w-full px-4 py-3 bg-base-100" data-controller="map-controls">
|
|
<!-- Mobile: Compact Toggle Button -->
|
|
<div class="lg:hidden flex justify-center">
|
|
<button
|
|
type="button"
|
|
data-action="click->map-controls#toggle"
|
|
class="btn btn-primary w-96 shadow-lg">
|
|
<span data-map-controls-target="toggleIcon">
|
|
<%= icon 'chevron-down' %>
|
|
</span>
|
|
<span class="ml-2"><%= human_date(@start_at) %></span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Expandable Panel (hidden on mobile by default, always visible on desktop) -->
|
|
<div
|
|
data-map-controls-target="panel"
|
|
class="hidden lg:!block bg-base-100 rounded-lg shadow-lg p-4 mt-2 lg:mt-0">
|
|
<%= form_with url: map_path(import_id: params[:import_id]), method: :get do |f| %>
|
|
<div class="flex flex-col space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4 lg:items-end">
|
|
<div class="w-full lg:w-1/12">
|
|
<div class="flex flex-col space-y-2">
|
|
<span class="tooltip" data-tip="<%= human_date(@start_at - 1.day) %>">
|
|
<%= link_to map_path(start_at: @start_at - 1.day, end_at: @end_at - 1.day, import_id: params[:import_id]), class: "btn border border-base-300 hover:btn-ghost w-full" do %>
|
|
<%= icon 'chevron-left' %>
|
|
<% end %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="w-full lg:w-2/12 tooltip tooltip-bottom" data-tip="Start date and time">
|
|
<%= f.datetime_local_field :start_at, include_seconds: false, class: "input input-bordered hover:cursor-pointer hover:input-primary w-full", value: @start_at %>
|
|
</div>
|
|
<div class="w-full lg:w-2/12 tooltip tooltip-bottom" data-tip="End date and time">
|
|
<%= f.datetime_local_field :end_at, include_seconds: false, class: "input input-bordered hover:cursor-pointer hover:input-primary w-full", value: @end_at %>
|
|
</div>
|
|
<div class="w-full lg:w-1/12">
|
|
<div class="flex flex-col space-y-2">
|
|
<span class="tooltip" data-tip="<%= human_date(@start_at + 1.day) %>">
|
|
<%= link_to map_path(start_at: @start_at + 1.day, end_at: @end_at + 1.day, import_id: params[:import_id]), class: "btn border border-base-300 hover:btn-ghost w-full" do %>
|
|
<%= icon 'chevron-right' %>
|
|
<% end %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="w-full lg:w-1/12">
|
|
<div class="flex flex-col space-y-2">
|
|
<%= f.submit "Search", class: "btn btn-primary hover:btn-info w-full" %>
|
|
</div>
|
|
</div>
|
|
<div class="w-full lg:w-1/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, import_id: params[:import_id]),
|
|
class: "btn border border-base-300 hover:btn-ghost w-full" %>
|
|
</div>
|
|
</div>
|
|
<div class="w-full 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: "btn border border-base-300 hover:btn-ghost w-full" %>
|
|
</div>
|
|
</div>
|
|
<div class="w-full 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: "btn border border-base-300 hover:btn-ghost w-full" %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Map Container - Fills remaining space -->
|
|
<div class="w-full h-full">
|
|
<div
|
|
id='map'
|
|
class="w-full h-full"
|
|
data-controller="maps points add-visit family-members"
|
|
data-points-target="map"
|
|
data-api_key="<%= current_user.api_key %>"
|
|
data-self_hosted="<%= @self_hosted %>"
|
|
data-user_settings='<%= current_user.safe_settings.settings.to_json %>'
|
|
data-user_theme="<%= current_user&.theme || 'dark' %>"
|
|
data-coordinates='<%= @coordinates.to_json.html_safe %>'
|
|
data-tracks='<%= @tracks.to_json.html_safe %>'
|
|
data-distance="<%= @distance %>"
|
|
data-points_number="<%= @points_number %>"
|
|
data-timezone="<%= Rails.configuration.time_zone %>"
|
|
data-features='<%= @features.to_json.html_safe %>'
|
|
data-family-members-features-value='<%= @features.to_json.html_safe %>'
|
|
data-family-members-user-theme-value="<%= current_user&.theme || 'dark' %>">
|
|
<div data-maps-target="container" class="w-full h-full">
|
|
<div id="fog" class="fog"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%= render 'map/settings_modals' %>
|
|
|
|
<!-- Places Control Buttons -->
|
|
<div class="absolute top-4 left-4 z-[1001] flex flex-col gap-2">
|
|
<!-- Create Place Button -->
|
|
<button id="create-place-btn"
|
|
class="btn btn-circle btn-success shadow-lg"
|
|
onclick="window.mapsController?.togglePlaceCreationMode()"
|
|
title="Click to create a place on the map">
|
|
<%= icon 'map-pin-plus' %>
|
|
</button>
|
|
|
|
<!-- Tag Filter Toggle Button -->
|
|
<% if current_user.tags.any? %>
|
|
<button class="btn btn-circle btn-primary shadow-lg"
|
|
onclick="document.getElementById('places-tag-filter').classList.toggle('hidden')"
|
|
title="Filter Places by Tags">
|
|
<%#= icon 'filter' %>
|
|
</button>
|
|
<% end %>
|
|
</div>
|
|
|
|
<!-- Tag Filters Panel (Floating) -->
|
|
<% if current_user.tags.any? %>
|
|
<div id="places-tag-filter" class="absolute top-20 left-4 bg-base-100 rounded-lg shadow-xl p-4 max-w-xs z-[1000] hidden"
|
|
data-controller="places-filter">
|
|
<div class="flex justify-between items-center mb-3">
|
|
<h3 class="font-semibold flex items-center gap-2">
|
|
<%#= icon 'filter' %> Filter Places by Tags
|
|
</h3>
|
|
<button class="btn btn-ghost btn-xs btn-circle" onclick="document.getElementById('places-tag-filter').classList.add('hidden')">
|
|
<%#= icon 'x' %>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="space-y-2 max-h-96 overflow-y-auto">
|
|
<% current_user.tags.ordered.each do |tag| %>
|
|
<label class="flex items-center gap-2 cursor-pointer hover:bg-base-200 p-2 rounded-lg transition-colors">
|
|
<input type="checkbox"
|
|
data-tag-id="<%= tag.id %>"
|
|
data-action="change->places-filter#filterPlaces"
|
|
class="checkbox checkbox-sm checkbox-primary">
|
|
<span class="text-xl"><%= tag.icon %></span>
|
|
<span class="text-sm font-medium flex-1"><%= tag.name %></span>
|
|
<% if tag.color.present? %>
|
|
<span class="w-3 h-3 rounded-full" style="background-color: <%= tag.color %>;"></span>
|
|
<% end %>
|
|
</label>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="mt-3 pt-3 border-t border-base-300">
|
|
<button class="btn btn-sm btn-ghost w-full" data-action="click->places-filter#clearAll">
|
|
Clear All Filters
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mt-2 text-xs text-base-content/70">
|
|
<%= icon 'info', class: 'inline w-3 h-3' %> Select tags to filter places. Uncheck all to show all places.
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<!-- Include Place Creation Modal -->
|
|
<%= render 'shared/place_creation_modal' %>
|