diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/performanceHistoryApp/src/components')
10 files changed, 211 insertions, 80 deletions
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx index c62698630..ca00d8214 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx @@ -29,17 +29,19 @@ import { createAdaptiveModulationProperties, createAdaptiveModulationActions } f import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; import ToggleContainer from './toggleContainer'; -import { SetSubViewAction } from '../actions/toggleActions'; +import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; const mapProps = (state: IApplicationStoreState) => ({ adaptiveModulationProperties: createAdaptiveModulationProperties(state), - currentView: state.performanceHistory.subViews.adaptiveModulation, - + currentView: state.performanceHistory.subViews.adaptiveModulation.subView, + isFilterVisible: state.performanceHistory.subViews.adaptiveModulation.isFilterVisible, + existingFilter: state.performanceHistory.adaptiveModulation.filter }); const mapDisp = (dispatcher: IDispatcher) => ({ adaptiveModulationActions: createAdaptiveModulationActions(dispatcher.dispatch), setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("adaptiveModulation", value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("adaptiveModulation", value)) }, }); type AdaptiveModulationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -52,6 +54,11 @@ const AdaptiveModulationTable = MaterialTable as MaterialTableCtorType<AdaptiveM * The Component which gets the adaptiveModulation data from the database based on the selected time period. */ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComponentProps>{ + + onToggleFilterButton = () => { + this.props.toggleFilterButton(!this.props.isFilterVisible); + } + onChange = (value: "chart" | "table") => { this.props.setSubView(value); } @@ -66,10 +73,7 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, { property: "timeStamp", title: "End Time", type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", customControl: ({ rowData }) => { - const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); - return <div >{suspectIntervalFlag} </div> - } + property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean }]; chartPagedData.datasets.forEach(ds => { @@ -78,9 +82,9 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp return ( <> - <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.adaptiveModulationProperties.filter} onFilterChanged={this.props.adaptiveModulationActions.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} - <AdaptiveModulationTable idProperty={"_id"} columns={adaptiveModulationColumns} {...properties} {...actions} /> + <AdaptiveModulationTable stickyHeader idProperty={"_id"} columns={adaptiveModulationColumns} {...properties} {...actions} /> </ToggleContainer> </> ); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx new file mode 100644 index 000000000..280a1dac8 --- /dev/null +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx @@ -0,0 +1,50 @@ +import * as React from 'react'; +import { makeStyles, TextField, Typography, Select, MenuItem, FormControl, InputLabel } from '@material-ui/core'; + +const styles = makeStyles({ + filterInput: { + marginRight: "15px" + }, + filterContainer: { + marginLeft: "90px" + } +}); + +type filterProps = { isVisible: boolean, onFilterChanged: (property: string, filterTerm: string) => void, filters: any }; +//put chart visibility into redux +const ChartFilter: React.FunctionComponent<filterProps> = (props) => { + + //get filter from redux state (just pass da object?), onfilterchange + const classes = styles(); + + return ( + <> + { + props.isVisible && + <div className={classes.filterContainer}> + <TextField className={classes.filterInput} label="Radio Signal" value={props.filters.radioSignalId || ''} onChange={(event) => props.onFilterChanged("radioSignalId", event.target.value)} InputLabelProps={{ + shrink: true, + }} /> + <TextField className={classes.filterInput} label="Scanner ID" value={props.filters.scannerId || ''} onChange={(event) => props.onFilterChanged("scannerId", event.target.value)} InputLabelProps={{ + shrink: true, + }} /> + <TextField className={classes.filterInput} label="End Time" value={props.filters.timeStamp || ''} onChange={(event) => props.onFilterChanged("timeStamp", event.target.value)} InputLabelProps={{ + shrink: true, + }} /> + <FormControl> + <InputLabel id="suspect-interval-label" shrink>Suspect Interval</InputLabel> + + <Select labelId="suspect-interval-label" value={props.filters.suspectIntervalFlag || ''} onChange={(event) => props.onFilterChanged("suspectIntervalFlag", event.target.value as string)}> + <MenuItem value={undefined}>None</MenuItem> + <MenuItem value={"true"}>true</MenuItem> + <MenuItem value={"false"}>false</MenuItem> + </Select> + </FormControl> + </ div> + } + </> + ) + +} + +export default ChartFilter;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx index 7489757f5..a8c6ed78d 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx @@ -28,19 +28,22 @@ import { IDataSet, IDataSetsObject } from '../models/chartTypes'; import { createCrossPolarDiscriminationProperties, createCrossPolarDiscriminationActions } from '../handlers/crossPolarDiscriminationHandler'; import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; -import { SetSubViewAction } from '../actions/toggleActions'; +import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; import ToggleContainer from './toggleContainer'; const mapProps = (state: IApplicationStoreState) => ({ crossPolarDiscriminationProperties: createCrossPolarDiscriminationProperties(state), - currentView: state.performanceHistory.subViews.CPD, + currentView: state.performanceHistory.subViews.CPD.subView, + isFilterVisible: state.performanceHistory.subViews.CPD.isFilterVisible, + existingFilter: state.performanceHistory.crossPolarDiscrimination.filter }); const mapDisp = (dispatcher: IDispatcher) => ({ crossPolarDiscriminationActions: createCrossPolarDiscriminationActions(dispatcher.dispatch), setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("CPD", value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("CPD", value)) }, }); type CrossPolarDiscriminationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -54,6 +57,10 @@ const CrossPolarDiscriminationTable = MaterialTable as MaterialTableCtorType<Cro */ class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscriminationComponentProps>{ + onToggleFilterButton = () => { + this.props.toggleFilterButton(!this.props.isFilterVisible); + } + onChange = (value: "chart" | "table") => { this.props.setSubView(value); } @@ -69,10 +76,7 @@ class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscri { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, { property: "timeStamp", title: "End Time", type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", customControl: ({ rowData }) => { - const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); - return <div >{suspectIntervalFlag} </div> - } + property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean } ]; @@ -81,9 +85,9 @@ class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscri }); return ( <> - <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.crossPolarDiscriminationProperties.filter} onFilterChanged={this.props.crossPolarDiscriminationActions.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} - <CrossPolarDiscriminationTable idProperty={"_id"} columns={cpdColumns} {...properties} {...actions} /> + <CrossPolarDiscriminationTable stickyHeader idProperty={"_id"} columns={cpdColumns} {...properties} {...actions} /> </ToggleContainer> </> ); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx index 8327ec4ed..b0aebd208 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx @@ -17,7 +17,7 @@ */ import * as React from 'react'; -import { MenuItem, Select, FormControl } from '@material-ui/core'; +import { MenuItem, Select, FormControl, Typography } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; import { LtpIds } from 'models/availableLtps'; import { Loader } from '../../../../framework/src/components/material-ui'; @@ -43,10 +43,11 @@ const useStyles = makeStyles(theme => ({ "display": "flex", "alignItems": "center", "justifyContent": "center", + flexDirection: "column" } })); -type LtpSelectionProps = { selectedNE: string, finishedLoading: boolean, selectedLtp: string, availableLtps: LtpIds[], onChangeLtp(event: React.ChangeEvent<HTMLSelectElement>): void, selectedTimePeriod: string, onChangeTimePeriod(event: React.ChangeEvent<HTMLSelectElement>): void }; +type LtpSelectionProps = { selectedNE: string, error?: string, finishedLoading: boolean, selectedLtp: string, availableLtps: LtpIds[], onChangeLtp(event: React.ChangeEvent<HTMLSelectElement>): void, selectedTimePeriod: string, onChangeTimePeriod(event: React.ChangeEvent<HTMLSelectElement>): void }; export const LtpSelection = (props: LtpSelectionProps) => { const classes = useStyles(); @@ -69,18 +70,29 @@ export const LtpSelection = (props: LtpSelectionProps) => { </Select> </FormControl> { - !props.finishedLoading && + !props.finishedLoading && !props.error && <div className={classes.center}> <Loader /> <h3>Collecting Data ...</h3> </div> } { - props.selectedLtp === "-1" && props.finishedLoading && + props.finishedLoading && props.error && <div className={classes.center}> - <h3>Please select a LTP</h3> + <h3>Data couldn't be loaded</h3> + <Typography variant="body1">{props.error}</Typography> </div> } + { + props.selectedLtp === "-1" && props.finishedLoading && !props.error && (props.availableLtps.length > 0 ? + <div className={classes.center}> + <h3>Please select a LTP</h3> + </div> + : + <div className={classes.center}> + <h3>No performance data found</h3> + </div>) + } </>) } diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx index d0caa6fd6..0a4f03273 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx @@ -28,16 +28,19 @@ import { createPerformanceDataProperties, createPerformanceDataActions } from '. import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; import ToggleContainer from './toggleContainer'; -import { SetSubViewAction } from '../actions/toggleActions'; +import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; const mapProps = (state: IApplicationStoreState) => ({ performanceDataProperties: createPerformanceDataProperties(state), - currentView: state.performanceHistory.subViews.performanceDataSelection, + currentView: state.performanceHistory.subViews.performanceData.subView, + isFilterVisible: state.performanceHistory.subViews.performanceData.isFilterVisible, + existingFilter: state.performanceHistory.performanceData.filter }); const mapDisp = (dispatcher: IDispatcher) => ({ performanceDataActions: createPerformanceDataActions(dispatcher.dispatch), setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("performanceData", value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("performanceData", value)) } }); type PerformanceDataComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -51,8 +54,8 @@ const PerformanceDataTable = MaterialTable as MaterialTableCtorType<PerformanceD */ class PerformanceDataComponent extends React.Component<PerformanceDataComponentProps>{ - onChange = (value: "chart" | "table") => { - this.props.setSubView(value); + onToggleFilterButton = () => { + this.props.toggleFilterButton(!this.props.isFilterVisible); } render(): JSX.Element { @@ -65,10 +68,7 @@ class PerformanceDataComponent extends React.Component<PerformanceDataComponentP { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, { property: "timeStamp", title: "End Time", type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", customControl: ({ rowData }) => { - const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); - return <div >{suspectIntervalFlag} </div> - } + property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean } ]; @@ -77,9 +77,9 @@ class PerformanceDataComponent extends React.Component<PerformanceDataComponentP }); return ( <> - <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + <ToggleContainer onToggleFilterButton={() => this.props.toggleFilterButton(!this.props.isFilterVisible)} existingFilter={this.props.existingFilter} onFilterChanged={this.props.performanceDataActions.onFilterChanged} selectedValue={this.props.currentView} showFilter={this.props.isFilterVisible} onChange={this.props.setSubView}> {lineChart(chartPagedData)} - <PerformanceDataTable idProperty={"_id"} columns={performanceColumns} {...properties} {...actions} /> + <PerformanceDataTable stickyHeader idProperty={"_id"} columns={performanceColumns} {...properties} {...actions} /> </ToggleContainer> </> ); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx index 4b0a835d4..ae729306b 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx @@ -28,19 +28,20 @@ import { IDataSet, IDataSetsObject } from '../models/chartTypes'; import { createReceiveLevelProperties, createReceiveLevelActions } from '../handlers/receiveLevelHandler'; import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; -import { SetSubViewAction } from '../actions/toggleActions'; +import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; import ToggleContainer from './toggleContainer'; const mapProps = (state: IApplicationStoreState) => ({ receiveLevelProperties: createReceiveLevelProperties(state), - currentView: state.performanceHistory.subViews.receiveLevelDataSelection, - + currentView: state.performanceHistory.subViews.receiveLevel.subView, + isFilterVisible: state.performanceHistory.subViews.receiveLevel.isFilterVisible, + existingFilter: state.performanceHistory.receiveLevel.filter }); const mapDisp = (dispatcher: IDispatcher) => ({ receiveLevelActions: createReceiveLevelActions(dispatcher.dispatch), setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("receiveLevel", value)), - + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("receiveLevel", value)) }, }); type ReceiveLevelComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -54,6 +55,11 @@ const ReceiveLevelTable = MaterialTable as MaterialTableCtorType<ReceiveLevelDat */ class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{ + onToggleFilterButton = () => { + this.props.toggleFilterButton(!this.props.isFilterVisible); + } + + onChange = (value: "chart" | "table") => { this.props.setSubView(value); } @@ -68,10 +74,7 @@ class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{ { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, { property: "timeStamp", title: "End Time", type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", customControl: ({ rowData }) => { - const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); - return <div >{suspectIntervalFlag} </div> - } + property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean } ]; @@ -81,9 +84,9 @@ class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{ return ( <> - <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.receiveLevelProperties.filter} onFilterChanged={this.props.receiveLevelActions.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} - <ReceiveLevelTable idProperty={"_id"} columns={receiveLevelColumns} {...properties} {...actions} /> + <ReceiveLevelTable stickyHeader idProperty={"_id"} columns={receiveLevelColumns} {...properties} {...actions} /> </ToggleContainer> </> ); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx index ba480d57d..00eba5fe3 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx @@ -28,17 +28,20 @@ import { IDataSet, IDataSetsObject } from '../models/chartTypes'; import { createSignalToInterferenceProperties, createSignalToInterferenceActions } from '../handlers/signalToInterferenceHandler'; import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; -import { SetSubViewAction } from '../actions/toggleActions'; +import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; import ToggleContainer from './toggleContainer'; const mapProps = (state: IApplicationStoreState) => ({ signalToInterferenceProperties: createSignalToInterferenceProperties(state), - currentView: state.performanceHistory.subViews.SINR, + currentView: state.performanceHistory.subViews.SINR.subView, + isFilterVisible: state.performanceHistory.subViews.SINR.isFilterVisible, + existingFilter: state.performanceHistory.signalToInterference.filter }); const mapDisp = (dispatcher: IDispatcher) => ({ signalToInterferenceActions: createSignalToInterferenceActions(dispatcher.dispatch), setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("SINR", value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("SINR", value)) }, }); type SignalToInterferenceComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -52,6 +55,10 @@ const SignalToInterferenceTable = MaterialTable as MaterialTableCtorType<SignalT */ class SignalToInterferenceComponent extends React.Component<SignalToInterferenceComponentProps>{ + onToggleFilterButton = () => { + this.props.toggleFilterButton(!this.props.isFilterVisible); + } + onChange = (value: "chart" | "table") => { this.props.setSubView(value); } @@ -67,10 +74,7 @@ class SignalToInterferenceComponent extends React.Component<SignalToInterference { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, { property: "timeStamp", title: "End Time", type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", customControl: ({ rowData }) => { - const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); - return <div >{suspectIntervalFlag} </div> - } + property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean } ]; @@ -79,9 +83,9 @@ class SignalToInterferenceComponent extends React.Component<SignalToInterference }); return ( <> - <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.signalToInterferenceProperties.filter} onFilterChanged={this.props.signalToInterferenceActions.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} - <SignalToInterferenceTable idProperty={"_id"} columns={sinrColumns} {...properties} {...actions} + <SignalToInterferenceTable stickyHeader idProperty={"_id"} columns={sinrColumns} {...properties} {...actions} /> </ToggleContainer> </> diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx index 28f75d84c..c0d12ee47 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx @@ -29,16 +29,20 @@ import { createTemperatureProperties, createTemperatureActions } from '../handle import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; import ToggleContainer from './toggleContainer'; -import { SetSubViewAction } from '../actions/toggleActions'; +import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; const mapProps = (state: IApplicationStoreState) => ({ temperatureProperties: createTemperatureProperties(state), - currentView: state.performanceHistory.subViews.temperatur, + currentView: state.performanceHistory.subViews.temperatur.subView, + isFilterVisible: state.performanceHistory.subViews.temperatur.isFilterVisible, + existingFilter: state.performanceHistory.temperature.filter }); const mapDisp = (dispatcher: IDispatcher) => ({ temperatureActions: createTemperatureActions(dispatcher.dispatch), setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("Temp", value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("Temp", value)) }, + }); type TemperatureComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -52,6 +56,11 @@ const TemperatureTable = MaterialTable as MaterialTableCtorType<TemperatureDataT */ class TemperatureComponent extends React.Component<TemperatureComponentProps>{ + onToggleFilterButton = () => { + this.props.toggleFilterButton(!this.props.isFilterVisible); + } + + onChange = (value: "chart" | "table") => { this.props.setSubView(value); } @@ -66,10 +75,7 @@ class TemperatureComponent extends React.Component<TemperatureComponentProps>{ { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, { property: "timeStamp", title: "End Time", type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", customControl: ({ rowData }) => { - const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); - return <div >{suspectIntervalFlag} </div> - } + property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean } ]; @@ -79,9 +85,9 @@ class TemperatureComponent extends React.Component<TemperatureComponentProps>{ return ( <> - <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.temperatureProperties.filter} onFilterChanged={this.props.temperatureActions.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} - <TemperatureTable idProperty={"_id"} columns={temperatureColumns} {...properties} {...actions} /> + <TemperatureTable stickyHeader idProperty={"_id"} columns={temperatureColumns} {...properties} {...actions} /> </ToggleContainer> </> ); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx index 97a2006f7..618dddfc8 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx @@ -23,16 +23,34 @@ import BarChartIcon from '@material-ui/icons/BarChart'; import TableChartIcon from '@material-ui/icons/TableChart'; import { makeStyles } from '@material-ui/core'; import Tooltip from '@material-ui/core/Tooltip'; +import ChartFilter from './chartFilter' +import FilterListIcon from '@material-ui/icons/FilterList'; const styles = makeStyles({ - toggleButton: { + toggleButtonContainer: { + display: "flex", alignItems: "center", justifyContent: "center", padding: "10px", + }, + subViewGroup: { + padding: "10px" + }, + filterGroup: { + marginLeft: "10px" } }); -type toggleProps = { selectedValue: string, onChange(value: string): void }; +type filterType = { + onRefresh: () => void; + onHandleRequestSort: (orderBy: string) => void; + onToggleFilter: () => void; + onFilterChanged: (property: string, filterTerm: string) => void; + onHandleChangePage: (page: number) => void; + onHandleChangeRowsPerPage: (rowsPerPage: number | null) => void; +}; + +type toggleProps = { selectedValue: string, onChange(value: string): void, showFilter: boolean, onToggleFilterButton(): void, onFilterChanged: (property: string, filterTerm: string) => void, existingFilter: any }; const ToggleContainer: React.FunctionComponent<toggleProps> = (props) => { @@ -44,22 +62,46 @@ const ToggleContainer: React.FunctionComponent<toggleProps> = (props) => { } }; + const handleFilterChange = (event: React.MouseEvent<HTMLElement>, newView: string) => { + props.onToggleFilterButton(); + }; + const children = React.Children.toArray(props.children); + //hide filter if visible + table + //put current name into state, let container handle stuff itelf, register for togglestate, get right via set name + return ( <> - <ToggleButtonGroup className={classes.toggleButton} size="medium" value={props.selectedValue} exclusive onChange={handleChange}> - <ToggleButton aria-label="display-chart" key={1} value="chart"> - <Tooltip title="Chart"> - <BarChartIcon /> - </Tooltip> - </ToggleButton> - <ToggleButton aria-label="display-table" key={2} value="table"> - <Tooltip title="Table"> - <TableChartIcon /> - </Tooltip> - </ToggleButton> - </ToggleButtonGroup> + <div className={classes.toggleButtonContainer} > + <ToggleButtonGroup className={classes.subViewGroup} size="medium" value={props.selectedValue} exclusive onChange={handleChange}> + <ToggleButton aria-label="display-chart" key={1} value="chart"> + <Tooltip title="Chart"> + <BarChartIcon /> + </Tooltip> + </ToggleButton> + <ToggleButton aria-label="display-table" key={2} value="table"> + <Tooltip title="Table"> + <TableChartIcon /> + </Tooltip> + </ToggleButton> + </ToggleButtonGroup> + + <ToggleButtonGroup className={classes.filterGroup} onChange={handleFilterChange} > + <ToggleButton aria-label="show-filter" selected={props.showFilter as boolean} disabled={props.selectedValue !== "chart"}> + <Tooltip title={props.showFilter ? 'Hide filter' : 'Show available filter'}> + <FilterListIcon /> + </Tooltip> + </ToggleButton> + </ToggleButtonGroup> + + + </div> + { + props.selectedValue === "chart" && + <ChartFilter filters={props.existingFilter} onFilterChanged={props.onFilterChanged} isVisible={props.showFilter} /> + + } {props.selectedValue === "chart" ? children[0] : props.selectedValue === "table" && children[1]} </>); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx index 6fe66d2b5..d89aca052 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx @@ -28,17 +28,22 @@ import { IDataSet, IDataSetsObject } from '../models/chartTypes'; import { createTransmissionPowerProperties, createTransmissionPowerActions } from '../handlers/transmissionPowerHandler'; import { lineChart, sortDataByTimeStamp } from '../utils/chartUtils'; import { addColumnLabels } from '../utils/tableUtils'; -import { SetSubViewAction } from '../actions/toggleActions'; +import { SetSubViewAction, SetFilterVisibility } from '../actions/toggleActions'; import ToggleContainer from './toggleContainer'; const mapProps = (state: IApplicationStoreState) => ({ transmissionPowerProperties: createTransmissionPowerProperties(state), - currentView: state.performanceHistory.subViews.transmissionPower, + currentView: state.performanceHistory.subViews.transmissionPower.subView, + isFilterVisible: state.performanceHistory.subViews.transmissionPower.isFilterVisible, + existingFilter: state.performanceHistory.transmissionPower.filter }); const mapDisp = (dispatcher: IDispatcher) => ({ transmissionPowerActions: createTransmissionPowerActions(dispatcher.dispatch), setSubView: (value: "chart" | "table") => dispatcher.dispatch(new SetSubViewAction("transmissionPower", value)), + toggleFilterButton: (value: boolean) => { dispatcher.dispatch(new SetFilterVisibility("transmissionPower", value)) }, + + }); type TransmissionPowerComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp> & { @@ -52,6 +57,10 @@ const TransmissionPowerTable = MaterialTable as MaterialTableCtorType<Transmissi */ class TransmissionPowerComponent extends React.Component<TransmissionPowerComponentProps>{ + onToggleFilterButton = () => { + this.props.toggleFilterButton(!this.props.isFilterVisible); + } + onChange = (value: "chart" | "table") => { this.props.setSubView(value); } @@ -67,10 +76,7 @@ class TransmissionPowerComponent extends React.Component<TransmissionPowerCompon { property: "scannerId", title: "Scanner ID", type: ColumnType.text }, { property: "timeStamp", title: "End Time", type: ColumnType.text }, { - property: "suspectIntervalFlag", title: "Suspect Interval", customControl: ({ rowData }) => { - const suspectIntervalFlag = rowData["suspectIntervalFlag"].toString(); - return <div >{suspectIntervalFlag} </div> - } + property: "suspectIntervalFlag", title: "Suspect Interval", type: ColumnType.boolean } ]; @@ -80,9 +86,9 @@ class TransmissionPowerComponent extends React.Component<TransmissionPowerCompon return ( <> - <ToggleContainer selectedValue={this.props.currentView} onChange={this.onChange}> + <ToggleContainer onChange={this.onChange} onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.transmissionPowerProperties.filter} onFilterChanged={this.props.transmissionPowerActions.onFilterChanged} selectedValue={this.props.currentView} > {lineChart(chartPagedData)} - <TransmissionPowerTable idProperty={"_id"} columns={transmissionColumns} {...properties} {...actions} /> + <TransmissionPowerTable stickyHeader idProperty={"_id"} columns={transmissionColumns} {...properties} {...actions} /> </ToggleContainer> </> ); |