From b716e8a509953bc025ddf6104254b51146220285 Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Fri, 5 Oct 2018 18:41:12 +0100
Subject: [PATCH] Fix tooltips and linking

---
 app/src/frontend/building-edit.js | 39 +++++++++++++++++++++++++++----
 app/src/frontend/building-view.js |  4 ++--
 app/src/frontend/main.css         |  2 ++
 app/src/frontend/tooltip.js       |  2 +-
 4 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/app/src/frontend/building-edit.js b/app/src/frontend/building-edit.js
index 6c0c4fc4..af3c2b96 100644
--- a/app/src/frontend/building-edit.js
+++ b/app/src/frontend/building-edit.js
@@ -5,6 +5,7 @@ import queryString from 'query-string';
 import ErrorBox from './error-box';
 import InfoBox from './info-box';
 import Sidebar from './sidebar';
+import Tooltip from './tooltip';
 import { HelpIcon, CloseIcon, SaveIcon } from './icons';
 
 import CONFIG from './fields-config.json';
@@ -29,7 +30,8 @@ const BuildingEdit = (props) => {
         queryString.parse(props.location.search):
         {};
     return (
-        <Sidebar title={`Edit Building`} back={`/building/${props.building_id}.html`}>
+        <Sidebar title={`Edit Building`}
+            back={search.cat? `/building/${props.building_id}.html?cat=${search.cat}`: `/building//${props.building_id}.html`}>
             {
                 CONFIG.map((conf_props) => {
                     return <EditForm
@@ -143,6 +145,10 @@ class EditForm extends Component {
                                         el = <TextInput {...props} handleChange={this.handleChange}
                                                 value={this.state[props.slug]} key={props.slug} />
                                         break;
+                                    case "text_list":
+                                        el = <TextListInput {...props} handleChange={this.handleChange}
+                                                value={this.state[props.slug]} key={props.slug} />
+                                        break;
                                     case "number":
                                         el = <NumberInput {...props} handleChange={this.handleChange}
                                                 value={this.state[props.slug]} key={props.slug} />
@@ -162,7 +168,7 @@ class EditForm extends Component {
                             (this.props.inactive)?
                             null : (
                                 <div className="buttons-container">
-                                    <Link to={`/building/${this.props.building_id}.html#${this.props.slug}`}
+                                    <Link to={`/building/${this.props.building_id}.html?cat=${this.props.slug}`}
                                         className="btn btn-secondary">Cancel</Link>
                                     <button type="submit" className="btn btn-primary">Save</button>
                                 </div>
@@ -178,7 +184,7 @@ class EditForm extends Component {
 
 const TextInput = (props) => (
     <Fragment>
-        <label htmlFor={props.slug}>{props.title}</label>
+        <Label slug={props.slug} title={props.title} tooltip={props.tooltip} />
         <input className="form-control" type="text"
             id={props.slug} name={props.slug}
             value={props.value || ""}
@@ -187,9 +193,27 @@ const TextInput = (props) => (
     </Fragment>
 );
 
+const TextListInput = (props) => (
+    <Fragment>
+        <Label slug={props.slug} title={props.title} tooltip={props.tooltip} />
+        <select className="form-control"
+            id={props.slug} name={props.slug}
+            value={props.value || ""}
+            list={`${props.slug}_suggestions`}
+            onChange={props.handleChange}>
+            <option value="">Select a source</option>
+            {
+                props.options.map(option => (
+                    <option value={option}>{option}</option>
+                ))
+            }
+        </select>
+    </Fragment>
+)
+
 const NumberInput = (props) => (
     <Fragment>
-        <label htmlFor={props.slug}>{props.title}</label>
+        <Label slug={props.slug} title={props.title} tooltip={props.tooltip} />
         <input className="form-control" type="number" step={props.step}
             id={props.slug} name={props.slug}
             value={props.value || ""}
@@ -211,4 +235,11 @@ const LikeButton = (props) => (
     </Fragment>
 );
 
+const Label = (props) => (
+    <label htmlFor={props.slug}>
+        {props.title}
+        { props.tooltip? <Tooltip text={ props.tooltip } /> : null }
+    </label>
+)
+
 export default BuildingEdit;
diff --git a/app/src/frontend/building-view.js b/app/src/frontend/building-view.js
index 757ca20d..a4afccb5 100644
--- a/app/src/frontend/building-view.js
+++ b/app/src/frontend/building-view.js
@@ -23,7 +23,7 @@ const BuildingView = (props) => {
     }
     const search = (props.location && props.location.search)? queryString.parse(props.location.search): {};
     return (
-        <Sidebar title={`View Building`} back="/map/date_year.html">
+        <Sidebar title={`View Building`} back={search.cat? `/map/${search.cat}.html` : "/map/age.html"}>
             {
                 CONFIG.map(section_props => (
                     <DataSection
@@ -80,7 +80,7 @@ const DataSection = (props) => {
             {
                 (match && !props.inactive)?
                     <div className="buttons-container with-space">
-                        <Link to={`/building/${props.building_id}/edit.html#${props.slug}`} className="btn btn-primary">Edit data</Link>
+                        <Link to={`/building/${props.building_id}/edit.html?cat=${props.slug}`} className="btn btn-primary">Edit data</Link>
                     </div>
                 : null
             }
diff --git a/app/src/frontend/main.css b/app/src/frontend/main.css
index b284eb3f..8ea020c1 100755
--- a/app/src/frontend/main.css
+++ b/app/src/frontend/main.css
@@ -100,6 +100,7 @@
 .icon-button.help:hover svg {
     color: rgb(0, 81, 255)
 }
+.icon-button.tooltip-hint.active svg,
 .icon-button.tooltip-hint:hover svg {
     color: rgb(255, 11, 245);
 }
@@ -155,6 +156,7 @@
 }
 .data-list dt,
 .data-section label {
+    display: block;
     margin: 0.5em 0 0;
     font-size: 0.8333rem;
     font-weight: normal;
diff --git a/app/src/frontend/tooltip.js b/app/src/frontend/tooltip.js
index 3fd7e8e9..dee1be1b 100644
--- a/app/src/frontend/tooltip.js
+++ b/app/src/frontend/tooltip.js
@@ -23,7 +23,7 @@ class Tooltip extends Component {
         console.log(this.state, this.props)
         return (
             <div className="tooltip-wrap">
-                <button className="tooltip-hint icon-button" title={this.props.text}
+                <button className={(this.state.active? "active ": "") + "tooltip-hint icon-button"} title={this.props.text}
                         onClick={this.handleClick}>
                     <InfoIcon />
                 </button>