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

158 lines
3.4 KiB
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>