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

feat: implement interactive map with backend marker saving

Browse Source 
Co-authored-by: aider (ollama_chat/qwen3:30b-a3b-instruct-2507-q4_K_M) <aider@aider.chat>
This commit is contained in:
Josh-Dev-Quest 2026-03-01 15:53:05 +01:00
parent c005a6f1ea
commit b4ad401287
No known key found for this signature in database
1 changed files with 460 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

484
map-page.html
View File

@ -9,9 +9,466 @@
<script src='https://unpkg.com/maplibre-gl@5.19.0/dist/maplibre-gl.js'></script>
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }
html, body, #map { height: 100%; }
/* Sidebar Styles */
.app-container {
display: flex;
height: 100vh;
}
.sidebar {
width: 300px;
background: #f8f9fa;
border-right: 1px solid #dee2e6;
padding: 20px;
transition: transform 0.3s ease;
overflow-y: auto;
}
.sidebar.collapsed {
transform: translateX(-100%);
}
.sidebar-header {
margin-bottom: 30px;
text-align: center;
}
.sidebar-header h1 {
color: #3887be;
margin: 0;
font-size: 1.8rem;
font-weight: 600;
}
.tagline {
color: #6c757d;
font-size: 0.9rem;
margin-top: 5px;
}
.mode-selector {
margin-bottom: 20px;
}
.mode-btn {
width: 100%;
padding: 12px;
margin-bottom: 8px;
border: none;
border-radius: 8px;
background: #e9ecef;
color: #495057;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.mode-btn.active {
background: #3887be;
color: white;
box-shadow: 0 4px 6px rgba(56, 135, 190, 0.2);
}
.mode-btn:hover {
background: #dee2e6;
}
.panel {
display: none;
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.panel.active-panel {
display: block;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 6px;
font-weight: 500;
color: #495057;
font-size: 0.9rem;
}
input[type="text"],
input[type="date"],
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ced4da;
border-radius: 6px;
font-size: 1rem;
transition: border-color 0.2s ease;
}
input:focus,
textarea:focus {
outline: none;
border-color: #3887be;
box-shadow: 0 0 0 2px rgba(56, 135, 190, 0.25);
}
textarea {
height: 80px;
resize: vertical;
}
.instructions {
background: #e9ecef;
padding: 15px;
border-radius: 6px;
margin-bottom: 20px;
font-size: 0.9rem;
}
.instructions h4 {
margin-top: 0;
margin-bottom: 8px;
color: #3887be;
}
.instructions ol {
margin: 0;
padding-left: 20px;
}
.button-group {
display: flex;
gap: 10px;
margin-top: 20px;
}
.btn {
padding: 10px 15px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 1rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.2s ease;
}
.btn-primary {
background: #3887be;
color: white;
}
.btn-primary:hover {
background: #2c6d96;
}
.btn-secondary {
background: #6c757d;
color: white;
}
.btn-secondary:hover {
background: #5a6268;
}
.btn-danger {
background: #dc3545;
color: white;
}
.btn-danger:hover {
background: #c82333;
}
.markers-list {
margin-top: 30px;
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.markers-list h3 {
margin-top: 0;
color: #3887be;
font-size: 1.2rem;
border-bottom: 1px solid #dee2e6;
padding-bottom: 8px;
margin-bottom: 15px;
}
.marker-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background: #f8f9fa;
border-radius: 6px;
margin-bottom: 8px;
cursor: pointer;
transition: background 0.2s ease;
}
.marker-item:hover {
background: #e9ecef;
}
.marker-title {
font-weight: 500;
color: #3887be;
flex: 1;
}
.marker-coords {
font-size: 0.8rem;
color: #6c757d;
text-align: right;
}
.empty-message {
text-align: center;
color: #6c757d;
font-style: italic;
padding: 20px;
}
/* Map Controls */
.map-controls {
position: absolute;
top: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: 10;
}
.control-btn {
width: 40px;
height: 40px;
border-radius: 5px;
background-color: white;
border: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: #2c3e50;
transition: all 0.2s ease;
}
.control-btn:hover {
background-color: #f8f9fa;
transform: translateY(-2px);
}
/* Mode Indicator */
.mode-indicator {
position: absolute;
top: 20px;
left: 20px;
background-color: rgba(255, 255, 255, 0.9);
padding: 10px 15px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
gap: 10px;
z-index: 1;
}
.indicator-text {
font-weight: 500;
color: #2c3e50;
}
.indicator-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.indicator-dot.creating {
background-color: #3498db;
}
.indicator-dot.viewing {
background-color: #2ecc71;
}
/* Modal */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100;
align-items: center;
justify-content: center;
}
.modal.active {
display: flex;
}
.modal-content {
background-color: white;
border-radius: 10px;
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.modal-header {
padding: 20px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}
.modal-header h3 {
margin: 0;
display: flex;
align-items: center;
gap: 10px;
}
.close-btn {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #7f8c8d;
}
.close-btn:hover {
color: #2c3e50;
}
.modal-body {
padding: 20px;
}
.image-upload-area {
border: 2px dashed #ddd;
border-radius: 5px;
padding: 15px;
margin-top: 5px;
}
.image-preview {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 15px;
min-height: 60px;
}
.upload-actions {
display: flex;
gap: 10px;
}
.help-text {
display: block;
margin-top: 5px;
color: #7f8c8d;
font-size: 0.85rem;
}
.coordinates {
padding: 10px;
background-color: #f8f9fa;
border-radius: 5px;
margin-top: 15px;
}
.modal-footer {
padding: 15px 20px;
border-top: 1px solid #eee;
display: flex;
gap: 10px;
justify-content: flex-end;
}
/* Toast */
.toast {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #2ecc71;
color: white;
padding: 15px 20px;
border-radius: 5px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
display: none;
z-index: 100;
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* 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: 20px;
right: 20px;
flex-direction: row;
}
.mode-indicator {
top: 10px;
left: 10px;
font-size: 0.9rem;
}
}
</style>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
@ -20,15 +477,10 @@
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/map.css">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="assets/icons/favicon.ico">
</head>
<body>
<!-- Main Container -->
<div class="app-container">
<!-- Sidebar -->
<aside class="sidebar">
<!-- Header Section -->
@ -91,25 +543,9 @@
<select id="journey-select">
<option value="">-- Choose a journey --</option>
<option value="all">Show All Journeys</option>
<!-- Journeys will be populated by JavaScript -->
</select>
</div>
<!-- Filter Options -->
<div class="filter-options">
<h4><i class="fas fa-filter"></i> Filter Options</h4>
<div class="checkbox-group">
<label>
<input type="checkbox" id="filter-markers" checked>
Show Markers
</label>
<label>
<input type="checkbox" id="filter-paths" checked>
Show Paths
</label>
</div>
</div>
<!-- Selected Journey Info -->
<div id="journey-info" class="journey-info">
<h4><i class="fas fa-info-circle"></i> Journey Details</h4>