From f380b1ea629c5678b51c1bf47696eafa5410f1c1 Mon Sep 17 00:00:00 2001
From: Mattia Mancini <mancini@astron.nl>
Date: Wed, 24 Oct 2018 14:48:44 +0000
Subject: [PATCH] OSB-29: fixed padding of the station statistics
---
.../src/components/StationStatistics.js | 87 +++++++++++++------
1 file changed, 60 insertions(+), 27 deletions(-)
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js
index 41f73ac5791..24208ae6b1b 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/StationStatistics.js
@@ -1,12 +1,22 @@
import React, {Component} from 'react';
import AutoLoadWrapper from '../utils/autoLoader.js'
import ReactVegaLite from 'react-vega-lite'
-import {Form, Input} from 'reactstrap';
+import {
+ Navbar,
+ Nav,
+ NavItem,
+ Input,
+ NavbarBrand
+} from 'reactstrap';
import {connect} from 'react-redux';
import {setStationStatisticsTestType, setStationStatisticsAveragingWindow} from '../redux/actions/landingPageActions'
class ToolBarC extends Component {
+ constructor(props){
+ super(props);
+ this.state = {isNavbarCollapsed: true};
+ }
setAveragingWindow(e) {
this.props.setStationStatisticsAveragingWindow(e.target.value);
}
@@ -14,29 +24,41 @@ class ToolBarC extends Component {
setTestType(e) {
this.props.setStationStatisticsTestType(e.target.value);
}
+
+ toggle(){
+ this.setState({
+ isNavbarCollapsed: !this.state.isNavbarCollapsed
+ });
+ }
+
render() {
- return (<div className="sts-toolbar">
- <Form inline>
- <select className="form-control custom-select custom-select-sm" id="selected-group" value={this.props.test_type} onChange={(e) => this.setTestType(e)} style={{
- width: 'auto'
- }}>
- <option value="B">Both test types</option>
- <option value="R">RTSM only</option>
- <option value="S">StationTest only</option>
- </select>
- <Input type="select" className="form-control custom-select custom-select-sm" style={{
- top: "0rem !important"
- }} onChange={(e) => this.setAveragingWindow(e)} value={this.props.averaging_window}>
- <option value={1}>day</option>
- <option value={7}>week</option>
- <option value={30}>month</option>
- </Input>
- <Input type="select" className="form-control custom-select custom-select-sm" onChange={(e) => this.props.switchHistogramEvent(e)} value={this.props.histogramType}>
- <option value="per_error_type">per error type</option>
- <option value="per_station">per station</option>
- </Input>
- </Form>
- </div>);
+ return (
+ <Nav className="ml-auto" auto>
+ <NavItem>
+ <select className="form-control custom-select custom-select-sm" id="selected-group" value={this.props.test_type} onChange={(e) => this.setTestType(e)} style={{
+ width: 'auto'
+ }}>
+ <option value="B">Both test types</option>
+ <option value="R">RTSM only</option>
+ <option value="S">StationTest only</option>
+ </select>
+ </NavItem>
+ <NavItem>
+ <Input type="select" className="form-control custom-select custom-select-sm" style={{
+ top: "0rem !important"
+ }} onChange={(e) => this.setAveragingWindow(e)} value={this.props.averaging_window}>
+ <option value={1}>day</option>
+ <option value={7}>week</option>
+ <option value={30}>month</option>
+ </Input>
+ </NavItem>
+ <NavItem>
+ <Input type="select" className="form-control custom-select custom-select-sm" onChange={(e) => this.props.switchHistogramEvent(e)} value={this.props.histogramType}>
+ <option value="per_error_type">per error type</option>
+ <option value="per_station">per station</option>
+ </Input>
+ </NavItem>
+ </Nav>);
}
}
@@ -166,10 +188,21 @@ class StationStatisticsC extends Component {
}
return (<React.Fragment>
- <h5 className="react-grid-item-header">
- Station statistics
- <ToolBar histogramType={this.state.histogramType} switchHistogramEvent={e => this.setState({histogramType: e.target.value})}/>
- </h5>
+ <Navbar
+ className="react-grid-item-header justify-content-between"
+ style={{
+ padding: "0"
+ }}>
+ <NavbarBrand style={{
+ padding: "0"
+ }}>
+ <h5 className="react-grid-item-header">
+ Station statistics</h5>
+ </NavbarBrand>
+ <ToolBar style={{
+ padding: "0"
+ }} histogramType={this.state.histogramType} switchHistogramEvent={e => this.setState({histogramType: e.target.value})}/>
+ </Navbar>
<div className="react-grid-item-body" id="plot" ref={this.ref}>
<ReactVegaLite spec={spec} data={data} enableHover={true}/>
</div>
--
GitLab