diff --git a/src/components/LiveStatus.svelte b/src/components/LiveStatus.svelte index 7b0d8bd..4204a8f 100644 --- a/src/components/LiveStatus.svelte +++ b/src/components/LiveStatus.svelte @@ -16,6 +16,8 @@ : apiBaseUrl; const graphsBaseUrl = `${userContentBaseUrl}/${owner}/${repo}/master/graphs`; + let selected = "week"; + onMount(async () => { try { sites = JSON.parse( @@ -51,9 +53,42 @@ a { text-decoration: none; } + .r input:checked + label { + font-weight: bold; + } + .r input { + display: none; + } + .r label { + margin-left: 1rem; + } -

{config.i18n.liveStatus}

+
+

{config.i18n.liveStatus}

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
{#if loading} @@ -61,16 +96,16 @@ {#each sites as site}
+ style={`background-image: url("${graphsBaseUrl}/${site.slug}/response-time${selected === 'day' ? '-day' : selected === 'week' ? '-week' : selected === 'month' ? '-month' : selected === 'year' ? '-year' : ''}.png`}>

{site.name}

- {@html config.i18n.overallUptime.replace(/\$UPTIME/g, site.uptime)} + {@html config.i18n.overallUptime.replace(/\$UPTIME/g, selected === 'day' ? site.uptimeDay : selected === 'week' ? site.uptimeWeek : selected === 'month' ? site.uptimeMonth : selected === 'year' ? site.uptimeYear : site.uptime)}
- {@html config.i18n.averageResponseTime.replace(/\$TIME/g, site.time)} + {@html config.i18n.averageResponseTime.replace(/\$TIME/g, selected === 'day' ? site.timeDay : selected === 'week' ? site.timeWeek : selected === 'month' ? site.timeMonth : selected === 'year' ? site.timeYear : site.time)}
{/each}