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 { #league-information-container {
height: 100px; height: 100px;
background-color: #f0f0f0; /* Example background color */ background-color: #f0f0f0; /* Example background color */
display: flex;
/* Add any other styling you need for the league information container */ /* 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; const leagueData = response.data;
// Attach the data to res.locals // Attach the data to res.locals
res.locals.leagues = [{ res.locals.league = {
competition: { competition: {
league_id: leagueData.competition.id, league_id: leagueData.competition.id,
league_name: leagueData.competition.name, league_name: leagueData.competition.name,
@@ -31,11 +31,11 @@ const fetchLeaguesData = async (req, res, next) => {
team_crest: team.team.crest team_crest: team.team.crest
}, },
})), })),
}]; };
next(); next();
} catch (error) { } catch (error) {
console.error('Error fetching leagues data:', 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 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> <!-- Container for all league information (logo, name, country, etc. ) <- top 100px -->
<html lang="en"> <div class="container" id="league-information-container">
<head> <img src="{{league.competition.league_emblem}}" alt="{{league.competition.league_name}} Emblem">
<meta charset="UTF-8"> <h2>{{league.competition.league_name}}</h2>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> </div>
<title>League Information</title>
</head> <!-- Container to display all stats for league <- bottom rest of the container -->
<body> <div class="container" id="league-stats-container">
<h1>League Information</h1>
<p>League ID: {{leagueID}}</p> <!-- Container to display league table <- split 50% -->
{{#if leagues}} <div class="container" id="league-table-container">
<ul>
{{#each leagues}} <h3>Standings</h3>
<li> <ol>
<h2>{{competition.league_name}}</h2> {{#each league.standings}}
<img src="{{competition.league_emblem}}" alt="{{competition.league_name}} Emblem"> <li>
<h3>Standings</h3> <span>Position: {{table.league_position}}</span>
<ol> <span>Team Name: {{table.team_name}}</span>
{{#each standings}} <img src="{{table.team_crest}}" alt="{{table.team_name}} Crest">
<li> </li>
<span>Position: {{table.league_position}}</span> {{/each}}
<span>Team Name: {{table.team_name}}</span> </ol>
<img src="{{table.team_crest}}" alt="{{table.team_name}} Crest">
</li> </div>
{{/each}}
</ol> <!-- Container to display top scorers for league <- Split 50% -->
</li> <div class="container" id="top-scorers-container">
{{/each}}
</ul> </div>
{{else}}
<p>No league data available</p> </div>
{{/if}} </div>
</body>
</html>