More work on programs and other stuff

app/script/App.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { observer } from "mobx-react";
-import { SprinklersDevice, Section } from "./sprinklers";
+import { SprinklersDevice, Section, Program } from "./sprinklers";
 import { Item, Table, Header } from "semantic-ui-react";
 import FontAwesome = require("react-fontawesome");
 import * as classNames from "classnames";
@@ -22,10 +22,23 @@ class SectionRow extends React.PureComponent<{ section: Section }, void> {
     }
 }
 
+@observer
+class ProgramRow extends React.PureComponent<{ program: Program }, void> {
+    render() {
+        const { name, running } = this.props.program;
+        return (
+            <Table.Row>
+                <Table.Cell className="program--name">Program {name}</Table.Cell>
+                <Table.Cell className="program--running">running: {running + ""}</Table.Cell>
+            </Table.Row>
+        );
+    }
+}
+
 @observer
 class DeviceView extends React.PureComponent<{ device: SprinklersDevice }, void> {
     render() {
-        const { id, connected, sections } = this.props.device; //src={require("app/images/raspberry_pi.png")}
+        const { id, connected, sections, programs } = this.props.device; //src={require("app/images/raspberry_pi.png")}
         return (
             <Item>
                 <Item.Image  />
@@ -57,6 +70,18 @@ class DeviceView extends React.PureComponent<{ device: SprinklersDevice }, void>
                             }
                         </Table.Body>
                     </Table>
+                    <Table celled striped>
+                        <Table.Header>
+                            <Table.Row>
+                                <Table.HeaderCell colSpan="3">Programs</Table.HeaderCell>
+                            </Table.Row>
+                        </Table.Header>
+                        <Table.Body>
+                            {
+                                programs.map((p, i) => <ProgramRow program={p} key={i} />)
+                            }
+                        </Table.Body>
+                    </Table>
                 </Item.Content>
             </Item>
         );

app/script/mqtt.ts

@@ -3,7 +3,7 @@ import "paho-mqtt/mqttws31";
 import MQTT = Paho.MQTT;
 
 import { EventEmitter } from "events";
-import { SprinklersDevice, SprinklersApi, Section } from "./sprinklers";
+import { SprinklersDevice, SprinklersApi, Section, Program } from "./sprinklers";
 
 
 export class MqttApiClient extends EventEmitter implements SprinklersApi {
@@ -93,7 +93,9 @@ class MqttSprinklersDevice extends SprinklersDevice {
         return [
             `${this.prefix}/connected`,
             `${this.prefix}/sections`,
-            `${this.prefix}/sections/+/#`
+            `${this.prefix}/sections/+/#`,
+            `${this.prefix}/programs`,
+            `${this.prefix}/programs/+/#`
         ];
     }
 
@@ -133,6 +135,19 @@ class MqttSprinklersDevice extends SprinklersDevice {
                 }
                 (section as MqttSection).onMessage(subTopic, payload);
             }
+        } else if ((matches = topic.match(/^programs(?:\/(\d+)(?:\/?(.+))?)?$/)) != null) {
+            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));
+            } else {
+                const progNum = Number(progStr);
+                var program = this.programs[progNum];
+                if (!program) {
+                    this.programs[progNum] = program = new MqttProgram();
+                }
+                (program as MqttProgram).onMessage(subTopic, payload);
+            }
         } else {
             console.warn(`MqttSprinklersDevice recieved invalid topic: ${topic}`)
         }
@@ -158,3 +173,22 @@ class MqttSection extends Section {
         }
     }
 }
+
+interface ProgramJSON {
+    name: string;
+    enabled: boolean;
+    // sequence: Array<ProgramItem>;
+    // sched: Schedule;
+}
+
+class MqttProgram extends Program {
+    onMessage(topic: string, payload: string) {
+        if (topic == "running") {
+            this.running = (payload == "true");
+        } else if (topic == null) {
+            const json = JSON.parse(payload) as Partial<ProgramJSON>;
+            this.name = json.name;
+            this.enabled = json.enabled;
+        }
+    }
+}

app/script/sprinklers.ts

@@ -33,7 +33,7 @@ class ProgramItem {
     duration: number = 0;
 }
 
-class Program {
+export class Program {
     @observable
     name: string = ""
     @observable
@@ -44,6 +44,9 @@ class Program {
 
     @observable
     sequence: Array<ProgramItem> = [];
+
+    @observable
+    running: boolean = false;
 }
 
 export abstract class SprinklersDevice {