feat: add final configurable options

Closes #9
agrc · Jul 13, 2022 · a74a3ef · a74a3ef
1 parent 08ba316
commit a74a3ef
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 29 deletions.
diff --git a/public/config.json b/public/config.json
@@ -15,6 +15,19 @@
       "simpleMode": "<p>Projects in the Regional Transportation Plan (RTP) can be displayed and filtered on this map by either <i>transportation mode</i> or by the <i>phasing period</i> in which the projects are planned for completion.</p><p><i>For more information, contact the WFRC Long Range Planning team at longrange@wfrc.org.</i></p>",
       "simplePhase": "<p>Projects in the Regional Transportation Plan (RTP) can be displayed and filtered on this map by either <i>transportation mode</i> or by the <i>phasing period</i> in which the projects are planned for completion.</p><p>In the RTP development process, projects are initially assigned to a project phase period, that are typically 8-10 years in length.</p><p>In this map, phasing can be displayed as <i>“needs-based phasing”</i> - the periods in which projects are needed to support the overall transportation system.</p><p>Or, phasing can be displayed according to <i>“financially-constrained phasing”</i>, wherein needed projects are prioritized according to the overall amount of transportation funding available and the project's comparative performance. <i>A portion of projected future funding is anticipated, but not yet in place.</i></p><p><i>For more information, contact the WFRC Long Range Planning team at longrange@wfrc.org.</i></p>"
     },
+    "labels": {
+      "mode": {
+        "road": "Road",
+        "transit": "Transit",
+        "activeTransportation": "Active Transportation"
+      },
+      "phase": {
+        "one": "Phase 1 (2023-2032)",
+        "two": "Phase 2 (2033-2042)",
+        "three": "Phase 3 (2043-2050)",
+        "unfunded": "Unfunded"
+      }
+    },
     "layerNames": {
       "modeLines": "Lines Displayed by Mode",
       "modePoints": "Points Displayed by Mode",
@@ -147,6 +160,7 @@
     "filter": true,
     "projectInfo": true
   },
+  "outFields": ["OBJECTID", "phase", "mode", "improvement_type", "plan_id", "breakout", "bike_type_text"],
   "projectInformation": {
     "commentsEnabled": true,
     "commentsTableUrl": "https://services1.arcgis.com/taguadKoI1XFwivx/arcgis/rest/services/Draft_Projects_2023_2050_RTP_Phased_by_Need/FeatureServer/2",
@@ -219,5 +233,6 @@
         "transportation": "Transporte"
       }
     }
-  }
+  },
+  "webMapId": "64597762025546ca993bea496f51d302"
 }
diff --git a/public/config.schema.json b/public/config.schema.json
@@ -57,7 +57,16 @@
       "type": "object"
     }
   },
-  "required": ["appTitle", "filter", "openOnLoad", "projectInformation", "sherlock", "translations"],
+  "required": [
+    "appTitle",
+    "filter",
+    "openOnLoad",
+    "outFields",
+    "projectInformation",
+    "sherlock",
+    "translations",
+    "webMapId"
+  ],
   "additionalProperties": false,
   "properties": {
     "appTitle": {
@@ -69,7 +78,7 @@
       "title": "Filter Widget Configuration",
       "description": "Configuration options for the filter widget",
       "type": "object",
-      "required": ["disableAdvanced", "fieldNames", "infoText", "layerNames", "projectTypes", "symbolValues"],
+      "required": ["disableAdvanced", "fieldNames", "infoText", "labels", "layerNames", "projectTypes", "symbolValues"],
       "additionalProperties": false,
       "properties": {
         "disableAdvanced": {
@@ -131,6 +140,59 @@
             }
           }
         },
+        "labels": {
+          "title": "Primary Checkbox Labels",
+          "description": "The labels for the primary checkboxes",
+          "type": "object",
+          "additionalProperties": false,
+          "required": ["mode", "phase"],
+          "properties": {
+            "mode": {
+              "title": "Mode Type Labels",
+              "type": "object",
+              "additionalProperties": false,
+              "required": ["road", "transit", "activeTransportation"],
+              "properties": {
+                "road": {
+                  "title": "Road",
+                  "type": "string"
+                },
+                "transit": {
+                  "title": "Transit",
+                  "type": "string"
+                },
+                "activeTransportation": {
+                  "title": "Active Transportation",
+                  "type": "string"
+                }
+              }
+            },
+            "phase": {
+              "title": "Phase Labels",
+              "type": "object",
+              "additionalProperties": false,
+              "required": ["one", "two", "three", "unfunded"],
+              "properties": {
+                "one": {
+                  "title": "Phase 1",
+                  "type": "string"
+                },
+                "two": {
+                  "title": "Phase 2",
+                  "type": "string"
+                },
+                "three": {
+                  "title": "Phase 3",
+                  "type": "string"
+                },
+                "unfunded": {
+                  "title": "Unfunded",
+                  "type": "string"
+                }
+              }
+            }
+          }
+        },
         "layerNames": {
           "title": "Layer Names",
           "description": "The layer names in the web map",
@@ -255,6 +317,14 @@
         }
       }
     },
+    "outFields": {
+      "title": "Out Fields",
+      "description": "The fields that will be requested along with the features displayed in the map",
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    },
     "projectInformation": {
       "title": "Project Information Widget Config",
       "description": "Configuration options for the project information widget",
@@ -376,6 +446,11 @@
           }
         }
       }
+    },
+    "webMapId": {
+      "title": "Web Map ID",
+      "description": "The AGOL ID of the web map that will be displayed in the app",
+      "type": "string"
     }
   }
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -26,7 +26,7 @@ function App() {
 
   useEffect(() => {
     const map = new WebMap({
-      portalItem: { id: '64597762025546ca993bea496f51d302' },
+      portalItem: { id: config.webMapId },
     });
     const view = new MapView({ map, container: 'mapDiv' });
     view.popup = null;

diff --git a/src/components/AdvancedControls.jsx b/src/components/AdvancedControls.jsx
@@ -159,7 +159,7 @@ export default function AdvancedControls({ disabled, dispatch, isOpen, labelColo
                 <Col>
                   <Checkbox
                     uniqueId="phase-1"
-                    label={config.labels.phase.one}
+                    label={config.filter.labels.phase.one}
                     checked={state.phase.includes(config.filter.symbolValues.phase.one)}
                     onChange={() =>
                       dispatch({ type: 'simple', payload: config.filter.symbolValues.phase.one, meta: 'phase' })
@@ -168,7 +168,7 @@ export default function AdvancedControls({ disabled, dispatch, isOpen, labelColo
                   />
                   <Checkbox
                     uniqueId="phase-2"
-                    label={config.labels.phase.two}
+                    label={config.filter.labels.phase.two}
                     checked={state.phase.includes(config.filter.symbolValues.phase.two)}
                     onChange={() =>
                       dispatch({ type: 'simple', payload: config.filter.symbolValues.phase.two, meta: 'phase' })
@@ -177,7 +177,7 @@ export default function AdvancedControls({ disabled, dispatch, isOpen, labelColo
                   />
                   <Checkbox
                     uniqueId="phase-3"
-                    label={config.labels.phase.three}
+                    label={config.filter.labels.phase.three}
                     checked={state.phase.includes(config.filter.symbolValues.phase.three)}
                     onChange={() =>
                       dispatch({ type: 'simple', payload: config.filter.symbolValues.phase.three, meta: 'phase' })
@@ -186,7 +186,7 @@ export default function AdvancedControls({ disabled, dispatch, isOpen, labelColo
                   />
                   <Checkbox
                     uniqueId="phase-4"
-                    label={config.labels.phase.unfunded}
+                    label={config.filter.labels.phase.unfunded}
                     checked={state.phase.includes(config.filter.symbolValues.phase.unfunded)}
                     onChange={() =>
                       dispatch({ type: 'simple', payload: config.filter.symbolValues.phase.unfunded, meta: 'phase' })

diff --git a/src/components/Filter.jsx b/src/components/Filter.jsx
@@ -98,19 +98,19 @@ export default function Filter({ mapView, state, dispatch }) {
                   linear: layers?.modeLines,
                   point: layers?.modePoints,
                   value: config.filter.symbolValues.mode.road,
-                  label: config.labels.mode.road,
+                  label: config.filter.labels.mode.road,
                 },
                 {
                   linear: layers?.modeLines,
                   point: layers?.modePoints,
                   value: config.filter.symbolValues.mode.transit,
-                  label: config.labels.mode.transit,
+                  label: config.filter.labels.mode.transit,
                 },
                 {
                   linear: layers?.modeLines,
                   point: layers?.modePoints,
                   value: config.filter.symbolValues.mode.activeTransportation,
-                  label: config.labels.mode.activeTransportation,
+                  label: config.filter.labels.mode.activeTransportation,
                 },
               ]}
               disabled={!layers}
@@ -141,25 +141,25 @@ export default function Filter({ mapView, state, dispatch }) {
                   linear: layers?.phaseLines,
                   point: layers?.phasePoints,
                   value: config.filter.symbolValues.phase.one,
-                  label: config.labels.phase.one,
+                  label: config.filter.labels.phase.one,
                 },
                 {
                   linear: layers?.phaseLines,
                   point: layers?.phasePoints,
                   value: config.filter.symbolValues.phase.two,
-                  label: config.labels.phase.two,
+                  label: config.filter.labels.phase.two,
                 },
                 {
                   linear: layers?.phaseLines,
                   point: layers?.phasePoints,
                   value: config.filter.symbolValues.phase.three,
-                  label: config.labels.phase.three,
+                  label: config.filter.labels.phase.three,
                 },
                 {
                   linear: layers?.phaseLines,
                   point: layers?.phasePoints,
                   value: config.filter.symbolValues.phase.unfunded,
-                  label: config.labels.phase.unfunded,
+                  label: config.filter.labels.phase.unfunded,
                 },
               ]}
               disabled={!layers}

diff --git a/src/services/config.js b/src/services/config.js
@@ -6,20 +6,6 @@ import { initReactI18next } from 'react-i18next';
 const config = {
   MODE: 'mode',
   PHASE: 'phase',
-  labels: {
-    phase: {
-      one: 'Phase 1 (2023-2032)',
-      two: 'Phase 2 (2033-2042)',
-      three: 'Phase 3 (2043-2050)',
-      unfunded: 'Unfunded',
-    },
-    mode: {
-      road: 'Road',
-      transit: 'Transit',
-      activeTransportation: 'Active Transportation',
-    },
-  },
-  outFields: ['OBJECTID', 'phase', 'mode', 'improvement_type', 'plan_id', 'breakout', 'bike_type_text'],
 };
 
 // optional configSchema is for vitest and storybook since they are clumsy when it comes to