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

Allow no selection in categories/building-view

Browse Source
This commit is contained in:
Maciej Ziarkowski 2019-09-09 01:10:52 +01:00
parent b9648c47af
commit 4bfee10508
4 changed files with 72 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,15 +21,11 @@ import LikeContainer from './data-containers/like';
* @param props * @param props
*/ */
const BuildingView = (props) => { const BuildingView = (props) => {
if (typeof(props.building) === "undefined"){
return <BuildingNotFound mode="view" />
}
switch (props.cat) { switch (props.cat) {
case 'location': case 'location':
return <LocationContainer return <LocationContainer
{...props} {...props}
key={props.building.building_id} key={props.building && props.building.building_id}
title="Location" title="Location"
help="https://pages.colouring.london/location" help="https://pages.colouring.london/location"
intro="Where are the buildings? Address, location and cross-references." intro="Where are the buildings? Address, location and cross-references."
@ -37,7 +33,7 @@ const BuildingView = (props) => {
case 'use': case 'use':
return <UseContainer return <UseContainer
{...props} {...props}
key={props.building.building_id} key={props.building && props.building.building_id}
inactive={true} inactive={true}
title="Land Use" title="Land Use"
intro="How are buildings used, and how does use change over time? Coming soon…" intro="How are buildings used, and how does use change over time? Coming soon…"
@ -46,7 +42,7 @@ const BuildingView = (props) => {
case 'type': case 'type':
return <TypeContainer return <TypeContainer
{...props} {...props}
key={props.building.building_id} key={props.building && props.building.building_id}
inactive={true} inactive={true}
title="Type" title="Type"
intro="How were buildings previously used? Coming soon…" intro="How were buildings previously used? Coming soon…"
@ -55,7 +51,7 @@ const BuildingView = (props) => {
case 'age': case 'age':
return <AgeContainer return <AgeContainer
{...props} {...props}
key={props.building.building_id} key={props.building && props.building.building_id}
title="Age" title="Age"
help="https://pages.colouring.london/age" help="https://pages.colouring.london/age"
intro="Building age data can support energy analysis and help predict long-term change." intro="Building age data can support energy analysis and help predict long-term change."
@ -63,7 +59,7 @@ const BuildingView = (props) => {
case 'size': case 'size':
return <SizeContainer return <SizeContainer
{...props} {...props}
key={props.building.building_id} key={props.building && props.building.building_id}
title="Size &amp; Shape" title="Size &amp; Shape"
intro="How big are buildings?" intro="How big are buildings?"
help="https://pages.colouring.london/shapeandsize" help="https://pages.colouring.london/shapeandsize"
@ -71,7 +67,7 @@ const BuildingView = (props) => {
case 'construction': case 'construction':
return <ConstructionContainer return <ConstructionContainer
{...props} {...props}
key={props.building.building_id} key={props.building && props.building.building_id}
title="Construction" title="Construction"
intro="How are buildings built? Coming soon…" intro="How are buildings built? Coming soon…"
help="https://pages.colouring.london/construction" help="https://pages.colouring.london/construction"
@ -80,7 +76,7 @@ const BuildingView = (props) => {
case 'team': case 'team':
return <TeamContainer return <TeamContainer
{...props} {...props}
key={props.building.building_id} key={props.building && props.building.building_id}
title="Team" title="Team"
intro="Who built the buildings? Coming soon…" intro="Who built the buildings? Coming soon…"
help="https://pages.colouring.london/team" help="https://pages.colouring.london/team"
@ -89,7 +85,7 @@ const BuildingView = (props) => {
case 'sustainability': case 'sustainability':
return <SustainabilityContainer return <SustainabilityContainer
{...props} {...props}
key={props.building.building_id} key={props.building && props.building.building_id}
title="Sustainability" title="Sustainability"
intro="Are buildings energy efficient? Coming soon…" intro="Are buildings energy efficient? Coming soon…"
help="https://pages.colouring.london/sustainability" help="https://pages.colouring.london/sustainability"
@ -98,7 +94,7 @@ const BuildingView = (props) => {
case 'greenery': case 'greenery':
return <GreeneryContainer return <GreeneryContainer
{...props} {...props}
key={props.building.building_id} key={props.building && props.building.building_id}
title="Greenery" title="Greenery"
intro="Is there greenery nearby? Coming soon…" intro="Is there greenery nearby? Coming soon…"
help="https://pages.colouring.london/greenery" help="https://pages.colouring.london/greenery"
@ -107,7 +103,7 @@ const BuildingView = (props) => {
case 'community': case 'community':
return <CommunityContainer return <CommunityContainer
{...props} {...props}
key={props.building.building_id} key={props.building && props.building.building_id}
title="Community" title="Community"
intro="How does this building work for the local community?" intro="How does this building work for the local community?"
help="https://pages.colouring.london/community" help="https://pages.colouring.london/community"
@ -116,7 +112,7 @@ const BuildingView = (props) => {
case 'planning': case 'planning':
return <PlanningContainer return <PlanningContainer
{...props} {...props}
key={props.building.building_id} key={props.building && props.building.building_id}
title="Planning" title="Planning"
intro="Planning controls relating to protection and reuse." intro="Planning controls relating to protection and reuse."
help="https://pages.colouring.london/planning" help="https://pages.colouring.london/planning"
@ -124,7 +120,7 @@ const BuildingView = (props) => {
case 'like': case 'like':
return <LikeContainer return <LikeContainer
{...props} {...props}
key={props.building.building_id} key={props.building && props.building.building_id}
title="Like Me!" title="Like Me!"
intro="Do you like the building and think it contributes to the city?" intro="Do you like the building and think it contributes to the city?"
help="https://pages.colouring.london/likeme" help="https://pages.colouring.london/likeme"

13
app/src/frontend/building/categories.tsx
View File

@ -2,8 +2,6 @@ import React from 'react';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Sidebar from './sidebar';
import './categories.css' import './categories.css'
const Categories = (props) => ( const Categories = (props) => (
@ -124,11 +122,15 @@ Categories.propTypes = {
building_id: PropTypes.number 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}`}> <li className={`category-block ${props.slug} background-${props.slug}`}>
<NavLink <NavLink
className="category-link" className="category-link"
to={`/${props.mode}/${props.slug}/building/${props.building_id}.html`} to={categoryLink}
title={ title={
(props.inactive)? (props.inactive)?
'Coming soon… Click more info for details.' 'Coming soon… Click more info for details.'
@ -141,7 +143,8 @@ const Category = (props) => (
More More
</a> </a>
</li> </li>
) );
}
Category.propTypes = { Category.propTypes = {
title: PropTypes.string, title: PropTypes.string,

12
app/src/frontend/building/container-header.tsx
View File

@ -6,17 +6,17 @@ import { BackIcon, EditIcon, ViewIcon }from '../components/icons';
const ContainerHeader: React.FunctionComponent<any> = (props) => ( const ContainerHeader: React.FunctionComponent<any> = (props) => (
<header className={`section-header view ${props.cat} background-${props.cat}`}> <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 /> <BackIcon />
</Link> </Link>
<h2 className="h2">{props.title}</h2> <h2 className="h2">{props.title}</h2>
<nav className="icon-buttons"> <nav className="icon-buttons">
{ {
(!props.inactive)? props.building != undefined && !props.inactive ?
props.copy.copying? props.copy.copying?
<Fragment> <Fragment>
<NavLink <NavLink
to={`/multi-edit/${props.cat}.html?data=${props.data_string}`} to={`/multi-edit/${props.cat}?data=${props.data_string}`}
className="icon-button copy"> className="icon-button copy">
Copy selected Copy selected
</NavLink> </NavLink>
@ -45,19 +45,19 @@ const ContainerHeader: React.FunctionComponent<any> = (props) => (
: null : null
} }
{ {
!props.inactive && !props.copy.copying? props.building != undefined && !props.inactive && !props.copy.copying?
(props.mode === 'edit')? (props.mode === 'edit')?
<NavLink <NavLink
className="icon-button view" className="icon-button view"
title="View data" title="View data"
to={`/view/${props.cat}/building/${props.building.building_id}.html`}> to={`/view/${props.cat}/${props.building.building_id}`}>
View View
<ViewIcon /> <ViewIcon />
</NavLink> </NavLink>
: <NavLink : <NavLink
className="icon-button edit" className="icon-button edit"
title="Edit data" title="Edit data"
to={`/edit/${props.cat}/building/${props.building.building_id}.html`}> to={`/edit/${props.cat}/${props.building.building_id}`}>
Edit Edit
<EditIcon /> <EditIcon />
</NavLink> </NavLink>

92
app/src/frontend/building/data-container.tsx
View File

@ -2,9 +2,7 @@ import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
import BuildingNotFound from './building-not-found';
import ContainerHeader from './container-header'; import ContainerHeader from './container-header';
import Sidebar from './sidebar';
import ErrorBox from '../components/error-box'; import ErrorBox from '../components/error-box';
import InfoBox from '../components/info-box'; import InfoBox from '../components/info-box';
@ -198,8 +196,7 @@ const withCopyEdit = (WrappedComponent) => {
toggleCopyAttribute: this.toggleCopyAttribute, toggleCopyAttribute: this.toggleCopyAttribute,
copyingKey: (key) => this.state.keys_to_copy[key] copyingKey: (key) => this.state.keys_to_copy[key]
} }
return this.props.building? return (
<Sidebar>
<section <section
id={this.props.slug} id={this.props.slug}
className="data-section"> className="data-section">
@ -207,51 +204,54 @@ const withCopyEdit = (WrappedComponent) => {
{...this.props} {...this.props}
data_string={data_string} data_string={data_string}
copy={copy} copy={copy}
/> />
<form {
action={`/edit/${this.props.slug}/building/${this.props.building.building_id}.html`} this.props.building != undefined ?
method="POST" <form
onSubmit={this.handleSubmit}> action={`/edit/${this.props.slug}/${this.props.building.building_id}`}
<ErrorBox msg={this.state.error} /> method="POST"
{ onSubmit={this.handleSubmit}>
(this.props.mode === 'edit' && this.props.inactive)? <ErrorBox msg={this.state.error} />
<InfoBox {
msg={`We're not collecting data on ${this.props.title.toLowerCase()} yet - check back soon.`} (this.props.mode === 'edit' && this.props.inactive) ?
<InfoBox
msg={`We're not collecting data on ${this.props.title.toLowerCase()} yet - check back soon.`}
/> />
: null : null
} }
<WrappedComponent <WrappedComponent
building={this.state.building} building={this.state.building}
mode={this.props.mode} mode={this.props.mode}
copy={copy} copy={copy}
onChange={this.handleChange} onChange={this.handleChange}
onCheck={this.handleCheck} onCheck={this.handleCheck}
onLike={this.handleLike} onLike={this.handleLike}
onUpdate={this.handleUpdate} onUpdate={this.handleUpdate}
/> />
{ {
(this.props.mode === 'edit' && !this.props.inactive)? (this.props.mode === 'edit' && !this.props.inactive) ?
<Fragment> <Fragment>
<InfoBox <InfoBox
msg="Colouring may take a few seconds - try zooming the map or hitting refresh after saving (we're working on making this smoother)." /> 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 this.props.slug === 'like' ? // special-case for likes
null : null :
<div className="buttons-container"> <div className="buttons-container">
<button <button
type="submit" type="submit"
className="btn btn-primary"> className="btn btn-primary">
Save Save
</button> </button>
</div> </div>
} }
</Fragment> </Fragment>
: null : null
} }
</form> </form>
: <InfoBox msg="Select a building to view data"></InfoBox>
}
</section> </section>
</Sidebar> );
: <BuildingNotFound mode="view" />
} }
} }
} }