koro

commit 06c4bfb51730ab824f2dc0c7695940d22f8f4e24
parent 37a04881aac253987dd368bb947857fcc5d96e9c
Author: mokou <mokou@posteo.de>
Date:   Thu, 21 May 2020 21:08:53 +0200

feat: Show all dates on Day 1

Diffstat:
M
src/components/DateTimeGrid.svelte
 | 
18
++++++++----------
M
src/main.css
 | 
4
++++
M
tailwind.config.js
 | 
4
+++-

3 files changed, 15 insertions(+), 11 deletions(-)
diff --git a/src/components/DateTimeGrid.svelte b/src/components/DateTimeGrid.svelte
@@ -11,17 +11,12 @@
   let datesDay2 = []
   let day3 = null
   let datesDay3 = []
-  let view = [0, 5]
+  let view = [25, 30]
   initDays(day(startDate))
 
   function initDays(start) {
-    let first = start
-    if (start.date() === day(startDate).date()) {
-      day1 = day(startDate)
-      first = day1.add(30, 'minutes').startOf('hour')
-    } else {
-      day1 = start
-    }
+    let first = start.startOf('day')
+    day1 = first
     datesDay1 = [first]
     let indexDay1 = first
     while (indexDay1.add(30, 'minutes').date() === day1.date()) {
@@ -51,6 +46,7 @@
   }
 
   function addOrRemove(date) {
+    if (day().isAfter(date)) return
     if (selected.includes(date.toISOString())) {
       let c = selected
       c.splice(selected.indexOf(date.toISOString()), 1)
@@ -93,8 +89,10 @@
   {#each datesDay1.slice(view[0], view[1]) as t}
     <div
       class="text-center time hover:cursor-pointer"
-      class:bg-purple-600={selected.includes(t.toISOString())}
-      class:text-white={selected.includes(t.toISOString())}
+      class:text-gray-600={day().isAfter(t)}
+      class:time-unselectable={day().isAfter(t)}
+      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')}
     </div>
diff --git a/src/main.css b/src/main.css
@@ -47,6 +47,10 @@ input {
   @apply bg-purple-600 text-white;
 }
 
+.datetimegrid div.time-unselectable:hover {
+  @apply bg-white text-gray-600 cursor-not-allowed;
+}
+
 .autocomplete__menu {
   @apply w-full bg-white border border-gray-400 rounded border-t-0;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -12,7 +12,9 @@ module.exports = {
         'bg-yellow-300',
         'bg-green-500',
         'bg-purple-600',
-        'text-white'
+        'text-white',
+        'text-gray-600',
+        'time-unselectable'
       ]
     }
   },