From 471d629a933e40f94704b509d48c65303cbddb10 Mon Sep 17 00:00:00 2001
From: Josh-Dev-Quest <naruto.hiuga.hinata@proton.me>
Date: Thu, 5 Mar 2026 14:35:35 +0100
Subject: [PATCH] Map page v1

---
 backend/app.py                          | 110 +++++++-------
 backend/app2.py                         | 138 -----------------
 backend/data/journeys.json              |  48 ++++++
 blog-posts.html                         |   0
 journey.html                            |  17 ---
 map.html                                |  80 ----------
 working_interactiv_map_with_marker.html | 189 ------------------------
 7 files changed, 102 insertions(+), 480 deletions(-)
 delete mode 100644 backend/app2.py
 delete mode 100644 blog-posts.html
 delete mode 100644 journey.html
 delete mode 100644 map.html
 delete mode 100644 working_interactiv_map_with_marker.html

diff --git a/backend/app.py b/backend/app.py
index f4882ab..0297c7b 100644
--- a/backend/app.py
+++ b/backend/app.py
@@ -1,27 +1,22 @@
 from flask import Flask, request, jsonify
 from flask_cors import CORS
-
-# Initialize CORS
-app = Flask(__name__)
-CORS(app)
 import json
 import os
 from datetime import datetime
 
 app = Flask(__name__)
+CORS(app)  # Enable CORS for all routes
 
-# Define the data directory
+# Data directory and file
 DATA_DIR = 'data'
+DATA_FILE = os.path.join(DATA_DIR, 'journeys.json')
 os.makedirs(DATA_DIR, exist_ok=True)
 
-# Define the data file path
-DATA_FILE = os.path.join(DATA_DIR, 'journeys.json')
-
-# Initialize journeys list
+# In-memory store (loaded from file on startup)
 journeys = []
 
 def load_journeys():
-    """Load journeys from the data file."""
+    """Load journeys from the JSON file."""
     global journeys
     try:
         if os.path.exists(DATA_FILE):
@@ -34,107 +29,110 @@ def load_journeys():
         journeys = []
 
 def save_journeys():
-    """Save journeys to the data file."""
+    """Save journeys to the JSON file."""
     try:
         with open(DATA_FILE, 'w') as f:
             json.dump(journeys, f, indent=2)
     except Exception as e:
         print(f"Error saving journeys: {e}")
 
-# Load journeys when the app starts
+# Load existing journeys on startup
 load_journeys()
 
+def get_next_id():
+    """Return the next available ID (simple integer increment)."""
+    if not journeys:
+        return 1
+    return max(j['id'] for j in journeys) + 1
+
 @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
+    if not data:
+        return jsonify({'error': 'No data provided'}), 400
+
+    title = data.get('title')
+    if not title:
+        return jsonify({'error': 'Journey title is required'}), 400
+
     new_journey = {
-        'id': len(journeys) + 1,
-        'name': data['name'],
+        'id': get_next_id(),
+        'title': title,
         'description': data.get('description', ''),
-        'markers': data.get('markers', []),
-        'createdAt': datetime.now().isoformat()
+        'markers': data.get('markers', []),   # list of marker objects
+        'created_at': 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."""
+    """Return all journeys."""
     return jsonify(journeys)
 
-@app.route('/api/journeys/<string:journey_id>', methods=['GET'])
+@app.route('/api/journeys/<int:journey_id>', methods=['GET'])
 def get_journey(journey_id):
-    """Get a specific journey by ID."""
-    journey = next((j for j in journeys if str(j['id']) == journey_id), None)
-    if journey:
-        return jsonify(journey)
-    return jsonify({'error': 'Journey not found'}), 404
+    """Return a specific journey by ID."""
+    journey = next((j for j in journeys if j['id'] == journey_id), None)
+    if journey is None:
+        return jsonify({'error': 'Journey not found'}), 404
+    return jsonify(journey)
 
-
-@app.route('/api/journeys/<string:journey_id>', methods=['PUT'])
+@app.route('/api/journeys/<int:journey_id>', methods=['PUT'])
 def update_journey(journey_id):
     """Update an existing journey."""
-    journey = next((j for j in journeys if str(j['id']) == journey_id), None)
-    if not journey:
+    journey = next((j for j in journeys if j['id'] == journey_id), None)
+    if journey is None:
         return jsonify({'error': 'Journey not found'}), 404
-    
+
     data = request.get_json()
-    
-    # Update journey fields
-    if 'name' in data:
-        journey['name'] = data['name']
+    if not data:
+        return jsonify({'error': 'No data provided'}), 400
+
+    # Update allowed fields
+    if 'title' in data:
+        journey['title'] = data['title']
     if 'description' in data:
         journey['description'] = data['description']
     if 'markers' in data:
         journey['markers'] = data['markers']
-    
+
     save_journeys()
     return jsonify(journey)
 
-@app.route('/api/journeys/<string:journey_id>', methods=['DELETE'])
+@app.route('/api/journeys/<int:journey_id>', methods=['DELETE'])
 def delete_journey(journey_id):
     """Delete a journey."""
     global journeys
-    journey = next((j for j in journeys if str(j['id']) == journey_id), None)
-    if not journey:
+    journey = next((j for j in journeys if j['id'] == journey_id), None)
+    if journey is None:
         return jsonify({'error': 'Journey not found'}), 404
-    
-    journeys = [j for j in journeys if str(j['id']) != int(journey_id)]
+
+    journeys = [j for j in journeys if j['id'] != journey_id]
     save_journeys()
-    
     return jsonify({'message': 'Journey deleted successfully', 'journey': journey})
 
 @app.route('/api/journeys/health', methods=['GET'])
 def health_check():
-    """Health check endpoint."""
+    """Simple health check endpoint."""
     return jsonify({'status': 'healthy', 'timestamp': datetime.now().isoformat()})
 
 @app.route('/')
 def index():
-    """Serve the main HTML page."""
+    """Root endpoint – just a welcome message."""
     return '''
     <!DOCTYPE html>
     <html>
-    <head>
-        <title>Journey Mapper</title>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-    </head>
+    <head><title>Journey Mapper Backend</title></head>
     <body>
-        <h1>Journey Mapper</h1>
-        <p>Backend is running. Access API at <a href="/api/journeys">/api/journeys</a></p>
+        <h1>Journey Mapper API</h1>
+        <p>Backend is running. Use <code>/api/journeys</code> endpoints.</p>
     </body>
     </html>
     '''
 
 if __name__ == '__main__':
-    app.run(debug=True, port=5000)
+    app.run(debug=True, port=5000)
\ No newline at end of file
diff --git a/backend/app2.py b/backend/app2.py
deleted file mode 100644
index 0297c7b..0000000
--- a/backend/app2.py
+++ /dev/null
@@ -1,138 +0,0 @@
-from flask import Flask, request, jsonify
-from flask_cors import CORS
-import json
-import os
-from datetime import datetime
-
-app = Flask(__name__)
-CORS(app)  # Enable CORS for all routes
-
-# Data directory and file
-DATA_DIR = 'data'
-DATA_FILE = os.path.join(DATA_DIR, 'journeys.json')
-os.makedirs(DATA_DIR, exist_ok=True)
-
-# In-memory store (loaded from file on startup)
-journeys = []
-
-def load_journeys():
-    """Load journeys from the JSON file."""
-    global journeys
-    try:
-        if os.path.exists(DATA_FILE):
-            with open(DATA_FILE, 'r') as f:
-                journeys = json.load(f)
-        else:
-            journeys = []
-    except Exception as e:
-        print(f"Error loading journeys: {e}")
-        journeys = []
-
-def save_journeys():
-    """Save journeys to the JSON file."""
-    try:
-        with open(DATA_FILE, 'w') as f:
-            json.dump(journeys, f, indent=2)
-    except Exception as e:
-        print(f"Error saving journeys: {e}")
-
-# Load existing journeys on startup
-load_journeys()
-
-def get_next_id():
-    """Return the next available ID (simple integer increment)."""
-    if not journeys:
-        return 1
-    return max(j['id'] for j in journeys) + 1
-
-@app.route('/api/journeys', methods=['POST'])
-def create_journey():
-    """Create a new journey."""
-    data = request.get_json()
-    if not data:
-        return jsonify({'error': 'No data provided'}), 400
-
-    title = data.get('title')
-    if not title:
-        return jsonify({'error': 'Journey title is required'}), 400
-
-    new_journey = {
-        'id': get_next_id(),
-        'title': title,
-        'description': data.get('description', ''),
-        'markers': data.get('markers', []),   # list of marker objects
-        'created_at': datetime.now().isoformat()
-    }
-
-    journeys.append(new_journey)
-    save_journeys()
-    return jsonify(new_journey), 201
-
-@app.route('/api/journeys', methods=['GET'])
-def get_journeys():
-    """Return all journeys."""
-    return jsonify(journeys)
-
-@app.route('/api/journeys/<int:journey_id>', methods=['GET'])
-def get_journey(journey_id):
-    """Return a specific journey by ID."""
-    journey = next((j for j in journeys if j['id'] == journey_id), None)
-    if journey is None:
-        return jsonify({'error': 'Journey not found'}), 404
-    return jsonify(journey)
-
-@app.route('/api/journeys/<int:journey_id>', methods=['PUT'])
-def update_journey(journey_id):
-    """Update an existing journey."""
-    journey = next((j for j in journeys if j['id'] == journey_id), None)
-    if journey is None:
-        return jsonify({'error': 'Journey not found'}), 404
-
-    data = request.get_json()
-    if not data:
-        return jsonify({'error': 'No data provided'}), 400
-
-    # Update allowed fields
-    if 'title' in data:
-        journey['title'] = data['title']
-    if 'description' in data:
-        journey['description'] = data['description']
-    if 'markers' in data:
-        journey['markers'] = data['markers']
-
-    save_journeys()
-    return jsonify(journey)
-
-@app.route('/api/journeys/<int:journey_id>', methods=['DELETE'])
-def delete_journey(journey_id):
-    """Delete a journey."""
-    global journeys
-    journey = next((j for j in journeys if j['id'] == journey_id), None)
-    if journey is None:
-        return jsonify({'error': 'Journey not found'}), 404
-
-    journeys = [j for j in journeys if j['id'] != journey_id]
-    save_journeys()
-    return jsonify({'message': 'Journey deleted successfully', 'journey': journey})
-
-@app.route('/api/journeys/health', methods=['GET'])
-def health_check():
-    """Simple health check endpoint."""
-    return jsonify({'status': 'healthy', 'timestamp': datetime.now().isoformat()})
-
-@app.route('/')
-def index():
-    """Root endpoint – just a welcome message."""
-    return '''
-    <!DOCTYPE html>
-    <html>
-    <head><title>Journey Mapper Backend</title></head>
-    <body>
-        <h1>Journey Mapper API</h1>
-        <p>Backend is running. Use <code>/api/journeys</code> endpoints.</p>
-    </body>
-    </html>
-    '''
-
-if __name__ == '__main__':
-    app.run(debug=True, port=5000)
\ No newline at end of file
diff --git a/backend/data/journeys.json b/backend/data/journeys.json
index 599c093..4a249a3 100644
--- a/backend/data/journeys.json
+++ b/backend/data/journeys.json
@@ -30,5 +30,53 @@
       }
     ],
     "created_at": "2026-03-01T19:02:15.679031"
+  },
+  {
+    "id": 2,
+    "title": "test 1",
+    "description": "sdfdsfafsfsdsf",
+    "markers": [
+      {
+        "lat": 48.705462895790575,
+        "lng": 2.4334716796875,
+        "title": "New Marker",
+        "date": "",
+        "description": "",
+        "videoUrl": ""
+      },
+      {
+        "lat": 47.37603463349758,
+        "lng": 2.0654296875000004,
+        "title": "New Marker",
+        "date": "",
+        "description": "",
+        "videoUrl": ""
+      },
+      {
+        "lat": 47.25686404408872,
+        "lng": 5.020751953125,
+        "title": "New Marker",
+        "date": "",
+        "description": "",
+        "videoUrl": ""
+      },
+      {
+        "lat": 47.25686404408872,
+        "lng": 5.954589843750001,
+        "title": "New Marker",
+        "date": "",
+        "description": "",
+        "videoUrl": ""
+      },
+      {
+        "lat": 47.357431944587034,
+        "lng": 7.289428710937501,
+        "title": "New Marker",
+        "date": "",
+        "description": "",
+        "videoUrl": ""
+      }
+    ],
+    "created_at": "2026-03-05T13:00:48.757539"
   }
 ]
\ No newline at end of file
diff --git a/blog-posts.html b/blog-posts.html
deleted file mode 100644
index e69de29..0000000
diff --git a/journey.html b/journey.html
deleted file mode 100644
index 826cb5f..0000000
--- a/journey.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Journey Timeline</title>
-    <link rel="stylesheet" href="css/style.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-</head>
-<body>
-    <div class="journey-timeline">
-        <h1 id="journey-title"></h1>
-        <div id="timeline-container"></div>
-    </div>
-    <script src="js/journey-post.js"></script>
-</body>
-</html>
diff --git a/map.html b/map.html
deleted file mode 100644
index 1cf10b6..0000000
--- a/map.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Simple Map Project</title>
-    
-    <!-- Leaflet CSS -->
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
-    
-    <!-- Custom CSS -->
-    <link rel="stylesheet" href="css/map.css">
-    
-    <style>
-        /* Your existing inline styles... */
-    </style>
-</head>
-```
-
-map.html
-```html
-<<<<<<< SEARCH
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Journey Mapper</title>
-    
-    <!-- Leaflet CSS -->
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
-    
-    <!-- Custom CSS -->
-    <link rel="stylesheet" href="css/map.css">
-</head>
-<body>
-    <div class="app-container">
-        <div class="sidebar">
-            <div class="journey-panel">
-                <h3><i class="fas fa-route"></i> Journey Manager</h3>
-                
-                <!-- Journey Form -->
-                <form id="journey-form" 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>
-                </form>
-
-                <!-- Markers List -->
-                <h4><i class="fas fa-map-marker-alt"></i> Journey Markers</h4>
-                <div id="markers-container" class="markers-list">
-                    <!-- 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>
-
-        <!-- Map container -->
-        <div id="map" class="map-area"></div>
-    </div>
-
-    <!-- Leaflet JS -->
-    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-    
-    <!-- Custom JavaScript -->
-    <script src="js/main.js"></script>
-</body>
-</html>
diff --git a/working_interactiv_map_with_marker.html b/working_interactiv_map_with_marker.html
deleted file mode 100644
index fde8d33..0000000
--- a/working_interactiv_map_with_marker.html
+++ /dev/null
@@ -1,189 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Simple Map Project</title>
-    
-    <!-- Leaflet CSS -->
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
-    
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            height: 100vh;
-            display: flex;
-        }
-
-        #map {
-            flex: 1;
-            height: 100%;
-        }
-
-        .sidebar {
-            width: 300px;
-            background: #f8f9fa;
-            padding: 20px;
-            box-shadow: 2px 0 5px rgba(0,0,0,0.1);
-            overflow-y: auto
-        }
-
-        .map-controls {
-            position: absolute;
-            top: 20px;
-            right: 20px;
-            display: flex;
-            gap: 10px;
-            z-index: 1000;
-        }
-
-        .btn {
-            padding: 8px 12px;
-            border: none;
-            border-radius: 4px;
-            background: #3887be;
-            color: white;
-            cursor: pointer;
-            font-family: Arial, sans-serif;
-        }
-
-        .btn:hover {
-            background: #2c6d95;
-        }
-    </style>
-</head>
-<body>
-    <div class="sidebar">
-        <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>
-
-    <!-- Leaflet JS -->
-    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-    
-    <script>
-        // Initialize the map
-        const map = L.map('map').setView([8.5, 47.3], 10);
-        
-        // Add tile layer
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: '© OpenStreetMap contributors'
-        }).addTo(map);
-
-        // Add controls
-        const controls = document.createElement('div');
-        controls.className = 'map-controls';
-        
-        // Zoom controls
-        const zoomInBtn = document.createElement('button');
-        zoomInBtn.className = 'btn';
-        zoomInBtn.innerHTML = '+';
-        zoomInBtn.addEventListener('click', () => map.zoomIn());
-        
-        const zoomOutBtn = document.createElement('button');
-        zoomOutBtn.className = 'btn';
-        zoomOutBtn.innerHTML = '-';
-        zoomOutBtn.addEventListener('click', () => map.zoomOut());
-        
-        controls.appendChild(zoomInBtn);
-        controls.appendChild(zoomOutBtn);
-        
-        document.body.appendChild(controls);
-
-        // Add geolocation control
-        const locateBtn = document.createElement('button');
-        locateBtn.className = 'btn';
-        locateBtn.innerHTML = '📍';
-        locateBtn.addEventListener('click', () => {
-            map.locate({setView: true});
-        });
-        
-        controls.appendChild(locateBtn);
-
-        // Marker functionality
-        let markers = [];
-        
-        document.getElementById('add-marker').addEventListener('click', () => {
-            map.on('click', function(e) {
-                const marker = L.marker(e.latlng, {draggable: true}).addTo(map);
-                
-                marker.bindPopup('<input type="text" placeholder="Enter title">');
-                
-                markers.push(marker);
-                
-                updateMarkerList();
-            });
-        });
-
-        document.getElementById('clear-markers').addEventListener('click', () => {
-            map.eachLayer(function(layer) {
-                if (layer instanceof L.Marker) {
-                    map.removeLayer(layer);
-                }
-            });
-            markers = [];
-            updateMarkerList();
-        });
-
-        function updateMarkerList() {
-            const list = document.getElementById('marker-list');
-            list.innerHTML = '';
-            
-            markers.forEach((marker, index) => {
-                const li = document.createElement('div');
-                li.textContent = `Marker ${index + 1}: ${marker.getLatLng().lat.toFixed(4)}, ${marker.getLngLat().lng.toFixed(4)}`;
-                list.appendChild(li);
-            });
-        }
-
-        // Initialize with some basic markers
-        map.on('ready', () => {
-            const initialMarkers = [
-                [8.5, 47.3],
-                [48.8566, 2.3522]
-            ];
-
-            initialMarkers.forEach(lngLat => {
-                const marker = L.marker(lngLat).addTo(map);
-                markers.push(marker);
-            });
-
-            updateMarkerList();
-        });
-    </script>
-</body>
-</html>