MyEMS / myems

import React, { Fragment, useEffect, useState } from 'react';

import {

  Breadcrumb,

  BreadcrumbItem,

  Row,

  Col,

  Card,

  CardBody,

  Button,

  ButtonGroup,

  Form,

  FormGroup,

  Input,

  Label,

  Spinner,

} from 'reactstrap';

import Cascader from 'rc-cascader';

import moment from 'moment';

import loadable from '@loadable/component';

import { getCookieValue, createCookie } from '../../../helpers/utils';

import withRedirect from '../../../hoc/withRedirect';

import { withTranslation } from 'react-i18next';

import { toast } from 'react-toastify';

import ButtonIcon from '../../common/ButtonIcon';

import { APIBaseURL } from '../../../config';

import { DateRangePicker } from 'rsuite';

import { endOfDay} from 'date-fns';

const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));

const VirtualMeterBatch = ({ setRedirect, setRedirectUrl, t }) => {

  let current_moment = moment();

  useEffect(() => {

    let is_logged_in = getCookieValue('is_logged_in');

    let user_name = getCookieValue('user_name');

    let user_display_name = getCookieValue('user_display_name');

    let user_uuid = getCookieValue('user_uuid');

    let token = getCookieValue('token');

    if (is_logged_in === null || !is_logged_in) {

      setRedirectUrl(`/authentication/basic/login`);

      setRedirect(true);

    } else {

      //update expires time of cookies

      createCookie('is_logged_in', true, 1000 * 60 * 60 * 8);

      createCookie('user_name', user_name, 1000 * 60 * 60 * 8);

      createCookie('user_display_name', user_display_name, 1000 * 60 * 60 * 8);

      createCookie('user_uuid', user_uuid, 1000 * 60 * 60 * 8);

      createCookie('token', token, 1000 * 60 * 60 * 8);

    }

  });

  // State

  //Query From

  const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);

  const [selectedSpaceID, setSelectedSpaceID] = useState(undefined);

  const [meterList, setMeterList] = useState([]);

  const [cascaderOptions, setCascaderOptions] = useState(undefined);

  const [reportingPeriodDateRange, setReportingPeriodDateRange] = useState([current_moment.clone().startOf('month').toDate(), current_moment.toDate()]);

  const dateRangePickerLocale = {

    sunday: t('sunday'),

    monday: t('monday'),

    tuesday: t('tuesday'),

    wednesday: t('wednesday'),

    thursday: t('thursday'),

    friday: t('friday'),

    saturday: t('saturday'),

    ok: t('ok'),

    today: t('today'),

    yesterday: t('yesterday'),

    hours: t('hours'),

    minutes: t('minutes'),

    seconds: t('seconds'),

    last7Days: t('last7Days')

  };

  const dateRangePickerStyle = { display: 'block', zIndex: 10};

  // buttons

  const [submitButtonDisabled, setSubmitButtonDisabled] = useState(false);

  const [spinnerHidden, setSpinnerHidden] = useState(true);

  const [exportButtonHidden, setExportButtonHidden] = useState(true);

  //Results

  const [detailedDataTableColumns, setDetailedDataTableColumns] = useState(

    [{dataField: 'id', text: t('ID'), sort: true},

    {dataField: 'name', text: t('Name'), sort: true},

    {dataField: 'space', text: t('Space'), sort: true}]);

  const [excelBytesBase64, setExcelBytesBase64] = useState(undefined);

  useEffect(() => {

    let isResponseOK = false;

    fetch(APIBaseURL + '/spaces/tree', {

      method: 'GET',

      headers: {

        "Content-type": "application/json",

        "User-UUID": getCookieValue('user_uuid'),

        "Token": getCookieValue('token')

      },

      body: null,

    }).then(response => {

      console.log(response);

      if (response.ok) {

        isResponseOK = true;

      }

      return response.json();

    }).then(json => {

      console.log(json);

      if (isResponseOK) {

        // rename keys 

        json = JSON.parse(JSON.stringify([json]).split('"id":').join('"value":').split('"name":').join('"label":'));

        setCascaderOptions(json);

        // set the default selected space

        setSelectedSpaceName([json[0]].map(o => o.label));

        setSelectedSpaceID([json[0]].map(o => o.value));

        setSubmitButtonDisabled(false);

        setSpinnerHidden(true);

      } else {

        toast.error(json.description);

      }

    }).catch(err => {

      console.log(err);

    });

  }, []);

  const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';

  let onSpaceCascaderChange = (value, selectedOptions) => {

    setSelectedSpaceName(selectedOptions.map(o => o.label).join('/'));

    setSelectedSpaceID(value[value.length - 1]);

    setMeterList([]);

    setExportButtonHidden(true);

    setSubmitButtonDisabled(false);

  };

  let onReportingPeriodChange = (DateRange) => {

    if(DateRange == null) {

      setReportingPeriodDateRange([null, null]);

    } else {

      if (moment(DateRange[1]).format('HH:mm:ss') == '00:00:00') {

        // if the user did not change time value, set the default time to the end of day

        DateRange[1] = endOfDay(DateRange[1]);

      }

      setReportingPeriodDateRange([DateRange[0], DateRange[1]]);

    }

  };

  let onReportingPeriodClean = event => {

    setReportingPeriodDateRange([null, null]);

  };

  // Handler

  const handleSubmit = e => {

    e.preventDefault();

    console.log('handleSubmit');

    console.log(selectedSpaceID);

    console.log(moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss'))

    console.log(moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'));

    // disable submit button

    setSubmitButtonDisabled(true);

    // show spinner

    setSpinnerHidden(false);

    // hide export button

    setExportButtonHidden(true)

    // Reinitialize tables

    setMeterList([]);

    let isResponseOK = false;

    fetch(APIBaseURL + '/reports/virtualmeterbatch?' +

      'spaceid=' + selectedSpaceID +

      '&reportingperiodstartdatetime=' + moment(reportingPeriodDateRange[0]).format('YYYY-MM-DDTHH:mm:ss') +

      '&reportingperiodenddatetime=' + moment(reportingPeriodDateRange[1]).format('YYYY-MM-DDTHH:mm:ss'), {

      method: 'GET',

      headers: {

        "Content-type": "application/json",

        "User-UUID": getCookieValue('user_uuid'),

        "Token": getCookieValue('token')

      },

      body: null,

    }).then(response => {

      if (response.ok) {

        isResponseOK = true;

      };

      return response.json();

    }).then(json => {

      if (isResponseOK) {

        console.log(json)

        let meters = [];

        if (json['virtual_meters'].length > 0) {

          json['virtual_meters'].forEach((currentMeter, index) => {

            let detailed_value = {};

            detailed_value['id'] = currentMeter['id'];

            detailed_value['name'] = currentMeter['virtual_meter_name'];

            detailed_value['space'] = currentMeter['space_name'];

            detailed_value['costcenter'] = currentMeter['cost_center_name'];

            currentMeter['values'].forEach((currentValue, energyCategoryIndex) => {

              if (typeof currentValue === 'number') {

                detailed_value['a' + energyCategoryIndex] = currentValue;

              } else {

                detailed_value['a' + energyCategoryIndex] = null;

              }

            });

            meters.push(detailed_value);

          });

        };

        setMeterList(meters);

        let detailed_column_list = [];

        detailed_column_list.push({

          dataField: 'id',

          text: t('ID'),

          sort: true

        });

        detailed_column_list.push({

          dataField: 'name',

          text: t('Name'),

          sort: true

        });

        detailed_column_list.push({

          dataField: 'space',

          text: t('Space'),

          sort: true

        });

        json['energycategories'].forEach((currentValue, index) => {

          detailed_column_list.push({

            dataField: 'a' + index,

            text: currentValue['name'] + ' (' + currentValue['unit_of_measure'] + ')',

            sort: true,

            formatter: function (decimalValue) {

              if (typeof decimalValue === 'number') {

                return decimalValue.toFixed(2);

              } else {

                return null;

              }

            }

          })

        });

        setDetailedDataTableColumns(detailed_column_list);

        setExcelBytesBase64(json['excel_bytes_base64']);

        // enable submit button

        setSubmitButtonDisabled(false);

        // hide spinner

        setSpinnerHidden(true);

        // show export button

        setExportButtonHidden(false);

      } else {

        toast.error(json.description)

      }

    }).catch(err => {

      console.log(err);

    });

  };

  const handleExport = e => {

    e.preventDefault();

    const mimeType='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'

    const fileName = 'virtualmeterbatch.xlsx'

    var fileUrl = "data:" + mimeType + ";base64," + excelBytesBase64;

    fetch(fileUrl)

        .then(response => response.blob())

        .then(blob => {

            var link = window.document.createElement("a");

            link.href = window.URL.createObjectURL(blob, { type: mimeType });

            link.download = fileName;

            document.body.appendChild(link);

            link.click();

            document.body.removeChild(link);

        });

  };

  return (

    <Fragment>

      <div>

        <Breadcrumb>

          <BreadcrumbItem>{t('Meter Data')}</BreadcrumbItem><BreadcrumbItem active>{t('Virtual Meter Batch Analysis')}</BreadcrumbItem>

        </Breadcrumb>

      </div>

      <Card className="bg-light mb-3">

        <CardBody className="p-3">

          <Form onSubmit={handleSubmit}>

            <Row form>

              <Col xs={6} sm={3}>

                <FormGroup className="form-group">

                  <Label className={labelClasses} for="space">

                    {t('Space')}

                  </Label>

                  <br />

                  <Cascader options={cascaderOptions}

                    onChange={onSpaceCascaderChange}

                    changeOnSelect

                    expandTrigger="hover">

                    <Input value={selectedSpaceName || ''} readOnly />

                  </Cascader>

                </FormGroup>

              </Col>

              <Col xs={6} sm={3}>

                <FormGroup className="form-group">

                  <Label className={labelClasses} for="reportingPeriodDateRangePicker">{t('Reporting Period')}</Label>

                  <br/>

                  <DateRangePicker

                    id='reportingPeriodDateRangePicker'

                    format="yyyy-MM-dd HH:mm:ss"

                    value={reportingPeriodDateRange}

                    onChange={onReportingPeriodChange}

                    size="md"

                    style={dateRangePickerStyle}

                    onClean={onReportingPeriodClean}

                    locale={dateRangePickerLocale}

                    placeholder={t("Select Date Range")}

                  />

                </FormGroup>

              </Col>

              <Col xs="auto">

                <FormGroup>

                  <br></br>

                  <ButtonGroup id="submit">

                    <Button color="success" disabled={submitButtonDisabled} >{t('Submit')}</Button>

                  </ButtonGroup>

                </FormGroup>

              </Col>

              <Col xs="auto">

                <FormGroup>

                  <br></br>

                  <Spinner color="primary" hidden={spinnerHidden}  />

                </FormGroup>

              </Col>

              <Col xs="auto">

                  <br></br>

                  <ButtonIcon icon="external-link-alt" transform="shrink-3 down-2" color="falcon-default" 

                  hidden={exportButtonHidden}

                  onClick={handleExport} >

                    {t('Export')}

                  </ButtonIcon>

              </Col>

            </Row>

          </Form>

        </CardBody>

      </Card>

      <DetailedDataTable data={meterList} title={t('Detailed Data')} columns={detailedDataTableColumns} pagesize={50} >

      </DetailedDataTable>

    </Fragment>

  );

};

export default withTranslation()(withRedirect(VirtualMeterBatch));