95 lines
2.9 KiB
JavaScript
95 lines
2.9 KiB
JavaScript
import React from 'react';
|
|
import {FileLoader} from './fileLoader'
|
|
import {DB} from './../static/storage'
|
|
|
|
const moment = require('moment');
|
|
//import 'react-infinite-calendar/styles.css'; // only needs to be imported once
|
|
|
|
var me;
|
|
|
|
export class TasksUI extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
tasks:[{name:"",count:0,tid:0}],
|
|
dates:[],
|
|
selDate:"-",
|
|
taskss:""
|
|
}
|
|
|
|
this.onTaskClick = this.onTaskClick.bind(this);
|
|
this.loadDay = this.loadDay.bind(this);
|
|
}
|
|
componentDidMount(){
|
|
var sql = "SELECT dt.task_id,t.taskName , COUNT(dt.day_id) FROM days_have_tasks as dt,tasks as t WHERE dt.task_id=t.id GROUP BY dt.task_id;";
|
|
var tmp = DB.cdb.exec(sql);
|
|
|
|
if(tmp.length>0){
|
|
tmp = tmp[0].values
|
|
console.log(tmp)
|
|
var tt = [];
|
|
for(var t in tmp){
|
|
tt.push({tid:tmp[t][0],name:tmp[t][1],count:tmp[t][2]});
|
|
}
|
|
this.setState({tasks:tt});
|
|
}
|
|
}
|
|
onTaskClick(e){
|
|
var val = e.target.attributes.getNamedItem("data-value").value;
|
|
console.log(val);
|
|
var sql = "SELECT days.date FROM days_have_tasks as dt, days WHERE dt.day_id = days.id AND dt.task_id=:task_id ;"
|
|
var stmt = DB.cdb.prepare(sql);
|
|
var res = stmt.getAsObject(
|
|
{
|
|
":task_id":val
|
|
}
|
|
)
|
|
var dates = [];
|
|
dates.push(res.date);
|
|
while (stmt.step()) dates.push(stmt.get()[0]);
|
|
this.setState({dates:dates});
|
|
// console.log(moment(stmt.get()[0]).format('DD.MM.YYYY'));
|
|
|
|
|
|
stmt.free();
|
|
}
|
|
loadDay(e){
|
|
var val = e.target.attributes.getNamedItem("data-value").value;
|
|
var today = DB.loadDate(new Date(val/1));
|
|
|
|
this.setState({
|
|
selDate:val,
|
|
taskss:today.taskList.join(", ")
|
|
})
|
|
}
|
|
render(){
|
|
console.log(this.state.tasks)
|
|
return (
|
|
<div id="tasks-frame">
|
|
<table id="tasks">
|
|
<tbody>
|
|
<tr><th>Aufgaben Name</th><th>Anzahl</th></tr>
|
|
{Object.keys(this.state.tasks).map((item,val) => (
|
|
<tr data-value={this.state.tasks[item].tid} onClick={this.onTaskClick}>
|
|
<td data-value={this.state.tasks[item].tid}>{this.state.tasks[item].name}</td><td data-value={this.state.tasks[item].tid}>{this.state.tasks[item].count}</td>
|
|
</tr>)
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
<table id="dates">
|
|
<tbody>
|
|
<tr><th>Datum</th></tr>
|
|
{this.state.dates.map((val)=>(
|
|
<tr><td><div onClick={this.loadDay} data-value={val}>{moment(val).format('DD.MM.YYYY')}</div></td></tr>
|
|
)
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
<div id="info">
|
|
Date:{moment(this.state.selDate/1).format('DD.MM.YYYY')}<br/>
|
|
Aufgabe(n):{this.state.taskss}
|
|
</div>
|
|
</div>);
|
|
}
|
|
}
|