1

2026-03-20 02:14:50 +03:00
parent 65ce6a0ba2
commit 6e6ee55d03
47 changed files with 14706 additions and 0 deletions
@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import MapComponent from './components/MapComponent';
+import { Navigation, Map as MapIcon, Database, Activity, Compass } from 'lucide-react';
+
+function App() {
+  const [map, setMap] = useState<any>(null);
+  const [debug, setDebug] = useState({ zoom: 12, center: [35.91, 31.95], bounds: '' });
+  const [routeData, setRouteData] = useState<any>(null);
+
+  const handleMapLoad = (initializedMap: any) => {
+    setMap(initializedMap);
+    initializedMap.on('move', () => {
+      const center = initializedMap.getCenter();
+      setDebug({
+        zoom: initializedMap.getZoom().toFixed(2),
+        center: [center.lng.toFixed(4), center.lat.toFixed(4)],
+        bounds: initializedMap.getBounds().toString()
+      });
+    });
+  };
+
+  const [loading, setLoading] = useState(false);
+
+  const calculateRoute = async () => {
+    setLoading(true);
+    try {
+      // Points for Amman and Zarqa as defaults
+      const from = [31.9539, 35.9106];
+      const to = [32.0608, 36.1032];
+      
+      const response = await fetch(`http://localhost:3200/maps/route?fromLat=${from[0]}&fromLng=${from[1]}&toLat=${to[0]}&toLng=${to[1]}`);
+      const data = await response.json();
+      
+      if (data.points && map) {
+        setRouteData(data);
+        // Draw on map
+        if (map.getSource('route')) {
+          map.getSource('route').setData({
+            type: 'Feature',
+            properties: {},
+            geometry: {
+              type: 'LineString',
+              coordinates: data.points
+            }
+          });
+        }
+      }
+    } catch (error) {
+      console.error("Error calculating route:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const [show3D, setShow3D] = useState(false);
+  const [showPOIs, setShowPOIs] = useState(true);
+
+  return (
+    <div className="app">
+      {/* Sidebar - لوحة التحكم */}
+      <div className="sidebar glass-morphism">
+        <h1>Jordan Maps SaaS</h1>
+        <p style={{ color: 'var(--text-muted)', fontSize: '0.8rem' }}>Self-Hosted Mobility Prototype</p>
+        
+        <div className="input-group">
+          <label><Navigation size={14} style={{ marginRight: 5 }} /> Origin / نقطة الانطلاق</label>
+          <input type="text" placeholder="Amman, Jordan" defaultValue="31.9539, 35.9106" />
+        </div>
+
+        <div className="input-group">
+          <label><Compass size={14} style={{ marginRight: 5 }} /> Destination / الوجهة</label>
+          <input type="text" placeholder="Zarqa, Jordan" defaultValue="32.0608, 36.1032" />
+        </div>
+
+        <button className="btn" onClick={calculateRoute}>
+          Calculate Route / حساب المسار
+        </button>
+
+        <hr style={{ border: 'none', borderTop: '1px solid var(--glass-border)', margin: '10px 0' }} />
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <h3 style={{ margin: 0 }}>Options / خيارات</h3>
+          </div>
+          
+          <div className="toggle-group" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <label style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <input type="checkbox" checked={show3D} onChange={(e) => setShow3D(e.target.checked)} />
+              3D Buildings / مباني 3D
+            </label>
+          </div>
+
+          <div className="toggle-group" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <label style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <input type="checkbox" checked={showPOIs} onChange={(e) => setShowPOIs(e.target.checked)} />
+              Show POIs / عرض المعالم
+            </label>
+          </div>
+
+          <hr style={{ border: 'none', borderTop: '1px solid var(--glass-border)', margin: '5px 0' }} />
+
+          <h3>Simulation / المحاكاة</h3>
+          <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+            <Activity size={18} color="#22c55e" />
+            <span>Live Drivers: 12</span>
+          </div>
+          <button className="btn" style={{ background: '#334155' }}>
+            Spawn Simulated Drivers
+          </button>
+        </div>
+      </div>
+
+      {/* Map - الخريطة */}
+      <div className="map-container">
+        <MapComponent 
+          onMapLoad={handleMapLoad} 
+          show3D={show3D}
+          showPOIs={showPOIs}
+        />
+        
+        {/* Debug Panel - لوحة المعلومات */}
+        <div className="debug-panel glass-morphism">
+          <div>Zoom: {debug.zoom}</div>
+          <div>Center: {debug.center[0]}, {debug.center[1]}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;