NoLog.cz/gancio-upstream
6
0
Fork 0
mirror of https://framagit.org/les/gancio.git synced 2025-02-01 00:52:01 +01:00
Code Issues Projects Releases Packages Wiki Activity

improve datetime display in webcomponent

Browse source
This commit is contained in:
lesion 2022-09-05 11:42:47 +02:00
parent 5253cee835
commit 3c176ff7af
No known key found for this signature in database
GPG key ID: 352918250B012177
1 changed files with 248 additions and 209 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

131
webcomponents/src/GancioEvents.svelte
View file

@ -1,5 +1,6 @@
<script> <svelte:options tag="gancio-events" />
<script>
import { onMount } from 'svelte' import { onMount } from 'svelte'
export let baseurl = '' export let baseurl = ''
export let title = '' export let title = ''
@ -33,84 +34,115 @@
params.push(`show_recurrent=${show_recurrent ? 'true' : 'false'}`) params.push(`show_recurrent=${show_recurrent ? 'true' : 'false'}`)
fetch(`${baseurl}/api/events?${params.join('&')}`) fetch(`${baseurl}/api/events?${params.join('&')}`)
.then(res => res.json()) .then((res) => res.json())
.then(e => { .then((e) => {
events = e events = e
}) })
.catch(e => { .catch((e) => {
console.error('Error loading Gancio API -> ', e) console.error('Error loading Gancio API -> ', e)
}) })
} }
function position(event) { function position(event) {
if (event.media[0].focalpoint) { if (event.media && event.media[0].focalpoint) {
const focalpoint = event.media[0].focalpoint const focalpoint = event.media[0].focalpoint
return `${(focalpoint[0] + 1) * 50}% ${(focalpoint[1] + 1) * 50}%` return `${(focalpoint[0] + 1) * 50}% ${(focalpoint[1] + 1) * 50}%`
} }
return 'center center' return 'center center'
} }
function when (timestamp) { function _when(unix_timestamp, type = 'long') {
return new Date(timestamp*1000) const options =
.toLocaleDateString(undefined, type === 'long'
{ ? {
weekday: 'long', weekday: 'long',
month: 'long', month: 'long',
day: 'numeric', day: 'numeric',
hour: '2-digit', hour: '2-digit',
minute: '2-digit' minute: '2-digit',
}) }
: { hour: '2-digit', minute: '2-digit' }
const d = new Date(unix_timestamp * 1000).toLocaleString(undefined, options)
return d
}
function when(event) {
if (event.multidate) {
return _when(event.start_datetime) + ' - ' + _when(event.end_datetime)
}
return (
_when(event.start_datetime) +
(event.end_datetime ? '-' + _when(event.end_datetime, 'short') : '')
)
} }
onMount(() => { onMount(() => {
mounted = true mounted = true
update() update()
}) })
$: update(maxlength && title && places && tags && theme && show_recurrent && sidebar) $: update(
maxlength && title && places && tags && theme && show_recurrent && sidebar
)
</script> </script>
<svelte:options tag="gancio-events"/>
{#if external_style}<link rel='stylesheet' href='{external_style}' />{/if} {#if external_style}<link rel="stylesheet" href={external_style} />{/if}
{#if events.length} {#if events.length}
<div id='gancioEvents' <div
class:dark="{theme === 'dark'}" class:light="{theme === 'light'}" id="gancioEvents"
class:sidebar="{sidebar === 'true'}" class:nosidebar="{sidebar !== 'true'}"> class:dark={theme === 'dark'}
class:light={theme === 'light'}
class:sidebar={sidebar === 'true'}
class:nosidebar={sidebar !== 'true'}
>
{#if title && sidebar === 'true'} {#if title && sidebar === 'true'}
<a href='{baseurl}' target='_blank' id='header'> <a href={baseurl} target="_blank" id="header">
<div class='content'> <div class="content">
<div class='title'>{title}</div> <div class="title">{title}</div>
<img id='logo' alt='logo' src='{baseurl}/logo.png'/> <img id="logo" alt="logo" src="{baseurl}/logo.png" />
</div> </div>
</a> </a>
{/if} {/if}
{#each events as event} {#each events as event}
<a href='{baseurl}/event/{event.slug || event.id}' class='event' title='{event.title}' target='_blank'> <a
href="{baseurl}/event/{event.slug || event.id}"
class="event"
title={event.title}
target="_blank"
>
{#if sidebar !== 'true'} {#if sidebar !== 'true'}
<div class='img'> <div class="img">
{#if event.media.length} {#if event.media.length}
<img style="object-position: {position(event)}; aspect-ratio=1.7778;" <img
alt="{event.media[0].name}" style="object-position: {position(event)}; aspect-ratio=1.7778;"
src="{baseurl + '/media/thumb/' + event.media[0].url}" loading='lazy'/> alt={event.media[0].name}
src={baseurl + '/media/thumb/' + event.media[0].url}
loading="lazy"
/>
{:else} {:else}
<img style="aspect-ratio=1.7778;" <img
alt="{event.title}" style="aspect-ratio=1.7778;"
src="{baseurl + '/noimg.svg'}" loading='lazy'/> alt={event.title}
src={baseurl + '/noimg.svg'}
loading="lazy"
/>
{/if} {/if}
</div> </div>
{/if} {/if}
<div class='content'> <div class="content">
<div class='subtitle'> <div class="subtitle">
{when(event.start_datetime)} {when(event)}
</div> </div>
<div class='title'> <div class="title">
{event.title} {event.title}
</div> </div>
<span class='place'>@{event.place.name} <span class='subtitle'> {event.place.address}</span></span> <span class="place"
>@{event.place.name}
<span class="subtitle"> {event.place.address}</span></span
>
{#if event.tags.length} {#if event.tags.length}
<div class='tags'> <div class="tags">
{#each event.tags as tag} {#each event.tags as tag}
<span class='tag'>#{tag}</span> <span class="tag">#{tag}</span>
{/each} {/each}
</div> </div>
{/if} {/if}
@ -119,14 +151,19 @@
{/each} {/each}
</div> </div>
{/if} {/if}
<style> <style>
#gancioEvents { #gancioEvents {
font-family: 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"; font-family: 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';
overflow-x: hidden; overflow-x: hidden;
width: 100%; width: 100%;
box-sizing: content-box; box-sizing: content-box;
margin: 0 auto; margin: 0 auto;
font-size: 1rem; font-size: 1rem;
text-align: left;
} }
.nosidebar { .nosidebar {
@ -140,7 +177,8 @@
.sidebar { .sidebar {
max-width: 500px; max-width: 500px;
box-shadow: rgba(60, 64, 67, 0.4) 0px 1px 2px 0px, rgba(60, 64, 67, 0.25) 0px 1px 3px 1px; box-shadow: rgba(60, 64, 67, 0.4) 0px 1px 2px 0px,
rgba(60, 64, 67, 0.25) 0px 1px 3px 1px;
border-radius: 5px; border-radius: 5px;
font-size: 1rem; font-size: 1rem;
} }
@ -167,7 +205,8 @@
border-radius: 15px; border-radius: 15px;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
} }
.nosidebar .event { .nosidebar .event {
@ -199,9 +238,10 @@ a {
margin: 0; margin: 0;
line-height: 1.275rem; line-height: 1.275rem;
font-weight: 400; font-weight: 400;
font-size: .875rem; font-size: 0.875rem;
position: relative; position: relative;
transition: background-color .3s cubic-bezier(.25,.8,.5,1), padding .3s; transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1),
padding 0.3s;
box-sizing: content-box; box-sizing: content-box;
} }
@ -222,8 +262,8 @@ a:active .title {
.light { .light {
--bg-odd-color: #f5f5f5; --bg-odd-color: #f5f5f5;
--bg-even-color: #FAFAFA; --bg-even-color: #fafafa;
--bg-hover-color: #EEE; --bg-hover-color: #eee;
--text-color: #222; --text-color: #222;
--title-color: black; --title-color: black;
--line-color: rgba(220, 220, 220, 0.9); --line-color: rgba(220, 220, 220, 0.9);
@ -271,5 +311,4 @@ a:active .title {
margin-right: 10px; margin-right: 10px;
display: inline-block; display: inline-block;
} }
</style> </style>