feat: add journey creation with title, description, and marker management

Co-authored-by: aider (ollama/qwen2.5-coder:32b) <aider@aider.chat>

js/main.js

@@ -1,13 +1,103 @@
 // /Volumes/Data/Code/FHGR/Frontend/js/main.js
 document.addEventListener('DOMContentLoaded', function() {
-  // Initialize global variables
+  // Initialize current journey when page loads
   window.currentJourney = {
     id: Date.now(),
-    name: "Untitled Journey",
+    name: "",
     description: "",
     markers: [],
     path: null
   };
+
+  // Function to prepare and save the journey
+  function prepareAndSaveJourney() {
+      const journeyData = {
+          name: document.getElementById('journey-title').value,
+          description: document.getElementById('journey-description').value,
+          markers: window.currentJourney.markers.map(marker => ({
+              id: marker.id,
+              lngLat: [marker.getLatLng().lat, marker.getLatLng().lng],
+              content: marker.content
+          }))
+      };
+
+      // Save to backend
+      fetch('http://localhost:5000/api/journeys', {
+          method: 'POST',
+          headers: {
+              'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(journeyData)
+      })
+      .then(response => response.json())
+      .then(data => {
+          alert('Journey saved successfully!');
+          window.currentJourney = {
+              id: Date.now(),
+              name: "",
+              description: "",
+              markers: [],
+              path: null
+          };
+          document.getElementById('journey-title').value = '';
+          document.getElementById('journey-description').value = '';
+      })
+      .catch(error => {
+          console.error('Error:', error);
+          alert('Failed to save journey. Please try again.');
+      });
+  }
+
+  // Event listeners for the buttons
+  document.getElementById('add-marker-btn').addEventListener('click', function() {
+      map.on('click', function(e) {
+          const marker = L.marker(e.latlng, {draggable: true}).addTo(map);
+          
+          // Add popup with input field
+          marker.bindPopup('<input type="text" id="marker-title" placeholder="Enter title">');
+          
+          window.currentJourney.markers.push(marker);
+          updateMarkersList();
+      });
+  });
+
+  document.getElementById('save-journey-btn').addEventListener('click', prepareAndSaveJourney);
+
+  document.getElementById('clear-markers-btn').addEventListener('click', function() {
+      map.eachLayer(function(layer) {
+          if (layer instanceof L.Marker) {
+              map.removeLayer(layer);
+          }
+      });
+      window.currentJourney.markers = [];
+      updateMarkersList();
+  });
+
+  function updateMarkersList() {
+      const markersContainer = document.getElementById('markers-container');
+      markersContainer.innerHTML = '';
+      
+      if (window.currentJourney.markers.length === 0) {
+          markersContainer.innerHTML = '<p class="empty-message">No markers yet. Click on the map to add markers.</p>';
+          return;
+      }
+
+      window.currentJourney.markers.forEach((marker, index) => {
+          const markerElement = document.createElement('div');
+          markerElement.className = 'marker-item';
+          markerElement.innerHTML = `
+              <strong>${index + 1}</strong>
+              ${marker.getLatLng().lat.toFixed(4)}, ${marker.getLngLat().lng.toFixed(4)}
+          `;
+          
+          // Add click event to edit marker
+          markerElement.addEventListener('click', () => {
+              marker.openPopup();
+          });
+          
+          markersContainer.appendChild(markerElement);
+      });
+  }
   window.journeys = [];
   window.isCreatingJourney = true;
 

map-page.html

@@ -507,35 +507,34 @@
                 </button>
             </div>
             
-            <!-- Create Journey Panel (Visible in create mode) -->
+            <!-- Create Journey 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">
+                    <input type="text" id="journey-title" placeholder="Enter journey title" 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>
+                    <textarea id="journey-description" placeholder="Describe your journey"></textarea>
                 </div>
     
-                <div class="instructions">
+                <h4><i class="fas fa-map-marker-alt"></i> Journey Markers</h4>
-                    <h4><i class="fas fa-info-circle"></i> How to create:</h4>
+                <div id="markers-container">
-                    <ol>
+                    <!-- Markers will be added here -->
-                        <li>Click on the map to place markers</li>
+                    <p class="empty-message" id="empty-markers">No markers yet. Click on the map to add markers.</p>
-                        <li>Click on a marker to add content</li>
-                        <li>Markers will be automatically connected</li>
-                        <li>Click "Save Journey" when done</li>
-                    </ol>
                 </div>
     
                 <div class="button-group">
-                    <button id="save-journey" class="btn btn-primary">
+                    <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" class="btn btn-secondary">
+                    <button id="clear-markers-btn" class="btn btn-secondary">
                         <i class="fas fa-trash-alt"></i> Clear Markers
                     </button>
                 </div>