Skip to content

Commit

Permalink
trying to add app.js to index.html as script
Browse files Browse the repository at this point in the history
  • Loading branch information
@Amit-Sucher
Amit-Sucher committed May 20, 2024
1 parent 8a375ca commit 566c0f5
Show file tree
Hide file tree
Showing 2 changed files with 275 additions and 163 deletions.
184 changes: 148 additions & 36 deletions public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,155 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
</head>
<body>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
<script src="https://unpkg.com/react/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
import React, { useState, useEffect } from 'react';
import QRCode from 'qrcode.react';

You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
function App() {
const [formData, setFormData] = useState({ Name: '', Team: '', Alliance: '', TeleNotes: '', checkboxes: Array(9).fill(false) });
const [barcodeData, setBarcodeData] = useState('');

To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
useEffect(() => {
const generateBarcode = () => {
return JSON.stringify(formData);
};

setBarcodeData(generateBarcode());
}, [formData]);

const handleInputChange = (event) => {
const { name, value } = event.target;
setFormData({ ...formData, [name]: value });
};

const handleCheckboxChange = (index) => {
const newCheckboxes = [...formData.checkboxes];
newCheckboxes[index] = !newCheckboxes[index];
setFormData({ ...formData, checkboxes: newCheckboxes });
};

const removeUnwantedCharacters = (value) => {
// Replace removes specific characters globally
return value.replace(/[\{\}\[\]]/g, '');
};

const sendDataToSheet = (value) => {
value = removeUnwantedCharacters(value);
fetch('https://script.google.com/macros/s/AKfycbzxJmqZyvvPHM01FOFTnlGtUFxoslmNOJTUT0QccjLQsK5uQAHHhe_HfYFO2BxyK7Y_/exec', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
mode: 'no-cors',
body: JSON.stringify({ value: value })
})
.then(response => response.json())
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));
};

const handleSubmit = (event) => {
event.preventDefault();
sendDataToSheet(JSON.stringify(formData));
};

return (
<div>
<h1>Scouting 2024:</h1>
<br/>
<form onSubmit={handleSubmit}>
<label htmlFor="Sname">Name of the Scouter:</label><br/>
<input type="text" id="Sname" name="Name" value={formData.Name} onChange={handleInputChange}/><br/>
<br/>
<label htmlFor="Team">Team number of the Scouter:</label><br/>
<input type="number" id="Team" name="Team" value={formData.Team} onChange={handleInputChange}/><br/>
<br/>
<label htmlFor="TeleNotes">Teleop Notes:</label><br/>
<input type="number" id="TeleNotes" name="TeleNotes" value={formData.TeleNotes} onChange={handleInputChange}/><br/>
<br/>
<label htmlFor="Alliance">Alliance:</label><br/>
<input type="text" id="Alliance" name="Alliance" value={formData.Alliance} onChange={handleInputChange}/>
<br/>
<br/>
<button type="submit">Submit</button>
</form>
<br/>
<h3>Map for autonomous:</h3>
<Field formData={formData} handleCheckboxChange={handleCheckboxChange}/>
<br/>
<h3>If you're offline:</h3>
<div style={{textAlign: 'center'}}>
<QRCode value={barcodeData} size={150}/>
</div>
</div>
);
}

function Field({ formData, handleCheckboxChange }) {
return (
<div style={{ position: 'relative' }}>
<img
src="https://www.chiefdelphi.com/uploads/default/original/3X/a/a/aa745548020a507cf4a07051dcd0faa446607840.png"
alt="Field Image" className="center"/>
{formData.checkboxes.map((checked, index) => (
<div key={index} style={{ position: 'absolute', top: `${getFieldTop(index)}%`, left: `${getFieldLeft(index)}%` }}>
<input type="checkbox" checked={checked} onChange={() => handleCheckboxChange(index)} />
</div>
))}
</div>
);
}

function getFieldTop(index) {
switch (index) {
case 0:
return 19.1;
case 1:
return 34.1;
case 2:
return 49;
case 3:
return 13.5;
case 4:
return 30.9;
case 5:
return 48.2;
case 6:
return 65.5;
case 7:
return 82.6;
case 8:
return 30.9;
default:
return 0;
}
}

function getFieldLeft(index) {
switch (index) {
case 0:
case 1:
case 2: return 69.26;
case 3:
case 4:
case 5:
case 6:
case 7:
case 8: return 46.8;
default: return 0;
}
}

ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
Loading

0 comments on commit 566c0f5

Please sign in to comment.