You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
1.8 KiB
87 lines
1.8 KiB
<script lang="ts">
|
|
export let startTime: Date | string = new Date();
|
|
export let endTime: Date | string = new Date();
|
|
|
|
let started = false;
|
|
let overdue = false;
|
|
let danger = false;
|
|
let amount = 0;
|
|
let amountStr = "0";
|
|
let unit = "days";
|
|
let titleTimeStr = "";
|
|
|
|
function formatTime(time: Date): string {
|
|
const pad = (n:number) => n < 9 ? '0'+n : n.toString();
|
|
|
|
return `${time.getFullYear()}-${pad(time.getMonth()+1)}-${pad(time.getDate())}`
|
|
}
|
|
|
|
$: {
|
|
const now = new Date();
|
|
|
|
overdue = false;
|
|
unit = "days";
|
|
|
|
const st = (startTime instanceof Date) ? startTime : new Date(startTime);
|
|
const et = (endTime instanceof Date) ? endTime : new Date(endTime);
|
|
|
|
if (now < st) {
|
|
started = false;
|
|
amount = (st.getTime() - now.getTime()) / 86400000
|
|
} else {
|
|
started = true;
|
|
amount = (et.getTime() - now.getTime()) / 86400000
|
|
}
|
|
|
|
if (amount < 0) {
|
|
overdue = true;
|
|
amount = -amount;
|
|
}
|
|
|
|
danger = (!overdue && started && amount <= 3);
|
|
|
|
if (amount < 2) {
|
|
amount *= 24;
|
|
unit = "hours"
|
|
}
|
|
if (amount < 2) {
|
|
amount *= 60;
|
|
unit = "minutes";
|
|
}
|
|
|
|
amount = Math.floor(amount);
|
|
if (amount <= 1) {
|
|
unit = unit.slice(0, -1);
|
|
}
|
|
|
|
if (amount < 1) {
|
|
amountStr = "< 1"
|
|
} else {
|
|
amountStr = amount.toString()
|
|
}
|
|
|
|
titleTimeStr = `${formatTime(new Date(startTime))} – ${formatTime(new Date(endTime))}`
|
|
}
|
|
</script>
|
|
|
|
<span title={titleTimeStr}>
|
|
{#if (overdue)}
|
|
<span class="overdue">{amountStr} {unit} ago</span>
|
|
{:else if (started)}
|
|
<span class:danger class="started">{amountStr} {unit} left</span>
|
|
{:else}
|
|
<span class="pending">In {amountStr} {unit}</span>
|
|
{/if}
|
|
</span>
|
|
|
|
<style>
|
|
span.pending {
|
|
color: #2797e2;
|
|
}
|
|
span.danger {
|
|
color: #e28127;
|
|
}
|
|
span.overdue {
|
|
color: #666666;
|
|
}
|
|
</style>
|