Started work on SectionRunnerView

app/script/components/DeviceView.tsx

@@ -2,7 +2,7 @@ import * as classNames from "classnames";
 import {observer} from "mobx-react";
 import * as React from "react";
 import {Header, Item} from "semantic-ui-react";
-import {ProgramTable, RunSectionForm, SectionTable} from ".";
+import {ProgramTable, RunSectionForm, SectionTable, SectionRunnerView} from ".";
 
 import {SprinklersDevice} from "../sprinklers";
 import FontAwesome = require("react-fontawesome");
@@ -21,7 +21,7 @@ const ConnectionState = ({connected}: { connected: boolean }) =>
 @observer
 export default class DeviceView extends React.PureComponent<{ device: SprinklersDevice }, {}> {
     render() {
-        const {id, connected, sections, programs} = this.props.device;
+        const {id, connected, sections, programs, sectionRunner} = this.props.device;
         return (
             <Item>
                 <Item.Image src={require<string>("app/images/raspberry_pi.png")}/>
@@ -33,6 +33,7 @@ export default class DeviceView extends React.PureComponent<{ device: Sprinklers
                     <Item.Meta>
 
                     </Item.Meta>
+                    <SectionRunnerView sectionRunner={sectionRunner}/>
                     <SectionTable sections={sections}/>
                     <RunSectionForm sections={sections}/>
                     <ProgramTable programs={programs}/>

app/script/components/SectionRunnerView.tsx

@@ -0,0 +1,13 @@
+import {observer} from "mobx-react";
+import * as React from "react";
+import {Segment} from "semantic-ui-react";
+import {SectionRunner} from "../sprinklers";
+
+@observer
+export default class SectionRunnerView extends React.Component<{ sectionRunner: SectionRunner }, {}> {
+    render() {
+        return <Segment>
+            <h4>Section Runner Queue</h4>
+        </Segment>;
+    }
+}

app/script/components/index.ts

@@ -4,4 +4,5 @@ export {default as DurationInput} from "./DurationInput";
 export {default as MessagesView} from "./MessagesView";
 export {default as ProgramTable} from "./ProgramTable";
 export {default as RunSectionForm} from "./RunSectionForm";
+export {default as SectionRunnerView} from "./SectionRunnerView";
 export {default as SectionTable} from "./SectionTable";