Skip to content
Snippets Groups Projects
Commit 91afd108 authored by Remco Tukker's avatar Remco Tukker
Browse files

use year selection buttons instead of a popup with checkboxes

parent 226e9efc
No related branches found
No related tags found
1 merge request!23use year selection buttons instead of a popup with checkboxes
Hide whitespace changes
Inline Side-by-side
compendium_v2/static/bundle.js
+ 1
− 1
View file @ 91afd108
Source diff could not be displayed: it is too large. Options to address this: view the blob.
webapp/src/components/DataPage.tsx
+ 11
− 15
View file @ 91afd108
...@@ -13,21 +13,17 @@ function DataPage({ title, filter, children }: inputProps): ReactElement { ...@@ -13,21 +13,17 @@ function DataPage({ title, filter, children }: inputProps): ReactElement {
<> <>
<OrganizationSidebar /> <OrganizationSidebar />
<Container> <Container>
<Row> <Col xs={9}>
<Col xs={9}> <Row>
<Row> <h3 className="m-4">{title}</h3>
<h3 className="m-5">{title}</h3> </Row>
</Row> <Row>
<Row> {filter}
{children} </Row>
</Row> <Row>
</Col> {children}
<Col xs={3}> </Row>
<div className="sticky-top" style={{ top: '1rem' }}> </Col>
{filter}
</div>
</Col>
</Row>
</Container> </Container>
</> </>
); );
......
webapp/src/components/graphing/Filter.tsx
+ 43
− 44
View file @ 91afd108
import React, {ReactElement} from 'react'; import React, {ReactElement} from 'react';
import {Button, Dropdown, ButtonToolbar} from 'react-bootstrap'; import {Button, Dropdown, ButtonToolbar, ToggleButton, Col} from 'react-bootstrap';
import {FilterSelection} from "../../Schema"; import {FilterSelection} from "../../Schema";
interface inputProps { interface inputProps {
...@@ -7,9 +7,10 @@ interface inputProps { ...@@ -7,9 +7,10 @@ interface inputProps {
filterSelection: FilterSelection filterSelection: FilterSelection
setFilterSelection: React.Dispatch<React.SetStateAction<FilterSelection>> setFilterSelection: React.Dispatch<React.SetStateAction<FilterSelection>>
max1year?: boolean max1year?: boolean
coloredYears?: boolean
} }
function Filter({ filterOptions, filterSelection, setFilterSelection, max1year = false }: inputProps): ReactElement { function Filter({ filterOptions, filterSelection, setFilterSelection, max1year = false, coloredYears = false }: inputProps): ReactElement {
const handleNrenClick = (nren: string) => { const handleNrenClick = (nren: string) => {
if (filterSelection.selectedNrens.includes(nren)) { if (filterSelection.selectedNrens.includes(nren)) {
...@@ -63,51 +64,49 @@ function Filter({ filterOptions, filterSelection, setFilterSelection, max1year = ...@@ -63,51 +64,49 @@ function Filter({ filterOptions, filterSelection, setFilterSelection, max1year =
}); });
return ( return (
<ButtonToolbar className="d-flex justify-content-end gap-2 m-2"> <>
<Col xs={3}>
<Dropdown autoClose="outside"> <Dropdown autoClose="outside" className="m-3">
<Dropdown.Toggle id="nren-dropdown-toggle" variant="compendium">Select NRENs</Dropdown.Toggle> <Dropdown.Toggle id="nren-dropdown-toggle" variant="compendium">Select NRENs</Dropdown.Toggle>
<Dropdown.Menu>
<div className="d-flex fit-max-content">
{grid.map((column, columnIndex) => (
<div key={columnIndex} className="flex-fill">
{column.map((nren) => (
<div className="filter-dropdown-item flex-fill" key={nren} onClick={() => (handleNrenClick(nren))}>
<input
type="checkbox"
checked={filterSelection.selectedNrens.includes(nren)}
readOnly
/> {nren}
</div>
))}
</div>
))}
</div>
<div className="d-flex fit-max-content gap-2 mx-2 mt-3">
<Button variant="compendium" className="flex-fill" onClick={handleSelectAllNrensClick}>Select all NRENs</Button>
<Button variant="compendium" className="flex-fill" onClick={handleDeselectAllNrensClick}>Unselect all NRENs</Button>
</div>
</Dropdown.Menu>
</Dropdown>
{ filterOptions.availableYears.length > 0 &&
<Dropdown autoClose="outside">
<Dropdown.Toggle id="year-dropdown-toggle" variant="compendium">Select years</Dropdown.Toggle>
<Dropdown.Menu> <Dropdown.Menu>
{filterOptions.availableYears.sort().map((year) => ( <div className="d-flex fit-max-content">
<div className="filter-dropdown-item" key={year} onClick={() => (handleYearClick(year))}> {grid.map((column, columnIndex) => (
<input <div key={columnIndex} className="flex-fill">
type="checkbox" {column.map((nren) => (
checked={filterSelection.selectedYears.includes(year)} <div className="filter-dropdown-item flex-fill" key={nren} onClick={() => (handleNrenClick(nren))}>
readOnly <input
/> {year} type="checkbox"
</div> checked={filterSelection.selectedNrens.includes(nren)}
))} readOnly
/> {nren}
</div>
))}
</div>
))}
</div>
<div className="d-flex fit-max-content gap-2 mx-2 mt-3">
<Button variant="compendium" className="flex-fill" onClick={handleSelectAllNrensClick}>Select all NRENs</Button>
<Button variant="compendium" className="flex-fill" onClick={handleDeselectAllNrensClick}>Unselect all NRENs</Button>
</div>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
} </Col>
<Col>
</ButtonToolbar> <ButtonToolbar className="d-flex justify-content-end gap-2 m-3">
{ filterOptions.availableYears.sort().map(year => (
<ToggleButton
variant={ coloredYears ? "compendium-year-" + (year % 9) : "compendium-year"}
type="checkbox"
value={year}
key={year}
checked={filterSelection.selectedYears.includes(year)}
onClick={() => (handleYearClick(year))}>
{year}
</ToggleButton>
))}
</ButtonToolbar>
</Col>
</>
); );
} }
......
webapp/src/pages/ChargingStructure.tsx
+ 1
− 0
View file @ 91afd108
...@@ -75,6 +75,7 @@ function ChargingStructurePage({ filterSelection, setFilterSelection }: inputPro ...@@ -75,6 +75,7 @@ function ChargingStructurePage({ filterSelection, setFilterSelection }: inputPro
filterOptions={{ availableYears: [...labelsYear], availableNrens: [...labelsNREN] }} filterOptions={{ availableYears: [...labelsYear], availableNrens: [...labelsNREN] }}
filterSelection={filterSelection} filterSelection={filterSelection}
setFilterSelection={setFilterSelection} setFilterSelection={setFilterSelection}
coloredYears
/> />
return ( return (
......
webapp/src/pages/ParentOrganisation.tsx
+ 1
− 0
View file @ 91afd108
...@@ -81,6 +81,7 @@ function ParentOrganisation({ filterSelection, setFilterSelection }: inputProps) ...@@ -81,6 +81,7 @@ function ParentOrganisation({ filterSelection, setFilterSelection }: inputProps)
filterOptions={{ availableYears: [...years], availableNrens: [...nrens] }} filterOptions={{ availableYears: [...years], availableNrens: [...nrens] }}
filterSelection={filterSelection} filterSelection={filterSelection}
setFilterSelection={setFilterSelection} setFilterSelection={setFilterSelection}
max1year
/> />
return ( return (
......
webapp/src/scss/layout/_components.scss
+ 39
− 47
View file @ 91afd108
@use "sass:list";
@import '../abstracts/variables'; @import '../abstracts/variables';
@import '../layout/Sidebar'; @import '../layout/Sidebar';
...@@ -139,7 +141,43 @@ ...@@ -139,7 +141,43 @@
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff; --bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #0d6efd; --bs-btn-disabled-bg: #0d6efd;
--bs-btn-disabled-border-color: #0d6efd --bs-btn-disabled-border-color: #0d6efd;
--bs-btn-border-radius: none;
}
.btn-compendium-year {
--bs-btn-color:#6c757d;
--bs-btn-border-color:#6c757d;
--bs-btn-hover-color:#fff;
--bs-btn-hover-bg:#6c757d;
--bs-btn-hover-border-color:#6c757d;
--bs-btn-focus-shadow-rgb:108,117,125;
--bs-btn-active-color:#fff;
--bs-btn-active-bg:#6c757d;
--bs-btn-active-border-color:#6c757d;
--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color:#6c757d;
--bs-btn-disabled-bg:transparent;
--bs-btn-disabled-border-color:#6c757d;
--bs-gradient:none;
--bs-btn-border-radius: none;
}
$year-colors: (#fd7f6f, #7eb0d5, #ffee65, #bd7ebe, #beb9db, #b2e061, #ffb55a, #fdcce5, #8bd3c7);
@for $i from 0 to list.length($year-colors) {
.color-of-the-year-#{$i} {
background-color: #{list.nth($year-colors, $i + 1)};
}
.btn-compendium-year-#{$i} {
@extend .btn-compendium-year;
--bs-btn-active-bg: #{list.nth($year-colors, $i + 1)};
}
}
.color-of-the-year-blank {
background-color: rgb(0, 0, 0, 0);
} }
.charging-struct-table td { .charging-struct-table td {
...@@ -154,46 +192,6 @@ ...@@ -154,46 +192,6 @@
min-width: max-content; min-width: max-content;
} }
.color-of-the-year-blank {
background-color: rgb(0, 0, 0, 0);
}
.color-of-the-year-0 {
background-color: #fd7f6f;
}
.color-of-the-year-1 {
background-color: #7eb0d5;
}
.color-of-the-year-2 {
background-color: #ffee65;
}
.color-of-the-year-3 {
background-color: #bd7ebe;
}
.color-of-the-year-4 {
background-color: #beb9db;
}
.color-of-the-year-5 {
background-color: #b2e061;
}
.color-of-the-year-6 {
background-color: #ffb55a;
}
.color-of-the-year-7 {
background-color: #fdcce5;
}
.color-of-the-year-8 {
background-color: #8bd3c7;
}
.table-bg-highlighted { .table-bg-highlighted {
tr:nth-child(even) { tr:nth-child(even) {
background-color: rgba(102, 121, 139, 0.178); background-color: rgba(102, 121, 139, 0.178);
...@@ -211,12 +209,6 @@ ...@@ -211,12 +209,6 @@
} }
.sticky-top {
position: sticky;
top: 0;
z-index: 1;
}
.compendium-table { .compendium-table {
border-collapse: separate; border-collapse: separate;
border-spacing: 1.2em 0px; border-spacing: 1.2em 0px;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment