Add ScoutNav.css and ScoutNav.jsx

ExcaliburFRC · Jul 18, 2024 · 83bd937 · 83bd937
1 parent d781b7b
commit 83bd937
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 16 deletions.
diff --git a/src/App.js b/src/App.js
@@ -2,6 +2,8 @@ import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Scouting from './Pages/Scouting/Scouting.jsx';
 import Login from './Pages/Login/Login.jsx';
+import ScoutNav from './Pages/Nav/ScoutNav.jsx';
+
 
 
 function App() {
@@ -10,6 +12,8 @@ function App() {
             <Routes>
                 <Route path="/Scouting" element={<Scouting />} />
                 <Route path="/Login" element={<Login />} />
+                <Route path="/Scouting/ScoutNav" element={<ScoutNav />} />
+
             </Routes>
         </Router>
     );

diff --git a/src/Pages/Nav/ScoutNav.css b/src/Pages/Nav/ScoutNav.css
@@ -0,0 +1,47 @@
+body {
+    font-family: "Assistant SemiBold", serif;
+}
+
+label, h3 {
+    font-family: "Copperplate Gothic Light", serif;
+    color: #d4af37;
+}
+
+BUtton {
+    font-size: 24px;
+    width: 80%;
+    height: 100px;
+    background: url('https://www.firstinspires.org/sites/default/files/uploads/hero_headers/header-image_1.jpg');
+    background-size: cover;
+    background-position: center;
+    color: white;
+    font-size: 1.5em;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+
+.button-container {
+    max-width: 780px;
+    width: 100%;
+    margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    padding: 0 10px;
+}
+
+.resizable-button {
+    width: 30%;
+    max-width: 250px;
+    height: auto;
+    font-size: larger;
+    margin: 10px;
+    box-sizing: border-box;
+}
+
+.Autonomus {
+    width: 80px;
+    height: 40px;
+}
diff --git a/src/Pages/Nav/ScoutNav.jsx b/src/Pages/Nav/ScoutNav.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import Navbar from "../Navbar/Navbar.jsx";
+import "./ScoutNav.css"
+
+function ScoutNav() {
+    return (
+        <div>
+            <Navbar />
+            <br/>
+            {LoginForm()}
+        </div>
+    );
+}
+
+function LoginForm() {
+    return (
+        <div>
+            <h2>Select your Scouting Type:</h2>
+
+            <br/>
+            <button style={{ background: 'url(https://www.firstinspires.org/sites/default/files/uploads/hero_headers/header-image_1.jpg)' }}>
+                Regular Scouting
+            </button>
+        </div>
+    );
+}
+
+export default ScoutNav;
diff --git a/src/Pages/Navbar/Navbar.jsx b/src/Pages/Navbar/Navbar.jsx
@@ -6,14 +6,18 @@ function Navbar() {
         window.location.href = '/Scouting';
     };
 
+    const handleClickScoutNav = () => {
+        window.location.href = '/Scouting/ScoutNav';
+    };
+
     const handleClickLogin = () => {
         window.location.href = '/Login';
     };
 
     return (
         <div className="navbar">
             <a href="/">Home</a>
-            <a onClick={handleClickScout}>Scout</a>
+            <a onClick={handleClickScoutNav}>Scout</a>
             <a onClick={handleClickLogin}>Login</a>
             <a href="#Simbucks">Simbucks</a>
         </div>

diff --git a/src/Pages/Scouting/Game/Teleop.jsx b/src/Pages/Scouting/Game/Teleop.jsx
@@ -10,11 +10,7 @@ function TeleField({ formData, setFormData }) {
 
     useEffect(() => {
         const generateBarcode = () => {
-            const telePointsCSV = Papa.unparse(pointPositions.map(point => ({
-                x: point.x.toFixed(2),
-                y: point.y.toFixed(2),
-                color: point.color === 1 ? 'G' : 'O'
-            })));
+            const telePointsCSV = pointPositions.map(point => `${point.x.toFixed(2)}[${point.y.toFixed(2)}]`).join(',');
             const barcodeString = `${formData.Name},${formData.Alliance},${formData.Team},${telePointsCSV}`;
             return barcodeString;
         };
@@ -49,14 +45,11 @@ function TeleField({ formData, setFormData }) {
     };
 
     const exportCSV = () => {
-        const csvData = Papa.unparse(pointPositions.map(point => ({
-            x: point.x.toFixed(2),
-            y: point.y.toFixed(2),
-            color: point.color === 1 ? 'green' : 'orange'
-        })));
+        const csvData = pointPositions.map(point => `(${point.x.toFixed(2)},${point.y.toFixed(2)},${point.color === 1 ? 'O' : 'G'})`).join(' ');
         return csvData;
     };
 
+
     return (
         <div style={{ position: 'relative', width: '100%', maxWidth: '1000px', margin: '0 auto' }}>
             <img

diff --git a/src/Pages/Scouting/Scouting.jsx b/src/Pages/Scouting/Scouting.jsx
@@ -18,11 +18,7 @@ function ScoutingForm() {
 
     useEffect(() => {
         const generateBarcode = () => {
-            const telePointsCSV = Papa.unparse(formData.TelePoints.map(point => ({
-                x: point.x.toFixed(2),
-                y: point.y.toFixed(2),
-                color: point.color === 1 ? 'G' : 'O'
-            })));
+            const telePointsCSV = formData.TelePoints.map(point => `(${point.x.toFixed(2)},${point.y.toFixed(2)},${point.color === 1 ? 'O' : 'G'})`).join(' ');
             const barcodeString = `${formData.Name},${formData.Alliance},${formData.Team},${telePointsCSV}`;
             return barcodeString;
         };
@@ -112,6 +108,7 @@ function ScoutingForm() {
             <button type="submit" onClick={handleSubmit}>Submit</button>
             <h3>If there is no Wifi:</h3>
             <QRCodeSection barcodeData={barcodeData} />
+            <br/>
         </div>
     );
 }