allow edit of tasks

src/components/input.js

@@ -10,9 +10,28 @@ class Input extends React.Component {
   render(){
     switch (this.props.type) {
       case 'submit':
-        return  <input type="submit" value={this.props.lable} onClick={this.props.submit} />
+        return  <input
+                  key={this.props.key}
+                  type="submit"
+                  value={this.props.lable}
+                  onClick={this.props.submit} />
+      case 'range':
+        let range = this.props.range.split(':')
+        return <input
+                  key={this.props.key}
+                  type="range"
+                  min={range[0]}
+                  max={range[1]}
+                  step={range[2]}
+                  onChange={this.read.bind(this)}
+                  value={this.props.value} />
       default:
-        return <input type={this.props.type} placeholder={this.props.lable} onChange={this.read.bind(this)} />
+        return <input
+                  key={this.props.key}
+                  type={this.props.type}
+                  placeholder={this.props.lable}
+                  onChange={this.read.bind(this)}
+                  value={this.props.value} />
     }
   }
 }

src/components/taskDetails.js

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import Input from './input'
+
+class Details extends React.Component{
+  render(){
+    if(!this.props.display) return ""
+
+    let ret = []
+    let keys = Object.keys(this.props.task)
+    for(let i in Object.keys(this.props.task)){
+      let key = keys[i]
+      console.log(key, this.props.task[key])
+      ret.push(<span key={'lable.' + key} class="task-key">{key}</span>)
+      switch (key) {
+        case "lable":
+          ret.push(<Input
+                      key='input.lable'
+                      type='text'
+                      value={this.props.task[key]}
+                      id="lable"
+                      update={this.props.update} />)
+          break;
+        case "progress":
+          ret.push(<Input
+                      key='input.progress'
+                      type='range'
+                      value={this.props.task[key]}
+                      range="0:1:0.05"
+                      id="progress"
+                      update={this.props.update} />)
+          break;
+        default:
+          ret.push(<span key={'input.'+key} class="task-value">{this.props.task[key]}</span>)
+      }
+    }
+    ret.push(<Input key="input.submit" type='submit' lable="close" submit={this.props.close} />)
+    return <div class="task-proppertys">{ret}</div>
+  }
+}
+
+export default Details

src/styles/App.css

@@ -77,6 +77,11 @@ header h1 {
 .task-container.adding {
   padding: 0 0 10px 0;
 }
+.task-container.focus{
+  display: block;
+  height: auto;
+  padding: 10px;
+}
 
 .task-progress{
   position: relative;
@@ -98,6 +103,21 @@ header h1 {
   height: 30px;
 }
 
+.task-proppertys{
+  position: relative;
+  width: 100%;
+}
+
 .task-add{
   height: 30px;
 }
+
+.task-key{
+  display: block;
+  padding-right: 10px;
+  font-weight: bold;
+}
+
+.task-value{
+  display: block;
+}

src/tasks.js

@@ -2,25 +2,13 @@ import React from 'react'
 import Database from './db'
 
 import Input from './components/input'
+import Details from './components/taskDetails'
 
 import trashSvg from './res/trash.svg';
 import addSvg from './res/add.svg'
 
 var db = new Database();
 
-function Details(props){
-  if(!props.display) return ""
-
-  let ret = []
-  let keys = Object.keys(props.task)
-  for(let i in Object.keys(props.task)){
-    let key = keys[i]
-    console.log(key, props.task[key])
-    ret.push(<span class="task-key">{key}</span>)
-    ret.push(<span class="task-value">{props.task[key]}</span>)
-  }
-  return <div class="task-proppertys">{ret}</div>
-}
 
 class Tasks extends React.Component {
   constructor(props){
@@ -39,41 +27,63 @@ class Tasks extends React.Component {
     this.setState(this.state);
   }
 
+  valueUpdate(key, value){
+    console.log('valueUpdate: ', key, " => ", value)
+    this.form[key] = value
+  }
+
   trash(id, e){
     db.removeTask(id);
+    this.state.add = false;
+    this.state.details = -1;
     this.updateFromDB();
   }
   add(e){
+    this.form = {};
+
     this.state.add = true;
     this.state.details = -1;
     this.setState(this.state);
   }
   focus(id, e){
+    this.form = {};
+
     this.state.add = false;
     this.state.details = id;
     this.setState(this.state);
   }
 
+  editTask(id, key, value){
+    console.log(id, key, value)
+    this.state.tasks[id][key] = value;
+    db.updateTask(id, this.state.tasks[id])
+    this.setState(this.state)
+  }
+
   renderTask(task, id){
     let classes = "task-container"
     if(this.state.details == id) classes += " focus"
 
     let progress = (task.progress*100) + "%"
 
+    if(this.state.details == id){
+      return (
+        <div class={classes}>
+          <Details display={this.state.details == id} task={task}
+            update={this.editTask.bind(this, id)} close={this.focus.bind(this, -1)} />
+          <img class="task-trash" src={trashSvg} alt="del" onClick={this.trash.bind(this, id)} />
+        </div>
+      )
+    }
     return (
       <div class={classes} onClick={this.focus.bind(this, id)}>
         <div class="task-progress" style={{ width: progress }} ></div>
         <div class="task-lable">{task.lable}</div>
         <img class="task-trash" src={trashSvg} alt="del" onClick={this.trash.bind(this, id)} />
-        <Details display={this.state.details == id} task={task} />
       </div>
     )
   }
 
-  valueUpdate(key, value){
-    this.form[key] = value
-  }
-
   addSubmit(){
     db.addTask({
       lable: this.form['lable'],