From 074938174e325b122c0ec8b1a82dd5c49a0e88f4 Mon Sep 17 00:00:00 2001
From: Bjarke Madsen <bjarke@nordu.net>
Date: Tue, 23 May 2023 13:47:43 +0200
Subject: [PATCH] Add navigation boxes for each section
---
webapp/src/components/DataPage.tsx | 8 ++-
webapp/src/components/SectionNavigation.tsx | 60 +++++++++++++++++++
webapp/src/helpers/constants.ts | 7 +++
webapp/src/pages/Budget.tsx | 3 +-
webapp/src/pages/ChargingStructure.tsx | 3 +-
webapp/src/pages/ECProjects.tsx | 3 +-
webapp/src/pages/FundingSource.tsx | 3 +-
webapp/src/pages/Landing.tsx | 2 +-
webapp/src/pages/ParentOrganisation.tsx | 3 +-
webapp/src/pages/Policy.tsx | 3 +-
webapp/src/pages/StaffGraph.tsx | 3 +-
webapp/src/pages/SubOrganisation.tsx | 3 +-
webapp/src/scss/layout/SectionNavigation.scss | 26 ++++++++
13 files changed, 116 insertions(+), 11 deletions(-)
create mode 100644 webapp/src/components/SectionNavigation.tsx
create mode 100644 webapp/src/helpers/constants.ts
create mode 100644 webapp/src/scss/layout/SectionNavigation.scss
diff --git a/webapp/src/components/DataPage.tsx b/webapp/src/components/DataPage.tsx
index 31bff5ad..fb6fa274 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 00000000..606048ff
--- /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 00000000..d1685188
--- /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 126ec18a..3c3df623 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 65a8cf54..04d3b63a 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 09123ca9..e32c1d06 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 50a36d13..c6d7d1ba 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 7f9d7955..aefef21e 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 16f6a7ed..86a955c5 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 b6574655..8b0590af 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 faf4941c..64ded0c1 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 1dfa8c77..1005cf9a 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 00000000..1d129485
--- /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
--
GitLab