Ucalgary_Baja/BajaUofCWebsite
4
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-06-15 05:14:18 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1 from UofCBaja/sponsor

Browse Source 
Sponsor Merge onto Dev Branch
This commit is contained in:
darkicewolf50 2024-03-13 13:24:12 -06:00 committed by GitHub
commit f286c4c3f0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 22432 additions and 22035 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
.github/workflows/testAutomatic.yaml vendored
View File

@ -34,3 +34,16 @@ jobs:
# this step runs a bash (Ubuntu's default shell) command
- name: list files
run: ls
Eslinter:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v3
- name: Install dependencies
run: npm ci
- name: Run ESLint
run: npm run lint

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"DockerRun.DisableDockerrc": true
}

43937
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

84
package.json
View File

@ -1,41 +1,47 @@
{
"name": "bajauofcwebsite",
"version": "0.1.0",
"private": true,
"dependencies": {
"@svgr/webpack": "^8.1.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-native": "^0.72.6",
"react-router-dom": "^6.17.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
"name": "bajauofcwebsite",
"version": "0.1.0",
"private": true,
"dependencies": {
"@svgr/webpack": "^8.1.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"js-yaml": "^4.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-native": "^0.72.6",
"react-router-dom": "^6.20.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^8.57.0",
"yaml-loader": "^0.8.1"
}
}

3
src/BecomeASponsor/BecomeASponsor.css Normal file
View File

@ -0,0 +1,3 @@
#BecomeASponsor div {
background-color: green;
}

60
src/BecomeASponsor/BecomeASponsor.js
View File

@ -1,5 +1,55 @@
export default function BecomeASponsor() {
return (
<p>Become A Sponsor</p>
);
};
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;

107
src/Header/Header.js
View File

@ -1,52 +1,75 @@
import logo from './logo.png';
import logo from "./logo.png";
import DropdownMenu from "./DropdownMenu";
// import OpenPage from "./OpenPage";
import { useNavigate } from "react-router-dom";
import { useNavigate, Outlet } from "react-router-dom";
import { useState } from "react";
import { Outlet } from "react-router-dom";
import "./Header.css";
export default function Header() {
const [isDropdownVisible, setDropdownVisible] = useState(false);
const navigate = useNavigate();
const [isDropdownVisible, setDropdownVisible] = useState(false);
const navigate = useNavigate();
const OpenPage = (arg) => {
navigate(arg);
console.log(arg);
};
const OpenPage = (arg) => {
navigate(arg);
console.log(arg);
};
const handleMouseEnter = () => {
setDropdownVisible(true);
};
const handleMouseEnter = () => {
setDropdownVisible(true);
};
const handleMouseLeave = () => {
setDropdownVisible(false);
};
const handleMouseLeave = () => {
setDropdownVisible(false);
};
return (
<>
<header>
<div>
<img style={{background: "gray"}} onClick = {() => OpenPage('/')} src={logo} alt="logo" />
<p>Schulich Offroad</p>
</div>
<div>
<button type = "button" onClick = {() => OpenPage('/')}>About Us</button>
<button type = "button" onClick = {() => OpenPage('/Teams')}>Teams</button>
<button type = "button" onClick = {() => OpenPage('/OurSponsors')}>Our Sponsors</button>
<button type = "button" onClick = {() => OpenPage('/BecomeASponsor')}>Become a Sponsor</button>
<div
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
style={{background: "red"}}
>
<button type = "button">Club Membership & Upcoming Events</button>
{isDropdownVisible && <DropdownMenu />}
</div>
<button type = "button" onClick = {() => OpenPage('/Gallery')}>Gallery</button>
</div>
</header>
<Outlet />
</>
);
};
return (
<>
<header>
<div>
<img
style={{ background: "gray" }}
onClick={() => OpenPage("/")}
src={logo}
alt="logo"
/>
<p>Schulich Offroad</p>
</div>
<div>
<button
type="button"
onClick={() => OpenPage("/")}>
About Us
</button>
<button
type="button"
onClick={() => OpenPage("/Teams")}>
Teams
</button>
<button
type="button"
onClick={() => OpenPage("/OurSponsors")}>
Our Sponsors
</button>
<button
type="button"
onClick={() => OpenPage("/BecomeASponsor")}>
Become a Sponsor
</button>
<div
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
style={{ background: "red" }}>
<button type="button">Club Membership & Upcoming Events</button>
{isDropdownVisible && <DropdownMenu />}
</div>
<button
type="button"
onClick={() => OpenPage("/Gallery")}>
Gallery
</button>
</div>
</header>
<Outlet />
</>
);
}

26
src/Header/OpenPage.js
View File

@ -1,9 +1,25 @@
import { useNavigate } from "react-router-dom";
const OpenPage = (arg) => {
const navigate = useNavigate();
navigate(arg);
console.log(arg);
/**
* @param {String} pageToGoTo - The page that the button goes to
* @param {String} textOnButton - The Text tht will be on the button
* @returns {JSX.Element} JSX - HTML tags and JS functionality
* @description Button Template that moves you to the
* @author Brock <darkicewolf50@gmail.com>
*/
const OpenPage = ({ pageToGoTo, textOnButton }) => {
const navigate = useNavigate();
const navigateTo = (param) => {
navigate(param);
};
return (
<button
id="navigateButton"
onClick={() => navigateTo(pageToGoTo)}>
{textOnButton}
</button>
);
};
export default OpenPage;
export default OpenPage;

50
src/MockDB/sponsorship.yml Normal file
View File

@ -0,0 +1,50 @@
Diamond Tier:
- Name: 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.
DecriptionOnHelp: Money
Platinum Tier:
- Name: Platinum Sponsor Name
LogoUrl:
Url:
DescriptionAboutSponsor:
DescriptionOnHelp: Money
Gold Tier:
- Name: Suri
LogoUrl: https://lh5.googleusercontent.com/WJsBsmcLypQhY0MMOLQtJSGFXrLQqPKNc3502rYUGKPCq_SfS9CxuoB3n541Kn9bKPm2b5aixCnYsCVYZAts2Y8xvmOHWL3nnbKtWUkE1KoFYYQ4bXUlikfF0NPIynxhzQ=w1280
Url: https://www.surimanufacturing.com/
DescriptionAboutSponsor:
DescriptionOnHelp: I am not sure of the time of writing this
- Name: 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
DescriptionOnHelp: I am not sure of the time of writing this
- Name: WRMA
LogoUrl: https://wildrosemx.com/wp-content/uploads/2021/08/wild-rose-motocross-calgary-rasterized.png
Url: https://wildrosemx.com/
DescriptionAboutSponsor:
DescriptionOnHelp: Lets us use their trak during the warm months
Silver Tier:
- Name: Encore Metals
LogoUrl: https://www.encoremetals.com/assets/images/logos/encore-metals-logo.png
Url: https://www.encoremetals.com/
DescriptionAboutSponsor: Metal supplier
DescriptionOnHelp: Where we buy metals from at a discounted rate
- Name: CNOOC
LogoUrl: https://cnoocinternational.com/img/cnooc-logo.png
Url: https://cnoocinternational.com/
DescriptionAboutSponsor:
DescriptionOnHelp: Money
Bronze Tier:
- Name: Redbull
LogoUrl: "https://img.redbull.com/redbullcom/static/redbullcom-logo_double-with-text.svg"
Url: https://www.redbull.com/ca-en/
DescriptionAboutSponsor:
DescriptionOnHelp: Free Energy Drinks
- Name: Canada Action
LogoUrl:
Url: I dont know
DescriptionAboutSponsor:
DescriptionOnHelp: Money

50
src/OurSponsors/OurSponsors.css Normal file
View File

@ -0,0 +1,50 @@
#OurSponsors {
display: flex;
flex-direction: column;
justify-content: center;
background-color: gray;
padding-left: 10%;
padding-right: 10%;
}
#OurSponsors div div {
display: flex;
flex-direction: column;
justify-content: center;
background-color: white;
}
#OurSponsors div div div div div img {
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;
flex-direction: row;
justify-content: flex-end;
padding: 0%;
width: 100%;
}
#OurSponsors h2 {
background-color: aquamarine;
text-align: center;
margin: 0px;
}
#OurSponsors h3 {
text-align: left;
}

122
src/OurSponsors/OurSponsors.js
View File

@ -1,5 +1,117 @@
export default function OurSponsors() {
return (
<p>Our Sponsors</p>
);
};
import "./OurSponsors.css";
import { useEffect, useState } from "react";
import sponsorData from "../MockDB/sponsorship.yml";
import yaml from "js-yaml";
import OpenPage from "../Header/OpenPage";
/**
* @param {null} null - requires onthing
* @returns {JSX.Element} JSX - HTML tags and JS functionality
* @description Our Sponsors Page
* @author Brock <darkicewolf50@gmail.com>
* @todo finish page layout
*/
const OurSponsors = () => {
const [sponsorsDict, setSponsorsDict] = useState(); //variable states for the dictionary of sponsors
useEffect(() => {
getSponsors();
}, []);
/**
* @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 getSponsors = async () => {
try {
const res = await fetch(sponsorData);
const rawText = await res.text();
const yamlDict = yaml.load(rawText);
setSponsorsDict(yamlDict);
} catch (error) {
//error checking
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 (
<div id="OurSponsors">
<div id="BecomeASponsors">
<OpenPage
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>
{sponsor.Name && <h3>{sponsor.Name}</h3>}
{sponsor.LogoUrl && (
<a
href={sponsor.Url}
rel="noreferrer"
target="_blank">
<img
src={sponsor.LogoUrl}
alt={
sponsor.Name +
"'s logo, one of the companies that sponsors Schulich Off-Road"
}
/>
</a>
)}
</div>
{/* puts this in the sponsor's section only if they are silver and above */}
{sponsor.DescriptionAboutSponsor !== undefined &&
sponsor.DecriptionOnHelp !== undefined &&
(sponsorTier !== "Bronze Tier" ||
sponsorTier !== "Silver Tier") && (
<p>Another Element</p>
)}
</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 */}
{sponsor.DecriptionOnHelp !== undefined &&
(sponsorTier !== "Bronze Tier" ||
sponsorTier !== "Silver Tier") && (
<p>{sponsor.DecriptionOnHelp}</p>
)}
</div>
);
})}
</div>
))}
</div>
</div>
);
}
};
export default OurSponsors;

12
src/TestingTools/fakeDelay.js Normal file
View File

@ -0,0 +1,12 @@
/**
* @param {int} ms - time in ms to add a delay
* @returns {Promise(resolve)} Promise - reutrns an empty promise after the set time
* @description Testing tool to delay a function deliberatly
* @author Brock <darkicewolf50@gmail.com>
* @example await fakeDelay(5000);
*/
function fakeDelay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms));
}
export default fakeDelay;