minor on webcomponents

This commit is contained in:
lesion
2021-12-02 10:47:37 +01:00
parent b428a692d1
commit 88c9d48431
5 changed files with 844 additions and 27 deletions

View File

@@ -8,9 +8,8 @@
</head>
<body>
<gancio-events
baseURL='https://dev.gancio.org'
title='Gancio' tags="test"></gancio-events>
<gancio-event id="17"></gancio-event>
baseurl='http://localhost:13120' title='Gancio' tags="test"></gancio-events>
<gancio-event id=1 baseurl='http://localhost:13120'></gancio-event>
<script type="module" src="/src/main.js"></script>
</body>
</html>

View File

@@ -1,16 +1,25 @@
<script>
import { onMount } from 'svelte'
export let baseurl = 'https://demo.gancio.org'
export let id
let mounted = false
let event
function update (id) {
fetch(`${baseurl}/api/event/${id}`)
.then(res => res.json())
.then(e => event = e)
function update (id, baseurl) {
if (mounted) {
fetch(`${baseurl}/api/event/${id}`)
.then(res => res.json())
.then(e => event = e)
}
}
onMount(() => {
mounted = true
update(id, baseurl)
})
$: update(id, baseurl)
function when (event) {
return new Date(event.start_datetime*1000)
.toLocaleDateString(undefined,
@@ -35,8 +44,6 @@
return 'center center'
}
$: update(id)
</script>
<svelte:options tag="gancio-event"/>
{#if event}

View File

@@ -40,28 +40,17 @@
<svelte:options tag="gancio-events"/>
{#if events.length}
<div id='gancioEvents'>
{#if title}
<a href='{baseurl}' target='_blank'>
<div class='content'>
<span id='headerTitle'>{title}</span>
<img id='logo' alt='logo' src='{baseurl}/logo.png'/>
</div>
</a>
{/if}
<a href='{baseurl}' target='_blank'>
<div class='content'>
<span id='headerTitle'>{title || 'Gancio'}</span>
<img id='logo' alt='logo' src='{baseurl}/logo.png'/>
</div>
</a>
{#each events as event}
<a href='{baseurl}/event/{event.slug || event.id}' target='_blank'>
<div class='content'>
<div class='subtitle'>
{when(event.start_datetime)}
{new Date(event.start_datetime*1000)
.toLocaleDateString(undefined,
{
weekday: 'long',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
})}
<span class='place'>@{event.place.name}</span>
</div>
<div class='title'>