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

League page stylization added

Browse Source
This commit is contained in:
Lucas Patenaude
2024-04-13 15:58:02 -06:00
parent 5644bd1b28
commit c35f242d27
3 changed files with 37 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
ProjectSourceCode/src/resources/css/league-page/league-page.css
View File

@@ -7,6 +7,7 @@
#league-information-container {
height: 100px;
background-color: #f0f0f0; /* Example background color */
display: flex;
/* Add any other styling you need for the league information container */
}

6
ProjectSourceCode/src/resources/routes/league-pages/get-current-league-information.js
View File

@@ -17,7 +17,7 @@ const fetchLeaguesData = async (req, res, next) => {
const leagueData = response.data;
// Attach the data to res.locals
res.locals.leagues = [{
res.locals.league = {
competition: {
league_id: leagueData.competition.id,
league_name: leagueData.competition.name,
@@ -31,11 +31,11 @@ const fetchLeaguesData = async (req, res, next) => {
team_crest: team.team.crest
},
})),
}];
};
next();
} catch (error) {
console.error('Error fetching leagues data:', error);
res.locals.leagues = []; // Set an empty array if there's an error
res.locals.league = null; // Set to null if there's an error
next(); // Call next middleware or route handler
}
};

68
ProjectSourceCode/src/views/pages/league-page.hbs
View File

@@ -1,36 +1,34 @@
<!-- pages/league.hbs -->
<div class="container" id="league-page-body">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>League Information</title>
</head>
<body>
<h1>League Information</h1>
<p>League ID: {{leagueID}}</p>
{{#if leagues}}
<ul>
{{#each leagues}}
<li>
<h2>{{competition.league_name}}</h2>
<img src="{{competition.league_emblem}}" alt="{{competition.league_name}} Emblem">
<h3>Standings</h3>
<ol>
{{#each standings}}
<li>
<span>Position: {{table.league_position}}</span>
<span>Team Name: {{table.team_name}}</span>
<img src="{{table.team_crest}}" alt="{{table.team_name}} Crest">
</li>
{{/each}}
</ol>
</li>
{{/each}}
</ul>
{{else}}
<p>No league data available</p>
{{/if}}
</body>
</html>
<!-- Container for all league information (logo, name, country, etc. ) <- top 100px -->
<div class="container" id="league-information-container">
<img src="{{league.competition.league_emblem}}" alt="{{league.competition.league_name}} Emblem">
<h2>{{league.competition.league_name}}</h2>
</div>
<!-- Container to display all stats for league <- bottom rest of the container -->
<div class="container" id="league-stats-container">
<!-- Container to display league table <- split 50% -->
<div class="container" id="league-table-container">
<h3>Standings</h3>
<ol>
{{#each league.standings}}
<li>
<span>Position: {{table.league_position}}</span>
<span>Team Name: {{table.team_name}}</span>
<img src="{{table.team_crest}}" alt="{{table.team_name}} Crest">
</li>
{{/each}}
</ol>
</div>
<!-- Container to display top scorers for league <- Split 50% -->
<div class="container" id="top-scorers-container">
</div>
</div>
</div>