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

Merge branch 'main' of https://github.com/LucasPatenaude/ScoreSpot

Browse Source
This commit is contained in:
dominicjk
2024-04-10 16:55:12 -06:00
parent 5fd55ad4c4 fc850f47ae
commit a941195bdd
37 changed files with 876 additions and 636 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
ProjectSourceCode/src/views/layouts/main.hbs
View File

@@ -1,18 +1,20 @@
<!DOCTYPE html>
<html lang="en" class="h-100">
<!-- TODO: Add the head.hbs partial here -->
<head>
<!-- Add your head content here -->
{{> head}}
</head>
<body>
<!-- Render the scoreboard header on every page -->
{{> navigation-bar/scoreboard-header/scoreboard-header}}
<!-- Add your navigation -->
{{> navigation-bar/nav}}
<!-- TODO: Add the nav.hbs partial here -->
{{> nav}}
<!-- Render the main content of each page -->
{{{body}}}
<!-- TODO: Add the footer.hbs partial here -->
<!-- Add your footer -->
{{> footer}}
</body>
</html>

40
ProjectSourceCode/src/views/pages/home.hbs
View File

@@ -1,29 +1,37 @@
<body>
<div class="container mt-5">
<h1 class="mb-4">Welcome</h1>
<div class="container mt-5" id="page-container">
<h1 class="mb-4 underlined-header" id="leagues-header">Leagues</h1>
<div class="card-container">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-2 g-3">
<div class="row g-3" id="card-row">
<!-- 🇬🇧 Premier League -->
{{> league_table eventName="Event Name" eventDateTime="Date and Time"}}
<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"}}
</a>
<!-- 🇪🇸 La Liga -->
{{> league_table eventName="Event Name" eventDateTime="Date and Time"}}
<a href="#" onclick="redirectToLeaguePage('La Liga')" class="card-link" id="league-card">
{{> homepage/league-card leagueName="La Liga" logo="./img/homepage/la-liga/icon.png" title="./img/homepage/la-liga/title.png"}}
</a>
<!-- 🇩🇪 Bundesliga -->
{{> league_table eventName="Event Name" eventDateTime="Date and Time"}}
<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"}}
</a>
<!-- 🇮🇹 Serie A -->
{{> league_table eventName="Event Name" eventDateTime="Date and Time"}}
<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"}}
</a>
<!-- 🇫🇷 Ligue 1 -->
{{> league_table eventName="Event Name" eventDateTime="Date and Time"}}
<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"}}
</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"}}
</a>
<!-- 🇧🇷 Brasilerao -->
{{> league_table eventName="Event Name" eventDateTime="Date and Time"}}
</div>
</div>
</div>
</body>
</div>

44
ProjectSourceCode/src/views/pages/register.hbs
View File

@@ -1,4 +1,3 @@
<body class="container">
<div class="register-page">
<div class="form-container">
<h1 class="mt-5 mb-4">Register</h1>
@@ -34,47 +33,4 @@
<p class="mt-3">Already have an account? <a href="/login">Login</a></p>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const league_select = document.getElementById('league_dropdown');
const team_select = document.getElementById('team_dropdown');
league_select.addEventListener('change', updateTeamSelect);
function updateTeamSelect() {
var selectedLeague = league_select.value;
var teamSelect = team_select;
// Clear existing options
teamSelect.innerHTML = "";
// Add options based on the selected value from the first select element
if (selectedLeague === "La Liga") {
// Add options for La Liga
addOption(teamSelect, "Option 1 for LL", "option1A");
addOption(teamSelect, "Option 2 for LL", "option2A");
} else if (selectedLeague === "Serie A") {
// Add options for Serie A
addOption(teamSelect, "Team 1 in Serie A", "option1B");
addOption(teamSelect, "Team 2 in Serie A", "option2B");
} else {
// Add options for Bundesliga
addOption(teamSelect, "Option 1 for Bun", "option1C");
addOption(teamSelect, "Option 2 for Bun", "option2C");
}
}
function addOption(selectElement, text, value) {
var option = document.createElement("option");
option.text = text;
option.value = value;
selectElement.add(option);
}
});
</script>
</body>

21
ProjectSourceCode/src/views/partials/footer.hbs
View File

@@ -1,8 +1,15 @@
<footer class="text-center text-muted w-100 mt-auto fixed-bottom">
<p>
&copy; 2024 - CSCI 3308 Group 6
</p>
<footer class="text-center text-muted w-100 mt-auto fixed-bottom">
<p>
&copy; 2024 - CSCI 3308 Group 6
</p>
<!-- TODO: Add the <script><script /> tag to include bootstrap javascript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</footer>
<!-- Navigation Bar Scripts -->
<script src="js/navigation-bar/navigation-bar-follow.js"></script>
<script src="js/navigation-bar/user/login.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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</footer>

20
ProjectSourceCode/src/views/partials/head.hbs
View File

@@ -1,20 +1,20 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="description" content="" />
<!-- Linking forms.css -->
<link rel="stylesheet" type="text/css" href="css/login_and_registration.css">
<link rel="stylesheet" type="text/css" href="css/home-screen.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..900&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/homepage/homepage.css">
<!-- Navigation Bar Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/navigation-bar/navigation-bar.css">
<link rel="stylesheet" type="text/css" href="css/navigation-bar/login.css">
<!-- Scoreboard Header Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/navigation-bar/scoreboard-header/scoreboard.css">
<link rel="stylesheet" type="text/css" href="css/navigation-bar/scoreboard-header/game-card.css">
<title>Group 6 Final Project</title>
<!-- Include Bootstrap CSS -->
<body class="h-100 d-flex flex-column"></body>
</head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

7
ProjectSourceCode/src/views/partials/homepage/league-card.hbs Normal file
View File

@@ -0,0 +1,7 @@
<div class="banner">
<div class="content" id="card-contents">
<img src={{logo}} height="120">
<img src={{title}} height="80">
{{flag}}
</div>
</div>

1
ProjectSourceCode/src/views/partials/league-page/league-page.hbs Normal file
View File

@@ -0,0 +1 @@
<h1>Hello</h1>

34
ProjectSourceCode/src/views/partials/league_table.hbs
View File

@@ -1,34 +0,0 @@
<div class="col-md-4 mb-4">
<div class="card">
<div class="card-body">
<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>

8
ProjectSourceCode/src/views/pages/login.hbs → ProjectSourceCode/src/views/partials/navigation-bar/login.hbs
View File

@@ -1,7 +1,6 @@
<body class="container">
<!-- Linking forms.css -->
<div class="login-page">
<div class="form-container">
<div class="login-page" id="login-page">
<div class="form-container" id="login-form">
<h1 class="mt-5 mb-4">Login</h1>
<!-- Check if message variable is present to display message partial -->
@@ -21,11 +20,10 @@
<input type="password" class="form-control" id="password" name="password" required>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="submit" id="login-submit">Submit</button>
</form>
<p class="mt-3">Don't have an account? <a href="/register">Register</a></p>
</div>
</div>
</body>

57
ProjectSourceCode/src/views/partials/navigation-bar/nav.hbs Normal file
View File

@@ -0,0 +1,57 @@
<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- HTML structure -->
<nav class="navbar navbar-expand-lg navbar-dark" id="navigation-bar-container">
<div class="container-fluid d-flex justify-content align-items-center">
<div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation" style="margin-right: 20px;">
<span class="navbar-toggler-icon"></span>
</button>
<a class="logo" id="logo" href="/home">ScoreSpot</a>
<div id="line"></div>
</div>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0" id="navbar-list">
<li class="nav-item">
<a class="nav-link" href="#">Premier League</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bundesliga</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">La Liga</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Serie A</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ligue 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Brasileirao</a>
</li>
</ul>
</div>
<div id="user" class="user-icon">
<img src="img/navigation-bar/user.png" alt="Your Image" class="img-fluid">
</div>
</div>
</nav>
<!-- Container for login section -->
<div id="login-container" class="container">
{{> navigation-bar/login}}
</div>

31
ProjectSourceCode/src/views/partials/navigation-bar/scoreboard-header/game-card.hbs Normal file
View File

@@ -0,0 +1,31 @@
<div class="game-card" id="game-card">
<div class="score-card-body">
<!-- Left side (70%) -->
<div class="card-team-container">
<!-- Team 1 Name with Score -->
<div class="team">
<img src="{{ homeTeam.crest }}" alt="{{ homeTeam.name }} Crest">
<p id="team-name">{{ homeTeam.name }}</p> <!-- {{team1.name}} -->
<p id="team-score">{{ score.homeScore }}</p>
</div>
<!-- Team 2 Name with Score -->
<div class="team">
<img src="{{ awayTeam.crest }}" alt="{{ awayTeam.name }} Crest">
<p id="team-name">{{ awayTeam.name }}</p> <!-- {{team1.name}} -->
<p id="team-score">{{ score.awayScore }}</p>
</div>
</div>
<!-- Right side (30%) -->
<div class="card-game-information-container">
<!-- Time -->
<div class="game-info">
<p id="time">{{ minute }}</p>
</div>
</div>
</div>
</div>

10
ProjectSourceCode/src/views/partials/navigation-bar/scoreboard-header/scoreboard-header.hbs Normal file
View File

@@ -0,0 +1,10 @@
<div class="scoreboard-container" id="scoreboard">
<div class="scoreboard-league-container">
<!-- Iterate over matches and insert a game card for each -->
{{#each matches}}
{{> navigation-bar/scoreboard-header/game-card}}
{{/each}}
</div>
</div>