Started working on editing schedules

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 <React.Fragment>{prefix}{moment(day).format(format)}</React.Fragment>;
+    const format = (day && day.year === 0) ? "M/D" : "l";
+    const dayString = moment(day || "").format(format);
+    let dayNode: React.ReactNode;
+    if (editing) {
+        dayNode = <Input value={dayString} />;
+    } else {
+        dayNode = <span>{dayString}</span>;
+    }
+    return <Form.Field inline>{prefix}{dayNode}</Form.Field>;
+}
+
+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<HTMLInputElement>, 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 (
+                <Form.Field control={Checkbox} label={name} checked={checked} key={weekday} onChange={toggleWeekday} />
+            );
+        });
+    } else {
+        node = weekdays.map((weekday) =>
+            Weekday[weekday]).join(", ");
+    }
+    return (
+        <Form.Group inline>
+            <label>On</label> {node}
+        </Form.Group>
+    )
+}
+
+export interface ScheduleViewProps {
+    schedule: Schedule;
+    editing?: boolean;
 }
 
 @observer
-export default class ScheduleView extends React.Component<{ schedule: Schedule }> {
+export default class ScheduleView extends React.Component<ScheduleViewProps> {
     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, <b>From </b>);
-        const to = formatDateOfYear(schedule.to, <b>To </b>);
+        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 <Input value={timeToString(time)} key={i} onChange={onChange} />;
+                });
+        } else {
+            times = schedule.times.map((time) => timeToString(time))
+                .join(", ");
+        }
+
+        const from = formatDateOfYear(schedule.from, <label>From </label>, editing);
+        const to = formatDateOfYear(schedule.to, <label>To </label>, editing);
         return (
             <div>
-                <b>At</b> {times} <br/>
-                <b>On</b> {weekdays} <br/>
-                {from} <br/>
+                <Form.Field inline>
+                    <label>At</label> {times}
+                </Form.Field>
+                <WeekdaysView weekdays={schedule.weekdays} editing={editing} onChange={this.updateWeekdays}/>
+                {from}
                 {to}
             </div>
         );
     }
+
+    private updateWeekdays = (newWeekdays: Weekday[]) => {
+        this.props.schedule.weekdays = newWeekdays;
+    }
 }

app/pages/ProgramPage.tsx

@@ -149,7 +149,7 @@ class ProgramPage extends React.Component<ProgramPageProps> {
                         </Form.Field>
                         <Form.Field>
                             <label><h4>Schedule</h4></label>
-                            <ScheduleView schedule={schedule}/>
+                            <ScheduleView schedule={schedule} editing={editing}/>
                         </Form.Field>
                     </Form>
                 </Modal.Content>

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,