confirmation page

src/router.imba

@@ -15,17 +15,20 @@ R.init(helpers: H, views: ['day-select', 'choose-slot', 'booking-confirmation'],
 
 import "./views/day-select.imba"
 import "./views/choose-slot.imba"
+import "./views/booking-confirmation.imba"
 import "./main.css"
 
 global css
 	.active filter:hue-rotate(45deg) bxs:md
 	.clickable us:none cursor@hover:pointer o@hover:0.7 tween:opacity 300ms
+	.confirmed filter:invert(90%)
+	.hide d:none
 	.bordered  bd:2px solid violet5 rd:10px
 	.bordered-complex > bd: 2px solid violet5 bdy:none
 		@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>
+	<self[bg:white max-width:260px m:0 auto p:2rem ta:center].confirmed=R.params.confirm><pro-router>
 
 imba.mount <app>

src/ui/choose-slot.imba

@@ -7,14 +7,14 @@ for booking in bookings
 
 import sh from "../ui/slot-size-input.imba"
 
-let h =
+global.Slot_h = let h =
 	scope: 3days
 	resolution: 15minutes
-	date: do R.param('alt-day') || R.param('date')
+	date: do let day = ( R.param('alt-date') || R.param('date') ); h.move_date(day, day.getTimezoneOffset! * 1minutes)
 	scope_day: do h.move_date h.date!, h.scope
 
 	slots: do
-		#slots ||= h.calculate_slots!
+		h._slots ||= h.calculate_slots!
 	
 	calculate_slots: do
 		let slots = []
@@ -33,7 +33,7 @@ let h =
 			let last = bookings[-1]
 	
 			if last.end < h.scope_day!
-				slots.push start: last.end, end: h.move_date(last.end, h.scope)
+				slots.push start: last.end, end: h.move_date(last.end, 730days)
 		
 		for slot in slots
 			h.adjust(slot, 'start')
@@ -57,14 +57,18 @@ let h =
 	move_date: do |date, interval|
 		new Date(Number(date) + interval)
 
+	f: do |n| "{if n < 10 then 0 else ''}{n}"
+
 let filtered_slots
 let first_available
 
 tag choose-slot
+	css my: 20px
+
 	def render
-		h._duration = first_available = 0 # reset cache
+		h._slots = 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 day = h.date!
 		let next_day = h.move_date(h.date!, 1days)
 
 		<self>
@@ -74,11 +78,9 @@ tag choose-slot
 					<time-slot data=day=h.move_date(day, h.resolution)>
 			else
 				<h2> "No slot available this day"
-			<simple-date-input> if !filtered_slots.length or R.params['alt-date']
+			<simple-date-input>
 			
 tag time-slot
-	def f n
-		"{if n < 10 then 0 else ''}{n}"
 
 	get free?
 		for slot in filtered_slots
@@ -87,4 +89,26 @@ tag time-slot
 				return true 
 		false
 
-	<self.active=free?> "{f data.getHours!}:{f data.getMinutes!}"
+	get time_from do "{h.f data.getHours!}:{h.f data.getMinutes!}"
+	get time_to do let day = h.move_date(data, h.duration!); "{h.f day.getHours!}:{h.f day.getMinutes!}"
+
+	css d:block fs:xx-small h:10px
+		&.activated bgc:violet7 zoom:2
+			> .hide d:inline
+		&.active, &.activated c:violet9 fs:large h:40px lh: 45px
+			@hover bgc:violet9 c:white zoom:2
+				.hide d:inline
+
+	def action
+		if flags.contains('active')
+			R.write 'from', time_from
+			R.go R.to_path('booking-confirmation') 
+
+	<self.clickable.active=free? @click=action>
+		time_from
+		<.hide> 
+			" - "
+			time_to
+
+R.setters['from'] = do |v| v.replace(':','!')
+R.getters['from'] = do |v| v.replace('!',':')

src/views/booking-confirmation.imba

@@ -0,0 +1,39 @@
+import h from '../ui/slot-size-input.imba'
+
+tag view-booking-confirmation
+
+	def render
+		let time_from = Slot_h.date!
+		time_from.setHours *R.params.from.split('!')
+		let time_to = Slot_h.move_date time_from, Slot_h.duration!
+
+		<self>
+			<time-card date=time_from desc="From:">
+			" - - - "
+			<time-card$card date=time_to desc="To:">
+			<br><br>
+			<h1[ta:center]> duration
+			<action-button[w:230px fs:larger] @click=R.toggle('confirm')> R.params.confirm ? "Cancel" : "Confirm"
+			<p> $card.timezone
+
+tag time-card
+	prop date
+
+	prop date_s
+	prop time
+	prop timezone
+	
+	get process_date
+		let s = date.toString!
+		date_s = s.substr 0, 15
+		time = s.substr 16, 8
+		timezone = s.substr(34)
+
+	def render
+		process_date
+
+		<self[ta:left]>
+			desc
+			<[d:rflex]>
+				<h1> time
+				<h4> date_s

src/views/choose-slot.imba

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