1419 lines
55 KiB
HTML
1419 lines
55 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" />
|
|
<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 -->
|
|
<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;
|
|
}
|
|
}
|
|
.site-header {
|
|
background: var(--gray-9);
|
|
padding: var(--size-4) var(--size-6);
|
|
border-bottom: 1px solid var(--surface-4);
|
|
}
|
|
.site-header .container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--size-2);
|
|
}
|
|
.site-title {
|
|
margin: 0;
|
|
font-size: var(--font-size-4);
|
|
font-weight: var(--font-weight-6);
|
|
}
|
|
.site-title a {
|
|
color: var(--indigo-4);
|
|
text-decoration: none;
|
|
}
|
|
.site-nav {
|
|
display: flex;
|
|
gap: var(--size-4);
|
|
}
|
|
.site-nav a {
|
|
color: var(--gray-2);
|
|
text-decoration: none;
|
|
font-weight: var(--font-weight-5);
|
|
transition: color 0.2s;
|
|
padding: var(--size-1) var(--size-2);
|
|
border-radius: var(--radius-2);
|
|
}
|
|
.site-nav a:hover,
|
|
.site-nav a.active {
|
|
color: var(--indigo-4);
|
|
background: var(--surface-2);
|
|
}
|
|
.app-container {
|
|
flex: 1;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
.user-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-2);
|
|
margin-left: var(--size-4);
|
|
}
|
|
.user-menu .username {
|
|
color: var(--gray-2);
|
|
font-weight: var(--font-weight-5);
|
|
}
|
|
.logout-btn {
|
|
background: var(--indigo-7);
|
|
color: white;
|
|
border: none;
|
|
border-radius: var(--radius-2);
|
|
padding: var(--size-1) var(--size-3);
|
|
cursor: pointer;
|
|
font-size: var(--font-size-1);
|
|
font-weight: var(--font-weight-5);
|
|
transition: background 0.2s;
|
|
}
|
|
.logout-btn:hover {
|
|
background: var(--indigo-8);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="display: flex; flex-direction: column; min-height: 100vh">
|
|
<header class="site-header">
|
|
<div class="container">
|
|
<h1 class="site-title"><a href="/">Journey Mapper</a></h1>
|
|
<div
|
|
style="
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--size-4);
|
|
"
|
|
>
|
|
<nav class="site-nav">
|
|
<a href="map-page.html" class="active">Map</a>
|
|
<a href="blog-list.html">Blog</a>
|
|
</nav>
|
|
<div class="user-menu" id="user-menu">
|
|
<!-- Will be filled by JS -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<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="blog-page.html" class="nav-link"
|
|
><i class="fas fa-blog"></i> Blog</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>
|
|
<div id="toast" class="toast"><p id="toast-message"></p></div>
|
|
<script src="js/auth.js"></script>
|
|
<script>
|
|
// ==================== MAP CODE ====================
|
|
(function () {
|
|
// ==================== STATE =====================
|
|
let map;
|
|
let currentJourney = {
|
|
id: null,
|
|
title: "",
|
|
description: "",
|
|
markers: [],
|
|
};
|
|
let journeyPath;
|
|
let activeMarker = null;
|
|
|
|
// ==================== 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" });
|
|
}
|
|
});
|
|
|
|
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));
|
|
|
|
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,
|
|
};
|
|
|
|
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);
|
|
|
|
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 (with credentials) ====================
|
|
async function fetchJourneys() {
|
|
try {
|
|
const res = await fetch(`${API_BASE}/journeys`, {
|
|
credentials: "include",
|
|
});
|
|
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}`,
|
|
{ credentials: "include" },
|
|
);
|
|
if (!res.ok) throw new Error("Failed to load");
|
|
const journey = await res.json();
|
|
displayJourneyInfo(journey);
|
|
} 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() ||
|
|
"-";
|
|
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;
|
|
|
|
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) {
|
|
res = await fetch(
|
|
`${API_BASE}/journeys/${currentJourney.id}`,
|
|
{
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify(payload),
|
|
credentials: "include",
|
|
},
|
|
);
|
|
} else {
|
|
res = await fetch(`${API_BASE}/journeys`, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload),
|
|
credentials: "include",
|
|
});
|
|
}
|
|
if (!res.ok) throw new Error("Save failed");
|
|
const data = await res.json();
|
|
currentJourney.id = data.id;
|
|
showToast("Journey saved!");
|
|
fetchJourneys();
|
|
} 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",
|
|
credentials: "include",
|
|
},
|
|
);
|
|
if (!res.ok) throw new Error("Delete failed");
|
|
showToast("Journey deleted");
|
|
fetchJourneys();
|
|
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) {
|
|
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>';
|
|
|
|
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 };
|
|
});
|
|
}
|
|
currentJourney.id = journey.id;
|
|
document.getElementById("journey-title").value =
|
|
journey.title;
|
|
document.getElementById("journey-description").value =
|
|
journey.description || "";
|
|
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 (run after auth) ====================
|
|
function bindEventListeners() {
|
|
document
|
|
.getElementById("mode-create")
|
|
.addEventListener("click", () => setMode("create"));
|
|
document
|
|
.getElementById("mode-view")
|
|
.addEventListener("click", () => {
|
|
setMode("view");
|
|
fetchJourneys();
|
|
});
|
|
document
|
|
.getElementById("clear-markers-btn")
|
|
.addEventListener("click", clearAllMarkers);
|
|
document
|
|
.getElementById("save-journey-btn")
|
|
.addEventListener("click", saveJourneyToAPI);
|
|
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);
|
|
document
|
|
.getElementById("toggle-sidebar")
|
|
.addEventListener("click", () => {
|
|
document
|
|
.querySelector(".sidebar")
|
|
.classList.toggle("collapsed");
|
|
});
|
|
document
|
|
.getElementById("zoom-in")
|
|
.addEventListener("click", () => map.zoomIn());
|
|
document
|
|
.getElementById("zoom-out")
|
|
.addEventListener("click", () => map.zoomOut());
|
|
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");
|
|
}
|
|
});
|
|
document
|
|
.getElementById("locate-me")
|
|
.addEventListener("click", () => {
|
|
map.locate({ setView: true, maxZoom: 16 });
|
|
});
|
|
document
|
|
.getElementById("journey-select")
|
|
.addEventListener("change", (e) => {
|
|
const val = e.target.value;
|
|
if (val && val !== "all") loadJourney(val);
|
|
});
|
|
document
|
|
.getElementById("load-journey-btn")
|
|
.addEventListener("click", () => {
|
|
const journeyData =
|
|
document.getElementById("load-journey-btn")
|
|
.dataset.journey;
|
|
if (journeyData)
|
|
loadJourneyMarkers(JSON.parse(journeyData));
|
|
});
|
|
document
|
|
.getElementById("edit-journey-btn")
|
|
.addEventListener("click", () => {
|
|
const journeyData =
|
|
document.getElementById("load-journey-btn")
|
|
.dataset.journey;
|
|
if (journeyData)
|
|
loadJourneyMarkers(JSON.parse(journeyData));
|
|
});
|
|
document
|
|
.getElementById("delete-journey-btn")
|
|
.addEventListener("click", () => {
|
|
const journeyData =
|
|
document.getElementById("load-journey-btn")
|
|
.dataset.journey;
|
|
if (journeyData)
|
|
deleteJourneyFromAPI(
|
|
JSON.parse(journeyData).id,
|
|
);
|
|
});
|
|
document
|
|
.getElementById("add-marker-btn")
|
|
.addEventListener("click", () => {
|
|
setMode("create");
|
|
showToast("Click on the map to add a marker");
|
|
});
|
|
}
|
|
|
|
// Expose functions globally (optional)
|
|
window.createMarker = createMarker;
|
|
window.updateJourneyPath = updateJourneyPath;
|
|
window.clearAllMarkers = clearAllMarkers;
|
|
window.setMode = setMode;
|
|
|
|
// ==================== START ====================
|
|
// This function is called after auth check
|
|
function startMap() {
|
|
initMap();
|
|
bindEventListeners();
|
|
}
|
|
window.startMap = startMap;
|
|
})();
|
|
|
|
// ==================== AUTHENTICATION CHECK ====================
|
|
document.addEventListener("DOMContentLoaded", async () => {
|
|
const authenticated = await checkAuthAndRedirect();
|
|
if (authenticated) {
|
|
updateUserMenu();
|
|
window.startMap(); // call the map initializer from the IIFE
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|