Improve ticker component error handling

This commit is contained in:
Ondřej 2022-11-02 20:48:05 +01:00
parent e70bde24c2
commit a557d6f87b
2 changed files with 52 additions and 27 deletions

View file

@ -870,6 +870,10 @@ video {
padding-bottom: 6rem;
}
.text-center {
text-align: center;
}
.font-main {
font-family: Spline Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

View file

@ -1,27 +1,48 @@
<div class="lg:col-span-5 bg-gray-100 dark:bg-gray-800 rounded-xl px-6 pt-6 pb-24 lg:pb-6 -mx-6 lg:mx-0 -mb-24">
<h2 class="mb-4 font-bold">Novinky</h2>
<ol
x-data="{ posts: [] }"
x-init="posts = await fetch('{{ site.Params.tickerApiURL }}?origin=demo.ticker.nolog.cz&limit=3')
.then(res => res.json())
.then(json => json.data.messages)"
>
<template x-for="post in posts">
<li class="mb-4">
<article class="md:text-sm">
<p x-text="post.text"></p>
<time
class="text-gray-500 text-xs"
x-bind:datetime="post.creation_date"
x-text="new Date(post.creation_date).toLocaleString()"
></time>
</article>
</li>
</template>
</ol>
{{ with site.Params.tickerClientURL }}
<a class="link md:text-sm font-bold" href="{{ . }}" target="_blank">Přečíst starší zprávy →</a>
{{ end }}
</div>
<section
class="lg:col-span-5 bg-gray-100 dark:bg-gray-800 rounded-xl px-6 pt-6 pb-24 lg:pb-6 -mx-6 lg:mx-0 -mb-24"
x-data="{ postsResource: { status: 'loading' } }"
x-init="postsResource = await fetch('{{ site.Params.tickerApiURL }}?origin=demo.ticker.nolog.cz&limit=3')
.then(res => res.json())
.then(json => {
const data = json.data?.messages ?? null
return data === null
? { status: 'error' }
: { status: 'success', data }
})
.catch(error => { status: 'error', error })"
>
<template x-if="postsResource.status == 'loading'">
<div class="text-center">Načítám...</div>
</template>
<template x-if="postsResource.status == 'error'">
<div class="text-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48" class="mx-auto mb-2">
<path fill="none" d="M0 0h24v24H0z"/>
<path fill="currentColor" d="M12 2c5.523 0 10 4.477 10 10 0 .727-.077 1.435-.225 2.118l-1.782-1.783a8 8 0 1 0-4.375 6.801 3.997 3.997 0 0 0 1.555 1.423A9.956 9.956 0 0 1 12 22C6.477 22 2 17.523 2 12S6.477 2 12 2zm7 12.172l1.414 1.414a2 2 0 1 1-2.93.11l.102-.11L19 14.172zM12 15c1.466 0 2.785.631 3.7 1.637l-.945.86C13.965 17.182 13.018 17 12 17c-1.018 0-1.965.183-2.755.496l-.945-.86A4.987 4.987 0 0 1 12 15zm-3.5-5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm7 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z"/>
</svg>
<p>Něco se pokazilo</p>
</div>
</template>
<template x-if="postsResource.status == 'success'">
<div>
<h2 class="mb-4 font-bold">Novinky</h2>
<ol>
<template x-for="post in postsResource.data">
<li class="mb-4">
<article class="md:text-sm">
<p x-text="post.text"></p>
<time
class="text-gray-500 text-xs"
x-bind:datetime="post.creation_date"
x-text="new Date(post.creation_date).toLocaleString()"
></time>
</article>
</li>
</template>
</ol>
{{ with site.Params.tickerClientURL }}
<a class="link md:text-sm font-bold" href="{{ . }}" target="_blank">Přečíst starší zprávy →</a>
{{ end }}
</div>
</template>
</section>