Sketch out hardcoded multi-edit
This commit is contained in:
parent
06c63c7272
commit
60371afd03
@ -8,6 +8,7 @@ import './app.css';
|
|||||||
import AboutPage from './about';
|
import AboutPage from './about';
|
||||||
import BuildingEdit from './building-edit';
|
import BuildingEdit from './building-edit';
|
||||||
import BuildingView from './building-view';
|
import BuildingView from './building-view';
|
||||||
|
import MultiEdit from './multi-edit';
|
||||||
import ColouringMap from './map';
|
import ColouringMap from './map';
|
||||||
import Header from './header';
|
import Header from './header';
|
||||||
import Overview from './overview';
|
import Overview from './overview';
|
||||||
@ -31,15 +32,20 @@ import Welcome from './welcome';
|
|||||||
class App extends React.Component {
|
class App extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
// set building revision id, default 0
|
||||||
|
const rev = (props.building)? props.building.revision_id : 0;
|
||||||
this.state = {
|
this.state = {
|
||||||
user: props.user,
|
user: props.user,
|
||||||
building: props.building,
|
building: props.building,
|
||||||
building_like: props.building_like
|
building_like: props.building_like,
|
||||||
|
revision_id: rev
|
||||||
};
|
};
|
||||||
this.login = this.login.bind(this);
|
this.login = this.login.bind(this);
|
||||||
this.updateUser = this.updateUser.bind(this);
|
this.updateUser = this.updateUser.bind(this);
|
||||||
this.logout = this.logout.bind(this);
|
this.logout = this.logout.bind(this);
|
||||||
this.selectBuilding = this.selectBuilding.bind(this);
|
this.selectBuilding = this.selectBuilding.bind(this);
|
||||||
|
this.colourBuilding = this.colourBuilding.bind(this);
|
||||||
|
this.increaseRevision = this.increaseRevision.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
login(user) {
|
login(user) {
|
||||||
@ -58,8 +64,16 @@ class App extends React.Component {
|
|||||||
this.setState({user: undefined});
|
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) {
|
selectBuilding(building) {
|
||||||
// get UPRNs and update
|
this.increaseRevision(building.revision_id);
|
||||||
|
// get UPRNs and update
|
||||||
fetch(`/building/${building.building_id}/uprns.json`, {
|
fetch(`/building/${building.building_id}/uprns.json`, {
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
headers:{
|
headers:{
|
||||||
@ -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() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
@ -122,6 +158,12 @@ class App extends React.Component {
|
|||||||
mode='edit' user={this.state.user}
|
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) => (
|
<Route exact path="/view/:cat/building/:building.html" render={(props) => (
|
||||||
<BuildingView
|
<BuildingView
|
||||||
{...props}
|
{...props}
|
||||||
@ -141,11 +183,13 @@ class App extends React.Component {
|
|||||||
) } />
|
) } />
|
||||||
</Switch>
|
</Switch>
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route exact path="/(edit.*|view.*)?" render={(props) => (
|
<Route exact path="/(multi-edit.*|edit.*|view.*)?" render={(props) => (
|
||||||
<ColouringMap
|
<ColouringMap
|
||||||
{...props}
|
{...props}
|
||||||
building={this.state.building}
|
building={this.state.building}
|
||||||
|
revision_id={this.state.revision_id}
|
||||||
selectBuilding={this.selectBuilding}
|
selectBuilding={this.selectBuilding}
|
||||||
|
colourBuilding={this.colourBuilding}
|
||||||
/>
|
/>
|
||||||
) } />
|
) } />
|
||||||
<Route exact path="/about.html" component={AboutPage} />
|
<Route exact path="/about.html" component={AboutPage} />
|
||||||
|
@ -20,3 +20,6 @@
|
|||||||
border: 1px solid #fff;
|
border: 1px solid #fff;
|
||||||
box-shadow: 0 0 1px 1px #222;
|
box-shadow: 0 0 1px 1px #222;
|
||||||
}
|
}
|
||||||
|
.leaflet-grab {
|
||||||
|
cursor: crosshair;
|
||||||
|
}
|
||||||
|
@ -29,6 +29,7 @@ class ColouringMap extends Component {
|
|||||||
this.handleClick = this.handleClick.bind(this);
|
this.handleClick = this.handleClick.bind(this);
|
||||||
this.handleLocate = this.handleLocate.bind(this);
|
this.handleLocate = this.handleLocate.bind(this);
|
||||||
this.themeSwitch = this.themeSwitch.bind(this);
|
this.themeSwitch = this.themeSwitch.bind(this);
|
||||||
|
this.getMode = this.getMode.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleLocate(lat, lng, zoom){
|
handleLocate(lat, lng, zoom){
|
||||||
@ -39,9 +40,14 @@ class ColouringMap extends Component {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
handleClick(e) {
|
getMode() {
|
||||||
const isEdit = this.props.match.url.match('edit')
|
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 lat = e.latlng.lat
|
||||||
const lng = e.latlng.lng
|
const lng = e.latlng.lng
|
||||||
const newCat = parseCategoryURL(this.props.match.url);
|
const newCat = parseCategoryURL(this.props.match.url);
|
||||||
@ -53,8 +59,13 @@ class ColouringMap extends Component {
|
|||||||
).then(function(data){
|
).then(function(data){
|
||||||
if (data && data.length){
|
if (data && data.length){
|
||||||
const building = data[0];
|
const building = data[0];
|
||||||
this.props.selectBuilding(building);
|
if (mode === 'multi') {
|
||||||
this.props.history.push(`/${mode}/${mapCat}/building/${building.building_id}.html`);
|
// colour building directly
|
||||||
|
this.props.colourBuilding(building);
|
||||||
|
} else {
|
||||||
|
this.props.selectBuilding(building);
|
||||||
|
this.props.history.push(`/${mode}/${map_cat}/building/${building.building_id}.html`);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
// deselect but keep/return to expected colour theme
|
// deselect but keep/return to expected colour theme
|
||||||
this.props.selectBuilding(undefined);
|
this.props.selectBuilding(undefined);
|
||||||
@ -94,8 +105,8 @@ class ColouringMap extends Component {
|
|||||||
}
|
}
|
||||||
const tileset = tilesetByCat[cat];
|
const tileset = tilesetByCat[cat];
|
||||||
// pick revision id to bust browser cache
|
// pick revision id to bust browser cache
|
||||||
const rev = this.props.building? this.props.building.revision_id : '';
|
const rev = this.props.revision_id;
|
||||||
const dataLayer = tileset?
|
const dataLayer = data_tileset?
|
||||||
<TileLayer
|
<TileLayer
|
||||||
key={tileset}
|
key={tileset}
|
||||||
url={`/tiles/${tileset}/{z}/{x}/{y}.png?rev=${rev}`}
|
url={`/tiles/${tileset}/{z}/{x}/{y}.png?rev=${rev}`}
|
||||||
|
25
app/src/frontend/multi-edit.js
Normal file
25
app/src/frontend/multi-edit.js
Normal 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;
|
Loading…
Reference in New Issue
Block a user