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

More work on features

update-deps
Alex Mikhalev 8 years ago
parent
51942807f5
commit
94d368130a
4 changed files with 162 additions and 69 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 152
      app/script/App.tsx
  2. 31
      app/script/mqtt.ts
  3. 42
      app/script/sprinklers.ts
  4. 6
      app/style/app.css

152
app/script/App.tsx
Unescape 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) {
newMinutes = Math.max(0, newMinutes - 1);
newSeconds = 59;
} }
this.props.onDurationChange(new Duration(newMinutes, newSeconds)); const newSeconds = parseInt(value, 10);
this.props.onDurationChange(this.props.duration.withSeconds(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
Unescape 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
Unescape 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
Unescape View File

@ -35,7 +35,7 @@
} }
.durationInput--minutes, .durationInput--minutes > input,
.durationInput--seconds { .durationInput--seconds > input {
width: 80px; width: 70px !important;
} }
Write Preview
Loading…
Cancel
Save