mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 02:31:08 -05:00
314 lines
12 KiB
HTML
314 lines
12 KiB
HTML
{% extends 'base/base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Road Trip Planner - ThrillWiki{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
<!-- Leaflet CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<!-- Leaflet Routing Machine CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.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);
|
|
}
|
|
|
|
.park-selection-card {
|
|
@apply bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm hover:shadow-md transition-all cursor-pointer border-2 border-transparent;
|
|
}
|
|
|
|
.park-selection-card:hover {
|
|
@apply border-blue-200 dark:border-blue-700;
|
|
}
|
|
|
|
.park-selection-card.selected {
|
|
@apply border-blue-500 bg-blue-50 dark:bg-blue-900 dark:bg-opacity-30;
|
|
}
|
|
|
|
.park-card {
|
|
@apply bg-white dark:bg-gray-800 rounded-lg p-3 shadow-sm;
|
|
}
|
|
|
|
.trip-summary-card {
|
|
@apply bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900 dark:to-indigo-900 rounded-lg p-4 shadow-sm;
|
|
}
|
|
|
|
.waypoint-marker {
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.waypoint-marker-inner {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
border: 3px solid white;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
.waypoint-start .waypoint-marker-inner {
|
|
background: #10b981;
|
|
}
|
|
|
|
.waypoint-end .waypoint-marker-inner {
|
|
background: #ef4444;
|
|
}
|
|
|
|
.waypoint-stop .waypoint-marker-inner {
|
|
background: #3b82f6;
|
|
}
|
|
|
|
.route-line {
|
|
color: #3b82f6;
|
|
weight: 4;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.dark .route-line {
|
|
color: #60a5fa;
|
|
}
|
|
|
|
.trip-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.trip-stat {
|
|
@apply text-center;
|
|
}
|
|
|
|
.trip-stat-value {
|
|
@apply text-2xl font-bold text-blue-600 dark:text-blue-400;
|
|
}
|
|
|
|
.trip-stat-label {
|
|
@apply text-sm text-gray-600 dark:text-gray-400 mt-1;
|
|
}
|
|
|
|
.draggable-item {
|
|
cursor: grab;
|
|
}
|
|
|
|
.draggable-item:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.drag-over {
|
|
@apply border-dashed border-2 border-blue-400 bg-blue-50 dark:bg-blue-900 dark:bg-opacity-30;
|
|
}
|
|
|
|
.park-search-result {
|
|
@apply p-3 hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer border-b border-gray-100 dark:border-gray-700;
|
|
}
|
|
|
|
.park-search-result:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.park-search-result:hover {
|
|
@apply bg-gray-50 dark:bg-gray-700;
|
|
}
|
|
</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">Road Trip Planner</h1>
|
|
<p class="mt-2 text-gray-600 dark:text-gray-400">
|
|
Plan the perfect theme park adventure across multiple destinations
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<a href="{% url 'maps:universal_map' %}"
|
|
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-globe"></i>View Map
|
|
</a>
|
|
<a href="{% url 'parks:park_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>Browse Parks
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
|
<!-- Left Panel - Trip Planning -->
|
|
<div class="lg:col-span-1 space-y-6">
|
|
<!-- Park Search -->
|
|
<div class="p-4 bg-white rounded-lg shadow dark:bg-gray-800">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">Add Parks to Trip</h3>
|
|
|
|
<div class="relative">
|
|
<input type="text" id="park-search"
|
|
class="w-full border-gray-300 rounded-lg form-input dark:border-gray-600 dark:bg-gray-700 dark:text-white"
|
|
placeholder="Search parks by name or location..."
|
|
hx-get="{% url 'parks:htmx_search_parks' %}"
|
|
hx-trigger="input changed delay:300ms"
|
|
hx-target="#park-search-results"
|
|
hx-indicator="#search-loading">
|
|
|
|
<div id="search-loading" class="htmx-indicator absolute right-3 top-3">
|
|
<div class="w-4 h-4 border-2 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="park-search-results" class="mt-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 hidden">
|
|
<!-- Search results will be populated here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Trip Itinerary -->
|
|
<div class="p-4 bg-white rounded-lg shadow dark:bg-gray-800">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Trip Itinerary</h3>
|
|
<button id="clear-trip"
|
|
class="px-3 py-1 text-sm text-red-600 hover:text-red-700 dark:text-red-400"
|
|
onclick="tripPlanner.clearTrip()">
|
|
<i class="mr-1 fas fa-trash"></i>Clear All
|
|
</button>
|
|
</div>
|
|
|
|
<div id="trip-parks" class="space-y-2 min-h-20">
|
|
<div id="empty-trip" class="text-center py-8 text-gray-500 dark:text-gray-400">
|
|
<i class="fas fa-route text-3xl mb-3"></i>
|
|
<p>Add parks to start planning your trip</p>
|
|
<p class="text-sm mt-1">Search above or click parks on the map</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 space-y-2">
|
|
<button id="optimize-route"
|
|
class="w-full px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
onclick="tripPlanner.optimizeRoute()" disabled>
|
|
<i class="mr-2 fas fa-route"></i>Optimize Route
|
|
</button>
|
|
<button id="calculate-route"
|
|
class="w-full px-4 py-2 text-blue-600 border border-blue-600 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
onclick="tripPlanner.calculateRoute()" disabled>
|
|
<i class="mr-2 fas fa-map"></i>Calculate Route
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Trip Summary -->
|
|
<div id="trip-summary" class="trip-summary-card hidden">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">Trip Summary</h3>
|
|
|
|
<div class="trip-stats">
|
|
<div class="trip-stat">
|
|
<div class="trip-stat-value" id="total-distance">-</div>
|
|
<div class="trip-stat-label">Total Miles</div>
|
|
</div>
|
|
<div class="trip-stat">
|
|
<div class="trip-stat-value" id="total-time">-</div>
|
|
<div class="trip-stat-label">Drive Time</div>
|
|
</div>
|
|
<div class="trip-stat">
|
|
<div class="trip-stat-value" id="total-parks">-</div>
|
|
<div class="trip-stat-label">Parks</div>
|
|
</div>
|
|
<div class="trip-stat">
|
|
<div class="trip-stat-value" id="total-rides">-</div>
|
|
<div class="trip-stat-label">Total Rides</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<button id="save-trip"
|
|
class="w-full px-4 py-2 text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors"
|
|
onclick="tripPlanner.saveTrip()">
|
|
<i class="mr-2 fas fa-save"></i>Save Trip
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Panel - Map -->
|
|
<div class="lg:col-span-2">
|
|
<div class="p-4 bg-white rounded-lg shadow dark:bg-gray-800">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Route Map</h3>
|
|
<div class="flex gap-2">
|
|
<button id="fit-route"
|
|
class="px-3 py-1 text-sm text-gray-700 bg-gray-100 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
|
|
onclick="tripPlanner.fitRoute()">
|
|
<i class="mr-1 fas fa-expand-arrows-alt"></i>Fit Route
|
|
</button>
|
|
<button id="toggle-parks"
|
|
class="px-3 py-1 text-sm text-gray-700 bg-gray-100 rounded hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600"
|
|
onclick="tripPlanner.toggleAllParks()">
|
|
<i class="mr-1 fas fa-eye"></i>Show All Parks
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<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...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Saved Trips Section -->
|
|
<div class="mt-8">
|
|
<div class="p-4 bg-white rounded-lg shadow dark:bg-gray-800">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">My Saved Trips</h3>
|
|
<button class="px-3 py-1 text-sm text-blue-600 hover:text-blue-700"
|
|
hx-get="{% url 'parks:htmx_saved_trips' %}"
|
|
hx-target="#saved-trips"
|
|
hx-trigger="click">
|
|
<i class="mr-1 fas fa-sync"></i>Refresh
|
|
</button>
|
|
</div>
|
|
|
|
<div id="saved-trips"
|
|
hx-get="{% url 'parks:htmx_saved_trips' %}"
|
|
hx-trigger="load"
|
|
hx-indicator="#trips-loading">
|
|
<!-- Saved trips will be loaded here -->
|
|
</div>
|
|
|
|
<div id="trips-loading" class="htmx-indicator text-center py-4">
|
|
<div class="w-6 h-6 mx-auto border-2 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-2">Loading saved trips...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<!-- Leaflet JS -->
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
<!-- Leaflet Routing Machine JS -->
|
|
<script src="https://unpkg.com/leaflet-routing-machine@3.2.12/dist/leaflet-routing-machine.js"></script>
|
|
<!-- Sortable JS for drag & drop -->
|
|
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
|
|
|
|
<!-- AlpineJS Trip Planner Component (HTMX + AlpineJS Only) -->
|
|
<div x-data="tripPlanner" x-init="initMap()" style="display: none;">
|
|
<!-- Trip planner functionality handled by AlpineJS + HTMX -->
|
|
</div>
|
|
{% endblock %}
|