Svelte - auto update button

Example of a button with a timer report on Svelte, after or during which an event occurs. This event refreshes the page or pulls up data with ajax without refreshing.

In the example below, clicking the start updates button starts the updates and the counter counts down to 0, after which the update will start again. Etc. until disabled.

Primary connection of svelte functions not related to the timer, but tied to it: ajax requests that are pulled to the page.

let updatedAtPortfolio, updatedAtPriceInPortfolio, updatedAtOperations, updatedAtPrices;

onMount(async () => {
getDates()
});

// Get update dates
function getDates() {
updatedAtPortfolio = getFetch(‘get-updated-at-portfolio /’);
updatedAtPriceInPortfolio = getFetch(‘get-updated-at-price-in-portfolio /’);
updatedAtOperations = getFetch(‘get-updated-at-operations /’);
updatedAtPrices = getFetch(‘get-updated-at-prices /’);
}

function getUpdatedDate() {
getFetch(‘update-all-information /’)…then(() => {
getDates()
window.location…reload();
});
}

Timer functions directly in Svelte:

let varSetInterval,
varSetTimeout,
timer = ‘-‘,
status = ‘OFF’;

function setTimer() {
timer = 60;
status = ‘ON’;
document.cookie = ‘svelteLiveUpdate = 1’;

varSetInterval = setInterval(() => {
if (timer > 0) timer-;
}, 1000);

varSetTimeout = setTimeout(function () {
// Run the update at the end of the timer
getUpdatedDate();

// Resets timer
clearInterval(varSetInterval);
clearTimeout(varSetTimeout);
setTimer();
}, 60,000);
}

if (getCookie(“svelteLiveUpdate”) === ‘one’) {
setTimer();
}

let stop = false;

function clickLiveReload() {
if (getCookie(“svelteLiveUpdate”) === ‘one’) {
// Run the update when the button is clicked
if (!stop) {
getUpdatedDate();
stop = true;
}

document.cookie = ‘svelteLiveUpdate = 0’;
clearInterval(varSetInterval);
clearTimeout(varSetTimeout);
timer = ‘-‘;
status = ‘OFF’;
return;
}

setTimer();
}
script>

The table on the screen. Here, when you click on the button, the function is triggered clickLiveReload from the code above. It also starts the update, saves cookies and turns on / off the timer on svelte.

<div class=“table table-links”>
<div class=“body”>
<div class=“item link center” on: click={clickLiveReload}>
{#if timer === ‘-‘}
class=“cell”>Refresh and run auto-update</dic>
{: else}
class=“cell”>Refresh in {timer} seconds</dic>
{/ if}
</div>

{#await updatedAtPortfolio}
{: then updatedAtPortfolio}
<div class=“item”>
<div class=“cell name”>Portfolio:</div>
<div class=“cell date center”>{updatedAtPortfolio}</div>
</div>
{/ await}

{#await updatedAtPriceInPortfolio}
{: then updatedAtPriceInPortfolio}
<div class=“item”>
<div class=“cell name”>Current. portfolio prices:</div>
<div class=“cell date center”>{updatedAtPriceInPortfolio}</div>
</div>
{/ await}

{#await updatedAtOperations}
{: then updatedAtOperations}
<div class=“item”>
<div class=“cell name”>All operations:</div>
<div class=“cell date center”>{updatedAtOperations}</div>
</div>
{/ await}

{#await updatedAtPrices}
{: then updatedAtPrices}
<div class=“item”>
<div class=“cell name”>Prices for {nameOfShare}:</div>
<div class=“cell date center”>{updatedAtPrices}</div>
</div>
{/ await}
</div>
</div>