You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
43 lines
1.3 KiB
43 lines
1.3 KiB
7 years ago
|
import * as moment from "moment";
|
||
|
import * as React from "react";
|
||
|
import { Form } from "semantic-ui-react";
|
||
|
|
||
|
import { TimeOfDay } from "@common/sprinklersRpc";
|
||
|
import TimeInput from "./TimeInput";
|
||
|
|
||
|
function timeToString(time: TimeOfDay) {
|
||
|
return moment(time).format("LTS");
|
||
|
}
|
||
|
|
||
|
export default class ScheduleTimes extends React.Component<{
|
||
|
times: TimeOfDay[];
|
||
|
onChange: (newTimes: TimeOfDay[]) => void;
|
||
|
editing: boolean;
|
||
|
}> {
|
||
|
render() {
|
||
|
const { times, editing } = this.props;
|
||
|
let timesNode: React.ReactNode;
|
||
|
if (editing) {
|
||
|
timesNode = times
|
||
|
.map((time, i) => <TimeInput value={time} key={i} index={i} onChange={this.onTimeChange} />);
|
||
|
} else {
|
||
|
timesNode = (
|
||
|
<span>
|
||
|
{times.map((time) => timeToString(time)).join(", ")}
|
||
|
</span>
|
||
|
);
|
||
|
}
|
||
7 years ago
|
return (
|
||
|
<Form.Field inline className="scheduleTimes">
|
||
|
<label>At</label> {timesNode}
|
||
|
</Form.Field>
|
||
|
);
|
||
7 years ago
|
}
|
||
|
private onTimeChange = (newTime: TimeOfDay, index: number) => {
|
||
|
const { times, onChange } = this.props;
|
||
|
const newTimes = times.slice();
|
||
|
newTimes[index] = newTime;
|
||
|
onChange(newTimes);
|
||
|
}
|
||
|
}
|