From 0c8dc94cb127740eb467ed87a9168e8d7c32ec28 Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Sat, 19 Jan 2019 16:54:20 +0000
Subject: [PATCH] Include checkbox for planning fields

---
 app/src/frontend/building-edit.js | 36 +++++++++++++++++++++++++++++--
 app/src/frontend/styles/forms.css |  1 +
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/app/src/frontend/building-edit.js b/app/src/frontend/building-edit.js
index f6fc4e50..0b4475a5 100644
--- a/app/src/frontend/building-edit.js
+++ b/app/src/frontend/building-edit.js
@@ -53,6 +53,7 @@ class EditForm extends Component {
         this.state.like = this.props.like || undefined;
 
         this.handleChange = this.handleChange.bind(this);
+        this.handleCheck = this.handleCheck.bind(this);
         this.handleLike = this.handleLike.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
         this.handleUpdate = this.handleUpdate.bind(this);
@@ -73,6 +74,21 @@ class EditForm extends Component {
         if (name === 'location_postcode' && value !== null) {
             value = value.toUpperCase();
         }
+        this.setState({
+            [name]: value
+        });
+    }
+
+    /**
+     * Handle changes on checkboxes
+     * - e.g. input[type=checkbox]
+     *
+     * @param {DocumentEvent} event
+     */
+    handleCheck(event) {
+        const target = event.target;
+        const value = target.checked;
+        const name = target.name;
 
         this.setState({
             [name]: value
@@ -208,7 +224,8 @@ class EditForm extends Component {
                                     return <MultiTextInput {...props} handleChange={this.handleUpdate}
                                             value={this.state[props.slug]} key={props.slug} />
                                 case "checkbox":
-                                    return null // TODO checkbox input
+                                    return <CheckboxInput {...props} handleChange={this.handleCheck}
+                                            value={this.state[props.slug]} key={props.slug} />
                                 case "like":
                                     return <LikeButton {...props} handleLike={this.handleLike}
                                             value={this.state[props.slug]} key={props.slug} />
@@ -240,7 +257,7 @@ const TextInput = (props) => (
         <input className="form-control" type="text"
             id={props.slug} name={props.slug}
             value={props.value || ""}
-            maxlength={props.max_length}
+            maxLength={props.max_length}
             disabled={props.disabled}
             placeholder={props.placeholder}
             onChange={props.handleChange}
@@ -360,6 +377,21 @@ const NumberInput = (props) => (
     </Fragment>
 );
 
+const CheckboxInput = (props) => (
+    <div class="form-check">
+        <input className="form-check-input" type="checkbox"
+            id={props.slug} name={props.slug}
+            checked={!!props.value}
+            disabled={props.disabled}
+            onChange={props.handleChange}
+            />
+        <label htmlFor={props.slug} className="form-check-label">
+            {props.title}
+            { props.tooltip? <Tooltip text={ props.tooltip } /> : null }
+        </label>
+    </div>
+)
+
 const LikeButton = (props) => (
     <Fragment>
         <p className="likes">{(props.value)? props.value : 0} likes</p>
diff --git a/app/src/frontend/styles/forms.css b/app/src/frontend/styles/forms.css
index 9796cb6d..b3f205b7 100644
--- a/app/src/frontend/styles/forms.css
+++ b/app/src/frontend/styles/forms.css
@@ -17,6 +17,7 @@ form .alert {
 }
 .form-check-input {
     margin-top: 0.6rem;
+    left: 0;
 }
 label {
     margin: 0.5em 0 0;