-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add vehicle tracking dashboard with journey history and alerts panel
- Loading branch information
1 parent
5dd7b2e
commit ae9bdbb
Showing
7 changed files
with
211 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import React, { useEffect, useState } from "react"; | ||
| import { fetchAlerts } from "../services/api"; | ||
|
|
||
| const AlertsPanel = () => { | ||
| const [alerts, setAlerts] = useState([]); | ||
|
|
||
| useEffect(() => { | ||
| const interval = setInterval(async () => { | ||
| try { | ||
| const data = await fetchAlerts(); | ||
| setAlerts(data); | ||
| } catch (error) { | ||
| console.error("Error fetching alerts:", error); | ||
| } | ||
| }, 10000); | ||
|
|
||
| return () => clearInterval(interval); | ||
| }, []); | ||
|
|
||
| return ( | ||
| <div className="alerts-panel bg-red-100 p-4 rounded-lg shadow-md max-w-md mx-auto"> | ||
| <h2 className="text-xl font-bold text-red-600 mb-4">Active Alerts</h2> | ||
| <ul className="space-y-2"> | ||
| {alerts.map((alert) => ( | ||
| <li | ||
| key={alert.id} | ||
| className="p-3 bg-white rounded-lg shadow-sm border-l-4 border-red-600" | ||
| > | ||
| <strong className="font-semibold text-red-600">{alert.alert_type}:</strong>{" "} | ||
| <span className="text-gray-700">{alert.description}</span> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default AlertsPanel; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import React, { useEffect, useState } from "react"; | ||
| import { | ||
| MapContainer, | ||
| TileLayer, | ||
| Marker, | ||
| Popup, | ||
| Polyline, | ||
| } from "react-leaflet"; | ||
| import "leaflet/dist/leaflet.css"; | ||
|
|
||
| function JourneyHistory({ vehicleId }) { | ||
| const [history, setHistory] = useState([]); | ||
|
|
||
| useEffect(() => { | ||
| fetch(`http://localhost:8000/gps/history?vehicle_id=${vehicleId}`) | ||
| .then((response) => response.json()) | ||
| .then((data) => setHistory(data.journey_history)) | ||
| .catch((error) => | ||
| console.error("Error fetching journey history:", error) | ||
| ); | ||
| }, [vehicleId]); | ||
|
|
||
| if (!history.length) | ||
| return ( | ||
| <p className="text-center text-gray-500 py-4"> | ||
| Loading journey history... | ||
| </p> | ||
| ); | ||
|
|
||
| const routeCoordinates = history.map((point) => [ | ||
| point.latitude, | ||
| point.longitude, | ||
| ]); | ||
|
|
||
| return ( | ||
| <div className="journey-history-container bg-gray-100 p-6 rounded-lg shadow-md max-w-4xl mx-auto"> | ||
| <h2 className="text-2xl font-bold text-gray-800 mb-4 text-center"> | ||
| Journey History | ||
| </h2> | ||
| <MapContainer | ||
| center={routeCoordinates[0]} | ||
| zoom={13} | ||
| style={{ height: "400px", width: "100%" }} | ||
| className="rounded-lg shadow-sm" | ||
| > | ||
| <TileLayer | ||
| url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" | ||
| attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' | ||
| /> | ||
| <Polyline positions={routeCoordinates} color="blue" /> | ||
| {history.map((point, index) => ( | ||
| <Marker | ||
| key={index} | ||
| position={[point.latitude, point.longitude]} | ||
| > | ||
| <Popup> | ||
| <div className="text-center"> | ||
| <span className="font-semibold"> | ||
| Checkpoint {index + 1} | ||
| </span> | ||
| <br /> | ||
| <span className="text-gray-600"> | ||
| {new Date(point.timestamp).toLocaleString()} | ||
| </span> | ||
| </div> | ||
| </Popup> | ||
| </Marker> | ||
| ))} | ||
| </MapContainer> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default JourneyHistory; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import axios from "axios"; | ||
|
|
||
| const API_BASE_URL = "http://localhost:8000"; | ||
|
|
||
| export const updateGPSLocation = async (vehicleId) => { | ||
| try { | ||
| const response = await axios.post(`${API_BASE_URL}/gps/update`, { vehicle_id: vehicleId }); | ||
| return response.data; | ||
| } catch (error) { | ||
| console.error("Error updating GPS location:", error); | ||
| throw error; | ||
| } | ||
| }; | ||
|
|
||
| export const fetchAlerts = async () => { | ||
| try { | ||
| const response = await axios.get(`${API_BASE_URL}/alerts`); | ||
| return response.data; | ||
| } catch (error) { | ||
| console.error("Error fetching alerts:", error); | ||
| throw error; | ||
| } | ||
| }; |