Changes to try and get league infromation in. Still a work in progress

ProjectSourceCode/src/index.js

@@ -84,25 +84,24 @@ app.use(express.static(path.join(__dirname, 'resources')));
 // Importing middleware
 const fetchMatchesData = require('./resources/routes/navigation-bar/current-match-information');
 const convert_time = require('./resources/js/navigation-bar/scoreboard-header/convert-time');
-const fetchLeaguesData = require('./resources/routes/league-pages/get-current-league-information');
 
 // Using middleware
 app.use(fetchMatchesData);
 app.use(convert_time);
-app.use(fetchLeaguesData);
+
+// Middleware function to fetch leagues data
+const fetchLeaguesData = require('./resources/routes/league-pages/get-current-league-information');
+
+// Define the route for fetching league data
+app.get('/league/:leagueID', fetchLeaguesData, (req, res) => {
+    // Handle the response here
+    res.json(res.locals.leagues);
+});
 
 // *****************************************************
 // <!-- Section 5 : API Routes -->
 // *****************************************************
 
-/************************ 
- League Page Routes
-*************************/
-
-// Import and call generateLeagueRoutes function
-const generateLeagueRoutes = require('./resources/routes/league-pages/generate-league-routes');
-generateLeagueRoutes(app);
-
 /************************ 
  Login Page Routes
 *************************/
@@ -187,6 +186,14 @@ app.get('/home', (req, res) => {
     res.render('pages/home');
 });
 
+/************************ 
+ League Page Routes
+*************************/
+
+// Import and call generateLeagueRoutes function
+const generateLeagueRoutes = require('./resources/routes/league-pages/generate-league-routes');
+generateLeagueRoutes(app);
+
 // *****************************************************
 // <!-- Section 5 : Start Server-->
 // *****************************************************

ProjectSourceCode/src/resources/js/homepage/redirect-to-league-url.js

@@ -1,6 +1,6 @@
-function redirectToLeaguePage(leagueName, leagueID) {
+function redirectToLeaguePage(leagueID) {
   // Append the league name to the URL
-  var url = "/league/" + leagueName.toLowerCase().replace(/\s+/g, '-');
+  var url = "/league/" + leagueID;
   
   // Redirect to the league page
   window.location.href = url;

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

@@ -3,50 +3,37 @@ const axios = require('axios');
 // Middleware function to fetch leagues data
 const fetchLeaguesData = async (req, res, next) => {
     try {
-        // Array of years to fetch leagues data
-        const league_ids = [2021]; /* Add more league IDs if needed */
+        // Extract league ID from the URL
+        const leagueID = req.params.leagueID;
 
-        // Array to store all leagues data
-        let allLeagues = [];
+        // Make GET request to the API endpoint using the league ID
+        const response = await axios.get(`http://api.football-data.org/v4/competitions/${leagueID}/standings?season`, {
+            headers: {
+                'X-Auth-Token': '0aa1ed31245d4a36b1ef5a79150324b3', // Add your API key here
+            },
+        });
 
-        // Loop through each year and fetch leagues data
-        for (const league_id of league_ids) {
-            const response = await axios({
-                url: `http://api.football-data.org/v4/competitions/${league_id}/standings?season`,
-                method: 'GET',
-                headers: {
-                    'X-Auth-Token': '0aa1ed31245d4a36b1ef5a79150324b3', // Add your API key here
+        // Extract relevant data from the API response
+        const leagueData = response.data;
+
+        // Attach the data to res.locals
+        res.locals.leagues = [{
+            competition: {
+                league_id: leagueData.competition.id,
+                league_name: leagueData.competition.name,
+                league_emblem: leagueData.competition.emblem
+            },
+            standings: leagueData.standings[0].table.map(team => ({
+                table: {
+                    league_position: team.position,
+                    team_id: team.team.id,
+                    team_name: team.team.name,
+                    team_crest: team.team.crest
                 },
-            });
-
-            // Extract relevant data from the API response
-            const league_data = response.data.standings[0].table.map(team => ({
-                competition: {
-                    league_id: response.data.competition.id,
-                    league_name: response.data.competition.name,
-                    league_emblem: response.data.competition.emblem
-                },
-                standings: {
-                    table: {
-                        league_position: team.position,
-                        team_id: team.team.id,
-                        team_name: team.team.name,
-                        team_crest: team.team.crest
-                    },
-                },
-            }));
-
-            // Concatenate leagues data to allLeagues array
-            allLeagues = allLeagues.concat(league_data);
-        }
-
-        // Attach all leagues data to res.locals
-        res.locals.leagues = allLeagues;
+            })),
+        }];
         next();
-    } 
-    
-    catch (error) 
-    {
+    } catch (error) {
         console.error('Error fetching leagues data:', error);
         res.locals.leagues = []; // Set an empty array if there's an error
         next(); // Call next middleware or route handler

ProjectSourceCode/src/views/pages/league-page.hbs

@@ -1,23 +1,40 @@
-<div class="container" id="league-page-body">
+<!-- league-page.hbs -->
 
-    <!-- Container for all league information (logo, name, country, etc. ) <- top 100px -->
-    <div class="container" id="league-information-container">
-        <img src="{{ competition.league_emblem }}" alt="League Emblem">
-    </div>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ league_name }}</title>
+</head>
+<body>
+    <h1>{{ leagueID }}</h1>
+    <h1>{{ league_name }}</h1>
 
-    <!-- Container to display all stats for league <- bottom rest of the container -->
-    <div class="container" id="league-stats-container">
+    <!-- Display league emblem -->
+    {{#if leagueEmblem}}
+        <img src="{{ leagueEmblem }}" alt="{{ leagueName }} Emblem">
+    {{/if}}
 
-        <!-- Container to display league table <- split 50% -->
-        <div class="container" id="league-table-container">
-            
-
-        </div>
-
-        <!-- Container to display top scorers for league <- Split 50% -->
-        <div class="container" id="top-scorers-container">
-
-        </div>
-
-    </div>
-</div>
+    <!-- Display league standings -->
+    <h2>Standings</h2>
+    <table>
+        <thead>
+            <tr>
+                <th>Position</th>
+                <th>Team</th>
+                <th>Crest</th>
+            </tr>
+        </thead>
+        <tbody>
+            {{#each standings}}
+                <tr>
+                    <td>{{ this.league_position }}</td>
+                    <td>{{ this.team_name }}</td>
+                    <td><img src="{{ this.team_crest }}" alt="{{ this.team_name }} Crest"></td>
+                </tr>
+            {{/each}}
+        </tbody>
+    </table>
+</body>
+</html>