<commit_before>import React, {Component} from 'react';
import AltContainer from 'alt/AltContainer';
import moment from 'moment';
import _ from 'lodash';
import './style.css';
import MissionActions from '../mission/actions';
import MissionStore from '../mission/store';
import WorkblockActions from '../workblocks/actions';
import WorkblockStore from '../workblocks/store';
import TimesheetActions from './actions';
import TimesheetStore from './store';

export default class TimesheetApp extends Component {
  componentWillMount() {
    MissionActions.fetch();
    WorkblockActions.fetch();
  }

  render() {
    return (
      <AltContainer
        stores={{missionStore: MissionStore, workblockStore: WorkblockStore, timesheetStore: TimesheetStore}}
        actions={TimesheetActions}
      >
        <TimesheetContainer />
      </AltContainer>
    );
  }
}

class TimesheetContainer extends Component {
  componentDidMount() {
    componentHandler.upgradeDom();
  }

  render() {
    let styles = {
      progress: {
        width: '100%'
      },
      card: {
        width: '100%',
        minHeight: 'initial'
      }
    };
    
    if (this.props.missionStore.isFetching || this.props.workblockStore.isFetching) {
      return <div className="mdl-progress mdl-js-progress mdl-progress__indeterminate" style={styles.progress}></div>;
    }

    return (
      <div className="mdl-grid">
        <div className="mdl-card mdl-shadow--2dp" style={styles.card}>
          <TimesheetNavigationView {...this.props} />
          <div className="mdl-card__media">
            <TimesheetTableView {...this.props} />
          </div>
        </div>
      </div>
    );
  }
}

class TimesheetNavigationView extends Component {
  componentDidMount() {
    componentHandler.upgradeDom();
  }

  render() {
    let styles = {
      title: {
        width: '150px',
        textAlign: 'center',
        lineHeight: '32px'
      }
    };
    return (
      <div className="mdl-card__title">
        <button className="mdl-button mdl-js-button" onClick={this.props.navigateToToday}>
          Today
        </button>
        <button className="mdl-button mdl-js-button mdl-button--icon" onClick={this.props.navigateToPreviousWeek}>
          <i className="material-icons">chevron_left</i>
        </button>
        <span style={styles.title}>
          {
            `${moment(this.props.timesheetStore.currentDate).startOf('w').format('MMM DD')}
            - 
            ${moment(this.props.timesheetStore.currentDate).endOf('w').format('DD, YYYY')}`
          }
        </span>
        <button className="mdl-button mdl-js-button mdl-button--icon" onClick={this.props.navigateToNextWeek}>
          <i className="material-icons">chevron_right</i>
        </button>
      </div>
    );
  }
}

class TimesheetTableView extends Component {
  componentDidMount() {
    componentHandler.upgradeDom();
  }

  render() {
    let styles = {
      table: {
        border: 'none',
        width: '100%'
      },
      supportingText: {
        textAlign: 'center'
      }
    };

    let currentDate = moment(this.props.timesheetStore.currentDate);
    let missions = _.select(this.props.missionStore.missions, (mission) => {
      let startDate = moment(mission.startDate);
      let endDate = moment(mission.endDate);
      return startDate.isBefore(moment(currentDate).endOf('w')) && endDate.isAfter(moment(currentDate).startOf('w'));
    });

    if (_.isEmpty(missions)) {
      return (
        <div className="mdl-card__supporting-text" style={styles.supportingText}>
          There is no mission during this week.
        </div>
      );
    }

    // Forced to use a random key on table to trigger componentDidMount for mdl
    // see: http://quaintous.com/2015/07/09/react-components-with-mdl/
    // and: http://codepen.io/yan-foto/pen/yNjwaO?editors=101
    return (
      <table
        key={`tt-timesheet-table-view-${Date.now()}`}
        className="mdl-data-table mdl-js-data-table mdl-data-table--selectable"
        style={styles.table}
      >
        <TimesheetHeaderView {...this.props} />
        <TimesheetBodyView {...this.props} missions={missions} />
      </table>
    );
  }
}

class TimesheetHeaderView extends Component {
  componentDidMount() {
    componentHandler.upgradeDom();
  }

  render() {
    let dayOfWeek = moment(this.props.timesheetStore.currentDate).startOf('w');
    let styles = {
      label: {
        marginRight: '40px'
      }
    };

    return (
      <thead>
        <th className="mdl-data-table__cell--non-numeric"></th>
        {_.times(7, n => {
          return (
            <th key={`tt-timesheet-header-view-${n}`}>
              <span style={styles.label}>
                {dayOfWeek.add(n == 0 ? n : 1, 'd').format('ddd DD')}
              </span>
            </th>
          );
        })}
        <th></th>
      </thead>
    );
  }
}

class TimesheetBodyView extends Component {
  componentDidMount() {
    componentHandler.upgradeDom();
  }

  render() {
    let styles = {
      text: {
        lineHeight: '42px'
      },
      cell: {
        paddingTop: '0'
      }
    };

    return (
      <tbody>
        {this.props.missions.map(mission => {
          let workblocks = _.select(this.props.workblockStore.workblocks, workblock => {
            return workblock.missionId == mission._id;
          });
          let dayOfWeek = moment(this.props.timesheetStore.currentDate).startOf('w');
          let rowTotal = 0;
          return (
            <tr key={mission._id}>
              <td className="mdl-data-table__cell--non-numeric">
                <span style={styles.text}>{`${mission.label}`}</span>
              </td>
              {_.times(7, n => {
                let startTime = moment(dayOfWeek).startOf('d');
                let cell = '';
                if (startTime.isBetween(moment(mission.startDate).startOf('d').subtract(1, 'ms'), moment(mission.endDate).endOf('d'))) {
                  let endTime = moment(startTime).add(1, 'd');
                  let workblock = _.find(workblocks, workblock => {
                    return moment(workblock.startTime).isBetween(startTime, endTime);
                  });
                  if (workblock) rowTotal += workblock.quantity;
                  cell = <TimesheetCellView {...workblock} startTime={moment(startTime)} />;
                }
                dayOfWeek.add(1, 'd');
                return (<td key={`tt-timesheet-cell-view-${n}`} style={styles.cell}>{cell}</td>);
              })}
              <td>
                <span style={styles.text} className="mdl-color-text--pink-A200">{rowTotal}</span>
              </td>
            </tr>
          );
        })}
      </tbody>
    );
  }
}

class TimesheetCellView extends Component {<commit_msg>totals on days && week total<commit_after>import React, {Component} from 'react';
import AltContainer from 'alt/AltContainer';
import moment from 'moment';
import _ from 'lodash';
import './style.css';
import MissionActions from '../mission/actions';
import MissionStore from '../mission/store';
import WorkblockActions from '../workblocks/actions';
import WorkblockStore from '../workblocks/store';
import TimesheetActions from './actions';
import TimesheetStore from './store';

export default class TimesheetApp extends Component {
  componentWillMount() {
    MissionActions.fetch();
    WorkblockActions.fetch();
  }

  render() {
    return (
      <AltContainer
        stores={{missionStore: MissionStore, workblockStore: WorkblockStore, timesheetStore: TimesheetStore}}
        actions={TimesheetActions}
      >
        <TimesheetContainer />
      </AltContainer>
    );
  }
}

class TimesheetContainer extends Component {
  componentDidMount() {
    componentHandler.upgradeDom();
  }

  render() {
    let styles = {
      progress: {
        width: '100%'
      },
      card: {
        width: '100%',
        minHeight: 'initial'
      }
    };
    
    if (this.props.missionStore.isFetching || this.props.workblockStore.isFetching) {
      return <div className="mdl-progress mdl-js-progress mdl-progress__indeterminate" style={styles.progress}></div>;
    }

    return (
      <div className="mdl-grid">
        <div className="mdl-card mdl-shadow--2dp" style={styles.card}>
          <TimesheetNavigationView {...this.props} />
          <div className="mdl-card__media">
            <TimesheetTableView {...this.props} />
          </div>
        </div>
      </div>
    );
  }
}

class TimesheetNavigationView extends Component {
  componentDidMount() {
    componentHandler.upgradeDom();
  }

  render() {
    let styles = {
      title: {
        width: '150px',
        textAlign: 'center',
        lineHeight: '32px'
      }
    };
    return (
      <div className="mdl-card__title">
        <button className="mdl-button mdl-js-button" onClick={this.props.navigateToToday}>
          Today
        </button>
        <button className="mdl-button mdl-js-button mdl-button--icon" onClick={this.props.navigateToPreviousWeek}>
          <i className="material-icons">chevron_left</i>
        </button>
        <span style={styles.title}>
          {
            `${moment(this.props.timesheetStore.currentDate).startOf('w').format('MMM DD')}
            - 
            ${moment(this.props.timesheetStore.currentDate).endOf('w').format('DD, YYYY')}`
          }
        </span>
        <button className="mdl-button mdl-js-button mdl-button--icon" onClick={this.props.navigateToNextWeek}>
          <i className="material-icons">chevron_right</i>
        </button>
      </div>
    );
  }
}

class TimesheetTableView extends Component {
  componentDidMount() {
    componentHandler.upgradeDom();
  }

  render() {
    let styles = {
      table: {
        border: 'none',
        width: '100%'
      },
      supportingText: {
        textAlign: 'center'
      }
    };

    let currentDate = moment(this.props.timesheetStore.currentDate);
    let missions = _.select(this.props.missionStore.missions, (mission) => {
      let startDate = moment(mission.startDate);
      let endDate = moment(mission.endDate);
      return startDate.isBefore(moment(currentDate).endOf('w')) && endDate.isAfter(moment(currentDate).startOf('w'));
    });

    if (_.isEmpty(missions)) {
      return (
        <div className="mdl-card__supporting-text" style={styles.supportingText}>
          There is no mission during this week.
        </div>
      );
    }

    // Forced to use a random key on table to trigger componentDidMount for mdl
    // see: http://quaintous.com/2015/07/09/react-components-with-mdl/
    // and: http://codepen.io/yan-foto/pen/yNjwaO?editors=101
    return (
      <table
        key={`tt-timesheet-table-view-${Date.now()}`}
        className="mdl-data-table mdl-js-data-table"
        style={styles.table}
      >
        <TimesheetHeaderView {...this.props} />
        <TimesheetBodyView {...this.props} missions={missions} />
      </table>
    );
  }
}

class TimesheetHeaderView extends Component {
  componentDidMount() {
    componentHandler.upgradeDom();
  }

  render() {
    let dayOfWeek = moment(this.props.timesheetStore.currentDate).startOf('w');
    let styles = {
      label: {
        marginRight: '40px'
      }
    };

    return (
      <thead>
        <th className="mdl-data-table__cell--non-numeric"></th>
        {_.times(7, n => {
          return (
            <th key={`tt-timesheet-header-view-${n}`}>
              <span style={styles.label}>
                {dayOfWeek.add(n == 0 ? n : 1, 'd').format('ddd DD')}
              </span>
            </th>
          );
        })}
        <th></th>
      </thead>
    );
  }
}

class TimesheetBodyView extends Component {
  componentDidMount() {
    componentHandler.upgradeDom();
  }

  render() {
    let styles = {
      text: {
        lineHeight: '42px'
      },
      cell: {
        paddingTop: '0'
      },
      totals: {
        row: {
          height: '66px'
        },
        text: {
          lineHeight: '42px',
          paddingRight: '38px'
        }
      }
    };

    let weekTotal = 0;
    let dayOfWeekTotals = {};

    return (
      <tbody>
        {this.props.missions.map(mission => {
          let workblocks = _.select(this.props.workblockStore.workblocks, workblock => {
            return workblock.missionId == mission._id;
          });
          let dayOfWeek = moment(this.props.timesheetStore.currentDate).startOf('w');
          let missionTotal = 0;
          return (
            <tr key={mission._id}>
              <td className="mdl-data-table__cell--non-numeric">
                <span style={styles.text}>{`${mission.label}`}</span>
              </td>
              {_.times(7, n => {
                let startTime = moment(dayOfWeek).startOf('d');
                let cell = '';
                if (startTime.isBetween(moment(mission.startDate).startOf('d').subtract(1, 'ms'), moment(mission.endDate).endOf('d'))) {
                  let endTime = moment(startTime).add(1, 'd');
                  let workblock = _.find(workblocks, workblock => {
                    return moment(workblock.startTime).isBetween(startTime, endTime);
                  });
                  dayOfWeekTotals[dayOfWeek] = dayOfWeekTotals[dayOfWeek] || 0;
                  if (workblock) {
                    missionTotal += workblock.quantity;
                    dayOfWeekTotals[dayOfWeek] += workblock.quantity;
                    weekTotal += workblock.quantity;
                  }
                  cell = <TimesheetCellView {...workblock} startTime={moment(startTime)} />;
                }
                dayOfWeek.add(1, 'd');
                return <td key={`tt-timesheet-cell-view-${n}`} style={styles.cell}>{cell}</td>;
              })}
              <td>
                <span style={styles.text} className="mdl-color-text--pink-A200">{missionTotal}</span>
              </td>
            </tr>
          );
        })}
        <tr style={styles.totals.row}>
          <td></td>
          {_.map(dayOfWeekTotals, (total) => {
            return (
              <td>
                <span style={styles.totals.text} className="mdl-color-text--pink-A200">{total}</span>
              </td>
            );
          })}
          <td>
            <strong style={styles.text} className="mdl-color-text--pink-A200">{weekTotal}</strong>
          </td>
        </tr>
      </tbody>
    );
  }
}

class TimesheetCellView extends Component {
{'fraction_non_alphanumeric': 0.14671547972646268, 'fraction_numerical': 0.006769358292463909, 'mean_word_length': 2.0738853503184713, 'pattern_counts': {'":': 0, '<': 131, '<?xml version=': 0, '>': 144, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6252414', 'n_tokens_mistral': 4435, 'n_tokens_neox': 4281, 'n_words': 747}