kohlerjoshua/FHGR_Frontend_Group_3_Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: remove duplicate body content and properly structure the page layout

Browse Source 
Co-authored-by: aider (ollama/qwen2.5-coder:32b) <aider@aider.chat>
This commit is contained in:
Josh-Dev-Quest 2026-03-01 18:35:15 +01:00
parent 4b51448eb4
commit ba11d093cc
No known key found for this signature in database
2 changed files with 60 additions and 301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
css/map.css
View File

@ -4,8 +4,20 @@
.app-container {
display: flex;
height: 100vh;
overflow: hidden; /* Add this to prevent scrollbars */
font-family: 'Poppins', sans-serif;
overflow: hidden;
}
.sidebar {
width: 300px;
min-width: 300px;
background-color: #253342;
color: white;
padding: 20px;
}
.map-area {
flex: 1;
width: calc(100% - 300px);
}
#map {

345
map.html
View File

@ -20,314 +20,61 @@
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="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>
<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-list" class="markers-container">
<!-- Markers will be added here -->
</div>
<!-- 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>
<!-- 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>
<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);
let currentJourney = {
markers: []
};
updateMarkersList(); // Call the new function to update the list
// 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 currentJourney = {
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">');
currentJourney.markers.push(marker);
updateMarkersList(); // Call the new function to update the list
});
});
document.getElementById('clear-markers').addEventListener('click', () => {
map.eachLayer(function(layer) {
if (layer instanceof L.Marker) {
map.removeLayer(layer);
}
});
currentJourney.markers = [];
updateMarkersList(); // Call the new function to update the list
});
function updateMarkersList() {
const markersContainer = document.getElementById('markers-container');
markersContainer.innerHTML = '';
if (currentJourney.markers.length === 0) {
markersContainer.innerHTML = '<p class="empty-message">No markers yet. Click on the map to add markers.</p>';
return;
}
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 zoom to marker
markerElement.addEventListener('click', () => {
map.flyTo({
center: [marker.getLatLng().lat, marker.getLatLng().lng],
zoom: 10
});
});
markersContainer.appendChild(markerElement);
});
}
// 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>
<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);
let currentJourney = {
markers: []
};
updateMarkersList(); // Call the new function to update the list
// 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 currentJourney = {
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">');
currentJourney.markers.push(marker);
updateMarkersList(); // Call the new function to update the list
});
});
document.getElementById('clear-markers').addEventListener('click', () => {
map.eachLayer(function(layer) {
if (layer instanceof L.Marker) {
map.removeLayer(layer);
}
});
currentJourney.markers = [];
updateMarkersList(); // Call the new function to update the list
});
function updateMarkersList() {
const markersContainer = document.getElementById('markers-container');
markersContainer.innerHTML = '';
if (currentJourney.markers.length === 0) {
markersContainer.innerHTML = '<p class="empty-message">No markers yet. Click on the map to add markers.</p>';
return;
}
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 zoom to marker
markerElement.addEventListener('click', () => {
map.flyTo({
center: [marker.getLatLng().lat, marker.getLatLng().lng],
zoom: 10
});
});
markersContainer.appendChild(markerElement);
});
}
// 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>
<!-- Custom JavaScript -->
<script src="js/main.js"></script>
</body>
</html>