diff --git a/server/json_databases/geojson/nav_path.json b/server/json_databases/geojson/nav_path.json index 9e26dfe..bd3349d 100644 --- a/server/json_databases/geojson/nav_path.json +++ b/server/json_databases/geojson/nav_path.json @@ -1 +1 @@ -{} \ No newline at end of file +{"type": "FeatureCollection", "features": [{"type": "Feature", "geometry": {"type": "LineString", "coordinates": [[-95.08141793795379, 29.564580908696907], [-95.0814563954045, 29.56467675123534], [-95.0814797733473, 29.56480640650252], [-95.08157335667411, 29.564815758720055], [-95.08157234926806, 29.56492419510491], [-95.08157315565839, 29.564959141875754]]}, "properties": {"name": "Rover Path"}}]} \ No newline at end of file diff --git a/server/json_databases/geojson/user_pins.json b/server/json_databases/geojson/user_pins.json index 188bb9e..0107a9d 100644 --- a/server/json_databases/geojson/user_pins.json +++ b/server/json_databases/geojson/user_pins.json @@ -1 +1 @@ -{"type": "FeatureCollection", "features": []} \ No newline at end of file +{"type": "FeatureCollection", "features": [{"type": "Feature", "properties": {"Name": "hey"}, "geometry": {"coordinates": [-95.08133613847313, 29.56504641409886], "type": "Point"}, "id": 102}]} \ No newline at end of file diff --git a/src/components/Map.js b/src/components/Map.js index 268c707..97a0ea9 100644 --- a/src/components/Map.js +++ b/src/components/Map.js @@ -4,7 +4,7 @@ import "mapbox-gl/dist/mapbox-gl.css"; import './map.css'; import AddPointModal from '../pages/constant/AddPointModal'; // Ensure this path is correct -const MapboxComponent = () => { +const MapboxComponent = ({ zoom = 17 }) => { const [mapBoxAPIKey, setMapBoxAPIKey] = useState(null); const [isModalVisible, setModalVisible] = useState(false); const [clickCoordinates, setClickCoordinates] = useState(null); @@ -30,7 +30,7 @@ const MapboxComponent = () => { container: "map", style: "mapbox://styles/mapbox/satellite-v8", center: [-95.08148549138448, 29.564911887991144], - zoom: 17, + zoom: zoom, }); newMap.on("load", () => { @@ -109,7 +109,7 @@ const MapboxComponent = () => { setModalVisible(true); }); } - }, [mapBoxAPIKey]); + }, [mapBoxAPIKey, zoom]); const hideModal = () => setModalVisible(false); diff --git a/src/pages-style/nav.css b/src/pages-style/nav.css index 46623dd..ebb43f0 100644 --- a/src/pages-style/nav.css +++ b/src/pages-style/nav.css @@ -1,3 +1,17 @@ #navPage { flex-direction: column; +} + +#conti { + display: flex; + flex-direction: row; + height: 90vh +} + +#navMap { + width: 70%; +} + +#navControls { + width: 30%; } \ No newline at end of file diff --git a/src/pages-style/rover.css b/src/pages-style/rover.css index aea3439..9fc6e7f 100644 --- a/src/pages-style/rover.css +++ b/src/pages-style/rover.css @@ -1,13 +1,17 @@ -.pagecontainer { +.page-container { display: grid; grid-template-rows: auto 1fr; + height: 90vh; width: 100vw; } .header-rover { text-align: center; padding: 20px; - background-color: #f8f9fa; /* Light gray */ + background-color: #f8f9fa; + font-size: 1.5rem; + font-weight: bold; + color: #333; } .content-rover { @@ -17,49 +21,72 @@ } .left-column-rover { - display: grid; - grid-template-rows: 50% 50%; + display: flex; border-right: 1px solid #ddd; - height: 100%; } -.rover-cam { +.rover-cam-container, +.map-container { display: flex; - flex-direction: column; - align-items: center; justify-content: center; - background-color: #eef; /* Light blue */ + align-items: center; + background-color: #eef; overflow: hidden; - position: relative; } -.rover-camera-container { - position: relative; +.map-container { + flex: 1; +} + +.rover-cam-container { width: 100%; - height: 100%; } -.video-container { +#rovMap { width: 100%; - height: calc(100% - 50px); /* Adjust height to leave space for the button */ + height: 100%; +} + +.right-column-rover { display: flex; - align-items: center; - justify-content: center; + flex-direction: column; + padding: 20px; + background-color: #f8f9fa; + overflow-y: auto; } -.video-container video, -.video-container img { - max-width: 100%; - max-height: 100%; +.rover-video { + flex: 1; + margin-bottom: 20px; } -.button-container { +.table { display: flex; - justify-content: center; - align-items: center; - height: 50px; + flex-direction: column; + width: 100%; + border-collapse: collapse; + margin: 20px 0; + font-size: 0.8rem; /* Decreased font size */ } -.right-column-rover { - background-color: #f8f9fa; /* Light gray */ +.table-row { + display: flex; + flex-direction: row; +} + +.table-cell, +.table-header { + flex: 1; + padding: 5px; /* Decreased padding */ + border: 1px solid #ddd; + text-align: left; +} + +.table-header { + background-color: #f2f2f2; + font-weight: bold; +} + +.table-row:nth-child(even) .table-cell { + background-color: #f9f9f9; } diff --git a/src/pages/constant/EVData.js b/src/pages/constant/EVData.js index c3f1c9d..b18d724 100644 --- a/src/pages/constant/EVData.js +++ b/src/pages/constant/EVData.js @@ -47,7 +47,7 @@ const EVData = ({ evNumber }) => { // Function to format the value to a fixed number of decimal places const formatValue = (value) => { if (typeof value === 'number') { - return value.toFixed(4); // Change the number of decimal places if needed + return value.toFixed(2); // Change the number of decimal places if needed } return value; }; diff --git a/src/pages/constant/constant.css b/src/pages/constant/constant.css index 9b80ce5..9d4103f 100644 --- a/src/pages/constant/constant.css +++ b/src/pages/constant/constant.css @@ -48,11 +48,11 @@ } #EV { - width: 40%; + width: 33.333%; } #ConstantMap, #UIADCU { - width: 30%; + width: 33.333%; } #topbar { @@ -125,9 +125,9 @@ } .ev-container { - padding: 20px; + padding: 10px; background-color: #f0f8ff; /* Light blue-ish background */ - border-radius: 8px; + border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); width: 100%; height: 100%; @@ -151,11 +151,11 @@ .ev-table th, .ev-table td { - font-size: medium; + font-size: small; border: 1px solid #ddd; - padding-top: 4px; - padding-bottom: 4px; - text-align: left; + padding-top: 8px; + padding-bottom: 8px; + text-align: center; box-sizing: border-box; } diff --git a/src/pages/focus/nav.js b/src/pages/focus/nav.js index fc5670d..c3e50b6 100644 --- a/src/pages/focus/nav.js +++ b/src/pages/focus/nav.js @@ -1,17 +1,118 @@ -import React from "react"; +import React, { useState, useEffect, useRef } from "react"; import "../../pages-style/page.css"; import "../../pages-style/nav.css"; import Map from "../../components/Map"; -function nav() { +function Nav() { + const [points, setPoints] = useState([]); + const [startId, setStartId] = useState(''); + const [endId, setEndId] = useState(''); + const intervalRef = useRef(null); + + useEffect(() => { + fetch('http://localhost:8000/get_geojson') + .then(response => response.json()) + .then(data => { + const validPoints = data.features.filter(point => + point.geometry.type === 'Point' && point.properties.Name + ); + setPoints(validPoints); + }) + .catch(error => console.error('Error fetching points:', error)); + }, []); + + useEffect(() => { + if (startId && endId) { + calculateShortestPath(startId, endId); + intervalRef.current = setInterval(() => { + calculateShortestPath(startId, endId); + }, 3000); + + return () => clearInterval(intervalRef.current); + } + }, [startId, endId]); + + const calculateShortestPath = (startId, endId) => { + const data = { + start_id: startId, + end_id: endId + }; + + fetch('http://localhost:8000/get_shortest_path', { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + body: JSON.stringify(data) + }) + .then(response => response.json()) + .then(data => { + const distance = data.distance; + if (distance < 10) { + clearInterval(intervalRef.current); + } + console.log('Distance:', distance); + }) + .catch((error) => { + console.error('Error:', error); + }); + }; + + const handleFormSubmit = (e) => { + e.preventDefault(); + if (startId && endId) { + clearInterval(intervalRef.current); + calculateShortestPath(startId, endId); + } + }; + return ( -