134 lines
3.0 KiB
HTML
134 lines
3.0 KiB
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>
|