League route implementation put in place

This commit is contained in:
Lucas Patenaude
2024-04-11 03:43:44 -06:00
parent e05450a484
commit 7588cf9fbb
6 changed files with 32 additions and 31 deletions

View File

@@ -1,25 +0,0 @@
// create-league-routes.js
const express = require('express');
const exphbs = require('express-handlebars');
const app = express();
app.engine('hbs', exphbs({ extname: '.hbs' }));
app.set('view engine', 'hbs');
// Define the redirectToLeaguePage function
function redirectToLeaguePage(leagueName) {
window.location.href = '/views/pages/league-page/league-page.hbs?leagueName=' + encodeURIComponent(leagueName);
}
// 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/league-page', { leagueName });
});
// Export the app and redirectToLeaguePage function
module.exports = { app, redirectToLeaguePage };

View File

@@ -0,0 +1,12 @@
const express = require('express');
const app = express();
// Define a route to handle requests to "/league/:leagueName"
app.get('/league/:leagueName', (req, res) => {
// Extract the league name from the URL parameters
const leagueName = req.params.leagueName;
// Render the league page template using Handlebars
res.render('partials/league-page/league-page', { leagueName: leagueName });
});

View File

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

View File

@@ -4,7 +4,7 @@
<div class="row g-3" id="card-row">
<!-- 🇬🇧 Premier League -->
<a href="#" onclick="redirectToLeaguePage('Premier League')" class="card-link" id="league-card">
{{> homepage/league-card leaguename="Premier League" logo="./img/homepage/premier-league/icon.png" title="./img/homepage/premier-league/title.png"}}
{{> homepage/league-card leagueName="Premier League" logo="./img/homepage/premier-league/icon.png" title="./img/homepage/premier-league/title.png"}}
</a>
<!-- 🇪🇸 La Liga -->
@@ -14,22 +14,22 @@
<!-- 🇩🇪 Bundesliga -->
<a href="#" onclick="redirectToLeaguePage('Bundesliga')" class="card-link" id="league-card">
{{> homepage/league-card leagueName="Bundesliga" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
{{> homepage/league-card leagueName="Bundesliga" logo="./img/homepage/bundesliga/icon.png" title="./img/homepage/bundesliga/title.png"}}
</a>
<!-- 🇮🇹 Serie A -->
<a href="#" onclick="redirectToLeaguePage('Serie A')" class="card-link" id="league-card">
{{> homepage/league-card leagueName="Serie A" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
{{> homepage/league-card leagueName="Serie A" logo="./img/homepage/serie-a/icon.png" title="./img/homepage/serie-a/title.png"}}
</a>
<!-- 🇫🇷 Ligue 1 -->
<a href="#" onclick="redirectToLeaguePage('Ligue 1')" class="card-link" id="league-card">
{{> homepage/league-card leagueName="Ligue 1" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
{{> homepage/league-card leagueName="Ligue 1" logo="./img/homepage/ligue-1/icon.png" title="./img/homepage/ligue-1/title.png"}}
</a>
<!-- 🇧🇷 Brasileirao -->
<a href="#" onclick="redirectToLeaguePage('Brasileirao')" class="card-link" id="league-card">
{{> homepage/league-card leagueName="Brasileirao" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
{{> homepage/league-card leagueName="Brasileirao" logo="./img/homepage/brasileirao/icon.png" title="./img/homepage/brasileirao/title.png"}}
</a>
</div>

View File

@@ -10,6 +10,10 @@
<script src="js/navigation-bar/navigation-bar-follow.js"></script>
<script src="js/navigation-bar/user/login.js"></script>
<!-- Homepage Scripts -->
<script src="js/homepage/redirect-to-league-url.js"></script>
<script src="js/homepage/generate-league-routes.js"></script>
<!-- Include Bootstrap JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>

View File

@@ -1,6 +1,9 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="description" content="" />
<!-- Set the Content-Security-Policy header to allow inline scripts -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';">
<!-- Linking forms.css -->
<link rel="stylesheet" type="text/css" href="css/login_and_registration.css">