Implement AJAX-based scoreboard updates in index.html
This commit is contained in:
165
static/script.js
Normal file
165
static/script.js
Normal file
@@ -0,0 +1,165 @@
|
||||
// Function to fetch scoreboard data using AJAX
|
||||
function fetchScoreboardData() {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("GET", "/scoreboard", true);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === XMLHttpRequest.DONE) {
|
||||
if (xhr.status === 200) {
|
||||
updateScoreboard(JSON.parse(xhr.responseText));
|
||||
} else {
|
||||
console.error("Failed to fetch scoreboard data.");
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
|
||||
// Function to update scoreboard with fetched data
|
||||
function updateScoreboard(data) {
|
||||
var liveGamesSection = document.getElementById("live-games-section");
|
||||
var preGamesSection = document.getElementById('pre-games-section');
|
||||
var finalGamesSection = document.getElementById('final-games-section');
|
||||
|
||||
if (liveGamesSection) {
|
||||
var liveGamesExist = data && data.live_games && data.live_games.length > 0;
|
||||
if (liveGamesExist) {
|
||||
document.getElementById('live-games').innerText = "Live Games"
|
||||
liveGamesSection.innerHTML = generateGameBoxes(data.live_games, 'LIVE');
|
||||
}
|
||||
}
|
||||
|
||||
if (preGamesSection) {
|
||||
var preGamesExist = data && data.pre_games && data.pre_games.length > 0;
|
||||
if (preGamesExist) {
|
||||
document.getElementById('on-later').innerText = "On Later"
|
||||
preGamesSection.innerHTML = generateGameBoxes(data.pre_games, 'PRE');
|
||||
}
|
||||
}
|
||||
|
||||
if (finalGamesSection) {
|
||||
var finalGamesExist = data && data.final_games && data.final_games.length > 0;
|
||||
if (finalGamesExist) {
|
||||
document.getElementById('game-over').innerText = "Game Over"
|
||||
finalGamesSection.innerHTML = generateGameBoxes(data.final_games, 'FINAL');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Function to generate HTML for game boxes
|
||||
function generateGameBoxes(games, state) {
|
||||
var html = '';
|
||||
games.forEach(function(game) {
|
||||
if (game['Game State'] === state) {
|
||||
html += '<div class="game-box">';
|
||||
if (state === 'LIVE') {
|
||||
if (game['Time Running']) {
|
||||
html += '<div class="live-dot"></div>'; // Display the red dot if the game is live
|
||||
}
|
||||
html += '<div class="team-info">';
|
||||
html += '<img src="' + game['Away Logo'] + '" alt="' + game['Away Team'] + ' Logo" class="team-logo">';
|
||||
html += '<div class="team-info-column">';
|
||||
html += '<span class="team-name">' + game['Away Team'] + '</span>';
|
||||
html += '<span class="team-sog">SOG: ' + game['Away Shots'] + '</span>';
|
||||
html += '<span class="team-power-play">' + game['Away Power Play'] + '</span>';
|
||||
html += '</div>';
|
||||
html += '<span class="team-score">' + game['Away Score'] + '</span>';
|
||||
html += '</div>';
|
||||
html += '<div class="team-info">';
|
||||
html += '<img src="' + game['Home Logo'] + '" alt="' + game['Home Team'] + ' Logo" class="team-logo">';
|
||||
html += '<div class="team-info-column">';
|
||||
html += '<span class="team-name">' + game['Home Team'] + '</span>';
|
||||
html += '<span class="team-sog">SOG: ' + game['Home Shots'] + '</span>';
|
||||
html += '<span class="team-power-play">' + game['Home Power Play'] + '</span>';
|
||||
html += '</div>';
|
||||
html += '<span class="team-score">' + game['Home Score'] + '</span>';
|
||||
html += '<div class="game-info">';
|
||||
if (game['Intermission']) {
|
||||
html += '<div class="live-state-intermission">'
|
||||
if (game['Period'] == 1 ) {
|
||||
html += '1st Int';
|
||||
}
|
||||
if (game['Period'] == 2 ) {
|
||||
html += '2nd Int';
|
||||
}
|
||||
if (game['Period'] == 3 ) {
|
||||
html += '3rd Int';
|
||||
}
|
||||
html += '</div>';
|
||||
html += '<div class="live-time-intermission">' + game['Time Remaining'] + '</div>';
|
||||
} else {
|
||||
html += '<div class="live-state">';
|
||||
if (game['Period'] == 1 ) {
|
||||
html += '1st';
|
||||
}
|
||||
else if (game['Period'] == 2 ) {
|
||||
html += '2nd';
|
||||
}
|
||||
else if (game['Period'] == 3 ) {
|
||||
html += '3rd';
|
||||
}
|
||||
else {
|
||||
html += 'OT';
|
||||
}
|
||||
html += '</div>';
|
||||
html += '<div class="live-time">' + game['Time Remaining'] + '</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
html += '<div class="game-info>';
|
||||
html += '<strong>Game Score: </strong>' + game['Priority'];
|
||||
html += '</div>';
|
||||
html += '</div>';
|
||||
} else if (state === 'PRE') {
|
||||
html += '<div class="pre-state">' + game['Start Time'] + '</div>';
|
||||
html += '<div class="team-info">';
|
||||
html += '<img src="' + game['Away Logo'] + '" alt="' + game['Away Team'] + ' Logo" class="team-logo">';
|
||||
html += '<span class="team-name">' + game['Away Team'] + '</span>';
|
||||
html += '<span class="team-record">' + game['Away Record'] + '</span>';
|
||||
html += '</div>';
|
||||
html += '<div class="team-info">';
|
||||
html += '<img src="' + game['Home Logo'] + '" alt="' + game['Home Team'] + ' Logo" class="team-logo">';
|
||||
html += '<span class="team-name">' + game['Home Team'] + '</span>';
|
||||
html += '<span class="team-record">' + game['Home Record'] + '</span>';
|
||||
html += '</div>';
|
||||
} else if (state === 'FINAL') {
|
||||
html += '<div class="final-state">';
|
||||
if (game['Last Period Type'] === 'REG') {
|
||||
html += 'FINAL';
|
||||
} else if (game['Last Period Type'] === 'OT') {
|
||||
html += 'FINAL/OT';
|
||||
} else {
|
||||
html += 'FINAL/SO';
|
||||
}
|
||||
html += '</div>';
|
||||
html += '<div class="team-info">';
|
||||
html += '<img src="' + game['Away Logo'] + '" alt="' + game['Away Team'] + ' Logo" class="team-logo">';
|
||||
html += '<div class="team-info-column">';
|
||||
html += '<span class="team-name">' + game['Away Team'] + '</span>';
|
||||
html += '<span class="team-sog">SOG: ' + game['Away Shots'] + '</span>';
|
||||
html += '</div>';
|
||||
html += '<span class="team-score">' + game['Away Score'] + '</span>';
|
||||
html += '</div>';
|
||||
html += '<div class="team-info">';
|
||||
html += '<img src="' + game['Home Logo'] + '" alt="' + game['Home Team'] + ' Logo" class="team-logo">';
|
||||
html += '<div class="team-info-column">';
|
||||
html += '<span class="team-name">' + game['Home Team'] + '</span>';
|
||||
html += '<span class="team-sog">SOG: ' + game['Home Shots'] + '</span>';
|
||||
html += '</div>';
|
||||
html += '<span class="team-score">' + game['Home Score'] + '</span>';
|
||||
html += '</div>';
|
||||
}
|
||||
html += '</div>';
|
||||
}
|
||||
});
|
||||
return html;
|
||||
}
|
||||
|
||||
// Function to reload the scoreboard every 20 seconds
|
||||
function autoRefresh() {
|
||||
fetchScoreboardData();
|
||||
setTimeout(autoRefresh, 5000); // 20 seconds
|
||||
}
|
||||
|
||||
// Call the autoRefresh function when the page loads
|
||||
window.onload = function() {
|
||||
autoRefresh();
|
||||
};
|
||||
@@ -240,4 +240,4 @@ h1 {
|
||||
.final-state {
|
||||
font-size: 12px; /* Decrease font size for better readability */
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user