Spaces:

Muzanfer
/

dolmu-tracker-admin-panel

Running

App Files Files Community

Muzanfer commited on Nov 14, 2025

Commit

a0eae8f

verified ·

1 Parent(s): 0d7bb62

dostum bana güzergah düzenleme ekranı hazırlamanı istiyorum. güzergah başlığı ve haritada noktalar seçebileceğim bir sayfa ekle ben butona basınca o sayfaya gidebileyim.

Browse files

Files changed (3) hide show

components/sidebar.js +2 -2
routes.html +185 -0
style.css +5 -0

components/sidebar.js CHANGED Viewed

@@ -55,11 +55,11 @@ class CustomSidebar extends HTMLElement {
                             <i data-feather="users" class="w-4 h-4 mr-3"></i>
                             Drivers
                         </a>
-                        <a href="#" class="nav-item flex items-center px-4 py-2 text-sm font-medium text-gray-900 rounded-md">
                             <i data-feather="map" class="w-4 h-4 mr-3"></i>
                             Routes
                         </a>
-                    </div>
                     <div class="space-y-2">
                         <h3 class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Monitoring</h3>

                             <i data-feather="users" class="w-4 h-4 mr-3"></i>
                             Drivers
                         </a>
+                        <a href="routes.html" class="nav-item flex items-center px-4 py-2 text-sm font-medium text-gray-900 rounded-md">
                             <i data-feather="map" class="w-4 h-4 mr-3"></i>
                             Routes
                         </a>
+</div>
                     <div class="space-y-2">
                         <h3 class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider">Monitoring</h3>

routes.html ADDED Viewed

	@@ -0,0 +1,185 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Route Editor | Dolmuş Tracker Admin</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    <div class="flex">
+        <custom-sidebar></custom-sidebar>
+        <main class="flex-1 p-8">
+            <div class="flex items-center justify-between mb-6">
+                <h1 class="text-2xl font-bold text-gray-800">Route Editor</h1>
+                <button id="save-route" class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-md flex items-center">
+                    <i data-feather="save" class="w-4 h-4 mr-2"></i>
+                    Save Route
+                </button>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                <div class="lg:col-span-2 bg-white rounded-lg shadow p-6">
+                    <div id="map" class="h-[600px] rounded-lg"></div>
+                </div>
+                <div class="bg-white rounded-lg shadow p-6">
+                    <div class="mb-6">
+                        <label for="route-name" class="block text-sm font-medium text-gray-700 mb-1">Route Name</label>
+                        <input type="text" id="route-name" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500">
+                    </div>
+                    <div class="mb-6">
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Route Stops</label>
+                        <div id="route-stops" class="space-y-2 max-h-96 overflow-y-auto p-2 border border-gray-200 rounded-md">
+                            <p class="text-gray-500 text-sm">Click on the map to add stops</p>
+                        </div>
+                    </div>
+                    <div class="flex space-x-2">
+                        <button id="clear-route" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md flex items-center justify-center">
+                            <i data-feather="trash-2" class="w-4 h-4 mr-2"></i>
+                            Clear
+                        </button>
+                        <button id="reverse-route" class="flex-1 bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md flex items-center justify-center">
+                            <i data-feather="repeat" class="w-4 h-4 mr-2"></i>
+                            Reverse
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+    <script src="components/navbar.js"></script>
+    <script src="components/sidebar.js"></script>
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            feather.replace();
+            // Initialize map
+            const map = L.map('map').setView([41.0082, 28.9784], 12); // Istanbul coordinates
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            }).addTo(map);
+            const routeStops = [];
+            const markers = [];
+            const polyline = L.polyline([], {color: '#3B82F6'}).addTo(map);
+            // Map click handler
+            map.on('click', function(e) {
+                const stopNumber = routeStops.length + 1;
+                const marker = L.marker(e.latlng, {
+                    draggable: true,
+                    icon: L.divIcon({
+                        className: 'custom-marker',
+                        html: `<div class="bg-primary-600 text-white rounded-full w-8 h-8 flex items-center justify-center font-bold">${stopNumber}</div>`
+                    })
+                }).addTo(map);
+                marker.on('dragend', function() {
+                    updateRoute();
+                });
+                markers.push(marker);
+                routeStops.push({
+                    lat: e.latlng.lat,
+                    lng: e.latlng.lng,
+                    name: `Stop ${stopNumber}`
+                });
+                updateRoute();
+                updateStopList();
+            });
+            function updateRoute() {
+                const latlngs = markers.map(marker => marker.getLatLng());
+                polyline.setLatLngs(latlngs);
+                map.fitBounds(polyline.getBounds());
+            }
+            function updateStopList() {
+                const stopsContainer = document.getElementById('route-stops');
+                stopsContainer.innerHTML = '';
+                if (routeStops.length === 0) {
+                    stopsContainer.innerHTML = '<p class="text-gray-500 text-sm">Click on the map to add stops</p>';
+                    return;
+                }
+                routeStops.forEach((stop, index) => {
+                    const stopElement = document.createElement('div');
+                    stopElement.className = 'flex items-center justify-between p-2 bg-gray-50 rounded';
+                    stopElement.innerHTML = `
+                        <div class="flex items-center">
+                            <span class="bg-primary-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold mr-2">${index + 1}</span>
+                            <span>${stop.name}</span>
+                        </div>
+                        <button class="text-red-500 hover:text-red-700" data-index="${index}">
+                            <i data-feather="x" class="w-4 h-4"></i>
+                        </button>
+                    `;
+                    stopsContainer.appendChild(stopElement);
+                });
+                // Add event listeners to delete buttons
+                document.querySelectorAll('#route-stops button').forEach(button => {
+                    button.addEventListener('click', function() {
+                        const index = parseInt(this.getAttribute('data-index'));
+                        routeStops.splice(index, 1);
+                        map.removeLayer(markers[index]);
+                        markers.splice(index, 1);
+                        updateRoute();
+                        updateStopList();
+                    });
+                });
+                feather.replace();
+            }
+            // Button handlers
+            document.getElementById('clear-route').addEventListener('click', function() {
+                routeStops.length = 0;
+                markers.forEach(marker => map.removeLayer(marker));
+                markers.length = 0;
+                polyline.setLatLngs([]);
+                updateStopList();
+            });
+            document.getElementById('reverse-route').addEventListener('click', function() {
+                routeStops.reverse();
+                markers.reverse();
+                updateRoute();
+                updateStopList();
+            });
+            document.getElementById('save-route').addEventListener('click', function() {
+                const routeName = document.getElementById('route-name').value;
+                if (!routeName) {
+                    alert('Please enter a route name');
+                    return;
+                }
+                if (routeStops.length < 2) {
+                    alert('Please add at least 2 stops to create a route');
+                    return;
+                }
+                // Here you would typically send data to your backend
+                console.log('Saving route:', {
+                    name: routeName,
+                    stops: routeStops
+                });
+                alert('Route saved successfully!');
+            });
+        });
+    </script>
+</body>
+</html>

style.css CHANGED Viewed

@@ -32,6 +32,11 @@ body {
     from { opacity: 0; }
     to { opacity: 1; }
 }
 /* Badge styles */
 .badge {

     from { opacity: 0; }
     to { opacity: 1; }
 }
+/* Custom marker styles */
+.custom-marker {
+    background: transparent;
+    border: none;
+}
 /* Badge styles */
 .badge {