mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 09:11:08 -05:00
504 lines
18 KiB
HTML
504 lines
18 KiB
HTML
{% extends 'base/base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}{{ page_title }} - ThrillWiki{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
<!-- Leaflet CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<!-- Leaflet MarkerCluster CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
|
|
|
|
<style>
|
|
.map-container {
|
|
height: 70vh;
|
|
min-height: 500px;
|
|
border-radius: 0.5rem;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.map-controls {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
z-index: 1000;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border-radius: 0.5rem;
|
|
padding: 1rem;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.dark .map-controls {
|
|
background: rgba(31, 41, 55, 0.95);
|
|
}
|
|
|
|
.filter-pill {
|
|
@apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200 cursor-pointer transition-colors;
|
|
}
|
|
|
|
.filter-pill.active {
|
|
@apply bg-blue-500 text-white dark:bg-blue-600;
|
|
}
|
|
|
|
.filter-pill:hover {
|
|
@apply bg-gray-200 dark:bg-gray-600;
|
|
}
|
|
|
|
.filter-pill.active:hover {
|
|
@apply bg-blue-600 dark:bg-blue-700;
|
|
}
|
|
|
|
.location-info-popup {
|
|
max-width: 300px;
|
|
}
|
|
|
|
.location-info-popup h3 {
|
|
margin: 0 0 0.5rem 0;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.location-info-popup p {
|
|
margin: 0.25rem 0;
|
|
font-size: 0.9rem;
|
|
color: #666;
|
|
}
|
|
|
|
.dark .location-info-popup p {
|
|
color: #ccc;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container px-4 mx-auto">
|
|
<!-- Header -->
|
|
<div class="flex flex-col items-start justify-between gap-4 mb-6 md:flex-row md:items-center">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-gray-900 dark:text-white">{{ page_title }}</h1>
|
|
<p class="mt-2 text-gray-600 dark:text-gray-400">
|
|
Explore theme parks, rides, and attractions from around the world
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<a href="{% url 'maps:park_map' %}"
|
|
class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors">
|
|
<i class="mr-2 fas fa-map-marker-alt"></i>Parks Only
|
|
</a>
|
|
<a href="{% url 'maps:location_list' %}"
|
|
class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 transition-colors">
|
|
<i class="mr-2 fas fa-list"></i>List View
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters Panel -->
|
|
<div class="p-4 mb-6 bg-white rounded-lg shadow dark:bg-gray-800">
|
|
<form id="map-filters"
|
|
hx-get="{% url 'maps:htmx_filter' %}"
|
|
hx-trigger="change, submit"
|
|
hx-target="#map-container"
|
|
hx-swap="none"
|
|
hx-push-url="false">
|
|
|
|
<div class="grid grid-cols-1 gap-4 mb-4 md:grid-cols-2 lg:grid-cols-4">
|
|
<!-- Search -->
|
|
<div>
|
|
<label for="search" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Search</label>
|
|
<input type="text" name="q" id="search"
|
|
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="Search locations..."
|
|
hx-get="{% url 'maps:htmx_search' %}"
|
|
hx-trigger="input changed delay:500ms"
|
|
hx-target="#search-results"
|
|
hx-indicator="#search-loading">
|
|
</div>
|
|
|
|
<!-- Country -->
|
|
<div>
|
|
<label for="country" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Country</label>
|
|
<input type="text" name="country" id="country"
|
|
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="Filter by country...">
|
|
</div>
|
|
|
|
<!-- State/Region -->
|
|
<div>
|
|
<label for="state" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">State/Region</label>
|
|
<input type="text" name="state" id="state"
|
|
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="Filter by state...">
|
|
</div>
|
|
|
|
<!-- Clustering Toggle -->
|
|
<div class="flex items-end">
|
|
<label class="flex items-center cursor-pointer">
|
|
<input type="checkbox" name="cluster" value="true" id="cluster-toggle"
|
|
class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700"
|
|
checked>
|
|
<span class="ml-2 text-sm font-medium text-gray-700 dark:text-gray-300">Enable Clustering</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location Type Filters -->
|
|
<div class="mb-4">
|
|
<label class="block mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">Location Types</label>
|
|
<div class="flex flex-wrap gap-2">
|
|
{% for type in location_types %}
|
|
<label class="filter-pill" data-type="{{ type }}">
|
|
<input type="checkbox" name="types" value="{{ type }}"
|
|
class="hidden location-type-checkbox"
|
|
{% if type in initial_location_types %}checked{% endif %}>
|
|
<i class="mr-2 fas fa-{% if type == 'park' %}map-marker-alt{% elif type == 'ride' %}rocket{% elif type == 'company' %}building{% else %}map-pin{% endif %}"></i>
|
|
{{ type|title }}
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Search Results -->
|
|
<div id="search-results" class="mt-4"></div>
|
|
<div id="search-loading" class="htmx-indicator">
|
|
<div class="flex items-center justify-center p-4">
|
|
<div class="w-6 h-6 border-2 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
|
|
<span class="ml-2 text-sm text-gray-600 dark:text-gray-400">Searching...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Map Container -->
|
|
<div class="relative">
|
|
<div id="map-container" class="map-container"></div>
|
|
|
|
<!-- Map Loading Indicator -->
|
|
<div id="map-loading" class="htmx-indicator absolute inset-0 flex items-center justify-center bg-gray-100 dark:bg-gray-800 rounded-lg">
|
|
<div class="text-center">
|
|
<div class="w-8 h-8 mx-auto mb-4 border-4 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">Loading map data...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location Details Modal -->
|
|
<div id="location-modal" class="fixed inset-0 z-50 hidden">
|
|
<!-- Modal content will be loaded here via HTMX -->
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<!-- Leaflet JS -->
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<!-- Leaflet MarkerCluster JS -->
|
|
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
|
|
|
|
<script>
|
|
// Map initialization and management
|
|
class ThrillWikiMap {
|
|
constructor(containerId, options = {}) {
|
|
this.containerId = containerId;
|
|
this.options = {
|
|
center: [39.8283, -98.5795], // Center of USA
|
|
zoom: 4,
|
|
enableClustering: true,
|
|
...options
|
|
};
|
|
this.map = null;
|
|
this.markers = new L.MarkerClusterGroup();
|
|
this.currentData = [];
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
// Initialize the map
|
|
this.map = L.map(this.containerId, {
|
|
center: this.options.center,
|
|
zoom: this.options.zoom,
|
|
zoomControl: false
|
|
});
|
|
|
|
// Add custom zoom control
|
|
L.control.zoom({
|
|
position: 'bottomright'
|
|
}).addTo(this.map);
|
|
|
|
// Add tile layers with dark mode support
|
|
const lightTiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors',
|
|
className: 'map-tiles'
|
|
});
|
|
|
|
const darkTiles = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
|
|
attribution: '© OpenStreetMap contributors, © CARTO',
|
|
className: 'map-tiles-dark'
|
|
});
|
|
|
|
// Set initial tiles based on theme
|
|
if (document.documentElement.classList.contains('dark')) {
|
|
darkTiles.addTo(this.map);
|
|
} else {
|
|
lightTiles.addTo(this.map);
|
|
}
|
|
|
|
// Listen for theme changes
|
|
this.observeThemeChanges(lightTiles, darkTiles);
|
|
|
|
// Add markers cluster group
|
|
this.map.addLayer(this.markers);
|
|
|
|
// Bind map events
|
|
this.bindEvents();
|
|
|
|
// Load initial data
|
|
this.loadMapData();
|
|
}
|
|
|
|
observeThemeChanges(lightTiles, darkTiles) {
|
|
const observer = new MutationObserver((mutations) => {
|
|
mutations.forEach((mutation) => {
|
|
if (mutation.attributeName === 'class') {
|
|
if (document.documentElement.classList.contains('dark')) {
|
|
this.map.removeLayer(lightTiles);
|
|
this.map.addLayer(darkTiles);
|
|
} else {
|
|
this.map.removeLayer(darkTiles);
|
|
this.map.addLayer(lightTiles);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
observer.observe(document.documentElement, {
|
|
attributes: true,
|
|
attributeFilter: ['class']
|
|
});
|
|
}
|
|
|
|
bindEvents() {
|
|
// Update map when bounds change
|
|
this.map.on('moveend zoomend', () => {
|
|
this.updateMapBounds();
|
|
});
|
|
|
|
// Handle filter form changes
|
|
document.getElementById('map-filters').addEventListener('htmx:afterRequest', (event) => {
|
|
if (event.detail.successful) {
|
|
this.loadMapData();
|
|
}
|
|
});
|
|
}
|
|
|
|
async loadMapData() {
|
|
try {
|
|
document.getElementById('map-loading').style.display = 'flex';
|
|
|
|
const formData = new FormData(document.getElementById('map-filters'));
|
|
const params = new URLSearchParams();
|
|
|
|
// Add form data to params
|
|
for (let [key, value] of formData.entries()) {
|
|
params.append(key, value);
|
|
}
|
|
|
|
// Add map bounds
|
|
const bounds = this.map.getBounds();
|
|
params.append('north', bounds.getNorth());
|
|
params.append('south', bounds.getSouth());
|
|
params.append('east', bounds.getEast());
|
|
params.append('west', bounds.getWest());
|
|
params.append('zoom', this.map.getZoom());
|
|
|
|
const response = await fetch(`{{ map_api_urls.locations }}?${params}`);
|
|
const data = await response.json();
|
|
|
|
if (data.status === 'success') {
|
|
this.updateMarkers(data.data);
|
|
} else {
|
|
console.error('Map data error:', data.message);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load map data:', error);
|
|
} finally {
|
|
document.getElementById('map-loading').style.display = 'none';
|
|
}
|
|
}
|
|
|
|
updateMarkers(data) {
|
|
// Clear existing markers
|
|
this.markers.clearLayers();
|
|
|
|
// Add location markers
|
|
if (data.locations) {
|
|
data.locations.forEach(location => {
|
|
this.addLocationMarker(location);
|
|
});
|
|
}
|
|
|
|
// Add cluster markers
|
|
if (data.clusters) {
|
|
data.clusters.forEach(cluster => {
|
|
this.addClusterMarker(cluster);
|
|
});
|
|
}
|
|
}
|
|
|
|
addLocationMarker(location) {
|
|
const icon = this.getLocationIcon(location.type);
|
|
const marker = L.marker([location.latitude, location.longitude], { icon });
|
|
|
|
// Create popup content
|
|
const popupContent = this.createPopupContent(location);
|
|
marker.bindPopup(popupContent);
|
|
|
|
// Add click handler for detailed view
|
|
marker.on('click', () => {
|
|
this.showLocationDetails(location.type, location.id);
|
|
});
|
|
|
|
this.markers.addLayer(marker);
|
|
}
|
|
|
|
addClusterMarker(cluster) {
|
|
const marker = L.marker([cluster.latitude, cluster.longitude], {
|
|
icon: L.divIcon({
|
|
className: 'cluster-marker',
|
|
html: `<div class="cluster-marker-inner">${cluster.count}</div>`,
|
|
iconSize: [40, 40]
|
|
})
|
|
});
|
|
|
|
marker.bindPopup(`${cluster.count} locations in this area`);
|
|
this.markers.addLayer(marker);
|
|
}
|
|
|
|
getLocationIcon(type) {
|
|
const iconMap = {
|
|
'park': '🎢',
|
|
'ride': '🎠',
|
|
'company': '🏢',
|
|
'generic': '📍'
|
|
};
|
|
|
|
return L.divIcon({
|
|
className: 'location-marker',
|
|
html: `<div class="location-marker-inner">${iconMap[type] || '📍'}</div>`,
|
|
iconSize: [30, 30],
|
|
iconAnchor: [15, 15]
|
|
});
|
|
}
|
|
|
|
createPopupContent(location) {
|
|
return `
|
|
<div class="location-info-popup">
|
|
<h3>${location.name}</h3>
|
|
${location.formatted_location ? `<p><i class="fas fa-map-marker-alt mr-1"></i>${location.formatted_location}</p>` : ''}
|
|
${location.operator ? `<p><i class="fas fa-building mr-1"></i>${location.operator}</p>` : ''}
|
|
${location.ride_count ? `<p><i class="fas fa-rocket mr-1"></i>${location.ride_count} rides</p>` : ''}
|
|
<div class="mt-2">
|
|
<button onclick="thrillwikiMap.showLocationDetails('${location.type}', ${location.id})"
|
|
class="px-3 py-1 text-sm text-white bg-blue-600 rounded hover:bg-blue-700">
|
|
View Details
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
showLocationDetails(type, id) {
|
|
htmx.ajax('GET', `{% url 'maps:htmx_location_detail' 'TYPE' 0 %}`.replace('TYPE', type).replace('0', id), {
|
|
target: '#location-modal',
|
|
swap: 'innerHTML'
|
|
}).then(() => {
|
|
document.getElementById('location-modal').classList.remove('hidden');
|
|
});
|
|
}
|
|
|
|
updateMapBounds() {
|
|
// This could trigger an HTMX request to update data based on new bounds
|
|
// For now, we'll just reload data when the map moves significantly
|
|
clearTimeout(this.boundsUpdateTimeout);
|
|
this.boundsUpdateTimeout = setTimeout(() => {
|
|
this.loadMapData();
|
|
}, 1000);
|
|
}
|
|
}
|
|
|
|
// Initialize map when page loads
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
window.thrillwikiMap = new ThrillWikiMap('map-container', {
|
|
{% if initial_bounds %}
|
|
center: [{{ initial_bounds.north|add:initial_bounds.south|floatformat:6|div:2 }}, {{ initial_bounds.east|add:initial_bounds.west|floatformat:6|div:2 }}],
|
|
{% endif %}
|
|
enableClustering: {{ enable_clustering|yesno:"true,false" }}
|
|
});
|
|
|
|
// Handle filter pill toggles
|
|
document.querySelectorAll('.filter-pill').forEach(pill => {
|
|
const checkbox = pill.querySelector('input[type="checkbox"]');
|
|
|
|
// Set initial state
|
|
if (checkbox.checked) {
|
|
pill.classList.add('active');
|
|
}
|
|
|
|
pill.addEventListener('click', () => {
|
|
checkbox.checked = !checkbox.checked;
|
|
pill.classList.toggle('active', checkbox.checked);
|
|
|
|
// Trigger form change
|
|
document.getElementById('map-filters').dispatchEvent(new Event('change'));
|
|
});
|
|
});
|
|
|
|
// Close modal handler
|
|
document.addEventListener('click', (e) => {
|
|
if (e.target.id === 'location-modal') {
|
|
document.getElementById('location-modal').classList.add('hidden');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.cluster-marker {
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.cluster-marker-inner {
|
|
background: #3b82f6;
|
|
color: white;
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
border: 3px solid white;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.location-marker {
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.location-marker-inner {
|
|
font-size: 20px;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
|
|
}
|
|
|
|
.dark .cluster-marker-inner {
|
|
border-color: #374151;
|
|
}
|
|
</style>
|
|
{% endblock %} |