Commit fdf219a4cc6267361e534f21330817706b26fd64
catch edge cases on pickers (no past, no repeats)
mixmix committed on 8/27/2018, 6:07:16 AMParent: 3c22a67c2c3e7ac133fb20fee9551c42f64e5d86
Files changed
views/component/day-picker.js | changed |
views/component/time-picker.js | changed |
views/new.js | changed |
views/component/day-picker.js | |||
---|---|---|---|
@@ -1,8 +1,10 @@ | |||
1 | 1 … | const { h, computed } = require('mutant') | |
2 | 2 … | const Marama = require('marama') | |
3 | 3 … | ||
4 | 4 … | module.exports = function DayPicker (state) { | |
5 … | + const startOfToday = startOfDay() | ||
6 … | + | ||
5 | 7 … | return h('ScryDayPicker', [ | |
6 | 8 … | h('div.month-picker', [ | |
7 | 9 … | h('button', { 'ev-click': () => setMonth(-1) }, '<'), | |
8 | 10 … | MonthTitle(state.monthIndex), | |
@@ -26,20 +28,20 @@ | |||
26 | 28 … | function setMonth (d) { | |
27 | 29 … | state.monthIndex.set(state.monthIndex() + d) | |
28 | 30 … | } | |
29 | 31 … | ||
30 | - function onSelect ({ gte, lt, events: days }) { | ||
31 | - if (!days.length) addEmptyEvent() | ||
32 … | + function onSelect ({ gte, lt, events: dayEvents }) { | ||
33 … | + if (gte < startOfToday) return | ||
34 … | + | ||
35 … | + if (!dayEvents.length) addEmptyEvent() | ||
32 | 36 … | else clearDay() | |
33 | 37 … | ||
34 | - state.pristine.set(false) | ||
35 | - | ||
36 | 38 … | function addEmptyEvent () { | |
37 | 39 … | state.days.push(Event(gte)) | |
38 | 40 … | } | |
39 | 41 … | function clearDay () { | |
40 | - const filteredEvents = state.days().filter(e => !days.includes(e)) | ||
41 | - state.days.set(filteredEvents) | ||
42 … | + const prunedEvents = state.days().filter(e => !dayEvents.includes(e)) | ||
43 … | + state.days.set(prunedEvents) | ||
42 | 44 … | } | |
43 | 45 … | } | |
44 | 46 … | } | |
45 | 47 … | ||
@@ -62,4 +64,8 @@ | |||
62 | 64 … | date, | |
63 | 65 … | data: {attending: true} | |
64 | 66 … | } | |
65 | 67 … | } | |
68 … | + | ||
69 … | +function startOfDay (d = new Date()) { | ||
70 … | + return new Date(d.getFullYear(), d.getMonth(), d.getDate()) | ||
71 … | +} |
views/component/time-picker.js | ||
---|---|---|
@@ -27,12 +27,9 @@ | ||
27 | 27 … | when(active, |
28 | 28 … | h('div.dropdown', options.map((time, i) => { |
29 | 29 … | return h('div', |
30 | 30 … | { |
31 | - 'ev-click': () => { | |
32 | - times.push(Event(time)) | |
33 | - active.set(false) | |
34 | - }, | |
31 … | + 'ev-click': () => select(time), | |
35 | 32 … | className: i === 32 ? DAY_START_SELECTOR : '' |
36 | 33 … | }, |
37 | 34 … | printTime(time) |
38 | 35 … | ) |
@@ -42,8 +39,16 @@ | ||
42 | 39 … | ]) |
43 | 40 … | |
44 | 41 … | return el |
45 | 42 … | |
43 … | + function select (time) { | |
44 … | + if (!times.find(t => t.date === time)) { | |
45 … | + // time not yet selected | |
46 … | + times.push(Event(time)) | |
47 … | + } | |
48 … | + active.set(false) | |
49 … | + } | |
50 … | + | |
46 | 51 … | function activate () { |
47 | 52 … | active.set(true) |
48 | 53 … | |
49 | 54 … | const target = el.querySelector('.' + DAY_START_SELECTOR) |
views/new.js | ||
---|---|---|
@@ -2,26 +2,21 @@ | ||
2 | 2 … | const DayPicker = require('./component/day-picker.js') |
3 | 3 … | const TimePicker = require('./component/time-picker.js') |
4 | 4 … | |
5 | 5 … | module.exports = function ScryNew (opts) { |
6 | - const { | |
7 | - // i18n | |
8 | - } = opts | |
6 … | + // const { | |
7 … | + // i18n | |
8 … | + // } = opts | |
9 | 9 … | |
10 | 10 … | const state = Struct({ |
11 | - pristine: true, | |
12 | 11 … | monthIndex: new Date().getMonth(), |
13 | 12 … | days: MutantArray([]), |
14 | 13 … | times: MutantArray([]) |
15 | 14 … | }) |
16 | 15 … | |
17 | 16 … | return h('ScryNew', [ |
18 | 17 … | DayPicker(state), |
19 | - when(state.pristine, | |
20 | - h('div.time-picker-pristine', [ | |
21 | - h('label', 'Dates and Times'), | |
22 | - h('div.instruction', 'Select one or multiple dates') | |
23 | - ]), | |
18 … | + when(computed(state.days, d => Boolean(d.length)), | |
24 | 19 … | h('div.time-picker', [ |
25 | 20 … | h('label', computed(state.days, days => `Same times for all dates (${days.length})`)), |
26 | 21 … | TimePicker(state), |
27 | 22 … | h('div.timezone', [ |
@@ -30,8 +25,12 @@ | ||
30 | 25 … | getTimezone(), |
31 | 26 … | h('span', ['(UTC ', getTimezoneOffset(), ')']) |
32 | 27 … | ]) |
33 | 28 … | ]) |
29 … | + ]), | |
30 … | + h('div.time-picker-pristine', [ | |
31 … | + h('label', 'Dates and Times'), | |
32 … | + h('div.instruction', 'Select one or multiple dates') | |
34 | 33 … | ]) |
35 | 34 … | ) |
36 | 35 … | ]) |
37 | 36 … | } |
Built with git-ssb-web