CEC-3932 - position of home map based on location (#327)

* CEC-3932 - position of home map based on location

* EasyButtons added

* remove unused icons

* use dropdown

* revert unneeded changes

* updates from review

* update snap

.env.cec-euprd

@@ -16,3 +16,4 @@ REACT_APP_ROLE_MANUFACTURE=3412e11a-a2d1-4355-be3e-ef9aa5065b69
 REACT_APP_ROLE_SUPPLIER_APPROVER=a6c9805e-80b2-42b2-bfbb-9df52e5504d8
 REACT_APP_ROLE_MANIFEST_MIGRATION=42798c8a-9fa7-4fb4-82c0-9582cabe364f
 REACT_APP_ECCKEY_ENV=
+REACT_APP_HOME_MAP_DEFAULT_LOCATION={"lat":49.8327,"lng":9.8816,"zoom":4.5}

.env.cec-prd

@@ -16,3 +16,4 @@ REACT_APP_ROLE_MANUFACTURE=3412e11a-a2d1-4355-be3e-ef9aa5065b69
 REACT_APP_ROLE_SUPPLIER_APPROVER=a6c9805e-80b2-42b2-bfbb-9df52e5504d8
 REACT_APP_ROLE_MANIFEST_MIGRATION=42798c8a-9fa7-4fb4-82c0-9582cabe364f
 REACT_APP_ECCKEY_ENV=
+REACT_APP_HOME_MAP_DEFAULT_LOCATION={"lat":37.0902,"lng":-95.7129,"zoom":4.5}

.env.dev

@@ -16,3 +16,4 @@ REACT_APP_ROLE_MANUFACTURE=3412e11a-a2d1-4355-be3e-ef9aa5065b69
 REACT_APP_ROLE_SUPPLIER_APPROVER=a6c9805e-80b2-42b2-bfbb-9df52e5504d8
 REACT_APP_ROLE_MANIFEST_MIGRATION=42798c8a-9fa7-4fb4-82c0-9582cabe364f
 REACT_APP_ECCKEY_ENV=stage,prod
+REACT_APP_HOME_MAP_DEFAULT_LOCATION={"lat":37.0902,"lng":-95.7129,"zoom":4.5}

.env.local

@@ -16,3 +16,4 @@ REACT_APP_ROLE_MANUFACTURE=3412e11a-a2d1-4355-be3e-ef9aa5065b69
 REACT_APP_ROLE_SUPPLIER_APPROVER=a6c9805e-80b2-42b2-bfbb-9df52e5504d8
 REACT_APP_ROLE_MANIFEST_MIGRATION=42798c8a-9fa7-4fb4-82c0-9582cabe364f
 REACT_APP_ECCKEY_ENV=dev,stage,prod
+REACT_APP_HOME_MAP_DEFAULT_LOCATION={"lat":37.0902,"lng":-95.7129,"zoom":4.5}

.env.prd

@@ -16,3 +16,4 @@ REACT_APP_ROLE_MANUFACTURE=3412e11a-a2d1-4355-be3e-ef9aa5065b69
 REACT_APP_ROLE_SUPPLIER_APPROVER=a6c9805e-80b2-42b2-bfbb-9df52e5504d8
 REACT_APP_ROLE_MANIFEST_MIGRATION=42798c8a-9fa7-4fb4-82c0-9582cabe364f
 REACT_APP_ECCKEY_ENV=stage
+REACT_APP_HOME_MAP_DEFAULT_LOCATION={"lat":37.0902,"lng":-95.7129,"zoom":4.5}

.env.stg

@@ -16,3 +16,4 @@ REACT_APP_ROLE_MANUFACTURE=3412e11a-a2d1-4355-be3e-ef9aa5065b69
 REACT_APP_ROLE_SUPPLIER_APPROVER=a6c9805e-80b2-42b2-bfbb-9df52e5504d8
 REACT_APP_ROLE_MANIFEST_MIGRATION=42798c8a-9fa7-4fb4-82c0-9582cabe364f
 REACT_APP_ECCKEY_ENV=prod
+REACT_APP_HOME_MAP_DEFAULT_LOCATION={"lat":37.0902,"lng":-95.7129,"zoom":4.5}

.env.template

@@ -16,3 +16,4 @@ REACT_APP_ROLE_MANUFACTURE=3412e11a-a2d1-4355-be3e-ef9aa5065b69
 REACT_APP_ROLE_SUPPLIER_APPROVER=a6c9805e-80b2-42b2-bfbb-9df52e5504d8
 REACT_APP_ROLE_MANIFEST_MIGRATION=42798c8a-9fa7-4fb4-82c0-9582cabe364f
 REACT_APP_ECCKEY_ENV=dev,stage,prod
+REACT_APP_HOME_MAP_DEFAULT_LOCATION={"lat":37.0902,"lng":-95.7129,"zoom":4.5}

src/components/App/__snapshots__/App.test.js.snap

@@ -475,6 +475,79 @@ exports[`App Route / authenticated 1`] = `
             <div
               data-testid="mocked-vehicleprovider"
             >
+              <div
+                class="MuiFormControl-root MuiFormControl-marginNormal"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
+                  data-shrink="true"
+                >
+                  Zoom To
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+                >
+                  <select
+                    aria-invalid="false"
+                    class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
+                  >
+                    <option
+                      value="{ \\"center\\": [37.0902, -95.7129], \\"zoom\\": 4.5 }"
+                    >
+                      North America
+                    </option>
+                    <option
+                      value="{ \\"center\\": [33.8463, -118.0461], \\"zoom\\": 10 }"
+                    >
+                      - La Palma
+                    </option>
+                    <option
+                      value="{ \\"center\\": [33.8847, -118.4109], \\"zoom\\": 10 }"
+                    >
+                      - Manhattan Beach
+                    </option>
+                    <option
+                      value="{ \\"center\\": [37.7749, -122.4194], \\"zoom\\": 10 }"
+                    >
+                      - San Francisco
+                    </option>
+                    <option
+                      value="{ \\"center\\": [49.8327, 9.8816], \\"zoom\\": 4.5 }"
+                    >
+                      Europe
+                    </option>
+                    <option
+                      value="{ \\"center\\": [47.0707, 15.4395], \\"zoom\\": 10 }"
+                    >
+                      - Graz
+                    </option>
+                  </select>
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M7 10l5 5 5-5z"
+                    />
+                  </svg>
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                    style="padding-left: 8px;"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-0"
+                      style="width: 0.01px;"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
               <div
                 class="leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
                 style="width: 100%; height: 900px; position: relative;"
@@ -1799,6 +1872,79 @@ exports[`App Route /home authenticated 1`] = `
             <div
               data-testid="mocked-vehicleprovider"
             >
+              <div
+                class="MuiFormControl-root MuiFormControl-marginNormal"
+              >
+                <label
+                  class="MuiFormLabel-root MuiInputLabel-root makeStyles-whiteBackground-0 MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
+                  data-shrink="true"
+                >
+                  Zoom To
+                </label>
+                <div
+                  class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"
+                >
+                  <select
+                    aria-invalid="false"
+                    class="MuiSelect-root MuiSelect-select MuiSelect-outlined MuiInputBase-input MuiOutlinedInput-input"
+                  >
+                    <option
+                      value="{ \\"center\\": [37.0902, -95.7129], \\"zoom\\": 4.5 }"
+                    >
+                      North America
+                    </option>
+                    <option
+                      value="{ \\"center\\": [33.8463, -118.0461], \\"zoom\\": 10 }"
+                    >
+                      - La Palma
+                    </option>
+                    <option
+                      value="{ \\"center\\": [33.8847, -118.4109], \\"zoom\\": 10 }"
+                    >
+                      - Manhattan Beach
+                    </option>
+                    <option
+                      value="{ \\"center\\": [37.7749, -122.4194], \\"zoom\\": 10 }"
+                    >
+                      - San Francisco
+                    </option>
+                    <option
+                      value="{ \\"center\\": [49.8327, 9.8816], \\"zoom\\": 4.5 }"
+                    >
+                      Europe
+                    </option>
+                    <option
+                      value="{ \\"center\\": [47.0707, 15.4395], \\"zoom\\": 10 }"
+                    >
+                      - Graz
+                    </option>
+                  </select>
+                  <svg
+                    aria-hidden="true"
+                    class="MuiSvgIcon-root MuiSelect-icon MuiSelect-iconOutlined"
+                    focusable="false"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      d="M7 10l5 5 5-5z"
+                    />
+                  </svg>
+                  <fieldset
+                    aria-hidden="true"
+                    class="PrivateNotchedOutline-root-0 MuiOutlinedInput-notchedOutline"
+                    style="padding-left: 8px;"
+                  >
+                    <legend
+                      class="PrivateNotchedOutline-legend-0"
+                      style="width: 0.01px;"
+                    >
+                      <span>
+                        ​
+                      </span>
+                    </legend>
+                  </fieldset>
+                </div>
+              </div>
               <div
                 class="leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
                 style="width: 100%; height: 900px; position: relative;"

src/components/VehicleMap/index.jsx

@@ -6,11 +6,13 @@ import useStyles from "../useStyles";
 
 import GrayMarkerIcon from "../../assets/gray-marker.png";
 import GreenMarkerIcon from "../../assets/green-marker.png";
+import { DropDownList } from "../Controls/DropDownList";
 import { logger } from "../../services/monitoring";
 import { ValidateLocationData } from "../../utils/locations";
 import { useUserContext } from "../Contexts/UserContext";
 import { useVehicleContext, VehicleProvider } from "../Contexts/VehicleContext";
 import { VehiclePopUp } from "./popup";
+import zoomLocations from './zoomLocations.json';
 
 const Component = () => {
   const classes = useStyles();
@@ -60,17 +62,10 @@ const Component = () => {
   };
 
   const centerAroundMarkers = (points) => {
-    // if (markers == null) {
+    let defaultLocationJSON = process.env.REACT_APP_HOME_MAP_DEFAULT_LOCATION;
-    //   markers = []
+    let defaultLocation = JSON.parse(defaultLocationJSON)
-    // }
+    setCenter([defaultLocation.lat, defaultLocation.lng]);
-    // const coord = markers.reduce((coord, marker) => {
+    setZoom(defaultLocation.zoom);
-    //   coord[0] += marker[0] / markers.length;
-    //   coord[1] += marker[1] / markers.length;
-    //   return coord;
-    // }, [0, 0])
-
-    setCenter([37.0902, -95.7129]);
-    setZoom(4.5);
   };
 
   useEffect(() => {
@@ -109,6 +104,12 @@ const Component = () => {
     setSelectedVIN(vin);
   };
 
+  const focusMap = (e) => {
+    let zoomLocation = JSON.parse(e.target.value)
+    setCenter(zoomLocation.center);
+    setZoom(zoomLocation.zoom)
+  }
+
   const retrieveAndStoreCarState = (vin) => {
     getState(token, vin).then((results) => {
       setCarState({ ...results.data, vin: vin });
@@ -143,55 +144,58 @@ const Component = () => {
   }
 
   return (
-    <MapContainer
+    <>
-      center={center}
+      <DropDownList label="Zoom To" data={zoomLocations} classes={classes} onChange={focusMap} />
-      zoom={zoom}
+      <MapContainer
-      style={{
+        center={center}
-        width: "100%",
+        zoom={zoom}
-        height: "900px",
+        style={{
-      }}
+          width: "100%",
-    >
+          height: "900px",
-      <TileLayer
+        }}
-        attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+      >
-        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        <TileLayer
-      />
+          attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
-      <CenterFocus center={center} zoom={zoom} />
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-      {markers.map((marker) => (
-        <Marker
-          icon={getCarIcon(marker[2])}
-          key={marker[2]}
-          position={[marker[0], marker[1]]}
-          title={marker[2]}
-          opacity={0.9}
-          zIndexOffset={getZIndex(marker[2])}
-        >
-          <Popup>
-            <div align="center">
-              <p className={classes.markerTitle}>
-                <b>{marker[2]}</b>
-              </p>
-              <Button
-                type="submit"
-                variant="contained"
-                color="primary"
-                onClick={(e) => selectCar(e, marker[2])}
-              >
-                View Stats
-              </Button>
-            </div>
-          </Popup>
-        </Marker>
-      ))}
-
-      {carState ? (
-        <VehiclePopUp
-          key={carState.vin}
-          {...carState}
-          className={classes.popup}
-          onClose={handleClose}
         />
-      ) : null}
+        <CenterFocus center={center} zoom={zoom} />
-    </MapContainer>
+        {markers.map((marker) => (
+          <Marker
+            icon={getCarIcon(marker[2])}
+            key={marker[2]}
+            position={[marker[0], marker[1]]}
+            title={marker[2]}
+            opacity={0.9}
+            zIndexOffset={getZIndex(marker[2])}
+          >
+            <Popup>
+              <div align="center">
+                <p className={classes.markerTitle}>
+                  <b>{marker[2]}</b>
+                </p>
+                <Button
+                  type="submit"
+                  variant="contained"
+                  color="primary"
+                  onClick={(e) => selectCar(e, marker[2])}
+                >
+                  View Stats
+                </Button>
+              </div>
+            </Popup>
+          </Marker>
+        ))}
+
+        {carState ? (
+          <VehiclePopUp
+            key={carState.vin}
+            {...carState}
+            className={classes.popup}
+            onClose={handleClose}
+          />
+        ) : null}
+      </MapContainer>
+    </>
   );
 };
 

src/components/VehicleMap/zoomLocations.json

@@ -0,0 +1,26 @@
+[
+  {
+    "value": "{ \"center\": [37.0902, -95.7129], \"zoom\": 4.5 }",
+    "label": "North America"
+  },
+  {
+    "value": "{ \"center\": [33.8463, -118.0461], \"zoom\": 10 }",
+    "label": "- La Palma"
+  },
+  {
+    "value": "{ \"center\": [33.8847, -118.4109], \"zoom\": 10 }",
+    "label": "- Manhattan Beach"
+  },
+  {
+    "value": "{ \"center\": [37.7749, -122.4194], \"zoom\": 10 }",
+    "label": "- San Francisco"
+  },
+  {
+    "value": "{ \"center\": [49.8327, 9.8816], \"zoom\": 4.5 }",
+    "label": "Europe"
+  },
+  {
+    "value": "{ \"center\": [47.0707, 15.4395], \"zoom\": 10 }",
+    "label": "- Graz"
+  }
+]