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

More work on features

Browse Source
This commit is contained in:
Alex Mikhalev 2017-05-27 14:03:13 -06:00
parent 51942807f5
commit 94d368130a
4 changed files with 162 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
app/script/App.tsx
View File

@ -1,9 +1,10 @@
import * as React from "react"; import * as React from "react";
import { computed } from "mobx"; import {SyntheticEvent} from "react";
import {computed} from "mobx";
import DevTools from "mobx-react-devtools"; import DevTools from "mobx-react-devtools";
import { observer } from "mobx-react"; import {observer} from "mobx-react";
import { SprinklersDevice, Section, Program, Duration, Schedule } from "./sprinklers"; import {SprinklersDevice, Section, Program, Duration, Schedule} from "./sprinklers";
import { Item, Table, Header, Segment, Form, Input, DropdownItemProps } from "semantic-ui-react"; import {Item, Table, Header, Segment, Form, Input, Button, DropdownItemProps, DropdownProps} from "semantic-ui-react";
import FontAwesome = require("react-fontawesome"); import FontAwesome = require("react-fontawesome");
import * as classNames from "classnames"; import * as classNames from "classnames";
@ -19,7 +20,7 @@ class SectionTable extends React.PureComponent<{ sections: Section[] }, void> {
if (!section) { if (!section) {
return null; return null;
} }
const { name, state } = section; const {name, state} = section;
return ( return (
<Table.Row key={index}> <Table.Row key={index}>
<Table.Cell className="section--number">{"" + (index + 1)}</Table.Cell> <Table.Cell className="section--number">{"" + (index + 1)}</Table.Cell>
@ -29,7 +30,7 @@ class SectionTable extends React.PureComponent<{ sections: Section[] }, void> {
"section--state-true": state, "section--state-true": state,
"section--state-false": !state, "section--state-false": !state,
})}>{state ? })}>{state ?
(<span><FontAwesome name="tint" /> Irrigating</span>) (<span><FontAwesome name="tint"/> Irrigating</span>)
: "Not irrigating"} : "Not irrigating"}
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>
@ -38,22 +39,22 @@ class SectionTable extends React.PureComponent<{ sections: Section[] }, void> {
public render() { public render() {
return (<Table celled striped> return (<Table celled striped>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.HeaderCell colSpan="3">Sections</Table.HeaderCell> <Table.HeaderCell colSpan="3">Sections</Table.HeaderCell>
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>
<Table.HeaderCell className="section--number">#</Table.HeaderCell> <Table.HeaderCell className="section--number">#</Table.HeaderCell>
<Table.HeaderCell className="section--name">Name</Table.HeaderCell> <Table.HeaderCell className="section--name">Name</Table.HeaderCell>
<Table.HeaderCell className="section--state">State</Table.HeaderCell> <Table.HeaderCell className="section--state">State</Table.HeaderCell>
</Table.Row> </Table.Row>
</Table.Header> </Table.Header>
<Table.Body> <Table.Body>
{ {
this.props.sections.map(SectionTable.renderRow) this.props.sections.map(SectionTable.renderRow)
} }
</Table.Body> </Table.Body>
</Table> </Table>
); );
} }
} }
@ -64,60 +65,87 @@ class DurationInput extends React.Component<{
}, void> { }, void> {
public render() { public render() {
const duration = this.props.duration; const duration = this.props.duration;
const editing = this.props.onDurationChange != null; // const editing = this.props.onDurationChange != null;
return <div className="field durationInput"> return <div className="field durationInput">
<label>Duration</label> <label>Duration</label>
<div className="fields"> <div className="fields">
<Input type="number" className="field durationInput--minutes" <Input type="number" className="field durationInput--minutes"
value={duration.minutes} onChange={this.onMinutesChange} value={duration.minutes} onChange={this.onMinutesChange}
label="M" labelPosition="right" /> label="M" labelPosition="right"/>
<Input type="number" className="field durationInput--seconds" <Input type="number" className="field durationInput--seconds"
value={duration.seconds} onChange={this.onSecondsChange} max="60" value={duration.seconds} onChange={this.onSecondsChange} max="60"
label="S" labelPosition="right" /> label="S" labelPosition="right"/>
</div> </div>
</div>; </div>;
} }
private onMinutesChange = (e, { value }) => { private onMinutesChange = (e, {value}) => {
this.props.onDurationChange(new Duration(Number(value), this.props.duration.seconds)); if (value.length === 0 || isNaN(value)) {
return;
}
const newMinutes = parseInt(value, 10);
this.props.onDurationChange(this.props.duration.withMinutes(newMinutes));
} }
private onSecondsChange = (e, { value }) => { private onSecondsChange = (e, {value}) => {
let newSeconds = Number(value); if (value.length === 0 || isNaN(value)) {
let newMinutes = this.props.duration.minutes; return;
if (newSeconds >= 60) {
newMinutes++;
newSeconds = 0;
} }
if (newSeconds < 0) { const newSeconds = parseInt(value, 10);
newMinutes = Math.max(0, newMinutes - 1); this.props.onDurationChange(this.props.duration.withSeconds(newSeconds));
newSeconds = 59;
}
this.props.onDurationChange(new Duration(newMinutes, newSeconds));
} }
} }
@observer @observer
class RunSectionForm extends React.Component<{ sections: Section[] }, { duration: Duration }> { class RunSectionForm extends React.Component<{
public componentWillMount() { sections: Section[],
this.setState({ }, {
duration: Duration,
section: number | "",
}> {
constructor() {
super();
this.state = {
duration: new Duration(1, 1), duration: new Duration(1, 1),
}); section: "",
};
} }
public render() { public render() {
const {section, duration} = this.state;
return <Segment> return <Segment>
<Header>Run Section</Header> <Header>Run Section</Header>
<Form> <Form>
<Form.Group> <Form.Group>
<Form.Select label="Section" placeholder="Section" options={this.sectionOptions} /> <Form.Select label="Section" placeholder="Section" options={this.sectionOptions} value={section}
<DurationInput duration={this.state.duration} onChange={this.onSectionChange}/>
onDurationChange={(newDuration) => this.setState({ duration: newDuration })} /> <DurationInput duration={duration} onDurationChange={this.onDurationChange}/>
{/*Label must be &nbsp; to align it properly*/}
<Form.Button label="&nbsp;" primary onClick={this.run} disabled={!this.isValid}>Run</Form.Button>
</Form.Group> </Form.Group>
</Form> </Form>
</Segment>; </Segment>;
} }
private onSectionChange = (e: SyntheticEvent<HTMLElement>, v: DropdownProps) => {
this.setState({section: v.value as number});
}
private onDurationChange = (newDuration: Duration) => {
this.setState({duration: newDuration});
}
private run = (e: SyntheticEvent<HTMLElement>) => {
e.preventDefault();
const section: Section = this.props.sections[this.state.section];
console.log(`should run section ${section} for ${this.state.duration}`);
section.run(this.state.duration);
}
private get isValid(): boolean {
return typeof this.state.section === "number";
}
@computed @computed
private get sectionOptions(): DropdownItemProps[] { private get sectionOptions(): DropdownItemProps[] {
return this.props.sections.map((s, i) => ({ return this.props.sections.map((s, i) => ({
@ -138,11 +166,11 @@ class ScheduleView extends React.PureComponent<{ schedule: Schedule }, void> {
@observer @observer
class ProgramTable extends React.PureComponent<{ programs: Program[] }, void> { class ProgramTable extends React.PureComponent<{ programs: Program[] }, void> {
private static renderRow(program: Program, i: number) { private static renderRow(program: Program, i: number): JSX.Element[] {
if (!program) { if (!program) {
return null; return null;
} }
const { name, running, enabled, schedule, sequence } = program; const {name, running, enabled, schedule, sequence} = program;
return [ return [
<Table.Row key={i}> <Table.Row key={i}>
<Table.Cell className="program--number">{"" + (i + 1)}</Table.Cell> <Table.Cell className="program--number">{"" + (i + 1)}</Table.Cell>
@ -155,10 +183,10 @@ class ProgramTable extends React.PureComponent<{ programs: Program[] }, void> {
<Table.Cell className="program--sequence" colSpan="4"> <Table.Cell className="program--sequence" colSpan="4">
<ul> <ul>
{sequence.map((item) => {sequence.map((item) =>
(<li>Section {item.section + 1 + ""} for (<li>Section {item.section + 1 + ""} for&nbsp;
{item.duration.minutes}M {item.duration.seconds}S</li>))} {item.duration.minutes}M {item.duration.seconds}S</li>))}
</ul> </ul>
<ScheduleView schedule={schedule} /> <ScheduleView schedule={schedule}/>
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>
, ,
@ -189,13 +217,13 @@ class ProgramTable extends React.PureComponent<{ programs: Program[] }, void> {
} }
} }
const ConnectionState = ({ connected }: { connected: boolean }) => const ConnectionState = ({connected}: { connected: boolean }) =>
<span className={classNames({ <span className={classNames({
"device--connectionState": true, "device--connectionState": true,
"device--connectionState-connected": connected, "device--connectionState-connected": connected,
"device--connectionState-disconnected": !connected, "device--connectionState-disconnected": !connected,
})}> })}>
<FontAwesome name={connected ? "plug" : "chain-broken"} /> <FontAwesome name={connected ? "plug" : "chain-broken"}/>
&nbsp; &nbsp;
{connected ? "Connected" : "Disconnected"} {connected ? "Connected" : "Disconnected"}
</span>; </span>;
@ -203,21 +231,21 @@ const ConnectionState = ({ connected }: { connected: boolean }) =>
@observer @observer
class DeviceView extends React.PureComponent<{ device: SprinklersDevice }, void> { class DeviceView extends React.PureComponent<{ device: SprinklersDevice }, void> {
public render() { public render() {
const { id, connected, sections, programs } = this.props.device; const {id, connected, sections, programs} = this.props.device;
return ( return (
<Item> <Item>
<Item.Image src={require<string>("app/images/raspberry_pi.png")} /> <Item.Image src={require<string>("app/images/raspberry_pi.png")}/>
<Item.Content> <Item.Content>
<Header as="h1"> <Header as="h1">
<span>Device </span><kbd>{id}</kbd> <span>Device </span><kbd>{id}</kbd>
<ConnectionState connected={connected} /> <ConnectionState connected={connected}/>
</Header> </Header>
<Item.Meta> <Item.Meta>
</Item.Meta> </Item.Meta>
<SectionTable sections={sections} /> <SectionTable sections={sections}/>
<RunSectionForm sections={sections} /> <RunSectionForm sections={sections}/>
<ProgramTable programs={programs} /> <ProgramTable programs={programs}/>
</Item.Content> </Item.Content>
</Item> </Item>
); );
@ -228,7 +256,7 @@ class DeviceView extends React.PureComponent<{ device: SprinklersDevice }, void>
export default class App extends React.PureComponent<{ device: SprinklersDevice }, any> { export default class App extends React.PureComponent<{ device: SprinklersDevice }, any> {
public render() { public render() {
return <Item.Group divided> return <Item.Group divided>
<DeviceView device={this.props.device} /> <DeviceView device={this.props.device}/>
<DevTools /> <DevTools />
</Item.Group>; </Item.Group>;
} }

31
app/script/mqtt.ts
View File

@ -2,7 +2,6 @@ import "paho-mqtt/mqttws31";
import MQTT = Paho.MQTT; import MQTT = Paho.MQTT;
import { EventEmitter } from "events"; import { EventEmitter } from "events";
import * as objectAssign from "object-assign";
import { import {
SprinklersDevice, ISprinklersApi, Section, Program, IProgramItem, Schedule, ITimeOfDay, Weekday, Duration, SprinklersDevice, ISprinklersApi, Section, Program, IProgramItem, Schedule, ITimeOfDay, Weekday, Duration,
} from "./sprinklers"; } from "./sprinklers";
@ -80,7 +79,7 @@ export class MqttApiClient extends EventEmitter implements ISprinklersApi {
const topic = m.destinationName.substr(topicIdx + 1); const topic = m.destinationName.substr(topicIdx + 1);
const device = this.devices[prefix]; const device = this.devices[prefix];
if (!device) { if (!device) {
console.warn(`recieved message for unknown device. prefix: ${prefix}`); console.warn(`received message for unknown device. prefix: ${prefix}`);
return; return;
} }
device.onMessage(topic, m.payloadString); device.onMessage(topic, m.payloadString);
@ -134,7 +133,7 @@ class MqttSprinklersDevice extends SprinklersDevice {
const secNum = Number(secStr); const secNum = Number(secStr);
let section = this.sections[secNum]; let section = this.sections[secNum];
if (!section) { if (!section) {
this.sections[secNum] = section = new MqttSection(); this.sections[secNum] = section = new MqttSection(this);
} }
(section as MqttSection).onMessage(subTopic, payload); (section as MqttSection).onMessage(subTopic, payload);
} }
@ -163,6 +162,23 @@ class MqttSprinklersDevice extends SprinklersDevice {
return this.prefix; return this.prefix;
} }
public runSection(section: Section | number, duration: Duration) {
let sectionNum: number;
if (typeof section === "number") {
sectionNum = section;
} else {
sectionNum = this.sections.indexOf(section);
}
if (sectionNum < 0 || sectionNum > this.sections.length) {
throw new Error(`Invalid section to run: ${section}`);
}
const message = new MQTT.Message(JSON.stringify({
duration: duration.toSeconds(),
} as IRunSectionJSON));
message.destinationName = `${this.prefix}/sections/${sectionNum}/run`;
this.apiClient.client.send(message);
}
private get subscriptions() { private get subscriptions() {
return [ return [
`${this.prefix}/connected`, `${this.prefix}/connected`,
@ -179,7 +195,16 @@ interface ISectionJSON {
pin: number; pin: number;
} }
interface IRunSectionJSON {
duration: number;
}
class MqttSection extends Section { class MqttSection extends Section {
constructor(device: MqttSprinklersDevice) {
super(device);
}
public onMessage(topic: string, payload: string) { public onMessage(topic: string, payload: string) {
if (topic === "state") { if (topic === "state") {
this.state = (payload === "true"); this.state = (payload === "true");

42
app/script/sprinklers.ts
View File

@ -1,11 +1,25 @@
import { observable, IObservableArray } from "mobx"; import { observable, IObservableArray } from "mobx";
export class Section { export abstract class Section {
public device: SprinklersDevice;
@observable @observable
public name: string = ""; public name: string = "";
@observable @observable
public state: boolean = false; public state: boolean = false;
constructor(device: SprinklersDevice) {
this.device = device;
}
public run(duration: Duration) {
this.device.runSection(this, duration);
}
public toString(): string {
return `Section{name="${this.name}", state=${this.state}}`;
}
} }
export interface ITimeOfDay { export interface ITimeOfDay {
@ -42,6 +56,30 @@ export class Duration {
public toSeconds(): number { public toSeconds(): number {
return this.minutes * 60 + this.seconds; return this.minutes * 60 + this.seconds;
} }
public withSeconds(newSeconds: number): Duration {
let newMinutes = this.minutes;
if (newSeconds >= 60) {
newMinutes++;
newSeconds = 0;
}
if (newSeconds < 0) {
newMinutes = Math.max(0, newMinutes - 1);
newSeconds = 59;
}
return new Duration(newMinutes, newSeconds);
}
public withMinutes(newMinutes: number): Duration {
if (newMinutes < 0) {
newMinutes = 0;
}
return new Duration(newMinutes, this.seconds);
}
public toString(): string {
return `${this.minutes}M ${this.seconds}S`;
}
} }
export interface IProgramItem { export interface IProgramItem {
@ -77,6 +115,8 @@ export abstract class SprinklersDevice {
@observable @observable
public programs: IObservableArray<Program> = [] as IObservableArray<Program>; public programs: IObservableArray<Program> = [] as IObservableArray<Program>;
public abstract runSection(section: number | Section, duration: Duration);
abstract get id(): string; abstract get id(): string;
} }

6
app/style/app.css
View File

@ -35,7 +35,7 @@
} }
.durationInput--minutes, .durationInput--minutes > input,
.durationInput--seconds { .durationInput--seconds > input {
width: 80px; width: 70px !important;
} }