forget-cancellare-vecchi-toot/components/Banner.html

<div class='banner {policy_enabled?'enabled':'disabled'}'>
    <div class='btn-group right'>
        <button class='btn {policy_enabled?"secondary":"primary"}' on:click={toggle}>{policy_enabled?'Disable':'Enable'}</button>
    </div>
    <div>
        Forget is currently
        {#if policy_enabled }
        <b>enabled</b>
        {:else}
        disabled
        {/if}
        on your account.
    </div>
    <div class='timers'>
        <span class='last-delete' class:hidden={!last_delete} title={last_delete}>
        {#if last_delete }
            Last delete {rel_past(now - last_delete)}.
        {/if }
        </span>
        <span class='next-delete'
              class:hidden={!policy_enabled || !next_delete || !eligible_for_delete_estimate} title={next_delete}>
            Next delete {rel_future(next_delete - now)}.
        </span>
    </div>
</div>

<style>
.timers {
    font-size: 0.8em;
}

.timers > * {
    transition-property: opacity, transform;
    transition-duration: 0.4s;
    display: inline-block;
}

.timers > .hidden {
    opacity: 0;
    transform: translateY(-0.3em);
    pointer-events: none;
}

.banner {
    transition: background-color 0.6s;
}
</style>

<script>
function absmod(n, x){
    // it's like modulo but never negative
    n = n % x;
    if(n < 0){
        n += x
    }
    return n
}
function s(n){
    // utility for plurals
    if(n > 1){
        return 's';
    }
    return '';
}
function rel(millis){
    // returns human-readable duration from duration in millis
    let secs = Math.round(millis/1000)
    if(secs <= 120){
        return `${secs} seconds`;
    }
    let mins = Math.round(secs/60);
    if(mins <= 60){
        return `${mins} minute${s(mins)}`;
    }
    let hours = Math.floor(mins/60);
    mins = mins % 60;
    if(hours < 6){
        return `${hours}h ${mins}m`;
    }
    if(hours <= 48){
        return `${hours} hour${s(hours)}`;
    }
    let days = Math.round(hours/24);
    return `${days} days`;
}

function rel_future(millis){
    // returns relative time from timestamp, assuming time is in the future
    if(millis < 2000){
        let secs = Math.floor(millis/1000)
        let ndots = absmod(-secs, 3);
        let out = 'anytime now';
        for(; ndots > 0; ndots--){
            out += '.';
        }
        return out;
    }
    return `in ${rel(millis)}`;
}

function rel_past(millis){
    // returns relative time from timestamp, assuming time is in the past
    if(millis < 2000){
        return 'just now';
    }
    return `${rel(millis)} ago`;
}

import { onDestroy, createEventDispatcher } from 'svelte';

const dispatch = createEventDispatcher();

function toggle(){
    console.log(policy_enabled);
    policy_enabled = !policy_enabled;
    if(policy_enabled){
        next_delete = null;
    }
    dispatch('toggle', policy_enabled);
}


export let next_delete, last_delete, eligible_for_delete_estimate;
export let policy_enabled = false;

let now = +(new Date());

let interval = setInterval(() =>
    now = +(new Date())
, 1000 );

onDestroy(()=> clearInterval(interval));
</script>