Implement UI for unit addition and removal

1 files changed, 37 insertions, 0 deletions

diff --git a/src/components/sidebars/topology/machine/UnitAddComponent.js b/src/components/sidebars/topology/machine/UnitAddComponent.js
new file mode 100644
index 00000000..a1c9eb76
--- /dev/null
+++ b/src/components/sidebars/topology/machine/UnitAddComponent.js
@@ -0,0 +1,37 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+class UnitAddComponent extends React.Component {
+    static propTypes = {
+        units: PropTypes.array.isRequired,
+        onAdd: PropTypes.func.isRequired,
+    };
+
+    render() {
+        return (
+            <div className="form-inline">
+                <div className="form-group w-100">
+                    <select
+                        className="form-control w-75 mr-1"
+                        ref={unitSelect => this.unitSelect = unitSelect}
+                    >
+                        {this.props.units.map(unit => (
+                            <option value={unit.id} key={unit.id}>
+                                {unit.manufacturer + " " + unit.family + " " + unit.model + " " + unit.generation}
+                            </option>
+                        ))}
+                    </select>
+                    <button
+                        type="submit"
+                        className="btn btn-primary"
+                        onClick={() => this.props.onAdd(parseInt(this.unitSelect.value, 10))}
+                    >
+                        Add
+                    </button>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default UnitAddComponent;