Basic framework added for league pages to be templated

ProjectSourceCode/docker-compose.yaml

@@ -29,7 +29,7 @@ services:
     depends_on:
       - db
     ports:
-      - '3000:3000'
+      - '3000:3001'
     volumes:
       - ../ProjectSourceCode:/home/node/app  # Mount ProjectSourceCode directory
       - ../ProjectSourceCode/node_modules:/home/node/app/node_modules  # Mount node_modules directory

ProjectSourceCode/src/index.js

@@ -165,5 +165,5 @@ app.get('/', (req, res) => {
 // <!-- Section 5 : Start Server-->
 // *****************************************************
 // starting the server and keeping the connection open to listen for more requests
-app.listen(3000);
+app.listen(3001);
 console.log('Server is listening on port 3000');

ProjectSourceCode/src/resources/js/homepage/routes.js

@@ -0,0 +1,18 @@
+const express = require('express');
+const app = express();
+const exphbs = require('express-handlebars');
+
+app.engine('hbs', exphbs({ extname: '.hbs' }));
+app.set('view engine', 'hbs');
+
+// Define a route to render the league-page.hbs template
+app.get('/league-page/:leagueName', (req, res) => {
+  const leagueName = req.params.leagueName;
+  // Here you might fetch data related to the clicked league
+  // Pass the data to the template and render it
+  res.render('league-page', { leagueName });
+});
+
+app.listen(3000, () => {
+  console.log('Server is running on http://localhost:3000');
+});

ProjectSourceCode/src/views/pages/home.hbs

@@ -5,7 +5,9 @@
       <div class="row g-3">
         
         <!-- 🇬🇧 Premier League -->
-        {{> league_table leagueName="Premier League" logo="./img/home-screen/premier-league/icon.png" title="./img/home-screen/premier-league/title.png"}}
+        <a href="league-page.hbs" class="card-link">
+          {{> league_table leagueName="Premier League" logo="./img/home-screen/premier-league/icon.png" title="./img/home-screen/premier-league/title.png"}}
+        </a>
         
         <!-- 🇪🇸 La Liga -->
         {{> league_table leagueName="La Liga" logo="./img/home-screen/la-liga/icon.png" title="./img/home-screen/la-liga/title.png"}}
@@ -22,6 +24,13 @@
         <!-- 🇧🇷 Brasilerao -->
         {{> league_table leagueName="Brasileirao" logo="./img/home-screen/la-liga/icon.png" title="./img/home-screen/la-liga/title.png"}}
         
+        /* Script to generate league URLs */
+        <script>
+          function redirectToLeaguePage(leagueName) 
+          {
+            window.location.href = '/league-page/' + encodeURIComponent(leagueName);
+          }
+        </script>
       </div>
     </div>
   </div>

ProjectSourceCode/src/views/partials/league_table.hbs

@@ -1,35 +1,3 @@
-{{!-- <div class="col-md-4 mb-4">
-    <div class="card">
-        <div class="">
-            <h5 class="card-title">League Name</h5> <!-- Insert Name using Handlesbars and API -->
-            <table class="table">
-                <thead>
-                    <tr>
-                        <th>Position</th>
-                        <th>Club Name</th>
-                        <th>Wins</th>
-                        <th>Draws</th>
-                        <th>Losses</th>
-                        <th>Points</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <!-- Add rows dynamically using backend data -->
-                    <tr>
-                        <td>1</td>
-                        <td>Club A</td>
-                        <td>10</td>
-                        <td>5</td>
-                        <td>3</td>
-                        <td>35</td>
-                    </tr>
-                    <!-- Add more rows if needed -->
-                </tbody>
-            </table>
-            <a href="#" class="btn btn-primary">View League</a>
-        </div>
-    </div>
-</div> --}}
 <div class="banner">
    <div class="content">
       <img src={{logo}} height="120">