From 3e5e1b93181e596c703b54473928fde869379f31 Mon Sep 17 00:00:00 2001 From: Krishi-02 <54003342+Krishi-02@users.noreply.github.com> Date: Tue, 26 Jul 2022 23:46:01 +0530 Subject: [PATCH 1/6] current location coords and search box UI --- package.json | 4 + src/screen/trip.css | 24 ++++ src/screen/trip.js | 51 +++++++- yarn.lock | 294 ++++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 363 insertions(+), 10 deletions(-) create mode 100644 src/screen/trip.css diff --git a/package.json b/package.json index 7537184..b77d645 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,10 @@ "version": "0.1.0", "private": true, "dependencies": { + "@emotion/react": "^11.9.3", + "@emotion/styled": "^11.9.3", + "@mui/icons-material": "^5.8.4", + "@mui/material": "^5.9.2", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", diff --git a/src/screen/trip.css b/src/screen/trip.css new file mode 100644 index 0000000..d5ab7d6 --- /dev/null +++ b/src/screen/trip.css @@ -0,0 +1,24 @@ +/* .search-bar{ + display: flex; + flex-direction: row; + margin: 40px; +} */ +.search{ + margin-top: 40px; + display: inline-flex; + flex-direction: column; + flex-wrap: nowrap; +} + +.current-location, .destination-location{ + margin-bottom: 10px !important; + width: 600px; + font-size: 45px; + color: blueviolet !important; +} + +.icon{ + width: 35px !important; + margin: 15px; +} + diff --git a/src/screen/trip.js b/src/screen/trip.js index b87044d..0398631 100644 --- a/src/screen/trip.js +++ b/src/screen/trip.js @@ -1,15 +1,60 @@ -import React from "react"; +import React, {useState} from "react"; import { Fab } from "../Components/common/Fab"; +import TextField from "@mui/material/TextField"; +import MyLocationIcon from '@mui/icons-material/MyLocation'; +import PlaceIcon from '@mui/icons-material/Place'; +import './trip.css'; + const navigateToHome = () => (window.location.href = "/"); export function Trip() { + const [currentCity, setCurrentCity] = useState([]); React.useEffect(() => { document.title = "Plan a trip"; - }, []); - return ( + window.navigator.geolocation.getCurrentPosition((position) => { + fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${position.coords.latitude}&lon=${position.coords.longitude}&appid=${process.env.REACT_APP_APIKEY}`) + .then(res => res.json()) + .then(result => { + console.log(result) + let currentCoords = []; + currentCoords.push({ + lat: result.coord.lat, + lon: result.coord.lon, + name: result.name + }) + setCurrentCity(currentCoords); + }) + }) + }, []); + console.log(currentCity) + return ( <> +
+
+
+ + +
+
+ + +
+
+
Weather diff --git a/yarn.lock b/yarn.lock index 341b82d..e122831 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1077,6 +1077,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.13.10", "@babel/runtime@^7.17.2", "@babel/runtime@^7.8.7": + version "7.18.9" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a" + integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.3.3": version "7.12.13" resolved "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz" @@ -1132,28 +1139,112 @@ resolved "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz" integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg== -"@emotion/is-prop-valid@^1.1.0": +"@emotion/babel-plugin@^11.7.1": + version "11.9.2" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz#723b6d394c89fb2ef782229d92ba95a740576e95" + integrity sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw== + dependencies: + "@babel/helper-module-imports" "^7.12.13" + "@babel/plugin-syntax-jsx" "^7.12.13" + "@babel/runtime" "^7.13.10" + "@emotion/hash" "^0.8.0" + "@emotion/memoize" "^0.7.5" + "@emotion/serialize" "^1.0.2" + babel-plugin-macros "^2.6.1" + convert-source-map "^1.5.0" + escape-string-regexp "^4.0.0" + find-root "^1.1.0" + source-map "^0.5.7" + stylis "4.0.13" + +"@emotion/cache@^11.9.3": + version "11.9.3" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.9.3.tgz#96638449f6929fd18062cfe04d79b29b44c0d6cb" + integrity sha512-0dgkI/JKlCXa+lEXviaMtGBL0ynpx4osh7rjOXE71q9bIF8G+XhJgvi+wDu0B0IdCVx37BffiwXlN9I3UuzFvg== + dependencies: + "@emotion/memoize" "^0.7.4" + "@emotion/sheet" "^1.1.1" + "@emotion/utils" "^1.0.0" + "@emotion/weak-memoize" "^0.2.5" + stylis "4.0.13" + +"@emotion/hash@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" + integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== + +"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.1.3": version "1.1.3" resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz" integrity sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA== dependencies: "@emotion/memoize" "^0.7.4" -"@emotion/memoize@^0.7.4": +"@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5": version "0.7.5" resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz" integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ== +"@emotion/react@^11.9.3": + version "11.9.3" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.9.3.tgz#f4f4f34444f6654a2e550f5dab4f2d360c101df9" + integrity sha512-g9Q1GcTOlzOEjqwuLF/Zd9LC+4FljjPjDfxSM7KmEakm+hsHXk+bYZ2q+/hTJzr0OUNkujo72pXLQvXj6H+GJQ== + dependencies: + "@babel/runtime" "^7.13.10" + "@emotion/babel-plugin" "^11.7.1" + "@emotion/cache" "^11.9.3" + "@emotion/serialize" "^1.0.4" + "@emotion/utils" "^1.1.0" + "@emotion/weak-memoize" "^0.2.5" + hoist-non-react-statics "^3.3.1" + +"@emotion/serialize@^1.0.2", "@emotion/serialize@^1.0.4": + version "1.0.4" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.4.tgz#ff31fd11bb07999611199c2229e152faadc21a3c" + integrity sha512-1JHamSpH8PIfFwAMryO2bNka+y8+KA5yga5Ocf2d7ZEiJjb7xlLW7aknBGZqJLajuLOvJ+72vN+IBSwPlXD1Pg== + dependencies: + "@emotion/hash" "^0.8.0" + "@emotion/memoize" "^0.7.4" + "@emotion/unitless" "^0.7.5" + "@emotion/utils" "^1.0.0" + csstype "^3.0.2" + +"@emotion/sheet@^1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.1.tgz#015756e2a9a3c7c5f11d8ec22966a8dbfbfac787" + integrity sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA== + +"@emotion/styled@^11.9.3": + version "11.9.3" + resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.9.3.tgz#47f0c71137fec7c57035bf3659b52fb536792340" + integrity sha512-o3sBNwbtoVz9v7WB1/Y/AmXl69YHmei2mrVnK7JgyBJ//Rst5yqPZCecEJlMlJrFeWHp+ki/54uN265V2pEcXA== + dependencies: + "@babel/runtime" "^7.13.10" + "@emotion/babel-plugin" "^11.7.1" + "@emotion/is-prop-valid" "^1.1.3" + "@emotion/serialize" "^1.0.4" + "@emotion/utils" "^1.1.0" + "@emotion/stylis@^0.8.4": version "0.8.5" resolved "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz" integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== -"@emotion/unitless@^0.7.4": +"@emotion/unitless@^0.7.4", "@emotion/unitless@^0.7.5": version "0.7.5" resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== +"@emotion/utils@^1.0.0", "@emotion/utils@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.1.0.tgz#86b0b297f3f1a0f2bdb08eeac9a2f49afd40d0cf" + integrity sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ== + +"@emotion/weak-memoize@^0.2.5": + version "0.2.5" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" + integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== + "@eslint/eslintrc@^0.3.0": version "0.3.0" resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.3.0.tgz" @@ -1389,6 +1480,93 @@ "@types/yargs" "^15.0.0" chalk "^4.0.0" +"@mui/base@5.0.0-alpha.91": + version "5.0.0-alpha.91" + resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.91.tgz#124d88829c9d5ee7a61ab2b0b2aee2ca35ee64f2" + integrity sha512-/W5amPDz+Lout4FtX5HOyx2Q+YL/EtZciFrx2DDRuUm4M/pWnjfDZAtM+0aqimEvuk3FU+/PuFc7IAyhCSX4Cg== + dependencies: + "@babel/runtime" "^7.17.2" + "@emotion/is-prop-valid" "^1.1.3" + "@mui/types" "^7.1.5" + "@mui/utils" "^5.9.1" + "@popperjs/core" "^2.11.5" + clsx "^1.2.1" + prop-types "^15.8.1" + react-is "^18.2.0" + +"@mui/icons-material@^5.8.4": + version "5.8.4" + resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.8.4.tgz#3f2907c9f8f5ce4d754cb8fb4b68b5a1abf4d095" + integrity sha512-9Z/vyj2szvEhGWDvb+gG875bOGm8b8rlHBKOD1+nA3PcgC3fV6W1AU6pfOorPeBfH2X4mb9Boe97vHvaSndQvA== + dependencies: + "@babel/runtime" "^7.17.2" + +"@mui/material@^5.9.2": + version "5.9.2" + resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.9.2.tgz#2526c33568b4c785b0784b0714a8f613cd9dcd46" + integrity sha512-FItBuj9bPdVier2g5OBG2HHlQLou4JuH3gdnY43tpJOrCpmWrbDVJZqrSufKJFO00qjvTYaGlJedIu+vXn79qw== + dependencies: + "@babel/runtime" "^7.17.2" + "@mui/base" "5.0.0-alpha.91" + "@mui/system" "^5.9.2" + "@mui/types" "^7.1.5" + "@mui/utils" "^5.9.1" + "@types/react-transition-group" "^4.4.5" + clsx "^1.2.1" + csstype "^3.1.0" + prop-types "^15.8.1" + react-is "^18.2.0" + react-transition-group "^4.4.2" + +"@mui/private-theming@^5.9.1": + version "5.9.1" + resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.9.1.tgz#4f714ed9ebd587373dc77b3fc69e9f3e720f0190" + integrity sha512-eIh2IZJInNTdgPLMo9cruzm8UDX5amBBxxsSoNre7lRj3wcsu3TG5OKjIbzkf4VxHHEhdPeNNQyt92k7L78u2A== + dependencies: + "@babel/runtime" "^7.17.2" + "@mui/utils" "^5.9.1" + prop-types "^15.8.1" + +"@mui/styled-engine@^5.8.7": + version "5.8.7" + resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.8.7.tgz#63d0779c07677fe76d4705a02c7ae99f89b50780" + integrity sha512-tVqtowjbYmiRq+qcqXK731L9eWoL9H8xTRhuTgaDGKdch1zlt4I2UwInUe1w2N9N/u3/jHsFbLcl1Un3uOwpQg== + dependencies: + "@babel/runtime" "^7.17.2" + "@emotion/cache" "^11.9.3" + csstype "^3.1.0" + prop-types "^15.8.1" + +"@mui/system@^5.9.2": + version "5.9.2" + resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.9.2.tgz#391b07db7f8fc924db55e7a23b7713b3a90b6a52" + integrity sha512-iOvt9tVeFapHL7f7M6BSIiKGMx6RTRvAmc8ipMnQ/MR5Qsxwnyv7qKtNC/K11Rk13Xx0VPaPAhyvBcsr3KdpHA== + dependencies: + "@babel/runtime" "^7.17.2" + "@mui/private-theming" "^5.9.1" + "@mui/styled-engine" "^5.8.7" + "@mui/types" "^7.1.5" + "@mui/utils" "^5.9.1" + clsx "^1.2.1" + csstype "^3.1.0" + prop-types "^15.8.1" + +"@mui/types@^7.1.5": + version "7.1.5" + resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.1.5.tgz#5e5cc49d719bc86522983359bc1f90eddcff0624" + integrity sha512-HnRXrxgHJYJcT8ZDdDCQIlqk0s0skOKD7eWs9mJgBUu70hyW4iA6Kiv3yspJR474RFH8hysKR65VVSzUSzkuwA== + +"@mui/utils@^5.9.1": + version "5.9.1" + resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.9.1.tgz#2b2c9dadbf8ba6561e145b5688fb7df5ef15a934" + integrity sha512-8+4adOR3xusyJwvbnZxcjqcmbWvl7Og+260ZKIrSvwnFs0aLubL+8MhiceeDDGcmb0bTKxfUgRJ96j32Jb7P+A== + dependencies: + "@babel/runtime" "^7.17.2" + "@types/prop-types" "^15.7.5" + "@types/react-is" "^16.7.1 || ^17.0.0" + prop-types "^15.8.1" + react-is "^18.2.0" + "@nodelib/fs.scandir@2.1.4": version "2.1.4" resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz" @@ -1430,6 +1608,11 @@ schema-utils "^2.6.5" source-map "^0.7.3" +"@popperjs/core@^2.11.5": + version "2.11.5" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64" + integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw== + "@rollup/plugin-node-resolve@^7.1.1": version "7.1.3" resolved "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz" @@ -1770,11 +1953,39 @@ resolved "https://registry.npmjs.org/@types/prettier/-/prettier-2.2.1.tgz" integrity sha512-DxZZbyMAM9GWEzXL+BMZROWz9oo6A9EilwwOMET2UVu2uZTqMWS5S69KVtuVKaRjCUpcrOXRalet86/OpG4kqw== +"@types/prop-types@*", "@types/prop-types@^15.7.5": + version "15.7.5" + resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf" + integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w== + "@types/q@^1.5.1": version "1.5.4" resolved "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz" integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug== +"@types/react-is@^16.7.1 || ^17.0.0": + version "17.0.3" + resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a" + integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw== + dependencies: + "@types/react" "*" + +"@types/react-transition-group@^4.4.5": + version "4.4.5" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.5.tgz#aae20dcf773c5aa275d5b9f7cdbca638abc5e416" + integrity sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA== + dependencies: + "@types/react" "*" + +"@types/react@*": + version "18.0.15" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.15.tgz#d355644c26832dc27f3e6cbf0c4f4603fc4ab7fe" + integrity sha512-iz3BtLuIYH1uWdsv6wXYdhozhqj20oD4/Hk2DNXIn1kFsmp9x8d9QB6FnPhfkbhd2PgEONt9Q1x/ebkwjfFLow== + dependencies: + "@types/prop-types" "*" + "@types/scheduler" "*" + csstype "^3.0.2" + "@types/resolve@0.0.8": version "0.0.8" resolved "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz" @@ -1782,6 +1993,11 @@ dependencies: "@types/node" "*" +"@types/scheduler@*": + version "0.16.2" + resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39" + integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew== + "@types/source-list-map@*": version "0.1.2" resolved "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz" @@ -2569,7 +2785,7 @@ babel-plugin-jest-hoist@^26.6.2: "@types/babel__core" "^7.0.0" "@types/babel__traverse" "^7.0.6" -babel-plugin-macros@2.8.0: +babel-plugin-macros@2.8.0, babel-plugin-macros@^2.6.1: version "2.8.0" resolved "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz" integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg== @@ -3256,6 +3472,11 @@ cliui@^6.0.0: strip-ansi "^6.0.0" wrap-ansi "^6.2.0" +clsx@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" + integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== + co@^4.6.0: version "4.6.0" resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz" @@ -3451,6 +3672,13 @@ convert-source-map@^0.3.3: resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-0.3.5.tgz" integrity "sha1-8dgClQr33SYxof6+BZZVDIarMZA= sha512-+4nRk0k3oEpwUB7/CalD7xE2z4VmtEnnq0GO2IPTkrooTrAhEsWvuLF5iWP1dXrwluki/azwXV1ve7gtYuPldg==" +convert-source-map@^1.5.0: + version "1.8.0" + resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369" + integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA== + dependencies: + safe-buffer "~5.1.1" + cookie-signature@1.0.6: version "1.0.6" resolved "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz" @@ -3845,6 +4073,11 @@ cssstyle@^2.2.0: dependencies: cssom "~0.3.6" +csstype@^3.0.2, csstype@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2" + integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA== + cyclist@^1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz" @@ -4113,6 +4346,14 @@ dom-converter@^0.2: dependencies: utila "~0.4" +dom-helpers@^5.0.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" + integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== + dependencies: + "@babel/runtime" "^7.8.7" + csstype "^3.0.2" + dom-serializer@0: version "0.2.2" resolved "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz" @@ -4403,6 +4644,11 @@ escape-string-regexp@^1.0.5: resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz" integrity "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==" +escape-string-regexp@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34" + integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA== + escodegen@^1.14.1: version "1.14.3" resolved "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz" @@ -4959,6 +5205,11 @@ find-cache-dir@^3.3.1: make-dir "^3.0.2" pkg-dir "^4.1.0" +find-root@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" + integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng== + find-up@4.1.0, find-up@^4.0.0, find-up@^4.1.0: version "4.1.0" resolved "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz" @@ -5422,7 +5673,7 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.0.0: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.1: version "3.3.2" resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -8773,6 +9024,15 @@ prompts@2.4.0, prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.5" +prop-types@^15.6.2, prop-types@^15.8.1: + version "15.8.1" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" + integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.13.1" + prop-types@^15.7.2: version "15.7.2" resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz" @@ -8993,7 +9253,7 @@ react-error-overlay@^6.0.9: resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz" integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew== -react-is@^16.7.0, react-is@^16.8.1: +react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -9003,6 +9263,11 @@ react-is@^17.0.1: resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz" integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA== +react-is@^18.2.0: + version "18.2.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b" + integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== + react-refresh@^0.8.3: version "0.8.3" resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz" @@ -9082,6 +9347,16 @@ react-search-autocomplete@^7.2.2: fuse.js "^6.5.3" styled-components "^5.3.3" +react-transition-group@^4.4.2: + version "4.4.2" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470" + integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react@^17.0.2: version "17.0.2" resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz" @@ -9928,7 +10203,7 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== -source-map@^0.5.0, source-map@^0.5.6: +source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7: version "0.5.7" resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz" integrity "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==" @@ -10282,6 +10557,11 @@ stylehacks@^4.0.0: postcss "^7.0.0" postcss-selector-parser "^3.0.0" +stylis@4.0.13: + version "4.0.13" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91" + integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag== + supports-color@^5.3.0, supports-color@^5.5.0: version "5.5.0" resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz" From a6b3b015a63aac342b162b57209025e7c38e3373 Mon Sep 17 00:00:00 2001 From: Krishi-02 <54003342+Krishi-02@users.noreply.github.com> Date: Thu, 28 Jul 2022 21:56:26 +0530 Subject: [PATCH 2/6] fix UI of search and data --- src/screen/trip.css | 24 ++---------------------- src/screen/trip.js | 35 +++++++---------------------------- 2 files changed, 9 insertions(+), 50 deletions(-) diff --git a/src/screen/trip.css b/src/screen/trip.css index d5ab7d6..7acdef6 100644 --- a/src/screen/trip.css +++ b/src/screen/trip.css @@ -1,24 +1,4 @@ -/* .search-bar{ - display: flex; - flex-direction: row; - margin: 40px; -} */ -.search{ - margin-top: 40px; - display: inline-flex; - flex-direction: column; - flex-wrap: nowrap; -} - -.current-location, .destination-location{ - margin-bottom: 10px !important; - width: 600px; - font-size: 45px; - color: blueviolet !important; -} - -.icon{ - width: 35px !important; - margin: 15px; +.search-bar{ + margin-top: 30px; } diff --git a/src/screen/trip.js b/src/screen/trip.js index 0398631..e626a5f 100644 --- a/src/screen/trip.js +++ b/src/screen/trip.js @@ -1,15 +1,14 @@ import React, {useState} from "react"; import { Fab } from "../Components/common/Fab"; -import TextField from "@mui/material/TextField"; -import MyLocationIcon from '@mui/icons-material/MyLocation'; -import PlaceIcon from '@mui/icons-material/Place'; import './trip.css'; +import Search from "../Search"; const navigateToHome = () => (window.location.href = "/"); export function Trip() { - const [currentCity, setCurrentCity] = useState([]); + const [currentCity, setCity] = useState("New York City"); + const [currentCityData, setCurrentCityData] = useState([]) React.useEffect(() => { document.title = "Plan a trip"; @@ -24,36 +23,16 @@ export function Trip() { lon: result.coord.lon, name: result.name }) - setCurrentCity(currentCoords); + setCurrentCityData(currentCoords); }) }) }, []); - console.log(currentCity) + console.log(currentCityData) return ( <>
-
-
- - -
-
- - -
-
+ +
Weather From f9cf08be11d11f3c407ad86eb3d45a15bb3c8d52 Mon Sep 17 00:00:00 2001 From: Reeju Bhattacharya <40564575+reejuBhattacharya@users.noreply.github.com> Date: Fri, 29 Jul 2022 00:13:53 +0530 Subject: [PATCH 3/6] adding the map --- package.json | 20 ++++++++------------ public/index.html | 3 +++ src/screen/trip.css | 5 +++++ src/screen/trip.js | 33 ++++++++++++++++++++++++++++----- 4 files changed, 44 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index b77d645..05e322f 100644 --- a/package.json +++ b/package.json @@ -7,12 +7,15 @@ "@emotion/styled": "^11.9.3", "@mui/icons-material": "^5.8.4", "@mui/material": "^5.9.2", + "@react-leaflet/core": ">=1.0.0 <1.1.0 || ^1.1.1", "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "dotenv": "^16.0.1", + "leaflet": "^1.8.0", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-leaflet": "^4.0.1", "react-scripts": "4.0.3", "react-search-autocomplete": "^7.2.2", "web-vitals": "^1.0.1" @@ -29,16 +32,9 @@ "react-app/jest" ] }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - } + "browserslist": [ + ">0.2%", + "not dead", + "not op_mini all" + ] } diff --git a/public/index.html b/public/index.html index e702d76..5a09919 100644 --- a/public/index.html +++ b/public/index.html @@ -26,6 +26,9 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + React App diff --git a/src/screen/trip.css b/src/screen/trip.css index d5ab7d6..9fa34c3 100644 --- a/src/screen/trip.css +++ b/src/screen/trip.css @@ -22,3 +22,8 @@ margin: 15px; } +.leaflet-container { + width: 50%; + height: 65vh; + margin: 0 auto; + } \ No newline at end of file diff --git a/src/screen/trip.js b/src/screen/trip.js index 0398631..8dcf28c 100644 --- a/src/screen/trip.js +++ b/src/screen/trip.js @@ -4,12 +4,15 @@ import TextField from "@mui/material/TextField"; import MyLocationIcon from '@mui/icons-material/MyLocation'; import PlaceIcon from '@mui/icons-material/Place'; import './trip.css'; +import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'; const navigateToHome = () => (window.location.href = "/"); export function Trip() { - const [currentCity, setCurrentCity] = useState([]); + const [currentCity, setCurrentCity] = useState(null); + + React.useEffect(() => { document.title = "Plan a trip"; @@ -18,13 +21,13 @@ export function Trip() { .then(res => res.json()) .then(result => { console.log(result) - let currentCoords = []; - currentCoords.push({ + // let currentCoords = []; + // currentCoords.push() + setCurrentCity({ lat: result.coord.lat, lon: result.coord.lon, name: result.name - }) - setCurrentCity(currentCoords); + }); }) }) }, []); @@ -54,6 +57,26 @@ export function Trip() { /> + {currentCity==null?
Loading...
: + + + + You are here! + + + } + {/* + + + You are here! + + */} Weather From 089001d4c2852d19be49a87c858b21bb3e092aa3 Mon Sep 17 00:00:00 2001 From: Reeju Bhattacharya <40564575+reejuBhattacharya@users.noreply.github.com> Date: Fri, 29 Jul 2022 04:19:18 +0530 Subject: [PATCH 4/6] added route feature --- .gitignore | 1 + package.json | 10 +++-- src/screen/routing.js | 23 +++++++++++ src/screen/trip.css | 12 ++++-- src/screen/trip.js | 89 +++++++++++++++++++++++-------------------- 5 files changed, 86 insertions(+), 49 deletions(-) create mode 100644 src/screen/routing.js diff --git a/.gitignore b/.gitignore index 5fedf29..2a07603 100644 --- a/.gitignore +++ b/.gitignore @@ -21,6 +21,7 @@ npm-debug.log* yarn-debug.log* yarn-error.log* +yarn.lock .env package-lock.json \ No newline at end of file diff --git a/package.json b/package.json index 05e322f..2eb438b 100644 --- a/package.json +++ b/package.json @@ -13,9 +13,11 @@ "@testing-library/user-event": "^12.1.10", "dotenv": "^16.0.1", "leaflet": "^1.8.0", + "leaflet-routing-machine": "^3.2.12", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-leaflet": "^4.0.1", + "react-geocode": "^0.2.3", + "react-leaflet": ">=3.1.0 <3.2.0", "react-scripts": "4.0.3", "react-search-autocomplete": "^7.2.2", "web-vitals": "^1.0.1" @@ -33,8 +35,8 @@ ] }, "browserslist": [ - ">0.2%", - "not dead", - "not op_mini all" + ">0.2%", + "not dead", + "not op_mini all" ] } diff --git a/src/screen/routing.js b/src/screen/routing.js new file mode 100644 index 0000000..3b180bd --- /dev/null +++ b/src/screen/routing.js @@ -0,0 +1,23 @@ +import leaflet from "leaflet"; +import { createControlComponent } from "@react-leaflet/core"; +import "leaflet-routing-machine"; + +function createRoutineMachineLayer({geocodes}) { + console.log(geocodes); + const instance = leaflet.Routing.control({ + waypoints: [ + leaflet.latLng(geocodes[0].lat, geocodes[0].lon), + leaflet.latLng(geocodes[1].lat, geocodes[1].lon) + ], + lineOptions: { + styles: [{ color: "#6FA1EC", weight: 6 }] + }, + show: false, + }); + + return instance; +}; + +const RoutingMachine = createControlComponent(createRoutineMachineLayer); + +export default RoutingMachine; diff --git a/src/screen/trip.css b/src/screen/trip.css index 5f5cdb4..9081c3d 100644 --- a/src/screen/trip.css +++ b/src/screen/trip.css @@ -1,9 +1,15 @@ .search-bar{ - margin-top: 30px; + margin-top: 2rem; + margin-bottom: 4rem; + width: 50%; + margin-left: auto; + margin-right: auto; + display: flex; + flex-direction: row; } .leaflet-container { - width: 50%; - height: 65vh; + width: 80%; + height: 75vh; margin: 0 auto; } \ No newline at end of file diff --git a/src/screen/trip.js b/src/screen/trip.js index 8dcf28c..327560d 100644 --- a/src/screen/trip.js +++ b/src/screen/trip.js @@ -1,16 +1,49 @@ -import React, {useState} from "react"; +import React, {useEffect, useState} from "react"; import { Fab } from "../Components/common/Fab"; -import TextField from "@mui/material/TextField"; -import MyLocationIcon from '@mui/icons-material/MyLocation'; -import PlaceIcon from '@mui/icons-material/Place'; import './trip.css'; import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'; - +import Search from "../Search"; +import RoutingMachine from "./routing"; const navigateToHome = () => (window.location.href = "/"); export function Trip() { const [currentCity, setCurrentCity] = useState(null); + const [fromCity, setFromCity] = useState(null); + const [toCity, setToCity] = useState(null); + const [cityList, setCityList] = useState([]); + const [isLoaded, setLoaded] = useState(false); + + function setRoute() { + if(fromCity==null || toCity==null) { + alert("Something went wrong, try again!"); + return; + } + fetch(`https://geocode.search.hereapi.com/v1/geocode?q=${fromCity}&apiKey=${process.env.REACT_APP_HEREAPI}`) + .then((res) => res.json()) + .then((result) => { + console.log(result); + let list = [...cityList]; + list.push({ + lat: result.items[0].position.lat, + lon: result.items[0].position.lng, + }); + setCityList(list); + }); + fetch(`https://geocode.search.hereapi.com/v1/geocode?q=${toCity}&apiKey=${process.env.REACT_APP_HEREAPI}`) + .then((res) => res.json()) + .then((result) => { + console.log(result); + let list = [...cityList]; + list.push({ + lat: result.items[0].position.lat, + lon: result.items[0].position.lng, + }); + setCityList(list); + setLoaded(true); + }); + + } React.useEffect(() => { @@ -21,8 +54,6 @@ export function Trip() { .then(res => res.json()) .then(result => { console.log(result) - // let currentCoords = []; - // currentCoords.push() setCurrentCity({ lat: result.coord.lat, lon: result.coord.lon, @@ -30,54 +61,28 @@ export function Trip() { }); }) }) + }, []); console.log(currentCity) return ( <>
-
-
- - -
-
- - -
-
+ + +
+ {currentCity==null?
Loading...
: - - + /> + {cityList.length === 2 && } + You are here! } - {/* - - - You are here! - - */} - Weather From 114143bb0f24307cce67e9316a7edc4c05e43538 Mon Sep 17 00:00:00 2001 From: Krishi-02 <54003342+Krishi-02@users.noreply.github.com> Date: Fri, 29 Jul 2022 16:18:22 +0530 Subject: [PATCH 5/6] fix UI of button --- src/screen/trip.css | 14 +++++++++++++- src/screen/trip.js | 2 +- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/screen/trip.css b/src/screen/trip.css index 9081c3d..4e151ce 100644 --- a/src/screen/trip.css +++ b/src/screen/trip.css @@ -12,4 +12,16 @@ width: 80%; height: 75vh; margin: 0 auto; - } \ No newline at end of file + } + +.route_button{ + width: 150px; + padding: 10px; + background-color: blue; + color: white; + font-size: 20px; + margin-bottom: 10px; + border-radius: 15%; + border: none; + cursor: pointer; +} \ No newline at end of file diff --git a/src/screen/trip.js b/src/screen/trip.js index 327560d..ad62f1f 100644 --- a/src/screen/trip.js +++ b/src/screen/trip.js @@ -70,7 +70,7 @@ export function Trip() { - + {currentCity==null?
Loading...
: Date: Fri, 29 Jul 2022 18:53:38 +0530 Subject: [PATCH 6/6] UI fix --- src/screen/trip.css | 5 +++++ src/screen/trip.js | 14 +++++++++----- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/screen/trip.css b/src/screen/trip.css index 4e151ce..8dde0c4 100644 --- a/src/screen/trip.css +++ b/src/screen/trip.css @@ -24,4 +24,9 @@ border-radius: 15%; border: none; cursor: pointer; +} + +.icon{ + margin-top: 10px; + width: 50px; } \ No newline at end of file diff --git a/src/screen/trip.js b/src/screen/trip.js index ad62f1f..6b4d21f 100644 --- a/src/screen/trip.js +++ b/src/screen/trip.js @@ -1,9 +1,12 @@ -import React, {useEffect, useState} from "react"; +import React, {useState} from "react"; import { Fab } from "../Components/common/Fab"; +import { Food }from "../Components/Food"; import './trip.css'; import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'; import Search from "../Search"; import RoutingMachine from "./routing"; +import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt'; + const navigateToHome = () => (window.location.href = "/"); @@ -22,7 +25,7 @@ export function Trip() { fetch(`https://geocode.search.hereapi.com/v1/geocode?q=${fromCity}&apiKey=${process.env.REACT_APP_HEREAPI}`) .then((res) => res.json()) .then((result) => { - console.log(result); + //console.log(result); let list = [...cityList]; list.push({ lat: result.items[0].position.lat, @@ -33,7 +36,7 @@ export function Trip() { fetch(`https://geocode.search.hereapi.com/v1/geocode?q=${toCity}&apiKey=${process.env.REACT_APP_HEREAPI}`) .then((res) => res.json()) .then((result) => { - console.log(result); + //console.log(result); let list = [...cityList]; list.push({ lat: result.items[0].position.lat, @@ -53,7 +56,7 @@ export function Trip() { fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${position.coords.latitude}&lon=${position.coords.longitude}&appid=${process.env.REACT_APP_APIKEY}`) .then(res => res.json()) .then(result => { - console.log(result) + //console.log(result) setCurrentCity({ lat: result.coord.lat, lon: result.coord.lon, @@ -63,11 +66,11 @@ export function Trip() { }) }, []); - console.log(currentCity) return ( <>
+
@@ -83,6 +86,7 @@ export function Trip() {
} + Weather