Adding more good stuff and tried to fix stuff too

app/script/App.tsx

@@ -1,7 +1,9 @@
 import * as React from "react";
+import { computed } from "mobx";
+import DevTools from "mobx-react-devtools";
 import { observer } from "mobx-react";
 import { SprinklersDevice, Section, Program } from "./sprinklers";
-import { Item, Table, Header } from "semantic-ui-react";
+import { Item, Table, Header, Segment, Form, Input, DropdownItemProps } from "semantic-ui-react";
 import FontAwesome = require("react-fontawesome");
 import * as classNames from "classnames";
 
@@ -53,6 +55,31 @@ class SectionTable extends React.PureComponent<{ sections: Section[] }, void> {
     }
 }
 
+@observer
+class RunSectionForm extends React.Component<{ sections: Section[] }, void> {
+    public render() {
+        return <Segment>
+            <Header>Run Section</Header>
+            <Form>
+                <Form.Group>
+                    <Form.Select label="Section" placeholder="Section" options={this.sectionOptions} />
+                    <Form.Input control={Input} label="Duration" placeholder="Duration" />
+                </Form.Group>
+            </Form>
+        </Segment>;
+    }
+
+
+    @computed
+    private get sectionOptions(): DropdownItemProps[] {
+        // return this.props.sections.map((s, i) => ({
+        //     text: s.name,
+        //     value: i,
+        // }));
+        return [];
+    }
+}
+
 @observer
 class ProgramTable extends React.PureComponent<{ programs: Program[] }, void> {
     private static renderRow(program: Program, i: number) {
@@ -116,6 +143,7 @@ class DeviceView extends React.PureComponent<{ device: SprinklersDevice }, void>
 
                     </Item.Meta>
                     <SectionTable sections={sections} />
+                    <RunSectionForm sections={sections} />
                     <ProgramTable programs={programs} />
                 </Item.Content>
             </Item>
@@ -126,6 +154,9 @@ class DeviceView extends React.PureComponent<{ device: SprinklersDevice }, void>
 @observer
 export default class App extends React.PureComponent<{ device: SprinklersDevice }, any> {
     public render() {
-        return <Item.Group divided><DeviceView device={this.props.device} /></Item.Group>;
+        return <Item.Group divided>
+        <DeviceView device={this.props.device} />
+        <DevTools />
+        </Item.Group>;
     }
 }

app/script/mqtt.ts

@@ -65,7 +65,7 @@ export class MqttApiClient extends EventEmitter implements ISprinklersApi {
     }
 
     private onMessageArrived(m: MQTT.Message) {
-        // console.log("message arrived: ", m)
+        console.log("message arrived: ", m);
         const topicIdx = m.destinationName.indexOf("/"); // find the first /
         const prefix = m.destinationName.substr(0, topicIdx); // assume prefix does not contain a /
         const topic = m.destinationName.substr(topicIdx + 1);
@@ -94,13 +94,13 @@ class MqttSprinklersDevice extends SprinklersDevice {
 
     public doSubscribe() {
         const c = this.apiClient.client;
-        this.getSubscriptions()
+        this.subscriptions
             .forEach((filter) => c.subscribe(filter, { qos: 1 }));
     }
 
     public doUnsubscribe() {
         const c = this.apiClient.client;
-        this.getSubscriptions()
+        this.subscriptions
             .forEach((filter) => c.unsubscribe(filter));
     }
 
@@ -120,7 +120,7 @@ class MqttSprinklersDevice extends SprinklersDevice {
             const [_topic, secStr, subTopic] = matches;
             // console.log(`section: ${secStr}, topic: ${subTopic}, payload: ${payload}`);
             if (!secStr) { // new number of sections
-                this.sections = new Array(Number(payload));
+                this.sections.length = Number(payload);
             } else {
                 const secNum = Number(secStr);
                 let section = this.sections[secNum];
@@ -136,7 +136,7 @@ class MqttSprinklersDevice extends SprinklersDevice {
             const [_topic, progStr, subTopic] = matches;
             // console.log(`program: ${progStr}, topic: ${subTopic}, payload: ${payload}`);
             if (!progStr) { // new number of programs
-                this.programs = new Array(Number(payload));
+                this.programs.length = Number(payload);
             } else {
                 const progNum = Number(progStr);
                 let program = this.programs[progNum];
@@ -154,7 +154,7 @@ class MqttSprinklersDevice extends SprinklersDevice {
         return this.prefix;
     }
 
-    private getSubscriptions() {
+    private get subscriptions() {
         return [
             `${this.prefix}/connected`,
             `${this.prefix}/sections`,

app/script/sprinklers.ts

@@ -1,4 +1,4 @@
-import { observable } from "mobx";
+import { observable, IObservableArray } from "mobx";
 
 export class Section {
     @observable
@@ -54,10 +54,10 @@ export abstract class SprinklersDevice {
     public connected: boolean = false;
 
     @observable
-    public sections: Section[] = [];
+    public sections: IObservableArray<Section> = [] as IObservableArray<Section>;
 
     @observable
-    public programs: Program[] = [];
+    public programs: IObservableArray<Program> = [] as IObservableArray<Program>;
 
     abstract get id(): string;
 }

package.json

@@ -46,6 +46,7 @@
     "css-loader": "^0.28.0",
     "file-loader": "^0.11.1",
     "html-webpack-plugin": "^2.28.0",
+    "mobx-react-devtools": "^4.2.11",
     "react-hot-loader": "^3.0.0-beta.6",
     "source-map-loader": "^0.2.1",
     "style-loader": "^0.17.0",