diff --git a/webapp/src/components/DataPage.tsx b/webapp/src/components/DataPage.tsx index 31bff5ad24eef0bc48cc8acdde2e779fd08b7a10..fb6fa2746bb9f0afc8e116c450e27fb3c64de4b5 100644 --- a/webapp/src/components/DataPage.tsx +++ b/webapp/src/components/DataPage.tsx @@ -3,20 +3,24 @@ import { Container, Row, Col } from "react-bootstrap"; import OrganizationSidebar from "./OrganizationSidebar"; import PageHeader from "../components/global/PageHeader" import SectionLink from "../components/global/SectionLink"; +import SectionNavigation from "./SectionNavigation"; +import { Sections } from "../helpers/constants"; interface inputProps { title: string, filter: ReactElement, - children: ReactElement + children: ReactElement, + category: Sections } -function DataPage({ title, filter, children }: inputProps): ReactElement { +function DataPage({ title, filter, children, category }: inputProps): ReactElement { return ( <> <OrganizationSidebar /> <PageHeader type={'data'} header={'Compendium Data'}> <SectionLink section={"Reports"} /> </PageHeader> + <SectionNavigation activeCategory={category} /> <Container className="grow"> <Col xs={9}> <Row> diff --git a/webapp/src/components/SectionNavigation.tsx b/webapp/src/components/SectionNavigation.tsx new file mode 100644 index 0000000000000000000000000000000000000000..606048fff7dd2e131f3ed03df5d2d1439e1dff51 --- /dev/null +++ b/webapp/src/components/SectionNavigation.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import { Container, Row, ButtonToolbar, Button } from 'react-bootstrap'; +import { Sections } from '../helpers/constants'; + +interface inputProps { + activeCategory: Sections +} + +const SectionNavigation = ({ activeCategory }: inputProps) => { + return ( + <Container> + <Row> + <ButtonToolbar className="navbox-bar gap-2 m-3"> + <Link to={activeCategory === Sections.Organisation ? '.' : '/funding'}> + <Button + variant={'nav-box'} + active={activeCategory === Sections.Organisation}> + <span>{Sections.Organisation}</span> + </Button> + </Link> + <Link to={activeCategory === Sections.Policy ? '.' : '/policy'}> + <Button + variant={'nav-box'} + active={activeCategory === Sections.Policy}> + <span>{Sections.Policy}</span> + </Button> + </Link> + <Link to={activeCategory === Sections.ConnectedUsers ? '.' : '.'}> + <Button + variant={'nav-box'} + active={activeCategory === Sections.ConnectedUsers} + disabled={true}> + <span>{Sections.ConnectedUsers}</span> + </Button> + </Link> + <Link to={activeCategory === Sections.Network ? '.' : '.'}> + <Button + variant={'nav-box'} + active={activeCategory === Sections.Network} + disabled={true}> + <span>{Sections.Network}</span> + </Button> + </Link> + <Link to={activeCategory === Sections.Services ? '.' : '.'}> + <Button + variant={'nav-box'} + active={activeCategory === Sections.Services} + disabled={true}> + <span>{Sections.Services}</span> + </Button> + </Link> + </ButtonToolbar> + </Row> + </Container> + + ) +} + +export default SectionNavigation \ No newline at end of file diff --git a/webapp/src/helpers/constants.ts b/webapp/src/helpers/constants.ts new file mode 100644 index 0000000000000000000000000000000000000000..d168518898778c51bb0aa2b070e5d921cb5dff2d --- /dev/null +++ b/webapp/src/helpers/constants.ts @@ -0,0 +1,7 @@ +export enum Sections { + Organisation = 'ORGANISATION', + Policy = 'STANDARDS AND POLICIES', + ConnectedUsers = 'CONNECTED USERS', + Network = 'NETWORK', + Services = 'SERVICES', +}; diff --git a/webapp/src/pages/Budget.tsx b/webapp/src/pages/Budget.tsx index 126ec18ae8519d2c0308703a83d8c0b02f0538f7..3c3df6231f2d302f8a1fc652ef191f571e3cb6a0 100644 --- a/webapp/src/pages/Budget.tsx +++ b/webapp/src/pages/Budget.tsx @@ -6,6 +6,7 @@ import { createBudgetDataset, getYearsAndNrens, loadDataWithFilterNrenSelectionF import DataPage from '../components/DataPage'; import Filter from "../components/graphing/Filter"; import LineGraph from "../components/graphing/LineGraph"; +import { Sections } from '../helpers/constants'; interface inputProps { @@ -39,7 +40,7 @@ function BudgetPage({ filterSelection, setFilterSelection }: inputProps): ReactE /> return ( - <DataPage title="Budgets" filter={filterNode}> + <DataPage title="Budgets" category={Sections.Organisation} filter={filterNode}> <> <Row> <LineGraph data={budgetData} /> diff --git a/webapp/src/pages/ChargingStructure.tsx b/webapp/src/pages/ChargingStructure.tsx index 65a8cf545c8c27d9a8c23365a716a7bcc48d6cbe..04d3b63ae69d151553dbbca3bb7776470926b4ae 100644 --- a/webapp/src/pages/ChargingStructure.tsx +++ b/webapp/src/pages/ChargingStructure.tsx @@ -7,6 +7,7 @@ import { createChargingStructureDataLookup, getYearsAndNrens, loadDataWithFilter import ColorPill from "../components/ColorPill"; import DataPage from "../components/DataPage"; import Filter from "../components/graphing/Filter"; +import { Sections } from "../helpers/constants"; ChartJS.register( @@ -49,7 +50,7 @@ function ChargingStructurePage({ filterSelection, setFilterSelection }: inputPro /> return ( - <DataPage title="Charging Structure" filter={filterNode}> + <DataPage title="Charging Structure" category={Sections.Organisation} filter={filterNode}> <Table className="charging-struct-table" striped bordered responsive > <colgroup> <col span={1} style={{ width: "10%" }} /> diff --git a/webapp/src/pages/ECProjects.tsx b/webapp/src/pages/ECProjects.tsx index 09123ca9179747377e540e4500688f3ea41b26db..e32c1d062b89bcd40e87c0ba38efe68cfd8f0763 100644 --- a/webapp/src/pages/ECProjects.tsx +++ b/webapp/src/pages/ECProjects.tsx @@ -5,6 +5,7 @@ import { ECProject, FilterSelection } from "../Schema"; import { createECProjectsDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from '../helpers/dataconversion'; import DataPage from '../components/DataPage'; import Filter from "../components/graphing/Filter" +import { Sections } from '../helpers/constants'; interface inputProps { @@ -54,7 +55,7 @@ function ECProjects({ filterSelection, setFilterSelection }: inputProps) { /> return ( - <DataPage title="NREN Involvement in European Commission Projects" filter={filterNode}> + <DataPage title="NREN Involvement in European Commission Projects" category={Sections.Organisation} filter={filterNode}> <Table borderless className='compendium-table'> <thead> <tr> diff --git a/webapp/src/pages/FundingSource.tsx b/webapp/src/pages/FundingSource.tsx index 50a36d13802402c51be5abc7c43278312a08cb1b..c6d7d1ba9a475558d5f098daf625d8e7d1436842 100644 --- a/webapp/src/pages/FundingSource.tsx +++ b/webapp/src/pages/FundingSource.tsx @@ -6,6 +6,7 @@ import { FundingSource, FilterSelection } from "../Schema"; import { createFundingSourceDataset, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion"; import DataPage from '../components/DataPage'; import Filter from "../components/graphing/Filter" +import { Sections } from '../helpers/constants'; ChartJS.register( @@ -97,7 +98,7 @@ function FundingSourcePage({ filterSelection, setFilterSelection }: inputProps) return ( - <DataPage title="Funding Source" filter={filterNode}> + <DataPage title="Funding Source" category={Sections.Organisation} filter={filterNode}> <div className="chart-container" style={{ 'minHeight': '100vh', 'width': '60vw', }}> <Bar data={fundingSourceDataset} diff --git a/webapp/src/pages/Landing.tsx b/webapp/src/pages/Landing.tsx index 7f9d79553e27662e560a69084d81c55640a12064..aefef21e890dd5821986fec7207b2f9036911532 100644 --- a/webapp/src/pages/Landing.tsx +++ b/webapp/src/pages/Landing.tsx @@ -8,7 +8,7 @@ function Landing(): ReactElement { return ( <Container className="grey-container"> <Row> - <div className="center-text max-width-100vw"> + <div className="center-text"> <h1 className="geant-header">THE GÉANT COMPENDIUM OF NRENS</h1> <br /> <div className="wordwrap"> diff --git a/webapp/src/pages/ParentOrganisation.tsx b/webapp/src/pages/ParentOrganisation.tsx index 16f6a7ed3fcf556236936a4c994c21ff2ca03868..86a955c5e52417cc08967374b319bb6de95f5fe6 100644 --- a/webapp/src/pages/ParentOrganisation.tsx +++ b/webapp/src/pages/ParentOrganisation.tsx @@ -5,6 +5,7 @@ import { Organisation, FilterSelection } from "../Schema"; import { createOrganisationDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion"; import DataPage from '../components/DataPage'; import Filter from "../components/graphing/Filter" +import { Sections } from '../helpers/constants'; function getJSXFromMap(data: Map<string, Map<number, Organisation[]>>) { @@ -49,7 +50,7 @@ function ParentOrganisation({ filterSelection, setFilterSelection }: inputProps) /> return ( - <DataPage title="NREN Parent Organisations" filter={filterNode}> + <DataPage title="NREN Parent Organisations" category={Sections.Organisation} filter={filterNode}> <Table borderless className='compendium-table'> <thead> <tr> diff --git a/webapp/src/pages/Policy.tsx b/webapp/src/pages/Policy.tsx index b6574655e8fbf2d18b822f472b689c0f9602c233..8b0590afba64001007d94a5e2a0fe2ec9779f2cf 100644 --- a/webapp/src/pages/Policy.tsx +++ b/webapp/src/pages/Policy.tsx @@ -5,6 +5,7 @@ import { Policy, FilterSelection } from "../Schema"; import { createPolicyDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from '../helpers/dataconversion'; import DataPage from '../components/DataPage'; import Filter from "../components/graphing/Filter" +import { Sections } from '../helpers/constants'; interface inputProps { filterSelection: FilterSelection @@ -69,7 +70,7 @@ function PolicyPage({ filterSelection, setFilterSelection }: inputProps) { /> return ( - <DataPage title="NREN Policies" filter={filterNode}> + <DataPage title="NREN Policies" category={Sections.Policy} filter={filterNode}> <Table borderless className='compendium-table'> <thead> <tr> diff --git a/webapp/src/pages/StaffGraph.tsx b/webapp/src/pages/StaffGraph.tsx index faf4941c6c87c7e02a5314e5509844e1d2a84199..64ded0c1c0fcf620c5d6cc4ccaa6ce7532ca928a 100644 --- a/webapp/src/pages/StaffGraph.tsx +++ b/webapp/src/pages/StaffGraph.tsx @@ -6,6 +6,7 @@ import { NrenStaff, FilterSelection } from "../Schema"; import { createNRENStaffDataset, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion"; import DataPage from '../components/DataPage'; import Filter from "../components/graphing/Filter" +import { Sections } from '../helpers/constants'; ChartJS.register( @@ -103,7 +104,7 @@ function StaffGraph({ filterSelection, setFilterSelection, roles = false }: inpu const text = roles ? "Roles" : "Employment"; return ( - <DataPage title={"NREN Staff " + text} filter={filterNode}> + <DataPage title={"NREN Staff " + text} category={Sections.Organisation} filter={filterNode}> <div className="chart-container" style={{ 'minHeight': '60vh', 'width': '60vw', }}> <Bar data={nrenStaffDataset} diff --git a/webapp/src/pages/SubOrganisation.tsx b/webapp/src/pages/SubOrganisation.tsx index 1dfa8c77263c1924105336b7c0fb80bb99577b3d..1005cf9aedec5280ee4c40f3e2be74d862d32feb 100644 --- a/webapp/src/pages/SubOrganisation.tsx +++ b/webapp/src/pages/SubOrganisation.tsx @@ -5,6 +5,7 @@ import { Organisation, FilterSelection } from "../Schema"; import { createOrganisationDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion"; import DataPage from '../components/DataPage'; import Filter from "../components/graphing/Filter" +import { Sections } from '../helpers/constants'; function getJSXFromMap(data: Map<string, Map<number, Organisation[]>>) { @@ -54,7 +55,7 @@ function SubOrganisation({ filterSelection, setFilterSelection }: inputProps) { /> return ( - <DataPage title="NREN Suborganisations" filter={filterNode}> + <DataPage title="NREN Suborganisations" category={Sections.Organisation} filter={filterNode}> <Table borderless className='compendium-table'> <thead> <tr> diff --git a/webapp/src/scss/layout/SectionNavigation.scss b/webapp/src/scss/layout/SectionNavigation.scss new file mode 100644 index 0000000000000000000000000000000000000000..1d129485bd96017a46ea113220ab92de3c5a2ee8 --- /dev/null +++ b/webapp/src/scss/layout/SectionNavigation.scss @@ -0,0 +1,26 @@ +@import '../abstracts/variables'; + +.btn-nav-box { + --bs-btn-color: rgb(0, 63, 95); + --bs-btn-border-color: #6c757d; + --bs-btn-border-radius: none; + + // active + --bs-btn-active-color: #fff; + // see https://stackoverflow.com/a/76213205 for why this syntax is necessary + --bs-btn-active-bg: #{$yellow-orange}; + --bs-btn-active-border-color: #{$yellow-orange}; + + // hover + --bs-btn-hover-color: rgb(0, 63, 95); + --bs-btn-hover-bg: #{$yellow-orange}; + --bs-btn-hover-border-color: #{$yellow-orange}; + + + // disabled + --bs-btn-disabled-color: #6c757d; + --bs-btn-disabled-bg: transparent; + // --bs-btn-disabled-border-color: #6c757d; + + border: 2px solid $yellow-orange; +} \ No newline at end of file