Make UI language, timestamps and live feedback consistent
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import RelativeTime from '$ui/components/RelativeTime.svelte';
|
||||
import { contextHref } from '$lib/navigation-context.js';
|
||||
import { timeFormat } from '$ui/stores/time-zone.js';
|
||||
import { page } from '$app/stores';
|
||||
@@ -69,14 +70,6 @@
|
||||
return pollVisible(loadCampaigns, 15000);
|
||||
});
|
||||
|
||||
function ago(iso: string): string {
|
||||
const elapsed = refreshedAt - new Date(iso).getTime();
|
||||
if (elapsed < 60_000) return 'Just now';
|
||||
if (elapsed < 3_600_000) return `${Math.floor(elapsed / 60_000)} min ago`;
|
||||
if (elapsed < 86_400_000) return `${Math.floor(elapsed / 3_600_000)} hr ago`;
|
||||
const days = Math.floor(elapsed / 86_400_000);
|
||||
return `${days} day${days === 1 ? '' : 's'} ago`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head><title>Campaigns | Electric Cherry</title></svelte:head>
|
||||
@@ -138,7 +131,7 @@
|
||||
<td><div class="status"><Badge variant={outcome.tone} size="md">{outcome.label}</Badge>
|
||||
{#if showProgress}<progress max={campaign.servers.length || 1} value={outcome.completed} aria-label={`${outcome.completed} of ${campaign.servers.length} servers complete`}></progress>{/if}
|
||||
</div></td>
|
||||
<td class="started"><button type="button" class="timestamp" aria-label={`Started ${$timeFormat.dateTime(campaign.started_at)}`}><time datetime={campaign.started_at}>{ago(campaign.started_at)}</time><span class="exact-time" aria-hidden="true">{$timeFormat.dateTime(campaign.started_at)}</span></button></td>
|
||||
<td class="started"><button type="button" class="timestamp" aria-label={`Started ${$timeFormat.dateTime(campaign.started_at)}`}><RelativeTime value={campaign.started_at} /><span class="exact-time" aria-hidden="true">{$timeFormat.dateTime(campaign.started_at)}</span></button></td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
|
||||
Reference in New Issue
Block a user