Merge pull request projectunic0rn#72 from projectunic0rn/'trips'

'trips'
hoangviet1993 · Mar 5, 2020 · 36de9b7 · 36de9b7
2 parents 50f6951 + 6078ca9
commit 36de9b7
Show file tree

Hide file tree

Showing 35 changed files with 3,530 additions and 254 deletions.
diff --git a/src/_App.scss b/src/_App.scss
@@ -41,6 +41,11 @@ body {
                                   supported by Chrome and Opera */
 }
 
+input {
+  border-radius: 0;
+  -webkit-appearance: none;
+}
+
 a {
   text-decoration: none;
 }

diff --git a/src/icons/SaveIcon.js b/src/icons/SaveIcon.js
@@ -10,8 +10,6 @@ class SaveIcon extends Component {
         viewBox="0 0 18 18"
         x="0px"
         y="0px"
-        width="18px"
-        height="18px"
       >
         <path
         fill="rgb(138, 181, 209)"

diff --git a/src/pages/FAQ/subcomponents/AccordionFAQ.js b/src/pages/FAQ/subcomponents/AccordionFAQ.js
@@ -19,7 +19,7 @@ function AccordionFAQ({ text, title }) {
 }
 
 AccordionFAQ.propTypes = {
-  text: PropTypes.string,
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   title: PropTypes.string
 };
 

diff --git a/src/pages/Home/_MapPage.scss b/src/pages/Home/_MapPage.scss
@@ -11,17 +11,17 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  height: calc(100% - 30px);
+  height: calc(100% - 60px);
   width: 100vw;
   margin: 0 auto;
   .country-map {
     margin: 0px;
-    height: 100%;
+    height: calc(100% - 60px);
     position: relative;
     text-align: center;
     .rsm-svg {
       width: calc(100% - 0px);
-      height: calc(100% - 80px);
+      height: calc(100% - 100px);
       transform: translate(0, -0px);
       .rsm-zoomable-group {
         @media (max-width: 1000px) {
@@ -120,6 +120,10 @@
       align-content: center;
       margin: 8px auto;
       transform: translateY(8px);
+      @media (max-width: 500px) {
+        max-width: 200px;
+        flex-wrap: wrap;
+      }
       button {
         z-index: 2;
         background: none;
@@ -130,12 +134,12 @@
         @media (max-width: 1000px) {
           font-size: 14px;
         }
-        // @media (max-width: 800px) {
-        //   font-size: 12px;
-        // }
-        // @media (max-width: 700px) {
-        //   font-size: 10px;
-        // }
+        @media (max-width: 800px) {
+          font-size: 12px;
+        }
+        @media (max-width: 600px) {
+          font-size: 10px;
+        }
         &:hover {
           color: $grey;
         }
@@ -184,19 +188,16 @@
       fill: #528fb1;
     }
   }
+  @media (max-width: 700px) {
+    display: none;
+  }
 }
 .sc-controls-left {
   left: calc(50% - 334px);
   @media (max-width: 800px) {
     left: calc(50% - 294px);
   }
-  @media (max-width: 600px) {
-    left: calc(50% - 264px);
-  }
-  @media (max-width: 500px) {
-    left: calc(50% - 30px);
-    top: 60px;
-  }
+
 }
 
 .new-map-suggest {
@@ -261,3 +262,29 @@
     }
   }
 }
+
+.country-map {
+  .city-side-menu {
+    height: calc(100% - 60px);
+    padding: 0;
+    top: 60px;
+  }
+  .side-menu-container {
+    #new-city-map-button-side-menu {
+      display: flex;
+      justify-content: center;
+      position: relative;
+      top: 200px;
+      left: 0px;
+      width: 60px;
+      height: 42px;
+      background: #f8f8fc;
+      align-items: center;
+      z-index: 1000;
+      border-radius: 8px;
+      box-shadow: 0 1px 2px 0 rgba(19, 18, 18, 0.5);
+      cursor: pointer;
+    }
+  }
+}
+
diff --git a/src/pages/Home/subcomponents/CityMapTrialConst.js b/src/pages/Home/subcomponents/CityMapTrialConst.js
@@ -7,7 +7,11 @@ import Cluster from "@urbica/react-map-gl-cluster";
 import Geocoder from "react-map-gl-geocoder";
 import Swal from "sweetalert2";
 import { useMutation } from "@apollo/react-hooks";
-import { ADD_MULTIPLE_PLACES, NEW_GEORNEY_SCORE, UPDATE_GEORNEY_SCORE } from "../../../GraphQL";
+import {
+  ADD_MULTIPLE_PLACES,
+  NEW_GEORNEY_SCORE,
+  UPDATE_GEORNEY_SCORE
+} from "../../../GraphQL";
 
 import { TravelScoreCalculator } from "../../../TravelScore";
 import MapScorecard from "./MapScorecard";
@@ -49,6 +53,7 @@ function CityMapTrialConst(props) {
   const [travelScoreIndexArray, handleTravelScoreIndexArray] = useState([]);
   const [clickedCityArray, handleClickedCityArray] = useState([]);
   const [newLiveCity, handleNewLiveCity] = useState();
+  const [showSideMenu, handleSideMenu] = useState(false);
   const [addMultiplePlaces] = useMutation(ADD_MULTIPLE_PLACES, {
     onCompleted() {}
   });
@@ -57,9 +62,7 @@ function CityMapTrialConst(props) {
       props.refetch();
     }
   });
-  const [newGeorneyScore] = useMutation(NEW_GEORNEY_SCORE, {
-
-  });
+  const [newGeorneyScore] = useMutation(NEW_GEORNEY_SCORE, {});
 
   const mapRef = useRef();
   const clusterPast = useRef();
@@ -115,18 +118,14 @@ function CityMapTrialConst(props) {
 
   function setInitialZoom() {
     let zoom;
-    if (window.innerWidth >= 2400) {
-      zoom = 2.2;
-    } else if (window.innerWidth >= 1750) {
-      zoom = 1.75;
-    } else if (window.innerWidth <= 900) {
-      zoom = 0.75;
-    } else if (window.innerWidth <= 1200) {
-      zoom = 1.0;
-    } else if (window.innerWidth <= 1400) {
-      zoom = 1.25;
-    } else if (window.innerWidth < 1750) {
-      zoom = 1.5;
+    if (window.innerWidth <= 2 * window.innerHeight) {
+      zoom = window.innerWidth * 0.0009;
+    } else {
+      if (window.innerHeight >= 500) {
+        zoom = window.innerHeight * 0.0017;
+      } else {
+        zoom = window.innerHeight * 0.0008;
+      }
     }
     return zoom;
   }
@@ -689,27 +688,29 @@ function CityMapTrialConst(props) {
             key={city.cityId}
             latitude={city.city_latitude}
             longitude={city.city_longitude}
-            offsetLeft={-5}
-            offsetTop={-10}
           >
             <div
               onMouseOver={() => handleCityTooltip(city)}
               style={{
-                backgroundColor: color
+                backgroundColor: color,
+                transform: "translate(-5px, -10px)"
               }}
               key={"circle" + city.cityId}
               className="dot"
             />
             <div
               onMouseOver={() => handleCityTooltip(city)}
               style={{
-                backgroundColor: "rgba(203, 118, 120, 1)"
+                backgroundColor: "rgba(203, 118, 120, 1)",
+                transform: "translate(-5px, -10px)"
               }}
               key={"circle2" + city.cityId}
               className="dot-inner"
             />
             <div
-              style={{ border: "10px solid rgba(203, 118, 120, 1)" }}
+              style={{
+                border: "10px solid rgba(203, 118, 120, 1)"
+              }}
               key={"circle3" + city.cityId}
               className="pulse"
             />
@@ -729,20 +730,22 @@ function CityMapTrialConst(props) {
             key={city.cityId}
             latitude={city.city_latitude}
             longitude={city.city_longitude}
-            offsetLeft={-5}
-            offsetTop={-10}
           >
             <div
               onMouseOver={() => handleCityTooltip(city)}
               style={{
-                backgroundColor: color
+                backgroundColor: color,
+                transform: "translate(-5px, -10px)"
               }}
               key={"circle" + city.cityId}
               className="dot"
             />
             <div
               onMouseOver={() => handleCityTooltip(city)}
-              style={{ backgroundColor: "rgba(115, 167, 195, 1.0)" }}
+              style={{
+                backgroundColor: "rgba(115, 167, 195, 1.0)",
+                transform: "translate(-5px, -10px)"
+              }}
               key={"circle2" + city.cityId}
               className="dot-inner"
             />
@@ -766,18 +769,22 @@ function CityMapTrialConst(props) {
             key={city.cityId}
             latitude={city.city_latitude}
             longitude={city.city_longitude}
-            offsetLeft={-5}
-            offsetTop={-10}
           >
             <div
               onMouseOver={() => handleCityTooltip(city)}
-              style={{ backgroundColor: color }}
+              style={{
+                backgroundColor: color,
+                transform: "translate(-5px, -10px)"
+              }}
               key={"circle" + city.cityId}
               className="dot"
             />
             <div
               onMouseOver={() => handleCityTooltip(city)}
-              style={{ backgroundColor: "rgba(150, 177, 168, 1.0)" }}
+              style={{
+                backgroundColor: "rgba(150, 177, 168, 1.0)",
+                transform: "translate(-5px, -10px)"
+              }}
               key={"circle2" + city.cityId}
               className="dot-inner"
             />
@@ -845,6 +852,7 @@ function CityMapTrialConst(props) {
 
   function showSuggest() {
     handleSuggestedPopup(!suggestPopup);
+    handleSideMenu(false);
   }
 
   function handleContinents(contArray) {
@@ -884,6 +892,59 @@ function CityMapTrialConst(props) {
   return (
     <>
       <div className="city-map-container">
+        <div
+          className="city-new-side-menu"
+          style={showSideMenu ? { width: "250px" } : { width: "40px" }}
+        >
+          {!showSideMenu ? (
+            <a className="opennav" onClick={() => handleSideMenu(true)}>
+              &raquo;
+            </a>
+          ) : (
+            <>
+              <a className="closebtn" onClick={() => handleSideMenu(false)}>
+                &times;
+              </a>
+              <div className="side-menu-container">
+                <div
+                  className="city-new-map-scorecard"
+                  id="scorecard-side-menu"
+                >
+                  <MapScorecard
+                    tripTimingCounts={tripTimingCounts}
+                    activeTimings={activeTimings}
+                    sendActiveTimings={handleActiveTimings}
+                  />
+                </div>
+                <div
+                  id="new-country-map-button-side-menu"
+                  className="sc-controls sc-controls-left"
+                  onClick={() => props.handleMapTypeChange(0)}
+                >
+                  <span className="new-map-suggest">
+                    <span className="sc-control-label">Country map</span>
+                    <span
+                      id="map-change-icon"
+                      onClick={() => props.handleMapTypeChange(0)}
+                    >
+                      <MapChangeIcon />
+                    </span>
+                  </span>
+                </div>
+                <div className="sc-controls" id="sc-controls-city-side-menu">
+                  {timingState !== 2 ? (
+                    <span className="new-map-suggest" onClick={showSuggest}>
+                      <span className="sc-control-label">Tap cities</span>
+                      <span>
+                        <SuggestionsIcon />
+                      </span>
+                    </span>
+                  ) : null}
+                </div>
+              </div>
+            </>
+          )}
+        </div>
         <div className="map-header-button">
           <div
             className="sc-controls sc-controls-left"
@@ -929,7 +990,10 @@ function CityMapTrialConst(props) {
             <ShareIcon />
           </div>
           {timingState !== 2 ? (
-            <div className="sc-controls" onClick={showSuggest}>
+            <div
+              className="sc-controls sc-controls-right"
+              onClick={showSuggest}
+            >
               <span className="new-map-suggest">
                 <span className="sc-control-label">Tap cities</span>
                 <span onClick={showSuggest}>