Add a separate layout for full screen map

This commit is contained in:
Eugene Burmakin
2025-08-19 23:32:06 +02:00
parent 4b55e1b29a
commit c3c997be02
3 changed files with 111 additions and 1 deletions

View File

@@ -2,6 +2,7 @@
class MapController < ApplicationController
before_action :authenticate_user!
layout 'map', only: :index
def index
@points = filtered_points

View File

@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html data-theme="<%= app_theme %>" data-self-hosted="<%= @self_hosted %>">
<head>
<title><%= full_title(yield(:title)) %></title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= action_cable_meta_tag %>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
<%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
<%= javascript_include_tag "https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js" %>
<%= render 'application/favicon' %>
<%= Sentry.get_trace_propagation_meta.html_safe if Sentry.initialized? %>
<% if !DawarichSettings.self_hosted? %>
<script async src="https://scripts.simpleanalyticscdn.com/latest.js"></script>
<% end %>
</head>
<body class='h-screen overflow-hidden relative'>
<!-- Fixed Navbar -->
<div class='fixed w-full z-50 bg-base-100 shadow-md h-16'>
<div class='container mx-auto h-full w-full flex items-center'>
<%= render 'shared/navbar' %>
</div>
</div>
<!-- Flash Messages - Fixed below navbar -->
<div class='fixed top-16 w-full z-40 h-8'>
<div class='container mx-auto px-5'>
<%= render 'shared/flash' %>
</div>
</div>
<!-- Date Navigation - Fixed below flash messages -->
<div>
<div class='container mx-auto px-5 py-3 h-full flex items-center'>
<%= form_with url: map_path(import_id: params[:import_id]), method: :get, class: "w-full" do |f| %>
<div class="flex flex-col space-y-4 sm:flex-row sm:space-y-0 sm:space-x-4 sm:items-end w-full">
<div class="w-full sm:w-1/12 md:w-1/12 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 btn-sm border border-base-300 hover:btn-ghost w-full" do %>
◀️
<% end %>
</span>
</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 :start_at, class: "text-xs font-semibold" %>
<%= f.datetime_local_field :start_at, include_seconds: false, class: "input input-sm input-bordered hover:cursor-pointer hover:input-primary", 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-xs font-semibold" %>
<%= f.datetime_local_field :end_at, include_seconds: false, class: "input input-sm input-bordered hover:cursor-pointer hover:input-primary", value: @end_at %>
</div>
</div>
<div class="w-full sm:w-1/12 md:w-1/12 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 btn-sm border border-base-300 hover:btn-ghost w-full" do %>
▶️
<% end %>
</span>
</div>
</div>
<div class="w-full sm:w-6/12 md:w-2/12 lg:w-1/12">
<div class="flex flex-col space-y-2">
<%= f.submit "Search", class: "btn btn-sm btn-primary hover:btn-info" %>
</div>
</div>
<div class="w-full sm:w-6/12 md:w-2/12 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 btn-sm border border-base-300 hover:btn-ghost" %>
</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: "btn btn-sm border border-base-300 hover:btn-ghost" %>
</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: "btn btn-sm border border-base-300 hover:btn-ghost" %>
</div>
</div>
</div>
<% end %>
</div>
</div>
<!-- Full Screen Map Container -->
<div class='absolute left-0 right-0 bottom-0 w-full z-10'>
<%= yield %>
</div>
<%= render 'map/onboarding_modal' %>
</body>
</html>

View File

@@ -1,6 +1,6 @@
<% content_for :title, 'Map' %>
<div class="flex flex-col lg:flex-row lg:space-x-4 my-5 w-full">
<div class="flex flex-col lg:flex-row lg:space-x-4 w-full">
<div class='w-full'>
<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| %>