diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/MultiSelectDropdown.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/MultiSelectDropdown.js
index 2dee653169fd2a6dd2dcb784c24cee21e1b801cc..ae32feaab32cdb0fd55bd3c53c4e72d484316fb6 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/MultiSelectDropdown.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/components/MultiSelectDropdown.js
@@ -7,11 +7,12 @@ class SelectableOption extends Component {
selectedItem = () => {this.props.onSelectedItem(this.props.value)}
render(){
- const selectMark = this.props.isSelected ? <IsSelectIcon style={{float: "right", marginTop:".2em"}}/> : undefined
+ const selectMark = this.props.isSelected ? <IsSelectIcon style={{marginTop: '.2em', float: 'right'}}/> : undefined
const jsx = (
- <DropdownItem onClick={this.selectedItem}>
- <span>{this.props.children}</span>
+ <DropdownItem onClick={this.selectedItem} style={{float: 'left'}}>
{selectMark}
+ <span>{this.props.children}</span>
+
</DropdownItem>
)
return jsx
@@ -28,13 +29,21 @@ export class MultiSelectDropdown extends Component{
}
}
// Toggle the dropdown state
- toggle = () => this.setState({isOpen:!this.state.isOpen})
+ toggle = () => {
+
+ this.setState({isOpen:!this.state.isOpen})
+ }
itemSelected = (e) => {
- const newSelectedItems = this.state.selectedItems
- newSelectedItems[e] = !newSelectedItems[e]
- this.setState({selectedItems: newSelectedItems})
- this.props.onSelectionChange(this.getSelectedItemsList())
+ if (e === 'all'){
+ this.setState({selectedItems: {}})
+ this.props.onSelectionChange([])
+ }else{
+ const newSelectedItems = this.state.selectedItems
+ newSelectedItems[e] = !newSelectedItems[e]
+ this.setState({selectedItems: newSelectedItems})
+ this.props.onSelectionChange(this.getSelectedItemsList())
+ }
}
getSelectedItemsList () {
@@ -45,10 +54,11 @@ export class MultiSelectDropdown extends Component{
const selectedItemsList = this.getSelectedItemsList()
if(selectedItemsList.length === 0 ){
return this.props.placeHolder;
- }else if(selectedItemsList.length === 1){
- return selectedItemsList[0]
+ }else if(selectedItemsList.length <= 4){
+ return selectedItemsList.join(', ')
}else {
- return `${selectedItemsList[0]}, ...`
+ const firstFour = selectedItemsList.slice(0, 4)
+ return firstFour.join(', ') + ', ...'
}
}
@@ -58,9 +68,24 @@ export class MultiSelectDropdown extends Component{
return false
}
+ componentDidMount() {
+ const selectedItems = this.state.selectedItems
+ let update = false
+ if(this.props.selectedItems === undefined) return
+ for(let item of this.props.selectedItems){
+ if(!selectedItems.hasOwnProperty(item) || !selectedItems[item] ){
+ selectedItems[item] = true
+ update = true
+ }
+ }
+
+ if(update) this.setState({selectedItems: selectedItems})
+ }
render(){
- const options = this.props.options.map((item, key) => <SelectableOption key={key} value={item.value} isSelected={this.isItemSelected(item.value)} onSelectedItem={this.itemSelected}>{item.label}</SelectableOption>)
+ let allOptions = [{value:'all', label:'<ALL>'}].concat(this.props.options)
+ let options = allOptions.map((item, key) => <SelectableOption key={key} value={item.value} isSelected={this.isItemSelected(item.value)} onSelectedItem={this.itemSelected}>{item.label}</SelectableOption>)
+
const jsx = (
<Dropdown isOpen={this.state.isOpen} toggle={this.toggle} className={this.props.className}>
<DropdownToggle caret>
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js
index 9785ecb51e842800f757518cc28504aac8bbbdbd..65a8e0d0988ff1c7a27a0115c819fb96ecfd2849 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/pages/LandingPage.js
@@ -81,6 +81,7 @@ class ToolBarC extends Component {
className="form-input"
placeHolder="All"
options={errorTypes}
+ selectedItems={this.props.selectedErrorTypes}
onSelectionChange={(e)=> this.onSelectionErrorTypes(e)}/>
</Form>
</div>);
@@ -115,7 +116,7 @@ class LandingPageC extends Component {
errors_only: this.props.errorsOnly,
n_station_tests: 4,
n_rtsm: 4,
- error_types: this.props.errorTypes
+ error_types: this.props.selectedErrorTypes
});
return `${url}?${parametersString}`;
@@ -131,7 +132,7 @@ class LandingPageC extends Component {
// ---- Optional parameters
station_group: this.props.selectedStationGroup,
errors_only: this.props.errorsOnly,
- error_types: this.props.errorTypes
+ error_types: this.props.selectedErrorTypes
});
return `${url}?${parametersString}`;
@@ -147,7 +148,7 @@ class LandingPageC extends Component {
// ---- Optional parameters
parameters.station_group = this.props.selectedStationGroup
parameters.errors_only = this.props.errorsOnly
- parameters.error_types = this.props.errorTypes
+ parameters.error_types = this.props.selectedErrorTypes
const parametersString = composeQueryString(parameters)
return `${url}&${parametersString}`;
@@ -172,7 +173,7 @@ class LandingPageC extends Component {
parameters.errors_only = this.props.errorsOnly
parameters.station_group = this.props.selectedStationGroup
parameters.test_type = test_type
- parameters.error_types = this.props.errorTypes
+ parameters.error_types = this.props.selectedErrorTypes
const parametersString = composeQueryString(parameters)
return `${url}&${parametersString}`;
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/mainFilters.js b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/mainFilters.js
index 97134b276e30b97d798414dfbb15e5552e977d5a..ef52320124f903e15fc190f904b747a0614ea1c8 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/mainFilters.js
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/redux/reducers/mainFilters.js
@@ -11,7 +11,7 @@ const initialState = {
period: 7, // days
startDate: moment().subtract(7, 'days'),
endDate: moment(),
- errorTypes: []
+ selectedErrorTypes: []
};
@@ -77,7 +77,7 @@ export default function(state = initialState, action) {
return {
...state,
- errorTypes: type_list
+ selectedErrorTypes: type_list
}
}
default:
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.css
index 8299bf97e06b92469b9cfc22cb925a0aa0cad2fa..a918e9a86f104bbf038ef21050bf4421c2a0dd8d 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.css
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.css
@@ -110,3 +110,6 @@
background-color: white !important;
color: black !important;
border: none; }
+
+.form-input button:hover {
+ background-color: #e1e1e1 !important; }
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.scss b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.scss
index ca65f46782ddabbfbbff2e3b94441d32ad8dbf38..5674f114c5e8fe43173fca7b90c5c4838d9a5407 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.scss
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar-styles.scss
@@ -129,3 +129,7 @@ $griditem-color: $secondary-dark;
color: black !important;
border: none;
}
+
+.form-input button:hover {
+ background-color: $secondary-light !important;
+}
diff --git a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar.css b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar.css
index 255b22d2bc9caf6463807d9755cf668c03119adf..659512c93c48ee55f795dd187646f978e2bc1d1b 100644
--- a/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar.css
+++ b/LCU/Maintenance/MDB_WebView/maintenancedb_view/src/themes/lofar.css
@@ -6429,3 +6429,6 @@ a.text-dark:hover, a.text-dark:focus {
background-color: white !important;
color: black !important;
border: none; }
+
+.form-input button:hover {
+ background-color: #e1e1e1 !important; }