Switch to JSON in URL for copy

In preparation for multi-attribute copy.
This commit is contained in:
Tom Russell 2019-08-01 10:29:32 +01:00
parent 4105ad93a8
commit 00687dbaed
4 changed files with 96 additions and 70 deletions

View File

@ -118,16 +118,22 @@ class App extends React.Component {
}); });
} }
/**
* Colour building
*
* Used in multi-edit mode to colour buildings on map click
*
* Pulls data from URL to form update
*
* @param {object} building
*/
colourBuilding(building) { colourBuilding(building) {
const cat = parseCategoryURL(window.location.pathname); const cat = parseCategoryURL(window.location.pathname);
const q = parse(window.location.search); const q = parse(window.location.search);
let data; const data = (cat === 'like')? {like: true}: JSON.parse(q.data);
if (cat === 'like'){ if (cat === 'like'){
data = {like: true}
this.likeBuilding(building.building_id) this.likeBuilding(building.building_id)
} else { } else {
data = {}
data[q.k] = q.v;
this.updateBuilding(building.building_id, data) this.updateBuilding(building.building_id, data)
} }
} }

View File

@ -564,21 +564,26 @@ LikeButton.propTypes = {
handleLike: PropTypes.func handleLike: PropTypes.func
} }
const Label = (props) => ( const Label = (props) => {
<label htmlFor={props.slug}> const data = {};
{props.title} data[props.slug] = props.value;
{ props.tooltip? <Tooltip text={ props.tooltip } /> : null } const data_string = JSON.stringify(data);
{ (props.cat && props.slug && !props.disabled)? return (
<div className="icon-buttons"> <label htmlFor={props.slug}>
<NavLink {props.title}
to={`/multi-edit/${props.cat}.html?k=${props.slug}&v=${props.value}`} { props.tooltip? <Tooltip text={ props.tooltip } /> : null }
className="icon-button copy"> { (props.cat && props.slug && !props.disabled)?
Copy <div className="icon-buttons">
</NavLink> <NavLink
</div> : null to={`/multi-edit/${props.cat}.html?data=${data_string}`}
} className="icon-button copy">
</label> Copy
); </NavLink>
</div> : null
}
</label>
);
}
Label.propTypes = { Label.propTypes = {
slug: PropTypes.string, slug: PropTypes.string,

View File

@ -135,30 +135,35 @@ DataSection.propTypes = {
children: PropTypes.node children: PropTypes.node
} }
const DataEntry = (props) => ( const DataEntry = (props) => {
<Fragment> const data = {};
<dt> data[props.slug] = props.value;
{ props.title } const data_string = JSON.stringify(data);
{ props.tooltip? <Tooltip text={ props.tooltip } /> : null } return (
{ (props.cat && props.slug && !props.disabled)? <Fragment>
<div className="icon-buttons"> <dt>
<NavLink { props.title }
to={`/multi-edit/${props.cat}.html?k=${props.slug}&v=${props.value}`} { props.tooltip? <Tooltip text={ props.tooltip } /> : null }
className="icon-button copy"> { (props.cat && props.slug && !props.disabled)?
Copy <div className="icon-buttons">
</NavLink> <NavLink
</div> to={`/multi-edit/${props.cat}.html?data=${data_string}`}
: null className="icon-button copy">
} Copy
</dt> </NavLink>
<dd>{ </div>
(props.value != null && props.value !== '')? : null
(typeof(props.value) === 'boolean')? }
(props.value)? 'Yes' : 'No' </dt>
: props.value <dd>{
: '\u00A0'}</dd> (props.value != null && props.value !== '')?
</Fragment> (typeof(props.value) === 'boolean')?
); (props.value)? 'Yes' : 'No'
: props.value
: '\u00A0'}</dd>
</Fragment>
);
}
DataEntry.propTypes = { DataEntry.propTypes = {
title: PropTypes.string, title: PropTypes.string,
@ -169,33 +174,36 @@ DataEntry.propTypes = {
value: PropTypes.any value: PropTypes.any
} }
const LikeDataEntry = (props) => ( const LikeDataEntry = (props) => {
<Fragment> const data_string = JSON.stringify({like: true});
<dt> (
{ props.title } <Fragment>
{ props.tooltip? <Tooltip text={ props.tooltip } /> : null } <dt>
<div className="icon-buttons"> { props.title }
<NavLink { props.tooltip? <Tooltip text={ props.tooltip } /> : null }
to={`/multi-edit/${props.cat}.html?k=like&v=${true}`} <div className="icon-buttons">
className="icon-button copy"> <NavLink
Copy to={`/multi-edit/${props.cat}.html?data=${data_string}`}
</NavLink> className="icon-button copy">
</div> Copy
</dt> </NavLink>
<dd> </div>
</dt>
<dd>
{
(props.value != null)?
(props.value === 1)?
`${props.value} person likes this building`
: `${props.value} people like this building`
: '\u00A0'
}
</dd>
{ {
(props.value != null)? (props.user_building_like)? <dd>&hellip;including you!</dd> : null
(props.value === 1)?
`${props.value} person likes this building`
: `${props.value} people like this building`
: '\u00A0'
} }
</dd> </Fragment>
{ );
(props.user_building_like)? <dd>&hellip;including you!</dd> : null }
}
</Fragment>
);
LikeDataEntry.propTypes = { LikeDataEntry.propTypes = {
title: PropTypes.string, title: PropTypes.string,

View File

@ -34,7 +34,7 @@ const MultiEdit = (props) => {
} }
const q = parse(props.location.search); const q = parse(props.location.search);
const label = fieldTitleFromSlug(q.k); const data = JSON.parse(q.data)
const title = sectionTitleFromCat(cat); const title = sectionTitleFromCat(cat);
return ( return (
<Sidebar <Sidebar
@ -44,7 +44,14 @@ const MultiEdit = (props) => {
<header className={`section-header view ${cat} active`}> <header className={`section-header view ${cat} active`}>
<a><h3 className="h3">{title}</h3></a> <a><h3 className="h3">{title}</h3></a>
</header> </header>
<p class='data-intro'>Set <strong>{label}</strong> to <strong>{q.v}</strong></p> {
Object.keys(data).map((key => {
const label = fieldTitleFromSlug(key);
return (<p className='data-intro' key={key}>
Set <strong>{label}</strong> to <strong>{data[key]}</strong>
</p>)
}))
}
<form className='buttons-container'> <form className='buttons-container'>
<InfoBox msg='Click buildings to colour' /> <InfoBox msg='Click buildings to colour' />