More work on features

2017-05-27 14:03:13 -06:00 · 2017-05-27 14:03:13 -06:00 · 94d368130a
commit 94d368130a
parent 51942807f5
4 changed files with 162 additions and 69 deletions
--- a/app/script/App.tsx
+++ b/app/script/App.tsx
@ -1,9 +1,10 @@
 import * as React from "react";
+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 {Item, Table, Header, Segment, Form, Input, Button, DropdownItemProps, DropdownProps} from "semantic-ui-react";
 import FontAwesome = require("react-fontawesome");
 import * as classNames from "classnames";

@ -64,7 +65,7 @@ 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">
@ -79,45 +80,72 @@ class DurationInput extends React.Component<{
    }

    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}) => {
-        let newSeconds = Number(value);
-        let newMinutes = this.props.duration.minutes;
-        if (newSeconds >= 60) {
-            newMinutes++;
-            newSeconds = 0;
+        if (value.length === 0 || isNaN(value)) {
+            return;
        }
-        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
-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,7 +166,7 @@ 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;
        }
@ -155,7 +183,7 @@ 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}/>
--- a/app/script/mqtt.ts
+++ b/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");
--- a/app/script/sprinklers.ts
+++ b/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;
 }

--- a/app/style/app.css
+++ b/app/style/app.css
@ -35,7 +35,7 @@

 }

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