NoLog.cz/gancio-upstream
6
0
Fork 0
mirror of https://framagit.org/les/gancio.git synced 2025-01-31 16:42:22 +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'
export let baseurl = ''
export let title = ''
@ -33,84 +34,115 @@
params.push(`show_recurrent=${show_recurrent ? 'true' : 'false'}`)
fetch(`${baseurl}/api/events?${params.join('&')}`)
.then(res => res.json())
.then(e => {
.then((res) => res.json())
.then((e) => {
events = e
})
.catch(e => {
.catch((e) => {
console.error('Error loading Gancio API -> ', e)
})
}
function position(event) {
if (event.media[0].focalpoint) {
if (event.media && event.media[0].focalpoint) {
const focalpoint = event.media[0].focalpoint
return `${(focalpoint[0] + 1) * 50}% ${(focalpoint[1] + 1) * 50}%`
}
return 'center center'
}
function when (timestamp) {
return new Date(timestamp*1000)
.toLocaleDateString(undefined,
{
function _when(unix_timestamp, type = 'long') {
const options =
type === 'long'
? {
weekday: 'long',
month: 'long',
day: 'numeric',
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(() => {
mounted = true
update()
})
$: update(maxlength && title && places && tags && theme && show_recurrent && sidebar)
$: update(
maxlength && title && places && tags && theme && show_recurrent && sidebar
)
</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}
<div id='gancioEvents'
class:dark="{theme === 'dark'}" class:light="{theme === 'light'}"
class:sidebar="{sidebar === 'true'}" class:nosidebar="{sidebar !== 'true'}">
<div
id="gancioEvents"
class:dark={theme === 'dark'}
class:light={theme === 'light'}
class:sidebar={sidebar === 'true'}
class:nosidebar={sidebar !== 'true'}
>
{#if title && sidebar === 'true'}
<a href='{baseurl}' target='_blank' id='header'>
<div class='content'>
<div class='title'>{title}</div>
<img id='logo' alt='logo' src='{baseurl}/logo.png'/>
<a href={baseurl} target="_blank" id="header">
<div class="content">
<div class="title">{title}</div>
<img id="logo" alt="logo" src="{baseurl}/logo.png" />
</div>
</a>
{/if}
{#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'}
<div class='img'>
<div class="img">
{#if event.media.length}
<img style="object-position: {position(event)}; aspect-ratio=1.7778;"
alt="{event.media[0].name}"
src="{baseurl + '/media/thumb/' + event.media[0].url}" loading='lazy'/>
<img
style="object-position: {position(event)}; aspect-ratio=1.7778;"
alt={event.media[0].name}
src={baseurl + '/media/thumb/' + event.media[0].url}
loading="lazy"
/>
{:else}
<img style="aspect-ratio=1.7778;"
alt="{event.title}"
src="{baseurl + '/noimg.svg'}" loading='lazy'/>
<img
style="aspect-ratio=1.7778;"
alt={event.title}
src={baseurl + '/noimg.svg'}
loading="lazy"
/>
{/if}
</div>
{/if}
<div class='content'>
<div class='subtitle'>
{when(event.start_datetime)}
<div class="content">
<div class="subtitle">
{when(event)}
</div>
<div class='title'>
<div class="title">
{event.title}
</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}
<div class='tags'>
<div class="tags">
{#each event.tags as tag}
<span class='tag'>#{tag}</span>
<span class="tag">#{tag}</span>
{/each}
</div>
{/if}
@ -119,14 +151,19 @@
{/each}
</div>
{/if}
<style>
#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;
width: 100%;
box-sizing: content-box;
margin: 0 auto;
font-size: 1rem;
text-align: left;
}
.nosidebar {
@ -140,7 +177,8 @@
.sidebar {
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;
font-size: 1rem;
}
@ -167,7 +205,8 @@
border-radius: 15px;
width: 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 {
@ -199,9 +238,10 @@ a {
margin: 0;
line-height: 1.275rem;
font-weight: 400;
font-size: .875rem;
font-size: 0.875rem;
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;
}
@ -222,8 +262,8 @@ a:active .title {
.light {
--bg-odd-color: #f5f5f5;
--bg-even-color: #FAFAFA;
--bg-hover-color: #EEE;
--bg-even-color: #fafafa;
--bg-hover-color: #eee;
--text-color: #222;
--title-color: black;
--line-color: rgba(220, 220, 220, 0.9);
@ -271,5 +311,4 @@ a:active .title {
margin-right: 10px;
display: inline-block;
}
</style>