Sketch out hardcoded multi-edit

app/src/frontend/app.js

@@ -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,8 +64,16 @@ 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) {
-    // get UPRNs and update
+        this.increaseRevision(building.revision_id);
+        // get UPRNs and update
         fetch(`/building/${building.building_id}/uprns.json`, {
             method: 'GET',
             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() {
         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} />

app/src/frontend/map.css

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

app/src/frontend/map.js

@@ -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];
-                this.props.selectBuilding(building);
-                this.props.history.push(`/${mode}/${mapCat}/building/${building.building_id}.html`);
+                if (mode === 'multi') {
+                    // 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 {
                 // 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}`}

app/src/frontend/multi-edit.js

@@ -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;