Skip to content

Commit 8d0a380

Browse files
JonasKellererJonasKellerer
committed
feat(website): add index page for each organism and wastewater
Resolves #590
1 parent 25aeb78 commit 8d0a380

File tree

18 files changed

+157
-162
lines changed

18 files changed

+157
-162
lines changed

‎website/src/components/views/overview/GenericOverview.astro

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
---
2+
import { iconMapping } from '../../iconCss';
3+
import ContaineredPageLayout from '../../../layouts/ContaineredPage/ContaineredPageLayout.astro';
4+
import { defaultBreadcrumbs } from '../../../layouts/Breadcrumbs';
5+
import { PageHeadline } from '../../../styles/containers/PageHeadline';
6+
import { getPathogenMegaMenuSections } from '../../../layouts/base/header/getPathogenMegaMenuSections';
7+
8+
type Props = {
9+
organism: keyof ReturnType<typeof getPathogenMegaMenuSections>;
10+
};
11+
12+
const { organism } = Astro.props;
13+
14+
const section = getPathogenMegaMenuSections()[organism]
15+
16+
---
17+
18+
<ContaineredPageLayout
19+
title={section.headline}
20+
breadcrumbs={[...defaultBreadcrumbs, { name: section.headline, href: section.href }]}
21+
>
22+
<PageHeadline>{section.headline}</PageHeadline>
23+
<div class='group flex flex-wrap gap-2'>
24+
{
25+
section.navigationEntries.map((view) => {
26+
return (
27+
<div
28+
class={`card w-96 shadow`}
29+
>
30+
<div class='card-body'>
31+
<div class='card-title'>
32+
<h2 class={`iconify ${iconMapping[view.iconType]}`} />
33+
<div>{view.label}</div>
34+
</div>
35+
<p>{view.description}</p>
36+
<a class='link link-primary' href={view.href}>
37+
Go to {view.label}
38+
</a>
39+
</div>
40+
</div>
41+
);
42+
})
43+
}
44+
</div>
45+
</ContaineredPageLayout>

‎website/src/layouts/base/header/HamburgerMenu.astro

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ type Props = {
1414
1515
const { forceLoggedOutState } = Astro.props;
1616
17-
const pathogenMegaMenuSections = getPathogenMegaMenuSections();
17+
const pathogenMegaMenuSections = Object.values(getPathogenMegaMenuSections());
1818
1919
const session = await getSession(Astro.request);
2020
const showLoggedInState = !forceLoggedOutState && session?.user !== undefined;
@@ -34,11 +34,11 @@ const showLoggedInState = !forceLoggedOutState && session?.user !== undefined;
3434
{
3535
pathogenMegaMenuSections.map((section) => (
3636
<HamburgerMenuSection navigationEntries={section.navigationEntries}>
37-
{section.headline}
37+
<a href={section.href}>{section.headline}</a>
3838
</HamburgerMenuSection>
3939
))
4040
}
41-
<HamburgerMenuItem href={Page.dataSources} itemType='toplevel'>Data Sources </HamburgerMenuItem>
41+
<HamburgerMenuItem href={Page.dataSources} itemType='toplevel'>Data Sources</HamburgerMenuItem>
4242
{
4343
isLoginEnabled() ? (
4444
showLoggedInState ? (

‎website/src/layouts/base/header/MegaMenu.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,23 +15,25 @@ export function MegaMenu({ className, children }: PropsWithChildren<WithClassNam
1515
export interface MegaMenuSectionProps {
1616
headline: string;
1717
headlineBackgroundColor: string;
18+
href: string;
1819
}
1920

2021
export function MegaMenuSection({
2122
headline,
2223
children,
2324
headlineBackgroundColor,
25+
href,
2426
}: PropsWithChildren<MegaMenuSectionProps>) {
2527
return (
2628
<li>
27-
<MegaMenuSectionHeadline label={headline} className={headlineBackgroundColor} />
29+
<MegaMenuSectionHeadline href={href} label={headline} className={headlineBackgroundColor} />
2830
<ul className='flex flex-col gap-2'>{children}</ul>
2931
</li>
3032
);
3133
}
3234

33-
function MegaMenuSectionHeadline({ label, className }: WithClassName<{ label: string }>) {
34-
return <h3 className={`mb-4 p-2 text-lg font-bold ${className}`}>{label}</h3>;
35+
function MegaMenuSectionHeadline({ label, className, href }: WithClassName<{ label: string, href: string }>) {
36+
return <h3 className={`mb-4 p-2 text-lg font-bold ${className}`}><a href={href}>{label}</a></h3>;
3537
}
3638

3739
export function MegaMenuListEntry({

‎website/src/layouts/base/header/Navigation.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { headerHeight } from './headerConstants.ts';
66
import { Page } from '../../../types/pages.ts';
77

88
export function Navigation() {
9-
const pathogenMegaMenuSections = getPathogenMegaMenuSections();
9+
const pathogenMegaMenuSections = Object.values(getPathogenMegaMenuSections());
1010

1111
return (
1212
<nav>

‎website/src/layouts/base/header/getPathogenMegaMenuSections.ts

Lines changed: 42 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,45 @@
1-
import { organismConfig } from '../../../types/Organism.ts';
2-
import { wastewaterConfig } from '../../../types/wastewaterConfig.ts';
3-
import { ServerSide } from '../../../views/serverSideRouting.ts';
1+
import {organismConfig} from '../../../types/Organism.ts';
2+
import {wastewaterConfig} from '../../../types/wastewaterConfig.ts';
3+
import {ServerSide} from '../../../views/serverSideRouting.ts';
44

55
export function getPathogenMegaMenuSections() {
6-
const sections = Object.values(organismConfig).map((organism) => {
7-
const megaMenuSections = ServerSide.routing.getAllViewsForOrganism(organism.organism).map((view) => {
8-
const href = view.pageStateHandler.getDefaultPageUrl();
9-
return {
10-
label: view.viewConstants.labelLong,
11-
href,
12-
underlineColor: organism.menuListEntryDecoration,
13-
iconType: view.viewConstants.iconType,
14-
externalLink: false,
15-
};
16-
});
6+
const sections = Object.fromEntries(
7+
Object.entries(organismConfig).map(([organism, config]) => {
8+
const megaMenuSections = ServerSide.routing.getAllViewsForOrganism(config.organism).map((view) => {
9+
const href = view.pageStateHandler.getDefaultPageUrl();
10+
return {
11+
label: view.viewConstants.labelLong,
12+
href,
13+
underlineColor: config.menuListEntryDecoration,
14+
iconType: view.viewConstants.iconType,
15+
externalLink: false,
16+
description: view.viewConstants.description,
17+
};
18+
});
1719

18-
megaMenuSections.push(
19-
...ServerSide.routing.externalPages[organism.organism].map((externalPage) => ({
20-
label: externalPage.label,
21-
href: externalPage.url,
22-
underlineColor: organism.menuListEntryDecoration,
23-
iconType: externalPage.menuIcon,
24-
externalLink: true,
25-
})),
26-
);
20+
megaMenuSections.push(
21+
...ServerSide.routing.externalPages[config.organism].map((externalPage) => ({
22+
label: externalPage.label,
23+
href: externalPage.url,
24+
underlineColor: config.menuListEntryDecoration,
25+
iconType: externalPage.menuIcon,
26+
externalLink: true,
27+
description: undefined,
28+
})),
29+
);
2730

28-
return {
29-
headline: organism.label,
30-
headlineBackgroundColor: organism.backgroundColor,
31-
headlineBackgroundColorFocus: organism.backgroundColorFocus,
32-
borderEntryDecoration: organism.borderEntryDecoration,
33-
navigationEntries: megaMenuSections,
34-
};
35-
});
31+
return [organism, {
32+
headline: config.label,
33+
headlineBackgroundColor: config.backgroundColor,
34+
headlineBackgroundColorFocus: config.backgroundColorFocus,
35+
borderEntryDecoration: config.borderEntryDecoration,
36+
navigationEntries: megaMenuSections,
37+
href: `/${config.pathFragment}`,
38+
}]
39+
})
40+
)
3641

37-
sections.push({
42+
sections.swissWastewater = {
3843
headline: 'Swiss Wastewater',
3944
headlineBackgroundColor: wastewaterConfig.backgroundColor,
4045
headlineBackgroundColorFocus: wastewaterConfig.backgroundColorFocus,
@@ -46,23 +51,27 @@ export function getPathogenMegaMenuSections() {
4651
href: wastewaterConfig.pages.rsv,
4752
underlineColor: wastewaterConfig.menuListEntryDecoration,
4853
externalLink: false,
54+
description: undefined,
4955
},
5056
{
5157
label: 'Influenza',
5258
iconType: 'table',
5359
href: wastewaterConfig.pages.influenza,
5460
underlineColor: wastewaterConfig.menuListEntryDecoration,
5561
externalLink: false,
62+
description: undefined,
5663
},
5764
{
5865
label: 'Browse data',
5966
iconType: 'database',
6067
href: wastewaterConfig.browseDataUrl,
6168
underlineColor: wastewaterConfig.menuListEntryDecoration,
6269
externalLink: true,
70+
description: undefined,
6371
},
6472
],
65-
});
73+
href: '/swiss-wastewater',
74+
}
6675

6776
return sections;
6877
}

‎website/src/pages/cchf/index.astro

Lines changed: 3 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,6 @@
11
---
2-
import ContaineredPageLayout from "../../layouts/ContaineredPage/ContaineredPageLayout.astro";
3-
import {PageHeadline} from "../../styles/containers/PageHeadline";
4-
import {defaultBreadcrumbs} from "../../layouts/Breadcrumbs";
5-
import {organismConfig, Organisms} from "../../types/Organism";
6-
import {ServerSide} from "../../views/serverSideRouting";
7-
8-
const organism = Organisms.cchf;
9-
10-
const label = organismConfig[organism].label;
11-
const pathFragment = organismConfig[organism].pathFragment;
12-
const backgroundColor = organismConfig[organism].borderEntryDecoration;
13-
14-
const internalViews = ServerSide.routing.getAllViewsForOrganism(organism).map((view) => {
15-
const href = view.pageStateHandler.getDefaultPageUrl();
16-
return {
17-
label: view.viewConstants.labelLong,
18-
href,
19-
iconType: view.viewConstants.iconType,
20-
externalLink: false,
21-
};
22-
});
23-
24-
internalViews.push(
25-
...ServerSide.routing.externalPages[organism].map((externalPage) => ({
26-
label: externalPage.label,
27-
href: externalPage.url,
28-
iconType: externalPage.menuIcon,
29-
externalLink: true,
30-
})),
31-
);
32-
33-
2+
import GenericOverview from '../../components/views/overview/GenericOverview.astro';
3+
import { Organisms } from '../../types/Organism';
344
---
355

36-
<ContaineredPageLayout
37-
title='CCHF'
38-
breadcrumbs={[...defaultBreadcrumbs, { name: label, href: `/${pathFragment}` }]}
39-
>
40-
41-
<PageHeadline>{label}</PageHeadline>
42-
<div>
43-
Visit the following pages:
44-
</div>
45-
<div class="flex flex-wrap">
46-
{internalViews.map((view) => {
47-
return (
48-
<div class={`card w-96 shadow ${backgroundColor}`}>
49-
<div class="card-body">
50-
<h2 class="card-title">{view.label}</h2>
51-
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
52-
<a class="link link-primary" href={view.href}>Go to {view.label}</a>
53-
</div>
54-
</div>
55-
)
56-
})}
57-
</div>
58-
</ContaineredPageLayout>
6+
<GenericOverview organism={Organisms.cchf} />

‎website/src/pages/covid/index.astro

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
2-
import { ServerSide } from '../../views/serverSideRouting';
3-
4-
return Astro.redirect(
5-
ServerSide.routing.getOrganismView('covid.singleVariantView').pageStateHandler.getDefaultPageUrl(),
6-
);
2+
import GenericOverview from '../../components/views/overview/GenericOverview.astro';
3+
import { Organisms } from '../../types/Organism';
74
---
5+
6+
<GenericOverview organism={Organisms.covid} />

‎website/src/pages/ebola-sudan/index.astro

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
---
2+
import GenericOverview from '../../components/views/overview/GenericOverview.astro';
23
import { Organisms } from '../../types/Organism';
3-
import { ServerSide } from '../../views/serverSideRouting';
4-
import { singleVariantViewKey } from '../../views/viewKeys';
5-
6-
return Astro.redirect(
7-
ServerSide.routing
8-
.getOrganismView(`${Organisms.ebolaSudan}.${singleVariantViewKey}`)
9-
.pageStateHandler.getDefaultPageUrl(),
10-
);
114
---
5+
6+
<GenericOverview organism={Organisms.ebolaSudan} />

‎website/src/pages/ebola-zaire/index.astro

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
---
2+
import GenericOverview from '../../components/views/overview/GenericOverview.astro';
23
import { Organisms } from '../../types/Organism';
3-
import { ServerSide } from '../../views/serverSideRouting';
4-
import { singleVariantViewKey } from '../../views/viewKeys';
5-
6-
return Astro.redirect(
7-
ServerSide.routing
8-
.getOrganismView(`${Organisms.ebolaZaire}.${singleVariantViewKey}`)
9-
.pageStateHandler.getDefaultPageUrl(),
10-
);
114
---
5+
6+
<GenericOverview organism={Organisms.ebolaZaire} />

‎website/src/pages/flu/h5n1/index.astro

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
2-
import { ServerSide } from '../../../views/serverSideRouting';
3-
4-
return Astro.redirect(
5-
ServerSide.routing.getOrganismView('h5n1.singleVariantView').pageStateHandler.getDefaultPageUrl(),
6-
);
2+
import GenericOverview from '../../../components/views/overview/GenericOverview.astro';
3+
import { Organisms } from '../../../types/Organism';
74
---
5+
6+
<GenericOverview organism={Organisms.h5n1} />

‎website/src/pages/flu/index.astro

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
2-
import { ServerSide } from '../../views/serverSideRouting';
3-
4-
return Astro.redirect(
5-
ServerSide.routing.getOrganismView('flu.sequencingEffortsView').pageStateHandler.getDefaultPageUrl(),
6-
);
2+
import GenericOverview from '../../components/views/overview/GenericOverview.astro';
3+
import { Organisms } from '../../types/Organism';
74
---
5+
6+
<GenericOverview organism={Organisms.flu} />

0 commit comments

Comments
 (0)