amikhalev/sprinklers3
1
1
Fork 0
Code Issues 9 Pull Requests 1 Releases Wiki Activity

Refer to section by id in SectionChooser

Browse Source
This commit is contained in:
Alex Mikhalev 2018-08-17 13:57:41 -06:00
parent f8a1dd0a8c
commit f345344974
2 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
client/components/RunSectionForm.tsx
View File

@ -15,18 +15,18 @@ export default class RunSectionForm extends React.Component<{
uiStore: UiStore, uiStore: UiStore,
}, { }, {
duration: Duration, duration: Duration,
section: Section | undefined, sectionId: number | undefined,
}> { }> {
constructor(props: any, context?: any) { constructor(props: any, context?: any) {
super(props, context); super(props, context);
this.state = { this.state = {
duration: new Duration(0, 0), duration: new Duration(0, 0),
section: undefined, sectionId: undefined,
}; };
} }
render() { render() {
const { section, duration } = this.state; const { sectionId, duration } = this.state;
return ( return (
<Segment> <Segment>
<Header>Run Section</Header> <Header>Run Section</Header>
@ -34,7 +34,7 @@ export default class RunSectionForm extends React.Component<{
<SectionChooser <SectionChooser
label="Section" label="Section"
sections={this.props.device.sections} sections={this.props.device.sections}
value={section} sectionId={sectionId}
onChange={this.onSectionChange} onChange={this.onSectionChange}
/> />
<DurationView <DurationView
@ -55,8 +55,8 @@ export default class RunSectionForm extends React.Component<{
); );
} }
private onSectionChange = (newSection: Section) => { private onSectionChange = (newSectionId: number) => {
this.setState({ section: newSection }); this.setState({ sectionId: newSectionId });
} }
private onDurationChange = (newDuration: Duration) => { private onDurationChange = (newDuration: Duration) => {
@ -65,10 +65,11 @@ export default class RunSectionForm extends React.Component<{
private run = (e: React.SyntheticEvent<HTMLElement>) => { private run = (e: React.SyntheticEvent<HTMLElement>) => {
e.preventDefault(); e.preventDefault();
const { section, duration } = this.state; const { sectionId, duration } = this.state;
if (!section) { if (sectionId == null) {
return; return;
} }
const section = this.props.device.sections[sectionId];
section.run(duration.toSeconds()) section.run(duration.toSeconds())
.then(this.onRunSuccess) .then(this.onRunSuccess)
.catch(this.onRunError); .catch(this.onRunError);
@ -91,6 +92,6 @@ export default class RunSectionForm extends React.Component<{
} }
private get isValid(): boolean { private get isValid(): boolean {
return this.state.section != null && this.state.duration.toSeconds() > 0; return this.state.sectionId != null && this.state.duration.toSeconds() > 0;
} }
} }

17
client/components/SectionChooser.tsx
View File

@ -12,17 +12,16 @@ export default class SectionChooser extends React.Component<{
label?: string, label?: string,
inline?: boolean, inline?: boolean,
sections: Section[], sections: Section[],
value?: Section, sectionId?: number,
onChange?: (section: Section) => void, onChange?: (sectionId: number) => void,
}> { }> {
render() { render() {
const { label, inline, sections, value, onChange } = this.props; const { label, inline, sections, sectionId, onChange } = this.props;
let section = (value == null) ? "" : sections.indexOf(value);
section = (section === -1) ? "" : section;
const onSectionChange = (onChange == null) ? undefined : this.onSectionChange;
if (onChange == null) { if (onChange == null) {
return <React.Fragment>{label || ""} '{value ? value.toString() : ""}'</React.Fragment>; const sectionStr = sectionId != null ? sections[sectionId].toString() : "";
return <React.Fragment>{label || ""} '{sectionStr}'</React.Fragment>;
} }
const section = (sectionId == null) ? "" : sectionId;
return ( return (
<Form.Select <Form.Select
className="sectionChooser" className="sectionChooser"
@ -31,13 +30,13 @@ export default class SectionChooser extends React.Component<{
placeholder="Section" placeholder="Section"
options={this.sectionOptions} options={this.sectionOptions}
value={section} value={section}
onChange={onSectionChange} onChange={this.onSectionChange}
/> />
); );
} }
private onSectionChange = (e: React.SyntheticEvent<HTMLElement>, v: DropdownProps) => { private onSectionChange = (e: React.SyntheticEvent<HTMLElement>, v: DropdownProps) => {
this.props.onChange!(this.props.sections[v.value as number]); this.props.onChange!(this.props.sections[v.value as number].id);
} }
@computed @computed