added subteams: started content for teams page

This commit is contained in:
darkicewolf50 2024-03-20 22:41:23 -06:00
parent 46676cc432
commit b69f2f2b38
3 changed files with 166 additions and 45 deletions

28
src/MockDB/Leadership.yml Normal file
View File

@ -0,0 +1,28 @@
Chassis:
url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
shortDescription: Chassis Description (1 line)
longDescription: Chassis Description
Drivetrain:
url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
shortDescription: Drivetrain Description (1 line)
longDescription: Drivetrain Description
Steering:
url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
shortDescription: Steering Description (1 line)
longDescription: Steering Description
Suspension:
url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
shortDescription: Suspension Description (1 line)
longDescription: Suspension Description
Electrical:
url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
shortDescription: Electrical Description (1 line)
longDescription: Electrical Description
Logistics:
url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
shortDescription: Logistics Description (1 line)
longDescription: Logistics Description
Software:
url: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
shortDescription: Software Description (1 line)
longDescription: Software Description

View File

@ -1,9 +0,0 @@
{
"Team Captain": "Aidan Schroeder",
"Nole Tabelon": "Chassis Lead",
"Hewitt Yee": "Drivetrain Lead",
"Alex Buzdugan": "Electrical Lead",
"Brock Tomlinson": "Business and Softawre Lead",
"Ghaith Abu-Rub": "Suspension Lead",
"Anjali Patadia": "Steering Lead"
}

View File

@ -1,41 +1,143 @@
import "./SubTeams.css";
import { useState, useEffect } from "react";
import yaml from "js-yaml";
import leadershipData from "../MockDB/Leadership.yml";
const SubTeams = () => { const SubTeams = () => {
// const jsonImport = (filePath) => { const [subteamsDict, setSubteamsDict] = useState();
// data = import(filePath); const [subteamsArray, setSubteamsArray] = useState();
// return data;
// }; useEffect(() => {
// leadership_json = jsonImport("./Leadership.json"); getLeadership();
// console.log(leadership_json); }, []);
/**
* @param {null} null - requires nothing (link)
* @returns {Object} sponsorsDict - gets a Dictionary of our sponsors from synology drive
* @description Gets the list of sponsors from the synology drive (not implemented), converts the json file into a dictionary
* @author Brock <darkicewolf50@gmail.com>
* @todo add gPRC to backend and front end add connect to synology drive
*/
const getLeadership = async () => {
try {
const res = await fetch(leadershipData);
const rawText = await res.text();
const yamlDict = await yaml.load(rawText);
setSubteamsDict(yamlDict);
setSubteamsArray(Object.values(yamlDict));
} catch (error) {
//error checking
console.error("Error recieving data from server:");
}
};
console.log(subteamsDict);
return ( return (
<div> <div id="Subteams">
<iframe <h2>Get to Know Our Subteams</h2>
src="https://docs.google.com/forms/d/e/1FAIpQLSfFquL6lMCBCMJelV-931J3bH6vC9zCCmVzBj_K68xVaT0pgg/viewform?embedded=true" {subteamsDict === undefined && subteamsArray === undefined ? (
width="640" <p>Loading...</p>
height="1570" ) : (
frameborder="0" <>
marginheight="0" <table>
marginwidth="0"> <tbody>
Loading {/* this really sucks it needs to be changed */}
</iframe> <tr>
<div> {/* row 1 */}
<h2>Leadership</h2> <td>
<p>gallery</p> <img
</div> src={subteamsArray[0].url}
<table> alt={subteamsArray[0] + "'s Icon"}
<tbody> />
<tr> </td>
<td>Aidan Schroeder</td> {/* row 2 */}
<td>Team Captain</td> <td>
</tr> <img
<tr> src={subteamsArray[1].url}
<td>Hewitt Yee</td> alt={subteamsArray[1] + "'s Icon"}
<td>Drivetrain Lead</td> />
</tr> </td>
<tr> {/* row 3 */}
<td>Nole Tabelon</td> <td>
<td>Chassis Lead</td> <img
</tr> src={subteamsArray[2].url}
</tbody> alt={subteamsArray[2] + "'s Icon"}
</table> />
</td>
{/* row 4 */}
<td>
<img
src={subteamsArray[3].url}
alt={subteamsArray[3] + "'s Icon"}
/>
</td>
{/* row 5 */}
<td>
<img
src={subteamsArray[4].url}
alt={subteamsArray[4] + "'s Icon"}
/>
</td>
{/* row 6 */}
<td>
<img
src={subteamsArray[5].url}
alt={subteamsArray[5] + "'s Icon"}
/>
</td>
{/* row 7 */}
<td>
<img
src={subteamsArray[6].url}
alt={subteamsArray[6] + "'s Icon"}
/>
</td>
</tr>
<tr>
{/* row 1 */}
<td>
<p>{subteamsArray[0].shortDescription}</p>
</td>
{/* row 2 */}
<td>
<p>{subteamsArray[1].shortDescription}</p>
</td>
{/* row 3 */}
<td>
<p>{subteamsArray[2].shortDescription}</p>
</td>
{/* row 4 */}
<td>
<p>{subteamsArray[3].shortDescription}</p>
</td>
{/* row 5 */}
<td>
<p>{subteamsArray[4].shortDescription}</p>
</td>
{/* row 6 */}
<td>
<p>{subteamsArray[5].shortDescription}</p>
</td>
{/* row 7 */}
<td>
<p>{subteamsArray[6].shortDescription}</p>
</td>
</tr>
</tbody>
</table>
<div>
{Object.keys(subteamsDict).map((subteamName, index) => {
const subteam = subteamsDict[subteamName];
const className = index % 2 === 0 ? "SubteamsEnd" : "";
return (
<div>
<h2 className={className}>{subteamName}</h2>
<p>{subteam.longDescription}</p>
</div>
);
})}
</div>
</>
)}
</div> </div>
); );
}; };