195 lines
6.1 KiB
JavaScript
195 lines
6.1 KiB
JavaScript
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 'react-infinite-calendar/styles.css'; // only needs to be imported once
|
|
|
|
//const { ipcRenderer} = require('electron');
|
|
const moment = require('moment');
|
|
|
|
var me = null;
|
|
|
|
/*
|
|
#2C3A47;
|
|
@background-2:#596571;
|
|
*/
|
|
|
|
const cal_theme = {
|
|
accentColor: '#34495e',
|
|
floatingNav: {
|
|
background: '#34495e',
|
|
chevron: '#ffb142',
|
|
color: '#FFF',
|
|
},
|
|
headerColor: '#34495e',
|
|
selectionColor: '#34495e',
|
|
textColor: {
|
|
active: '#FFF',
|
|
default: '#333',
|
|
},
|
|
todayColor: '#ffb142',
|
|
weekdayColor: '#FFF',
|
|
}
|
|
|
|
export class Calender extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
// Render the Calendar
|
|
this.cal_date = new Date();
|
|
this.state = {
|
|
breakTime: 0,
|
|
date:new Date(),
|
|
endTime:null,
|
|
startTime:null,
|
|
taskList:[]
|
|
}
|
|
this.startTimeChange = this.startTimeChange.bind(this);
|
|
this.endTimeChange = this.endTimeChange.bind(this);
|
|
this.breakTimeChange = this.breakTimeChange.bind(this);
|
|
this.taskListChange = this.taskListChange.bind(this);
|
|
this.getDate = this.getDate.bind(this)
|
|
this.save = this.save.bind(this);
|
|
me = this;
|
|
|
|
this.today = new Date();
|
|
this.lastWeek = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate() - 7);
|
|
|
|
this.worktime = 0;
|
|
/*
|
|
@TODO LOAD CURRENT DATE
|
|
ipcRenderer.on('loadDate-reply', (event, arg) => {
|
|
//console.log(arg) // prints "pong"
|
|
this.setState(
|
|
arg.data
|
|
)
|
|
if(arg.data.date === null){
|
|
this.setState({date:this.cal_date});
|
|
}
|
|
if(arg.data.startTime === null){
|
|
this.setState({startTime:this.cal_date});
|
|
}
|
|
if(arg.data.endTime === null){
|
|
this.setState({endTime:this.cal_date});
|
|
}
|
|
})
|
|
*/
|
|
}
|
|
componentWillUnmount(){
|
|
Log.debug("unload Calender")
|
|
|
|
}
|
|
|
|
getDate(date){
|
|
// set selected date
|
|
me.cal_date = date;
|
|
|
|
var res = DB.loadDate(date)
|
|
Log.debug('LOAD RES')
|
|
console.log(res)
|
|
|
|
|
|
if(res.date === null){
|
|
res.date=this.cal_date;
|
|
}
|
|
if(res.startTime === null){
|
|
res.startTime=moment(this.cal_date).unix()*1000;
|
|
}
|
|
if(res.endTime === null){
|
|
res.endTime=moment(this.cal_date).unix()*1000;
|
|
}
|
|
this.setState(
|
|
res
|
|
)
|
|
|
|
}
|
|
startTimeChange(e){
|
|
//this.setState({startTime: e.target.value});
|
|
var hm = e.target.value.split(':');
|
|
this.setState({startTime: moment(this.state.date).set({hour:hm[0],minute:hm[1]}).unix()*1000});
|
|
}
|
|
endTimeChange(e){
|
|
////console.log(e.target.value)
|
|
var hm = e.target.value.split(':');
|
|
////console.log(moment(this.state.date).set({hour:hm[0],minute:hm[1]}).format('HH:mm:ss'))
|
|
this.setState({endTime: moment(this.state.date).set({hour:hm[0],minute:hm[1]}).unix()*1000 });
|
|
}
|
|
breakTimeChange(e){
|
|
|
|
this.setState({breakTime: e.target.value});
|
|
}
|
|
taskListChange(e){
|
|
this.setState({taskList: e.target.value.split(',')});
|
|
}
|
|
save(){
|
|
//console.log("Speichern")
|
|
Log.debug(JSON.stringify(this.state))
|
|
Log.debug(JSON.stringify({
|
|
breakTime: this.state.breakTime,
|
|
date:moment(this.state.date).unix()*1000,
|
|
endTime:this.state.endTime,
|
|
startTime:this.state.startTime,
|
|
taskList:this.state.taskList
|
|
}))
|
|
DB.saveDate(
|
|
{
|
|
breakTime: this.state.breakTime,
|
|
date:moment(this.state.date).unix()*1000,
|
|
endTime:this.state.endTime,
|
|
startTime:this.state.startTime,
|
|
taskList:this.state.taskList
|
|
}
|
|
);
|
|
Notify.emit({title:"",body:"Eintrag gespeichert.",type:"success"});
|
|
//ipcRenderer.send('saveDate',s)
|
|
}
|
|
render() {
|
|
var wk = 0;
|
|
if(this.state.endTime !== null){
|
|
try{
|
|
wk = moment.duration(moment(this.state.endTime).diff(moment(this.state.startTime).subtract(-this.state.breakTime,'minutes')));
|
|
//console.log('XD ',wk)
|
|
wk = moment.utc(wk._milliseconds).format('HH:mm')
|
|
}catch(e){
|
|
//console.log(e)
|
|
}
|
|
}else{
|
|
|
|
}
|
|
console.log(moment(this.state.date).diff(moment(DB.loadSettings('start').val),'week'));
|
|
////console.log(moment(this.state.endTime).format('HH:mm:ss'))
|
|
var loc = {blank: 'Datum auswählen...', headerFormat: 'ddd, MMM Do', todayLabel: { long: 'Heute', }, locale: require('date-fns/locale/de'), weekdays: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'], weekStartsOn: 1 }
|
|
return ( <div id="editor-frame">
|
|
<div id="calender">
|
|
<InfiniteCalendar selected = { this.today } theme={cal_theme} locale = { loc } onSelect={this.getDate}/>
|
|
</div >
|
|
<div id="mask">
|
|
<div className="header"></div>
|
|
<div className="inputGroup">
|
|
<div className="input">
|
|
<label>Arbeitszeit :</label><input type="text" disable="true" value={wk}/>
|
|
</div>
|
|
<div className="input">
|
|
<label>Anfangszeit:</label><input type="time" value={moment(this.state.startTime).format('HH:mm')} onChange={this.startTimeChange}/>
|
|
</div>
|
|
<div className="input">
|
|
<label>Feierabend :</label><input type="time" value={moment(this.state.endTime).format('HH:mm')} onChange={this.endTimeChange}/>
|
|
</div>
|
|
<div className="input">
|
|
<label>Pause :</label><input type="number" min="0" value={this.state.breakTime} onChange={this.breakTimeChange}/>
|
|
</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>
|
|
</div>
|
|
<div className="input">
|
|
<label></label><button className="btn success" onClick={this.save}>Speichern</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div> );
|
|
}
|
|
}
|