mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-06-16 05:44:17 -06:00
Merge branch 'dev' into header
This commit is contained in:
darkicewolf50
GitHub
commit
10f63f8d71
@ -2,19 +2,28 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
<link
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
rel="icon"
|
||||||
<meta name="theme-color" content="#000000" />
|
href="./logo.ico" />
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1" />
|
||||||
|
<meta
|
||||||
|
name="theme-color"
|
||||||
|
content="#000000" />
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="Web site created using create-react-app"
|
content="Web site created using create-react-app" />
|
||||||
/>
|
<link
|
||||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
rel="apple-touch-icon"
|
||||||
|
href="%PUBLIC_URL%/logo192.png" />
|
||||||
<!--
|
<!--
|
||||||
manifest.json provides metadata used when your web app is installed on a
|
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/
|
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||||
-->
|
-->
|
||||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
<link
|
||||||
|
rel="manifest"
|
||||||
|
href="%PUBLIC_URL%/manifest.json" />
|
||||||
<!--
|
<!--
|
||||||
Notice the use of %PUBLIC_URL% in the tags above.
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
It will be replaced with the URL of the `public` folder during the build.
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
@ -24,7 +33,7 @@
|
|||||||
work correctly both with client-side routing and a non-root public URL.
|
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`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
<title>React App</title>
|
<title>Schulich Off-Road</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
|||||||
BIN
public/logo.ico
Normal file
BIN
public/logo.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
@ -1,3 +0,0 @@
|
|||||||
#BecomeASponsor div {
|
|
||||||
background-color: green;
|
|
||||||
}
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
import "./BecomeASponsor.css";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {null} null - requires onthing
|
|
||||||
* @returns {JSX.Element} JSX - HTML tags and JS functionality
|
|
||||||
* @description Our Sponsors Page
|
|
||||||
* @author Brock <darkicewolf50@gmail.com>
|
|
||||||
* @todo Make and Finish the Page
|
|
||||||
*/
|
|
||||||
const BecomeASponsor = () => {
|
|
||||||
return (
|
|
||||||
<div id="BecomeASponsor">
|
|
||||||
<div>
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed
|
|
||||||
justo eget orci sagittis sollicitudin eu eget augue. Phasellus lacus
|
|
||||||
turpis, interdum vitae nibh a, tristique ultricies erat. Integer et
|
|
||||||
sapien congue, facilisis massa id, molestie magna. Maecenas augue
|
|
||||||
nisi, ullamcorper sit amet suscipit non, sodales nec tortor. Aenean
|
|
||||||
imperdiet sit amet velit a lacinia. Vestibulum vel consequat mauris.
|
|
||||||
Proin suscipit lectus id erat malesuada fermentum. Quisque ac dui
|
|
||||||
malesuada, accumsan magna quis, convallis ex. Nulla feugiat fermentum
|
|
||||||
maximus. Pellentesque rutrum malesuada metus ut accumsan. Nullam
|
|
||||||
semper, eros in tempor mollis, lorem magna auctor turpis, a ornare
|
|
||||||
diam metus sit amet odio. Sed aliquam nulla eu dolor commodo
|
|
||||||
efficitur.
|
|
||||||
</p>
|
|
||||||
<img
|
|
||||||
src="https://static.wixstatic.com/media/5824fc_0d66c0d79eae4882ba76d503d0752012~mv2.jpg/v1/crop/x_0,y_531,w_3120,h_2342/fill/w_752,h_564,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/IMG_20230429_164752611.jpg"
|
|
||||||
alt="Student Driving the Green (2019 Car)"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<img
|
|
||||||
src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1708797415/Screenshot_from_2024-02-24_10-52-24_nsn9uv.png"
|
|
||||||
alt="Sponsorship Package with Benefits"
|
|
||||||
/>
|
|
||||||
<p>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
|
|
||||||
laoreet nulla eget posuere suscipit. Curabitur vitae porta velit. Nunc
|
|
||||||
blandit ut erat sed maximus. Orci varius natoque penatibus et magnis
|
|
||||||
dis parturient montes, nascetur ridiculus mus. Donec at laoreet nisi.
|
|
||||||
Ut tempor nunc tellus, quis mollis sapien ultricies ut. Fusce gravida
|
|
||||||
varius ligula, venenatis fringilla velit fringilla quis. Sed
|
|
||||||
condimentum sapien libero, vel pharetra purus ultricies nec. Etiam a
|
|
||||||
vulputate tellus. Quisque eget purus in orci accumsan tincidunt ac ut
|
|
||||||
nisl. Pellentesque tincidunt porta purus, quis congue nibh tempus
|
|
||||||
eget. Sed diam sapien, dictum ut mattis sit amet, faucibus at enim.{" "}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default BecomeASponsor;
|
|
||||||
33
src/Footer/Ender.css
Normal file
33
src/Footer/Ender.css
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
#ender {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
justify-content: center;
|
||||||
|
background-color: lightgrey;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pointerCursor {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ender div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
#ender p {
|
||||||
|
padding-left: 2%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ender .hidden {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#ender .hidden li {
|
||||||
|
list-style-type: none;
|
||||||
|
padding-right: 2%;
|
||||||
|
}
|
||||||
28
src/Footer/Ender.js
Normal file
28
src/Footer/Ender.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import "./Ender.css";
|
||||||
|
/**
|
||||||
|
* @param {null} null - requires onthing
|
||||||
|
* @returns {JSX.Element} Page - HTML tags and JS functionality
|
||||||
|
* @description The Footer of the page
|
||||||
|
* @author Brock <darkicewolf50@gmail.com>
|
||||||
|
* @todo add who helped developed the site and finalize css
|
||||||
|
*/
|
||||||
|
const Ender = () => {
|
||||||
|
return (
|
||||||
|
<footer id="ender">
|
||||||
|
<div>
|
||||||
|
<p>© 2023 by Schulich Off-Road </p>
|
||||||
|
<p
|
||||||
|
onClick={() => window.open("https://www.morphgenix.com/", "_blank")}
|
||||||
|
id="pointerCursor">
|
||||||
|
Partnered with Morphgenix
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<ul className="hidden">
|
||||||
|
<li>Developed by:</li>
|
||||||
|
<li>Brock</li>
|
||||||
|
</ul>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Ender;
|
||||||
@ -16,6 +16,10 @@ figure {
|
|||||||
height: 10%;
|
height: 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
header figure {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
#logo {
|
#logo {
|
||||||
height: 5rem;
|
height: 5rem;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
import logo from "./logo.png";
|
import logo from "./logo.webp";
|
||||||
import lightDark from "./light-dark.webp";
|
import lightDark from "./light-dark.webp";
|
||||||
import { Outlet, Link } from "react-router-dom";
|
import { Outlet, Link, Outlet } from "react-router-dom";
|
||||||
import "./Header.css";
|
import "./Header.css";
|
||||||
|
import Ender from "../Footer/Ender";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {null} null - Takes in nothing
|
* @param {null} null - Takes in nothing
|
||||||
@ -113,6 +114,7 @@ const Header = () => {
|
|||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<Outlet />
|
<Outlet />
|
||||||
|
<Ender />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
#navigateButton {
|
#navigateButton {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
src/Header/logo.webp
Normal file
BIN
src/Header/logo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
35
src/MockDB/SubTeams.yml
Normal file
35
src/MockDB/SubTeams.yml
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
Chassis and Ergonomics:
|
||||||
|
iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||||
|
shortDescription: The chassis and ergo team builds the Main Chassis of the Car and builds the components for the driver to sit in
|
||||||
|
longDescription: Step into the world of the Chassis and Ergonomics Team, where comfort meets performance in every curve and contour. With an eye for detail and a passion for perfection, they sculpt the backbone of our vehicle, ensuring it's not just built to last, but to excel. From optimizing seating positions to fine-tuning weight distribution, they're the architects of a ride that feels as good as it looks. Join us as we push the boundaries of design and functionality, driven by the ingenuity of our Chassis and Ergonomics Team.
|
||||||
|
subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||||
|
Drivetrain:
|
||||||
|
iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||||
|
shortDescription: The drivetrain team connects the engine to the wheels
|
||||||
|
longDescription: The drivetrain subteam plays a pivotal role in ensuring efficient power transfer from the engine to the wheels, overseeing key components such as gearboxes, axles, and driveshafts. Through hands-on learning and mentorship, members develop a comprehensive skill set in CAD, FEA, CAM, and machining, empowering them to design, analyze, and manufacture critical vehicle components with a focus on innovation and practical applications.
|
||||||
|
subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||||
|
Steering:
|
||||||
|
iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||||
|
shortDescription: The steering team builds the componets that allow the driver to control the car
|
||||||
|
longDescription: In the steering subteam, we design and develop the steering behaviors of the car. This includes the turning radius, the ratio between the seeing pinion and rack, and implementing Ackerman geometry. every year we use a wide variety of machining techniques and software to bring our designs to life, ranging from FEA analysis to professional CNC machining. Our goal is to develop the most compact and lightweight system to achieve the optimal driving dynamics.
|
||||||
|
subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||||
|
Suspension:
|
||||||
|
iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||||
|
shortDescription: The suspension team makes it so that the car is able to handle all of the bumps and jumps
|
||||||
|
longDescription: The suspension subteam manages the vehicle's manoeuvrability and handling capabilities. As an offroad buggy, suspension setups must endure all terrain types, including rough rocks and fast jumps. Beyond their endurance capabilities, the vehicle’s handling characteristics are determined through rigorous development of the suspension geometry in simulation software and hand calculations. This subteam collaborates frequently with the chassis and steering subteams to optimize geometries. Suspension assemblies primarily comprised of arms, shocks, steering knuckles, and rear bearing carriers.
|
||||||
|
subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||||
|
Electrical:
|
||||||
|
iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||||
|
shortDescription: The electrical team connects some of the instruments the car uses and supports the team in additional ways
|
||||||
|
longDescription: The electrical team is pivotal in ensuring the performance, safety, and reliability of the racing car during competitions. They design robust electronics and safety mechanisms capable of withstanding the rigors of endurance racing. Additionally, they provide technological support to other sub-teams, integrating data collection systems that directly influence the design process for all components. Their responsibilities encompass designing, testing, and optimizing electrical systems while leveraging data to enhance vehicle performance and safety.
|
||||||
|
subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||||
|
Logistics:
|
||||||
|
iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||||
|
shortDescription: The logistics team handles the business side of the club and handles planning of trips to competitions
|
||||||
|
longDescription: We handle generating a majority of the money needed for operation of the club, travel funds and our social media pages. As part of our responsibility to our sponsors we handle organizing and training all of our members to an industry standard level, all of our work from software, sponsorship, professional outreach, CAD and manufacturing processes.
|
||||||
|
subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||||
|
Software:
|
||||||
|
iconUrl: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||||
|
shortDescription: The software team hanldes the data collection systems, our data storage server, and this website
|
||||||
|
longDescription: The software team works very closely with electrical team with the creation of our onboard data collection unit, ensuring that all of the code we produce is up to industry standard as well as we handle the creation and maintenence of this site, including the backend which we run on our very own server.
|
||||||
|
subteamAtWork: https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg
|
||||||
1
src/MockDB/nothing.txt
Normal file
1
src/MockDB/nothing.txt
Normal file
@ -0,0 +1 @@
|
|||||||
|
this is only for testing vercel
|
||||||
36
src/MockDB/pastSponsors.yml
Normal file
36
src/MockDB/pastSponsors.yml
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
- Schulich School of Engineering:
|
||||||
|
LogoUrl: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQj9L3ZGK6WtOmJbzxmCzRxwLXYKGC5SDcAKHb0ScfbUmbtG0IujQt6eQDaI_Pm9g4DZvc&usqp=CAU
|
||||||
|
Url: https://schulich.ucalgary.ca/
|
||||||
|
DescriptionAboutSponsor: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu magna in diam consectetur rhoncus vel nec turpis. Sed finibus mi eu sem varius faucibus. Donec semper erat et bibendum pharetra. Suspendisse cursus lorem sed nisi semper, a rutrum nunc luctus. Nunc ullamcorper enim id orci interdum ultrices. Donec vestibulum nunc vel nisl pretium tempus. Morbi quis ante et ligula eleifend eleifend. Proin bibendum maximus elit vitae congue. Vivamus egestas, ex in tempor posuere, ligula nunc iaculis massa, in imperdiet dui justo eu dolor. Nullam placerat velit quis sem mattis, laoreet pharetra elit tempor.
|
||||||
|
- Platinum Sponsor Name:
|
||||||
|
LogoUrl:
|
||||||
|
Url:
|
||||||
|
DescriptionAboutSponsor:
|
||||||
|
- Suri:
|
||||||
|
LogoUrl: https://lh5.googleusercontent.com/WJsBsmcLypQhY0MMOLQtJSGFXrLQqPKNc3502rYUGKPCq_SfS9CxuoB3n541Kn9bKPm2b5aixCnYsCVYZAts2Y8xvmOHWL3nnbKtWUkE1KoFYYQ4bXUlikfF0NPIynxhzQ=w1280
|
||||||
|
Url: https://www.surimanufacturing.com/
|
||||||
|
DescriptionAboutSponsor:
|
||||||
|
- SKF:
|
||||||
|
LogoUrl: https://www.skf.com/v2/assets/img/skf-logo-white.svg
|
||||||
|
Url: https://www.skf.com/ca/en
|
||||||
|
DescriptionAboutSponsor: I am not sure
|
||||||
|
- WRMA:
|
||||||
|
LogoUrl: https://wildrosemx.com/wp-content/uploads/2021/08/wild-rose-motocross-calgary-rasterized.png
|
||||||
|
Url: https://wildrosemx.com/
|
||||||
|
DescriptionAboutSponsor:
|
||||||
|
- Encore Metals:
|
||||||
|
LogoUrl: https://www.encoremetals.com/assets/images/logos/encore-metals-logo.png
|
||||||
|
Url: https://www.encoremetals.com/
|
||||||
|
DescriptionAboutSponsor: Metal supplier
|
||||||
|
- CNOOC:
|
||||||
|
LogoUrl: https://cnoocinternational.com/img/cnooc-logo.png
|
||||||
|
Url: https://cnoocinternational.com/
|
||||||
|
DescriptionAboutSponsor:
|
||||||
|
- Redbull:
|
||||||
|
LogoUrl: "https://img.redbull.com/redbullcom/static/redbullcom-logo_double-with-text.svg"
|
||||||
|
Url: https://www.redbull.com/ca-en/
|
||||||
|
DescriptionAboutSponsor:
|
||||||
|
- Canada Action:
|
||||||
|
LogoUrl:
|
||||||
|
Url:
|
||||||
|
DescriptionAboutSponsor:
|
||||||
@ -1,50 +1,41 @@
|
|||||||
Diamond Tier:
|
Diamond Tier:
|
||||||
- Name: Schulich School of Engineering
|
- Schulich School of Engineering:
|
||||||
LogoUrl: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQj9L3ZGK6WtOmJbzxmCzRxwLXYKGC5SDcAKHb0ScfbUmbtG0IujQt6eQDaI_Pm9g4DZvc&usqp=CAU
|
LogoUrl: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQj9L3ZGK6WtOmJbzxmCzRxwLXYKGC5SDcAKHb0ScfbUmbtG0IujQt6eQDaI_Pm9g4DZvc&usqp=CAU
|
||||||
Url: https://schulich.ucalgary.ca/
|
Url: https://schulich.ucalgary.ca/
|
||||||
DescriptionAboutSponsor: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu magna in diam consectetur rhoncus vel nec turpis. Sed finibus mi eu sem varius faucibus. Donec semper erat et bibendum pharetra. Suspendisse cursus lorem sed nisi semper, a rutrum nunc luctus. Nunc ullamcorper enim id orci interdum ultrices. Donec vestibulum nunc vel nisl pretium tempus. Morbi quis ante et ligula eleifend eleifend. Proin bibendum maximus elit vitae congue. Vivamus egestas, ex in tempor posuere, ligula nunc iaculis massa, in imperdiet dui justo eu dolor. Nullam placerat velit quis sem mattis, laoreet pharetra elit tempor.
|
DescriptionAboutSponsor: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu magna in diam consectetur rhoncus vel nec turpis. Sed finibus mi eu sem varius faucibus. Donec semper erat et bibendum pharetra. Suspendisse cursus lorem sed nisi semper, a rutrum nunc luctus. Nunc ullamcorper enim id orci interdum ultrices. Donec vestibulum nunc vel nisl pretium tempus. Morbi quis ante et ligula eleifend eleifend. Proin bibendum maximus elit vitae congue. Vivamus egestas, ex in tempor posuere, ligula nunc iaculis massa, in imperdiet dui justo eu dolor. Nullam placerat velit quis sem mattis, laoreet pharetra elit tempor.
|
||||||
DecriptionOnHelp: Money
|
|
||||||
Platinum Tier:
|
Platinum Tier:
|
||||||
- Name: Platinum Sponsor Name
|
- Platinum Sponsor Name:
|
||||||
LogoUrl:
|
LogoUrl:
|
||||||
Url:
|
Url:
|
||||||
DescriptionAboutSponsor:
|
DescriptionAboutSponsor:
|
||||||
DescriptionOnHelp: Money
|
|
||||||
Gold Tier:
|
Gold Tier:
|
||||||
- Name: Suri
|
- Suri:
|
||||||
LogoUrl: https://lh5.googleusercontent.com/WJsBsmcLypQhY0MMOLQtJSGFXrLQqPKNc3502rYUGKPCq_SfS9CxuoB3n541Kn9bKPm2b5aixCnYsCVYZAts2Y8xvmOHWL3nnbKtWUkE1KoFYYQ4bXUlikfF0NPIynxhzQ=w1280
|
LogoUrl: https://lh5.googleusercontent.com/WJsBsmcLypQhY0MMOLQtJSGFXrLQqPKNc3502rYUGKPCq_SfS9CxuoB3n541Kn9bKPm2b5aixCnYsCVYZAts2Y8xvmOHWL3nnbKtWUkE1KoFYYQ4bXUlikfF0NPIynxhzQ=w1280
|
||||||
Url: https://www.surimanufacturing.com/
|
Url: https://www.surimanufacturing.com/
|
||||||
DescriptionAboutSponsor:
|
DescriptionAboutSponsor:
|
||||||
DescriptionOnHelp: I am not sure of the time of writing this
|
- SKF:
|
||||||
- Name: SKF
|
|
||||||
LogoUrl: https://www.skf.com/v2/assets/img/skf-logo-white.svg
|
LogoUrl: https://www.skf.com/v2/assets/img/skf-logo-white.svg
|
||||||
Url: https://www.skf.com/ca/en
|
Url: https://www.skf.com/ca/en
|
||||||
DescriptionAboutSponsor: I am not sure
|
DescriptionAboutSponsor: I am not sure
|
||||||
DescriptionOnHelp: I am not sure of the time of writing this
|
- WRMA:
|
||||||
- Name: WRMA
|
|
||||||
LogoUrl: https://wildrosemx.com/wp-content/uploads/2021/08/wild-rose-motocross-calgary-rasterized.png
|
LogoUrl: https://wildrosemx.com/wp-content/uploads/2021/08/wild-rose-motocross-calgary-rasterized.png
|
||||||
Url: https://wildrosemx.com/
|
Url: https://wildrosemx.com/
|
||||||
DescriptionAboutSponsor:
|
DescriptionAboutSponsor:
|
||||||
DescriptionOnHelp: Lets us use their trak during the warm months
|
|
||||||
Silver Tier:
|
Silver Tier:
|
||||||
- Name: Encore Metals
|
- Encore Metals:
|
||||||
LogoUrl: https://www.encoremetals.com/assets/images/logos/encore-metals-logo.png
|
LogoUrl: https://www.encoremetals.com/assets/images/logos/encore-metals-logo.png
|
||||||
Url: https://www.encoremetals.com/
|
Url: https://www.encoremetals.com/
|
||||||
DescriptionAboutSponsor: Metal supplier
|
DescriptionAboutSponsor: Metal supplier
|
||||||
DescriptionOnHelp: Where we buy metals from at a discounted rate
|
- CNOOC:
|
||||||
- Name: CNOOC
|
|
||||||
LogoUrl: https://cnoocinternational.com/img/cnooc-logo.png
|
LogoUrl: https://cnoocinternational.com/img/cnooc-logo.png
|
||||||
Url: https://cnoocinternational.com/
|
Url: https://cnoocinternational.com/
|
||||||
DescriptionAboutSponsor:
|
DescriptionAboutSponsor:
|
||||||
DescriptionOnHelp: Money
|
|
||||||
Bronze Tier:
|
Bronze Tier:
|
||||||
- Name: Redbull
|
- Redbull:
|
||||||
LogoUrl: "https://img.redbull.com/redbullcom/static/redbullcom-logo_double-with-text.svg"
|
LogoUrl: "https://img.redbull.com/redbullcom/static/redbullcom-logo_double-with-text.svg"
|
||||||
Url: https://www.redbull.com/ca-en/
|
Url: https://www.redbull.com/ca-en/
|
||||||
DescriptionAboutSponsor:
|
DescriptionAboutSponsor:
|
||||||
DescriptionOnHelp: Free Energy Drinks
|
- Canada Action:
|
||||||
- Name: Canada Action
|
|
||||||
LogoUrl:
|
LogoUrl:
|
||||||
Url: I dont know
|
Url:
|
||||||
DescriptionAboutSponsor:
|
DescriptionAboutSponsor:
|
||||||
DescriptionOnHelp: Money
|
|
||||||
|
|||||||
@ -3,48 +3,77 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: gray;
|
background-color: gray;
|
||||||
padding-left: 10%;
|
padding-left: 2%;
|
||||||
padding-right: 10%;
|
padding-right: 2%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#OurSponsors div div {
|
#BecomeASponsors {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
#OurSponsors div div div div div img {
|
#BecomeASponsors div {
|
||||||
display: flex;
|
|
||||||
justify-content: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#OurSponsors div div div p {
|
|
||||||
display: flex;
|
|
||||||
justify-content: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#OurSponsors div div div div div {
|
|
||||||
padding: 0%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
#OurSponsors div div div div {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: flex-end;
|
|
||||||
padding: 0%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#OurSponsors h2 {
|
#BecomeASponsors a {
|
||||||
background-color: aquamarine;
|
color: inherit;
|
||||||
text-align: center;
|
text-decoration: none;
|
||||||
margin: 0px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#OurSponsors h3 {
|
#BecomeASponsors div a img {
|
||||||
|
height: 18rem;
|
||||||
|
width: auto;
|
||||||
|
padding-right: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#BecomeASponsors img {
|
||||||
|
height: auto;
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#Sponsor {
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#SponsorEnd {
|
||||||
|
text-align: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.SponsorsTitle {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
border-bottom: 2px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Sponsors {
|
||||||
|
background-color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Sponsors a {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: whitesmoke;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Sponsors a div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Sponsors a h4 {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Sponsors a img {
|
||||||
|
max-height: 8rem;
|
||||||
|
max-width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Sponsors a p {
|
||||||
|
padding: 2rem;
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,21 +1,23 @@
|
|||||||
import "./OurSponsors.css";
|
import "./OurSponsors.css";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import sponsorData from "../MockDB/sponsorship.yml";
|
import currentSponsorData from "../MockDB/sponsorship.yml";
|
||||||
|
import pastSponsorData from "../MockDB/pastSponsors.yml";
|
||||||
import yaml from "js-yaml";
|
import yaml from "js-yaml";
|
||||||
import OpenPage from "../Header/OpenPage";
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {null} null - requires onthing
|
* @param {null} null - requires onthing
|
||||||
* @returns {JSX.Element} JSX - HTML tags and JS functionality
|
* @returns {JSX.Element} JSX - HTML tags and JS functionality
|
||||||
* @description Our Sponsors Page
|
* @description Our Sponsors Page
|
||||||
* @author Brock <darkicewolf50@gmail.com>
|
* @author Brock <darkicewolf50@gmail.com>
|
||||||
* @todo finish page layout
|
* @todo finsih layout and add content
|
||||||
*/
|
*/
|
||||||
const OurSponsors = () => {
|
const OurSponsors = () => {
|
||||||
const [sponsorsDict, setSponsorsDict] = useState(); //variable states for the dictionary of sponsors
|
const [currentSponsorsDict, setCurrentSponsorsDict] = useState(); //variable states for the dictionary of sponsors
|
||||||
|
const [pastSponsorsDict, setPastSponsorsDict] = useState();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getSponsors();
|
getCurrentSponsors();
|
||||||
|
getPastSponsors();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -25,93 +27,169 @@ const OurSponsors = () => {
|
|||||||
* @author Brock <darkicewolf50@gmail.com>
|
* @author Brock <darkicewolf50@gmail.com>
|
||||||
* @todo add gPRC to backend and front end add connect to synology drive
|
* @todo add gPRC to backend and front end add connect to synology drive
|
||||||
*/
|
*/
|
||||||
const getSponsors = async () => {
|
const getCurrentSponsors = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await fetch(sponsorData);
|
const res = await fetch(currentSponsorData);
|
||||||
const rawText = await res.text();
|
const rawText = await res.text();
|
||||||
const yamlDict = yaml.load(rawText);
|
const yamlDict = await yaml.load(rawText);
|
||||||
setSponsorsDict(yamlDict);
|
setCurrentSponsorsDict(yamlDict);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
//error checking
|
//error checking
|
||||||
|
console.log(error);
|
||||||
|
console.error("Error recieving data from server:");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
* @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 getPastSponsors = async () => {
|
||||||
|
try {
|
||||||
|
const res = await fetch(pastSponsorData);
|
||||||
|
const rawText = await res.text();
|
||||||
|
const yamlDict = await yaml.load(rawText);
|
||||||
|
setPastSponsorsDict(yamlDict);
|
||||||
|
} catch (error) {
|
||||||
|
// error checking
|
||||||
console.error("Error recieving data from server:");
|
console.error("Error recieving data from server:");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
if (!sponsorsDict) {
|
|
||||||
//awaiting for a resposne from the backend
|
|
||||||
//add loading notification to user
|
|
||||||
return <p>Loading...</p>;
|
|
||||||
}
|
|
||||||
if (sponsorsDict) {
|
|
||||||
//maps out the dictionary and displays the content
|
|
||||||
return (
|
return (
|
||||||
<div id="OurSponsors">
|
<div id="OurSponsors">
|
||||||
|
<h1>Sponsor</h1>
|
||||||
<div id="BecomeASponsors">
|
<div id="BecomeASponsors">
|
||||||
<OpenPage
|
<p>(How our team uses what's given by and benefits from sponsors)</p>
|
||||||
pageToGoTo={"/BecomeASponsor"}
|
|
||||||
textOnButton={"Become a Sponsor"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div id="CurrentSponosrs">
|
|
||||||
<h3>Current Sponsors</h3>
|
|
||||||
{/* gets the outmost name of the Object {"Name of tier": {...}} */}
|
|
||||||
{Object.keys(sponsorsDict).map((sponsorTier) => (
|
|
||||||
<div
|
|
||||||
key={sponsorTier}
|
|
||||||
className={sponsorTier}>
|
|
||||||
<h2>{sponsorTier}</h2>
|
|
||||||
{/* gets the keys from the new inner object used so that no two html tags are the "same" */}
|
|
||||||
{Object.keys(sponsorsDict[sponsorTier]).map((sponsorKey) => {
|
|
||||||
const sponsor = sponsorsDict[sponsorTier][sponsorKey];
|
|
||||||
return (
|
|
||||||
<div key={sponsorKey}>
|
|
||||||
<div>
|
<div>
|
||||||
<div>
|
|
||||||
{sponsor.Name && <h3>{sponsor.Name}</h3>}
|
|
||||||
{sponsor.LogoUrl && (
|
|
||||||
<a
|
<a
|
||||||
href={sponsor.Url}
|
href="https://google.com"
|
||||||
rel="noreferrer"
|
target="_blank"
|
||||||
target="_blank">
|
rel="noreferrer">
|
||||||
<img
|
<img
|
||||||
src={sponsor.LogoUrl}
|
src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710699982/qr-code_l9q7ik.png"
|
||||||
alt={
|
alt="QR code to contanct us form"
|
||||||
sponsor.Name +
|
|
||||||
"'s logo, one of the companies that sponsors Schulich Off-Road"
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
|
<p>Click on this to open the contact form</p>
|
||||||
</a>
|
</a>
|
||||||
)}
|
<p>
|
||||||
|
Talk about how you can reach out to sponsor us. (Maybe also include
|
||||||
|
a link to the form as well)
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{/* puts this in the sponsor's section only if they are silver and above */}
|
<p>
|
||||||
{sponsor.DescriptionAboutSponsor !== undefined &&
|
(Talk about what we can offer our sponsors for helping us briefly or
|
||||||
sponsor.DecriptionOnHelp !== undefined &&
|
in a listing format. We can also mention how they can find more on the
|
||||||
(sponsorTier !== "Bronze Tier" ||
|
sponsorship package - plus provide some way they can access the
|
||||||
sponsorTier !== "Silver Tier") && (
|
package from here)
|
||||||
<p>Another Element</p>
|
</p>
|
||||||
)}
|
<img
|
||||||
|
src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1708797415/Screenshot_from_2024-02-24_10-52-24_nsn9uv.png"
|
||||||
|
alt="Our sponsorship package"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div id="Sponsor">
|
||||||
|
<h2 className="SponsorsTitle">Current Sponsors</h2>
|
||||||
|
{/* shows the current sponsors only after the data has been recieved */}
|
||||||
|
{currentSponsorsDict === undefined ? (
|
||||||
|
<p>Loading...</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{/* gets the outmost name of the Object Name of tier*/}
|
||||||
|
{Object.keys(currentSponsorsDict).map((sponsorsTier) => {
|
||||||
|
return (
|
||||||
|
<div className="Sponsors">
|
||||||
|
<h3>{sponsorsTier}</h3>
|
||||||
|
{/* gets key form list of tier */}
|
||||||
|
{Object.keys(currentSponsorsDict[sponsorsTier]).map(
|
||||||
|
(sponsorsKey) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* gets name out of object and gets data of that sponsor preped */}
|
||||||
|
{Object.keys(
|
||||||
|
currentSponsorsDict[sponsorsTier][sponsorsKey]
|
||||||
|
).map((sponsorName) => {
|
||||||
|
let sponsorData =
|
||||||
|
currentSponsorsDict[sponsorsTier][sponsorsKey][
|
||||||
|
sponsorName
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
href={sponsorData.Url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer">
|
||||||
|
<div>
|
||||||
|
<h4>{sponsorName}</h4>
|
||||||
|
<img
|
||||||
|
src={sponsorData.LogoUrl}
|
||||||
|
alt={sponsorName + "'s Logo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{(sponsorsTier !== "Silver Tier" ||
|
||||||
|
sponsorsTier !== "Bronze Tier") && (
|
||||||
|
<div>
|
||||||
|
<p>{sponsorData.DescriptionAboutSponsor}</p>
|
||||||
</div>
|
</div>
|
||||||
{/* puts this in the sponsor's section only if they are silver and above */}
|
|
||||||
{sponsor.DescriptionAboutSponsor !== undefined &&
|
|
||||||
(sponsorTier !== "Bronze Tier" ||
|
|
||||||
sponsorTier !== "Silver Tier") && (
|
|
||||||
<p>{sponsor.DescriptionAboutSponsor}</p>
|
|
||||||
)}
|
)}
|
||||||
{/* puts this in the sponsor's section only if they are silver and above */}
|
</a>
|
||||||
{sponsor.DecriptionOnHelp !== undefined &&
|
);
|
||||||
(sponsorTier !== "Bronze Tier" ||
|
})}
|
||||||
sponsorTier !== "Silver Tier") && (
|
</>
|
||||||
<p>{sponsor.DecriptionOnHelp}</p>
|
);
|
||||||
|
}
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
))}
|
<div id="Sponsor">
|
||||||
|
<h2
|
||||||
|
className="SponsorsTitle"
|
||||||
|
id="SponsorEnd">
|
||||||
|
Past Sponsors
|
||||||
|
</h2>
|
||||||
|
{/* shows past sponsors only when recieved, do not duplicate the sponsors from current ones */}
|
||||||
|
{pastSponsorsDict === undefined ? (
|
||||||
|
<p>Loading...</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
{/* gets keys o objects in list */}
|
||||||
|
{Object.keys(pastSponsorsDict).map((pastSponsorKey) => {
|
||||||
|
return (
|
||||||
|
<div className="Sponsors">
|
||||||
|
{/* gets name of sponsor then uses it to get data of past sponsor */}
|
||||||
|
{Object.keys(pastSponsorsDict[pastSponsorKey]).map(
|
||||||
|
(pastSponsorName) => {
|
||||||
|
let pastSponsors =
|
||||||
|
pastSponsorsDict[pastSponsorKey][pastSponsorName];
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
href={pastSponsors.Url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer">
|
||||||
|
<div>
|
||||||
|
<h4>{pastSponsorName}</h4>
|
||||||
|
<img
|
||||||
|
src={pastSponsors.LogoUrl}
|
||||||
|
alt={pastSponsorName + "'s Logo"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default OurSponsors;
|
export default OurSponsors;
|
||||||
|
|||||||
72
src/Teams/SubTeams.css
Normal file
72
src/Teams/SubTeams.css
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
#subteams {
|
||||||
|
margin-left: 1rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#subteams h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#subteams table {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#subteams table tbody {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#subteams table td {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#subteams table img {
|
||||||
|
height: 10rem;
|
||||||
|
width: 10rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#subteams table p {
|
||||||
|
width: 10rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subteamsEnd {
|
||||||
|
text-align: end;
|
||||||
|
justify-content: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subteamsEnd h2 {
|
||||||
|
padding-right: 1rem;
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#subteamContent {
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subteamData {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
height: 10rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#subteamContent p {
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subteamTitle {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
height: 5rem;
|
||||||
|
margin: 0px auto;
|
||||||
|
border-bottom: solid 2px black;
|
||||||
|
}
|
||||||
249
src/Teams/SubTeams.js
Normal file
249
src/Teams/SubTeams.js
Normal file
@ -0,0 +1,249 @@
|
|||||||
|
import "./SubTeams.css";
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import yaml from "js-yaml";
|
||||||
|
import leadershipData from "../MockDB/SubTeams.yml";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {null} null - requires nothing (link)
|
||||||
|
* @returns {JSX.Element} page - page content
|
||||||
|
* @description the subteams page
|
||||||
|
* @author Brock <darkicewolf50@gmail.com>
|
||||||
|
* @todo add gPRC to backend and any remaining css
|
||||||
|
*/
|
||||||
|
const SubTeams = () => {
|
||||||
|
const [subteamsDict, setSubteamsDict] = useState();
|
||||||
|
const [subteamsArray, setSubteamsArray] = useState();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getLeadership();
|
||||||
|
}, []);
|
||||||
|
/**
|
||||||
|
* @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:");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {index} Int - requires the number of the section to go to
|
||||||
|
* @returns {null} null - moves screen to a specific subteam section
|
||||||
|
* @description moves screen to the subteam's section upon click
|
||||||
|
* @author Brock <darkicewolf50@gmail.com>
|
||||||
|
*/
|
||||||
|
const ScrolltoSubteamSection = (index) => {
|
||||||
|
const section = document.querySelectorAll(".subteamTitle")[index];
|
||||||
|
if (section) {
|
||||||
|
section.scrollIntoView({ behavior: "smooth" });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div id="subteams">
|
||||||
|
<h1>Get to Know Our Subteams</h1>
|
||||||
|
{subteamsDict === undefined && subteamsArray === undefined ? (
|
||||||
|
<p>Loading...</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
{/* this really sucks it needs to be changed */}
|
||||||
|
<tr>
|
||||||
|
{/* row 1 */}
|
||||||
|
<td
|
||||||
|
onClick={() => {
|
||||||
|
ScrolltoSubteamSection(0);
|
||||||
|
}}>
|
||||||
|
<img
|
||||||
|
src={subteamsArray[0].iconUrl}
|
||||||
|
alt={subteamsArray[0] + "'s Icon"}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
{/* row 2 */}
|
||||||
|
<td
|
||||||
|
onClick={() => {
|
||||||
|
ScrolltoSubteamSection(1);
|
||||||
|
}}>
|
||||||
|
<img
|
||||||
|
src={subteamsArray[1].iconUrl}
|
||||||
|
alt={subteamsArray[1] + "'s Icon"}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
{/* row 3 */}
|
||||||
|
<td
|
||||||
|
onClick={() => {
|
||||||
|
ScrolltoSubteamSection(2);
|
||||||
|
}}>
|
||||||
|
<img
|
||||||
|
src={subteamsArray[2].iconUrl}
|
||||||
|
alt={subteamsArray[2] + "'s Icon"}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
{/* row 4 */}
|
||||||
|
<td
|
||||||
|
onClick={() => {
|
||||||
|
ScrolltoSubteamSection(3);
|
||||||
|
}}>
|
||||||
|
<img
|
||||||
|
src={subteamsArray[3].iconUrl}
|
||||||
|
alt={subteamsArray[3] + "'s Icon"}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
{/* row 5 */}
|
||||||
|
<td
|
||||||
|
onClick={() => {
|
||||||
|
ScrolltoSubteamSection(4);
|
||||||
|
}}>
|
||||||
|
<img
|
||||||
|
src={subteamsArray[4].iconUrl}
|
||||||
|
alt={subteamsArray[4] + "'s Icon"}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
{/* row 6 */}
|
||||||
|
<td
|
||||||
|
onClick={() => {
|
||||||
|
ScrolltoSubteamSection(5);
|
||||||
|
}}>
|
||||||
|
<img
|
||||||
|
src={subteamsArray[5].iconUrl}
|
||||||
|
alt={subteamsArray[5] + "'s Icon"}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
{/* row 7 */}
|
||||||
|
<td
|
||||||
|
onClick={() => {
|
||||||
|
ScrolltoSubteamSection(6);
|
||||||
|
}}>
|
||||||
|
<img
|
||||||
|
src={subteamsArray[6].iconUrl}
|
||||||
|
alt={subteamsArray[6] + "'s Icon"}
|
||||||
|
/>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
{/* row 1 */}
|
||||||
|
<td
|
||||||
|
onClick={() => {
|
||||||
|
ScrolltoSubteamSection(0);
|
||||||
|
}}>
|
||||||
|
<p>{subteamsArray[0].shortDescription}</p>
|
||||||
|
</td>
|
||||||
|
{/* row 2 */}
|
||||||
|
<td
|
||||||
|
onClick={() => {
|
||||||
|
ScrolltoSubteamSection(1);
|
||||||
|
}}>
|
||||||
|
<p>{subteamsArray[1].shortDescription}</p>
|
||||||
|
</td>
|
||||||
|
{/* row 3 */}
|
||||||
|
<td
|
||||||
|
onClick={() => {
|
||||||
|
ScrolltoSubteamSection(2);
|
||||||
|
}}>
|
||||||
|
<p>{subteamsArray[2].shortDescription}</p>
|
||||||
|
</td>
|
||||||
|
{/* row 4 */}
|
||||||
|
<td
|
||||||
|
onClick={() => {
|
||||||
|
ScrolltoSubteamSection(3);
|
||||||
|
}}>
|
||||||
|
<p>{subteamsArray[3].shortDescription}</p>
|
||||||
|
</td>
|
||||||
|
{/* row 5 */}
|
||||||
|
<td
|
||||||
|
onClick={() => {
|
||||||
|
ScrolltoSubteamSection(4);
|
||||||
|
}}>
|
||||||
|
<p>{subteamsArray[4].shortDescription}</p>
|
||||||
|
</td>
|
||||||
|
{/* row 6 */}
|
||||||
|
<td
|
||||||
|
onClick={() => {
|
||||||
|
ScrolltoSubteamSection(5);
|
||||||
|
}}>
|
||||||
|
<p>{subteamsArray[5].shortDescription}</p>
|
||||||
|
</td>
|
||||||
|
{/* row 7 */}
|
||||||
|
<td
|
||||||
|
onClick={() => {
|
||||||
|
ScrolltoSubteamSection(6);
|
||||||
|
}}>
|
||||||
|
<p>{subteamsArray[6].shortDescription}</p>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<div id="subteamContent">
|
||||||
|
{/* lays out content from the subteams dict gets the name of the subteam and index */}
|
||||||
|
{Object.keys(subteamsDict).map((subteamName, index) => {
|
||||||
|
const subteam = subteamsDict[subteamName];
|
||||||
|
//changes location of content based if the second one creates a checkerboard layout
|
||||||
|
let className = index % 2 === 0 ? "subteamsEnd" : "";
|
||||||
|
return (
|
||||||
|
<div key={subteamName}>
|
||||||
|
{/* changes layout if the second or first one */}
|
||||||
|
{index % 2 === 0 ? (
|
||||||
|
<>
|
||||||
|
<div className={"subteamTitle " + className}>
|
||||||
|
<img
|
||||||
|
src={subteam.iconUrl}
|
||||||
|
alt={subteamName + "'s Icon"}
|
||||||
|
className={className}
|
||||||
|
/>
|
||||||
|
<h2 className={className}>{subteamName}</h2>
|
||||||
|
</div>
|
||||||
|
<div className="subteamData">
|
||||||
|
<img
|
||||||
|
src={subteam.subteamAtWork}
|
||||||
|
alt={
|
||||||
|
subteamName +
|
||||||
|
"'s members work or working on a project"
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<p>{subteam.longDescription}</p>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<div className={"subteamTitle" + className}>
|
||||||
|
<h2 className={className}>{subteamName}</h2>
|
||||||
|
<img
|
||||||
|
src={subteam.iconUrl}
|
||||||
|
alt={subteamName + "'s Icon"}
|
||||||
|
className={className}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="subteamData">
|
||||||
|
<p>{subteam.longDescription}</p>
|
||||||
|
<img
|
||||||
|
src={subteam.subteamAtWork}
|
||||||
|
alt={
|
||||||
|
subteamName +
|
||||||
|
"'s members work or working on a project"
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SubTeams;
|
||||||
@ -1,5 +0,0 @@
|
|||||||
export default function Teams() {
|
|
||||||
return (
|
|
||||||
<p>Teams</p>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
52
src/index.js
52
src/index.js
@ -1,30 +1,40 @@
|
|||||||
import React from 'react';
|
import React from "react";
|
||||||
import ReactDOM from 'react-dom/client';
|
import ReactDOM from "react-dom/client";
|
||||||
import reportWebVitals from './reportWebVitals';
|
import reportWebVitals from "./reportWebVitals";
|
||||||
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||||
import Header from './Header/Header';
|
import Header from "./Header/Header";
|
||||||
import AboutUs from './AboutUs/AboutUs';
|
import AboutUs from "./AboutUs/AboutUs";
|
||||||
import Teams from './Teams/Teams';
|
import SubTeams from "./Teams/SubTeams";
|
||||||
import OurSponsors from './OurSponsors/OurSponsors';
|
import OurSponsors from "./OurSponsors/OurSponsors";
|
||||||
import BecomeASponsor from './BecomeASponsor/BecomeASponsor';
|
import JoinTheClub from "./Club Membership & Upcoming Events/JoinTheClub/JoinTheClub";
|
||||||
import JoinTheClub from './Club Membership & Upcoming Events/JoinTheClub/JoinTheClub';
|
import UpcomingEvents from "./Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents";
|
||||||
import UpcomingEvents from './Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents';
|
import Gallery from "./Gallery/Gallery";
|
||||||
import Gallery from './Gallery/Gallery';
|
import "./index.css";
|
||||||
import './index.css';
|
|
||||||
|
|
||||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
const root = ReactDOM.createRoot(document.getElementById("root"));
|
||||||
root.render(
|
root.render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route element = {<Header />}>
|
<Route element={<Header />}>
|
||||||
<Route path = '/' element = {<AboutUs />}></Route>
|
<Route
|
||||||
<Route path = '/Teams' element = {<Teams />}></Route>
|
path="/"
|
||||||
<Route path = '/OurSponsors' element = {<OurSponsors />}></Route>
|
element={<AboutUs />}></Route>
|
||||||
<Route path = '/BecomeASponsor' element = {<BecomeASponsor />}></Route>
|
<Route
|
||||||
<Route path = '/JoinTheClub' element = {<JoinTheClub />}></Route>
|
path="/Teams"
|
||||||
<Route path = '/UpcomingEvents' element = {<UpcomingEvents />}></Route>
|
element={<SubTeams />}></Route>
|
||||||
<Route path = '/Gallery' element = {<Gallery />}></Route>
|
<Route
|
||||||
|
path="/OurSponsors"
|
||||||
|
element={<OurSponsors />}></Route>
|
||||||
|
<Route
|
||||||
|
path="/JoinTheClub"
|
||||||
|
element={<JoinTheClub />}></Route>
|
||||||
|
<Route
|
||||||
|
path="/UpcomingEvents"
|
||||||
|
element={<UpcomingEvents />}></Route>
|
||||||
|
<Route
|
||||||
|
path="/Gallery"
|
||||||
|
element={<Gallery />}></Route>
|
||||||
</Route>
|
</Route>
|
||||||
</Routes>
|
</Routes>
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user