Added a "null" location that removes zipcode and geomap features (#336)

* hiding zipcode from start screen * code changes * code changes * code changes * code changes * code cleanup * code cleanup * code cleanup
cns-iu · May 23, 2023 · 462fae2 · 462fae2
1 parent 3fcd512
commit 462fae2
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 73 deletions.
diff --git a/packages/client-mav/projects/xmacroscope-dvl-fw-plugin/src/lib/shared/xmacroscope-project.ts b/packages/client-mav/projects/xmacroscope-dvl-fw-plugin/src/lib/shared/xmacroscope-project.ts
@@ -23,6 +23,7 @@ export interface XMacroscopeProjectConfig {
   mockData?: boolean;
   staticData?: 'mocked' | unknown;
   endpoint?: string;
+  location?: string;
   deploymentLocation?: string;
   defaultUsState?: string;
   runTimeout?: number;
@@ -36,14 +37,17 @@ export class XMacroscopeProject extends DefaultProject {
   }
 
   static async resolveConfig(config: XMacroscopeProjectConfig): Promise<XMacroscopeProjectConfig> {
-    const resolvedConfig = { ...config };
+    const resolvedConfig = config;
     if (!isArray(config.opponentRuns)) {
       resolvedConfig.opponentRuns = opponentRuns[config.opponentRuns as keyof typeof opponentRuns] || [];
     }
     if (config.endpoint && config.deploymentLocation) {
       const settings = await LocationSettings.getSettings(config.endpoint, config.deploymentLocation);
       if (settings) {
-        if (settings.usState) {
+        if (settings.location) {
+          resolvedConfig.location = settings.location;
+        }
+        if (settings.usState !== undefined || settings.usState !== 'null') {
           resolvedConfig.defaultUsState = settings.usState;
         }
         if (settings.runTimeout) {

diff --git a/...nt-mav/projects/xmacroscope-dvl-fw-plugin/src/lib/visualizations/table/table.component.ts b/...nt-mav/projects/xmacroscope-dvl-fw-plugin/src/lib/visualizations/table/table.component.ts
@@ -57,10 +57,16 @@ export class TableComponent implements VisualizationComponent,
 
   refreshItems(): void {
     if (this.data) {
+      const location = this.xMacroscopeDataService.config.location;
       this.columns = this.getColumns(this.data.graphicSymbols['items']);
       this.displayedColumns = Object.keys(this.columns);
-      this.items$ = this.getGraphicSymbolData<DataItem>('items')
-        .pipe(map(items => orderBy(items, 'order', 'asc')));
+      if (location === 'null') {
+        this.displayedColumns = this.displayedColumns.filter(col => col !== 'zipCode');
+      }
+
+      this.items$ = this.getGraphicSymbolData<DataItem>('items').pipe(
+        map(items => orderBy(items, 'order', 'asc'))
+      );
     } else {
       this.items$ = of([]);
     }

diff --git a/packages/client-mav/src/app/make-a-vis/legend-view/main/main.component.ts b/packages/client-mav/src/app/make-a-vis/legend-view/main/main.component.ts
@@ -38,6 +38,11 @@ export class MainComponent implements OnChanges {
 
     this.originalGraphicSymbol = this.getRunPoints().toJSON();
     this.originalTableOrder = this.getRunTable().graphicVariables.order;
+
+    if (dataService.config.location === 'null') {
+      const index = this.navigation.findIndex(nav => nav.id === 'geomap');
+      this.navigation.splice(index, 1);
+    }
   }
 
   ngOnChanges(changes: SimpleChanges): void {

diff --git a/packages/client-mav/src/app/make-a-vis/visualization-view/table/table.component.ts b/packages/client-mav/src/app/make-a-vis/visualization-view/table/table.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input, ViewChild } from '@angular/core';
 import { DvlFwVisualizationComponent } from '@dvl-fw/angular';
 import { GraphicVariable, GraphicVariableType, Visualization } from '@dvl-fw/core';
-import { XMacroscopeDataService } from 'xmacroscope-dvl-fw-plugin';
+import { XMacroscopeDataService, XMacroscopeProjectConfig } from 'xmacroscope-dvl-fw-plugin';
 
 import { UpdateVisService } from '../../../shared/services/update-vis.service';
 
@@ -21,7 +21,10 @@ export class TableComponent {
   readonly defaultOrderVariable: GraphicVariable;
 
   constructor(dataService: XMacroscopeDataService, private updateService: UpdateVisService) {
-    this.variables = dataService.project.graphicVariables;
+    this.variables = this.filterVariables(
+      dataService.project.graphicVariables,
+      dataService.project.config
+    );
     this.defaultOrderVariable = dataService.project.graphicSymbols.find(g => g.id === 'runTable')!.graphicVariables.order;
   }
 
@@ -32,4 +35,12 @@ export class TableComponent {
       this.updateService.triggerUpdate(this.data);
     }
   }
+
+  private filterVariables(variables: GraphicVariable[], config: XMacroscopeProjectConfig): GraphicVariable[] {
+    if (config.location !== 'null') {
+      return variables;
+    }
+
+    return variables.filter(v => !v.selector.match(/zipCode|longitude|latitude/));
+  }
 }
diff --git a/packages/client-run/src/App/AppSettings.js b/packages/client-run/src/App/AppSettings.js
@@ -11,6 +11,7 @@ const GET_SETTINGS = gql`
     Settings(location: $location){
       activityName
       postRunDelay
+      location
     }
   }
 `;

diff --git a/packages/client-run/src/Start/SignupForm.js b/packages/client-run/src/Start/SignupForm.js
@@ -75,22 +75,26 @@ const SignupForm = ({
           </Col>
         </Row>
       </Col>
-      <Col className="mt-3 text-center" lg={4}>
-        <div className="zip-code-input">
-          <ZipCodeInput
-            className="form-control form-control-lg"
-            name="zipCode"
-            label="What's your Zip Code?"
-            errors={errors}
-            touched={touched}
-            options={['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', 'CLR']}
-            type="hidden"
-            setInput={setFieldValue}
-          />
-        </div>
-      </Col>
+      {settings.location !== 'null'
+        && (
+          <Col className="mt-3 text-center" lg={4}>
+            <div className="zip-code-input">
+              <ZipCodeInput
+                className="form-control form-control-lg"
+                name="zipCode"
+                label="What's your Zip Code?"
+                errors={errors}
+                touched={touched}
+                options={['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', 'CLR']}
+                type="hidden"
+                setInput={setFieldValue}
+              />
+            </div>
+          </Col>
+        )
+      }
     </Row>
-    <Row className="mt-lg-n5">
+    <Row>
       <Col className="text-center slider" lg={12}>
         <AgeInput
           className="form-control form-control-lg"

diff --git a/packages/client-run/src/Start/SignupFormFormik.js b/packages/client-run/src/Start/SignupFormFormik.js
@@ -36,64 +36,70 @@ function zipCodeLookup(value) {
   return true;
 }
 
-const SignupFormFormik = withFormik({
-  validateOnBlur: false,
-  validateOnChange: true,
-  validationSchema: Yup.object().shape({
-    opponent: Yup.string()
-      .required('Required'),
-    shoes: Yup.string()
-      .required('Required'),
-    age: Yup.number()
-      .required('Required'),
-    height: Yup.number()
-      .required('Required')
-      .typeError('Height must be a number')
-      .min(0)
-      .max(100)
-      .integer('Please enter a valid number'),
-    // Zip codes are 5 digits
-    // We don't accept the extra 4 digits.
-    zipCode: Yup.string()
-      .required('Required')
-      .matches(
-        /(^\d{5}$)|(^\d{5}-\d{4}$)/,
-        'Please enter 5 numbers for a Zip Code.',
-      )
-      // Also do a Zip Code lookup to ensure that it's a valid place.
-      .test('test-name', 'enter a valid US Zip Code', zipCodeLookup),
-    icon: Yup.string()
-      .required('Required'),
-  }),
+function getSignupForm(settings) {
+  return withFormik({
+    validateOnBlur: false,
+    validateOnChange: true,
+    validationSchema: Yup.object().shape({
+      opponent: Yup.string()
+        .required('Required'),
+      shoes: Yup.string()
+        .required('Required'),
+      age: Yup.number()
+        .required('Required'),
+      height: Yup.number()
+        .required('Required')
+        .typeError('Height must be a number')
+        .min(0)
+        .max(100)
+        .integer('Please enter a valid number'),
+      // Zip codes are 5 digits
+      // We don't accept the extra 4 digits.
+      zipCode: settings.location === 'null' ? undefined : Yup.string()
+        .required('Required') // Get location and then decide required or not
+        .matches(
+          /(^\d{5}$)|(^\d{5}-\d{4}$)/,
+          'Please enter 5 numbers for a Zip Code.',
+        )
+        // Also do a Zip Code lookup to ensure that it's a valid place.
+        .test('test-name', 'enter a valid US Zip Code', zipCodeLookup),
+      icon: Yup.string()
+        .required('Required'),
+    }),
 
-  // Submission handler
-  handleSubmit: (values, { props }) => {
-    const location = zipcodes.lookup(values.zipCode);
-    props.updateRun({
-      variables: {
-        run: {
-          start: null,
-          org: process.env.REACT_APP_LOCATION,
-          person: {
-            opponent: values.opponent,
-            shoes: values.shoes,
-            age: values.age,
-            height: values.height,
-            zipCode: values.zipCode,
-            icon: values.icon,
-            state: location.state,
-            latitude: location.latitude,
-            longitude: location.longitude,
-            org: process.env.REACT_APP_LOCATION,
+    // Submission handler
+    handleSubmit: (values, { props }) => {
+      let location;
+      if (values.zipCode !== undefined) {
+        location = zipcodes.lookup(values.zipCode);
+      }
+      props.updateRun({
+        variables: {
+          run: {
+            start: null,
+            org: settings.location,
+            person: {
+              opponent: values.opponent,
+              shoes: values.shoes,
+              age: values.age,
+              height: values.height,
+              zipCode: values.zipCode,
+              icon: values.icon,
+              state: !values.zipcode ? '' : location.state,
+              latitude: !values.zipCode ? 0.0 : location.latitude,
+              longitude: !values.zipCode ? 0.0 : location.longitude,
+              org: settings.location,
+            },
           },
         },
-      },
-    });
-  },
-})(SignupForm);
+      });
+    },
+  })(SignupForm);
+}
 
 function WithCreateMutation(props) {
   const { settings } = props;
+  const SignupFormFormik = getSignupForm(settings);
   return (
     <Mutation
       mutation={FINISH_SIGNUP}

diff --git a/packages/server-graphql/src/db/seeders/20180525225625-demo-setting.js b/packages/server-graphql/src/db/seeders/20180525225625-demo-setting.js
@@ -100,6 +100,22 @@ module.exports = {
         updatedAt: new Date(),
         deletedAt: null,
       },
+      {
+        id: uuidv4(),
+        location: 'null',
+        usState: 'null',
+        activityName: 'run',
+        preRunDelay: 15540,
+        postRunDelay: 7500,
+        startLineTimeout: 10000,
+        runTimeout: 7500,
+        attractDelay: 120000,
+        latitude: 39.1726664,
+        longitude: -86.5234313,
+        createdAt: new Date(),
+        updatedAt: new Date(),
+        deletedAt: null,
+      },
     ],
     {},
   ),