From 3c176ff7af2889f26228476fd76a6b55a231786b Mon Sep 17 00:00:00 2001
From: lesion <lesion@autistici.org>
Date: Mon, 5 Sep 2022 11:42:47 +0200
Subject: [PATCH] improve datetime display in webcomponent

---
 webcomponents/src/GancioEvents.svelte | 457 ++++++++++++++------------
 1 file changed, 248 insertions(+), 209 deletions(-)

diff --git a/webcomponents/src/GancioEvents.svelte b/webcomponents/src/GancioEvents.svelte
index 7cbd9c70..6e3dc9a3 100644
--- a/webcomponents/src/GancioEvents.svelte
+++ b/webcomponents/src/GancioEvents.svelte
@@ -1,5 +1,6 @@
-<script>
+<svelte:options tag="gancio-events" />
 
+<script>
   import { onMount } from 'svelte'
   export let baseurl = ''
   export let title = ''
@@ -7,7 +8,7 @@
   export let tags = ''
   export let places = ''
   export let theme = 'light'
-  export let show_recurrent=false
+  export let show_recurrent = false
   export let sidebar = 'true'
 
   export let external_style = ''
@@ -15,14 +16,14 @@
   let mounted = false
   let events = []
 
-  function update (v) {
+  function update(v) {
     if (!mounted) return
     const params = []
     if (maxlength) {
       params.push(`max=${maxlength}`)
     }
 
-    if(tags) {
+    if (tags) {
       params.push(`tags=${tags}`)
     }
 
@@ -30,246 +31,284 @@
       params.push(`places=${places}`)
     }
 
-    params.push(`show_recurrent=${show_recurrent?'true':'false'}`)
-    
+    params.push(`show_recurrent=${show_recurrent ? 'true' : 'false'}`)
+
     fetch(`${baseurl}/api/events?${params.join('&')}`)
-    .then(res => res.json())
-    .then(e => {
-      events = e
-    })
-    .catch(e => {
-      console.error('Error loading Gancio API -> ', e)
-    })
+      .then((res) => res.json())
+      .then((e) => {
+        events = e
+      })
+      .catch((e) => {
+        console.error('Error loading Gancio API -> ', e)
+      })
   }
 
-
   function position(event) {
-    if (event.media[0].focalpoint) {
-        const focalpoint = event.media[0].focalpoint
-        return `${(focalpoint[0] + 1) * 50}% ${(focalpoint[1] + 1) * 50}%`
-      }
-      return 'center center'    
-  }  
+    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,
-        {
-          weekday: 'long',
-          month: 'long',
-          day: 'numeric',
-          hour: '2-digit',
-          minute: '2-digit'
-        })
+  function _when(unix_timestamp, type = 'long') {
+    const options =
+      type === 'long'
+        ? {
+            weekday: 'long',
+            month: 'long',
+            day: 'numeric',
+            hour: '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'}">
-  {#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'/>
-    </div>
-  </a>
-  {/if}
-  {#each events as event}
-    <a href='{baseurl}/event/{event.slug || event.id}' class='event' title='{event.title}' target='_blank'>
-      {#if sidebar !== 'true'}
-      <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'/>
-        {:else}
-          <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
+    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" />
         </div>
-        <div class='title'>
-          {event.title}
-        </div>
-        <span class='place'>@{event.place.name} <span class='subtitle'> {event.place.address}</span></span>
-        {#if event.tags.length}
-          <div class='tags'>
-          {#each event.tags as tag}
-            <span class='tag'>#{tag}</span>
-          {/each}
+      </a>
+    {/if}
+    {#each events as event}
+      <a
+        href="{baseurl}/event/{event.slug || event.id}"
+        class="event"
+        title={event.title}
+        target="_blank"
+      >
+        {#if sidebar !== 'true'}
+          <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"
+              />
+            {:else}
+              <img
+                style="aspect-ratio=1.7778;"
+                alt={event.title}
+                src={baseurl + '/noimg.svg'}
+                loading="lazy"
+              />
+            {/if}
           </div>
         {/if}
-      </div>
-    </a>
+        <div class="content">
+          <div class="subtitle">
+            {when(event)}
+          </div>
+          <div class="title">
+            {event.title}
+          </div>
+          <span class="place"
+            >@{event.place.name}
+            <span class="subtitle"> {event.place.address}</span></span
+          >
+          {#if event.tags.length}
+            <div class="tags">
+              {#each event.tags as tag}
+                <span class="tag">#{tag}</span>
+              {/each}
+            </div>
+          {/if}
+        </div>
+      </a>
     {/each}
-</div>
+  </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";
-  overflow-x: hidden;
-  width: 100%;
-  box-sizing: content-box;
-  margin: 0 auto;
-  font-size: 1rem;
-}
-
-.nosidebar {
-  max-width: 1200px;
-}
-
-#header{
-  padding: 1.2rem 1rem;
-  background-color: var(--bg-odd-color);
-}
-
-.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;
-  border-radius: 5px;
-  font-size: 1rem;
-}
-
-.event .img {
-  width: 100%;
-  max-width: 450px;
-  max-height: 250px;
-  aspect-ratio: 1.7778;
-  flex: 1 0 auto;
-  /* height: 100%; */
-}
-
-@media screen and (max-width: 800px) {
-  .event {
-    flex-wrap: wrap;
+  #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';
+    overflow-x: hidden;
+    width: 100%;
+    box-sizing: content-box;
+    margin: 0 auto;
+    font-size: 1rem;
+    text-align: left;
   }
+
+  .nosidebar {
+    max-width: 1200px;
+  }
+
+  #header {
+    padding: 1.2rem 1rem;
+    background-color: var(--bg-odd-color);
+  }
+
+  .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;
+    border-radius: 5px;
+    font-size: 1rem;
+  }
+
   .event .img {
-    max-width: 100%;
+    width: 100%;
+    max-width: 450px;
+    max-height: 250px;
+    aspect-ratio: 1.7778;
+    flex: 1 0 auto;
+    /* height: 100%; */
   }
-}
-.event img {
-  object-fit: cover;
-  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;
-}
 
-.nosidebar .event {
-  margin-bottom: 2rem;
-}
+  @media screen and (max-width: 800px) {
+    .event {
+      flex-wrap: wrap;
+    }
+    .event .img {
+      max-width: 100%;
+    }
+  }
+  .event img {
+    object-fit: cover;
+    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;
+  }
 
-.nosidebar .content {
-  margin-left: 1rem;
-  margin-top: 5px;
-  text-align: left;
-}
+  .nosidebar .event {
+    margin-bottom: 2rem;
+  }
 
-.tags {
-  margin-top: 2px;
-}
+  .nosidebar .content {
+    margin-left: 1rem;
+    margin-top: 5px;
+    text-align: left;
+  }
 
-#logo {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  height: 40px;
-}
+  .tags {
+    margin-top: 2px;
+  }
 
-a {
-  text-decoration: none;
-  color: var(--text-color);
-  display: flex;
-  padding: 8px 20px;
-  margin: 0;
-  line-height: 1.275rem;
-  font-weight: 400;
-  font-size: .875rem;
-  position: relative;
-  transition: background-color .3s cubic-bezier(.25,.8,.5,1), padding .3s;
-  box-sizing: content-box;
-}
+  #logo {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    height: 40px;
+  }
 
-a:hover .title,
-a:focus .title,
-a:active .title {
-  text-decoration:underline;
-}
+  a {
+    text-decoration: none;
+    color: var(--text-color);
+    display: flex;
+    padding: 8px 20px;
+    margin: 0;
+    line-height: 1.275rem;
+    font-weight: 400;
+    font-size: 0.875rem;
+    position: relative;
+    transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1),
+      padding 0.3s;
+    box-sizing: content-box;
+  }
 
-.dark {
-  --bg-odd-color: #161616;
-  --bg-even-color: #222;
-  --bg-hover-color: #333;
-  --text-color: white;
-  --title-color: white;
-  --line-color: rgba(120, 120, 120, 0.2);
-}
+  a:hover .title,
+  a:focus .title,
+  a:active .title {
+    text-decoration: underline;
+  }
 
-.light {
-  --bg-odd-color: #f5f5f5;
-  --bg-even-color: #FAFAFA;
-  --bg-hover-color: #EEE;
-  --text-color: #222;
-  --title-color: black;
-  --line-color: rgba(220, 220, 220, 0.9);
-}
-.sidebar a {
-  background-color: var(--bg-even-color);
-  border-bottom:1px solid var(--line-color);
-}
+  .dark {
+    --bg-odd-color: #161616;
+    --bg-even-color: #222;
+    --bg-hover-color: #333;
+    --text-color: white;
+    --title-color: white;
+    --line-color: rgba(120, 120, 120, 0.2);
+  }
 
-.sidebar a:hover,
-.sidebar a:focus,
-.sidebar a:active {
-  background-color: var(--bg-hover-color);
-  padding-left: 15px;
-  padding-right:25px;
-}
+  .light {
+    --bg-odd-color: #f5f5f5;
+    --bg-even-color: #fafafa;
+    --bg-hover-color: #eee;
+    --text-color: #222;
+    --title-color: black;
+    --line-color: rgba(220, 220, 220, 0.9);
+  }
+  .sidebar a {
+    background-color: var(--bg-even-color);
+    border-bottom: 1px solid var(--line-color);
+  }
 
-.place {
-  font-weight: 400;
-  font-size: 1.2rem;
-  line-height: 1.4rem;
-  color: orangered;
-}
+  .sidebar a:hover,
+  .sidebar a:focus,
+  .sidebar a:active {
+    background-color: var(--bg-hover-color);
+    padding-left: 15px;
+    padding-right: 25px;
+  }
 
-.title {
-  color: var(--title-color);
-  font-weight: bold;
-  font-size: 1.3rem;
-  line-height: 1.1em;
-}
+  .place {
+    font-weight: 400;
+    font-size: 1.2rem;
+    line-height: 1.4rem;
+    color: orangered;
+  }
 
-.nosidebar .title {
-  font-size: 1.9em;
-  line-height: 1.1em;
-}
+  .title {
+    color: var(--title-color);
+    font-weight: bold;
+    font-size: 1.3rem;
+    line-height: 1.1em;
+  }
 
-.subtitle {
-  font-size: 1rem;
-  line-height: 1.1em;
-  color: var(--title-color);
-  opacity: 0.9;
-}
+  .nosidebar .title {
+    font-size: 1.9em;
+    line-height: 1.1em;
+  }
 
-.tag {
-  margin-right: 10px;
-  display: inline-block;
-}
+  .subtitle {
+    font-size: 1rem;
+    line-height: 1.1em;
+    color: var(--title-color);
+    opacity: 0.9;
+  }
 
+  .tag {
+    margin-right: 10px;
+    display: inline-block;
+  }
 </style>