From 2d4666f62fbf7df7e31e35d9c38af108ca5a2bd9 Mon Sep 17 00:00:00 2001 From: Tom Russell Date: Sun, 7 Jul 2019 19:21:08 +0100 Subject: [PATCH] Rework categories/titles/links --- app/src/frontend/fields-config.json | 452 ++++++++++++++++++++++------ app/src/frontend/legend.js | 60 ++-- 2 files changed, 385 insertions(+), 127 deletions(-) diff --git a/app/src/frontend/fields-config.json b/app/src/frontend/fields-config.json index 5551ba1d..ac46a079 100644 --- a/app/src/frontend/fields-config.json +++ b/app/src/frontend/fields-config.json @@ -5,104 +5,153 @@ "intro": "Where are the buildings? Address, location and cross-references.", "fields": [ { - "title": "Building Name", "slug": "location_name", "type": "text", + "title": "Building Name", + "slug": "location_name", + "type": "text", "placeholder": "Building name (if any)", "tooltip": "May not be needed for many buildings.", "disabled": true }, { - "title": "Building number", "slug": "location_number", "type": "number", + "title": "Building number", + "slug": "location_number", + "type": "number", "step": 1 }, { - "title": "Street", "slug": "location_street", "type": "text", + "title": "Street", + "slug": "location_street", + "type": "text", "disabled": true }, { - "title": "Address line 2", "slug": "location_line_two", "type": "text", + "title": "Address line 2", + "slug": "location_line_two", + "type": "text", "disabled": true }, { - "title": "Town", "slug": "location_town", "type": "text" + "title": "Town", + "slug": "location_town", + "type": "text" }, { - "title": "Postcode", "slug": "location_postcode", "type": "text", + "title": "Postcode", + "slug": "location_postcode", + "type": "text", "max_length": 8 }, { - "title": "TOID", "slug": "ref_toid", "type": "text", + "title": "TOID", + "slug": "ref_toid", + "type": "text", "tooltip": "Ordnance Survey Topography Layer ID (to be filled automatically)", "disabled": true }, { - "title": "UPRNs", "slug": "uprns", "type": "uprn_list", + "title": "UPRNs", + "slug": "uprns", + "type": "uprn_list", "tooltip": "Unique Property Reference Numbers (to be filled automatically)", "disabled": true }, { - "title": "OSM ID", "slug": "ref_osm_id", "type": "text", + "title": "OSM ID", + "slug": "ref_osm_id", + "type": "text", "tooltip": "OpenStreetMap feature ID", "max_length": 20 }, { - "title": "Latitude", "slug": "location_latitude", "type": "number", + "title": "Latitude", + "slug": "location_latitude", + "type": "number", "step": 0.0001, "placeholder": 51 }, { - "title": "Longitude", "slug": "location_longitude", "type": "number", + "title": "Longitude", + "slug": "location_longitude", + "type": "number", "step": 0.0001, "placeholder": 0 } ] }, { "inactive": true, - "title": "Use", "slug": "use", + "title": "Land Use", + "slug": "use", "intro": "How are buildings used, and how does use change over time? Coming soon…", "help": "https://pages.colouring.london/use", "fields": [ - { "title": "Single of multiple use?", "slug": "use_multi" }, - { "title": "Type of use/s", "slug": "use_type" }, - { "title": "Number of self-contained units", "slug": "use_number_scu" }, - { "title": "Original use (as constructed)", "slug": "use_type_original" } + { + "title": "Single or multiple use?", + "disabled": true, + "slug": "use_multi", + "type": "checkbox" + }, + { + "title": "Type of use/s", + "disabled": true, + "slug": "use_type", + "type": "text_multi" + }, + { + "title": "Number of self-contained units", + "disabled": true, + "slug": "use_number_scu", + "type": "number", + "step": 1 + } ] }, { "inactive": true, - "title": "Ownership", "slug": "ownership", - "intro": "How are buildings owned? Coming soon…", - "help": "https://www.pages.colouring.london/type", + "title": "Type", + "slug": "type", + "intro": "How were buildings previously used? Coming soon…", + "help": "https://www.pages.colouring.london/copy-of-type-and-use", "fields": [ { - "title": "Owner type (private, state/public, or communal/third sector)", - "slug": "ownership_owner_type" - }, - { - "title": "Original owner type (at construction)", - "slug": "ownership_owner_type_original" - }, - { "title": "Tenure type", "slug": "ownership_tenure_type" } + "title": "Original use (as constructed)", + "disabled": true, + "slug": "use_type_original", + "type": "text" + } ] }, { - "title": "Age", "slug": "age", + "title": "Age", + "slug": "age", "help": "https://pages.colouring.london/age", "intro": "Building age data can support energy analysis and help predict long-term change.", "fields": [ { - "title": "Year built (best estimate)", "slug": "date_year", "type": "year_estimator" + "title": "Year built (best estimate)", + "slug": "date_year", + "type": "year_estimator" }, { - "title": "Latest possible start year", "slug": "date_upper", "type": "number", "step": 1, - "tooltip": "This should be the latest year in which building could have started." }, + "title": "Latest possible start year", + "slug": "date_upper", + "type": "number", "step": 1, + "tooltip": "This should be the latest year in which building could have started." + }, { - "title": "Earliest possible start date", "slug": "date_lower", "type": "number", "step": 1, - "tooltip": "This should be the earliest year in which building could have started." }, + "title": "Earliest possible start date", + "slug": "date_lower", + "type": "number", "step": 1, + "tooltip": "This should be the earliest year in which building could have started." + }, { - "title": "Facade year", "slug": "facade_year", "type": "number", "step": 1, + "title": "Facade year", + "slug": "facade_year", + "type": "number", "step": 1, "tooltip": "Best estimate" }, { - "title": "Source of information", "slug": "date_source", "type": "text_list", + "title": "Source of information", + "slug": "date_source", + "type": "text_list", "tooltip": "Source for the main start date", "options": [ "Survey of London", @@ -118,52 +167,115 @@ ] }, { - "title": "Source details", "slug": "date_source_detail", "type": "text_long", + "title": "Source details", + "slug": "date_source_detail", + "type": "text_long", "tooltip": "References for date source (max 500 characters)" }, { - "title": "Text and Image Links", "slug": "date_link", "type": "text_multi", + "title": "Text and Image Links", + "slug": "date_link", + "type": "text_multi", "placeholder": "https://...", "tooltip": "URL for age and date reference" } ] }, { - "title": "Size & Shape", "slug": "size", + "title": "Size & Shape", + "slug": "size", "intro": "How big are buildings?", "help": "https://pages.colouring.london/shapeandsize", "fields": [ { - "title": "Core storeys", "slug": "size_storeys_core", "type": "number", "step": 1, + "title": "Core storeys", + "slug": "size_storeys_core", + "type": "number", + "step": 1, "tooltip": "How many storeys between the pavement and start of roof?" }, { - "title": "Attic storeys", "slug": "size_storeys_attic", "type": "number", "step": 1, + "title": "Attic storeys", + "slug": "size_storeys_attic", + "type": "number", + "step": 1, "tooltip": "How many storeys above start of roof?" }, { - "title": "Basement storeys", "slug": "size_storeys_basement", "type": "number", "step": 1, + "title": "Basement storeys", + "slug": "size_storeys_basement", + "type": "number", + "step": 1, "tooltip": "How many storeys below pavement level?" }, { - "title": "Height to apex (m)", "slug": "size_height_apex", "type": "number", "step": 0.1 + "title": "Height to apex (m)", + "slug": "size_height_apex", + "type": "number", + "step": 0.1 }, { - "title": "Height to eaves (m)", "slug": "size_height_eaves", "type": "number", "step": 0.1 + "title": "Height to eaves (m)", + "slug": "size_height_eaves", + "type": "number", + "step": 0.1 }, { - "title": "Ground floor area (m²)", "slug": "size_floor_area_ground", "type": "number", "step": 0.1 + "title": "Ground floor area (m²)", + "slug": "size_floor_area_ground", + "type": "number", + "step": 0.1 }, { - "title": "Total floor area (m²)", "slug": "size_floor_area_total", "type": "number", "step": 0.1 + "title": "Total floor area (m²)", + "slug": "size_floor_area_total", + "type": "number", + "step": 0.1 }, { - "title": "Frontage Width (m)", "slug": "size_width_frontage", "type": "number", "step": 0.1 + "title": "Frontage Width (m)", + "slug": "size_width_frontage", + "type": "number", + "step": 0.1 }, - { "title": "Total area of plot (m²)" }, - { "title": "FAR ratio (percentage of plot covered by building" }, - { "title": "Configuration (semi/detached, end/terrace)" }, - { "title": "Roof shape" } + { + "title": "Total area of plot (m²)", + "disabled": true, + "slug": "size_plot_area_total", + "type": "number", + "step": 0.1 + }, + { + "title": "FAR ratio (percentage of plot covered by building)", + "disabled": true, + "slug": "size_plot_area_total", + "type": "number", + "step": 0.1 + }, + { + "title": "Configuration (semi/detached, end/terrace)", + "disabled": true, + "slug": "size_configuration", + "type": "text_list", + "options": [ + "Detached", + "Semi-detached", + "Terrace", + "End terrace", + "Block" + ] + }, + { + "title": "Roof shape", + "disabled": true, + "slug": "size_roof_shape", + "type": "text_list", + "options": [ + "Flat", + "Pitched", + "Other" + ] + } ] }, { @@ -172,85 +284,189 @@ "intro": "How are buildings built? Coming soon…", "help": "https://pages.colouring.london/construction", "fields": [ - { "title": "Construction system" }, - { "title": "Primary materials" }, - { "title": "Secondary materials" }, - { "title": "Roofing material" }, - { "title": "Percentage of facade glazed" }, - { "title": "BIM reference or link" } + { + "title": "Construction system", + "disabled": true, + "slug": "construction_system", + "type": "text" + }, + { + "title": "Primary materials", + "disabled": true, + "slug": "construction_primary_material", + "type": "text" + }, + { + "title": "Secondary materials", + "disabled": true, + "slug": "construction_secondary_material", + "type": "text" + }, + { + "title": "Roofing material", + "disabled": true, + "slug": "construction_roofing_material", + "type": "text" + }, + { + "title": "Percentage of facade glazed", + "disabled": true, + "slug": "construction_facade_percentage_glazed", + "type": "number", + "step": 5 + }, + { + "title": "BIM reference or link", + "disabled": true, + "slug": "construction_bim_reference", + "type": "text", + "placeholder": "https://..." + } ] }, { "inactive": true, - "title": "Team", "slug": "team", + "title": "Team", + "slug": "team", "intro": "Who built the buildings? Coming soon…", "help": "https://pages.colouring.london/team", "fields": [ - { "title": "Construction and design team (original building)" }, - { "title": "Construction and design team (significant additional works)" } + { + "title": "Construction and design team (original building)", + "disabled": true, + "slug": "team_original", + "type": "text" + }, + { + "title": "Construction and design team (significant additional works)", + "disabled": true, + "slug": "team_after_original", + "type": "text_multi" + } ] }, { "inactive": true, - "title": "Sustainability", "slug": "sustainability", + "title": "Energy", + "slug": "energy", "intro": "Are buildings energy efficient? Coming soon…", "help": "https://pages.colouring.london/sustainability", "fields": [ - { "title": "Energy Performance Certificate (EPC) rating" }, - { "title": "Display Energy Certificate (DEC)" }, - { "title": "BREEAM Rating" }, - { "title": "Last significant retrofit" }, - { "title": "Embodied carbon estimation (for discussion)" }, - { "title": "Adaptability/repairability rating (for discussion)" }, - { "title": "Expected lifespan (for discussion)" } + { + "title": "Energy Performance Certificate (EPC) rating", + "disabled": true, + "slug": "energy_epc_band_current", + "type": "text_list", + "options": ["A", "B", "C", "D", "E", "F", "G"] + }, + { + "title": "Display Energy Certificate (DEC)", + "disabled": true, + "slug": "energy_dec_band_current", + "type": "text_list", + "options": ["A", "B", "C", "D", "E", "F", "G"] + }, + { + "title": "BREEAM Rating", + "disabled": true, + "slug": "energy_breeam_rating", + "type": "number", + "step": 1 + }, + { + "title": "Year of last significant retrofit", + "disabled": true, + "slug": "energy_last_retrofit_date", + "type": "number", + "step": 1 + }, + { + "title": "Embodied carbon estimation (for discussion)", + "slug": "energy_embodied_carbon", + "type": "text", + "disabled": true + }, + { + "title": "Adaptability/repairability rating (for discussion)", + "slug": "energy_adaptability_rating", + "type": "text", + "disabled": true + }, + { + "title": "Expected lifespan (for discussion)", + "slug": "energy_expected_lifespan", + "type": "number", + "step": 1, + "disabled": true + } ] }, { "inactive": true, - "title": "Greenery", "slug": "greenery", + "title": "Greenery", + "slug": "greenery", "intro": "Is there greenery nearby? Coming soon…", "help": "https://pages.colouring.london/copy-of-street-context", "fields": [ - { "title": "Gardens" }, - { "title": "Trees" }, - { "title": "Green walls" }, - { "title": "Green roof" }, - { "title": "Proximity to parks and open greenspace" }, - { "title": "Building shading" } + { + "title": "Gardens" + }, + { + "title": "Trees" + }, + { + "title": "Green walls" + }, + { + "title": "Green roof" + }, + { + "title": "Proximity to parks and open greenspace" + }, + { + "title": "Building shading" + } ] }, { - "title": "Planning", "slug": "planning", + "title": "Planning", + "slug": "planning", "intro": "Planning controls relating to protection and reuse.", "help": "https://pages.colouring.london/controls", "fields": [ { - "title": "Planning portal link", "slug": "planning_portal_link", + "title": "Planning portal link", + "slug": "planning_portal_link", "type": "text", "tooltip": "" }, { - "title": "In a conservation area?", "slug": "planning_in_conservation_area", + "title": "In a conservation area?", + "slug": "planning_in_conservation_area", "type": "checkbox", "tooltip": "" }, { - "title": "Conservation area name", "slug": "planning_conservation_area_name", + "title": "Conservation area name", + "slug": "planning_conservation_area_name", "type": "text", "tooltip": "" }, { - "title": "Is listed on the National Heritage List for England?", "slug": "planning_in_list", + "title": "Is listed on the National Heritage List for England?", + "slug": "planning_in_list", "type": "checkbox", "tooltip": "" }, { - "title": "National Heritage List for England list id", "slug": "planning_list_id", + "title": "National Heritage List for England list id", + "slug": "planning_list_id", "type": "text", "tooltip": "" }, { - "title": "National Heritage List for England list type", "slug": "planning_list_cat", + "title": "National Heritage List for England list type", + "slug": "planning_list_cat", "type": "text_list", "tooltip": "", "options": [ @@ -262,7 +478,8 @@ ] }, { - "title": "Listing grade", "slug": "planning_list_grade", + "title": "Listing grade", + "slug": "planning_list_grade", "type": "text_list", "tooltip": "", "options": [ @@ -273,22 +490,26 @@ ] }, { - "title": "Heritage at risk list id", "slug": "planning_heritage_at_risk_id", + "title": "Heritage at risk list id", + "slug": "planning_heritage_at_risk_id", "type": "text", "tooltip": "" }, { - "title": "World heritage list id", "slug": "planning_world_list_id", + "title": "World heritage list id", + "slug": "planning_world_list_id", "type": "text", "tooltip": "" }, { - "title": "In the Greater London Historic Environment Record?", "slug": "planning_in_glher", + "title": "In the Greater London Historic Environment Record?", + "slug": "planning_in_glher", "type": "checkbox", "tooltip": "" }, { - "title": "Greater London Historic Environment Record link", "slug": "planning_glher_url", + "title": "Greater London Historic Environment Record link", + "slug": "planning_glher_url", "type": "text", "tooltip": "" }, @@ -308,36 +529,71 @@ "tooltip": "" }, { - "title": "Is locally listed?", "slug": "planning_in_local_list", + "title": "Is locally listed?", + "slug": "planning_in_local_list", "type": "checkbox", "tooltip": "" }, { - "title": "Local list link", "slug": "planning_local_list_url", + "title": "Local list link", + "slug": "planning_local_list_url", "type": "text", "tooltip": "" }, { - "title": "Within a historic area assessment?", "slug": "planning_in_historic_area_assessment", + "title": "Within a historic area assessment?", + "slug": "planning_in_historic_area_assessment", "type": "checkbox", "tooltip": "" }, { - "title": "Historic area assessment link", "slug": "planning_historic_area_assessment_url", + "title": "Historic area assessment link", + "slug": "planning_historic_area_assessment_url", "type": "text", "tooltip": "" + }, + { + "title": "Is the building proposed for demolition?", + "disabled": true, + "slug": "planning_demolition_proposed", + "type": "checkbox" + }, + { + "title": "Has the building been demolished?", + "disabled": true, + "slug": "planning_demolition_complete", + "type": "checkbox" + }, + { + "title": "Dates of construction and demolition of previous buildings on site", + "disabled": true, + "slug": "planning_demolition_history", + "type": "text" } ] }, { "inactive": true, - "title": "Demolition", "slug": "demolition", - "intro": "Coming soon…", - "help": "https://pages.colouring.london/demolitions", + "title": "Community", + "slug": "community", + "intro": "How does this building work for the local community?", + "help": "https://pages.colouring.london/type", "fields": [ - { "title": "Is the building proposed for demolition?" }, - { "title": "Has the building been demolished?" }, - { "title": "Dates of construction and demolition of previous buildings on site" } + { + "title": "Is this a publicly owned building?", + "slug": "community_publicly_owned", + "type": "checkbox" + }, + { + "title": "Has this building ever been used for community or public services activities?", + "slug": "community_past_public", + "type": "checkbox" + }, + { + "title": "Would you describe this building as a community asset?", + "slug": "community_asset", + "type": "checkbox" + } ] }, { @@ -346,7 +602,9 @@ "help": "https://pages.colouring.london/likeme", "fields": [ { - "title": "Number of likes", "slug": "likes_total", "type": "like" + "title": "Number of likes", + "slug": "likes_total", + "type": "like" } ] } diff --git a/app/src/frontend/legend.js b/app/src/frontend/legend.js index aea25e9c..6c21ec37 100644 --- a/app/src/frontend/legend.js +++ b/app/src/frontend/legend.js @@ -15,6 +15,14 @@ const LEGEND_CONFIG = { { color: '#bae4bc', text: '<20%' } ] }, + use: { + title: 'Use', + elements: [] + }, + type: { + title: 'Type', + elements: [] + }, age: { title: 'Age', elements: [ @@ -49,25 +57,6 @@ const LEGEND_CONFIG = { { color: '#800026', text: '1–5' }, ] }, - like: { - title: 'Like Me', - elements: [ - { color: '#bd0026', text: '👍👍👍 ≥10' }, - { color: '#e31a1c', text: '👍👍 5–10' }, - { color: '#fc4e2a', text: '👍 4' }, - { color: '#fd8d3c', text: '👍 3' }, - { color: '#feb24c', text: '👍 2' }, - { color: '#fed976', text: '👍 1' }, - ] - }, - use: { - title: 'Use', - elements: [] - }, - ownership: { - title: 'Ownership', - elements: [] - }, construction: { title: 'Construction', elements: [] @@ -76,8 +65,8 @@ const LEGEND_CONFIG = { title: 'Team', elements: [] }, - sustainability: { - title: 'Sustainability', + energy: { + title: 'Energy', elements: [] }, greenery: { @@ -90,9 +79,20 @@ const LEGEND_CONFIG = { { color: '#73ebaf', text: 'within conservation area' }, ] }, - demolition: { - title: 'Demolition', + community: { + title: 'Community', elements: [] + }, + like: { + title: 'Like Me', + elements: [ + { color: '#bd0026', text: '👍👍👍 ≥10' }, + { color: '#e31a1c', text: '👍👍 5–10' }, + { color: '#fc4e2a', text: '👍 4' }, + { color: '#fd8d3c', text: '👍 3' }, + { color: '#feb24c', text: '👍 2' }, + { color: '#fed976', text: '👍 1' }, + ] } }; @@ -114,7 +114,7 @@ class Legend extends React.Component { } - componentDidMount() { + componentDidMount() { window.addEventListener('resize', this.onResize); if (window && window.outerHeight) { // if we're in the browser, pass in as though from event to initialise @@ -129,14 +129,14 @@ class Legend extends React.Component { onResize(e) { - this.setState({collapseList: (e.target.outerHeight < 670 || e.target.outerWidth < 768)}); // magic number needs to be consistent with CSS expander-button media query + this.setState({collapseList: (e.target.outerHeight < 670 || e.target.outerWidth < 768)}); // magic number needs to be consistent with CSS expander-button media query } - render() { - const details = LEGEND_CONFIG[this.props.slug]; - const title = details.title; - const elements = details.elements; + render() { + const details = LEGEND_CONFIG[this.props.slug] || {}; + const title = details.title || ""; + const elements = details.elements || []; return (
@@ -181,7 +181,7 @@ class Legend extends React.Component {
  • - { item.text } -
    • + )) }