Browse Source

display timeline and available slots

master
Marek Piasecki 2 years ago
parent
commit
64f375f81c
  1. 1
      src/router.imba
  2. 53
      src/ui/choose-slot.imba
  3. 2
      src/ui/plus-minus.imba
  4. 5
      src/views/choose-slot.imba

1
src/router.imba

@ -18,7 +18,6 @@ import "./views/choose-slot.imba"
import "./main.css" import "./main.css"
global css global css
body jc@portrait:flex-end
.active filter:hue-rotate(45deg) bxs:md .active filter:hue-rotate(45deg) bxs:md
.clickable us:none cursor@hover:pointer o@hover:0.7 tween:opacity 300ms .clickable us:none cursor@hover:pointer o@hover:0.7 tween:opacity 300ms
.bordered bd:2px solid violet5 rd:10px .bordered bd:2px solid violet5 rd:10px

53
src/ui/choose-slot.imba

@ -1,4 +1,4 @@
import bookings from "../api/bookings_2023_02_01.json" # bookings.where ending_date >= $date and starting_date <= $date sort b sort_by starting_date import bookings from "../api/bookings_2023_02_01.json" # bookings.where ending_date >= $date and starting_date <= $date + 3 days sort b sort_by starting_date
# make objects # make objects
for booking in bookings for booking in bookings
@ -8,13 +8,10 @@ for booking in bookings
import sh from "../ui/slot-size-input.imba" import sh from "../ui/slot-size-input.imba"
let h = let h =
scope: 3days
resolution: 15minutes resolution: 15minutes
date: do R.param('alt-day') || R.param('date') date: do R.param('alt-day') || R.param('date')
next_day: do scope_day: do h.move_date h.date!, h.scope
return #next_day if #next_day
let day = new Date(h.date!)
day.setDate(day.getDate! + 1)
#next_day = day
slots: do slots: do
#slots ||= h.calculate_slots! #slots ||= h.calculate_slots!
@ -22,7 +19,7 @@ let h =
calculate_slots: do calculate_slots: do
let slots = [] let slots = []
unless bookings.length unless bookings.length
slots.push start: h.date!, end: h.next_day! slots.push start: h.date!, end: h.scope_day!
else else
let first = bookings[0] let first = bookings[0]
if first.start > h.date! if first.start > h.date!
@ -35,8 +32,8 @@ let h =
let last = bookings[-1] let last = bookings[-1]
if last.end < h.next_day! if last.end < h.scope_day!
slots.push start: last.end, end: h.next_day! slots.push start: last.end, end: h.move_date(last.end, h.scope)
for slot in slots for slot in slots
h.adjust(slot, 'start') h.adjust(slot, 'start')
@ -54,18 +51,40 @@ let h =
calculate_duration: do |slot| calculate_duration: do |slot|
Number(slot.end) - Number(slot.start) Number(slot.end) - Number(slot.start)
duration: do duration: do # size of booking in time
h._duration ||= h.calculate_duration end: R.param('size'), start: sh.zero! h._duration ||= h.calculate_duration end: R.param('size'), start: sh.zero!
move_date: do |date, interval|
new Date(Number(date) + interval)
let filtered_slots
let first_available
tag choose-slot tag choose-slot
def render def render
h._duration = 0 # reset cache h._duration = first_available = 0 # reset cache
filtered_slots = h.slots!.filter do |s| s.duration >= h.duration!
let day = h.date!; day = h.move_date(day, day.getTimezoneOffset! * 1minutes)
let next_day = h.move_date(h.date!, 1days)
<self> <self>
if h.slots!.length if filtered_slots.length
for d in h.slots! <time-slot data=day>
if d.duration > h.duration! for i in [0 .. 94]
<p> "{d.end}" <time-slot data=day=h.move_date(day, h.resolution)>
else else
<h2> "No slot available this day" <h2> "No slot available this day"
<simple-date-input> <simple-date-input> if !filtered_slots.length or R.params['alt-date']
tag time-slot
def f n
"{if n < 10 then 0 else ''}{n}"
get free?
for slot in filtered_slots
if data >= slot.start and (h.move_date(data, h.duration!) <= slot.end)
first_available ||= data
return true
false
<self.active=free?> "{f data.getHours!}:{f data.getMinutes!}"

2
src/ui/plus-minus.imba

@ -7,7 +7,7 @@ tag plus-minus
css m:10px css m:10px
> miw:50px h:50px p:19px 5px 0 ta:center fs:180% > miw:50px h:50px p:19px 5px 0 ta:center fs:180%
<self.bordered-complex @wheel=(e.deltaY < 0 ? incr! : decr!)> <self.bordered-complex @wheel.prevent=(e.deltaY < 0 ? incr! : decr!)>
<plus-minus-plus.first incr=incr> <plus-minus-plus.first incr=incr>
if value if value
<div> decorate ? decorate(value) : value <div> decorate ? decorate(value) : value

5
src/views/choose-slot.imba

@ -12,8 +12,9 @@ tag view-choose-slot
<SizeHint size="12"> <SizeHint size="12">
<slot-size-input> <slot-size-input>
<choose-slot> <choose-slot>
<pro-ref view="booking-confirmation"> <br>
<action-button[w:230px fs:larger]> "Book slot" // <pro-ref view="booking-confirmation">
// <action-button[w:230px fs:larger]> "Book slot"
tag SizeHint < action-button tag SizeHint < action-button
prop size prop size

Loading…
Cancel
Save