defining slot size

src/index.js

@@ -1,3 +1,2 @@
-import "pro-router/standalone"
 import "./router.imba"
-import "./main.imba"
+// import "./main.imba"

src/router.imba

@@ -14,6 +14,7 @@ global.H =
 R.init(helpers: H, views: ['day-select', 'choose-slot', 'booking-confirmation'], root: 'day-select', render: imba.commit)
 
 import "./views/day-select.imba"
+import "./views/choose-slot.imba"
 import "./main.css"
 
 global css

src/ui/slot-size-input.imba

@@ -0,0 +1,52 @@
+import './plus-minus.imba'
+
+let h =
+	zero: do new Date(0)
+	max_size: do #ms ||= R.getters.size "3_0_0", 1 # 3 days
+
+	validate: do |s|
+		return R.getters.size("0_0_5", 1)  if s < h.zero!
+		return new Date(h.max_size!) if s > h.max_size!
+		s
+
+	modify: do |what, n, date=R.param('size')|
+		date["set{what}"]( date["get{what}"]() + n )
+		h.validate(date)
+
+	change: do |what, n, date=R.param('size')|
+		h.save h.modify(*arguments)
+
+	save: do |date|
+		R.write 'size', date
+
+	days: do |day=R.param('size')| day.getDate! - 1
+	incr_day: do h.change "Date", 1
+	decr_day: do h.change "Date", -1
+	incr_h: do h.change "Hours", 1
+	decr_h: do h.change "Hours", -1
+	incr_min: do h.change "Minutes", 5
+	decr_min: do h.change "Minutes", -5
+
+	set_time: do |days, hour, min, date=h.zero!|
+		date.setHours(hour, min, 0, 0)
+		date.setDate(Number(days)+1)
+		date
+
+	format_d: do |n| "{n}{n > 1 ? "days" : "day"}"
+	format_h: do |n| "{n}h"
+	format_min: do |n| "{n}min"
+
+export default h
+
+R.setters.size = do |v| let s = "{h.days(v)}_{v.getHours!}_{v.getMinutes!}"; s if s!= "0_0_30"
+R.getters.size = do |v, skip_validation|
+	let size = v ? v.split('_') : [0, 0, 30]
+	let date = h.set_time(*size)
+	skip_validation ? date : h.validate(date)
+
+tag slot-size-input
+	<self[d:hflex jac:center]>
+		if h.days! > 0
+			<plus-minus value=h.days! decorate=h.format_d decr=h.decr_day incr=h.incr_day>
+		<plus-minus value=R.param('size').getHours!.toString! decorate=h.format_h decr=h.decr_h incr=h.incr_h>
+		<plus-minus value=R.param('size').getMinutes!.toString! decorate=h.format_min decr=h.decr_min incr=h.incr_min>	

src/views/choose-slot.imba

@@ -0,0 +1,24 @@
+import sh from "../ui/slot-size-input.imba"
+import "../ui/action-button.imba"
+
+tag view-choose-slot
+	<self>
+		<h1> "How long?"
+		<SizeHint size="1">
+		<SizeHint size="3">
+		<SizeHint size="6">
+		<SizeHint size="10">
+		<SizeHint size="12">
+		<slot-size-input>
+		<pro-ref view="booking-confirmation">
+			<action-button[w:230px fs:larger]> "Book slot"
+
+tag SizeHint < action-button
+	prop size
+	<self[mx:7px].clickable.bordered.active=compare @click=sh.save(R.getters.size(size_hash))> "{ size }h"
+
+	get compare
+		R.params.size == size_hash
+
+	get size_hash
+		"0_{size}_0"