139 lines
3.1 KiB
HTML
139 lines
3.1 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)'>{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;
|
|
}
|
|
|
|
.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>
|