Add current land use frontend (read-only)

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

@@ -43,7 +43,7 @@ const BuildingView: React.FunctionComponent<BuildingViewProps> = (props) => {
         case 'use':
             return <UseContainer
                 {...props}
-                inactive={true}
+                inactive={false}
                 title="Land Use"
                 intro="How are buildings used, and how does use change over time? Coming soon…"
                 help="https://pages.colouring.london/use"

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

@@ -1,5 +1,9 @@
 import React, { Fragment } from 'react';
 
+import InfoBox from '../../components/info-box';
+import { dataFields } from '../../data_fields';
+import DataEntry from '../data-components/data-entry';
+import MultiDataEntry from '../data-components/multi-data-entry';
 import withCopyEdit from '../data-container';
 
 import { CategoryViewProps } from './category-view-props';
@@ -9,28 +13,35 @@ import { CategoryViewProps } from './category-view-props';
  */
 const UseView: React.FunctionComponent<CategoryViewProps> = (props) => (
     <Fragment>
-        <p className="data-intro">{props.intro}</p>
-        <ul>
-            <li>Single or multiple use?</li>
-            {
-                // "disabled": true,
-                // "slug": "use_multi",
-                // "type": "checkbox"
-            }
-            <li>Type of use/s</li>
-            {
-                // "disabled": true,
-                // "slug": "use_type",
-                // "type": "text_multi"
-            }
-            <li>Number of self-contained units</li>
-            {
-                // "disabled": true,
-                // "slug": "use_number_scu",
-                // "type": "number",
-                // "step": 1
-            }
-        </ul>
+        <InfoBox msg="This category is currently read-only. We are working on enabling its editing soon." />
+        <MultiDataEntry
+            title={dataFields.current_landuse_class.title}
+            slug="current_landuse_class"
+            value={props.building.current_landuse_class}
+            mode="view"
+            copy={props.copy}
+            onChange={props.onChange}
+            // tooltip={dataFields.current_landuse_class.tooltip}
+            placeholder="New land use class..."
+        />
+        <MultiDataEntry
+            title={dataFields.current_landuse_group.title}
+            slug="current_landuse_group"
+            value={props.building.current_landuse_group}
+            mode="view"
+            copy={props.copy}
+            onChange={props.onChange}
+            // tooltip={dataFields.current_landuse_class.tooltip}
+            placeholder="New land use group..."
+        />
+        <DataEntry
+            title={dataFields.current_landuse_order.title}
+            slug="current_landuse_order"
+            value={props.building.current_landuse_order}
+            mode="view"
+            copy={props.copy}
+            onChange={props.onChange}
+        />
     </Fragment>
 );
 const UseContainer = withCopyEdit(UseView);

app/src/frontend/building/edit-history/field-edit-summary.tsx

@@ -10,6 +10,9 @@ function formatValue(value: any) {
     if(typeof value === 'boolean') {
         return value ? 'Yes' : 'No';
     }
+    if(Array.isArray(value)) {
+        return value.map(v => `"${v}"`).join(', ');
+    }
     return value;
 }
 

app/src/frontend/data_fields.ts

@@ -153,6 +153,19 @@ export const dataFields = {
         title: "Longitude",
     },
 
+    current_landuse_class: {
+        category: Category.LandUse,
+        title: "Current Land Use Class"
+    },
+    current_landuse_group: {
+        category: Category.LandUse,
+        title: "Current Land Use Group"
+    },
+    current_landuse_order: {
+        category: Category.LandUse,
+        title: "Current Land Use Order"
+    },
+
     building_attachment_form: {
         category: Category.Type,
         title: "Building configuration (attachment)?",