diff --git a/README.md b/README.md index 69034a0..770207b 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ - + # Welcome to ScoreSpot @@ -45,7 +45,7 @@ With its sophisticated tech setup, ScoreSpot brings innovation to soccer stat tr # How to Deploy ScoreSpot > ⚠️ **BEFORE DEPLOYING** ⚠️ -> +> > In order to deploy ScoreSpot you must have the following installed to your operating sytem: > > 1. [Docker](https://docs.docker.com/get-docker/) @@ -56,8 +56,7 @@ With its sophisticated tech setup, ScoreSpot brings innovation to soccer stat tr **Once the following dependencies above are installed navigate to the top of the repsoitory and copy the following link:** -> https://github.com/LucasPatenaude/ScoreSpot.git - +> **Using a Git GUI or the terminal select a location to store the repository. In this example, I'll store it in a folder called `programming` in the home directory** @@ -71,24 +70,18 @@ With its sophisticated tech setup, ScoreSpot brings innovation to soccer stat tr `cd /c/Users/` <--- Replace with your windows user name - - 2. In the home directory create a folder called `programming` > On All Systems `mkdir programming` - - 3. Now that `programming` is created navigate to it > On All Systems `cd programming` - - 4. **Now that you're in the `~/programming` directory it's time to clone the repository** > On All Systems @@ -126,7 +119,7 @@ With its sophisticated tech setup, ScoreSpot brings innovation to soccer stat tr > 💡 TIP 💡 > > Congragulations! ScoreSpot should now be deployed on your server at port 3000 -> +> > To enter your ScoreSpot deployment enter `localhost:3000/` into your browser's addess bar --- @@ -176,5 +169,5 @@ With its sophisticated tech setup, ScoreSpot brings innovation to soccer stat tr > 💡 TIP 💡 > > Congragulations! ScoreSpot should now show it's test results on bootup -> +> > To view the test results navigate to Docker and open the container's logs diff --git a/docker-compose.yml b/docker-compose.yml index e5497a4..c80dcbd 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,4 +1,4 @@ -version: '3.9' +version: "3.9" services: db: @@ -9,14 +9,14 @@ services: POSTGRES_PASSWORD: "pwd" POSTGRES_DB: "users_db" ports: - - '5432:5432' + - "5432:5432" volumes: - users-database:/var/lib/postgresql/data - ./public/init_data:/docker-entrypoint-initdb.d web: container_name: node-web-interface image: node:lts - user: 'node' + user: "node" working_dir: /home/node/app environment: NODE_ENV: development @@ -25,11 +25,11 @@ services: depends_on: - db ports: - - '3000:3000' + - "3000:3000" volumes: - - .:/home/node/app # Mount Client directory - - ./node_modules:/home/node/app/node_modules # Mount node_modules directory - command: 'npm run start' + - .:/home/node/app # Mount Client directory + - ./node_modules:/home/node/app/node_modules # Mount node_modules directory + command: "npm run start" volumes: users-database: diff --git a/index.js b/index.js index 54910ea..2f73061 100644 --- a/index.js +++ b/index.js @@ -2,17 +2,17 @@ // // ***************************************************** -const express = require('express'); // To build an application server or API +const express = require("express"); // To build an application server or API const app = express(); -const handlebars = require('express-handlebars'); -const Handlebars = require('handlebars'); -const path = require('path'); -const pgp = require('pg-promise')(); // To connect to the Postgres DB from the node server -const bodyParser = require('body-parser'); -const session = require('express-session'); // To set the session object. To store or access session data, use the `req.session`, which is (generally) serialized as JSON by the store. -const bcrypt = require('bcryptjs'); // To hash passwords -const axios = require('axios'); // To make HTTP requests from our server. We'll learn more about it in Part C. -const moment = require('moment'); // To extract current time data +const handlebars = require("express-handlebars"); +const Handlebars = require("handlebars"); +const path = require("path"); +const pgp = require("pg-promise")(); // To connect to the Postgres DB from the node server +const bodyParser = require("body-parser"); +const session = require("express-session"); // To set the session object. To store or access session data, use the `req.session`, which is (generally) serialized as JSON by the store. +const bcrypt = require("bcryptjs"); // To hash passwords +const axios = require("axios"); // To make HTTP requests from our server. We'll learn more about it in Part C. +const moment = require("moment"); // To extract current time data // ***************************************************** // @@ -20,133 +20,136 @@ const moment = require('moment'); // To extract current time data // create `ExpressHandlebars` instance and configure the layouts and partials dir. const hbs = handlebars.create({ - extname: 'hbs', - layoutsDir: __dirname + '/src/views/layouts', - partialsDir: __dirname + '/src/views/partials', + extname: "hbs", + layoutsDir: __dirname + "/src/views/layouts", + partialsDir: __dirname + "/src/views/partials", }); // database configuration // database configuration const dbConfig = { - host: 'db', // the database server - port: 5432, // the database port - database: "users_db", // the database name - user: "postgres", // the user account to connect with - password: "pwd", // the password of the user account + host: "db", // the database server + port: 5432, // the database port + database: "users_db", // the database name + user: "postgres", // the user account to connect with + password: "pwd", // the password of the user account }; - const db = pgp(dbConfig); // test your database db.connect() - .then(obj => { - console.log('Database connection successful'); // you can view this message in the docker compose logs - obj.done(); // success, release the connection; - }) - .catch(error => { - console.log('ERROR:', error.message || error); - }); + .then((obj) => { + console.log("Database connection successful"); // you can view this message in the docker compose logs + obj.done(); // success, release the connection; + }) + .catch((error) => { + console.log("ERROR:", error.message || error); + }); // ***************************************************** // // ***************************************************** // Register `hbs` as our view engine using its bound `engine()` function. -app.engine('hbs', hbs.engine); -app.set('view engine', 'hbs'); -app.set('views', path.join(__dirname, '/src/views')); +app.engine("hbs", hbs.engine); +app.set("view engine", "hbs"); +app.set("views", path.join(__dirname, "/src/views")); app.use(bodyParser.json()); // specify the usage of JSON for parsing request body. // initialize session variables -app.get('/welcome', (req, res) => { - res.json({status: 'success', message: 'Welcome!'}); +app.get("/welcome", (req, res) => { + res.json({ status: "success", message: "Welcome!" }); }); app.use( - session({ - secret: process.env.SESSION_SECRET, - saveUninitialized: false, - resave: false, - }) + session({ + secret: process.env.SESSION_SECRET, + saveUninitialized: false, + resave: false, + }) ); app.use( - bodyParser.urlencoded({ - extended: true, - }) + bodyParser.urlencoded({ + extended: true, + }) ); -app.use(async function(req, res, next) { - res.locals.user = req.session.user; +app.use(async function (req, res, next) { + res.locals.user = req.session.user; - if(res.locals.user) { - try { - res.locals.fav_teams = await getFavoriteTeamsForUser(res.locals.user.userid); - } catch (error) { - console.error('Error fetching favorite teams:', error); - } - } + if (res.locals.user) { + try { + res.locals.fav_teams = await getFavoriteTeamsForUser( + res.locals.user.userid + ); + } catch (error) { + console.error("Error fetching favorite teams:", error); + } + } - next(); + next(); }); // Serve static files from the 'public' directory -app.use(express.static(path.join(__dirname, '/src/assets'))); +app.use(express.static(path.join(__dirname, "/src/assets"))); // ***************************************************** // // ***************************************************** // Middleware to automatically update live scoreboard -const fetchMatchesData = require('./src/assets/middleware/navigation-bar/current-match-information'); +const fetchMatchesData = require("./src/assets/middleware/navigation-bar/current-match-information"); app.use(fetchMatchesData); //Middleware to automatically update in-game time abbreviations -const convert_time = require('./src/assets/middleware/navigation-bar/convert-time'); +const convert_time = require("./src/assets/middleware/navigation-bar/convert-time"); app.use(convert_time); - // Leagues Page Middleware -const fetchLeaguesData = require('./src/assets/middleware/leagues-page/get-current-league-information'); -const fetchLeagueScorerData = require('./src/assets/middleware/leagues-page/get-current-league-top-scorers'); +const fetchLeaguesData = require("./src/assets/middleware/leagues-page/get-current-league-information"); +const fetchLeagueScorerData = require("./src/assets/middleware/leagues-page/get-current-league-top-scorers"); -app.get('/league/:leagueID', [fetchLeaguesData, fetchLeagueScorerData], (req, res) => { - // Render the Handlebars view with league data - res.render('pages/leagues-page', { - leagueID: req.params.leagueID, - leagues: res.locals.leagues, - scorers: res.locals.topScorers // Assuming fetchLeagueScorerData sets the data in res.locals.scorers - }); -}); +app.get( + "/league/:leagueID", + [fetchLeaguesData, fetchLeagueScorerData], + (req, res) => { + // Render the Handlebars view with league data + res.render("pages/leagues-page", { + leagueID: req.params.leagueID, + leagues: res.locals.leagues, + scorers: res.locals.topScorers, // Assuming fetchLeagueScorerData sets the data in res.locals.scorers + }); + } +); // Clubs Page Middleware -const fetchClubsData = require('./src/assets/middleware/clubs-page/get-current-club-information'); +const fetchClubsData = require("./src/assets/middleware/clubs-page/get-current-club-information"); -app.get('/club/:clubID', [fetchClubsData], (req, res) => { - // Render the Handlebars view with league data +app.get("/club/:clubID", [fetchClubsData], (req, res) => { + // Render the Handlebars view with league data - var isFav = false; - var fav_teams = res.locals.fav_teams; - if(res.locals.user && fav_teams) - { - const isTeamIDInFavTeams = fav_teams.some(team => { - const teamIdInt = parseInt(team.teamid); - const clubIdInt = parseInt(req.params.clubID); - console.log('Checking team:', teamIdInt); - console.log('equal to', clubIdInt); - return teamIdInt === clubIdInt; - }); - if (isTeamIDInFavTeams) { - isFav = true - } - } - res.render('pages/clubs-page', { - isFav: isFav, - clubID: req.params.clubID, - clubs: res.locals.club - }); + var isFav = false; + var fav_teams = res.locals.fav_teams; + if (res.locals.user && fav_teams) { + const isTeamIDInFavTeams = fav_teams.some((team) => { + const teamIdInt = parseInt(team.teamid); + const clubIdInt = parseInt(req.params.clubID); + console.log("Checking team:", teamIdInt); + console.log("equal to", clubIdInt); + return teamIdInt === clubIdInt; + }); + if (isTeamIDInFavTeams) { + isFav = true; + } + } + res.render("pages/clubs-page", { + isFav: isFav, + clubID: req.params.clubID, + clubs: res.locals.club, + }); }); // ***************************************************** @@ -158,107 +161,125 @@ app.get('/club/:clubID', [fetchClubsData], (req, res) => { *************************/ // Redirect to the /login endpoint -app.get('/', (req, res) => { - res.redirect('/home'); +app.get("/", (req, res) => { + res.redirect("/home"); }); - + // Render login page for /login route -app.get('/login', (req, res) => { - res.render('/'); +app.get("/login", (req, res) => { + res.render("/"); }); - + // Trigger login form to check database for matching username and password -app.post('/login', async (req, res) => { - try { - // Check if username exists in DB - const user = await db.oneOrNone('SELECT * FROM users WHERE username = $1', req.body.username); - - if (!user) { - // Redirect user to login screen if no user is found with the provided username - return res.redirect('/register'); - } - - // Check if password from request matches with password in DB - const match = await bcrypt.compare(req.body.password, user.password); - - // Check if match returns no data - if (!match) { - // Render the login page with the message parameter - return res.render('/', { message: 'Password does not match' }); - } - else{ - // Save user information in the session variable - req.session.user = user; - req.session.save(); - - // Redirect user to the home page - res.redirect('/'); - } - } catch (error) { - // Direct user to login screen if no user is found with matching password - res.redirect('/register'); - } +app.post("/login", async (req, res) => { + try { + // Check if username exists in DB + const user = await db.oneOrNone( + "SELECT * FROM users WHERE username = $1", + req.body.username + ); + + if (!user) { + // Redirect user to login screen if no user is found with the provided username + return res.redirect("/register"); + } + + // Check if password from request matches with password in DB + const match = await bcrypt.compare(req.body.password, user.password); + + // Check if match returns no data + if (!match) { + // Render the login page with the message parameter + return res.render("/", { message: "Password does not match" }); + } else { + // Save user information in the session variable + req.session.user = user; + req.session.save(); + + // Redirect user to the home page + res.redirect("/"); + } + } catch (error) { + // Direct user to login screen if no user is found with matching password + res.redirect("/register"); + } }); - + /************************ Registration Page Routes *************************/ - + // Render registration page for /register route -app.get('/register', (req, res) => { - res.redirect('/'); +app.get("/register", (req, res) => { + res.redirect("/"); }); // Trigger Registration Form to Post -app.post('/register', async (req, res) => { - try { - if (!req.body.username || !req.body.password) { - // If username or password is missing, respond with status 400 and an error message - return res.status(400).json({ status: 'error', message: 'Invalid input' }); - } +app.post("/register", async (req, res) => { + try { + if (!req.body.username || !req.body.password) { + // If username or password is missing, respond with status 400 and an error message + return res + .status(400) + .json({ status: "error", message: "Invalid input" }); + } - // Check if the username already exists in the database - const existingUser = await db.oneOrNone('SELECT * FROM users WHERE username = $1', req.body.username); - if (existingUser) { - // If a user with the same username already exists, respond with status 409 and an error message - return res.status(409).json({ status: 'error', message: 'Username already exists' }); - } + // Check if the username already exists in the database + const existingUser = await db.oneOrNone( + "SELECT * FROM users WHERE username = $1", + req.body.username + ); + if (existingUser) { + // If a user with the same username already exists, respond with status 409 and an error message + return res + .status(409) + .json({ status: "error", message: "Username already exists" }); + } - // Hash the password using bcrypt library - const hash = await bcrypt.hash(req.body.password, 10); + // Hash the password using bcrypt library + const hash = await bcrypt.hash(req.body.password, 10); - // Insert username and hashed password into the 'users' table - await db.none('INSERT INTO users (username, password) VALUES ($1, $2)', [req.body.username, hash]); - const user = await db.oneOrNone('SELECT * FROM users WHERE username = $1', req.body.username); - req.session.user = user; - req.session.save(); - // Redirect user to the home page - res.redirect('/home'); - } catch (error) { - // If an error occurs during registration, respond with status 500 and an error message - res.status(500).json({ status: 'error', message: 'An error occurred during registration' }); - } + // Insert username and hashed password into the 'users' table + await db.none("INSERT INTO users (username, password) VALUES ($1, $2)", [ + req.body.username, + hash, + ]); + const user = await db.oneOrNone( + "SELECT * FROM users WHERE username = $1", + req.body.username + ); + req.session.user = user; + req.session.save(); + // Redirect user to the home page + res.redirect("/home"); + } catch (error) { + // If an error occurs during registration, respond with status 500 and an error message + res.status(500).json({ + status: "error", + message: "An error occurred during registration", + }); + } }); /************************ Home Page Routes *************************/ -app.get('/home', (req, res) => { - const loggedIn = req.session.user ? true : false; - res.render('pages/home'); +app.get("/home", (req, res) => { + const loggedIn = req.session.user ? true : false; + res.render("pages/home"); }); -app.get('/logout', (req, res) => { - req.session.destroy(err => { - if (err) { - console.error('Error destroying session:', err); - res.status(500).send('Internal Server Error'); - } else { - // Redirect to the same page after destroying the session - res.redirect('/'); // You can change '/' to the desired page if it's not the home page - } - }); +app.get("/logout", (req, res) => { + req.session.destroy((err) => { + if (err) { + console.error("Error destroying session:", err); + res.status(500).send("Internal Server Error"); + } else { + // Redirect to the same page after destroying the session + res.redirect("/"); // You can change '/' to the desired page if it's not the home page + } + }); }); /************************ @@ -266,7 +287,7 @@ app.get('/logout', (req, res) => { *************************/ // Import and call generateLeagueRoutes function -const generateLeagueRoutes = require('./src/assets/routes/league-pages/generate-league-routes'); +const generateLeagueRoutes = require("./src/assets/routes/league-pages/generate-league-routes"); generateLeagueRoutes(app); /************************ @@ -274,7 +295,7 @@ generateLeagueRoutes(app); *************************/ // Import and call generateLeagueRoutes function -const generateClubRoutes = require('./src/assets/routes/club-pages/generate-club-routes'); +const generateClubRoutes = require("./src/assets/routes/club-pages/generate-club-routes"); generateClubRoutes(app); /************************ @@ -284,80 +305,96 @@ generateClubRoutes(app); // Function to add a new row to the FavoriteTeams table // database configuration -app.post('/favteam/add', async (req, res, next) => { - try { - const { userID, teamID, teamName, teamLogo } = req.body; +app.post("/favteam/add", async (req, res, next) => { + try { + const { userID, teamID, teamName, teamLogo } = req.body; - // Check if the user is logged in - if (!req.session.user) { - return res.status(400).json({ message: 'Login or register to add a favorite team.' }); - } + // Check if the user is logged in + if (!req.session.user) { + return res + .status(400) + .json({ message: "Login or register to add a favorite team." }); + } - // Insert the new favorite team into the database - const query = { - text: 'INSERT INTO FavoriteTeams (UserID, TeamID, TeamName, TeamLogo) VALUES ($1, $2, $3, $4)', - values: [userID, teamID, teamName, teamLogo], - }; + // Insert the new favorite team into the database + const query = { + text: "INSERT INTO FavoriteTeams (UserID, TeamID, TeamName, TeamLogo) VALUES ($1, $2, $3, $4)", + values: [userID, teamID, teamName, teamLogo], + }; - await db.none(query); - console.log('New favorite team added successfully.'); - return res.status(200).json({ message: 'New favorite team added successfully.' }); - } catch (error) { - console.error('Error adding favorite team:', error); - return res.status(500).json({ error: 'Error adding favorite team' }); - } + await db.none(query); + console.log("New favorite team added successfully."); + return res + .status(200) + .json({ message: "New favorite team added successfully." }); + } catch (error) { + console.error("Error adding favorite team:", error); + return res.status(500).json({ error: "Error adding favorite team" }); + } }); -app.post('/favteam/remove', async (req, res) => { - try { - const { userID, teamID } = req.body; +app.post("/favteam/remove", async (req, res) => { + try { + const { userID, teamID } = req.body; - // Check if the team exists for the user - const existingTeam = await db.oneOrNone( - 'SELECT * FROM FavoriteTeams WHERE UserID = $1 AND TeamID = $2', - [userID, teamID] - ); + // Check if the team exists for the user + const existingTeam = await db.oneOrNone( + "SELECT * FROM FavoriteTeams WHERE UserID = $1 AND TeamID = $2", + [userID, teamID] + ); - // If the team does not exist for the user, return a 404 error - if (!existingTeam) { - return res.status(404).json({ message: 'This team is not in your favorites.' }); - } + // If the team does not exist for the user, return a 404 error + if (!existingTeam) { + return res + .status(404) + .json({ message: "This team is not in your favorites." }); + } - // Remove the favorite team from the database - await db.none( - 'DELETE FROM FavoriteTeams WHERE UserID = $1 AND TeamID = $2', - [userID, teamID] - ); + // Remove the favorite team from the database + await db.none( + "DELETE FROM FavoriteTeams WHERE UserID = $1 AND TeamID = $2", + [userID, teamID] + ); - console.log('Favorite team removed successfully.'); - return res.status(200).json({ message: 'Favorite team removed successfully.' }); - } catch (error) { - console.error('Error removing favorite team:', error); - - // If the error is a database error, return a 500 error - if (error instanceof QueryResultError) { - return res.status(500).json({ error: 'Database error occurred while removing favorite team' }); - } - - // If the error is a generic error, return a 400 error - return res.status(400).json({ error: 'Error occurred while removing favorite team' }); - } + console.log("Favorite team removed successfully."); + return res + .status(200) + .json({ message: "Favorite team removed successfully." }); + } catch (error) { + console.error("Error removing favorite team:", error); + + // If the error is a database error, return a 500 error + if (error instanceof QueryResultError) { + return res.status(500).json({ + error: "Database error occurred while removing favorite team", + }); + } + + // If the error is a generic error, return a 400 error + return res + .status(400) + .json({ error: "Error occurred while removing favorite team" }); + } }); async function getFavoriteTeamsForUser(userId) { - try { - // Execute the SQL query - const favoriteTeams = await db.any(` + try { + // Execute the SQL query + const favoriteTeams = await db.any( + ` SELECT * FROM FavoriteTeams WHERE UserID = $1; - `, userId);`a` - - // Return the result - return favoriteTeams; - } catch (error) { - console.error('Error fetching favorite teams:', error); - throw error; // Rethrow the error for handling at a higher level - } + `, + userId + ); + `a`; + + // Return the result + return favoriteTeams; + } catch (error) { + console.error("Error fetching favorite teams:", error); + throw error; // Rethrow the error for handling at a higher level + } } // ***************************************************** @@ -365,4 +402,4 @@ async function getFavoriteTeamsForUser(userId) { // ***************************************************** // starting the server and keeping the connection open to listen for more requests module.exports = app.listen(3000); -console.log('Server is listening on port 3000'); \ No newline at end of file +console.log("Server is listening on port 3000"); diff --git a/src/assets/css/generated-pages/club-pages/club-page-layouts.css b/src/assets/css/generated-pages/club-pages/club-page-layouts.css index db5cd96..9f84751 100644 --- a/src/assets/css/generated-pages/club-pages/club-page-layouts.css +++ b/src/assets/css/generated-pages/club-pages/club-page-layouts.css @@ -1,35 +1,20 @@ /* Main Contents Container (Below Header) */ -#club-page-contents-container -{ - display: flex; - flex-direction: row; +#club-page-contents-container { + display: flex; + flex-direction: row; } - /* Child Containers */ - - /* Left 20% of #club-page-contents-container */ - #club-information-container - { - width: 20%; - - display: flex; - flex-direction: column; - } - - /* Right 80% of #club-page-contents-container */ - #club-stats-and-players-container - { - width: 80%; - } - - - - - - - - - +/* Child Containers */ +/* Left 20% of #club-page-contents-container */ +#club-information-container { + width: 20%; + display: flex; + flex-direction: column; +} +/* Right 80% of #club-page-contents-container */ +#club-stats-and-players-container { + width: 80%; +} diff --git a/src/assets/css/generated-pages/club-pages/club-page-styling.css b/src/assets/css/generated-pages/club-pages/club-page-styling.css index 596d237..5f5c524 100644 --- a/src/assets/css/generated-pages/club-pages/club-page-styling.css +++ b/src/assets/css/generated-pages/club-pages/club-page-styling.css @@ -1,23 +1,20 @@ -#club-information-container -{ - margin-right: 20px; +#club-information-container { + margin-right: 20px; } -#club-favorite-button -{ - width: 35px; - transform: skewX(20deg); - margin-right: 25px; - filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.3)); - filter: outline(2px solid red); +#club-favorite-button { + width: 35px; + transform: skewX(20deg); + margin-right: 25px; + filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.3)); + filter: outline(2px solid red); } -#club-favorite-button:hover -{ - cursor: pointer; +#club-favorite-button:hover { + cursor: pointer; } #competition-logo { - width: 60px; - margin-right: 10px; -} \ No newline at end of file + width: 60px; + margin-right: 10px; +} diff --git a/src/assets/css/generated-pages/generated-pages-styling.css b/src/assets/css/generated-pages/generated-pages-styling.css index 18dcfdb..61c3050 100644 --- a/src/assets/css/generated-pages/generated-pages-styling.css +++ b/src/assets/css/generated-pages/generated-pages-styling.css @@ -5,18 +5,18 @@ */ .page-container { - /* --- SIZE CONTAINER --- */ - width: 100%; /* Set the width to the full width of screen */ - padding: 10px 100px; /* Create some distance between page boundries and elements */ - - /* --- FORMAT CHILD ITEMS (Table and Leading Scorers Cards) --- */ - display: flex; /* Enable flexbox layout */ - flex-direction: column; /* Arrange child elements vertically */ + /* --- SIZE CONTAINER --- */ + width: 100%; /* Set the width to the full width of screen */ + padding: 10px 100px; /* Create some distance between page boundries and elements */ + + /* --- FORMAT CHILD ITEMS (Table and Leading Scorers Cards) --- */ + display: flex; /* Enable flexbox layout */ + flex-direction: column; /* Arrange child elements vertically */ } .page-content-container { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } /* @@ -26,114 +26,114 @@ */ /* Stylization for League Information Header Card */ -.information-container -{ - /* --- POSITION CONTAINER --- */ - align-items: center; /* Center content vertically */ - margin: 20px; +.information-container { + /* --- POSITION CONTAINER --- */ + align-items: center; /* Center content vertically */ + margin: 20px; - /* --- SIZE CONTAINER --- */ - height: 100px; - width: fit-content; - padding: 10px 20px; /* Adjust padding as needed */ + /* --- SIZE CONTAINER --- */ + height: 100px; + width: fit-content; + padding: 10px 20px; /* Adjust padding as needed */ - /* --- STYLE CONTAINER --- */ - background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */ - transform: skewX(-20deg); /* Skew the banner to create a triangular side */ - box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4); + /* --- STYLE CONTAINER --- */ + background: linear-gradient( + to right, + white, + rgb(245, 245, 245), + rgb(227, 227, 227) + ); /* Gradient from white to gray */ + transform: skewX(-20deg); /* Skew the banner to create a triangular side */ + box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.4); - /* --- FORMAT CHILD ITEMS (logo, league name, flag) --- */ - display: flex; /* Enable flexbox layout */ - flex-direction: row; /* Arrange child elements horizontally */ + /* --- FORMAT CHILD ITEMS (logo, league name, flag) --- */ + display: flex; /* Enable flexbox layout */ + flex-direction: row; /* Arrange child elements horizontally */ } /* Adds Red Diagonal Strip at the end of the #league-information-container */ -.information-container::after -{ - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - width: 8px; /* Width of the red strip */ - background-color: red; /* Red color */ +.information-container::after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: 8px; /* Width of the red strip */ + background-color: red; /* Red color */ } - /* +/* =========================== LEAGUE INFORMATION CHILD ITEMS =========================== */ - /* Styling for League Logo in League Information Header */ - #generated-page-header-logo - { - margin: 0px 30px; - transform: skewX(20deg); /* Skew the banner to create a triangular side */ - height: 80%; - } +/* Styling for League Logo in League Information Header */ +#generated-page-header-logo { + margin: 0px 30px; + transform: skewX(20deg); /* Skew the banner to create a triangular side */ + height: 80%; +} - /* Styling for League Title in League Information Header */ - #generated-page-header-title - { - transform: skewX(20deg); /* Skew the banner to create a triangular side */ - margin-right: 20px; - } +/* Styling for League Title in League Information Header */ +#generated-page-header-title { + transform: skewX(20deg); /* Skew the banner to create a triangular side */ + margin-right: 20px; +} - /* Styling for Flag in League Information Header */ - #generated-page-header-flag - { - transform: skewX(20deg); /* Skew the banner to create a triangular side */ - height: 20px; - margin-right: 130px; - } +/* Styling for Flag in League Information Header */ +#generated-page-header-flag { + transform: skewX(20deg); /* Skew the banner to create a triangular side */ + height: 20px; + margin-right: 130px; +} /* ============================================= CARDS IN PAGE BODY ============================================= */ - + /* Styling for All Card Containers on Generated Pages */ -.card-container -{ - /* --- POSITION CONTAINER --- */ - margin: 0 10px; - margin-bottom: 20px; +.card-container { + /* --- POSITION CONTAINER --- */ + margin: 0 10px; + margin-bottom: 20px; - /* --- SIZE CONTAINER --- */ - padding: 15px; + /* --- SIZE CONTAINER --- */ + padding: 15px; - /* --- STYLE CONTAINER --- */ - background: linear-gradient(to top, rgb(216, 216, 216), rgb(236, 236, 236), rgb(241, 240, 240)); - border: 1px solid gray; - box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5); + /* --- STYLE CONTAINER --- */ + background: linear-gradient( + to top, + rgb(216, 216, 216), + rgb(236, 236, 236), + rgb(241, 240, 240) + ); + border: 1px solid gray; + box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5); } /* Styling for All Tables on Generated Pages */ -table -{ - width: 100%; - padding: 15px; +table { + width: 100%; + padding: 15px; - /* Table Header Styling */ - th - { - border-bottom: 3px solid red; /* Add red bottom border */ - } + /* Table Header Styling */ + th { + border-bottom: 3px solid red; /* Add red bottom border */ + } - /* Data in Row Style */ - td - { - padding: 5px; - } + /* Data in Row Style */ + td { + padding: 5px; + } } /* Styling for All Tables Designated to Alternate on Generated Pages */ -.alternating-table tbody tr:nth-child(odd) -{ - /* Every Odd Row in Table Style */ - background-color: #d2d2d2; /* Light gray for odd rows */ +.alternating-table tbody tr:nth-child(odd) { + /* Every Odd Row in Table Style */ + background-color: #d2d2d2; /* Light gray for odd rows */ } /* @@ -143,28 +143,24 @@ table */ /* Hover Styling for All Card Containers on Generated Pages */ -.card-container:hover -{ - transform: scale(1.01); /* Scale the row by 1.1 on hover */ - box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3); +.card-container:hover { + transform: scale(1.01); /* Scale the row by 1.1 on hover */ + box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3); } /* Hover Styling for All Tables Designated to Alternate on Generated Pages */ -.alternating-table tbody tr:hover -{ - /* Create border around row on hover */ - border: 1px solid lightgray; - border-radius: 10px; +.alternating-table tbody tr:hover { + /* Create border around row on hover */ + border: 1px solid lightgray; + border-radius: 10px; - /* Make club logo larger on hover */ - #league-table-club-logo - { - width: 32px; - } + /* Make club logo larger on hover */ + #league-table-club-logo { + width: 32px; + } - /* Undeline club name on hover */ - #league-table-club-name-column - { - text-decoration: underline; /* Add underline effect */ - } -} \ No newline at end of file + /* Undeline club name on hover */ + #league-table-club-name-column { + text-decoration: underline; /* Add underline effect */ + } +} diff --git a/src/assets/css/homepage/homepage.css b/src/assets/css/homepage/homepage.css index edf1235..a32bea4 100644 --- a/src/assets/css/homepage/homepage.css +++ b/src/assets/css/homepage/homepage.css @@ -6,7 +6,7 @@ /* Styling for text at top of the page */ #leagues-header { - font-family: 'Scottsdale-Italic'; + font-family: "Scottsdale-Italic"; display: inline-block; /* Ensure the width is based on content */ border-bottom: 1.5px solid #999696; /* Adjust the color and thickness as needed */ } @@ -24,7 +24,12 @@ height: 150px; margin: 20px; text-align: center; /* Center the content horizontally */ - background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */ + background: linear-gradient( + to right, + white, + rgb(245, 245, 245), + rgb(227, 227, 227) + ); /* Gradient from white to gray */ padding: 10px; /* Adjust padding as needed */ position: relative; /* Needed for absolute positioning */ overflow: hidden; /* Hide the overflowing skewed content */ @@ -45,14 +50,13 @@ transform: skewX(20deg); /* Skew the banner to create a triangular side */ } - #league-card:hover { transform: skewX(-20deg) scale(1.05); /* Increase scale on hover to make it pop */ box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Add box-shadow on hover for depth effect */ } #league-card::after { - content: ''; + content: ""; position: absolute; top: 0; right: 0; @@ -61,7 +65,6 @@ background-color: red; /* Red color */ } - #logo { width: 30%; /* Set width for logo */ max-height: 100px; @@ -77,5 +80,3 @@ max-height: 80px; max-width: 250px; } - - diff --git a/src/assets/js/club-page/favorite-button.js b/src/assets/js/club-page/favorite-button.js index 3d0651c..593ad75 100644 --- a/src/assets/js/club-page/favorite-button.js +++ b/src/assets/js/club-page/favorite-button.js @@ -1,73 +1,71 @@ -document.addEventListener("DOMContentLoaded", function() { - var favoriteButton = document.getElementById("club-favorite-button"); - if (favoriteButton) { - favoriteButton.addEventListener("click", function() { - var userID = document.getElementById("userID").value; - var teamID = document.getElementById("teamID").value; - var teamName = document.getElementById("teamName").value; - var teamLogo = document.getElementById("teamLogo").value; - - if (favoriteButton.src.includes("/favorited.png")) { - removeFavoriteTeam(userID, teamID); - } else { - addFavoriteTeam(userID, teamID, teamName, teamLogo); - } - }); - } +document.addEventListener("DOMContentLoaded", function () { + var favoriteButton = document.getElementById("club-favorite-button"); + if (favoriteButton) { + favoriteButton.addEventListener("click", function () { + var userID = document.getElementById("userID").value; + var teamID = document.getElementById("teamID").value; + var teamName = document.getElementById("teamName").value; + var teamLogo = document.getElementById("teamLogo").value; + + if (favoriteButton.src.includes("/favorited.png")) { + removeFavoriteTeam(userID, teamID); + } else { + addFavoriteTeam(userID, teamID, teamName, teamLogo); + } + }); + } }); -async function addFavoriteTeam(userID, teamID, teamName, teamLogo){ - try { - const response = await fetch('/favteam/add', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - userID: userID, - teamID: teamID, - teamName: teamName, - teamLogo: teamLogo - }) - }); +async function addFavoriteTeam(userID, teamID, teamName, teamLogo) { + try { + const response = await fetch("/favteam/add", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + userID: userID, + teamID: teamID, + teamName: teamName, + teamLogo: teamLogo, + }), + }); - if (!response.ok) { - throw new Error('Failed to add favorite team'); - } + if (!response.ok) { + throw new Error("Failed to add favorite team"); + } - if (response.status === 200) { - console.log('New favorite team added successfully.'); - var favoriteButton = document.getElementById("club-favorite-button"); - favoriteButton.src = "/img/club-page/favorited.png"; - location.reload(); // Refresh the page - } - - } catch (error) { - console.error('Error adding favorite team:', error); - } + if (response.status === 200) { + console.log("New favorite team added successfully."); + var favoriteButton = document.getElementById("club-favorite-button"); + favoriteButton.src = "/img/club-page/favorited.png"; + location.reload(); // Refresh the page + } + } catch (error) { + console.error("Error adding favorite team:", error); + } } async function removeFavoriteTeam(userID, teamID) { - try { - const response = await fetch('/favteam/remove', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - userID: userID, - teamID: teamID - }) - }); - - if (response.status === 200) { - console.log('Favorite team removed successfully.'); - var favoriteButton = document.getElementById("club-favorite-button"); - favoriteButton.src = "/img/club-page/unfavorited.png"; - location.reload(); // Refresh the page - } + try { + const response = await fetch("/favteam/remove", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + userID: userID, + teamID: teamID, + }), + }); - } catch (error) { - console.error('Error removing favorite team:', error); - } + if (response.status === 200) { + console.log("Favorite team removed successfully."); + var favoriteButton = document.getElementById("club-favorite-button"); + favoriteButton.src = "/img/club-page/unfavorited.png"; + location.reload(); // Refresh the page + } + } catch (error) { + console.error("Error removing favorite team:", error); + } } diff --git a/src/assets/js/league-page/change-goal-difference-color.js b/src/assets/js/league-page/change-goal-difference-color.js index 200a052..ad082b3 100644 --- a/src/assets/js/league-page/change-goal-difference-color.js +++ b/src/assets/js/league-page/change-goal-difference-color.js @@ -1,29 +1,26 @@ -document.addEventListener("DOMContentLoaded", function() { - var goalDifferenceCells = document.querySelectorAll("#league-table-goal-difference-column"); // Selecting the cells in the goal_difference column +document.addEventListener("DOMContentLoaded", function () { + var goalDifferenceCells = document.querySelectorAll( + "#league-table-goal-difference-column" + ); // Selecting the cells in the goal_difference column - goalDifferenceCells.forEach(function(cell) { - var goalDifference = parseInt(cell.textContent); - var color; + goalDifferenceCells.forEach(function (cell) { + var goalDifference = parseInt(cell.textContent); + var color; - if (goalDifference < 0) - { - // Gradually darken the text color for negative goal differences - var darkenFactor = Math.ceil(goalDifference / -10); // Calculate the darken factor - var shade = Math.max(0, 255 - darkenFactor * 25); // Calculate the shade of red - color = "rgb(" + shade + ", 0, 0)"; // Create the color value - } - else if (goalDifference > 0) - { - // Gradually darken the text color for positive goal differences - var darkenFactor = Math.floor(goalDifference / 10); // Calculate the darken factor - var shade = Math.max(0, 155 - darkenFactor * 15); // Adjusted the starting point to make greens darker - color = "rgb(0, " + shade + ", 0)"; // Create the color value - } - else - { - color = "inherit"; // If goal difference is 0, leave text color unchanged - } + if (goalDifference < 0) { + // Gradually darken the text color for negative goal differences + var darkenFactor = Math.ceil(goalDifference / -10); // Calculate the darken factor + var shade = Math.max(0, 255 - darkenFactor * 25); // Calculate the shade of red + color = "rgb(" + shade + ", 0, 0)"; // Create the color value + } else if (goalDifference > 0) { + // Gradually darken the text color for positive goal differences + var darkenFactor = Math.floor(goalDifference / 10); // Calculate the darken factor + var shade = Math.max(0, 155 - darkenFactor * 15); // Adjusted the starting point to make greens darker + color = "rgb(0, " + shade + ", 0)"; // Create the color value + } else { + color = "inherit"; // If goal difference is 0, leave text color unchanged + } - cell.style.color = color; // Apply the calculated color - }); + cell.style.color = color; // Apply the calculated color + }); }); diff --git a/src/assets/js/navigation-bar/navigation-bar-follow.js b/src/assets/js/navigation-bar/navigation-bar-follow.js index 461bb8d..b3fcf63 100644 --- a/src/assets/js/navigation-bar/navigation-bar-follow.js +++ b/src/assets/js/navigation-bar/navigation-bar-follow.js @@ -2,44 +2,44 @@ // Function to add sticky behavior to the navbar function makeNavbarSticky() { - // Get the navigation bar element - var navbar = document.getElementById("navigation-bar-container"); - var accountPane = document.querySelector(".account-portal-container"); // Use querySelector instead of getElementByClassName + // Get the navigation bar element + var navbar = document.getElementById("navigation-bar-container"); + var accountPane = document.querySelector(".account-portal-container"); // Use querySelector instead of getElementByClassName - // Get the initial offset of the navbar from the top of the page - var navbarOffset = navbar.offsetTop; + // Get the initial offset of the navbar from the top of the page + var navbarOffset = navbar.offsetTop; - // Function to add sticky behavior when scrolling - function stickyNavbar() { - // Check if the current scroll position is greater than or equal to the initial offset of the navbar - if (window.pageYOffset >= navbarOffset) { - // Add the 'fixed-top' class to make the navbar sticky - navbar.classList.add("fixed-top"); - // Add padding to the body to prevent content from jumping when the navbar becomes sticky - document.body.style.paddingTop = navbar.offsetHeight + "px"; - - // Adjust the position of the account pane - accountPane.style.position = "fixed"; // Make the account pane fixed - accountPane.style.top = navbar.offsetHeight + 20 + 'px'; // Move the account pane below the navbar - } else { - // Remove the 'fixed-top' class to make the navbar non-sticky - navbar.classList.remove("fixed-top"); - // Reset the padding of the body - document.body.style.paddingTop = 0; - accountPane.style.position = "absolute"; // Make the account pane fixed - - // Set the top position of the account pane to be 150px off the top - accountPane.style.top = "160px"; - } - } + // Function to add sticky behavior when scrolling + function stickyNavbar() { + // Check if the current scroll position is greater than or equal to the initial offset of the navbar + if (window.pageYOffset >= navbarOffset) { + // Add the 'fixed-top' class to make the navbar sticky + navbar.classList.add("fixed-top"); + // Add padding to the body to prevent content from jumping when the navbar becomes sticky + document.body.style.paddingTop = navbar.offsetHeight + "px"; - // Call the stickyNavbar function when the page is scrolled - window.onscroll = function() { - stickyNavbar(); - }; + // Adjust the position of the account pane + accountPane.style.position = "fixed"; // Make the account pane fixed + accountPane.style.top = navbar.offsetHeight + 20 + "px"; // Move the account pane below the navbar + } else { + // Remove the 'fixed-top' class to make the navbar non-sticky + navbar.classList.remove("fixed-top"); + // Reset the padding of the body + document.body.style.paddingTop = 0; + accountPane.style.position = "absolute"; // Make the account pane fixed + + // Set the top position of the account pane to be 150px off the top + accountPane.style.top = "160px"; + } + } + + // Call the stickyNavbar function when the page is scrolled + window.onscroll = function () { + stickyNavbar(); + }; } // Call the makeNavbarSticky function when the page loads -window.onload = function() { - makeNavbarSticky(); +window.onload = function () { + makeNavbarSticky(); }; diff --git a/src/assets/js/navigation-bar/user/delete-account-favorite-club.js b/src/assets/js/navigation-bar/user/delete-account-favorite-club.js index 5953307..7ec44fa 100644 --- a/src/assets/js/navigation-bar/user/delete-account-favorite-club.js +++ b/src/assets/js/navigation-bar/user/delete-account-favorite-club.js @@ -1,36 +1,37 @@ -document.addEventListener("DOMContentLoaded", function() { - var deleteButtons = document.querySelectorAll("#account-delete-favorite-team-button-hover"); - deleteButtons.forEach(function(deleteButton) { - deleteButton.addEventListener("click", function() { - var userID = deleteButton.getAttribute("userID"); - var teamID = deleteButton.getAttribute("teamID"); - - if (deleteButton.src.includes("/delete-club-hover.png")) { - removeAccountFavoriteTeam(userID, teamID); - } - }); - }); +document.addEventListener("DOMContentLoaded", function () { + var deleteButtons = document.querySelectorAll( + "#account-delete-favorite-team-button-hover" + ); + deleteButtons.forEach(function (deleteButton) { + deleteButton.addEventListener("click", function () { + var userID = deleteButton.getAttribute("userID"); + var teamID = deleteButton.getAttribute("teamID"); + + if (deleteButton.src.includes("/delete-club-hover.png")) { + removeAccountFavoriteTeam(userID, teamID); + } + }); + }); }); async function removeAccountFavoriteTeam(userID, teamID) { - try { - const response = await fetch('/favteam/remove', { - method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify({ - userID: userID, - teamID: teamID - }) - }); - - if (response.status === 200) { - console.log('Favorite team removed successfully.'); - location.reload(); // Refresh the page - } + try { + const response = await fetch("/favteam/remove", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + userID: userID, + teamID: teamID, + }), + }); - } catch (error) { - console.error('Error removing favorite team:', error); - } + if (response.status === 200) { + console.log("Favorite team removed successfully."); + location.reload(); // Refresh the page + } + } catch (error) { + console.error("Error removing favorite team:", error); + } } diff --git a/src/assets/js/navigation-bar/user/login-and-register-page-linking.js b/src/assets/js/navigation-bar/user/login-and-register-page-linking.js index 384638f..da5e938 100644 --- a/src/assets/js/navigation-bar/user/login-and-register-page-linking.js +++ b/src/assets/js/navigation-bar/user/login-and-register-page-linking.js @@ -1,41 +1,34 @@ -$(document).ready(function() { +$(document).ready(function () { + // When #user is clicked + $("#user-profile-button").click(function () { + $("#register-screen-container").hide(); + // Toggle the visibility of the login container + $("#login-pane").toggle(); + }); - // When #user is clicked - $('#user-profile-button').click(function() { - - $('#register-screen-container').hide(); - // Toggle the visibility of the login container - $('#login-pane').toggle(); - }); - - $('#register-page-login-button').click(function (event) { - event.preventDefault(); // Prevent the default action of following the link - - $('#register-screen-container').hide(); - $('#login-pane').show(); - }); + $("#register-page-login-button").click(function (event) { + event.preventDefault(); // Prevent the default action of following the link + $("#register-screen-container").hide(); + $("#login-pane").show(); + }); }); $(document).ready(function () { - - // Listen for click event on the register button - $('#register-button').click(function (event) { - event.preventDefault(); // Prevent the default action of following the link + // Listen for click event on the register button + $("#register-button").click(function (event) { + event.preventDefault(); // Prevent the default action of following the link - $('#login-pane').hide(); - // Show the register container - $('#register-screen-container').show(); - }); - + $("#login-pane").hide(); + // Show the register container + $("#register-screen-container").show(); + }); }); -$(document).ready(function() { - - // When #user is clicked - $('#user-profile-button').click(function() { - - // Toggle the visibility of the login container - $('#account-pane').toggle(); - }); -}); \ No newline at end of file +$(document).ready(function () { + // When #user is clicked + $("#user-profile-button").click(function () { + // Toggle the visibility of the login container + $("#account-pane").toggle(); + }); +}); diff --git a/src/assets/middleware/clubs-page/get-current-club-information.js b/src/assets/middleware/clubs-page/get-current-club-information.js index 4e2d8ca..26e23e3 100644 --- a/src/assets/middleware/clubs-page/get-current-club-information.js +++ b/src/assets/middleware/clubs-page/get-current-club-information.js @@ -1,74 +1,77 @@ -const axios = require('axios'); +const axios = require("axios"); // Middleware function to fetch clubs data const fetchClubsData = async (req, res, next) => { - try { - // Extract club ID from the URL - const clubID = req.params.clubID; + try { + // Extract club ID from the URL + const clubID = req.params.clubID; - // Make GET request to the API endpoint using the club ID - const response = await axios.get(`http://api.football-data.org/v4/teams/${clubID}/?offset=&limit=`, { - headers: { - 'X-Auth-Token': '0aa1ed31245d4a36b1ef5a79150324b3', // Add your API key here - }, - }); + // Make GET request to the API endpoint using the club ID + const response = await axios.get( + `http://api.football-data.org/v4/teams/${clubID}/?offset=&limit=`, + { + headers: { + "X-Auth-Token": "0aa1ed31245d4a36b1ef5a79150324b3", // Add your API key here + }, + } + ); - // Extract relevant data from the API response - const clubData = response.data; - // res.locals.user = users - // Attach the data to res.locals - res.locals.club = { - area: { - id: clubData.area.id, - name: clubData.area.name, - code: clubData.area.code, - club_flag: clubData.area.flag, - }, - club_id: clubData.id, - name: clubData.name, - shortName: clubData.shortName, - tla: clubData.tla, - crest: clubData.crest, - address: clubData.address, - website: clubData.website, - founded: clubData.founded, - clubColors: clubData.clubColors, - venue: clubData.venue, - runningCompetitions: clubData.runningCompetitions.map(competition => ({ - id: competition.id, - name: competition.name, - code: competition.code, - type: competition.type, - emblem: competition.emblem - })), - coach: { - id: clubData.coach.id, - firstName: clubData.coach.firstName, - lastName: clubData.coach.lastName, - name: clubData.coach.name, - dateOfBirth: clubData.coach.dateOfBirth, - nationality: clubData.coach.nationality, - contract: { - start: clubData.coach.contract.start, - until: clubData.coach.contract.until - } - }, - squad: clubData.squad.map(player => ({ - id: player.id, - name: player.name, - position: player.position, - dateOfBirth: player.dateOfBirth, - nationality: player.nationality - })), - staff: clubData.staff, - lastUpdated: clubData.lastUpdated - }; - next(); - } catch (error) { - console.error('Error fetching clubs data:', error); - res.locals.club = null; // Set to null if there's an error - next(); // Call next middleware or route handler - } + // Extract relevant data from the API response + const clubData = response.data; + // res.locals.user = users + // Attach the data to res.locals + res.locals.club = { + area: { + id: clubData.area.id, + name: clubData.area.name, + code: clubData.area.code, + club_flag: clubData.area.flag, + }, + club_id: clubData.id, + name: clubData.name, + shortName: clubData.shortName, + tla: clubData.tla, + crest: clubData.crest, + address: clubData.address, + website: clubData.website, + founded: clubData.founded, + clubColors: clubData.clubColors, + venue: clubData.venue, + runningCompetitions: clubData.runningCompetitions.map((competition) => ({ + id: competition.id, + name: competition.name, + code: competition.code, + type: competition.type, + emblem: competition.emblem, + })), + coach: { + id: clubData.coach.id, + firstName: clubData.coach.firstName, + lastName: clubData.coach.lastName, + name: clubData.coach.name, + dateOfBirth: clubData.coach.dateOfBirth, + nationality: clubData.coach.nationality, + contract: { + start: clubData.coach.contract.start, + until: clubData.coach.contract.until, + }, + }, + squad: clubData.squad.map((player) => ({ + id: player.id, + name: player.name, + position: player.position, + dateOfBirth: player.dateOfBirth, + nationality: player.nationality, + })), + staff: clubData.staff, + lastUpdated: clubData.lastUpdated, + }; + next(); + } catch (error) { + console.error("Error fetching clubs data:", error); + res.locals.club = null; // Set to null if there's an error + next(); // Call next middleware or route handler + } }; module.exports = fetchClubsData; diff --git a/src/assets/routes/club-pages/generate-club-routes.js b/src/assets/routes/club-pages/generate-club-routes.js index d813205..d797b09 100644 --- a/src/assets/routes/club-pages/generate-club-routes.js +++ b/src/assets/routes/club-pages/generate-club-routes.js @@ -1,17 +1,15 @@ -const express = require('express'); +const express = require("express"); const app = express(); // generate-league-routes.js // Define a function to generate league routes module.exports = function generateClubRoutes(app) { - // Define a route to handle requests to "/league/:leagueName" - app.get('/club/:clubID', (req, res) => { - // Extract the league name from the URL parameters - const clubID = req.params.clubID; - // Render the league page template using Handlebars - res.render('pages/club-page', { clubID: clubID, }); - }); + // Define a route to handle requests to "/league/:leagueName" + app.get("/club/:clubID", (req, res) => { + // Extract the league name from the URL parameters + const clubID = req.params.clubID; + // Render the league page template using Handlebars + res.render("pages/club-page", { clubID: clubID }); + }); }; - - diff --git a/src/assets/routes/club-pages/redirect-to-club-url.js b/src/assets/routes/club-pages/redirect-to-club-url.js index d3ebcc5..6799294 100644 --- a/src/assets/routes/club-pages/redirect-to-club-url.js +++ b/src/assets/routes/club-pages/redirect-to-club-url.js @@ -1,17 +1,21 @@ // Add click event listener to club logos -document.querySelectorAll('#league-table-club-logo, #league-table-club-name-column, #league-top-scorers-logo, #league-top-scorers-club-name-column').forEach(element => { - element.addEventListener('click', (event) => { - // Get the club ID from the clicked club logo's clubID attribute - const clubId = element.getAttribute('clubID'); - redirectToClubPage(clubId); - }); -}); +document + .querySelectorAll( + "#league-table-club-logo, #league-table-club-name-column, #league-top-scorers-logo, #league-top-scorers-club-name-column" + ) + .forEach((element) => { + element.addEventListener("click", (event) => { + // Get the club ID from the clicked club logo's clubID attribute + const clubId = element.getAttribute("clubID"); + redirectToClubPage(clubId); + }); + }); // Function to redirect to the club page function redirectToClubPage(clubID) { - // Append the club ID to the URL - var url = "/club/" + clubID; + // Append the club ID to the URL + var url = "/club/" + clubID; - // Redirect to the club page - window.location.href = url; + // Redirect to the club page + window.location.href = url; } diff --git a/src/assets/routes/league-pages/generate-league-routes.js b/src/assets/routes/league-pages/generate-league-routes.js index ae7a9ff..7295674 100644 --- a/src/assets/routes/league-pages/generate-league-routes.js +++ b/src/assets/routes/league-pages/generate-league-routes.js @@ -1,17 +1,15 @@ -const express = require('express'); +const express = require("express"); const app = express(); // generate-league-routes.js // Define a function to generate league routes module.exports = function generateLeagueRoutes(app) { - // Define a route to handle requests to "/league/:leagueName" - app.get('/league/:leagueID', (req, res) => { - // Extract the league name from the URL parameters - const leagueID = req.params.leagueID; - // Render the league page template using Handlebars - res.render('pages/leagues-page', { leagueID: leagueID, user: user}); - }); + // Define a route to handle requests to "/league/:leagueName" + app.get("/league/:leagueID", (req, res) => { + // Extract the league name from the URL parameters + const leagueID = req.params.leagueID; + // Render the league page template using Handlebars + res.render("pages/leagues-page", { leagueID: leagueID, user: user }); + }); }; - - diff --git a/src/assets/routes/league-pages/get-team-names-for-registry.js b/src/assets/routes/league-pages/get-team-names-for-registry.js index 920bf33..c99487b 100644 --- a/src/assets/routes/league-pages/get-team-names-for-registry.js +++ b/src/assets/routes/league-pages/get-team-names-for-registry.js @@ -1,21 +1,21 @@ -const axios = require('axios'); +const axios = require("axios"); const fetchTeamNames = async (selectedLeague) => { - try { - const response = await axios({ - url: `http://api.football-data.org/v4/competitions/${selectedLeague}/teams`, - method: 'GET', - headers: { - 'X-Auth-Token': '0aa1ed31245d4a36b1ef5a79150324b3', - }, - }); - - const teams = response.data.teams.map(team => team.name); - return teams; - } catch (error) { - console.error('Error fetching teams data:', error); - return []; - } + try { + const response = await axios({ + url: `http://api.football-data.org/v4/competitions/${selectedLeague}/teams`, + method: "GET", + headers: { + "X-Auth-Token": "0aa1ed31245d4a36b1ef5a79150324b3", + }, + }); + + const teams = response.data.teams.map((team) => team.name); + return teams; + } catch (error) { + console.error("Error fetching teams data:", error); + return []; + } }; module.exports = fetchTeamNames; diff --git a/src/assets/routes/league-pages/redirect-to-league-url.js b/src/assets/routes/league-pages/redirect-to-league-url.js index 7200b4b..1d93d87 100644 --- a/src/assets/routes/league-pages/redirect-to-league-url.js +++ b/src/assets/routes/league-pages/redirect-to-league-url.js @@ -1,7 +1,7 @@ function redirectToLeaguePage(leagueID) { - // Append the league name to the URL - var url = "/league/" + leagueID; - - // Redirect to the league page - window.location.href = url; -} \ No newline at end of file + // Append the league name to the URL + var url = "/league/" + leagueID; + + // Redirect to the league page + window.location.href = url; +} diff --git a/src/views/partials/navigation-bar/user-menu/login.hbs b/src/views/partials/navigation-bar/user-menu/login.hbs index 975449a..f29fb80 100644 --- a/src/views/partials/navigation-bar/user-menu/login.hbs +++ b/src/views/partials/navigation-bar/user-menu/login.hbs @@ -1,6 +1,8 @@