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 {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');
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',
}

var ct = ()=>{}

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);
    this.entryChange = this.entryChange.bind(this);
    this.addTask = this.addTask.bind(this);
    this.delTask = this.delTask.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)
  }
  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){
        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></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>
                  </div>
                </div>

              </div>
            </div> );
  }
}