WIP Disaster Start/End Dates

2023-04-21 13:41:03 +01:00 · 2023-04-21 13:41:03 +01:00 · 8f9590adb6
commit 8f9590adb6
parent 906ebd7431
8 changed files with 205 additions and 6 deletions
--- a/app/package-lock.json
+++ b/app/package-lock.json
@ -33,6 +33,7 @@
        "pg-promise": "^10.11.1",
        "query-string": "^6.13.1",
        "react": "^17.0.2",
+        "react-datepicker": "^4.11.0",
        "react-dom": "^17.0.2",
        "react-leaflet": "^3.1.0",
        "react-router-dom": "^5.2.0",
@ -2646,6 +2647,15 @@
        "node": ">=10"
      }
    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
    "node_modules/@react-leaflet/core": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.1.1.tgz",
@ -4897,6 +4907,11 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
    "node_modules/clean-css": {
      "version": "4.2.4",
      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz",
@ -5940,6 +5955,18 @@
        "node": ">=10"
      }
    },
+    "node_modules/date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
    "node_modules/debug": {
      "version": "4.3.3",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@ -14834,6 +14861,23 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-datepicker": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.11.0.tgz",
+      "integrity": "sha512-50n93o7mQwBEhg05tbopjFKgs8qgi8VBCAOMC4VqrKut72eAjESc/wXS/k5hRtnP0oe2FCGw7MJuIwh37wuXOw==",
+      "dependencies": {
+        "@popperjs/core": "^2.9.2",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.24.0",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.12.2",
+        "react-popper": "^2.3.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17 || ^18",
+        "react-dom": "^16.9.0 || ^17 || ^18"
+      }
+    },
    "node_modules/react-dev-utils": {
      "version": "11.0.4",
      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@ -15244,6 +15288,11 @@
      "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==",
      "dev": true
    },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.1.tgz",
+      "integrity": "sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg=="
+    },
    "node_modules/react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -15262,6 +15311,33 @@
        "react-dom": "^17.0.1"
      }
    },
+    "node_modules/react-onclickoutside": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz",
+      "integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
+      },
+      "peerDependencies": {
+        "react": "^15.5.x || ^16.x || ^17.x || ^18.x",
+        "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
+      }
+    },
+    "node_modules/react-popper": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+      "dependencies": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.9.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz",
@ -18822,6 +18898,14 @@
        "makeerror": "1.0.12"
      }
    },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "node_modules/watchpack": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@ -22102,6 +22186,11 @@
        "rimraf": "^3.0.2"
      }
    },
+    "@popperjs/core": {
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw=="
+    },
    "@react-leaflet/core": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.1.1.tgz",
@ -23929,6 +24018,11 @@
        }
      }
    },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
    "clean-css": {
      "version": "4.2.4",
      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.4.tgz",
@ -24753,6 +24847,11 @@
        "whatwg-url": "^8.0.0"
      }
    },
+    "date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
+    },
    "debug": {
      "version": "4.3.3",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@ -31508,6 +31607,19 @@
        "object-assign": "^4.1.1"
      }
    },
+    "react-datepicker": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.11.0.tgz",
+      "integrity": "sha512-50n93o7mQwBEhg05tbopjFKgs8qgi8VBCAOMC4VqrKut72eAjESc/wXS/k5hRtnP0oe2FCGw7MJuIwh37wuXOw==",
+      "requires": {
+        "@popperjs/core": "^2.9.2",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.24.0",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.12.2",
+        "react-popper": "^2.3.0"
+      }
+    },
    "react-dev-utils": {
      "version": "11.0.4",
      "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@ -31839,6 +31951,11 @@
      "integrity": "sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==",
      "dev": true
    },
+    "react-fast-compare": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.1.tgz",
+      "integrity": "sha512-xTYf9zFim2pEif/Fw16dBiXpe0hoy5PxcD8+OwBnTtNLfIm3g6WxhKNurY+6OmdH1u6Ta/W/Vl6vjbYP1MFnDg=="
+    },
    "react-is": {
      "version": "16.13.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -31852,6 +31969,21 @@
        "@react-leaflet/core": "^1.1.1"
      }
    },
+    "react-onclickoutside": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz",
+      "integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==",
+      "requires": {}
+    },
+    "react-popper": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+      "requires": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      }
+    },
    "react-refresh": {
      "version": "0.9.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz",
@ -34711,6 +34843,14 @@
        "makeerror": "1.0.12"
      }
    },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "watchpack": {
      "version": "2.4.0",
      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
--- a/app/package.json
+++ b/app/package.json
@ -37,6 +37,7 @@
    "pg-promise": "^10.11.1",
    "query-string": "^6.13.1",
    "react": "^17.0.2",
+    "react-datepicker": "^4.11.0",
    "react-dom": "^17.0.2",
    "react-leaflet": "^3.1.0",
    "react-router-dom": "^5.2.0",
--- a/app/src/api/config/dataFields.ts
+++ b/app/src/api/config/dataFields.ts
@ -424,6 +424,14 @@ export const buildingAttributesConfig = valueType<DataFieldConfig>()({ /* eslint
        edit: true,
        verify: true
    },
+    disaster_start_date : {
+        edit: true,
+        verify: true
+    },
+    disaster_end_date : {
+        edit: true,
+        verify: true
+    }
 });


--- a/app/src/frontend/building/data-containers/resilience.tsx
+++ b/app/src/frontend/building/data-containers/resilience.tsx
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import InfoBox from '../../components/info-box';
 import { dataFields } from '../../config/data-fields-config';
 import DataEntry from '../data-components/data-entry';
@ -9,6 +9,9 @@ import Verification from '../data-components/verification';
 import { CategoryViewProps } from './category-view-props';
 import { useDisplayPreferences } from '../../displayPreferences-context';
 import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry';
+import DatePicker from "react-datepicker";
+
+import "react-datepicker/dist/react-datepicker.css";

 /**
 * Dynamics view/edit section
@ -16,16 +19,47 @@ import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-e
 const ResilienceView: React.FunctionComponent<CategoryViewProps> = (props) => {
    
    const { historicData, historicDataSwitchOnClick, darkLightTheme } = useDisplayPreferences();
+    const [ startDate, setStartDate ] = useState(null);
+    const [ endDate, setEndDate ] = useState(null);

    return (<>
        <DataEntryGroup name="Disaster Management" collapsed={true} >
            <InfoBox>
-            This feature is designed to help communities capture data on the state of buildings
-            during major disasters, to support emergency services and to record damage to aid reconstruction programmes.
+                This feature is designed to help communities capture data on the state of buildings
+                during major disasters, to support emergency services and to record damage to aid reconstruction programmes.
            </InfoBox>
            <button className={`map-switcher-inline ${historicData}-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={historicDataSwitchOnClick}> 
                {(historicData === 'enabled')?'Click here to hide disaster maps':'Click here to show disaster maps'}
            </button>
+            <p>Date of Disaster</p>
+            <div>
+                <DatePicker 
+                    showIcon
+                    dateFormat="dd/MM/yyyy"
+                    slug="disaster_start_date"
+                    selected={startDate}
+                    onChange={(date) => setStartDate(date)} 
+                    title={dataFields.disaster_start_date.title}
+                    //value={props.building.disaster_start_date}
+                    isClearable
+                    placeholderText="Select Start Date"
+                    maxDate={new Date()}
+                />
+            </div>
+            <div>
+                <DatePicker 
+                    showIcon
+                    dateFormat="dd/MM/yyyy"
+                    slug="disaster_end_date"
+                    selected={endDate}
+                    onChange={(date) => setEndDate(date)} 
+                    title={dataFields.disaster_end_date.title}
+                    //value={props.building.disaster_end_date}
+                    isClearable
+                    placeholderText="Select End Date"
+                    maxDate={new Date()}
+                />
+            </div>
            <SelectDataEntry
                slug='disaster_type'
                title={dataFields.disaster_type.title}
--- a/app/src/frontend/config/data-fields-config.ts
+++ b/app/src/frontend/config/data-fields-config.ts
@ -832,6 +832,16 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
        tooltip: "URL for data sources(s)",
        example: ["", "", ""],
    },
+    disaster_start_date: {
+        category: Category.Resilience,
+        title: "What was the start date of the disaster?",
+        example: "01/04/2023"
+    },
+    disaster_end_date: {
+        category: Category.Resilience,
+        title: "What was the end date of the disaster? (if applicable)",
+        example: "03/04/2023"
+    },
 };

 export const allFieldsConfig = {...dataFields, ...buildingUserFields};
--- a/maintenance/extract_data/export_attributes.sql
+++ b/maintenance/extract_data/export_attributes.sql
@ -62,7 +62,9 @@ COPY (SELECT
    disaster_type,
    disaster_severity,
    disaster_assessment_method,
-    disaster_source_link
+    disaster_source_link,
+    disaster_start_date,
+    disaster_end_date
 FROM buildings)
 TO '/tmp/building_attributes.csv'
 WITH CSV HEADER
--- a/migrations/039.disaster_status.down.sql
+++ b/migrations/039.disaster_status.down.sql
@ -1,4 +1,6 @@
 ALTER TABLE buildings DROP COLUMN IF EXISTS disaster_type;
 ALTER TABLE buildings DROP COLUMN IF EXISTS disaster_severity;
 ALTER TABLE buildings DROP COLUMN IF EXISTS disaster_assessment_method;
-ALTER TABLE buildings DROP COLUMN IF EXISTS disaster_source_link;
+ALTER TABLE buildings DROP COLUMN IF EXISTS disaster_source_link;
+ALTER TABLE buildings DROP COLUMN IF EXISTS disaster_start_date;
+ALTER TABLE buildings DROP COLUMN IF EXISTS disaster_end_date;
--- a/migrations/039.disaster_status.up.sql
+++ b/migrations/039.disaster_status.up.sql
@ -1,4 +1,6 @@
 ALTER TABLE buildings ADD COLUMN IF NOT EXISTS disaster_type text;
 ALTER TABLE buildings ADD COLUMN IF NOT EXISTS disaster_severity text;
 ALTER TABLE buildings ADD COLUMN IF NOT EXISTS disaster_assessment_method text;
-ALTER TABLE buildings ADD COLUMN IF NOT EXISTS disaster_source_link text[];
+ALTER TABLE buildings ADD COLUMN IF NOT EXISTS disaster_source_link text[];
+ALTER TABLE buildings ADD COLUMN IF NOT EXISTS disaster_start_date date;
+ALTER TABLE buildings ADD COLUMN IF NOT EXISTS disaster_end_date date;