wochenbericht-manager/src/jsx/ui/calender.jsx

import React from 'react';
import InfiniteCalendar from 'react-infinite-calendar';
import {DB} from '../static/storage'
import { Log } from '../static/debug';
//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: '#3C6F9B',
  floatingNav: {
    background: '#2C3A47',
    chevron: '#ffb142',
    color: '#FFF',
  },
  headerColor: '#004F5B',
  selectionColor: '#3C6F9B',
  textColor: {
    active: '#FFF',
    default: '#333',
  },
  todayColor: '#ffb142',
  weekdayColor: '#3C6F9B',
}

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(){
    //ipcRenderer.removeAllListeners('loadDate-reply');
  }
  getDate(date){
    ////console.log(me)
    me.cal_date = date;
    ////console.log(new Date(date));
    //
    //ipcRenderer.send('loadDate', {date:date})
    var res = DB.loadDate(date)
    //console.log(res) // prints "pong"
    this.setState(
      res
    )
    if(res.date === null){
      this.setState({date:this.cal_date});
    }
    if(res.startTime === null){
      this.setState({startTime:this.cal_date});
    }
    if(res.endTime === null){
      this.setState({endTime:this.cal_date});
    }

  }
  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
      }
    );
    //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">Editor</div>
                <div className="lower-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> );
  }
}