Sketch out hardcoded multi-edit

This commit is contained in:
Tom Russell 2019-05-09 09:16:36 +01:00
parent 06c63c7272
commit 60371afd03
4 changed files with 92 additions and 9 deletions

View File

@ -8,6 +8,7 @@ import './app.css';
import AboutPage from './about';
import BuildingEdit from './building-edit';
import BuildingView from './building-view';
import MultiEdit from './multi-edit';
import ColouringMap from './map';
import Header from './header';
import Overview from './overview';
@ -31,15 +32,20 @@ import Welcome from './welcome';
class App extends React.Component {
constructor(props) {
super(props);
// set building revision id, default 0
const rev = (props.building)? props.building.revision_id : 0;
this.state = {
user: props.user,
building: props.building,
building_like: props.building_like
building_like: props.building_like,
revision_id: rev
};
this.login = this.login.bind(this);
this.updateUser = this.updateUser.bind(this);
this.logout = this.logout.bind(this);
this.selectBuilding = this.selectBuilding.bind(this);
this.colourBuilding = this.colourBuilding.bind(this);
this.increaseRevision = this.increaseRevision.bind(this);
}
login(user) {
@ -58,7 +64,15 @@ class App extends React.Component {
this.setState({user: undefined});
}
increaseRevision(revision_id) {
// bump revision id, only ever increasing
if (revision_id > this.state.revision_id){
this.setState({revision_id: revision_id})
}
}
selectBuilding(building) {
this.increaseRevision(building.revision_id);
// get UPRNs and update
fetch(`/building/${building.building_id}/uprns.json`, {
method: 'GET',
@ -101,6 +115,28 @@ class App extends React.Component {
});
}
colourBuilding(building) {
fetch(`/building/${building.building_id}.json`, {
method: 'POST',
body: JSON.stringify({date_year: 1999}), // TODO link to multi/pass in data
headers:{
'Content-Type': 'application/json'
},
credentials: 'same-origin'
}).then(
res => res.json()
).then(res => {
if (res.error) {
console.error({error: res.error})
} else {
console.log(res);
this.increaseRevision(res.revision_id);
}
}).catch(
(err) => console.error({error: err})
);
}
render() {
return (
<Fragment>
@ -122,6 +158,12 @@ class App extends React.Component {
mode='edit' user={this.state.user}
/>
) } />
<Route exact path="/multi-edit/:cat.html" render={(props) => (
<MultiEdit
{...props}
user={this.state.user}
/>
) } />
<Route exact path="/view/:cat/building/:building.html" render={(props) => (
<BuildingView
{...props}
@ -141,11 +183,13 @@ class App extends React.Component {
) } />
</Switch>
<Switch>
<Route exact path="/(edit.*|view.*)?" render={(props) => (
<Route exact path="/(multi-edit.*|edit.*|view.*)?" render={(props) => (
<ColouringMap
{...props}
building={this.state.building}
revision_id={this.state.revision_id}
selectBuilding={this.selectBuilding}
colourBuilding={this.colourBuilding}
/>
) } />
<Route exact path="/about.html" component={AboutPage} />

View File

@ -20,3 +20,6 @@
border: 1px solid #fff;
box-shadow: 0 0 1px 1px #222;
}
.leaflet-grab {
cursor: crosshair;
}

View File

@ -29,6 +29,7 @@ class ColouringMap extends Component {
this.handleClick = this.handleClick.bind(this);
this.handleLocate = this.handleLocate.bind(this);
this.themeSwitch = this.themeSwitch.bind(this);
this.getMode = this.getMode.bind(this);
}
handleLocate(lat, lng, zoom){
@ -39,9 +40,14 @@ class ColouringMap extends Component {
})
}
handleClick(e) {
getMode() {
const isEdit = this.props.match.url.match('edit')
const mode = isEdit? 'edit': 'view';
const isMulti = this.props.match.url.match('multi')
return isEdit? (isMulti? 'multi' : 'edit') : 'view';
}
handleClick(e) {
const mode = this.getMode()
const lat = e.latlng.lat
const lng = e.latlng.lng
const newCat = parseCategoryURL(this.props.match.url);
@ -53,8 +59,13 @@ class ColouringMap extends Component {
).then(function(data){
if (data && data.length){
const building = data[0];
if (mode === 'multi') {
// colour building directly
this.props.colourBuilding(building);
} else {
this.props.selectBuilding(building);
this.props.history.push(`/${mode}/${mapCat}/building/${building.building_id}.html`);
this.props.history.push(`/${mode}/${map_cat}/building/${building.building_id}.html`);
}
} else {
// deselect but keep/return to expected colour theme
this.props.selectBuilding(undefined);
@ -94,8 +105,8 @@ class ColouringMap extends Component {
}
const tileset = tilesetByCat[cat];
// pick revision id to bust browser cache
const rev = this.props.building? this.props.building.revision_id : '';
const dataLayer = tileset?
const rev = this.props.revision_id;
const dataLayer = data_tileset?
<TileLayer
key={tileset}
url={`/tiles/${tileset}/{z}/{x}/{y}.png?rev=${rev}`}

View File

@ -0,0 +1,25 @@
import React from 'react';
import { Redirect } from 'react-router-dom';
import Sidebar from './sidebar';
import { parseCategoryURL } from '../parse';
const MultiEdit = (props) => {
if (!props.user){
return <Redirect to="/sign-up.html" />
}
const cat = parseCategoryURL(props.match.url);
return (
<Sidebar
title={`Quick edit`}
back={`/edit/${cat}.html`}>
<section className="data-section">
<p className="data-intro">Click a building to colour</p>
<p className="data-intro">Set <strong>Year built</strong> to <strong>1999</strong></p>
</section>
</Sidebar>
);
}
export default MultiEdit;