3 files changed, 78 insertions, 11 deletions

diff --git a/app/client/common/fileUpload.component.js b/app/client/common/fileUpload.component.js
new file mode 100644
index 0000000..5a1291c
--- /dev/null
+++ b/app/client/common/fileUpload.component.js
@@ -0,0 +1,28 @@
+import { h, Component } from 'preact'
+
+class FileUpload extends Component {
+  constructor(props){
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+  }
+  handleChange(e){
+    this.props.onChange && this.props.onChange()
+  }
+  render() {
+    return (
+      <div className='fileUpload param'>
+        <label>
+          <span>{this.props.title}</span>
+          <input
+            type='file'
+            multiple={this.props.multiple}
+            onChange={this.handleChange}
+          />
+          <button>{this.props.label || 'Choose file...'}</button>
+        </label>
+      </div>
+    )
+  }
+}
+
+export default FileUpload
diff --git a/app/client/common/header.component.js b/app/client/common/header.component.js
index 29c3713..5c1c145 100644
--- a/app/client/common/header.component.js
+++ b/app/client/common/header.component.js
@@ -1,36 +1,41 @@
 import { h, Component } from 'preact'
+import { bindActionCreators } from 'redux'
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux'
 
-function Header(props) {
-  const tools = "pix2pix samplernn style_transfer_video style_transfer_audio".split(" ").map((s,i) => {
-    return <option value={s}>{s}</option>
+import * as systemActions from '../system/system.actions'
+
+import modules from '../modules'
+
+function Header({ fps, app, actions }) {
+  const tool_list = Object.keys(modules).map((name, i) => {
+    const label = name.replace(/_/, " ")
+    return <option value={name} key={i}>{label}</option>
   })
+  const Links = modules[app.tool].links
   return (
     <header>
       <b>live cortex</b>
       <span>
-        <select>
-          {tools}
+        <select onChange={e => actions.changeTool(e.target.value)} value={app.tool}>
+          {tool_list}
         </select>
       </span>
       <span><Link to="/system">system</Link></span>
       <span><Link to="/dashboard">dashboard</Link></span>
-      <span>checkpoints</span>
-      <span>datasets</span>
-      <span>results</span>
-      <span><Link to="/live">live</Link></span>
-      <span>{props.fps} fps</span>
+      <Links />
+      <span>{fps} fps</span>
     </header>
   )
 }
 
 const mapStateToProps = state => ({
+  app: state.system.app,
   fps: state.live.fps,
-  frame: state.live.frame,
 })
 
 const mapDispatchToProps = (dispatch, ownProps) => ({
+  actions: bindActionCreators(systemActions, dispatch),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Header)
diff --git a/app/client/common/textInput.component.js b/app/client/common/textInput.component.js
new file mode 100644
index 0000000..b3c4866
--- /dev/null
+++ b/app/client/common/textInput.component.js
@@ -0,0 +1,34 @@
+import { h, Component } from 'preact'
+
+class TextInput extends Component {
+  constructor(props){
+    super(props)
+    this.handleInput = this.handleInput.bind(this)
+    this.handleKeydown = this.handleKeydown.bind(this)
+  }
+  handleInput(e){
+    this.props.onInput && this.props.onInput(e.target.value)
+  }
+  handleKeydown(e){
+    if (e.keyCode === 13) {
+      this.props.onSave && this.props.onSave(e.target.value)
+    }
+  }
+  render() {
+    return (
+      <div className='textInput param'>
+        <label>
+          <span>{this.props.title}</span>
+          <input
+            type='text'
+            value={this.props.value}
+            onInput={this.handleInput}
+            onKeydown={this.handleKeydown}
+          />
+        </label>
+      </div>
+    )
+  }
+}
+
+export default TextInput