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
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
res.render('pages/clubs-page', {
clubID: req.params.clubID,
@@ -117,8 +118,6 @@ app.get('/club/:clubID', [fetchClubsData], (req, res) => {
});
});
// *****************************************************
// <!-- Section 5 : API Routes -->
// *****************************************************

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

@@ -4,6 +4,30 @@
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 {
height: 100px;
width: fit-content;
@@ -31,8 +55,9 @@
}
#club-logo {
margin: 0px 30px;
margin: 0px 20px;
transform: skewX(20deg); /* Skew the banner to create a triangular side */
height: 80px;
}
#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 */
#standings-table
#standings-table, .table
{
width: 100%;
padding: 15px;
@@ -43,7 +43,8 @@
/* Data in Row Style */
td
{
padding: 5px;
padding: 15px;
}
/* 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;
// 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: {
'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
res.locals.topScorers = {
scorers: scorerData.scorers.map(player => ({
player: {
player_id: player.player.id,
player_name: player.player.name,
},
team: {
team_id: player.player.id,
team_name: player.team.name,
team_crest: player.team.crest,
},
games_played: player.playedMatches,
goals: player.goals,
playerID: scorer.player.id,
playerName: scorer.player.name,
goals: scorer.numberOfGoals,
}))
};

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

@@ -7,25 +7,11 @@
</head>
<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-players-container">
<h2>Players</h2>
<ul id="players-list"></ul>
<table id="players-table">
<table id="players-table" class = "table">
<thead>
<tr>
<th>Name</th>
@@ -49,14 +35,63 @@
</div>
<div class="container" id="top-scorers-container">
<h2>Top Scorers</h2>
<h2>Information</h2>
<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>
<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>

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

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