gistfile1.txt

import React from 'react';
import CSSModules from 'react-css-modules';
import style from './terminalReport.less';
import ActionBar from "components/actionBar";
import Title from "components/title";
import moment from "moment/moment";
import { connect } from "react-redux";
import { ActionCreators } from "actions";
import { bindActionCreators } from "redux";
import Loading from "components/loading";
import {formatNum, sendRequest} from 'lib/helpers';
import * as Printer from 'lib/printer';

import i18n from "i18n";

@CSSModules(style, { allowMultiple: true, handleNotFoundStyleName: 'log' })
class Row extends React.PureComponent {
	render() {
		return (
			<div styleName={"tableRow " + this.props.rowClass || ""}>
				<div styleName={"cell " + this.props.cellClass || ""}>{this.props.title}</div>
				<div styleName={"cell " + this.props.cellClass || ""}>{this.props.value}</div>
			</div>);
	}
}

@connect(mapStateToProps, mapDispatchToProps)
@CSSModules(style, {allowMultiple: true, handleNotFoundStyleName: 'log'})
export default class TerminalReport extends React.Component
{
	constructor (props)
	{
		super(props);
		this.state = {
			amountSumByType: {},
			totalSum: formatNum(0, 2),
			//totalPlusOrMinus: '+',
			startDate: moment(),
			endDate: moment(),
			loading: true,
			createTime: null,
			createTimePrint: null,
			startTimePrint: null,
			endTimePrint: null,
			selectedShop: null,
			payoutsByTillUser: [],
		};
		this.state.startDatePrint = this.state.startDate.format('DD.MM.YYYY');
		this.state.endDatePrint = this.state.endDate.format('DD.MM.YYYY');
	}

	componentDidMount()
	{
		if (this.props.user.shopList) {
			this.state.selectedShop = this.props.user.shopList[0].id_string;
		}
		this.loadReport();
	}

	componentDidUpdate(prevProps, prevState)
	{
		if (this.props.shop !== prevProps.shop) {
			this.loadReport();
		}
	}

	handleChangeStart (date)
	{
		this.setState(
			{
				startDate: date,
				startDatePrint: date.format('DD.MM.YYYY'),
			},
			() => {
				this.loadReport();
			}
		);
	}

	handleChangeEnd (date)
	{
		this.setState(
			{
				endDate: date,
				endDatePrint: date.format('DD.MM.YYYY'),
			},
			() => {
				this.loadReport();
			}
		);
	}

	handleChangeShop (shop)
	{
		this.setState(
			{
				selectedShop: shop,
			},
			() => {
				this.loadReport();
			}
		);
	}

	async loadShopList() {
		let url = this.props.account.dataUrl; //from redux store;
		let endPoint = "/backend/report/get-shops";
		try {
			let data = await sendRequest(url + endPoint);
			//console.log(data);
			return data;
		}
		catch (e) {
			this.props.history.push("/logout");
		}
	}

	async loadReport() {
		this.setState({ loading: true });
		let url = this.props.account.dataUrl; //from redux store;
		url += "/backend/report/get-" + (this.props.shop ? 'shop' : 'terminal') + "-report/";
		url += this.state.startDate.format("YYYY-MM-DD");
		url += "/";
		url += this.state.endDate.format("YYYY-MM-DD");
		if (this.state.selectedShop) {
			url += "/";
			url += this.state.selectedShop;
		}
		try {
			let data = await sendRequest(url);
			let time = moment(data.timestamp);
			let amountSumByType = data.amounts;
			let amountTotal = amountSumByType['pay-in'].amount - amountSumByType['pay-out'].amount;
			amountSumByType['win'].amount += amountSumByType['refund'].amount;
			Object.keys(amountSumByType).forEach((key) => {
				let row = amountSumByType[key];
				row.type = key;
				row.amountString = formatNum(row.amount, 2);
				//row.plusOrMinus = row.amount < 0 ? '-' : '+';
				//amountTotal += row.amount;
			});
			if (data.payouts_by_till_user) {
				data.payouts_by_till_user.forEach(payout => {
					payout.amountString = formatNum(payout.amount, 2);
				});
			}
			this.setState({
				amountSumByType: amountSumByType,
				totalSum: formatNum(amountTotal, 2),
				//totalPlusOrMinus: amountTotal < 0 ? '-' : '+',
				payoutsByTillUser: data.payouts_by_till_user || [],
				loading: false,
				createTime: time,
				createTimePrint: time.format('DD.MM.YYYY HH:mm:ss'),
				startTimePrint: moment(data.start_time).format('DD.MM.YYYY HH:mm:ss'),
				endTimePrint: moment(data.end_time).format('DD.MM.YYYY HH:mm:ss'),
			});
		}
		catch (e) {
			this.props.history.push("/logout");
		}
	}

	printReport ()
	{
		this.state.shop = this.props.shop;
		this.state.user = this.props.user;
		Printer.printReport(this.state);
	}

	render() {
		return (
			<div styleName="terminalReport">
				<Title>{this.props.shop ? 'Shop' : 'Terminal'} Report</Title>
				<div className="noPrint">
					<ActionBar
						onShop={(shop) => {
							this.handleChangeShop(shop);
						}}
						onRefresh={() => {
							this.loadReport();
						}}
						onDateRange={(start, end) => {
							//console.log("date range selected", start, end);
							this.loadReport();
						}}
						startDate={this.state.startDate}
						endDate={this.state.endDate}
						handleChangeStart={d => this.handleChangeStart(d)}
						handleChangeEnd={d => this.handleChangeEnd(d)}
					/>
				</div>
				<div className="noScreen">
					<div styleName="row">
						<div styleName="cell">{this.state.startDatePrint}</div>
						<div styleName="cell">bis</div>
						<div styleName="cell">{this.state.endDatePrint}</div>
					</div>
				</div>
				{this.state.loading &&
					<Loading />
				}
				{this.state.loading || (
          <div>
            <div styleName="table">
              <Row
                title={i18n.t("terminalReport.Terminal Einzahlung")}
                value={this.state.amountSumByType["pay-in"].amountString}
              />
              <Row
                title={i18n.t("terminalReport.Auszahlung Guthabenbeleg")}
                value={this.state.amountSumByType["pay-out"].amountString}
              />
              {this.state.payoutsByTillUser.map((payout, index) => {
                return (
                  <Row
                    key={index}
                    title={
                      i18n.t("terminalReport.Auszahlung Mitarbeiter") +
                      " " +
                      payout.till_user_name
                    }
                    value={payout.amountString}
                    cellClass="indent"
                  />
                );
              })}
              <Row
                title={i18n.t("terminalReport.Wetteinsätze")}
                value={this.state.amountSumByType["stake"].amountString}
              />
              <Row
                title={i18n.t("terminalReport.Wettsteuer")}
                value={this.state.amountSumByType["tax"].amountString}
              />
              <Row
                title={i18n.t("terminalReport.Wettstornos")}
                value={this.state.amountSumByType["cancellation"].amountString}
              />
              <Row
                title={i18n.t("terminalReport.Aufbuchung Guthaben")}
                value={this.state.amountSumByType["credit"].amountString}
              />
              <Row
                title={i18n.t("terminalReport.Auszahlung Wettschein")}
                value={this.state.amountSumByType["win"].amountString}
              />
              <div>
                <hr styleName="hr" />
              </div>
              <Row
                title={i18n.t("terminalReport.Kassenstand")}
                value={this.state.totalSum}
                rowClass="totalSum"
              />
              <div styleName="row" className="noPrint">
                <div />
                <div
                  styleName="printButton"
                  onClick={() => {
                    this.printReport();
                  }}
                >
                  {i18n.t("terminalReport.Drucken")}
                </div>
                <div />
              </div>
            </div>
          </div>
        )}
			</div>
		);
	}
}

function mapStateToProps(state) {
	return {
		user: state.user,
		account: state.account
	};
}

//Make actions available as functions in props
function mapDispatchToProps(dispatch) {
	return bindActionCreators(ActionCreators, dispatch);
}