update UI

src/components/input.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+
+class Input extends React.Component {
+
+  read(e){
+    this.props.update(this.props.id, e.target.value)
+  }
+
+  render(){
+    switch (this.props.type) {
+      case 'submit':
+        return  <input type="submit" value={this.props.lable} onClick={this.props.submit} />
+      default:
+        return <input type={this.props.type} placeholder={this.props.lable} onChange={this.read.bind(this)} />
+    }
+  }
+}
+
+export default Input;

src/components/task.js

@@ -1,13 +0,0 @@
-import React from 'react';
-
-function Task(props) {
-  let s = "width:" + props.progress + "%"
-  return (
-    <div class="task-container">
-      <div class="task-progress" style={{ width: props.progress + "%" }} ></div>
-      <div class="task-lable">{props.lable}</div>
-    </div>
-  )
-}
-
-export default Task;

src/db/index.js

@@ -0,0 +1,35 @@
+var TaskDb = [
+  {
+    'lable': "some stuff",
+    'progress': 0.5
+  },{
+    'lable': "some other stuff",
+    'progress': 0.2
+  },{
+    'lable': "fun stuff",
+    'progress': 0.75
+  },
+]
+
+class Database{
+  getTasks(){
+    return TaskDb;
+  }
+
+  addTask(task){
+    TaskDb.push(task);
+  }
+
+  updateTask(id, task){
+    TaskDb[id] = task
+  }
+
+  removeTask(id){
+    for(let i=id+1; i<TaskDb.length; i++){
+      TaskDb[i-1] = TaskDb[i];
+    }
+    TaskDb.pop();
+  }
+}
+
+export default Database

src/res/add.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   viewBox="0 0 80 80"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg">
+   <path
+      style="fill:none;stroke:#40ae46;stroke-width:5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+      d="M 40,10 V 70" />
+   <path
+      style="fill:none;stroke:#40ae46;stroke-width:5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+      d="M 10,40 H 70" />
+</svg>

src/res/trash.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="60mm"
+   height="80mm"
+   viewBox="0 0 60 80"
+   version="1.1"
+   id="svg5"
+   xmlns="http://www.w3.org/2000/svg">
+  <g
+     id="layer1">
+    <path
+       style="fill:none;stroke:#40ae46;stroke-width:5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 5.3255306,9.7780354 H 55.325531"
+       id="path2165"/>
+    <path
+       style="fill:none;stroke:#40ae46;stroke-width:5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 21.991531,19.778035 3.333999,55"
+       id="path2165-3-6" />
+    <path
+       style="fill:none;stroke:#40ae46;stroke-width:5;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 38.658831,19.778035 -3.3333,55"
+       id="path2165-3-7" />
+    <path
+       style="fill:#40ae46;fill-opacity:1;stroke-width:5.065;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke:none;stroke-opacity:1"
+       id="path2649"
+       d="m 26.445361,7.3528442 a 4.2567863,4.8403959 0 0 1 2.119329,-4.2038204 4.2567863,4.8403959 0 0 1 4.261341,-0.00889 4.2567863,4.8403959 0 0 1 2.132873,4.1949544"
+       />
+    <path
+       style="fill:none;stroke:#40ae46;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 5.3255306,19.778034 15.325529,74.778035 H 45.32553 L 55.325531,19.778034 Z"
+       id="path5447" />
+  </g>
+</svg>

src/styles/App.css

@@ -6,6 +6,32 @@
   --dark-3-color: #444;
 }
 
+
+input{
+  background: none transparent;
+  border: none;
+  border-bottom: var(--dark-3-color) 1px solid;
+  color: white;
+  text-align: center;
+  height: 30px;
+  width: calc(100% - 50px);
+  margin: 5px 25px;
+}
+input[type=text] {
+  cursor: text;
+}
+input[type=submit] {
+  cursor: pointer;
+}
+input[type=submit]:hover{
+  background-color: var(--primary-color);
+  border-radius: 7px;
+}
+
+
+html{
+  background-color: var(--dark-2-color);
+}
 body{
   padding-top: 75px;
   color: white;
@@ -33,10 +59,6 @@ header h1 {
   vertical-align: middle;
 }
 
-main{
-  background-color: var(--dark-2-color);
-}
-
 .task-container {
   background-color: var(--dark-1-color);
   width: 100%;
@@ -46,6 +68,16 @@ main{
   margin: 0 0 3px 0;
 }
 
+.task-container.add {
+  justify-content: center;
+  flex-direction: column;
+  min-height: 50px;
+  height: auto;
+}
+.task-container.adding {
+  padding: 0 0 10px 0;
+}
+
 .task-progress{
   position: relative;
   background-color: var(--primary-color);
@@ -59,3 +91,13 @@ main{
   position: absolute;
   width: 100%
 }
+
+.task-trash{
+  position: absolute;
+  right: 10px;
+  height: 30px;
+}
+
+.task-add{
+  height: 30px;
+}

src/tasks.js

@@ -1,40 +1,109 @@
 import React from 'react'
-import Task from './components/task'
+import Database from './db'
 
-var tasks = [
-  {
-    'lable': "some stuff",
-    'progress': 0.5
-  },{
-    'lable': "some other stuff",
-    'progress': 0.2
-  },{
-    'lable': "fun stuff",
-    'progress': 0.75
-  },
-]
+import Input from './components/input'
+
+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){
     super(props);
 
-    this.state = tasks;
+    this.state = {
+      tasks: db.getTasks(),
+      add: false,
+      details: -1, // -1 meens don't show details of eny task
+    };
+    this.form = {};
   }
 
-
   updateFromDB() {
-    this.setState(tasks);
+    this.state.tasks = db.getTasks();
+    this.setState(this.state);
   }
 
-  renderOne(task){
-    return <Task lable={task.lable} progress={task.progress * 100} />
+  trash(id, e){
+    db.removeTask(id);
+    this.updateFromDB();
+  }
+  add(e){
+    this.state.add = true;
+    this.state.details = -1;
+    this.setState(this.state);
+  }
+  focus(id, e){
+    this.state.add = false;
+    this.state.details = id;
+    this.setState(this.state);
+  }
+
+  renderTask(task, id){
+    let classes = "task-container"
+    if(this.state.details == id) classes += " focus"
+
+    let progress = (task.progress*100) + "%"
+
+    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'],
+      progress: 0
+    })
+    this.updateFromDB()
+  }
+
+  renderAdd(){
+    if(this.state.add === false)
+      return (
+        <div class="task-container add"  onClick={this.add.bind(this)}>
+          <img class="task-add" src={addSvg} alt="+" />
+        </div>
+      )
+
+    return (
+      <div class="task-container add adding">
+        <Input type="text" lable="task" id="lable" update={this.valueUpdate.bind(this)} />
+        <Input type="submit" lable="save" submit={this.addSubmit.bind(this)} />
+      </div>
+    )
   }
 
   render() {
     let tasks = []
-    for(let i=0; i<this.state.length; i++){
-      tasks.push(this.renderOne(this.state[i]))
+    for(let i=0; i<this.state.tasks.length; i++){
+      tasks.push(this.renderTask(this.state.tasks[i], i))
     }
+    tasks.push(this.renderAdd())
     return tasks
   }
 }