lucaspatenaude/ScoreSpot
1
0
Fork 0
Code Projects 1 Releases 1 Wiki Activity

club homepage complete

Browse Source
This commit is contained in:
dominicjk
2024-04-15 14:14:23 -06:00
parent 411e6bf584
commit 0bd33dcd1a
6 changed files with 90 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
ProjectSourceCode/src/index.js
View File

@@ -108,8 +108,9 @@ app.get('/league/:leagueID', [fetchLeaguesData, fetchLeagueScorerData], (req, re
// Clubs Page Middleware // Clubs Page Middleware
const fetchClubsData = require('./resources/middleware/clubs-page/get-current-club-information'); const fetchClubsData = require('./resources/middleware/clubs-page/get-current-club-information');
const fetchClubTopScorers = require('./resources/middleware/clubs-page/get-current-club-top-scorers');
app.get('/club/:clubID', [fetchClubsData], (req, res) => { app.get('/club/:clubID', [fetchClubsData, fetchClubTopScorers], (req, res) => {
// Render the Handlebars view with league data // Render the Handlebars view with league data
res.render('pages/clubs-page', { res.render('pages/clubs-page', {
clubID: req.params.clubID, clubID: req.params.clubID,
@@ -117,8 +118,6 @@ app.get('/club/:clubID', [fetchClubsData], (req, res) => {
}); });
}); });
// ***************************************************** // *****************************************************
// <!-- Section 5 : API Routes --> // <!-- Section 5 : API Routes -->
// ***************************************************** // *****************************************************

27
ProjectSourceCode/src/resources/css/club-pages/club-page.css
View File

@@ -4,6 +4,30 @@
width: 100%; width: 100%;
} }
#club-page-body {
padding: 50px;
}
#club-crest {
text-align: center;
}
#club-area-flag-row {
text-align: center;
}
#club-area-flag {
width : 150px;
}
#club-players-container {
padding: 30px;
}
#top-scorers-container {
padding : 30px
}
#club-information-container { #club-information-container {
height: 100px; height: 100px;
width: fit-content; width: fit-content;
@@ -31,8 +55,9 @@
} }
#club-logo { #club-logo {
margin: 0px 30px; margin: 0px 20px;
transform: skewX(20deg); /* Skew the banner to create a triangular side */ transform: skewX(20deg); /* Skew the banner to create a triangular side */
height: 80px;
} }
#club-title { #club-title {

5
ProjectSourceCode/src/resources/css/league-pages/league-table.css
View File

@@ -29,7 +29,7 @@
} }
/* Table that holds all the standing information */ /* Table that holds all the standing information */
#standings-table #standings-table, .table
{ {
width: 100%; width: 100%;
padding: 15px; padding: 15px;
@@ -43,7 +43,8 @@
/* Data in Row Style */ /* Data in Row Style */
td td
{ {
padding: 5px; padding: 15px;
} }
/* Every Odd Row in Table Style */ /* Every Odd Row in Table Style */

16
ProjectSourceCode/src/resources/middleware/clubs-page/get-current-club-top-scorers.js
View File

@@ -7,7 +7,7 @@ const fetchLeagueScorerData = async (req, res, next) => {
const leagueID = req.params.leagueID; const leagueID = req.params.leagueID;
// Make GET request to the API endpoint using the league ID // Make GET request to the API endpoint using the league ID
const response = await axios.get(`http://api.football-data.org/v4/competitions/${leagueID}/scorers?season&limit=20`, { const response = await axios.get(`http://api.football-data.org/v4/teams/${teamID}/scorers?limit=5`, {
headers: { headers: {
'X-Auth-Token': '0aa1ed31245d4a36b1ef5a79150324b3', // Add your API key here 'X-Auth-Token': '0aa1ed31245d4a36b1ef5a79150324b3', // Add your API key here
}, },
@@ -19,17 +19,9 @@ const fetchLeagueScorerData = async (req, res, next) => {
// Attach the data to res.locals // Attach the data to res.locals
res.locals.topScorers = { res.locals.topScorers = {
scorers: scorerData.scorers.map(player => ({ scorers: scorerData.scorers.map(player => ({
player: { playerID: scorer.player.id,
player_id: player.player.id, playerName: scorer.player.name,
player_name: player.player.name, goals: scorer.numberOfGoals,
},
team: {
team_id: player.player.id,
team_name: player.team.name,
team_crest: player.team.crest,
},
games_played: player.playedMatches,
goals: player.goals,
})) }))
}; };

73
ProjectSourceCode/src/views/pages/clubs-page.hbs
View File

@@ -7,25 +7,11 @@
</head> </head>
<body> <body>
<div class="container" id="club-page-body"> <div class="container" id="club-page-body">
<div class="container" id="club-information-container">
<img id="club-logo" src="{{club.crest}}" alt="Club Emblem">
<h1 id="club-title"></h1>
<img id="club-flag" src="{{club.area.club_flag}}" alt="Club Flag">
</div>
<div>
<p id="club-founded"></p>
<p id="club-website"></p>
<p id="club-address"></p>
<p id="club-colors"></p>
</div>
<div class="container" id="club-stats-container"> <div class="container" id="club-stats-container">
<div class="container" id="club-players-container"> <div class="container" id="club-players-container">
<h2>Players</h2> <h2>Players</h2>
<ul id="players-list"></ul> <ul id="players-list"></ul>
<table id="players-table"> <table id="players-table" class = "table">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@@ -49,14 +35,63 @@
</div> </div>
<div class="container" id="top-scorers-container"> <div class="container" id="top-scorers-container">
<h2>Top Scorers</h2> <h2>Information</h2>
<ul id="scorers-list"></ul> <ul id="scorers-list"></ul>
</div> <table id="top-scorers-table" class = "table">
<tbody>
<tr>
<td id = "club-crest">
<img src = {{club.crest}}>
</td>
</tr>
<tr>
<td id = "club-area-flag-row">
<img id = "club-area-flag" src = {{club.area.club_flag}}>
</td>
</tr>
<tr>
<td>
<span style="font-weight: bold;">Club Address:</span><br>
{{club.address}}
</td>
</tr>
<tr>
<td>
<span style="font-weight: bold;">Founded</span><br>
{{club.founded}}
</td>
</tr>
<tr>
<td>
<span style="font-weight: bold;">Manager</span><br>
<span>Name : {{club.coach.name}}</span><br>
<span>Nationality : {{club.coach.nationality}}</span><br>
<span>DOB : {{club.coach.dateOfBirth}}</span><br>
<span>contract start : {{club.coach.contract.start}}</span><br>
<span>contract end : {{club.coach.contract.until}}</span><br>
</td>
</tr>
</tbody>
</table>
<div class="container" id="competitions-container">
<h2>Competitions</h2> <h2>Competitions</h2>
<ul id="competitions-list"></ul> <ul id="competitions-list"></ul>
</div> <table id="players-table" class = "table">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
{{#each club.runningCompetitions}}
<tr>
<td>{{name}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div> </div>
</div> </div>

2
ProjectSourceCode/src/views/pages/leagues-page.hbs
View File

@@ -19,7 +19,7 @@
<!-- Container containing all league table stats --> <!-- Container containing all league table stats -->
<div id="table-stats-container" class="stats-container"> <div id="table-stats-container" class="stats-container">
<table id="standings-table"> <table id="standings-table" class = "table">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>