<commit_before>/* @flow */
import React from 'react'

import moment from 'moment';
require("moment-duration-format");

import Modal from 'react-modal';

import 'rc-time-picker/assets/index.css';
import TimePicker from 'rc-time-picker';

import ProjectSelector from './ProjectSelector'

var LocalStorageMixin = require('react-localstorage'); 

var timeFormat = 'HH:ss';
const LAST_PROJECT_KEY = "togglol-last-project";

class CreateTimeEntryModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
         entryId: undefined,
         startDate: undefined,
         endDate: undefined,
         projectId: this.getLastProjectId(),
         description: undefined,
         isModalOpen: false
    }
  }

    showModal(slotInfo) {
        var startDate = moment(slotInfo.start);
        var endDate = moment(slotInfo.end);

        var projectId = slotInfo.projectId || this.getLastProjectId();
        
        this.setState({
            startDate: startDate,
            endDate: endDate,
            entryId: slotInfo.entryId,
            projectId: projectId,
            description: slotInfo.description
        });

        if(this.props.shiftKeyPressed && this.state.projectId != undefined) {
            this.createTimeEntry();
        } else {
            this.setState({isModalOpen: true});
        }
        
    }

    getLastProjectId() {
        return Number(localStorage.getItem(LAST_PROJECT_KEY));
    }

    hideModal(){
        this.setState({isModalOpen: false});
    }

    changeStartTime(value) {
        var startDate = moment(value);
        this.setState({startDate: startDate});
    }


    changeEndTime(value) {
        var endDate = moment(value);
        this.setState({endDate: endDate});
    }

    changeDescription(value) {
        this.setState({description: value});
    }

    changeSelectedProject(projectId) {
        this.setState({projectId: projectId});
        this.submitButton.focus();
    }

    createTimeEntry() {
        var timeEntry = {
            id: this.state.entryId,
            description: this.state.description,
            pid: this.state.projectId,
            start: this.state.startDate.toISOString(),
            duration: this.state.endDate.diff(this.state.startDate, 'seconds'),
            created_with: "Togglol"
        };
        localStorage.setItem(LAST_PROJECT_KEY, this.state.projectId);
        this.hideModal();
        this.props.onCreateTimeEntry(timeEntry);
    }

    deleteTimeEntry() {
        var entryId = this.state.entryId;
        this.hideModal();
        this.props.onDeleteTimeEntry(entryId);
    }

    isEditMode() {
        return this.state.entryId != undefined;
    }

    render() {
        var duration = (this.state.startDate != undefined && this.state.endDate != undefined) ? moment.duration(this.state.endDate.diff(this.state.startDate)).format("h [hrs], m [min]") : "";
        let deleteButton = ""
        if(this.isEditMode()) {
            deleteButton = (<button type="button" style={{float: 'left'}} className="float-xs-left btn btn-danger" onClick={(e) => this.deleteTimeEntry(e)}>Delete entry</button>);
        }

        return(
            <Modal 
                className="Modal__Bootstrap modal-dialog"
                isOpen={this.state.isModalOpen} 
                onRequestClose={(e) => this.hideModal(e)}
                >
                <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" className="close" onClick={this.handleModalCloseRequest}>
                            <span aria-hidden="true">&times;</span>
                            <span className="sr-only">Close</span>
                        </button>
                        <h4 className="modal-title">{this.isEditMode() ? 'Edit time entry' : 'Add time entry'}</h4>
                    </div>
                    <div className="modal-body">
                        <form>
                            <div className="form-group row">
                                <label className="col-sm-2 col-form-label">Time </label>
                                <div className="col-sm-10">
                                    <p className="form-control-static">
                                        <TimePicker style={timepickerStyle} value={this.state.startDate} onChange={(value) => this.changeStartTime(value)} showSecond={false} />&nbsp;-&nbsp;
                                        <TimePicker style={timepickerStyle} value={this.state.endDate} onChange={(value) => this.changeEndTime(value)} showSecond={false} />
                                        &nbsp;({duration})
                                    </p>
                                </div>
                            </div>
                            <div className="form-group row">
                                <label className="col-sm-2 col-form-label">Description </label>
                                <div className="col-sm-10">
                                    <p className="form-control-static">
                                        <input type="text" value={this.state.description} className="form-control" onChange={(event) => this.changeDescription(event.target.value)}/>    
                                    </p>
                                </div>
                            </div>
                            <div className="form-group row">
                                <label className="col-sm-2 col-form-label">Project</label>
                                <div className="col-sm-10">
                                    <ProjectSelector selectedProject={this.state.projectId} onChange={(project) => this.changeSelectedProject(project)} clients={this.props.clients} projects={this.props.projects} />
                                </div>
                            </div><commit_msg>:ambulance: Fix close button on modal<commit_after>/* @flow */
import React from 'react'

import moment from 'moment';
require("moment-duration-format");

import Modal from 'react-modal';

import 'rc-time-picker/assets/index.css';
import TimePicker from 'rc-time-picker';

import ProjectSelector from './ProjectSelector'

var LocalStorageMixin = require('react-localstorage'); 

var timeFormat = 'HH:ss';
const LAST_PROJECT_KEY = "togglol-last-project";

class CreateTimeEntryModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
         entryId: undefined,
         startDate: undefined,
         endDate: undefined,
         projectId: this.getLastProjectId(),
         description: undefined,
         isModalOpen: false
    }
  }

    showModal(slotInfo) {
        var startDate = moment(slotInfo.start);
        var endDate = moment(slotInfo.end);

        var projectId = slotInfo.projectId || this.getLastProjectId();
        
        this.setState({
            startDate: startDate,
            endDate: endDate,
            entryId: slotInfo.entryId,
            projectId: projectId,
            description: slotInfo.description
        });

        if(this.props.shiftKeyPressed && this.state.projectId != undefined) {
            this.createTimeEntry();
        } else {
            this.setState({isModalOpen: true});
        }
        
    }

    getLastProjectId() {
        return Number(localStorage.getItem(LAST_PROJECT_KEY));
    }

    hideModal(){
        this.setState({isModalOpen: false});
    }

    changeStartTime(value) {
        var startDate = moment(value);
        this.setState({startDate: startDate});
    }


    changeEndTime(value) {
        var endDate = moment(value);
        this.setState({endDate: endDate});
    }

    changeDescription(value) {
        this.setState({description: value});
    }

    changeSelectedProject(projectId) {
        this.setState({projectId: projectId});
        this.submitButton.focus();
    }

    createTimeEntry() {
        var timeEntry = {
            id: this.state.entryId,
            description: this.state.description,
            pid: this.state.projectId,
            start: this.state.startDate.toISOString(),
            duration: this.state.endDate.diff(this.state.startDate, 'seconds'),
            created_with: "Togglol"
        };
        localStorage.setItem(LAST_PROJECT_KEY, this.state.projectId);
        this.hideModal();
        this.props.onCreateTimeEntry(timeEntry);
    }

    deleteTimeEntry() {
        var entryId = this.state.entryId;
        this.hideModal();
        this.props.onDeleteTimeEntry(entryId);
    }

    isEditMode() {
        return this.state.entryId != undefined;
    }

    render() {
        var duration = (this.state.startDate != undefined && this.state.endDate != undefined) ? moment.duration(this.state.endDate.diff(this.state.startDate)).format("h [hrs], m [min]") : "";
        let deleteButton = ""
        if(this.isEditMode()) {
            deleteButton = (<button type="button" style={{float: 'left'}} className="float-xs-left btn btn-danger" onClick={(e) => this.deleteTimeEntry(e)}>Delete entry</button>);
        }

        return(
            <Modal 
                className="Modal__Bootstrap modal-dialog"
                isOpen={this.state.isModalOpen} 
                onRequestClose={(e) => this.hideModal(e)}
                >
                <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" className="close" onClick={() => this.hideModal()}>
                            <span aria-hidden="true">&times;</span>
                            <span className="sr-only">Close</span>
                        </button>
                        <h4 className="modal-title">{this.isEditMode() ? 'Edit time entry' : 'Add time entry'}</h4>
                    </div>
                    <div className="modal-body">
                        <form>
                            <div className="form-group row">
                                <label className="col-sm-2 col-form-label">Time </label>
                                <div className="col-sm-10">
                                    <p className="form-control-static">
                                        <TimePicker style={timepickerStyle} value={this.state.startDate} onChange={(value) => this.changeStartTime(value)} showSecond={false} />&nbsp;-&nbsp;
                                        <TimePicker style={timepickerStyle} value={this.state.endDate} onChange={(value) => this.changeEndTime(value)} showSecond={false} />
                                        &nbsp;({duration})
                                    </p>
                                </div>
                            </div>
                            <div className="form-group row">
                                <label className="col-sm-2 col-form-label">Description </label>
                                <div className="col-sm-10">
                                    <p className="form-control-static">
                                        <input type="text" value={this.state.description} className="form-control" onChange={(event) => this.changeDescription(event.target.value)}/>    
                                    </p>
                                </div>
                            </div>
                            <div className="form-group row">
                                <label className="col-sm-2 col-form-label">Project</label>
                                <div className="col-sm-10">
                                    <ProjectSelector selectedProject={this.state.projectId} onChange={(project) => this.changeSelectedProject(project)} clients={this.props.clients} projects={this.props.projects} />
                                </div>
                            </div>
{'fraction_non_alphanumeric': 0.12360311547578734, 'fraction_numerical': 0.0018625126989502202, 'mean_word_length': 1.6714156490275893, 'pattern_counts': {'":': 0, '<': 87, '<?xml version=': 0, '>': 100, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 18, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6198116', 'n_tokens_mistral': 3058, 'n_tokens_neox': 2985, 'n_words': 521}