a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Render single section in view/edit

Browse Source
This commit is contained in:
Tom Russell 2019-08-14 11:36:38 +01:00
parent 99456e2431
commit 43f239c853
2 changed files with 37 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/src/frontend/building/building-edit.tsx
View File

@ -6,7 +6,7 @@ import ErrorBox from '../components/error-box';
import InfoBox from '../components/info-box';
import Sidebar from './sidebar';
import Tooltip from '../components/tooltip';
import { SaveIcon } from '../components/icons';
import { BackIcon, SaveIcon } from '../components/icons';
import CONFIG from './fields-config.json';
@ -15,28 +15,27 @@ const BuildingEdit = (props) => {
return <Redirect to="/sign-up.html" />
}
const cat = props.match.params.cat;
if (!props.building_id){
const sections = CONFIG.filter((d) => d.slug === cat)
if (!props.building_id || sections.length !== 1){
return (
<Sidebar title="Building Not Found" back={`/edit/${cat}.html`}>
<Sidebar title="Building Not Found" back={`/edit/categories.html`}>
<InfoBox msg="We can't find that one anywhere - try the map again?" />
<div className="buttons-container ml-3 mr-3">
<Link to={`/edit/${cat}.html`} className="btn btn-secondary">Back to maps</Link>
<Link to={`/edit/categories.html`} className="btn btn-secondary">Back to maps</Link>
</div>
</Sidebar>
);
}
const section = sections[0];
return (
<Sidebar
key={props.building_id}
title={'You are editing'}
back={`/edit/${cat}.html`}>
{
CONFIG.map((section) => {
return <EditForm
{...section} {...props}
cat={cat} key={section.slug} />
})
}
<Sidebar>
<EditForm
{...section}
{...props}
cat={cat}
/>
</Sidebar>
);
}
@ -237,6 +236,9 @@ class EditForm extends Component<any, any> { // TODO: add proper types
return (
<section className={(this.props.inactive)? 'data-section inactive': 'data-section'}>
<header className={`section-header edit ${this.props.slug} ${(match? 'active' : '')}`}>
<Link className="icon-button back" to="/edit/categories.html">
<BackIcon />
</Link>
<NavLink
to={`/edit/${this.props.slug}/building/${this.props.building_id}.html`}
title={(this.props.inactive)? 'Coming soon… Click the ? for more info.' :

30
app/src/frontend/building/building-view.tsx
View File

@ -5,33 +5,36 @@ import PropTypes from 'prop-types';
import Sidebar from './sidebar';
import Tooltip from '../components/tooltip';
import InfoBox from '../components/info-box';
import { EditIcon } from '../components/icons';
import { BackIcon, EditIcon } from '../components/icons';
import { sanitiseURL } from '../helpers';
import CONFIG from './fields-config.json';
const BuildingView = (props) => {
if (!props.building_id){
const cat = props.match.params.cat;
const sections = CONFIG.filter((d) => d.slug === cat)
if (!props.building_id || sections.length !== 1){
return (
<Sidebar title="Building Not Found">
<Sidebar title="Building Not Found" back={`/view/categories.html`}>
<InfoBox msg="We can't find that one anywhere - try the map again?" />
<div className="buttons-container with-space">
<Link to="/view/age.html" className="btn btn-secondary">Back to maps</Link>
<Link to="/view/categories.html" className="btn btn-secondary">Back to categories</Link>
</div>
</Sidebar>
);
}
const cat = props.match.params.cat;
const section = sections[0];
return (
<Sidebar title={'Data available for this building'} back={`/view/${cat}.html`}>
{
CONFIG.map(section => (
<Sidebar>
<DataSection
key={section.slug} cat={cat}
key={section.slug}
cat={cat}
building_id={props.building_id}
{...section} {...props} />
))
}
{...section}
{...props}
/>
</Sidebar>
);
}
@ -102,6 +105,9 @@ class DataSection extends React.Component<any, any> { // TODO: add proper types
return (
<section id={props.slug} className={(props.inactive)? 'data-section inactive': 'data-section'}>
<header className={`section-header view ${props.slug} ${(match? 'active' : '')}`}>
<Link className="icon-button back" to="/view/categories.html">
<BackIcon />
</Link>
<NavLink
to={`/view/${props.slug}/building/${props.building_id}.html`}
title={(props.inactive)? 'Coming soon… Click the ? for more info.' :