87 lines
2.9 KiB
JavaScript
87 lines
2.9 KiB
JavaScript
import React, { Fragment } from 'react';
|
|
import { NavLink, Redirect } from 'react-router-dom';
|
|
|
|
import Sidebar from './sidebar';
|
|
import { EditIcon } from './icons';
|
|
import CONFIG from './fields-config.json';
|
|
|
|
const Overview = (props) => {
|
|
var data_layer = 'age'; // always default
|
|
if (props.match && props.match.params && props.match.params.cat) {
|
|
data_layer = props.match.params.cat;
|
|
}
|
|
|
|
if (props.mode === 'edit' && !props.user){
|
|
return <Redirect to="/sign-up.html" />
|
|
}
|
|
|
|
let title = (props.mode === 'view')? 'View maps' : 'Add or edit data';
|
|
let back = (props.mode === 'edit')? `/view/${data_layer}.html` : undefined;
|
|
|
|
return (
|
|
<Sidebar title={title} back={back}>
|
|
{
|
|
CONFIG.map((data_group) => (
|
|
<OverviewSection {...data_group}
|
|
data_layer={data_layer} key={data_group.slug} mode={props.mode} />
|
|
))
|
|
}
|
|
</Sidebar>
|
|
);
|
|
}
|
|
|
|
const OverviewSection = (props) => {
|
|
const match = props.data_layer === props.slug;
|
|
const inactive = props.inactive;
|
|
|
|
return (
|
|
<section className={(inactive? "inactive ": "") + "data-section legend"}>
|
|
<header className={`section-header ${props.mode} ${props.slug} ${(match? "active" : "")}`}>
|
|
<NavLink
|
|
to={`/${props.mode}/${props.slug}.html`}
|
|
isActive={() => match}
|
|
title={(inactive)? 'Coming soon… Click the ? for more info.' :
|
|
(match)? '' : 'Show on map'}>
|
|
<h3 className="h3">{props.title}</h3>
|
|
</NavLink>
|
|
<nav className="icon-buttons">
|
|
{
|
|
props.help?
|
|
<a className="icon-button help" href={props.help}>
|
|
Info
|
|
</a>
|
|
: null
|
|
}
|
|
{
|
|
props.mode === 'view'?
|
|
<NavLink className="icon-button edit" title="Edit data"
|
|
to={`/edit/${props.slug}.html`}>
|
|
Edit
|
|
<EditIcon />
|
|
</NavLink>
|
|
: null
|
|
}
|
|
</nav>
|
|
</header>
|
|
{
|
|
(match && props.intro)?
|
|
(
|
|
<Fragment>
|
|
<p className="data-intro">{props.intro}</p>
|
|
<ul>
|
|
{
|
|
props.fields.map((field) => {
|
|
return (<li key={field.slug}>{field.title}</li>)
|
|
})
|
|
}
|
|
</ul>
|
|
</Fragment>
|
|
)
|
|
: null
|
|
}
|
|
</section>
|
|
)
|
|
};
|
|
|
|
export default Overview;
|