huge push

server/initdb.py

@@ -254,6 +254,12 @@
     "alerts": []
 }
 
+DEFAULT_USER_PINS = {
+  "type": "FeatureCollection",
+  "features": [
+  ]
+}
+
 DEFAULT_MESSAGES_DATA = {
     "message": []
 }
@@ -281,6 +287,7 @@ def initialize_database_files():
     initialize_file(ALERTS_FILE, DEFAULT_ALERTS_DATA)
     initialize_file(MESSAGES_FILE, DEFAULT_MESSAGES_DATA)
     initialize_file(GOLDEN_ER_FILE, DEFAULT_GOLDEN_ER)
+    initialize_file(USER_PINS_FILE, DEFAULT_USER_PINS)
     initialize_file(NAV_PATH_FILE, DEFAULT_NAV_PATH)
 
 if __name__ == "__main__":

server/json_databases/geojson/user_pins.json

@@ -1,19 +1 @@
-{
-    "type": "FeatureCollection",
-    "features": [
-      {
-        "type": "Feature",
-        "properties": {
-          "Name": "Grass"
-        },
-        "geometry": {
-          "coordinates": [
-            -95.08175606434708,
-            29.56503103374473
-          ],
-          "type": "Point"
-        },
-        "id": 99
-      }
-    ]
-  }
+{"type": "FeatureCollection", "features": []}

server/server.py

@@ -175,34 +175,35 @@ async def get_geojson():
 
     return geojson_data
 
-@app.post("/add_marker")
-async def add_marker(marker: Marker):
-    if not os.path.exists(BOUNDARY_LINES_FILE):
+
+class GeoJSONFeature(BaseModel):
+    type: str
+    properties: dict
+    geometry: dict
+    id: int
+
+@app.post("/add_feature")
+async def add_feature(feature: GeoJSONFeature):
+    if not os.path.exists(USER_PINS_FILE):
         data = {"type": "FeatureCollection", "features": []}
     else:
-        with open(BOUNDARY_LINES_FILE, "r") as file:
+        with open(USER_PINS_FILE, "r") as file:
             data = json.load(file)
 
-    new_feature = {
-        "type": "Feature",
-        "properties": {
-            "title": marker.title,
-            "description": marker.description,
-            "marker-color": "#FF0000",
-        },
-        "geometry": {
-            "type": "Point",
-            "coordinates": [marker.lng, marker.lat]
-        },
-        "id": len(data["features"])
-    }
+    # Check if an object with the same ID already exists
+    existing_feature_index = next((index for (index, d) in enumerate(data["features"]) if d["id"] == feature.id), None)
 
-    data["features"].append(new_feature)
+    if existing_feature_index is not None:
+        # Update the existing feature
+        data["features"][existing_feature_index] = feature.dict()
+    else:
+        # Append the new feature
+        data["features"].append(feature.dict())
 
-    with open(BOUNDARY_LINES_FILE, "w") as file:
+    with open(USER_PINS_FILE, "w") as file:
         json.dump(data, file)
 
-    return {"message": "Marker added successfully"}
+    return {"message": "Feature added/updated successfully"}
 
 # Get sent ER Procedure (Used by HMD)
 @app.get("/get_sent_procedure")

src/components/Map.js

@@ -1,10 +1,14 @@
+// MapboxComponent.js
 import React, { useEffect, useState } from "react";
 import mapboxgl from "mapbox-gl/dist/mapbox-gl.js";
 import "mapbox-gl/dist/mapbox-gl.css";
-import './map.css'; // Import the CSS file
+import './map.css';
+import AddPointModal from '../pages/constant/AddPointModal'; // Ensure this path is correct
 
 const MapboxComponent = () => {
   const [mapBoxAPIKey, setMapBoxAPIKey] = useState(null);
+  const [isModalVisible, setModalVisible] = useState(false);
+  const [clickCoordinates, setClickCoordinates] = useState(null);
 
   const fetchMapBoxAPIKey = async () => {
     try {
@@ -111,12 +115,61 @@ const MapboxComponent = () => {
         const intervalId = setInterval(fetchGeoJSON, 3000);
         return () => clearInterval(intervalId);
       });
+
+      newMap.on('click', (e) => {
+        setClickCoordinates([e.lngLat.lng, e.lngLat.lat]);
+        setModalVisible(true);
+      });
     }
   }, [mapBoxAPIKey]);
 
+  const hideModal = () => setModalVisible(false);
+
+  const handleAddPoint = async ({ name, id, coordinates }) => {
+    const newFeature = {
+      type: "Feature",
+      properties: {
+        Name: name,
+        "marker-color": "#f4aeae",
+        "marker-size": "medium",
+        "marker-symbol": "circle"
+      },
+      geometry: {
+        type: "Point",
+        coordinates
+      },
+      id: parseInt(id, 10)
+    };
+
+    try {
+      const response = await fetch('http://localhost:8000/add_feature', {
+        method: 'POST',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(newFeature)
+      });
+
+      if (response.ok) {
+        console.log('Point added successfully');
+      } else {
+        console.error('Failed to add point');
+      }
+    } catch (error) {
+      console.error('Error adding point:', error);
+    }
+  };
+
   return (
     <div className="map-container">
       <div id="map" className="map"></div>
+      <AddPointModal
+        isVisible={isModalVisible}
+        hideModal={hideModal}
+        coordinates={clickCoordinates}
+        onSubmit={handleAddPoint}
+      />
     </div>
   );
 };

src/components/RoverCamera.js

@@ -1,40 +1,27 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom'; // Import Link from react-router-dom
 import NoVid from "./../assets/Images/NoVid.png";
-import './streamcomponent.css'; // Import the CSS file
+import './rovercamera.css'; // Import the CSS file
 
 const RoverCamera = () => {
-  const videoRef = useRef(null);
   const [isConnected, setIsConnected] = useState(true);
-  const [HOLO_IP, setHOLO_IP] = useState(null); // Initialize HOLO_IP as null
+  const [streamUrl, setStreamUrl] = useState('');
 
   useEffect(() => {
     // Fetch configuration data from localhost:8000/config
     fetch('http://localhost:8000/get_config')
       .then(response => response.json())
       .then(data => {
-        setHOLO_IP(data.HOLO_IP); // Set HOLO_IP from fetched data
+        setStreamUrl(`http://${data.ROVER_IP}:5000/native_feed`); // Set streamUrl from fetched Rover IP
+        setIsConnected(true); // Set isConnected to true if data fetch is successful
       })
       .catch(error => {
         console.error('Error fetching configuration:', error);
         setIsConnected(false); // Set isConnected to false on error
       });
   }, []);
 
-  useEffect(() => {
-    if (videoRef.current) { // && HOLO_IP
-      // const streamUrl = `http://${HOLO_IP}/api/holographic/stream/live_high.mp4`;
-      const streamUrl = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4';
-      videoRef.current.src = streamUrl;
-      videoRef.current.load();
-      videoRef.current.play().catch(error => {
-        console.error('Error playing the video:', error);
-        setIsConnected(false); // Set isConnected to false on error
-      });
-    }
-  }, [HOLO_IP]);
-
-  if (false) { //!isConnected
+  if (!isConnected) {
     return (
       <div>
         <h1>HoloLens Not Connected</h1>
@@ -46,7 +33,7 @@ const RoverCamera = () => {
 
   return (
     <div className="stream-container">
-      <video ref={videoRef} className="stream-video" controls autoPlay muted playsInline />
+      <img src={streamUrl} alt="Rover Stream" className="stream-image" />
     </div>
   );
 };

src/components/StreamComponent.js

@@ -9,7 +9,7 @@ const StreamComponent = () => {
   const [HOLO_IP, setHOLO_IP] = useState(null); // Initialize HOLO_IP as null
 
   useEffect(() => {
-    // Fetch configuration data from localhost:8000/config
+    // Fetch configuration data from localhost:8000/get_config
     fetch('http://localhost:8000/get_config')
       .then(response => response.json())
       .then(data => {
@@ -22,9 +22,8 @@ const StreamComponent = () => {
   }, []);
 
   useEffect(() => {
-    if (videoRef.current) { // && HOLO_IP
-      // const streamUrl = `http://${HOLO_IP}/api/holographic/stream/live_high.mp4`;
-      const streamUrl = 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
+    if (videoRef.current && HOLO_IP) { // Check if HOLO_IP is available
+      const streamUrl = `http://${HOLO_IP}/api/holographic/stream/live_high.mp4`;
       videoRef.current.src = streamUrl;
       videoRef.current.load();
       videoRef.current.play().catch(error => {
@@ -34,7 +33,7 @@ const StreamComponent = () => {
     }
   }, [HOLO_IP]);
 
-  if (false) { //!isConnected
+  if (!isConnected) {
     return (
       <div>
         <h1>HoloLens Not Connected</h1>

src/components/rovercamera.css

@@ -0,0 +1,25 @@
+/* CSS for StreamComponent */
+.stream-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 80%;
+    height: 100%;
+    margin: 20px auto; /* Center the container and add top and bottom margins */
+    padding: 10px; /* Add padding inside the container */
+    border: 2px solid #ccc; /* Light gray border */
+    border-radius: 10px; /* Rounded corners */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for a modern look */
+    background-color: #f9f9f9; /* Light background color */
+    overflow: hidden;
+    position: relative;
+}
+
+.stream-image {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    object-fit: contain; /* Maintain aspect ratio and fit within container */
+    border-radius: 8px; /* Slightly rounded corners for the image */
+}

src/components/streamcomponent.css

@@ -4,6 +4,7 @@
     justify-content: center;
     align-items: center;
     width: 80%;
+    height: 100%;
     margin: 20px auto; /* Center the container and add top and bottom margins */
     padding: 10px; /* Add padding inside the container */
     border: 2px solid #ccc; /* Light gray border */

src/pages/constant/AddPointModal.js

@@ -0,0 +1,48 @@
+// AddPointModal.js
+import React, { useState } from 'react';
+import Modal from './Modal'; // Ensure this path is correct
+
+const AddPointModal = ({ isVisible, hideModal, coordinates, onSubmit }) => {
+  const [name, setName] = useState('');
+  const [id, setId] = useState('');
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmit({ name, id, coordinates });
+    setName('');
+    setId('');
+    hideModal();
+  };
+
+  return (
+    <Modal
+      isVisible={isVisible}
+      hideModal={hideModal}
+      content={
+        <form onSubmit={handleSubmit}>
+          <label htmlFor="name">Name:</label><br />
+          <input 
+            type="text" 
+            id="name" 
+            name="name" 
+            value={name} 
+            onChange={(e) => setName(e.target.value)} 
+            required 
+          /><br /><br />
+          <label htmlFor="id">ID:</label><br />
+          <input 
+            type="number" 
+            id="id" 
+            name="id" 
+            value={id} 
+            onChange={(e) => setId(e.target.value)} 
+            required 
+          /><br /><br />
+          <button type="submit">Submit</button>
+        </form>
+      }
+    />
+  );
+};
+
+export default AddPointModal;