BinaryNinja/tvapp2
4
1
Fork 0
mirror of https://github.com/TheBinaryNinja/tvapp2.git synced 2026-06-04 08:05:40 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat: add healthcheck countdown as tooltip to header icon

Browse Source
This commit is contained in:
Aetherx
2025-04-10 02:25:58 -07:00
parent 67d7019a93
commit e4436ad7b7
1 changed files with 95 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
tvapp2/www/index.html
View File

@@ -288,17 +288,28 @@
document.getElementById('ntfy-restart').style.display = 'none'; document.getElementById('ntfy-restart').style.display = 'none';
}); });
/*
Set initial health check sync time
first health check runs after 10 seconds
all future health checks run after <%= healthTimer %>
*/
let timerDelayMS = 10000;
let timerStartMS = Date.now(); // returns milliseconds
const timerHealthRun = '10000'; // time in milliseconds until health check ran AFTER initial run
/* /*
Action > Healthcheck Action > Healthcheck
*/ */
function doHealthCheck() function runHealthCheck()
{ {
const toastTypeClass = []; const toastTypeClass = [];
toastTypeClass[ 'DEFAULT' ] = 'text-bg-primary'; toastTypeClass[ 'DEFAULT' ] = 'text-bg-primary';
toastTypeClass[ 'UNHEALTHY' ] = 'text-bg-warning'; toastTypeClass[ 'UNHEALTHY' ] = 'text-bg-warning';
toastTypeClass[ 'HEALTHY' ]= 'text-bg-success'; toastTypeClass[ 'HEALTHY' ] = 'text-bg-success';
toastTypeClass[ 'ERROR' ]= 'text-bg-danger'; toastTypeClass[ 'ERROR' ] = 'text-bg-danger';
$.ajax( $.ajax(
{ {
@@ -325,6 +336,7 @@
$('.toast #toast-message').html(`Health check returned ${ status } (${ code })`); $('.toast #toast-message').html(`Health check returned ${ status } (${ code })`);
$('#tvapp2Toast').toast('show'); $('#tvapp2Toast').toast('show');
} }
}, },
error: function( data ) error: function( data )
{ {
@@ -335,28 +347,25 @@
$('.toast #toast-title').html(`Could not connect to health check api`); $('.toast #toast-title').html(`Could not connect to health check api`);
$('.toast #toast-message').html(`Failed to communicate with health check api. Try restarting the docker container to restore connection.`); $('.toast #toast-message').html(`Failed to communicate with health check api. Try restarting the docker container to restore connection.`);
$('#tvapp2Toast').toast('show'); $('#tvapp2Toast').toast('show');
} }
}).always(function() }).always(function()
{ {
const healthTime = '<%= healthTimer %>'; timerDelayMS = parseInt(timerHealthRun);
timerStartMS = Date.now();
setTimeout(function() setTimeout(function()
{ {
doHealthCheck(); runHealthCheck();
}, parseInt(healthTime)); }, parseInt(timerHealthRun));
}).responseText; }).responseText;
} }
/*
Action > Healthcheck > Initialize
*/
setTimeout(function(){ doHealthCheck(); }, 10000);
/* /*
Action > Do Resync Action > Do Resync
*/ */
function doResync() function runResync()
{ {
$.ajax( $.ajax(
{ {
@@ -391,7 +400,12 @@
}, },
success: function( data ) success: function( data )
{ {
setTimeout(() =>
/*
On successful restart, wait 1 second, remove dimmer, reload page in 5 seconds
*/
setTimeout( () =>
{ {
document.getElementById('ntfy-restart').style.display = 'block' document.getElementById('ntfy-restart').style.display = 'block'
const dimmer = document.getElementById('dimmer'); const dimmer = document.getElementById('dimmer');
@@ -399,17 +413,75 @@
dimmer.classList.add('dimmer-out'); dimmer.classList.add('dimmer-out');
dimmer.remove(); dimmer.remove();
setTimeout(function() setTimeout( function()
{ {
const iconResync = document.getElementsByClassName('fa-rotate'); const iconResync = document.getElementsByClassName('fa-rotate'); // resync favicon
iconResync[0].classList.remove('spin'); iconResync[0].classList.remove('spin'); // stop spinning
iconResync[0].classList.add('restart'); iconResync[0].classList.add('restart'); // normal spinner class
document.location.reload() document.location.reload() // reload page
}, 5000); }, 5000 ); // how long until refresh page
}, 1000); }, 1000 ); // how long until dimmer is removed / reload page activated (also on delay)
} }
}); });
} }
/*
Health check > Show time remaining as tooltip
*/
function runTooltipCountdown( )
{
let timerHours, timerMins, timerRemainsLS;
function twoDigits( n )
{
return (n <= 9 ? "0" + n : n);
}
/*
Update Tooltip Countdown
MS = milliseconds
LS = long string (Wed Dec 31 1969 10:01:42 (Coordinated Universal Time))
*/
function updateTooltipCountdown()
{
const timerElapsedMS = Date.now() - timerStartMS; // ( 2091 )
const timerRemainsMS = timerDelayMS - timerElapsedMS; // ( 7909 ) divide by 1000 for seconds
timerRemainsLS = new Date( timerRemainsMS ); // (Wed Dec 31 1969 10:01:42 (Coordinated Universal Time))
timerHours = timerRemainsLS.getUTCHours(); // ( 0 )
timerMins = timerRemainsLS.getUTCMinutes(); // ( 9 )
const timeLeft = (timerHours ? timerHours + ':' + twoDigits( timerMins ) : timerMins) + ':' + twoDigits( timerRemainsLS.getUTCSeconds() );
jQuery(function($)
{
$(document.body).tooltip({ selector: "[title]" });
$('#action-resync')
.attr('data-original-title', timeLeft)
.attr('aria-label', timeLeft)
.attr('data-bs-original-title', timeLeft)
});
setTimeout( updateTooltipCountdown, timerRemainsLS.getUTCMilliseconds() + 500 );
}
updateTooltipCountdown();
}
/*
Action > Healthcheck > Initialize
*/
setTimeout( function() { runHealthCheck(); }, timerDelayMS );
/*
Action > Tooltip Resync Timers
*/
runTooltipCountdown( );
</script> </script>
</body> </body>
</html> </html>