Merge pull request #10 from JoshNotWright/feature/better-refresh
Implement AJAX-based scoreboard updates in index.html
This commit is contained in:
GitHub
26
app.py
26
app.py
@@ -1,4 +1,4 @@
|
|||||||
from flask import Flask, render_template
|
from flask import Flask, render_template, jsonify
|
||||||
import requests
|
import requests
|
||||||
from datetime import datetime, timedelta
|
from datetime import datetime, timedelta
|
||||||
from waitress import serve
|
from waitress import serve
|
||||||
@@ -231,16 +231,22 @@ def utc_to_est_time(utc_time):
|
|||||||
# Routes
|
# Routes
|
||||||
@app.route('/')
|
@app.route('/')
|
||||||
def index():
|
def index():
|
||||||
game_info = extract_game_info()
|
return render_template('index.html')
|
||||||
if game_info:
|
|
||||||
live_games_exist = any(game["Game State"] == "LIVE" for game in game_info)
|
@app.route('/scoreboard')
|
||||||
pre_games_exist = any(game["Game State"] == "PRE" for game in game_info)
|
def get_scoreboard():
|
||||||
final_games_exist = any(game["Game State"] == "FINAL" for game in game_info)
|
global scoreboard_data
|
||||||
return render_template('index.html', games=game_info, live_games_exist=live_games_exist,
|
if scoreboard_data:
|
||||||
pre_games_exist=pre_games_exist, final_games_exist=final_games_exist)
|
live_games = [game for game in extract_game_info() if game["Game State"] == "LIVE"]
|
||||||
|
pre_games = [game for game in extract_game_info() if game["Game State"] == "PRE"]
|
||||||
|
final_games = [game for game in extract_game_info() if game["Game State"] == "FINAL"]
|
||||||
|
return jsonify({
|
||||||
|
"live_games": live_games,
|
||||||
|
"pre_games": pre_games,
|
||||||
|
"final_games": final_games
|
||||||
|
})
|
||||||
else:
|
else:
|
||||||
print("Failed to retrieve scoreboard data")
|
return jsonify({"error": "Failed to retrieve scoreboard data"})
|
||||||
return "Failed to retrieve scoreboard data"
|
|
||||||
|
|
||||||
if __name__ == '__main__':
|
if __name__ == '__main__':
|
||||||
store_scoreboard_data()
|
store_scoreboard_data()
|
||||||
|
|||||||
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 {
|
.final-state {
|
||||||
font-size: 12px; /* Decrease font size for better readability */
|
font-size: 12px; /* Decrease font size for better readability */
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -4,136 +4,17 @@
|
|||||||
<title>NHL Scoreboard</title>
|
<title>NHL Scoreboard</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" type="text/css" href="static\styles.css">
|
<link rel="stylesheet" type="text/css" href="static\styles.css">
|
||||||
<script>
|
|
||||||
// Function to reload the page every 20 seconds
|
|
||||||
function autoRefresh() {
|
|
||||||
setTimeout(function() {
|
|
||||||
location.reload();
|
|
||||||
}, 5000); // 20 seconds
|
|
||||||
}
|
|
||||||
|
|
||||||
// Call the autoRefresh function when the page loads
|
|
||||||
window.onload = autoRefresh;
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{% if live_games_exist %}
|
<h1 id="live-games"></h1>
|
||||||
<h1>Live Games</h1>
|
<div id="live-games-section"></div>
|
||||||
<div class="live-games-section">
|
|
||||||
{% for game in games if game['Game State'] == 'LIVE' %}
|
|
||||||
<div class="game-box">
|
|
||||||
{% if game['Time Running'] %}
|
|
||||||
<div class="live-dot"></div> <!-- Display the red dot if the game is live -->
|
|
||||||
{% endif %}
|
|
||||||
<div class="team-info">
|
|
||||||
<img src="{{ game['Away Logo'] }}" alt="{{ game['Away Team'] }} Logo" class="team-logo">
|
|
||||||
<div class="team-info-column">
|
|
||||||
<span class="team-name">{{ game['Away Team'] }}</span>
|
|
||||||
<span class="team-sog">SOG: {{ game['Away Shots'] }}</span>
|
|
||||||
<span class="team-power-play">{{ game['Away Power Play'] }}</span>
|
|
||||||
</div>
|
|
||||||
<span class="team-score">{{ game['Away Score'] }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="team-info">
|
|
||||||
<img src="{{ game['Home Logo'] }}" alt="{{ game['Home Team'] }} Logo" class="team-logo">
|
|
||||||
<div class="team-info-column">
|
|
||||||
<span class="team-name">{{ game['Home Team'] }}</span>
|
|
||||||
<span class="team-sog">SOG: {{ game['Home Shots'] }}</span>
|
|
||||||
<span class="team-power-play">{{ game['Home Power Play'] }}</span>
|
|
||||||
</div>
|
|
||||||
<span class="team-score">{{ game['Home Score'] }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="game-info">
|
|
||||||
{% if game['Intermission'] %}
|
|
||||||
<div class="live-state-intermission">
|
|
||||||
{% if game['Period'] == 1 %}
|
|
||||||
1st Int
|
|
||||||
{% elif game['Period'] == 2 %}
|
|
||||||
2nd Int
|
|
||||||
{% elif game['Period'] == 3 %}
|
|
||||||
3rd Int
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
<div class="live-time-intermission">{{ game['Time Remaining'] }}</div>
|
|
||||||
|
|
||||||
{% else %}
|
|
||||||
<div class="live-state">
|
|
||||||
{% if game['Period'] == 1 %}
|
|
||||||
1st
|
|
||||||
{% elif game['Period'] == 2 %}
|
|
||||||
2nd
|
|
||||||
{% elif game['Period'] == 3 %}
|
|
||||||
3rd
|
|
||||||
{% else %}
|
|
||||||
OT
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
<div class="live-time">{{ game['Time Remaining'] }}</div>
|
|
||||||
{% endif %}
|
|
||||||
<!-- Display time remaining in time box -->
|
|
||||||
</div>
|
|
||||||
<div class="game-info">
|
|
||||||
<strong>Game Score:</strong> {{ game['Priority'] }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if pre_games_exist %}
|
<h1 id="on-later"></h1>
|
||||||
<h1>On Later</h1>
|
<div id="pre-games-section"></div>
|
||||||
<div class="pre-games-section">
|
|
||||||
{% for game in games if game['Game State'] == 'PRE' %}
|
|
||||||
<div class="game-box">
|
|
||||||
<div class="pre-state">{{ game['Start Time'] }}</div>
|
|
||||||
<div class="team-info">
|
|
||||||
<img src="{{ game['Away Logo'] }}" alt="{{ game['Away Team'] }} Logo" class="team-logo">
|
|
||||||
<span class="team-name">{{ game['Away Team'] }}</span>
|
|
||||||
<span class="team-record">{{ game['Away Record'] }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="team-info">
|
|
||||||
<img src="{{ game['Home Logo'] }}" alt="{{ game['Home Team'] }} Logo" class="team-logo">
|
|
||||||
<span class="team-name">{{ game['Home Team'] }}</span>
|
|
||||||
<span class="team-record">{{ game['Home Record'] }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if final_games_exist %}
|
<h1 id="game-over"></h1>
|
||||||
<h1>Game Over</h1>
|
<div id="final-games-section"></div>
|
||||||
<div class="final-games-section">
|
|
||||||
{% for game in games if game['Game State'] == 'FINAL' %}
|
<script src="/static/script.js"></script>
|
||||||
<div class="game-box">
|
|
||||||
<div class="final-state">
|
|
||||||
{% if game['Last Period Type'] == 'REG' %}
|
|
||||||
FINAL
|
|
||||||
{% elif game['Last Period Type'] == 'OT' %}
|
|
||||||
FINAL/OT
|
|
||||||
{% else %}
|
|
||||||
FINAL/SO
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
<div class="team-info">
|
|
||||||
<img src="{{ game['Away Logo'] }}" alt="{{ game['Away Team'] }} Logo" class="team-logo">
|
|
||||||
<div class="team-info-column">
|
|
||||||
<span class="team-name">{{ game['Away Team'] }}</span>
|
|
||||||
<span class="team-sog">SOG: {{ game['Away Shots'] }}</span>
|
|
||||||
</div>
|
|
||||||
<span class="team-score">{{ game['Away Score'] }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="team-info">
|
|
||||||
<img src="{{ game['Home Logo'] }}" alt="{{ game['Home Team'] }} Logo" class="team-logo">
|
|
||||||
<div class="team-info-column">
|
|
||||||
<span class="team-name">{{ game['Home Team'] }}</span>
|
|
||||||
<span class="team-sog">SOG: {{ game['Home Shots'] }}</span>
|
|
||||||
</div>
|
|
||||||
<span class="team-score">{{ game['Home Score'] }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user