1097 lines
42 KiB
HTML
1097 lines
42 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Journey Mapper - Interactive Map</title>
|
|
|
|
<!-- Open Props CSS -->
|
|
<link rel="stylesheet" href="https://unpkg.com/open-props"/>
|
|
<!-- optional: normalize / additional props -->
|
|
<link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/>
|
|
|
|
<!-- Leaflet -->
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
|
|
<!-- Font Awesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
<!-- Google Fonts (optional, Open Props uses system fonts by default) -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
/* Use Open Props design tokens */
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: var(--font-sans);
|
|
background: var(--gray-0);
|
|
color: var(--gray-9);
|
|
}
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
.app-container {
|
|
display: flex;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 320px;
|
|
background: var(--surface-2);
|
|
border-right: 1px solid var(--surface-4);
|
|
padding: var(--size-4);
|
|
transition: transform 0.3s var(--ease-3);
|
|
overflow-y: auto;
|
|
box-shadow: var(--shadow-4);
|
|
}
|
|
.sidebar.collapsed {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.map-area {
|
|
flex: 1;
|
|
min-width: 0;
|
|
position: relative;
|
|
}
|
|
|
|
#map {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--surface-1);
|
|
}
|
|
|
|
/* Header */
|
|
.sidebar-header {
|
|
margin-bottom: var(--size-6);
|
|
text-align: center;
|
|
}
|
|
.sidebar-header h1 {
|
|
color: var(--indigo-8);
|
|
margin: 0;
|
|
font-size: var(--font-size-5);
|
|
font-weight: var(--font-weight-6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--size-2);
|
|
}
|
|
.tagline {
|
|
color: var(--gray-6);
|
|
font-size: var(--font-size-0);
|
|
margin-top: var(--size-2);
|
|
}
|
|
|
|
/* Mode buttons */
|
|
.mode-selector {
|
|
margin-bottom: var(--size-4);
|
|
}
|
|
.mode-btn {
|
|
width: 100%;
|
|
padding: var(--size-3);
|
|
margin-bottom: var(--size-2);
|
|
border: none;
|
|
border-radius: var(--radius-3);
|
|
background: var(--surface-3);
|
|
color: var(--text-2);
|
|
font-size: var(--font-size-2);
|
|
cursor: pointer;
|
|
transition: all 0.2s var(--ease-2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--size-2);
|
|
box-shadow: var(--shadow-2);
|
|
}
|
|
.mode-btn.active {
|
|
background: var(--indigo-7);
|
|
color: white;
|
|
box-shadow: var(--shadow-3);
|
|
}
|
|
.mode-btn:hover {
|
|
background: var(--surface-4);
|
|
}
|
|
|
|
/* Panels */
|
|
.panel {
|
|
display: none;
|
|
background: var(--surface-1);
|
|
border-radius: var(--radius-3);
|
|
padding: var(--size-4);
|
|
box-shadow: var(--shadow-3);
|
|
margin-bottom: var(--size-4);
|
|
}
|
|
.panel.active-panel {
|
|
display: block;
|
|
}
|
|
|
|
/* Forms */
|
|
.form-group {
|
|
margin-bottom: var(--size-3);
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: var(--size-1);
|
|
font-weight: var(--font-weight-5);
|
|
color: var(--text-2);
|
|
font-size: var(--font-size-1);
|
|
}
|
|
input[type="text"],
|
|
input[type="date"],
|
|
textarea,
|
|
select {
|
|
width: 100%;
|
|
padding: var(--size-2) var(--size-3);
|
|
border: 1px solid var(--surface-4);
|
|
border-radius: var(--radius-2);
|
|
font-size: var(--font-size-2);
|
|
background: var(--surface-2);
|
|
color: var(--text-1);
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
input:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
outline: none;
|
|
border-color: var(--indigo-6);
|
|
box-shadow: 0 0 0 3px var(--indigo-2);
|
|
}
|
|
textarea {
|
|
min-height: 80px;
|
|
resize: vertical;
|
|
}
|
|
|
|
/* Instructions */
|
|
.instructions {
|
|
background: var(--surface-3);
|
|
padding: var(--size-3);
|
|
border-radius: var(--radius-2);
|
|
margin-bottom: var(--size-4);
|
|
font-size: var(--font-size-1);
|
|
border-left: 4px solid var(--indigo-6);
|
|
}
|
|
.instructions h4 {
|
|
margin-top: 0;
|
|
margin-bottom: var(--size-2);
|
|
color: var(--indigo-8);
|
|
}
|
|
.instructions ol {
|
|
margin: 0;
|
|
padding-left: var(--size-5);
|
|
}
|
|
|
|
/* Buttons */
|
|
.button-group {
|
|
display: flex;
|
|
gap: var(--size-2);
|
|
margin-top: var(--size-4);
|
|
flex-wrap: wrap;
|
|
}
|
|
.btn {
|
|
padding: var(--size-2) var(--size-4);
|
|
border: none;
|
|
border-radius: var(--radius-2);
|
|
cursor: pointer;
|
|
font-size: var(--font-size-2);
|
|
font-weight: var(--font-weight-5);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--size-2);
|
|
transition: all 0.2s var(--ease-2);
|
|
box-shadow: var(--shadow-2);
|
|
}
|
|
.btn-primary {
|
|
background: var(--indigo-7);
|
|
color: white;
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--indigo-8);
|
|
box-shadow: var(--shadow-3);
|
|
}
|
|
.btn-success {
|
|
background: var(--green-7);
|
|
color: white;
|
|
}
|
|
.btn-success:hover {
|
|
background: var(--green-8);
|
|
}
|
|
.btn-secondary {
|
|
background: var(--gray-7);
|
|
color: white;
|
|
}
|
|
.btn-secondary:hover {
|
|
background: var(--gray-8);
|
|
}
|
|
.btn-danger {
|
|
background: var(--red-7);
|
|
color: white;
|
|
}
|
|
.btn-danger:hover {
|
|
background: var(--red-8);
|
|
}
|
|
|
|
/* Markers list */
|
|
.markers-list {
|
|
background: var(--surface-1);
|
|
border-radius: var(--radius-3);
|
|
padding: var(--size-4);
|
|
box-shadow: var(--shadow-3);
|
|
margin-top: var(--size-4);
|
|
}
|
|
.markers-list h3 {
|
|
margin-top: 0;
|
|
color: var(--indigo-8);
|
|
font-size: var(--font-size-3);
|
|
border-bottom: 1px solid var(--surface-4);
|
|
padding-bottom: var(--size-2);
|
|
margin-bottom: var(--size-3);
|
|
}
|
|
.marker-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: var(--size-2);
|
|
background: var(--surface-2);
|
|
border-radius: var(--radius-2);
|
|
margin-bottom: var(--size-2);
|
|
cursor: pointer;
|
|
transition: background 0.2s;
|
|
}
|
|
.marker-item:hover {
|
|
background: var(--surface-3);
|
|
}
|
|
.marker-title {
|
|
font-weight: var(--font-weight-5);
|
|
color: var(--indigo-8);
|
|
flex: 1;
|
|
}
|
|
.marker-coords {
|
|
font-size: var(--font-size-0);
|
|
color: var(--gray-6);
|
|
}
|
|
.empty-message {
|
|
text-align: center;
|
|
color: var(--gray-6);
|
|
font-style: italic;
|
|
padding: var(--size-4);
|
|
}
|
|
|
|
/* Map controls */
|
|
.map-controls {
|
|
position: absolute;
|
|
top: var(--size-4);
|
|
right: var(--size-4);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-2);
|
|
z-index: 10;
|
|
}
|
|
.control-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: var(--radius-round);
|
|
background-color: var(--surface-1);
|
|
border: none;
|
|
box-shadow: var(--shadow-3);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: var(--font-size-3);
|
|
color: var(--text-2);
|
|
transition: all 0.2s;
|
|
}
|
|
.control-btn:hover {
|
|
background-color: var(--surface-3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Mode indicator */
|
|
.mode-indicator {
|
|
position: absolute;
|
|
top: var(--size-4);
|
|
left: var(--size-4);
|
|
background-color: var(--surface-1);
|
|
padding: var(--size-2) var(--size-4);
|
|
border-radius: var(--radius-5);
|
|
box-shadow: var(--shadow-3);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-2);
|
|
z-index: 10;
|
|
}
|
|
.indicator-text {
|
|
font-weight: var(--font-weight-5);
|
|
color: var(--text-2);
|
|
}
|
|
.indicator-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: var(--radius-round);
|
|
}
|
|
.indicator-dot.creating {
|
|
background-color: var(--indigo-6);
|
|
}
|
|
.indicator-dot.viewing {
|
|
background-color: var(--green-6);
|
|
}
|
|
|
|
/* Journey info */
|
|
.journey-info {
|
|
background-color: var(--surface-2);
|
|
border-radius: var(--radius-2);
|
|
padding: var(--size-3);
|
|
margin-top: var(--size-3);
|
|
border: 1px solid var(--surface-4);
|
|
}
|
|
.info-content p {
|
|
margin: var(--size-2) 0;
|
|
}
|
|
|
|
/* Modal */
|
|
.modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
background-color: rgba(0,0,0,0.5);
|
|
z-index: 1000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.modal.active {
|
|
display: flex;
|
|
}
|
|
.modal-content {
|
|
background-color: var(--surface-1);
|
|
border-radius: var(--radius-4);
|
|
width: 90%;
|
|
max-width: 500px;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
box-shadow: var(--shadow-5);
|
|
}
|
|
.modal-header {
|
|
padding: var(--size-4);
|
|
border-bottom: 1px solid var(--surface-4);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.modal-header h3 {
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-2);
|
|
}
|
|
.close-btn {
|
|
background: none;
|
|
border: none;
|
|
font-size: var(--font-size-4);
|
|
cursor: pointer;
|
|
color: var(--gray-6);
|
|
}
|
|
.close-btn:hover {
|
|
color: var(--gray-9);
|
|
}
|
|
.modal-body {
|
|
padding: var(--size-4);
|
|
}
|
|
.modal-footer {
|
|
padding: var(--size-4);
|
|
border-top: 1px solid var(--surface-4);
|
|
display: flex;
|
|
gap: var(--size-2);
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
/* Toast */
|
|
.toast {
|
|
position: fixed;
|
|
bottom: var(--size-4);
|
|
right: var(--size-4);
|
|
background-color: var(--green-7);
|
|
color: white;
|
|
padding: var(--size-3) var(--size-4);
|
|
border-radius: var(--radius-3);
|
|
box-shadow: var(--shadow-4);
|
|
display: none;
|
|
z-index: 1100;
|
|
animation: slideIn 0.3s var(--ease-3);
|
|
}
|
|
@keyframes slideIn {
|
|
from { transform: translateX(100%); opacity: 0; }
|
|
to { transform: translateX(0); opacity: 1; }
|
|
}
|
|
|
|
/* Footer */
|
|
.sidebar-footer {
|
|
margin-top: var(--size-4);
|
|
border-top: 1px solid var(--surface-4);
|
|
padding-top: var(--size-3);
|
|
}
|
|
.navigation {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-bottom: var(--size-2);
|
|
}
|
|
.nav-link {
|
|
color: var(--indigo-7);
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-1);
|
|
font-size: var(--font-size-1);
|
|
}
|
|
.nav-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.footer-text {
|
|
text-align: center;
|
|
font-size: var(--font-size-0);
|
|
color: var(--gray-6);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
height: 100%;
|
|
transform: translateX(-100%);
|
|
}
|
|
.sidebar.active {
|
|
transform: translateX(0);
|
|
}
|
|
.app-container {
|
|
flex-direction: column;
|
|
}
|
|
.map-controls {
|
|
top: auto;
|
|
bottom: var(--size-4);
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- SIDEBAR -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<h1><i class="fas fa-map-marked-alt"></i> Journey Mapper</h1>
|
|
<p class="tagline">Create and explore interactive journey maps</p>
|
|
</div>
|
|
|
|
<div class="mode-selector">
|
|
<button id="mode-create" class="mode-btn active">
|
|
<i class="fas fa-plus-circle"></i> Create Journey
|
|
</button>
|
|
<button id="mode-view" class="mode-btn">
|
|
<i class="fas fa-eye"></i> View Journeys
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Create Panel -->
|
|
<div id="create-panel" class="panel active-panel">
|
|
<h3><i class="fas fa-route"></i> Create New Journey</h3>
|
|
<div class="form-group">
|
|
<label for="journey-title"><i class="fas fa-heading"></i> Journey Title</label>
|
|
<input type="text" id="journey-title" placeholder="My European Adventure" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="journey-description"><i class="fas fa-align-left"></i> Description</label>
|
|
<textarea id="journey-description" placeholder="Describe your journey..."></textarea>
|
|
</div>
|
|
|
|
<div class="instructions">
|
|
<h4><i class="fas fa-info-circle"></i> How to create:</h4>
|
|
<ol>
|
|
<li>Click on the map to place markers</li>
|
|
<li>Click on a marker to edit its content</li>
|
|
<li>Markers are automatically connected</li>
|
|
<li>Click "Save Journey" when done</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<h4><i class="fas fa-map-marker-alt"></i> Journey Markers</h4>
|
|
<div id="create-markers-container">
|
|
<!-- markers appear here dynamically -->
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button id="add-marker-btn" class="btn btn-primary">
|
|
<i class="fas fa-plus"></i> Add Marker
|
|
</button>
|
|
<button id="save-journey-btn" class="btn btn-success">
|
|
<i class="fas fa-save"></i> Save Journey
|
|
</button>
|
|
<button id="clear-markers-btn" class="btn btn-secondary">
|
|
<i class="fas fa-trash-alt"></i> Clear Markers
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- View Panel -->
|
|
<div id="view-panel" class="panel">
|
|
<h3><i class="fas fa-map"></i> Explore Journeys</h3>
|
|
<div class="form-group">
|
|
<label for="journey-select"><i class="fas fa-list"></i> Select Journey</label>
|
|
<select id="journey-select">
|
|
<option value="">-- Choose a journey --</option>
|
|
<!-- populated from API -->
|
|
</select>
|
|
</div>
|
|
|
|
<div id="journey-info" class="journey-info">
|
|
<h4><i class="fas fa-info-circle"></i> Journey Details</h4>
|
|
<div class="info-content">
|
|
<p><strong>Title:</strong> <span id="info-title">-</span></p>
|
|
<p><strong>Description:</strong> <span id="info-description">-</span></p>
|
|
<p><strong>Markers:</strong> <span id="info-marker-count">0</span></p>
|
|
<p><strong>Created:</strong> <span id="info-date">-</span></p>
|
|
</div>
|
|
<div class="button-group">
|
|
<button id="load-journey-btn" class="btn btn-primary">
|
|
<i class="fas fa-eye"></i> Load on Map
|
|
</button>
|
|
<button id="edit-journey-btn" class="btn btn-secondary">
|
|
<i class="fas fa-edit"></i> Edit
|
|
</button>
|
|
<button id="delete-journey-btn" class="btn btn-danger">
|
|
<i class="fas fa-trash"></i> Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Current Markers List (while creating) -->
|
|
<div class="markers-list">
|
|
<h3><i class="fas fa-map-marker-alt"></i> Current Markers</h3>
|
|
<div id="current-markers-container">
|
|
<p class="empty-message">No markers yet. Click on the map to add markers.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="sidebar-footer">
|
|
<div class="navigation">
|
|
<a href="#" class="nav-link"><i class="fas fa-list"></i> All Journeys</a>
|
|
<a href="#" class="nav-link"><i class="fas fa-question-circle"></i> Help</a>
|
|
</div>
|
|
<p class="footer-text">Journey Mapper v1.0</p>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- MAP AREA -->
|
|
<main class="map-area">
|
|
<div id="map"></div>
|
|
|
|
<!-- Map Controls -->
|
|
<div class="map-controls">
|
|
<button id="toggle-sidebar" class="control-btn" title="Toggle Sidebar">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
<button id="zoom-in" class="control-btn" title="Zoom In">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
<button id="zoom-out" class="control-btn" title="Zoom Out">
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
<button id="locate-me" class="control-btn" title="My Location">
|
|
<i class="fas fa-location-arrow"></i>
|
|
</button>
|
|
<button id="fit-all" class="control-btn" title="Fit All Markers">
|
|
<i class="fas fa-expand-alt"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mode Indicator -->
|
|
<div id="mode-indicator" class="mode-indicator">
|
|
<span class="indicator-text">Creating: New Journey</span>
|
|
<div class="indicator-dot creating"></div>
|
|
</div>
|
|
|
|
<!-- Marker Modal -->
|
|
<div id="marker-modal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3><i class="fas fa-map-marker-alt"></i> Edit Marker</h3>
|
|
<button class="close-btn" id="close-modal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label for="marker-title">Title</label>
|
|
<input type="text" id="marker-title" placeholder="Eiffel Tower">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="marker-date">Date</label>
|
|
<input type="date" id="marker-date">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="marker-text">Description</label>
|
|
<textarea id="marker-text" placeholder="What happened here?"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="video-url">Video URL (optional)</label>
|
|
<input type="text" id="video-url" placeholder="https://youtu.be/...">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="marker-coords">Coordinates</label>
|
|
<input type="text" id="marker-coords" readonly>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="save-marker" class="btn btn-primary">Save</button>
|
|
<button id="delete-marker" class="btn btn-danger">Delete</button>
|
|
<button id="close-modal-footer" class="btn btn-secondary">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast -->
|
|
<div id="toast" class="toast">
|
|
<p id="toast-message"></p>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
(function() {
|
|
// ==================== CONFIG ====================
|
|
const API_BASE = 'http://127.0.0.1:5000/api';
|
|
|
|
// ==================== STATE =====================
|
|
let map;
|
|
let currentJourney = {
|
|
id: null,
|
|
title: '',
|
|
description: '',
|
|
markers: [] // Leaflet marker objects
|
|
};
|
|
let journeyPath;
|
|
let activeMarker = null; // for modal editing
|
|
|
|
// ==================== MAP INIT ==================
|
|
function initMap() {
|
|
map = L.map('map').setView([46.8182, 8.2275], 8);
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
}).addTo(map);
|
|
|
|
journeyPath = L.polyline([], { color: '#4263eb', weight: 4 }).addTo(map);
|
|
|
|
map.on('click', function(e) {
|
|
if (document.getElementById('mode-create').classList.contains('active')) {
|
|
createMarker(e.latlng, { title: 'New Marker' });
|
|
}
|
|
});
|
|
|
|
// Force resize after a short delay
|
|
setTimeout(() => map.invalidateSize(), 300);
|
|
}
|
|
|
|
// ==================== MARKER FUNCTIONS ==========
|
|
function createMarker(latlng, content = {}) {
|
|
const marker = L.marker(latlng, {
|
|
draggable: true,
|
|
title: content.title || 'Untitled'
|
|
}).addTo(map);
|
|
|
|
marker.bindPopup(`<strong>${content.title || 'Untitled'}</strong>`);
|
|
|
|
marker.on('click', () => openMarkerEditor(marker));
|
|
|
|
// Store marker data (we'll keep it in a parallel array for saving)
|
|
marker._content = { ...content, lat: latlng.lat, lng: latlng.lng };
|
|
|
|
currentJourney.markers.push(marker);
|
|
updateJourneyPath();
|
|
addMarkerToList(marker, latlng, content);
|
|
return marker;
|
|
}
|
|
|
|
function addMarkerToList(marker, latlng, content) {
|
|
const container = document.getElementById('current-markers-container');
|
|
const empty = container.querySelector('.empty-message');
|
|
if (empty) empty.remove();
|
|
|
|
const div = document.createElement('div');
|
|
div.className = 'marker-item';
|
|
div.dataset.lat = latlng.lat;
|
|
div.dataset.lng = latlng.lng;
|
|
div.innerHTML = `
|
|
<div class="marker-title">${content.title || 'Untitled'}</div>
|
|
<div class="marker-coords">${latlng.lat.toFixed(4)}, ${latlng.lng.toFixed(4)}</div>
|
|
`;
|
|
div.addEventListener('click', () => {
|
|
map.flyTo(latlng, 12);
|
|
openMarkerEditor(marker);
|
|
});
|
|
container.appendChild(div);
|
|
}
|
|
|
|
function updateJourneyPath() {
|
|
const coords = currentJourney.markers.map(m => [m.getLatLng().lat, m.getLatLng().lng]);
|
|
journeyPath.setLatLngs(coords);
|
|
}
|
|
|
|
// ==================== MODAL =====================
|
|
function openMarkerEditor(marker) {
|
|
activeMarker = marker;
|
|
const latlng = marker.getLatLng();
|
|
const content = marker._content || {};
|
|
|
|
document.getElementById('marker-title').value = content.title || '';
|
|
document.getElementById('marker-date').value = content.date || '';
|
|
document.getElementById('marker-text').value = content.description || '';
|
|
document.getElementById('video-url').value = content.videoUrl || '';
|
|
document.getElementById('marker-coords').value = `${latlng.lat.toFixed(6)}, ${latlng.lng.toFixed(6)}`;
|
|
|
|
document.getElementById('marker-modal').classList.add('active');
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById('marker-modal').classList.remove('active');
|
|
activeMarker = null;
|
|
}
|
|
|
|
function saveMarker() {
|
|
if (!activeMarker) return;
|
|
const title = document.getElementById('marker-title').value || 'Untitled';
|
|
const date = document.getElementById('marker-date').value;
|
|
const description = document.getElementById('marker-text').value;
|
|
const videoUrl = document.getElementById('video-url').value;
|
|
|
|
activeMarker.setTitle(title);
|
|
activeMarker.setPopupContent(`<strong>${title}</strong>`);
|
|
activeMarker._content = { title, date, description, videoUrl };
|
|
|
|
// Update list item
|
|
const latlng = activeMarker.getLatLng();
|
|
const items = document.querySelectorAll('#current-markers-container .marker-item');
|
|
for (let item of items) {
|
|
if (item.dataset.lat == latlng.lat && item.dataset.lng == latlng.lng) {
|
|
item.querySelector('.marker-title').textContent = title;
|
|
break;
|
|
}
|
|
}
|
|
|
|
closeModal();
|
|
showToast('Marker updated');
|
|
}
|
|
|
|
function deleteMarkerFromMap() {
|
|
if (!activeMarker) return;
|
|
const latlng = activeMarker.getLatLng();
|
|
|
|
map.removeLayer(activeMarker);
|
|
const idx = currentJourney.markers.indexOf(activeMarker);
|
|
if (idx > -1) currentJourney.markers.splice(idx, 1);
|
|
|
|
// Remove from list
|
|
const items = document.querySelectorAll('#current-markers-container .marker-item');
|
|
for (let item of items) {
|
|
if (item.dataset.lat == latlng.lat && item.dataset.lng == latlng.lng) {
|
|
item.remove();
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (currentJourney.markers.length === 0) {
|
|
document.getElementById('current-markers-container').innerHTML = '<p class="empty-message">No markers yet. Click on the map to add markers.</p>';
|
|
}
|
|
|
|
updateJourneyPath();
|
|
closeModal();
|
|
showToast('Marker deleted');
|
|
}
|
|
|
|
// ==================== API INTERACTION ============
|
|
async function fetchJourneys() {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/journeys`);
|
|
if (!res.ok) throw new Error('Failed to fetch');
|
|
const journeys = await res.json();
|
|
populateJourneySelect(journeys);
|
|
} catch (err) {
|
|
showToast('Error loading journeys', 'error');
|
|
}
|
|
}
|
|
|
|
function populateJourneySelect(journeys) {
|
|
const select = document.getElementById('journey-select');
|
|
select.innerHTML = '<option value="">-- Choose a journey --</option><option value="all">Show All Journeys</option>';
|
|
journeys.forEach(j => {
|
|
const opt = document.createElement('option');
|
|
opt.value = j.id;
|
|
opt.textContent = j.title;
|
|
select.appendChild(opt);
|
|
});
|
|
}
|
|
|
|
async function loadJourney(journeyId) {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/journeys/${journeyId}`);
|
|
if (!res.ok) throw new Error('Failed to load');
|
|
const journey = await res.json();
|
|
displayJourneyInfo(journey);
|
|
// Also load markers onto map?
|
|
// For now just show info; we'll have a "Load on Map" button
|
|
} catch (err) {
|
|
showToast('Error loading journey', 'error');
|
|
}
|
|
}
|
|
|
|
function displayJourneyInfo(journey) {
|
|
document.getElementById('info-title').textContent = journey.title;
|
|
document.getElementById('info-description').textContent = journey.description || '-';
|
|
document.getElementById('info-marker-count').textContent = journey.markers ? journey.markers.length : 0;
|
|
document.getElementById('info-date').textContent = new Date(journey.created_at).toLocaleDateString() || '-';
|
|
|
|
// Store selected journey data for later use
|
|
document.getElementById('load-journey-btn').dataset.journey = JSON.stringify(journey);
|
|
}
|
|
|
|
async function saveJourneyToAPI() {
|
|
const title = document.getElementById('journey-title').value.trim();
|
|
if (!title) {
|
|
showToast('Please enter a title', 'error');
|
|
return;
|
|
}
|
|
const description = document.getElementById('journey-description').value;
|
|
|
|
// Build markers array from current markers
|
|
const markers = currentJourney.markers.map(m => {
|
|
const latlng = m.getLatLng();
|
|
const content = m._content || {};
|
|
return {
|
|
lat: latlng.lat,
|
|
lng: latlng.lng,
|
|
title: content.title || '',
|
|
date: content.date || '',
|
|
description: content.description || '',
|
|
videoUrl: content.videoUrl || ''
|
|
};
|
|
});
|
|
|
|
const payload = {
|
|
title,
|
|
description,
|
|
markers
|
|
};
|
|
|
|
try {
|
|
let res;
|
|
if (currentJourney.id) {
|
|
// update existing
|
|
res = await fetch(`${API_BASE}/journeys/${currentJourney.id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
} else {
|
|
// create new
|
|
res = await fetch(`${API_BASE}/journeys`, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
}
|
|
|
|
if (!res.ok) throw new Error('Save failed');
|
|
const data = await res.json();
|
|
currentJourney.id = data.id; // store id for future updates
|
|
showToast('Journey saved!');
|
|
fetchJourneys(); // refresh list
|
|
} catch (err) {
|
|
showToast('Error saving journey', 'error');
|
|
}
|
|
}
|
|
|
|
async function deleteJourneyFromAPI(journeyId) {
|
|
if (!confirm('Delete this journey?')) return;
|
|
try {
|
|
const res = await fetch(`${API_BASE}/journeys/${journeyId}`, { method: 'DELETE' });
|
|
if (!res.ok) throw new Error('Delete failed');
|
|
showToast('Journey deleted');
|
|
fetchJourneys();
|
|
// Clear info panel
|
|
document.getElementById('info-title').textContent = '-';
|
|
document.getElementById('info-description').textContent = '-';
|
|
document.getElementById('info-marker-count').textContent = '0';
|
|
document.getElementById('info-date').textContent = '-';
|
|
} catch (err) {
|
|
showToast('Error deleting journey', 'error');
|
|
}
|
|
}
|
|
|
|
function loadJourneyMarkers(journey) {
|
|
// Clear existing markers
|
|
currentJourney.markers.forEach(m => map.removeLayer(m));
|
|
currentJourney.markers = [];
|
|
document.getElementById('current-markers-container').innerHTML = '<p class="empty-message">No markers yet. Click on the map to add markers.</p>';
|
|
|
|
// Add markers from journey
|
|
if (journey.markers) {
|
|
journey.markers.forEach(m => {
|
|
const latlng = L.latLng(m.lat, m.lng);
|
|
const marker = createMarker(latlng, {
|
|
title: m.title,
|
|
date: m.date,
|
|
description: m.description,
|
|
videoUrl: m.videoUrl
|
|
});
|
|
marker._content = { ...m }; // ensure content stored
|
|
});
|
|
}
|
|
|
|
// Set current journey id and title
|
|
currentJourney.id = journey.id;
|
|
document.getElementById('journey-title').value = journey.title;
|
|
document.getElementById('journey-description').value = journey.description || '';
|
|
|
|
// Switch to create mode to allow editing
|
|
setMode('create');
|
|
showToast('Journey loaded on map');
|
|
}
|
|
|
|
// ==================== UI HELPERS ================
|
|
function showToast(msg, type = 'success') {
|
|
const toast = document.getElementById('toast');
|
|
document.getElementById('toast-message').textContent = msg;
|
|
toast.style.display = 'block';
|
|
setTimeout(() => { toast.style.display = 'none'; }, 3000);
|
|
}
|
|
|
|
function setMode(mode) {
|
|
const createBtn = document.getElementById('mode-create');
|
|
const viewBtn = document.getElementById('mode-view');
|
|
const createPanel = document.getElementById('create-panel');
|
|
const viewPanel = document.getElementById('view-panel');
|
|
const indicator = document.getElementById('mode-indicator');
|
|
|
|
if (mode === 'create') {
|
|
createBtn.classList.add('active');
|
|
viewBtn.classList.remove('active');
|
|
createPanel.classList.add('active-panel');
|
|
viewPanel.classList.remove('active-panel');
|
|
indicator.querySelector('.indicator-text').textContent = 'Creating: New Journey';
|
|
indicator.querySelector('.indicator-dot').className = 'indicator-dot creating';
|
|
} else {
|
|
viewBtn.classList.add('active');
|
|
createBtn.classList.remove('active');
|
|
viewPanel.classList.add('active-panel');
|
|
createPanel.classList.remove('active-panel');
|
|
indicator.querySelector('.indicator-text').textContent = 'Viewing Journeys';
|
|
indicator.querySelector('.indicator-dot').className = 'indicator-dot viewing';
|
|
}
|
|
}
|
|
|
|
function clearAllMarkers() {
|
|
currentJourney.markers.forEach(m => map.removeLayer(m));
|
|
currentJourney.markers = [];
|
|
document.getElementById('current-markers-container').innerHTML = '<p class="empty-message">No markers yet. Click on the map to add markers.</p>';
|
|
updateJourneyPath();
|
|
showToast('All markers cleared');
|
|
}
|
|
|
|
// ==================== EVENT LISTENERS ============
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
initMap();
|
|
|
|
// Mode toggles
|
|
document.getElementById('mode-create').addEventListener('click', () => setMode('create'));
|
|
document.getElementById('mode-view').addEventListener('click', () => {
|
|
setMode('view');
|
|
fetchJourneys(); // load list when entering view mode
|
|
});
|
|
|
|
// Clear markers
|
|
document.getElementById('clear-markers-btn').addEventListener('click', clearAllMarkers);
|
|
|
|
// Save journey
|
|
document.getElementById('save-journey-btn').addEventListener('click', saveJourneyToAPI);
|
|
|
|
// Modal close
|
|
document.getElementById('close-modal').addEventListener('click', closeModal);
|
|
document.getElementById('close-modal-footer').addEventListener('click', closeModal);
|
|
document.getElementById('save-marker').addEventListener('click', saveMarker);
|
|
document.getElementById('delete-marker').addEventListener('click', deleteMarkerFromMap);
|
|
|
|
// Sidebar toggle
|
|
document.getElementById('toggle-sidebar').addEventListener('click', () => {
|
|
document.querySelector('.sidebar').classList.toggle('collapsed');
|
|
});
|
|
|
|
// Zoom controls
|
|
document.getElementById('zoom-in').addEventListener('click', () => map.zoomIn());
|
|
document.getElementById('zoom-out').addEventListener('click', () => map.zoomOut());
|
|
|
|
// Fit all markers
|
|
document.getElementById('fit-all').addEventListener('click', () => {
|
|
if (currentJourney.markers.length > 0) {
|
|
const group = L.featureGroup(currentJourney.markers);
|
|
map.fitBounds(group.getBounds());
|
|
} else {
|
|
showToast('No markers to fit', 'warning');
|
|
}
|
|
});
|
|
|
|
// Locate me
|
|
document.getElementById('locate-me').addEventListener('click', () => {
|
|
map.locate({ setView: true, maxZoom: 16 });
|
|
});
|
|
|
|
// Journey select change
|
|
document.getElementById('journey-select').addEventListener('change', (e) => {
|
|
const val = e.target.value;
|
|
if (val && val !== 'all') {
|
|
loadJourney(val);
|
|
} else if (val === 'all') {
|
|
// could show all journeys on map (optional)
|
|
}
|
|
});
|
|
|
|
// Load journey on map button
|
|
document.getElementById('load-journey-btn').addEventListener('click', () => {
|
|
const journeyData = document.getElementById('load-journey-btn').dataset.journey;
|
|
if (journeyData) {
|
|
loadJourneyMarkers(JSON.parse(journeyData));
|
|
}
|
|
});
|
|
|
|
// Edit journey (placeholder: just switch to create mode with data)
|
|
document.getElementById('edit-journey-btn').addEventListener('click', () => {
|
|
const journeyData = document.getElementById('load-journey-btn').dataset.journey;
|
|
if (journeyData) {
|
|
loadJourneyMarkers(JSON.parse(journeyData));
|
|
}
|
|
});
|
|
|
|
// Delete journey
|
|
document.getElementById('delete-journey-btn').addEventListener('click', () => {
|
|
const journeyData = document.getElementById('load-journey-btn').dataset.journey;
|
|
if (journeyData) {
|
|
const journey = JSON.parse(journeyData);
|
|
deleteJourneyFromAPI(journey.id);
|
|
}
|
|
});
|
|
|
|
// "Add Marker" button (just switches to create mode and hints)
|
|
document.getElementById('add-marker-btn').addEventListener('click', () => {
|
|
setMode('create');
|
|
showToast('Click on the map to add a marker');
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |