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,