reworked tasks

.gitlab-ci.yml

@@ -1,7 +1,7 @@
 stages:
   - build
 
-image: node:8.11.4
+image: node:12.7.0
 
 build:
   stage: build

package.json

@@ -1,6 +1,6 @@
 {
   "name": "wochenbericht-manager",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "dependencies": {
     "axios": "^0.18.0",

public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" />
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

public/main.css

@@ -80,6 +80,18 @@ body {
 #editor-frame {
   display: flex;
 }
+#editor-frame .hidden {
+  display: none;
+}
+#editor-frame #entrys .entry-input {
+  display: flex;
+  box-sizing: content-box;
+}
+#editor-frame #entrys .entry-input button {
+  margin: 0;
+  padding: 0px 10px;
+  border: 1px solid;
+}
 #editor-frame #mask {
   width: 100%;
 }

src/jsx/ui/calender.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import InfiniteCalendar from 'react-infinite-calendar';
+
 import {DB} from '../static/storage'
 import { Log } from '../static/debug';
 
 import {Notify} from '../static/notify';
+import { Tasks } from './calender/tasks';
 //import 'react-infinite-calendar/styles.css'; // only needs to be imported once
 
 //const {  ipcRenderer} = require('electron');
@@ -13,7 +15,7 @@ var me = null;
 
 /*
 #2C3A47;
-@background-2:#596571;
+@background-2:#596571; 
 */
 
 const cal_theme = {
@@ -33,6 +35,8 @@ const cal_theme = {
   weekdayColor: '#FFF',
 }
 
+var ct = ()=>{}
+
 export class Calender extends React.Component {
   constructor(props) {
     super(props);
@@ -51,6 +55,9 @@ export class Calender extends React.Component {
     this.taskListChange = this.taskListChange.bind(this);
     this.getDate = this.getDate.bind(this)
     this.save = this.save.bind(this);
+    this.entryChange = this.entryChange.bind(this);
+    this.addTask = this.addTask.bind(this);
+    this.delTask = this.delTask.bind(this);
     me = this;
 
     this.today = new Date();
@@ -144,6 +151,22 @@ export class Calender extends React.Component {
     Notify.emit({title:"",body:"Eintrag gespeichert.",type:"success"});
     //ipcRenderer.send('saveDate',s)
   }
+  entryChange(e){
+    console.log(e.target.attributes.getNamedItem("data-key").value+" "+e.target.value);
+    var tmp = this.state.taskList
+    tmp[e.target.attributes.getNamedItem("data-key").value] = e.target.value
+    this.setState({taskList: tmp});
+  }
+  addTask(){
+    var tmp = this.state.taskList;
+    tmp.push("");
+    this.setState({taskList: tmp})
+  }
+  delTask(e){
+    var tmp = this.state.taskList;
+    tmp.splice(e.target.attributes.getNamedItem("data-key").value,1);
+    this.setState({taskList: tmp});
+  }
   render() {
       var wk = 0;
       if(this.state.endTime !== null){
@@ -181,7 +204,18 @@ export class Calender extends React.Component {
                   </div>
                   <div className="input">
                     <label>Tätigkeiten</label>
-                    <label><sub>( mit Komma ',' getrennt ):</sub></label><br/><textarea value={this.state.taskList} onChange={this.taskListChange}></textarea>
+                    <label></label><br/><textarea className="hidden" value={this.state.taskList} onChange={this.taskListChange}>
+
+
+                    </textarea>
+                    <div id="entrys">
+                        {this.state.taskList.map((item, i) => (
+                        <div className="entry-input" key={i}>
+                            <input type="text" value={item} data-key={i} onChange={this.entryChange}/><button data-key={i} onClick={this.delTask}><i class="fas fa-trash"></i></button>
+                        </div>)
+                        )}
+                    </div>
+                    <button onClick={this.addTask}><i class="fas fa-plus"></i></button>
                   </div>
                   <div className="input">
                     <label></label><button className="btn success" onClick={this.save}>Speichern</button>

src/jsx/ui/calender/tasks.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+var entry = [];
+
+export class Tasks extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            tasks:props.tasks
+        }
+        var me = this;
+        props.sync(function(tasks){
+            me.setState({tasks:tasks})
+            console.log(me.state)
+        })
+        console.log(props)
+
+
+    }
+    render(){
+        return (
+        <div id="entrys">
+            {this.state.tasks.map((item, i) => (
+            <li className="travelcompany-input" key={i}>
+                    <span className="input-label">key: {i} Name: {entry[item]}</span>
+            </li>)
+            )}
+        </div>);
+    }
+}
+
+class Task extends React.Component {
+    render() {
+        return (
+            <div>
+                
+
+            </div>
+        )
+    }
+}

src_less/main.less

@@ -74,7 +74,20 @@ html,body{
   #calender{
 
   }
-
+  .hidden{
+      display: none;
+  }
+  #entrys{
+      .entry-input{
+        display: flex;
+        box-sizing: content-box;
+        button{
+            margin: 0;
+            padding: 0px 10px; 
+            border: 1px solid;
+        }
+      }
+  }
   #mask{
     width:100%;
     .header{