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

<div class='banner {{policy_enabled?'enabled':'disabled'}}'>
    <div class='btn-group right'>
        <button class='primary' on:click='toggle(policy_enabled)'>{{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 {{(!last_delete)?'hidden':''}}' title={{last_delete}}>
        {{#if last_delete }}
            Last delete {{rel_past(now - last_delete)}}.
        {{/if }}
        </span>
        <span class='next-delete {{(!policy_enabled || !next_delete || !eligible_for_delete_estimate)?'hidden':''}}' 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;
}

.right {
    float: right;
    margin-left: 1em;
}

button.primary {
    border: none;
    padding: 0.5rem 1rem;
}

.enabled button.primary {
    background-color: transparent;
    border: 1px solid currentColor;
}
.disabled button.primary {
    background-color: #37d;
    color: white;
    font-weight: bold;
}
.banner {
    transition: background-color 0.6s;
}
</style>

<script>
function absmod(n, x){
    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){
    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`;
}

export default {
    data(){
        return {
            policy_enabled: false,
            next_delete: null,
            last_delete: null,
            now: +(new Date()),
        }
    },

    helpers: {
        rel_future(millis){
            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)}`;
        },
        rel_past(millis){
            if(millis < 2000){
                return 'just now';
            }
            return `${rel(millis)} ago`;
        },
    },

    methods: {
        toggle(policy_enabled){
            policy_enabled = !policy_enabled;
            let obj = {policy_enabled}
            if(policy_enabled){
                obj.next_delete = null;
            }
            this.set(obj);
            this.fire('toggle', policy_enabled);
        }
    },

    oncreate () {
      this.interval = setInterval( () => {
        this.set({ now: +(new Date()) });
      }, 1000 );
    },

    ondestroy () {
      clearInterval( this.interval );
    },

};
</script>