provisioning for fitted points and centralized message handler #2

localdevices · Jan 29, 2025 · 4193a63 · 4193a63
1 parent 1a81272
commit 4193a63
Show file tree

Hide file tree

Showing 18 changed files with 457 additions and 53 deletions.
diff --git a/dashboard/index.html b/dashboard/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/orc_favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href='https://fonts.googleapis.com/css?family=Barlow' rel='stylesheet'>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
     <title>NodeORC</title>
         <!-- Bootstrap CSS -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

diff --git a/dashboard/src/App.css b/dashboard/src/App.css
@@ -3,6 +3,7 @@
   padding: 0 auto;
   // text-align: center;
   height: 100%;
+  font-family: Barlow;
 }
 .app-container {
   display: flex;

diff --git a/dashboard/src/App.jsx b/dashboard/src/App.jsx
@@ -1,8 +1,10 @@
+import {useState, useEffect} from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import reactLogo from '/react.svg'
 import orcLogo from '/orc_favicon.svg'
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
 import './App.css'
+import { MessageProvider } from './messageContext';
 import Navbar from './nav/Navbar';
 import Footer from './nav/Footer';
 import Home from './views/home';
@@ -14,7 +16,9 @@ import Calibration from './views/calibration'
 import api from './api'
 
 const App = () => {
+
     return (
+        <MessageProvider>
         <Router>
             <div className="app-container">
                 {/* Navbar appears everywhere */}
@@ -35,6 +39,7 @@ const App = () => {
                 <Footer />
             </div>
         </Router>
+        </MessageProvider>
     )
 }
 

diff --git a/dashboard/src/api.js b/dashboard/src/api.js
@@ -1,7 +1,4 @@
-//window.process = {};
 import axios from 'axios'
-//import dotenv from 'dotenv';
-//dotenv.config();
 
 // Ensure API_BASE_URL is defined
 if (!import.meta.env.VITE_API_BASE_URL) {

diff --git a/dashboard/src/messageBox.jsx b/dashboard/src/messageBox.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { FaTimes } from 'react-icons/fa';
+import { useMessage } from './messageContext'; // Adjust the path
+
+const MessageBox = () => {
+  const { message, messageType, showMessage, setShowMessage } = useMessage();
+
+  if (!showMessage || !message) return null; // Don't show the box if there's no message
+
+  const getBackgroundColor = () => {
+    switch (messageType) {
+      case 'success':
+        return '#dff0d8'; // Light green
+      case 'error':
+        return '#f2dede'; // Light red
+      case 'warning':
+        return '#fcf8e3'; // Light yellow
+      default:
+        return '#f5f5f5'; // Default (grayish)
+    }
+  };
+
+  const getTextColor = () => {
+    switch (messageType) {
+      case 'success':
+        return '#3c763d'; // Dark green
+      case 'error':
+        return '#a94442'; // Dark red
+      case 'warning':
+        return '#8a6d3b'; // Dark yellow
+      default:
+        return '#333'; // Default dark gray
+    }
+  };
+
+  return (
+    <div
+      style={{
+        backgroundColor: getBackgroundColor(),
+        color: getTextColor(),
+        padding: '15px',
+        borderRadius: '5px',
+        marginBottom: '20px',
+        textAlign: 'center',
+        position: 'relative'
+      }}
+    >
+      <FaTimes
+        onClick={() => setShowMessage(false)} // Hide the message on clicking
+        style={{
+          position: 'absolute',
+          right: '10px',
+          top: '10px',
+          cursor: 'pointer',
+        }}
+      />
+
+      {message}
+    </div>
+  );
+};
+
+export default MessageBox;
diff --git a/dashboard/src/messageContext.jsx b/dashboard/src/messageContext.jsx
@@ -0,0 +1,35 @@
+import React, { createContext, useState, useContext } from 'react';
+
+// Create the context
+const MessageContext = createContext();
+
+// Create a provider component
+export const MessageProvider = ({ children }) => {
+  const [message, setMessage] = useState(''); // Message content
+  const [messageType, setMessageType] = useState(''); // 'error', 'success', 'warning'
+  const [showMessage, setShowMessage] = useState(false); // New state to control visibility
+
+
+  // Function to set a message
+  const setMessageInfo = (type, content) => {
+    setMessage(content);
+    setMessageType(type);
+    setShowMessage(true);
+
+    // Optional: Clear the message automatically after a timeout
+    setTimeout(() => {
+      setShowMessage(false);
+      setMessage('');
+      setMessageType('');
+    }, 5000); // 5 seconds
+  };
+
+  return (
+    <MessageContext.Provider value={{ message, messageType, showMessage, setMessageInfo, setShowMessage }}>
+      {children}
+    </MessageContext.Provider>
+  );
+};
+
+// Create a hook to consume the context easily
+export const useMessage = () => useContext(MessageContext);
diff --git a/dashboard/src/nav/Footer.css b/dashboard/src/nav/Footer.css
@@ -8,6 +8,8 @@
   z-index: 10;
   bottom: 0; /* Will always remain at the bottom with flex layout */
   width: 100%; /* Ensure the footer spans the full width of the screen */
+  box-shadow: 4px 0 10px rgba(0,0,0,0.5);
+
 }
 
 .footer-content img {

diff --git a/dashboard/src/nav/Navbar.css b/dashboard/src/nav/Navbar.css
@@ -10,6 +10,8 @@
     background-color: #0a4777;
     color: white;
     height: 60px;
+    box-shadow: 4px 0 10px rgba(0,0,0,0.5);
+
 }
 
 .navbar-toggler {
@@ -128,7 +130,8 @@
 }
 
 .sidebar-right {
-  position: fixed;
+  position: absolute;
+  overflow-x: none;
   top: 0;
   height: 100%;
   width: 300px;

diff --git a/dashboard/src/utils/apiCalls.jsx b/dashboard/src/utils/apiCalls.jsx
@@ -0,0 +1,48 @@
+export const fitGcps = async (api, widgets, setWidgets, setMessageInfo) => {
+
+  // temporary test function;
+  const updateWidgets = () => {
+    setWidgets((prevWidgets) =>
+      prevWidgets.map((widget) => ({
+        ...widget,
+        fit: {"row": 1075, "col": 1915},
+      }))
+    );
+  };
+  try {
+    // Checks!
+    if (widgets.length < 0) {
+      const msg = `Too few GCPs (${widgets.length} / 6)`
+      setMessageInfo('error', msg);
+//      throw new Error(msg);
+    }
+
+    // Extract coordinates into separated lists
+    const src = widgets.map(({ coordinates }) => [
+      parseFloat(coordinates.x) || 0,
+      parseFloat(coordinates.y) || 0,
+      coordinates.z === '' || isNaN(Number(coordinates.z)) ? NaN : parseFloat(coordinates.z)
+    ]);
+
+    const dst = widgets.map(({ coordinates }) => [
+      parseFloat(coordinates.row, 10) || 0,
+      parseFloat(coordinates.col, 10) || 0,
+    ]);
+
+    const payload = {
+      "src": src,
+      "dst": dst,
+    };
+
+    console.log('Sending payload:', payload);
+    updateWidgets();
+    console.log(widgets);
+//    // Send data to API endpoint
+//    const response = await api.post('https://api.example.com/endpoint', payload);
+//    console.log('API Response:', response.data);
+
+  } catch (error) {
+    console.error('Failed to send coordinates:', error);
+    // Optionally, handle errors (e.g., display an error message)
+  }
+};
diff --git a/dashboard/src/utils/helpers.jsx b/dashboard/src/utils/helpers.jsx
diff --git a/dashboard/src/utils/leafletUtils.js b/dashboard/src/utils/leafletUtils.js
@@ -0,0 +1,25 @@
+import L from "leaflet"; // Import Leaflet for DivIcon
+
+// Function to create a custom DivIcon with dynamic RGBA colors
+export const createCustomMarker = (color) => {
+
+  return L.divIcon({
+    className: "custom-marker", // Base class (can use CSS for additional styles)
+    html: `<div style="
+      background-color: ${color};
+      width: 1.5rem;
+      height: 1.5rem;
+      left: -0.75rem;
+      top: -0.75rem;
+      transform: rotate(45deg);
+      border-radius: 1.5rem 1.5rem 0;
+      alignItems: center;
+      justify-content: center;
+      border: 1px solid rgba(0, 0, 0, 0.5);
+      color: white
+    "><div style='transform: rotate(-45deg)'>1</div></div>`,
+    iconSize: [30, 30], // Marker size
+    iconAnchor: [15, 15], // Position the icon properly
+    popupAnchor: [0, -20], // Adjust popup anchor relative to marker
+  });
+};
diff --git a/dashboard/src/views/calibration.css b/dashboard/src/views/calibration.css
@@ -55,6 +55,7 @@
 } */
 
 .tab-content {
+  display: flex;
   margin-top: 0px;
   margin-bottom: 0px;
   position: relative;
@@ -70,4 +71,5 @@
   height: auto;
   cursor: crosshair;
   pointer-events: auto !important;  // necessary to ensure that styling and click events are picked up within a transform view
+  touch-action: manipulation;
 }