Merge pull request #586 from colouring-london/feature/568-activate-construction

Feature/568 activate construction

app/map_styles/polygon.xml

@@ -123,6 +123,40 @@
             <PolygonSymbolizer fill="#980043" />
         </Rule>
     </Style>
+    <Style name="construction_core_material">
+        <Rule>
+            <Filter>[construction_core_material] = "Wood"</Filter>
+            <PolygonSymbolizer fill="#96613b" />
+        </Rule>
+        <Rule>
+            <Filter>[construction_core_material] = "Stone"</Filter>
+            <PolygonSymbolizer fill="#ffffe3" />
+        </Rule>
+        <Rule>
+            <Filter>[construction_core_material] = "Brick"</Filter>
+            <PolygonSymbolizer fill="#f5d96b" />
+        </Rule>
+        <Rule>
+            <Filter>[construction_core_material] = "Steel"</Filter>
+            <PolygonSymbolizer fill="#beffe8" />
+        </Rule>
+        <Rule>
+            <Filter>[construction_core_material] = "Reinforced Concrete"</Filter>
+            <PolygonSymbolizer fill="#fca89d" />
+        </Rule>
+        <Rule>
+            <Filter>[construction_core_material] = "Other Metal"</Filter>
+            <PolygonSymbolizer fill="#5c8970" />
+        </Rule>
+        <Rule>
+            <Filter>[construction_core_material] = "Other Natural Material"</Filter>
+            <PolygonSymbolizer fill="#b5a859" />
+        </Rule>
+        <Rule>
+            <Filter>[construction_core_material] = "Other Man-Made Material"</Filter>
+            <PolygonSymbolizer fill="#c48a85" />
+        </Rule>
+    </Style>
     <Style name="date_year">
         <Rule>
             <Filter>[date_year] &gt;= 2000</Filter>

app/src/api/services/building.ts

@@ -379,6 +379,9 @@ const BUILDING_FIELD_WHITELIST = new Set([
     'size_floor_area_ground',
     'size_floor_area_total',
     'size_width_frontage',
+    'construction_core_material',
+    'construction_secondary_materials',
+    'construction_roof_covering',
     'planning_portal_link',
     'planning_in_conservation_area',
     'planning_conservation_area_name',

app/src/frontend/building/building-view.tsx

@@ -74,9 +74,8 @@ const BuildingView: React.FunctionComponent<BuildingViewProps> = (props) => {
             return <ConstructionContainer
                 {...props}
                 title="Construction"
-                intro="How are buildings built? Coming soon…"
+                intro="How are buildings built?"
                 help="https://pages.colouring.london/construction"
-                inactive={true}
             />;
         case 'team':
             return <TeamContainer

app/src/frontend/building/categories.tsx

@@ -60,7 +60,7 @@ const Categories: React.FC<CategoriesProps> = (props) => (
             desc="Methods & materials"
             slug="construction"
             help="https://pages.colouring.london/construction"
-            inactive={true}
+            inactive={false}
             mode={props.mode}
             building_id={props.building_id}
         />

app/src/frontend/building/data-containers/construction.tsx

@@ -1,55 +1,74 @@
 import React, { Fragment } from 'react';
 
+import { dataFields } from '../../data_fields';
+import DataEntry from '../data-components/data-entry';
+import SelectDataEntry from '../data-components/select-data-entry';
 import withCopyEdit from '../data-container';
 
+import { CategoryViewProps } from './category-view-props';
+
+const ConstructionMaterialsOptions = [
+    'Wood',
+    'Stone',
+    'Brick',
+    'Steel',
+    'Reinforced Concrete',
+    'Other Metal',
+    'Other Natural Material',
+    'Other Man-Made Material'
+];
+
+const RoofCoveringOptions = [
+    'Slate',
+    'Clay Tile',
+    'Wood',
+    'Asphalt',
+    'Iron or Steel',
+    'Other Metal',
+    'Other Natural Material',
+    'Other Man-Made Material'
+];
+
 /**
 * Construction view/edit section
 */
-const ConstructionView = (props) => (
-    <Fragment>
-        <p className="data-intro">{props.intro}</p>
-        <ul>
-            <li>Construction system</li>
-            {
-                // "disabled": true,
-                // "slug": "construction_system",
-                // "type": "text"
-            }
-            <li>Primary materials</li>
-            {
-                // "disabled": true,
-                // "slug": "construction_primary_material",
-                // "type": "text"
-            }
-            <li>Secondary materials</li>
-            {
-                // "disabled": true,
-                // "slug": "construction_secondary_material",
-                // "type": "text"
-            }
-            <li>Roofing material</li>
-            {
-                // "disabled": true,
-                // "slug": "construction_roofing_material",
-                // "type": "text"
-            }
-            <li>Percentage of facade glazed</li>
-            {
-                // "disabled": true,
-                // "slug": "construction_facade_percentage_glazed",
-                // "type": "number",
-                // "step": 5
-            }
-            <li>BIM reference or link</li>
-            {
-                // "disabled": true,
-                // "slug": "construction_bim_reference",
-                // "type": "text",
-                // "placeholder": "https://..."
-            }
-        </ul>
-    </Fragment>
-);
+const ConstructionView: React.FunctionComponent<CategoryViewProps> = (props) => {
+    return (
+         <Fragment>
+             <SelectDataEntry
+                title={dataFields.construction_core_material.title}
+                slug="construction_core_material"
+                value={props.building.construction_core_material} // check
+                tooltip={dataFields.construction_core_material.tooltip}
+                options={ConstructionMaterialsOptions}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
+            />
+            <SelectDataEntry
+                title={dataFields.construction_secondary_materials.title}
+                slug="construction_secondary_materials"
+                value={props.building.construction_secondary_materials} // check
+                tooltip={dataFields.construction_secondary_materials.tooltip}
+                options={ConstructionMaterialsOptions}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
+            />
+            <SelectDataEntry
+                title={dataFields.construction_roof_covering.title}
+                slug="construction_roof_covering"
+                value={props.building.construction_roof_covering} // check
+                tooltip={dataFields.construction_roof_covering.tooltip}
+                options={RoofCoveringOptions}
+                mode={props.mode}
+                copy={props.copy}
+                onChange={props.onChange}
+            />
+        </Fragment>
+    );
+    };
+
 const ConstructionContainer = withCopyEdit(ConstructionView);
 
 export default ConstructionContainer;

app/src/frontend/data_fields.ts

@@ -282,6 +282,24 @@ export const dataFields = {
         //tooltip: ,
     },
 
+    construction_core_material: {
+        category: Category.Construction,
+        title: "Core Material",
+        tooltip:"The main structural material",
+    },
+
+    construction_secondary_materials: {
+        category: Category.Construction,
+        title: "Secondary Construction Material/s",
+        tooltip:"Other construction materials",
+    },
+
+    construction_roof_covering: {
+        category: Category.Construction,
+        title: "Main Roof Covering",
+        tooltip:'Main roof covering material',
+    },
+
     sust_breeam_rating: {
         category: Category.Sustainability,
         title: "BREEAM Rating",

app/src/frontend/map/legend.tsx

@@ -81,7 +81,16 @@ const LEGEND_CONFIG = {
     },
     construction: {
         title: 'Construction',
-        elements: []
+        elements: [
+            { color: "#96613b", text: "Wood" },
+            { color: "#ffffe3", text: "Stone" },
+            { color: "#f5d96b", text: "Brick" },
+            { color: "#beffe8", text: "Steel" },
+            { color: "#fca89d", text: "Reinforced Concrete" },
+            { color: "#5c8970", text: "Other Metal" },
+            { color: "#b5a859", text: "Other Natural Material" },
+            { color: "#c48a85", text: "Other Man-Made Material" }
+        ]
     },
     team: {
         title: 'Team',

app/src/frontend/map/map.tsx

@@ -131,6 +131,7 @@ class ColouringMap extends Component<ColouringMapProps, ColouringMapState> {
         const tilesetByCat = {
             age: 'date_year',
             size: 'size_height',
+            construction: 'construction_core_material',
             location: 'location',
             like: 'likes',
             planning: 'conservation_area',

app/src/tiles/dataDefinition.ts

@@ -55,6 +55,15 @@ const BUILDING_LAYER_DEFINITIONS = {
             buildings as b
         WHERE g.geometry_id = b.geometry_id
     ) as size_height`,
+    construction_core_material: `(
+        SELECT
+            b.core_materials,
+            g.geometry_geom
+        FROM
+            geometries as g,
+            buildings as b
+        WHERE g.geometry_id = b.geometry_id
+    ) as core_materials`,
     location: `(
         SELECT
             (

maintenance/extract_data/README.txt

@@ -64,6 +64,9 @@ This is the main table, containing almost all data collected by Colouring London
 - `size_floor_area_ground`: ground floor floor area in square metres
 - `size_floor_area_total`: total floor area in square metres
 - `size_width_frontage`: width of frontage in metres
+- `construction_core_material`: main structural material
+- `construction_secondary_materials`: other structural materials
+- `construction_roof_covering`: main roof covering
 - `sust_breeam_rating`: BREEAM rating
 - `sust_dec`: DEC rating
 - `sust_retrofit_date`: year of last significant retrofit

maintenance/extract_data/export_attributes.sql

@@ -37,6 +37,9 @@ COPY (SELECT
     sust_breeam_rating,
     sust_dec,
     sust_retrofit_date,
+    construction_core_material,
+    construction_secondary_materials,
+    construction_roof_covering,
     planning_portal_link,
     planning_in_conservation_area,
     planning_conservation_area_name,

migrations/0xx.construction-materials.down.sql

@@ -0,0 +1,8 @@
+
+ALTER TABLE buildings DROP COLUMN IF EXISTS core_materials;
+ALTER TABLE buildings DROP COLUMN IF EXISTS secondary_materials;
+ALTER TABLE buildings DROP COLUMN IF EXISTS roof_covering;
+
+
+DROP TYPE IF EXISTS construction_materials;
+DROP TYPE IF EXISTS roof_covering;

migrations/0xx.construction-materials.up.sql

@@ -0,0 +1,38 @@
+-- Launch of Constuction category
+-- Fields: Core construction material, Secondary construction materials, Roof covering materials
+
+-- Construction materials: Wood, Stone, Brick, Steel, Reinforced Concrete, Other Metal
+--   Other Natural Material, Other Man-Made Material
+CREATE TYPE construction_materials
+    AS ENUM ('Wood',
+    'Stone',
+    'Brick',
+    'Steel',
+    'Reinforced Concrete',
+    'Other Metal',
+    'Other Natural Material',
+    'Other Man-Made Material');
+
+-- Roof covering materials: Slate, Clay Tile, Wood, Asphalt, Iron or Steel, Other Metal
+--   Other Natural Material, Other Man-Made Material
+CREATE TYPE roof_covering
+    AS ENUM ('Slate',
+    'Clay Tile',
+    'Wood',
+    'Asphalt',
+    'Iron or Steel',
+    'Other Metal',
+    'Other Natural Material',
+    'Other Man-Made Material');
+
+-- Core Construction Material
+ALTER TABLE buildings
+    ADD COLUMN IF NOT EXISTS core_materials construction_materials;
+
+-- Secondary Construction Materials
+ALTER TABLE buildings
+    ADD COLUMN IF NOT EXISTS secondary_materials construction_materials;
+
+-- Main Roof Covering 
+ALTER TABLE buildings
+    ADD COLUMN IF NOT EXISTS roof_covering roof_covering;