With working QR

ExcaliburFRC · Jul 15, 2024 · d781b7b · d781b7b
1 parent db84493
commit d781b7b
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 29 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "history": "^5.3.0",
     "jsbarcode": "^3.11.6",
     "next": "^14.2.3",
+    "papaparse": "^5.4.1",
     "qrcode.react": "^3.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

diff --git a/src/Pages/Scouting/Game/Teleop.jsx b/src/Pages/Scouting/Game/Teleop.jsx
@@ -1,29 +1,60 @@
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
+import Papa from "papaparse";
+
+function TeleField({ formData, setFormData }) {
+    const [dotColor, setDotColor] = useState(1);
+    const [pointPositions, setPointPositions] = useState([]);
+    const [barcodeData, setBarcodeData] = useState('');
 
-function TeleField({ handleCheckboxChange }) {
-    const [dotColor, setDotColor] = useState('green');
-    const [dotPositions, setDotPositions] = useState([]);
     const imageRef = useRef(null);
 
+    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 barcodeString = `${formData.Name},${formData.Alliance},${formData.Team},${telePointsCSV}`;
+            return barcodeString;
+        };
+
+        setBarcodeData(generateBarcode());
+    }, [formData, pointPositions]);
+
     const handleImageClick = (event) => {
         const imageElement = imageRef.current;
         if (!imageElement) return;
 
         const rect = imageElement.getBoundingClientRect();
-        const x = (event.clientX - rect.left) / rect.width * 100;
-        const y = (event.clientY - rect.top) / rect.height * 100;
+        const x = parseFloat(((event.clientX - rect.left) / rect.width * 100).toFixed(2));
+        const y = parseFloat(((event.clientY - rect.top) / rect.height * 100).toFixed(2));
 
-        const position = {
+        const newPoint = {
             x,
             y,
             color: dotColor,
         };
 
-        setDotPositions([...dotPositions, position]);
+        setPointPositions([...pointPositions, newPoint]);
+
+        setFormData(prevState => ({
+            ...prevState,
+            TelePoints: [...prevState.TelePoints, newPoint]
+        }));
     };
 
     const toggleDotColor = () => {
-        setDotColor(dotColor === 'green' ? 'orange' : 'green');
+        setDotColor(dotColor === 1 ? 2 : 1);
+    };
+
+    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'
+        })));
+        return csvData;
     };
 
     return (
@@ -36,13 +67,13 @@ function TeleField({ handleCheckboxChange }) {
                 onClick={handleImageClick}
             />
 
-            {dotPositions.map((position, index) => (
+            {pointPositions.map((point, index) => (
                 <div
                     key={index}
                     style={{
                         position: 'absolute',
-                        left: `${position.x}%`,
-                        top: `${position.y}%`,
+                        left: `${point.x}%`,
+                        top: `${point.y}%`,
                         transform: 'translate(-50%, -50%)',
                     }}
                 >
@@ -51,7 +82,9 @@ function TeleField({ handleCheckboxChange }) {
                             width: '10px',
                             height: '10px',
                             borderRadius: '50%',
-                            backgroundColor: position.color,
+                            backgroundColor: point.color === 1 ? 'green' : 'orange',
+                            position: 'absolute',
+                            transform: 'translate(-50%, -50%)',
                         }}
                     />
                 </div>
@@ -60,6 +93,14 @@ function TeleField({ handleCheckboxChange }) {
             <button onClick={toggleDotColor} style={{ position: 'absolute', top: '10px', left: '10px', zIndex: '10' }}>
                 Change Mode
             </button>
+
+            <button onClick={() => {
+                const csvData = exportCSV();
+                console.log(csvData);
+            }} style={{ position: 'absolute', top: '50px', left: '10px', zIndex: '10' }}>
+                Export CSV
+            </button>
+
         </div>
     );
 }

diff --git a/src/Pages/Scouting/Scouting.jsx b/src/Pages/Scouting/Scouting.jsx
@@ -3,18 +3,31 @@ import QRCode from "qrcode.react";
 import "./Scouting.css";
 import Navbar from "../Navbar/Navbar";
 import TeleField from "./Game/Teleop";
-import AutoField from "./Game/Autonomus";
+import Papa from "papaparse";
 
 function ScoutingForm() {
-    const [formData, setFormData] = useState({ Name: '', Team: '', Alliance: '', TeleNotes: '', checkboxes: Array(9).fill(false) });
+    const [formData, setFormData] = useState({
+        Name: '',
+        Team: '',
+        Alliance: '',
+        TeleNotes: '',
+        checkboxes: Array(9).fill(false),
+        TelePoints: []
+    });
     const [barcodeData, setBarcodeData] = useState('');
-    const [activeField, setActiveField] = useState(null);
 
     useEffect(() => {
         const generateBarcode = () => {
-            return JSON.stringify(formData);
+            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 barcodeString = `${formData.Name},${formData.Alliance},${formData.Team},${telePointsCSV}`;
+            return barcodeString;
         };
 
+
         setBarcodeData(generateBarcode());
     }, [formData]);
 
@@ -36,7 +49,7 @@ function ScoutingForm() {
 
     const sendDataToSheet = (value) => {
         value = removeUnwantedCharacters(value);
-        fetch('https://script.google.com/macros/s/AKfycbzxJmqZyvvPHM01FOFTnlGtUFxoslmNOJTUT0QccjLQsK5uQAHHhe_HfYFO2BxyK7Y_/exec', {
+        fetch('httpsscript.google.com/macros/s/AKfycbzxJmqZyvvPHM01FOFTnlGtUFxoslmNOJTUT0QccjLQsK5uQAHHhe_HfYFO2BxyK7Y_/exec', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
@@ -54,16 +67,14 @@ function ScoutingForm() {
     };
 
     const handleAutoClick = () => {
-        setActiveField('auto');
     };
 
     const handleTeleopClick = () => {
-        setActiveField('teleop');
     };
 
     return (
         <div>
-            <Navbar></Navbar>
+            <Navbar />
             <br />
 
             <form onSubmit={handleSubmit}>
@@ -76,8 +87,7 @@ function ScoutingForm() {
                 <br />
 
                 <label htmlFor="Alliance">Alliance:</label><br />
-                <input type="text" id="Alliance" name="Alliance" value={formData.Alliance}
-                       onChange={handleInputChange} />
+                <input type="text" id="Alliance" name="Alliance" value={formData.Alliance} onChange={handleInputChange} />
                 <br />
             </form>
 
@@ -88,19 +98,18 @@ function ScoutingForm() {
             <h3>Map for scouting:</h3>
 
             <div className="button-container">
-                <button type="button" className="resizable-button" >Endgame</button>
+                <button type="button" className="resizable-button">Endgame</button>
                 <button type="button" className="resizable-button" onClick={handleTeleopClick}>Teleop</button>
                 <button type="button" className="resizable-button" onClick={handleAutoClick}>Autonomus</button>
             </div>
 
-            <br/>
+            <br />
 
-            {activeField === 'teleop' && <TeleField formData={formData} handleCheckboxChange={handleCheckboxChange} />}
-            {activeField === 'auto' && <AutoField formData={formData} handleCheckboxChange={handleCheckboxChange} />}
+            <TeleField formData={formData} setFormData={setFormData} />
 
             <br />
 
-            <button type="submit">Submit</button>
+            <button type="submit" onClick={handleSubmit}>Submit</button>
             <h3>If there is no Wifi:</h3>
             <QRCodeSection barcodeData={barcodeData} />
         </div>
@@ -111,7 +120,6 @@ function QRCodeSection({ barcodeData }) {
     return (
         <div style={{ textAlign: 'center' }}>
             <QRCode value={barcodeData} size={150} />
-            <br />
         </div>
     );
 }