styles and day selection feature

src/main.css

@@ -0,0 +1,29 @@
+@font-face {
+    font-family: 'Blogger';
+    src: url('./assets/Blogger_Sans.woff') format('woff');
+    font-weight: 400;
+    font-stretch: 75% 125%;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'BloggerMedium';
+    src: url('./assets/Blogger_Sans-Medium.woff') format('woff');
+    font-weight: 500;
+    font-stretch: 75% 125%;
+    font-style: normal;
+}
+@font-face {
+    font-family: 'BloggerBold';
+    src: url('./assets/Blogger_Sans-Bold.woff') format('woff');
+    font-weight: 600 700;
+    font-stretch: 75% 125%;
+    font-style: normal;
+}
+
+body { font-family: 'Blogger'; height: 100%; margin: 0; display: flex; flex-direction: column; }
+html { height: 100%; margin: 0}
+  
+strong {
+  font-family: 'BloggerBold';
+  font-weight: normal;
+}

src/router.imba

@@ -2,7 +2,7 @@ import "pro-router/standalone"
 import "./lib/router_tag.imba"
 import { compact, fromPairs, chunk, includes, reject, toPairs, flatten } from 'lodash'
 
-let helpers =
+global.H =
 	compact: compact
 	fromPairs: fromPairs
 	chunk: chunk
@@ -11,4 +11,21 @@ let helpers =
 	toPairs: toPairs
 	flatten: flatten
 
-R.init(helpers: helpers, views: ['day-select', 'choose-slot', 'booking-confirmation'], root: 'day-select', render: imba.commit)
+R.init(helpers: H, views: ['day-select', 'choose-slot', 'booking-confirmation'], root: 'day-select', render: imba.commit)
+
+import "./views/day-select.imba"
+import "./main.css"
+
+global css
+	body jc@portrait:flex-end
+	.active filter:hue-rotate(45deg) bxs:md
+	.clickable us:none cursor@hover:pointer o@hover:0.7 tween:opacity 300ms
+	.bordered  bd: 2px solid violet5 rd: 10px
+	.bordered-complex > bdr: 2px solid violet5 bdl: 2px solid violet5
+		@first bdt:2px solid violet6 rd:20px 20px 0 0
+		@last bdb:2px solid violet6 rd:0 0 20px 20px
+
+tag app
+	<self[max-width:260px m:0 auto p:2rem ta:center]><pro-router>
+
+imba.mount <app>

src/ui/action-button.imba

@@ -0,0 +1,3 @@
+tag action-button
+	css p:13px 5px mx: 5px bgc:violet5 c:white fw:bold d:inline-block bxs:sm
+	<self.clickable.bordered><slot>

src/ui/date-input.imba

@@ -0,0 +1,47 @@
+import './plus-minus.imba'
+
+let h =
+	today: do new Date
+
+	modify: do |what, n, date=R.param('date')|
+		date["set{what}"]( date["get{what}"]() + n )
+		date
+
+	change: do |what, n, date=R.param('date')|
+		h.save h.modify(*arguments)
+
+	save: do |date|
+		R.write 'date', date
+
+	incr_day: do h.change "Date", 1
+	decr_day: do h.change "Date", -1
+	incr_month: do h.change "Month", 1
+	decr_month: do h.change "Month", -1
+	incr_year: do h.change "FullYear", 1
+	decr_year: do h.change "FullYear", -1
+
+	no_time: do |date|
+		date.setHours(0,0,0,0)
+		date
+
+	valid: do |date|
+		( date || R.param('date') ) > h.no_time! h.today!
+
+	format: do |n|
+		"{if n < 10 then 0 else ''}{n}"
+
+export default h
+
+R.setters.date = do |v| "{v.getFullYear!}-{h.format(v.getMonth!+1)}-{h.format(v.getDate!)}" if h.valid(v)
+R.getters.date = do |v|
+	if v
+		let date = new Date(v)
+		return date if h.valid(date)
+	h.today!
+
+tag date-input
+	<self[d:hflex jac:center]>
+		<plus-minus value=R.param('date').getFullYear! decr=h.decr_year incr=h.incr_year>
+		<plus-minus value=R.param('date').getMonth!+1 decorate=h.format decr=h.decr_month incr=h.incr_month>
+		<plus-minus value=R.param('date').getDate! decorate=h.format decr=h.decr_day incr=h.incr_day>
+		

src/ui/plus-minus.imba

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

src/views/day-select.imba

@@ -0,0 +1,24 @@
+import dh from "../ui/date-input.imba"
+import "../ui/action-button.imba"
+
+let h =
+	tomorrow: do dh.modify "Date", 1, dh.today!
+	in_a_week: do dh.modify "Date", 7, dh.today!
+	day_word: do /^\w*/.exec(R.param('date').toString!)[0]
+
+tag view-day-select
+	<self>
+		<h1> "Which day?"
+		<DayHint day=dh.today!> "Today"
+		<DayHint day=h.tomorrow!> "Tomorrow"
+		<DayHint day=h.in_a_week!> "In a week"
+		<date-input>
+		<pro-ref view="choose-slot">
+			<action-button[w:230px fs:larger]> "Check slots for {h.day_word!}"
+
+tag DayHint < action-button
+	prop day
+	<self.clickable.bordered.active=compare_days @click=dh.save(day)><slot>
+
+	get compare_days
+		R.setters.date(R.param('date')) == R.setters.date(day)