sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx

   1 import * as React from 'react';
   2
   3 import { withRouter, RouteComponentProps } from 'react-router-dom';
   4
   5 import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
   6 import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
   7 import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
   8
   9 import { PerformanceDataType } from '../models/performanceDataType';
  10 import { createPerformanceData15minProperties, createPerformanceData15minActions } from '../handlers/performanceData15minHandler';
  11 import { createPerformanceData24hoursProperties, createPerformanceData24hoursActions } from '../handlers/performanceData24hoursHandler';
  12
  13 const mapProps = (state: IApplicationStoreState) => ({
  14   performanceData15minProperties: createPerformanceData15minProperties(state),
  15   performanceData24hoursProperties: createPerformanceData24hoursProperties(state),
  16 });
  17
  18 const mapDisp = (dispatcher: IDispatcher) => ({
  19   performanceData15minActions: createPerformanceData15minActions(dispatcher.dispatch),
  20   performanceData24hoursActions: createPerformanceData24hoursActions(dispatcher.dispatch),
  21 });
  22
  23 type PerformanceDataComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & {
  24   selectedTimePeriod: string
  25 };
  26
  27 const PerformanceDataTable = MaterialTable as MaterialTableCtorType<PerformanceDataType>;
  28
  29 /**
  30  * The Component which gets the performance data from the database based on the selected time period.
  31  */
  32 class PerformanceDataComponent extends React.Component<PerformanceDataComponentProps>{
  33   render(): JSX.Element {
  34     if (this.props.selectedTimePeriod == "15min") {
  35       return (
  36         <PerformanceDataTable idProperty={"_id"} columns={[
  37           { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
  38           { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
  39           { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
  40           {
  41             property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
  42               const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
  43               return <div >{suspectIntervalFlag} </div>
  44             }
  45           },
  46           { property: "es", title: "ES", type: ColumnType.text, disableFilter: true, disableSorting: true },
  47           { property: "ses", title: "SES", type: ColumnType.text, disableFilter: true, disableSorting: true },
  48           { property: "unavailability", title: "UAS", type: ColumnType.text, disableFilter: true, disableSorting: true },
  49         ]} {...this.props.performanceData15minProperties} {...this.props.performanceData15minActions}
  50         />
  51       );
  52     } else {
  53       return (
  54         <PerformanceDataTable idProperty={"_id"} columns={[
  55           { property: "radio-signal-id", title: "Radio signal", type: ColumnType.text },
  56           { property: "scanner-id", title: "Scanner ID", type: ColumnType.text },
  57           { property: "time-stamp", title: "End Time", type: ColumnType.text, disableFilter: true },
  58           {
  59             property: "suspect-interval-flag", title: "Suspect Interval", type: ColumnType.custom, customControl: ({ rowData }) => {
  60               const suspectIntervalFlag = rowData["suspect-interval-flag"].toString();
  61               return <div >{suspectIntervalFlag} </div>
  62             }
  63           },
  64           { property: "es", title: "ES", type: ColumnType.text, disableFilter: true, disableSorting: true },
  65           { property: "ses", title: "SES", type: ColumnType.text, disableFilter: true, disableSorting: true },
  66           { property: "unavailability", title: "UAS", type: ColumnType.text, disableFilter: true, disableSorting: true },
  67         ]} {...this.props.performanceData24hoursProperties} {...this.props.performanceData24hoursActions}
  68         />
  69       );
  70     }
  71   };
  72 }
  73
  74 export const PerformanceData = withRouter(connect(mapProps, mapDisp)(PerformanceDataComponent));
  75 export default PerformanceData;