WIP Disaster Start/End Dates

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",

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",

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
+    }
 });
 
 

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,6 +19,8 @@ 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} >
@@ -26,6 +31,35 @@ const ResilienceView: React.FunctionComponent<CategoryViewProps> = (props) => {
             <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}

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};

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

migrations/039.disaster_status.down.sql

@@ -2,3 +2,5 @@ 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_start_date;
+ALTER TABLE buildings DROP COLUMN IF EXISTS disaster_end_date;

migrations/039.disaster_status.up.sql

@@ -2,3 +2,5 @@ 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_start_date date;
+ALTER TABLE buildings ADD COLUMN IF NOT EXISTS disaster_end_date date;