webcomponent datetime format helpers

webcomponents/src/GancioEvent.svelte

@@ -1,5 +1,8 @@
+<svelte:options tag="gancio-event" />
+
 <script>
   import { onMount } from 'svelte'
+  import { when } from './helpers'
   export let baseurl = 'https://demo.gancio.org'
   export let id
 
@@ -9,8 +12,8 @@
   function update(id, baseurl) {
     if (mounted) {
       fetch(`${baseurl}/api/event/${id}`)
-        .then(res => res.json())
+        .then((res) => res.json())
-        .then(e => event = e)
+        .then((e) => (event = e))
     }
   }
 
@@ -20,18 +23,6 @@
   })
   $: update(id, baseurl)
 
-  function when (event) {
-    return new Date(event.start_datetime*1000)
-      .toLocaleDateString(undefined,
-        {
-          weekday: 'long',
-          month: 'short',
-          day: 'numeric',
-          hour: '2-digit',
-          minute: '2-digit'
-        })
-  }
-
   function thumbnail(event) {
     return `${baseurl}/media/thumb/${event.media[0].url}`
   }
@@ -43,25 +34,34 @@
     }
     return 'center center'
   }
-
 </script>
-<svelte:options tag="gancio-event"/>
+
 {#if event}
-<a href='{baseurl}/event/{event.slug || event.id}' class='card' target='_blank'>
+  <a
+    href="{baseurl}/event/{event.slug || event.id}"
+    class="card"
+    target="_blank"
+  >
     {#if event.media.length}
-  <img src="{thumbnail(event)}" alt="{event.media[0].name}" style="object-position: {position(event)}; aspect-ratio=1.7778;">
+      <img
+        src={thumbnail(event)}
+        alt={event.media[0].name}
+        style="object-position: {position(event)}; aspect-ratio=1.7778;"
+      />
     {/if}
     <div class="container">
       <strong>{event.title}</strong>
       <div>{when(event)}</div>
-    <div class='place'>@{event.place.name}</div>
+      <div class="place">@{event.place.name}</div>
     </div>
   </a>
 {/if}
+
 <style>
   .card {
     display: block;
-  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS',
+      sans-serif;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
     transition: 0.3s;
     border-radius: 5px; /* 5px rounded corners */
@@ -93,7 +93,7 @@ img {
 
   /* Add some padding inside the card container */
   .container {
-  transition: padding-left .2s;
+    transition: padding-left 0.2s;
     padding: 16px;
   }
 

webcomponents/src/GancioEvents.svelte

@@ -2,6 +2,7 @@
 
 <script>
   import { onMount } from 'svelte'
+  import { when } from './helpers'
   export let baseurl = ''
   export let title = ''
   export let maxlength = false
@@ -51,31 +52,6 @@
     return 'center center'
   }
 
-  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()

webcomponents/src/helpers.js

@@ -0,0 +1,24 @@
+function formatDatetime(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' }
+  return new Date(timestamp * 1000).toLocaleString(undefined, options)
+}
+
+
+export function when(event) {
+  if (event.multidate) {
+    return formatDatetime(event.start_datetime) + ' - ' + formatDatetime(event.end_datetime)
+  }
+  return (
+    formatDatetime(event.start_datetime) +
+    (event.end_datetime ? '-' + formatDatetime(event.end_datetime, 'short') : '')
+  )
+}