Added button to add a program item

app/components/ProgramSequenceView.tsx

@@ -121,16 +121,23 @@ class ProgramSequenceView extends React.Component<{
         const editing = this.props.editing || false;
         const className = classNames("programSequence", { editing });
         return (
-            <ProgramSequenceList
+            <div>
-                className={className}
+                <ProgramSequenceList
-                useDragHandle
+                    className={className}
-                list={sequence}
+                    useDragHandle
-                sections={sections}
+                    helperClass="dragging"
-                editing={editing}
+                    list={sequence}
-                onChange={this.changeItem}
+                    sections={sections}
-                onRemove={this.removeItem}
+                    editing={editing}
-                onSortEnd={this.onSortEnd}
+                    onChange={this.changeItem}
-            />
+                    onRemove={this.removeItem}
+                    onSortEnd={this.onSortEnd}
+                />
+                <Button onClick={this.addItem}>
+                    <Icon name="add"/>
+                    Add item
+                </Button>
+            </div>
         );
     }
 
@@ -142,6 +149,24 @@ class ProgramSequenceView extends React.Component<{
         this.props.sequence.splice(index, 1);
     }
 
+    private addItem = () => {
+        let sectionId = 0;
+        for (const section of this.props.sections) {
+            const sectionNotIncluded = this.props.sequence
+                .every((sequenceItem) =>
+                    sequenceItem.section !== section.id);
+            if (sectionNotIncluded) {
+                sectionId = section.id;
+                break;
+            }
+        }
+        const item = new ProgramItem({
+            section: sectionId,
+            duration: new Duration(5, 0).toSeconds(),
+        });
+        this.props.sequence.push(item);
+    }
+
     private onSortEnd = ({oldIndex, newIndex}: SortEnd) => {
         const { sequence: array } = this.props;
         if (newIndex >= array.length) {

app/pages/ProgramPage.tsx

@@ -115,6 +115,7 @@ class ProgramPage extends React.Component<ProgramPageProps> {
             }
         } else {
             if (this.programView != null) {
+                this.programView.reset();
                 this.programView = null;
             }
         }
@@ -185,6 +186,9 @@ class ProgramPage extends React.Component<ProgramPageProps> {
 
     private close = () => {
         const { deviceId } = this.props.match.params;
+        if (this.programView) {
+            this.programView.reset();
+        }
         this.props.history.push({ pathname: rp.device(deviceId) });
     }
 

app/styles/ProgramSequenceView.scss

@@ -7,9 +7,11 @@
 
 .programSequence-item {
   list-style-type: none;
-  z-index: 2000;
   display: flex;
   margin-bottom: .5em;
+  &.dragging {
+    z-index: 1010;
+  }
   .fields {
     margin: 0em 0em 1em !important;
   }
@@ -22,4 +24,4 @@
   .durationInputs {
     width: 20em;
   }
-}
+}