Allow no selection in categories/building-view
This commit is contained in:
Maciej Ziarkowski
parent
b9648c47af
commit
4bfee10508
@ -21,15 +21,11 @@ import LikeContainer from './data-containers/like';
|
||||
* @param props
|
||||
*/
|
||||
const BuildingView = (props) => {
|
||||
if (typeof(props.building) === "undefined"){
|
||||
return <BuildingNotFound mode="view" />
|
||||
}
|
||||
|
||||
switch (props.cat) {
|
||||
case 'location':
|
||||
return <LocationContainer
|
||||
{...props}
|
||||
key={props.building.building_id}
|
||||
key={props.building && props.building.building_id}
|
||||
title="Location"
|
||||
help="https://pages.colouring.london/location"
|
||||
intro="Where are the buildings? Address, location and cross-references."
|
||||
@ -37,7 +33,7 @@ const BuildingView = (props) => {
|
||||
case 'use':
|
||||
return <UseContainer
|
||||
{...props}
|
||||
key={props.building.building_id}
|
||||
key={props.building && props.building.building_id}
|
||||
inactive={true}
|
||||
title="Land Use"
|
||||
intro="How are buildings used, and how does use change over time? Coming soon…"
|
||||
@ -46,7 +42,7 @@ const BuildingView = (props) => {
|
||||
case 'type':
|
||||
return <TypeContainer
|
||||
{...props}
|
||||
key={props.building.building_id}
|
||||
key={props.building && props.building.building_id}
|
||||
inactive={true}
|
||||
title="Type"
|
||||
intro="How were buildings previously used? Coming soon…"
|
||||
@ -55,7 +51,7 @@ const BuildingView = (props) => {
|
||||
case 'age':
|
||||
return <AgeContainer
|
||||
{...props}
|
||||
key={props.building.building_id}
|
||||
key={props.building && props.building.building_id}
|
||||
title="Age"
|
||||
help="https://pages.colouring.london/age"
|
||||
intro="Building age data can support energy analysis and help predict long-term change."
|
||||
@ -63,7 +59,7 @@ const BuildingView = (props) => {
|
||||
case 'size':
|
||||
return <SizeContainer
|
||||
{...props}
|
||||
key={props.building.building_id}
|
||||
key={props.building && props.building.building_id}
|
||||
title="Size & Shape"
|
||||
intro="How big are buildings?"
|
||||
help="https://pages.colouring.london/shapeandsize"
|
||||
@ -71,7 +67,7 @@ const BuildingView = (props) => {
|
||||
case 'construction':
|
||||
return <ConstructionContainer
|
||||
{...props}
|
||||
key={props.building.building_id}
|
||||
key={props.building && props.building.building_id}
|
||||
title="Construction"
|
||||
intro="How are buildings built? Coming soon…"
|
||||
help="https://pages.colouring.london/construction"
|
||||
@ -80,7 +76,7 @@ const BuildingView = (props) => {
|
||||
case 'team':
|
||||
return <TeamContainer
|
||||
{...props}
|
||||
key={props.building.building_id}
|
||||
key={props.building && props.building.building_id}
|
||||
title="Team"
|
||||
intro="Who built the buildings? Coming soon…"
|
||||
help="https://pages.colouring.london/team"
|
||||
@ -89,7 +85,7 @@ const BuildingView = (props) => {
|
||||
case 'sustainability':
|
||||
return <SustainabilityContainer
|
||||
{...props}
|
||||
key={props.building.building_id}
|
||||
key={props.building && props.building.building_id}
|
||||
title="Sustainability"
|
||||
intro="Are buildings energy efficient? Coming soon…"
|
||||
help="https://pages.colouring.london/sustainability"
|
||||
@ -98,7 +94,7 @@ const BuildingView = (props) => {
|
||||
case 'greenery':
|
||||
return <GreeneryContainer
|
||||
{...props}
|
||||
key={props.building.building_id}
|
||||
key={props.building && props.building.building_id}
|
||||
title="Greenery"
|
||||
intro="Is there greenery nearby? Coming soon…"
|
||||
help="https://pages.colouring.london/greenery"
|
||||
@ -107,7 +103,7 @@ const BuildingView = (props) => {
|
||||
case 'community':
|
||||
return <CommunityContainer
|
||||
{...props}
|
||||
key={props.building.building_id}
|
||||
key={props.building && props.building.building_id}
|
||||
title="Community"
|
||||
intro="How does this building work for the local community?"
|
||||
help="https://pages.colouring.london/community"
|
||||
@ -116,7 +112,7 @@ const BuildingView = (props) => {
|
||||
case 'planning':
|
||||
return <PlanningContainer
|
||||
{...props}
|
||||
key={props.building.building_id}
|
||||
key={props.building && props.building.building_id}
|
||||
title="Planning"
|
||||
intro="Planning controls relating to protection and reuse."
|
||||
help="https://pages.colouring.london/planning"
|
||||
@ -124,7 +120,7 @@ const BuildingView = (props) => {
|
||||
case 'like':
|
||||
return <LikeContainer
|
||||
{...props}
|
||||
key={props.building.building_id}
|
||||
key={props.building && props.building.building_id}
|
||||
title="Like Me!"
|
||||
intro="Do you like the building and think it contributes to the city?"
|
||||
help="https://pages.colouring.london/likeme"
|
||||
|
||||
@ -2,8 +2,6 @@ import React from 'react';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Sidebar from './sidebar';
|
||||
|
||||
import './categories.css'
|
||||
|
||||
const Categories = (props) => (
|
||||
@ -124,11 +122,15 @@ Categories.propTypes = {
|
||||
building_id: PropTypes.number
|
||||
}
|
||||
|
||||
const Category = (props) => (
|
||||
const Category = (props) => {
|
||||
let categoryLink = `/${props.mode}/${props.slug}`;
|
||||
if (props.building_id != undefined) categoryLink += `/${props.building_id}`;
|
||||
|
||||
return (
|
||||
<li className={`category-block ${props.slug} background-${props.slug}`}>
|
||||
<NavLink
|
||||
className="category-link"
|
||||
to={`/${props.mode}/${props.slug}/building/${props.building_id}.html`}
|
||||
to={categoryLink}
|
||||
title={
|
||||
(props.inactive)?
|
||||
'Coming soon… Click more info for details.'
|
||||
@ -141,7 +143,8 @@ const Category = (props) => (
|
||||
More
|
||||
</a>
|
||||
</li>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Category.propTypes = {
|
||||
title: PropTypes.string,
|
||||
|
||||
@ -6,17 +6,17 @@ import { BackIcon, EditIcon, ViewIcon }from '../components/icons';
|
||||
|
||||
const ContainerHeader: React.FunctionComponent<any> = (props) => (
|
||||
<header className={`section-header view ${props.cat} background-${props.cat}`}>
|
||||
<Link className="icon-button back" to="/view/categories.html">
|
||||
<Link className="icon-button back" to={`/${props.mode}/categories${props.building != undefined ? `/${props.building.building_id}` : ''}`}>
|
||||
<BackIcon />
|
||||
</Link>
|
||||
<h2 className="h2">{props.title}</h2>
|
||||
<nav className="icon-buttons">
|
||||
{
|
||||
(!props.inactive)?
|
||||
props.building != undefined && !props.inactive ?
|
||||
props.copy.copying?
|
||||
<Fragment>
|
||||
<NavLink
|
||||
to={`/multi-edit/${props.cat}.html?data=${props.data_string}`}
|
||||
to={`/multi-edit/${props.cat}?data=${props.data_string}`}
|
||||
className="icon-button copy">
|
||||
Copy selected
|
||||
</NavLink>
|
||||
@ -45,19 +45,19 @@ const ContainerHeader: React.FunctionComponent<any> = (props) => (
|
||||
: null
|
||||
}
|
||||
{
|
||||
!props.inactive && !props.copy.copying?
|
||||
props.building != undefined && !props.inactive && !props.copy.copying?
|
||||
(props.mode === 'edit')?
|
||||
<NavLink
|
||||
className="icon-button view"
|
||||
title="View data"
|
||||
to={`/view/${props.cat}/building/${props.building.building_id}.html`}>
|
||||
to={`/view/${props.cat}/${props.building.building_id}`}>
|
||||
View
|
||||
<ViewIcon />
|
||||
</NavLink>
|
||||
: <NavLink
|
||||
className="icon-button edit"
|
||||
title="Edit data"
|
||||
to={`/edit/${props.cat}/building/${props.building.building_id}.html`}>
|
||||
to={`/edit/${props.cat}/${props.building.building_id}`}>
|
||||
Edit
|
||||
<EditIcon />
|
||||
</NavLink>
|
||||
|
||||
@ -2,9 +2,7 @@ import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Redirect } from 'react-router-dom';
|
||||
|
||||
import BuildingNotFound from './building-not-found';
|
||||
import ContainerHeader from './container-header';
|
||||
import Sidebar from './sidebar';
|
||||
import ErrorBox from '../components/error-box';
|
||||
import InfoBox from '../components/info-box';
|
||||
|
||||
@ -198,8 +196,7 @@ const withCopyEdit = (WrappedComponent) => {
|
||||
toggleCopyAttribute: this.toggleCopyAttribute,
|
||||
copyingKey: (key) => this.state.keys_to_copy[key]
|
||||
}
|
||||
return this.props.building?
|
||||
<Sidebar>
|
||||
return (
|
||||
<section
|
||||
id={this.props.slug}
|
||||
className="data-section">
|
||||
@ -207,51 +204,54 @@ const withCopyEdit = (WrappedComponent) => {
|
||||
{...this.props}
|
||||
data_string={data_string}
|
||||
copy={copy}
|
||||
/>
|
||||
<form
|
||||
action={`/edit/${this.props.slug}/building/${this.props.building.building_id}.html`}
|
||||
method="POST"
|
||||
onSubmit={this.handleSubmit}>
|
||||
<ErrorBox msg={this.state.error} />
|
||||
{
|
||||
(this.props.mode === 'edit' && this.props.inactive)?
|
||||
<InfoBox
|
||||
msg={`We're not collecting data on ${this.props.title.toLowerCase()} yet - check back soon.`}
|
||||
/>
|
||||
{
|
||||
this.props.building != undefined ?
|
||||
<form
|
||||
action={`/edit/${this.props.slug}/${this.props.building.building_id}`}
|
||||
method="POST"
|
||||
onSubmit={this.handleSubmit}>
|
||||
<ErrorBox msg={this.state.error} />
|
||||
{
|
||||
(this.props.mode === 'edit' && this.props.inactive) ?
|
||||
<InfoBox
|
||||
msg={`We're not collecting data on ${this.props.title.toLowerCase()} yet - check back soon.`}
|
||||
/>
|
||||
: null
|
||||
}
|
||||
<WrappedComponent
|
||||
building={this.state.building}
|
||||
mode={this.props.mode}
|
||||
copy={copy}
|
||||
onChange={this.handleChange}
|
||||
onCheck={this.handleCheck}
|
||||
onLike={this.handleLike}
|
||||
onUpdate={this.handleUpdate}
|
||||
: null
|
||||
}
|
||||
<WrappedComponent
|
||||
building={this.state.building}
|
||||
mode={this.props.mode}
|
||||
copy={copy}
|
||||
onChange={this.handleChange}
|
||||
onCheck={this.handleCheck}
|
||||
onLike={this.handleLike}
|
||||
onUpdate={this.handleUpdate}
|
||||
/>
|
||||
{
|
||||
(this.props.mode === 'edit' && !this.props.inactive)?
|
||||
<Fragment>
|
||||
<InfoBox
|
||||
msg="Colouring may take a few seconds - try zooming the map or hitting refresh after saving (we're working on making this smoother)." />
|
||||
{
|
||||
this.props.slug === 'like'? // special-case for likes
|
||||
null :
|
||||
<div className="buttons-container">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</Fragment>
|
||||
: null
|
||||
}
|
||||
</form>
|
||||
{
|
||||
(this.props.mode === 'edit' && !this.props.inactive) ?
|
||||
<Fragment>
|
||||
<InfoBox
|
||||
msg="Colouring may take a few seconds - try zooming the map or hitting refresh after saving (we're working on making this smoother)." />
|
||||
{
|
||||
this.props.slug === 'like' ? // special-case for likes
|
||||
null :
|
||||
<div className="buttons-container">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</Fragment>
|
||||
: null
|
||||
}
|
||||
</form>
|
||||
: <InfoBox msg="Select a building to view data"></InfoBox>
|
||||
}
|
||||
</section>
|
||||
</Sidebar>
|
||||
: <BuildingNotFound mode="view" />
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user