More work on features

app/script/App.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
-import { computed } from "mobx";
+import {SyntheticEvent} from "react";
+import {computed} from "mobx";
 import DevTools from "mobx-react-devtools";
-import { observer } from "mobx-react";
-import { SprinklersDevice, Section, Program, Duration, Schedule } from "./sprinklers";
-import { Item, Table, Header, Segment, Form, Input, DropdownItemProps } from "semantic-ui-react";
+import {observer} from "mobx-react";
+import {SprinklersDevice, Section, Program, Duration, Schedule} from "./sprinklers";
+import {Item, Table, Header, Segment, Form, Input, Button, DropdownItemProps, DropdownProps} from "semantic-ui-react";
 import FontAwesome = require("react-fontawesome");
 import * as classNames from "classnames";
 
@@ -19,7 +20,7 @@ class SectionTable extends React.PureComponent<{ sections: Section[] }, void> {
         if (!section) {
             return null;
         }
-        const { name, state } = section;
+        const {name, state} = section;
         return (
             <Table.Row key={index}>
                 <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-false": !state,
                 })}>{state ?
-                    (<span><FontAwesome name="tint" /> Irrigating</span>)
+                    (<span><FontAwesome name="tint"/> Irrigating</span>)
                     : "Not irrigating"}
                 </Table.Cell>
             </Table.Row>
@@ -64,60 +65,87 @@ class DurationInput extends React.Component<{
 }, void> {
     public render() {
         const duration = this.props.duration;
-        const editing = this.props.onDurationChange != null;
+        // const editing = this.props.onDurationChange != null;
         return <div className="field durationInput">
             <label>Duration</label>
             <div className="fields">
                 <Input type="number" className="field durationInput--minutes"
                        value={duration.minutes} onChange={this.onMinutesChange}
-                    label="M" labelPosition="right" />
+                       label="M" labelPosition="right"/>
                 <Input type="number" className="field durationInput--seconds"
                        value={duration.seconds} onChange={this.onSecondsChange} max="60"
-                    label="S" labelPosition="right" />
+                       label="S" labelPosition="right"/>
             </div>
         </div>;
     }
 
-    private onMinutesChange = (e, { value }) => {
-        this.props.onDurationChange(new Duration(Number(value), this.props.duration.seconds));
+    private onMinutesChange = (e, {value}) => {
+        if (value.length === 0 || isNaN(value)) {
+            return;
         }
-
-    private onSecondsChange = (e, { value }) => {
-        let newSeconds = Number(value);
-        let newMinutes = this.props.duration.minutes;
-        if (newSeconds >= 60) {
-            newMinutes++;
-            newSeconds = 0;
+        const newMinutes = parseInt(value, 10);
+        this.props.onDurationChange(this.props.duration.withMinutes(newMinutes));
     }
-        if (newSeconds < 0) {
-            newMinutes = Math.max(0, newMinutes - 1);
-            newSeconds = 59;
+
+    private onSecondsChange = (e, {value}) => {
+        if (value.length === 0 || isNaN(value)) {
+            return;
         }
-        this.props.onDurationChange(new Duration(newMinutes, newSeconds));
+        const newSeconds = parseInt(value, 10);
+        this.props.onDurationChange(this.props.duration.withSeconds(newSeconds));
     }
 }
 
 @observer
-class RunSectionForm extends React.Component<{ sections: Section[] }, { duration: Duration }> {
-    public componentWillMount() {
-        this.setState({
+class RunSectionForm extends React.Component<{
+    sections: Section[],
+}, {
+    duration: Duration,
+    section: number | "",
+}> {
+    constructor() {
+        super();
+        this.state = {
             duration: new Duration(1, 1),
-        });
+            section: "",
+        };
     }
 
     public render() {
+        const {section, duration} = this.state;
         return <Segment>
             <Header>Run Section</Header>
             <Form>
                 <Form.Group>
-                    <Form.Select label="Section" placeholder="Section" options={this.sectionOptions} />
-                    <DurationInput duration={this.state.duration}
-                        onDurationChange={(newDuration) => this.setState({ duration: newDuration })} />
+                    <Form.Select label="Section" placeholder="Section" options={this.sectionOptions} value={section}
+                                 onChange={this.onSectionChange}/>
+                    <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>
         </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
     private get sectionOptions(): DropdownItemProps[] {
         return this.props.sections.map((s, i) => ({
@@ -138,11 +166,11 @@ class ScheduleView extends React.PureComponent<{ schedule: Schedule }, void> {
 
 @observer
 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) {
             return null;
         }
-        const { name, running, enabled, schedule, sequence } = program;
+        const {name, running, enabled, schedule, sequence} = program;
         return [
             <Table.Row key={i}>
                 <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">
                     <ul>
                         {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>))}
                     </ul>
-                     <ScheduleView schedule={schedule} />
+                    <ScheduleView schedule={schedule}/>
                 </Table.Cell>
             </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({
         "device--connectionState": true,
         "device--connectionState-connected": connected,
         "device--connectionState-disconnected": !connected,
     })}>
-        <FontAwesome name={connected ? "plug" : "chain-broken"} />
+        <FontAwesome name={connected ? "plug" : "chain-broken"}/>
         &nbsp;
         {connected ? "Connected" : "Disconnected"}
     </span>;
@@ -203,21 +231,21 @@ const ConnectionState = ({ connected }: { connected: boolean }) =>
 @observer
 class DeviceView extends React.PureComponent<{ device: SprinklersDevice }, void> {
     public render() {
-        const { id, connected, sections, programs } = this.props.device;
+        const {id, connected, sections, programs} = this.props.device;
         return (
             <Item>
-                <Item.Image src={require<string>("app/images/raspberry_pi.png")} />
+                <Item.Image src={require<string>("app/images/raspberry_pi.png")}/>
                 <Item.Content>
                     <Header as="h1">
                         <span>Device </span><kbd>{id}</kbd>
-                        <ConnectionState connected={connected} />
+                        <ConnectionState connected={connected}/>
                     </Header>
                     <Item.Meta>
 
                     </Item.Meta>
-                    <SectionTable sections={sections} />
-                    <RunSectionForm sections={sections} />
-                    <ProgramTable programs={programs} />
+                    <SectionTable sections={sections}/>
+                    <RunSectionForm sections={sections}/>
+                    <ProgramTable programs={programs}/>
                 </Item.Content>
             </Item>
         );
@@ -228,7 +256,7 @@ class DeviceView extends React.PureComponent<{ device: SprinklersDevice }, void>
 export default class App extends React.PureComponent<{ device: SprinklersDevice }, any> {
     public render() {
         return <Item.Group divided>
-            <DeviceView device={this.props.device} />
+            <DeviceView device={this.props.device}/>
             <DevTools />
         </Item.Group>;
     }

app/script/mqtt.ts

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

app/script/sprinklers.ts

@@ -1,11 +1,25 @@
 import { observable, IObservableArray } from "mobx";
 
-export class Section {
+export abstract class Section {
+    public device: SprinklersDevice;
+
     @observable
     public name: string = "";
 
     @observable
     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 {
@@ -42,6 +56,30 @@ export class Duration {
     public toSeconds(): number {
         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 {
@@ -77,6 +115,8 @@ export abstract class SprinklersDevice {
     @observable
     public programs: IObservableArray<Program> = [] as IObservableArray<Program>;
 
+    public abstract runSection(section: number | Section, duration: Duration);
+
     abstract get id(): string;
 }
 

app/style/app.css

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