buildStats async

This commit is contained in:
Simon 2023-09-02 16:31:43 +07:00
parent 725bba0963
commit 0c9c88fc0b
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
2 changed files with 23 additions and 5 deletions

View File

@ -6,15 +6,21 @@
</div> </div>
<div class="settings-item"> <div class="settings-item">
<h2>Main overview</h2> <h2>Main overview</h2>
<div id="primaryBox" class="info-box info-box-4"></div> <div id="primaryBox" class="info-box info-box-4">
<p id="loading">Loading...</p>
</div>
</div> </div>
<div class="settings-item"> <div class="settings-item">
<h2>Watch Progress</h2> <h2>Watch Progress</h2>
<div id="watchBox" class="info-box info-box-3"></div> <div id="watchBox" class="info-box info-box-3">
<p id="loading">Loading...</p>
</div>
</div> </div>
<div class="settings-item"> <div class="settings-item">
<h2>Download History</h2> <h2>Download History</h2>
<div id="downHistBox" class="info-box info-box-4"></div> <div id="downHistBox" class="info-box info-box-4">
<p id="loading">Loading...</p>
</div>
</div> </div>
<div class="settings-item"> <div class="settings-item">
<h2>Biggest Channels</h2> <h2>Biggest Channels</h2>

View File

@ -8,6 +8,7 @@ function primaryStats() {
let apiEndpoint = '/api/stats/primary/'; let apiEndpoint = '/api/stats/primary/';
let responseData = apiRequest(apiEndpoint, 'GET'); let responseData = apiRequest(apiEndpoint, 'GET');
let primaryBox = document.getElementById('primaryBox'); let primaryBox = document.getElementById('primaryBox');
clearLoading(primaryBox);
let videoTile = buildVideoTile(responseData); let videoTile = buildVideoTile(responseData);
primaryBox.appendChild(videoTile); primaryBox.appendChild(videoTile);
let channelTile = buildChannelTile(responseData); let channelTile = buildChannelTile(responseData);
@ -18,6 +19,10 @@ function primaryStats() {
primaryBox.appendChild(downloadTile); primaryBox.appendChild(downloadTile);
} }
function clearLoading(dashBox) {
dashBox.querySelector('#loading').remove();
}
function buildTile(titleText) { function buildTile(titleText) {
let tile = document.createElement('div'); let tile = document.createElement('div');
tile.classList.add('info-box-item'); tile.classList.add('info-box-item');
@ -74,6 +79,7 @@ function watchStats() {
let apiEndpoint = '/api/stats/watch/'; let apiEndpoint = '/api/stats/watch/';
let responseData = apiRequest(apiEndpoint, 'GET'); let responseData = apiRequest(apiEndpoint, 'GET');
let watchBox = document.getElementById('watchBox'); let watchBox = document.getElementById('watchBox');
clearLoading(watchBox);
for (const property in responseData) { for (const property in responseData) {
let tile = buildWatchTile(property, responseData[property]); let tile = buildWatchTile(property, responseData[property]);
@ -100,6 +106,7 @@ function downloadHist() {
let apiEndpoint = '/api/stats/downloadhist/'; let apiEndpoint = '/api/stats/downloadhist/';
let responseData = apiRequest(apiEndpoint, 'GET'); let responseData = apiRequest(apiEndpoint, 'GET');
let histBox = document.getElementById('downHistBox'); let histBox = document.getElementById('downHistBox');
clearLoading(histBox);
if (responseData.length === 0) { if (responseData.length === 0) {
let tile = buildTile('No recent downloads'); let tile = buildTile('No recent downloads');
histBox.appendChild(tile); histBox.appendChild(tile);
@ -148,11 +155,16 @@ function humanFileSize(size) {
return (size / Math.pow(1024, i)).toFixed(1) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]; return (size / Math.pow(1024, i)).toFixed(1) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
} }
function buildStats() { async function buildStats() {
primaryStats(); primaryStats();
watchStats(); watchStats();
downloadHist(); downloadHist();
biggestChannel(); biggestChannel();
} }
buildStats(); document.addEventListener('DOMContentLoaded', () => {
console.log('DOM content loaded');
window.requestAnimationFrame(() => {
buildStats();
});
});