From aac52876283d77f3909cc584c86404ccc7e7c96c Mon Sep 17 00:00:00 2001
From: Mateusz Konieczny <matkoniecz@gmail.com>
Date: Mon, 28 Nov 2022 11:02:41 +0100
Subject: [PATCH] rebuild Building protection, Zone menus

---
 .../building/data-containers/planning.tsx     | 451 +++++++++---------
 app/src/frontend/components/info-box.tsx      |   2 +-
 2 files changed, 232 insertions(+), 221 deletions(-)

diff --git a/app/src/frontend/building/data-containers/planning.tsx b/app/src/frontend/building/data-containers/planning.tsx
index 3c3a495b..8bba6c21 100644
--- a/app/src/frontend/building/data-containers/planning.tsx
+++ b/app/src/frontend/building/data-containers/planning.tsx
@@ -3,6 +3,7 @@ import React, { Fragment } from 'react';
 import InfoBox from '../../components/info-box';
 import { dataFields } from '../../config/data-fields-config';
 import CheckboxDataEntry from '../data-components/checkbox-data-entry';
+import { LogicalDataEntry } from '../data-components/logical-data-entry/logical-data-entry';
 import NumericDataEntryWithFormattedLink from '../data-components/numeric-data-entry-with-formatted-link';import DataEntry from '../data-components/data-entry';
 import { DataEntryGroup } from '../data-components/data-entry-group';
 import SelectDataEntry from '../data-components/select-data-entry';
@@ -71,245 +72,66 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 />
             */}
         </DataEntryGroup>
-        <DataEntryGroup name="Planning contraints and building protection" collapsed={false} >
-            <DataEntryGroup name="Building protection" collapsed={false} >
-                <NumericDataEntryWithFormattedLink
-                    title={dataFields.planning_list_id.title}
-                    slug="planning_list_id"
-                    value={props.building.planning_list_id}
-                    mode={props.mode}
-                    copy={props.copy}
-                    onChange={props.onChange}
-                    placeholder="If yes, add ID here"
-                    linkTargetFunction={(id: String) => { return "https://historicengland.org.uk/listing/the-list/list-entry/" + id + "?section=official-list-entry" } }
-                    linkDescriptionFunction={(id: String) => { return "ID Link" } }
-                />
-                <Verification
-                    slug="planning_list_id"
-                    allow_verify={props.user !== undefined && props.building.planning_list_id !== null && !props.edited}
-                    onVerify={props.onVerify}
-                    user_verified={props.user_verified.hasOwnProperty("planning_list_id")}
-                    user_verified_as={props.user_verified.planning_list_id}
-                    verified_count={props.building.verified.planning_list_id}
-                    />
-                <SelectDataEntry
-                    title={dataFields.planning_list_grade.title}
-                    slug="planning_list_grade"
-                    value={props.building.planning_list_grade}
-                    mode={props.mode}
-                    disabled={false}
-                    copy={props.copy}
-                    onChange={props.onChange}
-                    options={[
-                        "I",
-                        "II*",
-                        "II",
-                        "None"
-                    ]}
-                    />
-                <Verification
-                    slug="planning_list_grade"
-                    allow_verify={props.user !== undefined && props.building.planning_list_grade !== null && !props.edited}
-                    onVerify={props.onVerify}
-                    user_verified={props.user_verified.hasOwnProperty("planning_list_grade")}
-                    user_verified_as={props.user_verified.planning_list_grade}
-                    verified_count={props.building.verified.planning_list_grade}
-                    />
-                <DataEntry
-                    title={dataFields.planning_heritage_at_risk_url.title}
-                    slug="planning_heritage_at_risk_url"
-                    value={props.building.planning_heritage_at_risk_url}
-                    mode={props.mode}
-                    copy={props.copy}
-                    onChange={props.onChange}
-                    placeholder="Please add relevant link here"
-                    isUrl={true}
-                    />
-                <Verification
-                    slug="planning_heritage_at_risk_url"
-                    allow_verify={props.user !== undefined && props.building.planning_heritage_at_risk_url !== null && !props.edited}
-                    onVerify={props.onVerify}
-                    user_verified={props.user_verified.hasOwnProperty("planning_heritage_at_risk_url")}
-                    user_verified_as={props.user_verified.planning_heritage_at_risk_url}
-                    verified_count={props.building.verified.planning_heritage_at_risk_url}
-                    />
-                <NumericDataEntryWithFormattedLink
-                    title={dataFields.planning_world_list_id.title}
-                    slug="planning_world_list_id"
-                    value={props.building.planning_world_list_id}
-                    mode={props.mode}
-                    copy={props.copy}
-                    onChange={props.onChange}
-                    placeholder="If yes, add ID here"
-                    linkTargetFunction={(id: String) => { return "https://whc.unesco.org/en/list/" + id } }
-                    linkDescriptionFunction={(id: String) => { return "ID Link" } }
-                    />
-                <Verification
-                    slug="planning_world_list_id"
-                    allow_verify={props.user !== undefined && props.building.planning_world_list_id !== null && !props.edited}
-                    onVerify={props.onVerify}
-                    user_verified={props.user_verified.hasOwnProperty("planning_world_list_id")}
-                    user_verified_as={props.user_verified.planning_world_list_id}
-                    verified_count={props.building.verified.planning_world_list_id}
-                    />
-                <DataEntry
-                    title={dataFields.planning_local_list_url.title}
-                    slug="planning_local_list_url"
-                    value={props.building.planning_local_list_url}
-                    mode={props.mode}
-                    copy={props.copy}
-                    onChange={props.onChange}
-                    isUrl={true}
-                    placeholder="Please add relevant link here"
-                    />
-                <Verification
-                    slug="planning_local_list_url"
-                    allow_verify={props.user !== undefined && props.building.planning_local_list_url !== null && !props.edited}
-                    onVerify={props.onVerify}
-                    user_verified={props.user_verified.hasOwnProperty("planning_local_list_url")}
-                    user_verified_as={props.user_verified.planning_local_list_url}
-                    verified_count={props.building.verified.planning_local_list_url}
-                    />
-            </DataEntryGroup>
-            <DataEntryGroup name="Area protection" collapsed={false} >
-                <DataEntry
-                    title={dataFields.planning_in_conservation_area_id.title}
-                    slug="planning_in_conservation_area_id"
-                    value={props.building.planning_in_conservation_area_id}
-                    mode={props.mode}
-                    copy={props.copy}
-                    onChange={props.onChange}
-                    placeholder="Please add Conservation Area identifier"
-                    />
-                <Verification
-                    slug="planning_in_conservation_area_url"
-                    allow_verify={props.user !== undefined && props.building.planning_in_conservation_area_url !== null && !props.edited}
-                    onVerify={props.onVerify}
-                    user_verified={props.user_verified.hasOwnProperty("planning_in_conservation_area_url")}
-                    user_verified_as={props.user_verified.planning_in_conservation_area_url}
-                    verified_count={props.building.verified.planning_in_conservation_area_url}
-                    />
-                <DataEntry
-                    title={dataFields.planning_in_conservation_area_url.title}
-                    slug="planning_in_conservation_area_url"
-                    value={props.building.planning_in_conservation_area_url}
-                    mode={props.mode}
-                    copy={props.copy}
-                    onChange={props.onChange}
-                    isUrl={true}
-                    placeholder="Please add CA appraisal link here"
-                    />
-                <DataEntry
-                    title={dataFields.planning_conservation_area_name.title}
-                    slug="planning_conservation_area_name"
-                    value={props.building.planning_conservation_area_name}
-                    mode={props.mode}
-                    copy={props.copy}
-                    onChange={props.onChange}
-                    />
-                <Verification
-                    slug="planning_conservation_area_name"
-                    allow_verify={props.user !== undefined && props.building.planning_conservation_area_name !== null && !props.edited}
-                    onVerify={props.onVerify}
-                    user_verified={props.user_verified.hasOwnProperty("planning_conservation_area_name")}
-                    user_verified_as={props.user_verified.planning_conservation_area_name}
-                    verified_count={props.building.verified.planning_conservation_area_name}
-                    />
-                <DataEntry
-                    title={dataFields.planning_historic_area_assessment_url.title}
-                    slug="planning_historic_area_assessment_url"
-                    value={props.building.planning_historic_area_assessment_url}
-                    mode={props.mode}
-                    copy={props.copy}
-                    onChange={props.onChange}
-                    isUrl={true}
-                    placeholder="Please add relevant link here"
-                    />
-                <Verification
-                    slug="planning_historic_area_assessment_url"
-                    allow_verify={props.user !== undefined && props.building.planning_historic_area_assessment_url !== null && !props.edited}
-                    onVerify={props.onVerify}
-                    user_verified={props.user_verified.hasOwnProperty("planning_historic_area_assessment_url")}
-                    user_verified_as={props.user_verified.planning_historic_area_assessment_url}
-                    verified_count={props.building.verified.planning_historic_area_assessment_url}
-                    />
-                <DataEntry
-                    title={dataFields.planning_in_apa_url.title}
-                    slug="planning_in_apa_url"
-                    value={props.building.planning_in_apa_url}
-                    mode={props.mode}
-                    copy={props.copy}
-                    onChange={props.onChange}
-                    isUrl={true}
-                    placeholder="Please add relevant link here"
-                    />
-                <Verification
-                    slug="planning_in_apa_url"
-                    allow_verify={props.user !== undefined && props.building.planning_in_apa_url !== null && !props.edited}
-                    onVerify={props.onVerify}
-                    user_verified={props.user_verified.hasOwnProperty("planning_in_apa_url")}
-                    user_verified_as={props.user_verified.planning_in_apa_url}
-                    verified_count={props.building.verified.planning_in_apa_url}
-                    />
-            </DataEntryGroup>
-        </DataEntryGroup>
-        <DataEntryGroup name="Other types of zoning" collapsed={false} >
-            <CheckboxDataEntry
+        <DataEntryGroup name="Planning zones" collapsed={true} >
+            <InfoBox type='success'>
+            Data in this section comes from the Greater London Authority's Planning London Datahub. Please check the original GLA source when using for planning purposes.
+            </InfoBox>
+            <LogicalDataEntry
             title="Is the building inside a flood zone?"
             slug="planning_live_application"
             value={null}
             disabled={true}
             />
-            <Verification
-                slug="dummy"
-                allow_verify={false}
-                onVerify={props.onVerify}
-                user_verified={props.user_verified.hasOwnProperty("dummy")}
-                user_verified_as={props.user_verified.planning_in_apa_url}
-                verified_count={props.building.verified.planning_in_apa_url}
-            />
-            <CheckboxDataEntry
+            {/*
+            <form className={`layer-switcher-inline`}>
+                <button className="btn btn-outline btn-outline-dark"
+                    type="submit">
+                    Click to see the data mapped
+                </button>
+            </form>
+            */}
+            <LogicalDataEntry
             title="Is the building in a strategic development zone for housing?"
             slug="planning_live_application"
             value={null}
             disabled={true}
             />
-            <Verification
-                slug="dummy"
-                allow_verify={false}
-                onVerify={props.onVerify}
-                user_verified={props.user_verified.hasOwnProperty("dummy")}
-                user_verified_as={props.user_verified.planning_in_apa_url}
-                verified_count={props.building.verified.planning_in_apa_url}
-            />
-            <CheckboxDataEntry
+            {/*
+            <form className={`layer-switcher-inline`}>
+                <button className="btn btn-outline btn-outline-dark"
+                    type="submit">
+                    Click to see the data mapped
+                </button>
+            </form>
+            */}
+            <LogicalDataEntry
             title="Is the building in a strategic development zone for commerce or industry?"
             slug="planning_live_application"
             value={null}
             disabled={true}
             />
-            <Verification
-                slug="dummy"
-                allow_verify={false}
-                onVerify={props.onVerify}
-                user_verified={props.user_verified.hasOwnProperty("dummy")}
-                user_verified_as={props.user_verified.planning_in_apa_url}
-                verified_count={props.building.verified.planning_in_apa_url}
-            />
-            <CheckboxDataEntry
+            {/*
+            <form className={`layer-switcher-inline`}>
+                <button className="btn btn-outline btn-outline-dark"
+                    type="submit">
+                    Click to see the data mapped
+                </button>
+            </form>
+            */}
+            <LogicalDataEntry
             title="Is the building within a protected sightline?"
             slug="planning_live_application"
             value={null}
             disabled={true}
             />
-            <Verification
-                slug="dummy"
-                allow_verify={false}
-                onVerify={props.onVerify}
-                user_verified={props.user_verified.hasOwnProperty("dummy")}
-                user_verified_as={props.user_verified.planning_in_apa_url}
-                verified_count={props.building.verified.planning_in_apa_url}
-            />
+            {/*
+            <form className={`layer-switcher-inline`}>
+                <button className="btn btn-outline btn-outline-dark"
+                    type="submit">
+                    Click to see the data mapped
+                </button>
+            </form>
+            */}
             {/*
                 <DataEntry
                 title={dataFields.planning_glher_url.title}
@@ -331,7 +153,196 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 />
             */}
         </DataEntryGroup>
-        <DataEntryGroup name="Land parcel ownership" collapsed={false} >
+        <DataEntryGroup name="Building protection" collapsed={true} >
+            <InfoBox type='success'>
+                This section provides information on heritage assets and building protection. To produce the most accurate spatial map possible we need to combine official data with crowdsourced data. Help us create this map together by checking, verifying and adding information.
+            </InfoBox>
+            <NumericDataEntryWithFormattedLink
+                title={dataFields.planning_list_id.title}
+                slug="planning_list_id"
+                value={props.building.planning_list_id}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
+                placeholder="If yes, add ID here"
+                linkTargetFunction={(id: String) => { return "https://historicengland.org.uk/listing/the-list/list-entry/" + id + "?section=official-list-entry" } }
+                linkDescriptionFunction={(id: String) => { return "ID Link" } }
+            />
+            <Verification
+                slug="planning_list_id"
+                allow_verify={props.user !== undefined && props.building.planning_list_id !== null && !props.edited}
+                onVerify={props.onVerify}
+                user_verified={props.user_verified.hasOwnProperty("planning_list_id")}
+                user_verified_as={props.user_verified.planning_list_id}
+                verified_count={props.building.verified.planning_list_id}
+                />
+            <SelectDataEntry
+                title={dataFields.planning_list_grade.title}
+                slug="planning_list_grade"
+                value={props.building.planning_list_grade}
+                mode={props.mode}
+                disabled={false}
+                copy={props.copy}
+                onChange={props.onChange}
+                options={[
+                    "I",
+                    "II*",
+                    "II",
+                    "None"
+                ]}
+                />
+            <Verification
+                slug="planning_list_grade"
+                allow_verify={props.user !== undefined && props.building.planning_list_grade !== null && !props.edited}
+                onVerify={props.onVerify}
+                user_verified={props.user_verified.hasOwnProperty("planning_list_grade")}
+                user_verified_as={props.user_verified.planning_list_grade}
+                verified_count={props.building.verified.planning_list_grade}
+                />
+            <DataEntry
+                title={dataFields.planning_heritage_at_risk_url.title}
+                slug="planning_heritage_at_risk_url"
+                value={props.building.planning_heritage_at_risk_url}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
+                placeholder="Please add relevant link here"
+                isUrl={true}
+                />
+            <Verification
+                slug="planning_heritage_at_risk_url"
+                allow_verify={props.user !== undefined && props.building.planning_heritage_at_risk_url !== null && !props.edited}
+                onVerify={props.onVerify}
+                user_verified={props.user_verified.hasOwnProperty("planning_heritage_at_risk_url")}
+                user_verified_as={props.user_verified.planning_heritage_at_risk_url}
+                verified_count={props.building.verified.planning_heritage_at_risk_url}
+                />
+            <NumericDataEntryWithFormattedLink
+                title={dataFields.planning_world_list_id.title}
+                slug="planning_world_list_id"
+                value={props.building.planning_world_list_id}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
+                placeholder="If yes, add ID here"
+                linkTargetFunction={(id: String) => { return "https://whc.unesco.org/en/list/" + id } }
+                linkDescriptionFunction={(id: String) => { return "ID Link" } }
+                />
+            <Verification
+                slug="planning_world_list_id"
+                allow_verify={props.user !== undefined && props.building.planning_world_list_id !== null && !props.edited}
+                onVerify={props.onVerify}
+                user_verified={props.user_verified.hasOwnProperty("planning_world_list_id")}
+                user_verified_as={props.user_verified.planning_world_list_id}
+                verified_count={props.building.verified.planning_world_list_id}
+                />
+            <DataEntry
+                title={dataFields.planning_local_list_url.title}
+                slug="planning_local_list_url"
+                value={props.building.planning_local_list_url}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
+                isUrl={true}
+                placeholder="Please add relevant link here"
+                />
+            <Verification
+                slug="planning_local_list_url"
+                allow_verify={props.user !== undefined && props.building.planning_local_list_url !== null && !props.edited}
+                onVerify={props.onVerify}
+                user_verified={props.user_verified.hasOwnProperty("planning_local_list_url")}
+                user_verified_as={props.user_verified.planning_local_list_url}
+                verified_count={props.building.verified.planning_local_list_url}
+                />
+
+            {/*
+            <DataEntry
+                title={dataFields.planning_in_conservation_area_id.title}
+                slug="planning_in_conservation_area_id"
+                value={props.building.planning_in_conservation_area_id}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
+                placeholder="Please add Conservation Area identifier"
+                />
+            <Verification
+                slug="planning_in_conservation_area_url"
+                allow_verify={props.user !== undefined && props.building.planning_in_conservation_area_url !== null && !props.edited}
+                onVerify={props.onVerify}
+                user_verified={props.user_verified.hasOwnProperty("planning_in_conservation_area_url")}
+                user_verified_as={props.user_verified.planning_in_conservation_area_url}
+                verified_count={props.building.verified.planning_in_conservation_area_url}
+                />
+            */}
+            <DataEntry
+                title={dataFields.planning_in_conservation_area_url.title}
+                slug="planning_in_conservation_area_url"
+                value={props.building.planning_in_conservation_area_url}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
+                isUrl={true}
+                placeholder="Please add CA appraisal link here"
+                />
+            {/*
+            <DataEntry
+                title={dataFields.planning_conservation_area_name.title}
+                slug="planning_conservation_area_name"
+                value={props.building.planning_conservation_area_name}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
+                />
+            <Verification
+                slug="planning_conservation_area_name"
+                allow_verify={props.user !== undefined && props.building.planning_conservation_area_name !== null && !props.edited}
+                onVerify={props.onVerify}
+                user_verified={props.user_verified.hasOwnProperty("planning_conservation_area_name")}
+                user_verified_as={props.user_verified.planning_conservation_area_name}
+                verified_count={props.building.verified.planning_conservation_area_name}
+                />
+            */}
+            <DataEntry
+                title={dataFields.planning_historic_area_assessment_url.title}
+                slug="planning_historic_area_assessment_url"
+                value={props.building.planning_historic_area_assessment_url}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
+                isUrl={true}
+                placeholder="Please add relevant link here"
+                />
+            <Verification
+                slug="planning_historic_area_assessment_url"
+                allow_verify={props.user !== undefined && props.building.planning_historic_area_assessment_url !== null && !props.edited}
+                onVerify={props.onVerify}
+                user_verified={props.user_verified.hasOwnProperty("planning_historic_area_assessment_url")}
+                user_verified_as={props.user_verified.planning_historic_area_assessment_url}
+                verified_count={props.building.verified.planning_historic_area_assessment_url}
+                />
+            <DataEntry
+                title={dataFields.planning_in_apa_url.title}
+                slug="planning_in_apa_url"
+                value={props.building.planning_in_apa_url}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
+                isUrl={true}
+                placeholder="Please add relevant link here"
+                />
+            <Verification
+                slug="planning_in_apa_url"
+                allow_verify={props.user !== undefined && props.building.planning_in_apa_url !== null && !props.edited}
+                onVerify={props.onVerify}
+                user_verified={props.user_verified.hasOwnProperty("planning_in_apa_url")}
+                user_verified_as={props.user_verified.planning_in_apa_url}
+                verified_count={props.building.verified.planning_in_apa_url}
+                />
+        </DataEntryGroup>
+        <DataEntryGroup name="Land ownership type" collapsed={true} >
+                <InfoBox type='success'>
+                    This section is designed to provide information on land parcels and their ownership type. Can you help us to crowdsource this information?
+                </InfoBox>
                 <SelectDataEntry
                     slug='community_public_ownership'
                     title={"What type of owner owns this land parcel? "}
diff --git a/app/src/frontend/components/info-box.tsx b/app/src/frontend/components/info-box.tsx
index fcaf0efc..11989210 100644
--- a/app/src/frontend/components/info-box.tsx
+++ b/app/src/frontend/components/info-box.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 interface InfoBoxProps {
     msg?: string;
-    type?: 'info' | 'warning'
+    type?: 'info' | 'warning' | 'success'
 }
 
 const InfoBox: React.FC<InfoBoxProps> = ({msg, children, type = 'info'}) => (