diff --git a/app/components/ScheduleView.tsx b/app/components/ScheduleView.tsx index 5447074..ddb78d4 100644 --- a/app/components/ScheduleView.tsx +++ b/app/components/ScheduleView.tsx @@ -1,38 +1,107 @@ import { observer } from "mobx-react"; import * as moment from "moment"; import * as React from "react"; +import { Checkbox, Form, Input, InputOnChangeData, CheckboxProps } from "semantic-ui-react"; -import { DateOfYear, Schedule, TimeOfDay, Weekday } from "@common/sprinklersRpc"; +import { DateOfYear, Schedule, TimeOfDay, Weekday, WEEKDAYS } from "@common/sprinklersRpc"; function timeToString(time: TimeOfDay) { return moment(time).format("LTS"); } -function formatDateOfYear(day: DateOfYear | null, prefix: React.ReactNode) { - if (day == null) { +function formatDateOfYear(day: DateOfYear | null, prefix: React.ReactNode, editing: boolean) { + if (day == null && !editing) { return null; } - const format = (day.year === 0) ? "M/D" : "l"; - return {prefix}{moment(day).format(format)}; + const format = (day && day.year === 0) ? "M/D" : "l"; + const dayString = moment(day || "").format(format); + let dayNode: React.ReactNode; + if (editing) { + dayNode = ; + } else { + dayNode = {dayString}; + } + return {prefix}{dayNode}; +} + +interface WeekdaysViewProps { + weekdays: Weekday[]; + editing: boolean; + onChange?: (newWeekdays: Weekday[]) => void; +} + +function WeekdaysView({weekdays, editing, onChange}: WeekdaysViewProps) { + let node: React.ReactNode; + if (editing) { + node = WEEKDAYS.map((weekday) => { + const checked = weekdays.find((wd) => wd === weekday) != null; + const name = Weekday[weekday]; + const toggleWeekday = (event: React.FormEvent, data: CheckboxProps) => { + if (!onChange) { + return; + } + if (data.checked && !checked) { + onChange(weekdays.concat([weekday])); + } else if (!data.checked && checked) { + onChange(weekdays.filter((wd) => wd !== weekday)); + } + } + return ( + + ); + }); + } else { + node = weekdays.map((weekday) => + Weekday[weekday]).join(", "); + } + return ( + + {node} + + ) +} + +export interface ScheduleViewProps { + schedule: Schedule; + editing?: boolean; } @observer -export default class ScheduleView extends React.Component<{ schedule: Schedule }> { +export default class ScheduleView extends React.Component { render() { const { schedule } = this.props; - const times = schedule.times.map((time, i) => timeToString(time)) - .join(", "); - const weekdays = schedule.weekdays.map((weekday) => - Weekday[weekday]).join(", "); - const from = formatDateOfYear(schedule.from, From ); - const to = formatDateOfYear(schedule.to, To ); + const editing = this.props.editing != null ? this.props.editing : false; + + let times: React.ReactNode; + if (editing) { + times = schedule.times + .map((time, i) => { + const onChange = (event: React.SyntheticEvent, d: InputOnChangeData) => { + const m = moment(d.value, ["LTS"]); + schedule.times[i] = TimeOfDay.fromMoment(m); + }; + return ; + }); + } else { + times = schedule.times.map((time) => timeToString(time)) + .join(", "); + } + + const from = formatDateOfYear(schedule.from, , editing); + const to = formatDateOfYear(schedule.to, , editing); return (
- At {times}
- On {weekdays}
- {from}
+ + {times} + + + {from} {to}
); } + + private updateWeekdays = (newWeekdays: Weekday[]) => { + this.props.schedule.weekdays = newWeekdays; + } } diff --git a/app/pages/ProgramPage.tsx b/app/pages/ProgramPage.tsx index d423615..3724315 100644 --- a/app/pages/ProgramPage.tsx +++ b/app/pages/ProgramPage.tsx @@ -149,7 +149,7 @@ class ProgramPage extends React.Component {
- + diff --git a/common/sprinklersRpc/schedule.ts b/common/sprinklersRpc/schedule.ts index 8f431c5..c559b52 100644 --- a/common/sprinklersRpc/schedule.ts +++ b/common/sprinklersRpc/schedule.ts @@ -1,6 +1,11 @@ import { observable } from "mobx"; +import { Moment } from "moment"; export class TimeOfDay { + static fromMoment(m: Moment): TimeOfDay { + return new TimeOfDay(m.hour(), m.minute(), m.second(), m.millisecond()); + } + static fromDate(date: Date): TimeOfDay { return new TimeOfDay(date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()); } @@ -22,6 +27,10 @@ export enum Weekday { Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, } +export const WEEKDAYS: Weekday[] = Object.keys(Weekday) + .map((weekday) => Number(weekday)) + .filter((weekday) => !isNaN(weekday)); + export enum Month { January = 1, February = 2,