koro

commit 5f7eeaa4eb2a8f39cf038384f8c572a54169b60d
parent fb8fe152176b18056c4523059248197e64e028cc
Author: mokou <mokou@posteo.de>
Date:   Thu, 21 May 2020 21:56:09 +0200

feat: Support AM/PM and 24-hr time

Closes #4.

Diffstat:
M
src/App.svelte
 | 
14
++++++++++++++
M
src/components/DateTimeGrid.svelte
 | 
9
+++++----
M
src/components/ResponseGrid.svelte
 | 
3
++-
M
src/pages/Event.svelte
 | 
4
++--
M
src/stores.js
 | 
1
+

5 files changed, 24 insertions(+), 7 deletions(-)
diff --git a/src/App.svelte b/src/App.svelte
@@ -1,5 +1,6 @@
 <script>
   import navaid from 'navaid'
+  import { is24Hrs } from './stores'
   import Index from './pages/Index.svelte'
   import Event from './pages/Event.svelte'
 
@@ -22,4 +23,17 @@
 
 <main class="w-full max-w-screen-xl px-4 mx-auto px-6 mt-5">
   <svelte:component this={route} bind:params={routeParams} />
+
+  <hr class="border-gray-300 mt-5 mb-2 max-w-xl"/>
+  <div class="text-center text-sm text-gray-800 max-w-xl">
+    koro v.{process.version} &bull;
+    <span class="text-purple-600 hover:cursor-pointer" on:click={is24Hrs.set(!$is24Hrs)}>
+      {#if $is24Hrs}
+        toggle AM/PM
+      {:else}
+        toggle 24-hours
+      {/if}
+      <br/>
+    </span>
+  </div>
 </main>
diff --git a/src/components/DateTimeGrid.svelte b/src/components/DateTimeGrid.svelte
@@ -1,6 +1,7 @@
 <script>
   import day from 'dayjs'
   import relativeTime from 'dayjs/plugin/relativeTime'
+  import { is24Hrs } from '../stores'
   day.extend(relativeTime)
 
   export let startDate
@@ -94,7 +95,7 @@
       class:bg-purple-600={!day().isAfter(t) && selected.includes(t.toISOString())}
       class:text-white={!day().isAfter(t) && selected.includes(t.toISOString())}
       on:click={() => addOrRemove(t)}>
-      {t.format('hh:mm')}
+      {t.format($is24Hrs ? 'HH:mm' : 'hh:mma')}
     </div>
   {/each}
 
@@ -109,7 +110,7 @@
       class:bg-purple-600={selected.includes(t.toISOString())}
       class:text-white={selected.includes(t.toISOString())}
       on:click={() => addOrRemove(t)}>
-      {t.format('hh:mm')}
+      {t.format($is24Hrs ? 'HH:mm' : 'hh:mma')}
     </div>
   {/each}
 
@@ -124,7 +125,7 @@
       class:bg-purple-600={selected.includes(t.toISOString())}
       class:text-white={selected.includes(t.toISOString())}
       on:click={() => addOrRemove(t)}>
-      {t.format('hh:mm')}
+      {t.format($is24Hrs ? 'HH:mm' : 'hh:mma')}
     </div>
   {/each}
   <div class="text-center hover:cursor-pointer" on:click={nextDay}>▼</div>
@@ -135,7 +136,7 @@
   <ul class="list-disc">
     {#each selected as s}
       <li>
-        <span class="font-bold">{day(s).format('DD/MM/YYYY hh:mm')}</span>
+        <span class="font-bold">{day(s).format(`DD/MM/YYYY ${$is24Hrs ? 'HH:mm' : 'hh:mma'}`)}</span>
         ({day(s).fromNow()})
       </li>
     {/each}
diff --git a/src/components/ResponseGrid.svelte b/src/components/ResponseGrid.svelte
@@ -3,6 +3,7 @@
   export let responses
   import day from 'dayjs'
   import utc from 'dayjs/plugin/utc'
+  import { is24Hrs } from '../stores'
   day.extend(utc)
 
   let view = [0, 9]
@@ -18,7 +19,7 @@
 <div class="max-w-3xl grid grid-cols-12">
   <div class="col-span-3" />
   {#each times.slice(view[0], view[1]) as t}
-    <div class="text-center">{day.utc(t).local().format('DD/MM hh:mm')}</div>
+    <div class="text-center">{day.utc(t).local().format(`DD/MM ${$is24Hrs ? 'HH:mm' : 'hh:mma'}`)}</div>
   {/each}
   {#if times.slice(view[0], view[1]).length < 9}
     {#each new Array(9 - times.slice(view[0], view[1]).length) as a}
diff --git a/src/pages/Event.svelte b/src/pages/Event.svelte
@@ -8,7 +8,7 @@
   import { get } from 'svelte/store'
   import { pouch, replicateToCouch, syncDoc } from '../couch'
   import ResponseGrid from '../components/ResponseGrid.svelte'
-  import { hasResponded } from '../stores'
+  import { hasResponded, is24Hrs } from '../stores'
   day.extend(utc)
   day.extend(relativeTime)
 
@@ -183,7 +183,7 @@
             on:click={() => toggleNo(t)} />
           <div class="ml-3">
             <span class="font-bold">
-              {day.utc(t).local().format('DD/MM/YYYY hh:mm')}
+              {day.utc(t).local().format(`DD/MM/YYYY ${$is24Hrs ? 'HH:mm' : 'hh:mma'}`)}
             </span>
             ({day.utc(t).local().fromNow()})
           </div>
diff --git a/src/stores.js b/src/stores.js
@@ -3,6 +3,7 @@ import { writable } from 'svelte/store'
 const localStorage = window.localStorage
 
 export const hasResponded = localStorageStore('hasResponded')
+export const is24Hrs = localStorageStore('is24Hrs')
 
 function localStorageStore(key) {
   const item = localStorage.getItem(key)