Modify files for adding construction attributes

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) => (
+const ConstructionView: React.FunctionComponent<CategoryViewProps> = (props) => {
-    <Fragment>
+    return (
-        <p className="data-intro">{props.intro}</p>
+         <Fragment>
-        <ul>
+             <SelectDataEntry
-            <li>Construction system</li>
+                title={dataFields.construction_core_material.title}
-            {
+                slug="construction_core_material"
-                // "disabled": true,
+                value={props.building.construction_core_material} // check
-                // "slug": "construction_system",
+                tooltip={dataFields.construction_core_material.tooltip}
-                // "type": "text"
+                options={ConstructionMaterialsOptions}
-            }
+                mode={props.mode}
-            <li>Primary materials</li>
+                copy={props.copy}
-            {
+                onChange={props.onChange}
-                // "disabled": true,
+            />
-                // "slug": "construction_primary_material",
+            <SelectDataEntry
-                // "type": "text"
+                title={dataFields.construction_secondary_materials.title}
-            }
+                slug="construction_secondary_materials"
-            <li>Secondary materials</li>
+                value={props.building.construction_secondary_materials} // check
-            {
+                tooltip={dataFields.construction_secondary_materials.tooltip}
-                // "disabled": true,
+                options={ConstructionMaterialsOptions}
-                // "slug": "construction_secondary_material",
+                mode={props.mode}
-                // "type": "text"
+                copy={props.copy}
-            }
+                onChange={props.onChange}
-            <li>Roofing material</li>
+            />
-            {
+            <SelectDataEntry
-                // "disabled": true,
+                title={dataFields.construction_roof_covering.title}
-                // "slug": "construction_roofing_material",
+                slug="construction_roof_covering"
-                // "type": "text"
+                value={props.building.construction_roof_covering} // check
-            }
+                tooltip={dataFields.construction_roof_covering.tooltip}
-            <li>Percentage of facade glazed</li>
+                options={RoofCoveringOptions}
-            {
+                mode={props.mode}
-                // "disabled": true,
+                copy={props.copy}
-                // "slug": "construction_facade_percentage_glazed",
+                onChange={props.onChange}
-                // "type": "number",
+            />
-                // "step": 5
+        </Fragment>
-            }
+    );
-            <li>BIM reference or link</li>
+    };
-            {
+
-                // "disabled": true,
-                // "slug": "construction_bim_reference",
-                // "type": "text",
-                // "placeholder": "https://..."
-            }
-        </ul>
-    </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",

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,