From a36ea77fb134edbb35932662cefda1e12fd0cab7 Mon Sep 17 00:00:00 2001
From: Josh-Dev-Quest <naruto.hiuga.hinata@proton.me>
Date: Sun, 1 Mar 2026 17:40:11 +0100
Subject: [PATCH] feat: add journey creation functionality

Co-authored-by: aider (ollama/qwen2.5-coder:32b) <aider@aider.chat>
---
 backend/app.py | 22 +++++++++++++++++
 css/map.css    | 55 +++++++++++++++++++++++++++++++++++++++++++
 js/main.js     | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++
 map.html       | 33 ++++++++++++++++++++++----
 4 files changed, 170 insertions(+), 4 deletions(-)

diff --git a/backend/app.py b/backend/app.py
index 16b6079..cbf148b 100644
--- a/backend/app.py
+++ b/backend/app.py
@@ -44,6 +44,28 @@ def save_journeys():
 # Load journeys when the app starts
 load_journeys()
 
+@app.route('/api/journeys', methods=['POST'])
+def create_journey():
+    """Create a new journey."""
+    data = request.get_json()
+    
+    if not data or 'name' not in data:
+        return jsonify({'error': 'Journey name is required'}), 400
+    
+    # Create new journey
+    new_journey = {
+        'id': len(journeys) + 1,
+        'name': data['name'],
+        'description': data.get('description', ''),
+        'markers': data.get('markers', []),
+        'createdAt': datetime.now().isoformat()
+    }
+    
+    journeys.append(new_journey)
+    save_journeys()
+    
+    return jsonify(new_journey), 201
+
 @app.route('/api/journeys', methods=['GET'])
 def get_journeys():
     """Get all journeys."""
diff --git a/css/map.css b/css/map.css
index 8293925..58e3783 100644
--- a/css/map.css
+++ b/css/map.css
@@ -261,6 +261,61 @@
     padding: 20px;
 }
 
+/* Journey Panel Styles */
+.journey-panel {
+    padding: 20px;
+}
+
+.journey-form .form-group {
+    margin-bottom: 15px;
+}
+
+.journey-form label {
+    display: block;
+    margin-bottom: 5px;
+}
+
+.marker-item {
+    padding: 8px;
+    margin: 3px 0;
+    background-color: #f8f9fa;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.marker-item:hover {
+    background-color: #e9ecef;
+}
+
+.button-group {
+    display: flex;
+    gap: 10px;
+    margin-top: 15px;
+}
+
+.btn {
+    padding: 8px 12px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.btn-primary {
+    background-color: #3498db;
+    color: white;
+}
+
+.btn-success {
+    background-color: #2ecc71;
+    color: white;
+}
+
+.btn-danger {
+    background-color: #e74c3c;
+    color: white;
+}
+
 /* Footer */
 .sidebar-footer {
     padding: 15px 20px;
diff --git a/js/main.js b/js/main.js
index 6021c34..df8ce21 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,5 +1,69 @@
 // /Volumes/Data/Code/FHGR/Frontend/js/main.js
 document.addEventListener('DOMContentLoaded', function() {
+  // Journey Management
+  let currentJourney = {
+      name: "",
+      description: "",
+      markers: []
+  };
+
+  function saveJourney() {
+      const journeyData = {
+          name: document.getElementById('journey-name').value,
+          description: document.getElementById('journey-desc').value,
+          markers: currentJourney.markers.map(marker => ({
+              lat: marker.getLatLng().lat,
+              lng: marker.getLatLng().lng
+          }))
+      };
+
+      // Save to backend
+      fetch('/api/journeys', {
+          method: 'POST',
+          headers: {
+              'Content-Type': 'application/json'
+          },
+          body: JSON.stringify(journeyData)
+      })
+      .then(response => response.json())
+      .then(data => {
+          console.log('Journey saved:', data);
+          alert('Journey saved successfully!');
+          currentJourney = {
+              name: "",
+              description: "",
+              markers: []
+          };
+          document.getElementById('journey-name').value = '';
+          document.getElementById('journey-desc').value = '';
+      })
+      .catch(error => console.error('Error saving journey:', error));
+  }
+
+  function updateMarkersList() {
+      const container = document.getElementById('markers-list');
+      container.innerHTML = '';
+      
+      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 handler to focus on marker
+          markerElement.addEventListener('click', () => {
+              map.flyTo(marker.getLatLng(), 10);
+          });
+          
+          container.appendChild(markerElement);
+      });
+  }
+
+  // Event Listeners
+  document.getElementById('save-journey').addEventListener('click', saveJourney);
+
   // Initialize current journey when page loads
   window.currentJourney = {
     id: Date.now(),
diff --git a/map.html b/map.html
index 26a9483..cb529f8 100644
--- a/map.html
+++ b/map.html
@@ -59,10 +59,35 @@
 </head>
 <body>
     <div class="sidebar">
-        <h1>Map Project</h1>
-        <button class="btn" id="add-marker">Add Marker</button>
-        <button class="btn" id="clear-markers">Clear Markers</button>
-        <div id="marker-list"></div>
+        <div class="journey-panel">
+            <h3><i class="fas fa-route"></i> Journey Manager</h3>
+        
+            <!-- Journey Form -->
+            <div class="journey-form">
+                <div class="form-group">
+                    <label for="journey-name"><i class="fas fa-heading"></i> Journey Name:</label>
+                    <input type="text" id="journey-name" required>
+                </div>
+            
+                <div class="form-group">
+                    <label for="journey-desc"><i class="fas fa-align-left"></i> Description:</label>
+                    <textarea id="journey-desc"></textarea>
+                </div>
+            </div>
+
+            <!-- Markers List -->
+            <h4><i class="fas fa-map-marker-alt"></i> Journey Markers</h4>
+            <div id="markers-list" class="markers-container">
+                <!-- Markers will be added here -->
+            </div>
+
+            <!-- Buttons -->
+            <div class="button-group">
+                <button id="add-marker" class="btn btn-primary"><i class="fas fa-plus"></i> Add Marker</button>
+                <button id="save-journey" class="btn btn-success"><i class="fas fa-save"></i> Save Journey</button>
+                <button id="clear-markers" class="btn btn-danger"><i class="fas fa-trash"></i> Clear Markers</button>
+            </div>
+        </div>
     </div>
     
     <div id="map"></div>