structix/rate_music
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update routes and add index.html

Browse Source
This commit is contained in:
structix
2026-03-21 22:28:23 +01:00
parent 719bed65c9
commit 19f2dbd3a0
2 changed files with 100 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/http_server.rs
View File

@@ -35,10 +35,10 @@ pub async fn http_serve(database: &Database, mpris_producer: Sender<(String, Str
.fallback_service(ServeDir::new("static")) .fallback_service(ServeDir::new("static"))
.route("/stats", get(get_stats)) .route("/stats", get(get_stats))
.route("/", get(root)) .route("/", get(root))
.route("/rating/:rating", get(cache_rating_only)) .route("/rating/{rating}", get(cache_rating_only))
.route("/userid/:user_id", get(add_userid)) .route("/userid/{user_id}", get(add_userid))
.route("/usercard/:user_card", get(add_userid_by_card)) .route("/usercard/{user_card}", get(add_userid_by_card))
.route("/:user_id/:rating", get(add_rating)) .route("/{user_id}/{rating}", get(add_rating))
.with_state(shared_state); .with_state(shared_state);
let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap(); let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();

96
static/index.html Normal file
View File

@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Music Ratings</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<main class="container">
<h1>🎵 Live Leaderboard</h1>
<article>
<canvas id="ratingsChart"></canvas>
</article>
<article>
<table id="stats-table">
<thead>
<tr>
<th>Listener</th>
<th>Tracks Rated</th>
<th>Average Rating</th>
</tr>
</thead>
<tbody>
<tr><td aria-busy="true" colspan="3">Loading live stats...</td></tr>
</tbody>
</table>
</article>
</main>
<script>
// 3. Initialize the Chart (empty at first)
const ctx = document.getElementById('ratingsChart');
let ratingsChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [], // This will hold user names
datasets: [{
label: 'Total Tracks Rated',
data: [], // This will hold the counts
backgroundColor: 'rgba(54, 162, 235, 0.5)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1,
borderRadius: 4
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
ticks: { stepSize: 1 } // Keep the Y axis as whole numbers
}
}
}
});
async function fetchLiveStats() {
try {
const response = await fetch('/stats');
const data = await response.json();
// Update the Table
const tbody = document.querySelector('#stats-table tbody');
tbody.innerHTML = '';
data.forEach(user => {
const row = `<tr>
<td><strong>${user.name}</strong></td>
<td>${user.rating_count}</td>
<td>⭐ ${user.average_rating.toFixed(2)}</td>
</tr>`;
tbody.innerHTML += row;
});
// Update the Chart
// Map the JSON data into simple arrays for Chart.js
ratingsChart.data.labels = data.map(user => user.name);
ratingsChart.data.datasets[0].data = data.map(user => user.rating_count);
// Call update('none') to prevent the chart from doing a bouncy
// re-draw animation every 2 seconds when it polls.
ratingsChart.update('none');
} catch (error) {
console.error("Error fetching stats:", error);
}
}
fetchLiveStats();
setInterval(fetchLiveStats, 2000);
</script>
</body>
</html>