added js and worked on Login feature(still in progress)

This commit is contained in:
Vishal Vunnam
2024-04-17 18:06:45 -06:00
parent 77b990cd1e
commit 6faec75ae2
15 changed files with 99 additions and 23 deletions

View File

@@ -33,6 +33,6 @@ services:
volumes:
- ../ProjectSourceCode:/home/node/app # Mount ProjectSourceCode directory
- ../ProjectSourceCode/node_modules:/home/node/app/node_modules # Mount node_modules directory
command: 'npm run testandrun'
command: 'npm run start'
volumes:
group-project:

View File

@@ -155,13 +155,15 @@ app.post('/login', async (req, res) => {
// Render the login page with the message parameter
return res.render('pages/home', { message: 'Password does not match' });
}
else{
// Save user information in the session variable
req.session.user = user;
req.session.save();
console.log(user);
// Redirect user to the home page
res.redirect('/home');
}
} catch (error) {
// Direct user to login screen if no user is found with matching password
res.redirect('/register');
@@ -203,7 +205,8 @@ app.post('/register', async (req, res) => {
*************************/
app.get('/home', (req, res) => {
res.render('pages/home');
const loggedIn = req.session.user ? true : false;
res.render('pages/home', { loggedIn: loggedIn, user: req.session.user});
});
/************************
@@ -222,6 +225,40 @@ generateLeagueRoutes(app);
const generateClubRoutes = require('./resources/routes/club-pages/generate-club-routes');
generateClubRoutes(app);
/************************
Favorite Team Database
*************************/
// Function to add a new row to the FavoriteTeams table
// database configuration
app.post('/courses/add', async (req, res) => {
const { userID, teamID, teamName, teamLogo } = req.body;
try {
const { team_count } = await db.one(
'SELECT COUNT(*) AS team_count FROM FavoriteTeams WHERE UserID = $1',
[userID]
);
if (team_count >= 5) {
console.log('User has reached the maximum number of favorite teams.');
return res.status(400).json({ message: 'User has reached the maximum number of favorite teams.' });
}
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' });
}
});
// *****************************************************
// <!-- Section 5 : Start Server-->
// *****************************************************

View File

@@ -5,8 +5,8 @@ CREATE TABLE users (
);
CREATE TABLE FavoriteTeams (
UserID INT REFERENCES users(UserID) ON DELETE CASCADE ON UPDATE CASCADE,
UserID INT,
TeamID INT,
TeamName VARCHAR(50),
PRIMARY KEY (UserID, TeamID)
TeamLogo VARCHAR(100)
);

View File

@@ -2,7 +2,35 @@ document.addEventListener("DOMContentLoaded", function() {
var favoriteButton = document.getElementById("club-favorite-button");
if (favoriteButton) {
favoriteButton.addEventListener("click", function() {
if (favoriteButton.src.includes("/favorited.png")) {
favoriteButton.src = "/img/club-page/unfavorited.png";
} else {
favoriteButton.src = "/img/club-page/favorited.png";
addFavoriteTeam(1, 65, 'Manchester City FC', 'https://crests.football-data.org/65.png');
}
});
}
});
});
async function addFavoriteTeam(userID, teamID, teamName, teamLogo) {
try {
const response = await fetch('/courses/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');
}
console.log('New favorite team added successfully.');
} catch (error) {
console.error('Error adding favorite team:', error);
}
}

View File

@@ -38,3 +38,4 @@ document.addEventListener("DOMContentLoaded", function() {
}
});

View File

@@ -63,7 +63,6 @@ const fetchClubsData = async (req, res, next) => {
staff: clubData.staff,
lastUpdated: clubData.lastUpdated
};
next();
} catch (error) {
console.error('Error fetching clubs data:', error);

View File

@@ -17,6 +17,8 @@ const fetchLeaguesData = async (req, res, next) => {
const leagueData = response.data;
// Attach the data to res.locals
res.locals.username = req.session.user.username;
console.log(req.session.user)
res.locals.league = {
area: {
league_flag: leagueData.area.flag,
@@ -39,7 +41,7 @@ const fetchLeaguesData = async (req, res, next) => {
draws: team.draw,
goal_difference: team.goalDifference,
points: team.points
}))
})),
};
next();
} catch (error) {

View File

@@ -11,7 +11,7 @@ module.exports = function generateClubRoutes(app) {
const clubID = req.params.clubID;
// Render the league page template using Handlebars
res.render('pages/club-page', { clubID: clubID });
res.render('pages/club-page', { clubID: clubID, user:user });
});
};

View File

@@ -8,10 +8,11 @@ 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
console.log("jskjfhskjhdfkjh")
const leagueID = req.params.leagueID;
const user = req.session.user;
// Render the league page template using Handlebars
res.render('pages/leagues-page', { leagueID: leagueID });
res.render('pages/leagues-page', { leagueID: leagueID, user: user});
});
};

View File

@@ -5,7 +5,7 @@
<img id="generated-page-header-logo" src="{{club.crest}}" alt="{{club.name}} Logo">
<h1 id="generated-page-header-title">{{club.name}}</h1>
<img id="generated-page-header-flag" src="{{club.area.club_flag}}" alt="{{club.name}} Flag">
<img id="club-favorite-button" src="/img/club-page/unfavorited.png" alt="Favorite Button">
<img id="club-favorite-button" src="/img/club-page/unfavorited.png" alt="Favorite Button" >
</div>
<div id="club-page-contents-container" class="page-content-container">

View File

@@ -4,17 +4,17 @@
<div class="row g-3" id="card-row">
<!-- 🇬🇧 Premier League -->
<a href="#" onclick="redirectToLeaguePage('2021')" class="card-link" id="league-card">
{{> homepage/league-card leagueName="Premier League" logo="./img/homepage/premier-league/icon.png" title="./img/homepage/premier-league/title.png"}}
{{> homepage/league-card leagueName="Premier League" logo="./img/homepage/premier-league/icon.png" title="./img/homepage/premier-league/title.png" }}
</a>
<!-- 🇪🇸 La Liga -->
<a href="#" onclick="redirectToLeaguePage('2014')" class="card-link" id="league-card">
{{> homepage/league-card leagueName="La Liga" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
{{> homepage/league-card leagueName="La Liga" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png" }}
</a>
<!-- 🇩🇪 Bundesliga -->
<a href="#" onclick="redirectToLeaguePage('2002')" class="card-link" id="league-card">
{{> homepage/league-card leagueName="Bundesliga" logo="./img/homepage/bundesliga/icon.png" title="./img/homepage/bundesliga/title.png"}}
{{> homepage/league-card leagueName="Bundesliga" logo="./img/homepage/bundesliga/icon.png" title="./img/homepage/bundesliga/title.png" }}
</a>
<!-- 🇮🇹 Serie A -->
@@ -24,12 +24,12 @@
<!-- 🇫🇷 Ligue 1 -->
<a href="#" onclick="redirectToLeaguePage('2015')" class="card-link" id="league-card">
{{> homepage/league-card leagueName="Ligue 1" logo="./img/homepage/ligue-1/icon.png" title="./img/homepage/ligue-1/title.png"}}
{{> homepage/league-card leagueName="Ligue 1" logo="./img/homepage/ligue-1/icon.png" title="./img/homepage/ligue-1/title.png" }}
</a>
<!-- 🇧🇷 Brasileirao -->
<a href="#" onclick="redirectToLeaguePage('2013')" class="card-link" id="league-card">
{{> homepage/league-card leagueName="Brasileirao" logo="./img/homepage/brasileirao/icon.png" title="./img/homepage/brasileirao/title.png"}}
{{> homepage/league-card leagueName="Brasileirao" logo="./img/homepage/brasileirao/icon.png" title="./img/homepage/brasileirao/title.png" }}
</a>
</div>

View File

@@ -0,0 +1,6 @@
<!-- Linking forms.css -->
<div class="login-page" id="login-page">
<div class="form-container" id="login-form">
<a>{{user.username}}</a>
</div>
</div>

View File

@@ -48,10 +48,12 @@
</div>
</nav>
<!-- Container for login section -->
{{#if user}}
<div class="container" id="login-container">
{{> navigation-bar/accountinfo}}
</div>
{{else}}
<div class="container" id="login-container">
{{> navigation-bar/login}}
</div>
{{/if}}