added first stab video clicker for control points #2

dashboard/README.md

@@ -19,6 +19,7 @@ npm install axios  # for API connection
 npm install react-router-dom  # for organizing the router
 npm install dotenv  # for setting environment variables
 npm install react-icons
+npm install react-zoom-pan-pinch
 
 # Start dev server, ensuring the API url is added as environment variable
 VITE_API_BASE_URL="http://<name-of-server>:<port-of-server>" npm run dev

dashboard/package.json

@@ -11,12 +11,19 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
     "axios": "^1.7.9",
     "dotenv": "^16.4.7",
+    "leaflet": "^1.9.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",
+    "react-leaflet": "^4.2.1",
     "react-router-dom": "^7.1.1",
+    "react-xtermjs": "^1.0.9",
+    "react-zoom-pan-pinch": "^3.6.1",
+    "shpjs": "^6.1.0",
     "webpack-dev-server": "^5.2.0"
   },
   "devDependencies": {

dashboard/src/App.css

@@ -15,6 +15,24 @@
   overflow-y: auto; /* scrollable with overflowing content */
   padding: 1rem; /* Optional: Add some padding */
 }
+.btn {
+  background-color: #0a4777;
+  border-color: #0a4777;
+  color: #fff;
+  marginBottom: 10px;
+}
+/* Close Button for menus and widgets */
+.close-button {
+    align-self: flex-end;
+    font-size: 24px;
+    font-weight: bold;
+    color: white;
+    background: none;
+    border: none;
+    cursor: pointer;
+    margin-bottom: 20px;
+}
+
 
 
 .logo {

dashboard/src/App.jsx

@@ -10,6 +10,7 @@ import Device from './views/device';
 import DiskManagement from './views/diskManagement'
 import WaterLevel from './views/waterLevel'
 import CameraAim from './views/cameraAim'
+import Calibration from './views/calibration'
 import api from './api'
 
 const App = () => {
@@ -27,6 +28,8 @@ const App = () => {
                     <Route path="/disk_management" element={<DiskManagement />} />
                     <Route path="/water_level" element={<WaterLevel />} />
                     <Route path="/camera_aim" element={<CameraAim />} />
+                    <Route path="/calibration" element={<Calibration />} />
+
                 </Routes>
                 </div>
                 <Footer />

dashboard/src/nav/Footer.css

@@ -1,5 +1,5 @@
 .footer {
-  background-color: #2c3e50; /* Consistent color */
+  background-color: #0a4777; /* Consistent color */
   color: white;
   text-align: center;
   padding: 1rem;

dashboard/src/nav/Footer.jsx

@@ -2,7 +2,7 @@ import './Footer.css'
 
 const Footer = () => {
     return (
-      <footer className="footer bg-primary">
+      <footer className="footer">
         <div className="footer-content">
           <img src="./public/orc_favicon.svg" alt="ORC Logo" width="20" className="footer-logo"/>
             {' '}