mirror of
https://github.com/Freika/dawarich.git
synced 2026-01-14 19:21:39 -05:00
123 lines
3 KiB
Text
123 lines
3 KiB
Text
<% content_for :title, 'Map' %>
|
|
|
|
<%= render 'shared/map/date_navigation_v2', start_at: @start_at, end_at: @end_at %>
|
|
|
|
<div data-controller="maps-v2"
|
|
data-maps-v2-api-key-value="<%= current_user.api_key %>"
|
|
data-maps-v2-start-date-value="<%= @start_at.to_s %>"
|
|
data-maps-v2-end-date-value="<%= @end_at.to_s %>"
|
|
style="width: 100%; height: 100%; position: relative;">
|
|
|
|
<!-- Map container takes full width and height -->
|
|
<div data-maps-v2-target="container" style="width: 100%; height: 100%;"></div>
|
|
|
|
<!-- Layer Controls (top-left corner) -->
|
|
<div class="absolute top-4 left-4 z-10 flex flex-col gap-2">
|
|
<button data-action="click->maps-v2#toggleLayer"
|
|
data-layer="points"
|
|
class="btn btn-sm btn-primary">
|
|
<%= icon 'map-pin' %>
|
|
<span class="ml-1">Points</span>
|
|
</button>
|
|
|
|
<button data-action="click->maps-v2#toggleLayer"
|
|
data-layer="routes"
|
|
class="btn btn-sm btn-primary">
|
|
<%= icon 'route' %>
|
|
<span class="ml-1">Routes</span>
|
|
</button>
|
|
|
|
<!-- Cluster toggle -->
|
|
<button data-action="click->maps-v2#toggleClustering"
|
|
data-maps-v2-target="clusterToggle"
|
|
class="btn btn-sm btn-primary"
|
|
title="Toggle point clustering">
|
|
<%= icon 'grid2x2' %>
|
|
<span class="ml-1">Cluster</span>
|
|
</button>
|
|
|
|
<!-- Settings button -->
|
|
<button data-action="click->maps-v2#toggleSettings"
|
|
class="btn btn-sm btn-primary"
|
|
title="Settings">
|
|
<%= icon 'square-pen' %>
|
|
<span class="ml-1">Settings</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Loading overlay -->
|
|
<div data-maps-v2-target="loading" class="loading-overlay hidden">
|
|
<div class="loading-spinner"></div>
|
|
<div class="loading-text" data-maps-v2-target="loadingText">Loading points...</div>
|
|
</div>
|
|
|
|
<!-- Settings panel -->
|
|
<%= render 'maps_v2/settings_panel' %>
|
|
</div>
|
|
|
|
<style>
|
|
.loading-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.loading-overlay.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 4px solid #e5e7eb;
|
|
border-top-color: #3b82f6;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.loading-text {
|
|
margin-top: 16px;
|
|
font-size: 14px;
|
|
color: #6b7280;
|
|
}
|
|
|
|
/* Popup styles */
|
|
.point-popup {
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
}
|
|
|
|
.popup-header {
|
|
margin-bottom: 8px;
|
|
padding-bottom: 8px;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.popup-body {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.popup-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
padding: 4px 0;
|
|
}
|
|
|
|
.popup-row .label {
|
|
color: #6b7280;
|
|
}
|
|
|
|
.popup-row .value {
|
|
font-weight: 500;
|
|
color: #111827;
|
|
}
|
|
</style>
|