+
+
+
+
+ {Routes.map((route, i) =>
+
+
+
+
+
+);
+
+class CarCard extends Component {
+ constructor() {
+ super();
+ this.state = {
+ isActive: false,
+ isModalOpen: false
+ };
+ }
+
+ componentDidMount() {
+
+ }
+
+ setFirstCarAsActive = () => {
+ const { id } = this.props;
+ return id === 0 && this.setState({ isActive: true });
+ }
+
+ toggleModal = () => {
+ const { isModalOpen } = this.state;
+ this.setState({ isModalOpen: !isModalOpen });
+ }
+
+ handleDeleteCar = (e) => {
+ e.preventDefault();
+ const { carInfo: { idcar: idCar }, updateCarData } = this.props;
+ axios.post('api/user/deleteCar/', { data: idCar })
+ .then(() => {
+ updateCarData();
+ toast({ html: 'Vehicle has been deleted!' });
+ })
+ .catch(() => toast({ html: 'Vehicle has NOT been deleted!' }))
+ .then(() => this.toggleModal());
+ }
+
+ handleUpdateCar = (e) => {
+ e.preventDefault();
+ const { inputInfo, updateCarData } = this.props;
+ const updateCarinfo = { idCar: e.target.elements.idCars.value };
+ inputInfo.forEach((el) => {
+ updateCarinfo[el.inputName] = e.target.elements[el.inputName].value;
+ });
+ axios.post('/api/user/updateCar/', { newCarData: updateCarinfo })
+ .then(() => {
+ updateCarData();
+ toast({ html: 'Vehicle has been updated!' });
+ })
+ .catch(() => toast({ html: 'Vehicle has NOT been updated!' }));
+ }
+
+ toggleCarCardBody = () => {
+ const { isActive } = this.state;
+ this.setState({ isActive: !isActive });
+ }
+
+ render() {
+ const {
+ carInfo: {
+ idcar: idCars,
+ namecar: nameCar,
+ tankvolume: tankVolume,
+ maxpassengerscount: maxPassengersCount,
+ avggascost: avgGasCost,
+ baggagevolume: baggageVolume,
+ avgspeed: avgSpeed
+ },
+ id,
+ inputInfo
+ } = this.props;
+ const { isActive, isModalOpen } = this.state;
+ const carInfoArr = [
+ nameCar.trim(), tankVolume, maxPassengersCount, avgGasCost, baggageVolume, avgSpeed
+ ];
+
+ return (
+
+
+
+ {isActive && (
+
+
+
+
+ );
+ }
+}
+
+CarInput.propTypes = {
+ inputDefaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+ inputAdditionalInfo: PropTypes.objectOf(PropTypes.string).isRequired
+};
+
+CarCard.propTypes = {
+ carInfo: PropTypes.shape({
+ idCars: PropTypes.number,
+ nameCar: PropTypes.string,
+ tankVolume: PropTypes.number,
+ maxPassengersCount: PropTypes.number,
+ avgGasCost: PropTypes.number,
+ baggageVolume: PropTypes.number,
+ avgSpeed: PropTypes.number
+ }).isRequired,
+ id: PropTypes.number.isRequired,
+ inputInfo: PropTypes.arrayOf(PropTypes.object).isRequired,
+ updateCarData: PropTypes.func.isRequired
+};
+
+export default CarCard;
diff --git a/client/components/CarsCard/CarCard/CarCard.scss b/client/components/CarsCard/CarCard/CarCard.scss
new file mode 100644
index 0000000..a4b9c0c
--- /dev/null
+++ b/client/components/CarsCard/CarCard/CarCard.scss
@@ -0,0 +1,167 @@
+.car-card__wrap {
+ box-shadow: 0 20px 40px rgba(89, 100, 191, 0.1);
+ border-radius: 2px;
+ background-color: #fff;
+ margin-bottom: 5px;
+ position: relative;
+}
+
+.profile button,
+.search-route button {
+ border-width: 0;
+ border-style: none;
+ border-color: transparent;
+ border-image: none;
+}
+
+.car-card__heading-block {
+ display: flex;
+ align-items: center;
+ padding: 27px 18px 24px 22px;
+ cursor: pointer;
+ -webkit-appearance: none;
+ background-color: #fff;
+ width: 100%;
+ border-width: 0;
+ border-style: none;
+ border-color: transparent;
+ border-image: none;
+
+ &:active {
+ background-color: #fff;
+ border-style: none;
+ }
+
+ &:focus {
+ background-color: #fff;
+ outline: none;
+ }
+}
+
+.car-card__num {
+ text-align: left;
+ display: inline-block;
+ width: 35px;
+ color: #33afe0;
+ font-size: 30px;
+ font-weight: 600;
+ line-height: 1.2em;
+ letter-spacing: 1.5px;
+}
+
+.car-card__arrow-down {
+ flex-shrink: 0;
+ display: block;
+ margin-left: auto;
+ margin-right: 0;
+ transform-origin: 50% 50%;
+ transition: transform 0.15s linear;
+}
+
+.car-card__arrow-up {
+ flex-shrink: 0;
+ display: block;
+ margin-left: auto;
+ margin-right: 0;
+ transform-origin: 50% 50%;
+ transition: transform 0.15s linear;
+ transform: rotate(180deg);
+}
+
+.car-card__name-p {
+ color: #333;
+ font-size: 15px;
+ font-weight: 600;
+ line-height: 1.5em;
+}
+
+.car-card__body {
+ padding: 20px 20px 25px;
+}
+
+.car-card__label {
+ display: block;
+ color: rgba(#252d3a, 0.8);
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1em;
+ margin-bottom: 5px;
+ text-align: left;
+}
+
+input[type=text]:not(.browser-default).car-card__input:focus:not([readonly]) + label {
+ color: #33afe0;
+}
+
+input[type=text]:not(.browser-default).car-card__input {
+ background-color: #fff;
+ height: 42px;
+ width: 100%;
+ display: block;
+ color: #252d3a;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1em;
+ margin-bottom: 5px;
+ transition:
+ border 0.15s linear,
+ box-shadow 0.15s linear;
+
+ &:focus {
+ outline: 0;
+ outline-offset: 0;
+ border-bottom: 1px solid #33afe0;
+ box-shadow: 0 1px 0 0 #33afe0;
+ }
+}
+
+.car-card__btn-submit {
+ display: inline-block;
+ padding: 17px 35px 16px;
+ margin: 0 10px;
+ border-radius: 3px;
+ background-color: #33afe0;
+ color: #fff;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 1em;
+ letter-spacing: 0.6px;
+ cursor: pointer;
+ transition: background-color 0.15s linear;
+
+ &:hover {
+ background-color: #252d3a;
+ }
+}
+
+.car-card__form-wrap {
+ display: flex;
+ flex-wrap: wrap;
+ margin-left: -15px;
+ margin-right: -15px;
+ justify-content: center;
+}
+
+.car-card__col {
+ width: calc(50% - 30px);
+ margin-right: 15px;
+ margin-left: 15px;
+}
+
+.car-card__delete-link {
+ width: 100%;
+ text-align: right;
+ margin-bottom: 0;
+ padding: 0 15px 15px;
+
+ a {
+ color: #33afe0;
+ text-decoration: underline;
+
+ &:hover,
+ &:focus {
+ color: #33afe0;
+ text-decoration: underline;
+ }
+ }
+}
diff --git a/client/components/CarsCard/CarCard/package.json b/client/components/CarsCard/CarCard/package.json
new file mode 100644
index 0000000..1b2e9be
--- /dev/null
+++ b/client/components/CarsCard/CarCard/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "CarCard.jsx"
+}
\ No newline at end of file
diff --git a/client/components/CarsCard/CarsCard.jsx b/client/components/CarsCard/CarsCard.jsx
new file mode 100644
index 0000000..e2ad866
--- /dev/null
+++ b/client/components/CarsCard/CarsCard.jsx
@@ -0,0 +1,96 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import axios from 'axios';
+import { toast } from 'materialize-css';
+
+import CarCard from './CarCard';
+import NewCarCard from './NewCarCard';
+import './CarsCard.scss';
+
+const inputInfo = [
+ {
+ inputLabel: 'Car name', inputName: 'nameCar', inputPattern: '^[a-zA-Z0-9_.-]*$', inputTitle: 'Please input a string without spaces (no special characters allowed)'
+ },
+ {
+ inputLabel: 'Tank Volume', inputName: 'tankVolume', inputPattern: '^\\d+$', inputTitle: 'Please input positive integer'
+ },
+ {
+ inputLabel: 'Number of passengers', inputName: 'maxPassengersCount', inputPattern: '^\\d+$', inputTitle: 'Please input positive integer'
+ },
+ {
+ inputLabel: 'Average gas cost', inputName: 'avgGasCost', inputPattern: '^\\d+$', inputTitle: 'Please input positive integer'
+ },
+ {
+ inputLabel: 'Baggage size, m3', inputName: 'baggageVolume', inputPattern: '^\\d+$', inputTitle: 'Please input positive integer'
+ },
+ {
+ inputLabel: 'Average speed, km/h', inputName: 'avgSpeed', inputPattern: '^\\d+$', inputTitle: 'Please input positive integer'
+ }
+];
+
+class CarsCard extends Component {
+ constructor() {
+ super();
+ this.state = {
+ addNew: false
+ };
+ }
+
+ handleAddNewCar = (e) => {
+ e.preventDefault();
+ const iduser = sessionStorage.getItem('iduser');
+ const { updateCarData } = this.props;
+ const newCarinfo = {};
+ newCarinfo.iduser = iduser;
+ inputInfo.forEach((el) => {
+ newCarinfo[el.inputName] = e.target.elements[el.inputName].value;
+ });
+ axios.post('api/user/addCar', { formData: newCarinfo })
+ .then(() => {
+ updateCarData();
+ toast({ html: 'New vehicle has been added!' });
+ this.setState({ addNew: false });
+ })
+ .catch(() => toast({ html: 'New vehicle has NOT been added!' }));
+ }
+
+ toggleAddNewBtn = () => {
+ const { addNew } = this.state;
+ this.setState({ addNew: !addNew });
+ }
+
+ render() {
+ const { carsInfo, updateCarData } = this.props;
+ const { addNew } = this.state;
+
+ return (
+
+
+
+ )}
+ e.stopPropagation()}>
+
+ Are you sure you want to delete this vehicle?
+
+
+
+
+
+
+ );
+ }
+}
+
+CarsCard.propTypes = {
+ carsInfo: PropTypes.arrayOf(PropTypes.object).isRequired,
+ updateCarData: PropTypes.func.isRequired
+};
+
+export default CarsCard;
diff --git a/client/components/CarsCard/CarsCard.scss b/client/components/CarsCard/CarsCard.scss
new file mode 100644
index 0000000..ba7b223
--- /dev/null
+++ b/client/components/CarsCard/CarsCard.scss
@@ -0,0 +1,94 @@
+.cars-card__wrap {
+ background-color: #f7f8fa;
+ text-align: left;
+ margin-bottom: 35px;
+ width: 100%;
+ border-radius: 3px;
+ box-shadow: 20px 0 40px rgba(74, 77, 101, 0.2);
+}
+
+.cars-card__heading {
+ position: relative;
+ color: #252d3a;
+ font-size: 14px;
+ line-height: 1em;
+ font-weight: 600;
+ margin-bottom: 0;
+ padding: 32px 125px 31px;
+ box-shadow: 0 20px 40px rgba(89, 100, 191, 0.1);
+ border-radius: 3px 3px 0 0;
+ text-align: center;
+}
+
+.cars-card__body {
+ padding: 8px 10px 10px;
+ text-align: center;
+ overflow: hidden;
+}
+
+.cars-card__add-car {
+ position: absolute;
+ top: 50%;
+ right: 15px;
+ transform: translateY(-50%);
+ display: inline-block;
+ padding: 17px 15px 16px;
+ border-radius: 3px;
+ background-color: #252d3a;
+ color: #fff;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 1em;
+ letter-spacing: 0.6px;
+ transition: background-color 0.15s linear;
+
+ &:hover,
+ &:focus {
+ background-color: #33afe0;
+ }
+}
+
+.slideInOut-enter {
+ transform: translateY(-20px);
+ opacity: 0;
+}
+
+.slideInOut-leave {
+ transform: translateY(0);
+ opacity: 1;
+}
+
+.slideInOut-enter.slideInOut-enter-active {
+ transform: translateY(0);
+ opacity: 1;
+ transition:
+ opacity 0.3s ease-in-out,
+ transform 0.3s ease-in-out;
+}
+
+.slideInOut-leave.slideInOut-leave-active {
+ transform: translateY(-20px);
+ opacity: 0;
+ transition:
+ opacity 0.3s ease-in-out,
+ transform 0.3s ease-in-out;
+}
+
+.fadeInOut-enter {
+ opacity: 0;
+}
+
+.fadeInOut-leave {
+ transform: translateY(0);
+ opacity: 1;
+}
+
+.fadeInOut-enter.fadeInOut-enter-active {
+ opacity: 1;
+ transition: opacity 0.3s ease-in-out;
+}
+
+.fadeInOut-leave.fadeInOut-leave-active {
+ opacity: 0;
+ transition: opacity 0.3s ease-in-out;
+}
diff --git a/client/components/CarsCard/NewCarCard/NewCarCard.jsx b/client/components/CarsCard/NewCarCard/NewCarCard.jsx
new file mode 100644
index 0000000..55da7a8
--- /dev/null
+++ b/client/components/CarsCard/NewCarCard/NewCarCard.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const CarInput = ({
+ inputAdditionalInfo: {
+ inputLabel, inputName, inputPattern, inputTitle
+ }
+}) => (
+ + Vehicles + {addNew ? 'CANCEL' : 'ADD NEW'} +
+
+
+ {addNew &&
+ {carsInfo.map((carInfo, i) => (
+
+
+
+
+
+);
+
+const NewCarCard = ({ submitHandler, inputInfo }) => (
+
+
+);
+
+CarInput.propTypes = {
+ inputAdditionalInfo: PropTypes.objectOf(PropTypes.string).isRequired
+};
+
+NewCarCard.propTypes = {
+ submitHandler: PropTypes.func.isRequired,
+ inputInfo: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default NewCarCard;
diff --git a/client/components/CarsCard/NewCarCard/package.json b/client/components/CarsCard/NewCarCard/package.json
new file mode 100644
index 0000000..5468c73
--- /dev/null
+++ b/client/components/CarsCard/NewCarCard/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "NewCarCard.jsx"
+}
\ No newline at end of file
diff --git a/client/components/CarsCard/package.json b/client/components/CarsCard/package.json
new file mode 100644
index 0000000..f0158ef
--- /dev/null
+++ b/client/components/CarsCard/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "CarsCard.jsx"
+}
\ No newline at end of file
diff --git a/client/components/FeedbacksCard/FeedbackCard/FeedbackCard.jsx b/client/components/FeedbacksCard/FeedbackCard/FeedbackCard.jsx
new file mode 100644
index 0000000..2dde5c7
--- /dev/null
+++ b/client/components/FeedbacksCard/FeedbackCard/FeedbackCard.jsx
@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+
+import './FeedbackCard.scss';
+import arrowDown from 'images/arrow-down.svg';
+import { getDateFromTimestamp } from '../../../helpers';
+
+class FeedbackCard extends Component {
+ constructor() {
+ super();
+ this.state = {
+ isActive: false
+ };
+ this.toggleFeedbackBody = this.toggleFeedbackBody.bind(this);
+ }
+
+ toggleFeedbackBody() {
+ const { isActive } = this.state;
+ this.setState({
+ isActive: !isActive
+ });
+ }
+
+ render() {
+ const {
+ feedbackInfo:
+ {
+ trip_name: name,
+ rating,
+ text,
+ user_name: { first: userName },
+ date
+ }
+ } = this.props;
+ const { isActive } = this.state;
+ return (
+
+
+
+
+
+
+ {isActive && (
+
+
+ );
+ }
+}
+
+FeedbackCard.propTypes = {
+ feedbackInfo: PropTypes.shape({
+ name: PropTypes.string,
+ rating: PropTypes.string,
+ feedback: PropTypes.string,
+ userName: PropTypes.string,
+ date: PropTypes.string
+ }).isRequired
+};
+
+export default FeedbackCard;
diff --git a/client/components/FeedbacksCard/FeedbackCard/FeedbackCard.scss b/client/components/FeedbacksCard/FeedbackCard/FeedbackCard.scss
new file mode 100644
index 0000000..1bb9a9d
--- /dev/null
+++ b/client/components/FeedbacksCard/FeedbackCard/FeedbackCard.scss
@@ -0,0 +1,107 @@
+.feedback__wrap {
+ box-shadow: 0 20px 40px rgba(89, 100, 191, 0.1);
+ border-radius: 2px;
+ background-color: #fff;
+ margin-bottom: 5px;
+}
+
+.feedback__heading-block {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 15px 18px 15px 22px;
+ cursor: pointer;
+ -webkit-appearance: none;
+ background-color: #fff;
+ width: 100%;
+ border-width: 0;
+ border-style: none;
+ border-color: transparent;
+ border-image: none;
+
+ &:active {
+ background-color: #fff;
+ border-style: none;
+ }
+
+ &:focus {
+ background-color: #fff;
+ outline: none;
+ }
+}
+
+.feedback__num {
+ text-align: left;
+ display: inline-block;
+ color: #33afe0;
+ font-size: 30px;
+ font-weight: 600;
+ line-height: 1.2em;
+ letter-spacing: 1.5px;
+ padding-right: 5px;
+}
+
+.feedback__arrow-down {
+ flex-shrink: 0;
+ display: block;
+ margin-left: auto;
+ margin-right: 0;
+ transform-origin: 50% 50%;
+ transition: transform 0.15s linear;
+}
+
+.feedback__arrow-up {
+ flex-shrink: 0;
+ display: block;
+ margin-left: auto;
+ margin-right: 0;
+ transform-origin: 50% 50%;
+ transition: transform 0.15s linear;
+ transform: rotate(180deg);
+}
+
+.feedback__name-p {
+ color: #333;
+ font-size: 15px;
+ font-weight: 600;
+ line-height: 1.5em;
+}
+
+.feedback__body {
+ padding: 10px 20px 25px;
+ text-align: left;
+}
+
+.feedback__rating-wrap {
+ color: #252d3a;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1.5em;
+ padding-right: 20px;
+ text-align: left;
+}
+
+.feedback__sec {
+ display: block;
+ font-size: 13px;
+}
+
+.feedback__right-side {
+ display: flex;
+ align-items: center;
+}
+
+.feedback__body-p {
+ color: rgba(#252d3a, 0.8);
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1.5em;
+ margin-bottom: 30px;
+}
+
+.feedback__body-p2 {
+ color: #252d3a;
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 1.8em;
+}
diff --git a/client/components/FeedbacksCard/FeedbackCard/package.json b/client/components/FeedbacksCard/FeedbackCard/package.json
new file mode 100644
index 0000000..5066509
--- /dev/null
+++ b/client/components/FeedbacksCard/FeedbackCard/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "FeedbackCard.jsx"
+}
\ No newline at end of file
diff --git a/client/components/FeedbacksCard/FeedbacksCard.jsx b/client/components/FeedbacksCard/FeedbacksCard.jsx
new file mode 100644
index 0000000..2fee28e
--- /dev/null
+++ b/client/components/FeedbacksCard/FeedbacksCard.jsx
@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import FeedbackCard from './FeedbackCard';
+import './FeedbacksCard.scss';
+
+class FeedbacksCard extends Component {
+ render() {
+ const { feedbacksInfo } = this.props;
+
+ return (
+
+
)}
+ {text}
+{userName}
+{getDateFromTimestamp(date)}
+
+
+ );
+ }
+}
+
+FeedbacksCard.propTypes = {
+ feedbacksInfo: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default FeedbacksCard;
diff --git a/client/components/FeedbacksCard/FeedbacksCard.scss b/client/components/FeedbacksCard/FeedbacksCard.scss
new file mode 100644
index 0000000..2963ac2
--- /dev/null
+++ b/client/components/FeedbacksCard/FeedbacksCard.scss
@@ -0,0 +1,26 @@
+.feedbacks__wrap {
+ background-color: #f7f8fa;
+ text-align: left;
+ margin-bottom: 35px;
+ width: 100%;
+ border-radius: 3px;
+ box-shadow: 20px 0 40px rgba(74, 77, 101, 0.2);
+}
+
+.feedbacks__heading {
+ position: relative;
+ color: #252d3a;
+ font-size: 14px;
+ line-height: 1em;
+ font-weight: 600;
+ margin-bottom: 0;
+ padding: 32px 125px 31px;
+ box-shadow: 0 20px 40px rgba(89, 100, 191, 0.1);
+ border-radius: 3px 3px 0 0;
+ text-align: center;
+}
+
+.feedbacks__body {
+ padding: 8px 10px 10px;
+ text-align: center;
+}
diff --git a/client/components/FeedbacksCard/package.json b/client/components/FeedbacksCard/package.json
new file mode 100644
index 0000000..ac21fff
--- /dev/null
+++ b/client/components/FeedbacksCard/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "FeedbacksCard.jsx"
+}
\ No newline at end of file
diff --git a/client/components/Header/Header.jsx b/client/components/Header/Header.jsx
new file mode 100644
index 0000000..d8df545
--- /dev/null
+++ b/client/components/Header/Header.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Authorization from './components/Authorization';
+import Logo from './components/Logo';
+import './Header.scss';
+
+const Header = ({ isAuth, runLogout }) => (
+ + Feedbacks +
+
+ {feedbacksInfo.map((feedbackInfo, i) => (
+
+
+
+);
+
+HistoryCard.defaultProps = {
+ isActive: false
+};
+
+HistoryCard.propTypes = {
+ routeName: PropTypes.string.isRequired,
+ routeDate: PropTypes.string.isRequired,
+ isActive: PropTypes.bool,
+ routeColor: PropTypes.string.isRequired
+};
+
+export default HistoryCard;
diff --git a/client/components/HistoryWrap/HistoryCard/HistoryCard.scss b/client/components/HistoryWrap/HistoryCard/HistoryCard.scss
new file mode 100644
index 0000000..2e16bf9
--- /dev/null
+++ b/client/components/HistoryWrap/HistoryCard/HistoryCard.scss
@@ -0,0 +1,50 @@
+.historyCard__p {
+ color: #333;
+ font-size: 15px;
+ font-weight: 600;
+ line-height: 1.5em;
+
+ .historyCard__p--date {
+ font-weight: 400;
+ opacity: 0.8;
+ }
+
+ .historyCard__p--is-active {
+ font-weight: 700;
+ opacity: 1;
+ display: inline-block;
+ margin-left: 15px;
+ color: #33afe0;
+ }
+}
+
+.historyCard {
+ box-shadow: 0 20px 40px rgba(89, 100, 191, 0.1);
+ border-radius: 2px;
+ background-color: #fff;
+ margin-bottom: 5px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 15px 18px 15px 22px;
+ width: 100%;
+}
+
+.historyCard__btn {
+ display: inline-block;
+ padding: 15px 23px 15px;
+ margin: 0 10px;
+ border-radius: 3px;
+ background-color: #33afe0;
+ color: #fff;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 1em;
+ letter-spacing: 0.6px;
+ cursor: pointer;
+ transition: background-color 0.15s linear;
+
+ &:hover {
+ background-color: #252d3a;
+ }
+}
diff --git a/client/components/HistoryWrap/HistoryCard/package.json b/client/components/HistoryWrap/HistoryCard/package.json
new file mode 100644
index 0000000..9bbdf90
--- /dev/null
+++ b/client/components/HistoryWrap/HistoryCard/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "HistoryCard.jsx"
+}
\ No newline at end of file
diff --git a/client/components/HistoryWrap/HistoryWrap.jsx b/client/components/HistoryWrap/HistoryWrap.jsx
new file mode 100644
index 0000000..165135c
--- /dev/null
+++ b/client/components/HistoryWrap/HistoryWrap.jsx
@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import './HistoryWrap.scss';
+import HistoryCard from './HistoryCard';
+
+class HistoryWrap extends Component {
+ render() {
+ const { allHistory } = this.props;
+
+ return (
+ + {routeName} + {getDateFromTimestamp(routeDate)} + + {isActive && Active} +
+ +
+
+ );
+ }
+}
+
+HistoryWrap.propTypes = {
+ allHistory: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default HistoryWrap;
diff --git a/client/components/HistoryWrap/HistoryWrap.scss b/client/components/HistoryWrap/HistoryWrap.scss
new file mode 100644
index 0000000..8b13041
--- /dev/null
+++ b/client/components/HistoryWrap/HistoryWrap.scss
@@ -0,0 +1,26 @@
+.all-history__wrap {
+ background-color: #f7f8fa;
+ text-align: left;
+ margin-bottom: 35px;
+ width: 100%;
+ border-radius: 3px;
+ box-shadow: 20px 0 40px rgba(74, 77, 101, 0.2);
+}
+
+.all-history__heading {
+ position: relative;
+ color: #252d3a;
+ font-size: 14px;
+ line-height: 1em;
+ font-weight: 600;
+ margin-bottom: 0;
+ padding: 32px 125px 31px;
+ box-shadow: 0 20px 40px rgba(89, 100, 191, 0.1);
+ border-radius: 3px 3px 0 0;
+ text-align: center;
+}
+
+.all-history__body {
+ padding: 8px 10px 10px;
+ text-align: center;
+}
diff --git a/client/components/HistoryWrap/package.json b/client/components/HistoryWrap/package.json
new file mode 100644
index 0000000..1fa2488
--- /dev/null
+++ b/client/components/HistoryWrap/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "HistoryWrap.jsx"
+}
\ No newline at end of file
diff --git a/client/components/LoginCard/Form/Form.scss b/client/components/LoginCard/Form/Form.scss
new file mode 100644
index 0000000..c49e0f6
--- /dev/null
+++ b/client/components/LoginCard/Form/Form.scss
@@ -0,0 +1,80 @@
+.FormCenter {
+ margin-bottom: 50px;
+}
+
+.FormField {
+ margin-bottom: 20px;
+
+ &__Label {
+ display: block;
+ text-transform: uppercase;
+ font-weight: bold;
+ font-size: 0.9em;
+ color: #7e7b7b;
+ }
+
+ &__Input {
+ width: 85%;
+ background-color: transparent;
+ border: none;
+ color: #252525;
+ outline: none;
+ border-bottom: 1px solid #50ff25;
+ font-size: 1em;
+ font-weight: 300;
+ padding-bottom: 10px;
+ margin-top: 10px;
+
+ &::placeholder {
+ color: #616e7f;
+ }
+ }
+
+ &__Button {
+ background-color: #4c5768;
+ color: white;
+ border: none;
+ outline: none;
+ cursor: pointer;
+ border-radius: 25px;
+ padding: 15px 70px;
+ font-size: 0.8em;
+ font-weight: 500;
+ }
+
+ &__Link {
+ color: #0579d8f1;
+ text-decoration: none;
+ display: inline-block;
+ border-bottom: 1.5px solid #225e62;
+ padding-bottom: 5px;
+ }
+
+ &__CheckboxLabel {
+ color: #e3eefd;
+ font-size: 0.9em;
+ }
+
+ &__Checkbox {
+ position: relative;
+ top: 1.5px;
+ }
+
+ &__TermsLink {
+ color: white;
+ border-bottom: 1px solid #901986;
+ text-decoration: none;
+ display: inline-block;
+ margin-left: 5px;
+ }
+
+ .helper-text {
+ color: #ef5350;
+ font-size: 12px;
+ }
+}
+
+.helper-text.red-helper-text {
+ color: #ef5350;
+ font-size: 12px;
+}
diff --git a/client/components/LoginCard/Form/SignInForm.jsx b/client/components/LoginCard/Form/SignInForm.jsx
new file mode 100644
index 0000000..747a02b
--- /dev/null
+++ b/client/components/LoginCard/Form/SignInForm.jsx
@@ -0,0 +1,104 @@
+import React, { Component } from 'react';
+import { Link, Redirect } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import { sha256 } from 'hash.js';
+import './Form.scss';
+
+class SignInForm extends Component {
+ constructor() {
+ super();
+
+ this.state = {
+ email: '',
+ password: '',
+ loginSuccess: false,
+ errorMsg: ''
+ };
+ }
+
+ componentDidMount() {
+ setTimeout(() => {
+ if (sessionStorage.getItem('iduser')) {
+ const { updateIsAuth } = this.props;
+ updateIsAuth();
+ }
+ }, 1000);
+ }
+
+ handleChange = ({ target: { value, name } }) => {
+ this.setState({ [name]: value });
+ }
+
+ handleSubmit = (e) => {
+ e.preventDefault();
+ const { updateIsAuth } = this.props;
+ const { email, password } = this.state;
+ const passwordHash = sha256().update(password).digest('hex');
+
+ this.setState({ errorMsg: '' });
+
+ axios.post('/api/login', { email, passwordHash })
+ .then(({ data: { response } }) => {
+ if (response.iduser) {
+ sessionStorage.setItem('iduser', response.iduser);
+ sessionStorage.setItem('role', response.role);
+ updateIsAuth();
+ } else {
+ this.setState({ errorMsg: `*${response}` });
+ }
+ });
+ }
+
+ render() {
+ const { email, password, loginSuccess, errorMsg } = this.state;
+
+ if (loginSuccess) {
+ return (+ History +
+
+ {allHistory.map(({ name, date, active, color }, i) => (
+
+
+
+ {errorMsg && {errorMsg}}
+
+ );
+ }
+}
+
+SignInForm.propTypes = {
+ updateIsAuth: PropTypes.func.isRequired
+};
+
+export default SignInForm;
diff --git a/client/components/LoginCard/Form/SignUpForm.jsx b/client/components/LoginCard/Form/SignUpForm.jsx
new file mode 100644
index 0000000..578cf7f
--- /dev/null
+++ b/client/components/LoginCard/Form/SignUpForm.jsx
@@ -0,0 +1,128 @@
+import React, { Component } from 'react';
+import { Redirect } from 'react-router-dom';
+import axios from 'axios';
+import { sha256 } from 'hash.js';
+import { toast } from 'materialize-css';
+
+class SignUpForm extends Component {
+ constructor() {
+ super();
+
+ this.state = {
+ email: '',
+ password: '',
+ fname: '',
+ lname: '',
+ isEmailExist: false,
+ goLogin: false
+ };
+ }
+
+ handleChange = ({ target: { value, name } }) => {
+ this.setState({ [name]: value });
+ }
+
+ handleSubmit = (e) => {
+ const { email } = this.state;
+ e.preventDefault();
+ this.setState({ isEmailExist: false });
+
+ axios.post('api/checkEmailExistence', { email })
+ .then(({ data }) => {
+ if (data === 'emailExist') {
+ this.setState({ isEmailExist: true });
+ } else if (data === 'emailDoNotExist') {
+ this.registerNewUser();
+ }
+ })
+ .catch(err => console.log(err));
+ }
+
+ registerNewUser = () => {
+ const { fname, lname, email, password } = this.state;
+ const credentials = { fname, lname, email };
+ credentials.password = sha256().update(password).digest('hex');
+ axios.post('/api/register', credentials)
+ .then(({ data }) => {
+ if (data === 'registrationSuccesul') {
+ toast({ html: 'Please confirm email' });
+ this.setState({ goLogin: true });
+ }
+ })
+ .catch(err => console.log(err));
+ }
+
+ render() {
+ const {
+ fname, lname, email, password, isEmailExist, goLogin
+ } = this.state;
+ if (goLogin) {
+ return
+
+
+ );
+ }
+}
+
+export default SignUpForm;
diff --git a/client/components/LoginCard/LoginCard.jsx b/client/components/LoginCard/LoginCard.jsx
new file mode 100644
index 0000000..b0c76f6
--- /dev/null
+++ b/client/components/LoginCard/LoginCard.jsx
@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import { Route, Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import './LoginCard.scss';
+import SignUpForm from './Form/SignUpForm';
+import SignInForm from './Form/SignInForm';
+
+class LoginCard extends Component {
+ render() {
+ const { updateIsAuth } = this.props;
+
+ return (
+
+
+
+ );
+ }
+}
+
+LoginCard.propTypes = {
+ updateIsAuth: PropTypes.func.isRequired
+};
+
+export default LoginCard;
diff --git a/client/components/LoginCard/LoginCard.scss b/client/components/LoginCard/LoginCard.scss
new file mode 100644
index 0000000..a3538b7
--- /dev/null
+++ b/client/components/LoginCard/LoginCard.scss
@@ -0,0 +1,54 @@
+.Auth_Card {
+ display: flex;
+ color: white;
+ margin: -10px -15px;
+ background-image: url('~@images/direction.png');
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ height: calc(100vh - 50px);
+}
+
+.Auth__Aside {
+ width: 80%;
+}
+
+.Auth__Form {
+ width: 50%;
+ background-color: #edf5f4;
+ padding: 25px 20px;
+ overflow: auto;
+}
+
+.PageSwitcher {
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 10%;
+
+ &__Item {
+ background-color: #4c5768;
+ color: #fff;
+ padding: 10px 25px;
+ cursor: pointer;
+ font-size: 0.9em;
+ border: none;
+ outline: none;
+ display: inline-block;
+ text-decoration: none;
+
+ &:first-child {
+ border-top-left-radius: 25px;
+ border-bottom-left-radius: 25px;
+ }
+
+ &:last-child {
+ border-top-right-radius: 25px;
+ border-bottom-right-radius: 25px;
+ }
+
+ &__Item--Active {
+ background-color: #5ed0c0;
+ color: white;
+ }
+ }
+}
diff --git a/client/components/MapDropdown/MapDropdown.jsx b/client/components/MapDropdown/MapDropdown.jsx
new file mode 100644
index 0000000..e3c0f60
--- /dev/null
+++ b/client/components/MapDropdown/MapDropdown.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './MapDropdown.scss';
+
+const MapDropdown = ({ position, calcRouteFn }) => {
+ const style = position ? {
+ display: 'block',
+ opacity: position.show,
+ top: position.y,
+ left: position.x + 290
+ } : {};
+
+ return (
+
+ );
+};
+
+MapDropdown.propTypes = {
+ position: PropTypes.objectOf(PropTypes.any),
+ calcRouteFn: PropTypes.func.isRequired
+};
+
+MapDropdown.defaultProps = {
+ position: undefined
+};
+
+export default MapDropdown;
diff --git a/client/components/MapDropdown/MapDropdown.scss b/client/components/MapDropdown/MapDropdown.scss
new file mode 100644
index 0000000..7643c1e
--- /dev/null
+++ b/client/components/MapDropdown/MapDropdown.scss
@@ -0,0 +1,8 @@
+.map-dropdown {
+ right: auto;
+ left: auto;
+
+ &_item {
+ color: #232e3b !important;
+ }
+}
diff --git a/client/components/MapDropdown/package.json b/client/components/MapDropdown/package.json
new file mode 100644
index 0000000..c315df1
--- /dev/null
+++ b/client/components/MapDropdown/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "MapDropdown.jsx"
+}
\ No newline at end of file
diff --git a/client/components/Menu/Menu.jsx b/client/components/Menu/Menu.jsx
new file mode 100644
index 0000000..22c96fa
--- /dev/null
+++ b/client/components/Menu/Menu.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Navigation from './components/Navigation';
+import './Menu.scss';
+
+const Menu = ({ isAuth }) => (
+
+
+
+ Sign In
+ Sign Up
+
+
+ {isAuth &&
+);
+
+Menu.propTypes = {
+ isAuth: PropTypes.bool.isRequired
+};
+
+export default Menu;
diff --git a/client/components/Menu/Menu.scss b/client/components/Menu/Menu.scss
new file mode 100644
index 0000000..fc6f37d
--- /dev/null
+++ b/client/components/Menu/Menu.scss
@@ -0,0 +1,4 @@
+.menu {
+ background-color: #252d3a;
+ width: 110px;
+}
diff --git a/client/components/Menu/components/Navigation/Navigation.jsx b/client/components/Menu/components/Navigation/Navigation.jsx
new file mode 100644
index 0000000..d86c295
--- /dev/null
+++ b/client/components/Menu/components/Navigation/Navigation.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import './Navigation.scss';
+import AddIco from 'images/add.svg';
+import UserMenuIco from 'images/user-menu.svg';
+import EnvelopeIco from 'images/envelope.svg';
+import DashbordIco from 'images/dashbord.svg';
+
+const MENU_ITEM = [
+ { name: 'new trip', path: '/new-trip', ico: AddIco },
+ { name: 'my profile', path: '/profile', ico: UserMenuIco },
+ { name: 'info', path: '/info', ico: EnvelopeIco },
+ { name: 'dashboard', path: '/dashboard', ico: DashbordIco }
+];
+
+const isAdmin = (name) => {
+ if (name === 'dashboard') {
+ return sessionStorage.getItem('role') === 'admin' ? null : 'hide';
+ }
+ return null;
+};
+
+const NavigationItem = ({ name, path, ico }) => (
+
+
+ );
+ }
+}
+
+PersonalInfoCard.propTypes = {
+ settings: PropTypes.shape({
+ name: PropTypes.object,
+ email: PropTypes.string,
+ userpic: PropTypes.string,
+ rating: PropTypes.number,
+ kmTraveled: PropTypes.number,
+ tripsCount: PropTypes.number
+ }).isRequired
+};
+
+export default PersonalInfoCard;
diff --git a/client/components/PersonalInfoCard/PersonalInfoCard.scss b/client/components/PersonalInfoCard/PersonalInfoCard.scss
new file mode 100644
index 0000000..08a5a7d
--- /dev/null
+++ b/client/components/PersonalInfoCard/PersonalInfoCard.scss
@@ -0,0 +1,82 @@
+.personal-info__card {
+ background-color: #f7f8fa;
+ text-align: left;
+ margin-bottom: 35px;
+ width: 100%;
+ border-radius: 3px;
+ box-shadow: 20px 0 40px rgba(74, 77, 101, 0.2);
+}
+
+.personal-info__heading {
+ color: #252d3a;
+ font-size: 14px;
+ line-height: 1em;
+ font-weight: 600;
+ margin-bottom: 0;
+ padding: 32px 15px 31px;
+ box-shadow: 0 20px 40px rgba(89, 100, 191, 0.1);
+ border-radius: 3px 3px 0 0;
+ text-align: center;
+}
+
+.personal-info__body {
+ padding: 20px 15px 10px;
+ text-align: center;
+}
+
+.personal-info__userpic {
+ border-radius: 100%;
+ width: 100%;
+ max-width: 70px;
+ display: block;
+ height: auto;
+ margin: 0 auto 15px;
+}
+
+.personal-info__name {
+ color: #252d3a;
+ font-size: 18px;
+ font-weight: 600;
+ line-height: 1.5em;
+ margin-bottom: 5px;
+}
+
+.personal-info__email {
+ color: #252d3a;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1.5em;
+ margin-bottom: 0;
+}
+
+.personal-info__divider {
+ height: 1px;
+ background-color: rgba(#252d3a, 0.2);
+ max-width: 450px;
+ margin: 20px auto 25px;
+}
+
+.personal-info__stats {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ align-items: flex-start;
+ max-width: 400px;
+ margin: 0 auto;
+}
+
+.personal-indo__stat {
+ margin: 0 10px 15px;
+ color: #252d3a;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 1.5em;
+
+ span {
+ display: block;
+ color: #252d3a;
+ font-size: 24px;
+ font-weight: 600;
+ line-height: 1.2em;
+ }
+}
diff --git a/client/components/PersonalInfoCard/package.json b/client/components/PersonalInfoCard/package.json
new file mode 100644
index 0000000..c90aa25
--- /dev/null
+++ b/client/components/PersonalInfoCard/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "PersonalInfoCard.jsx"
+}
\ No newline at end of file
diff --git a/client/components/PreLoader/PreLoader.jsx b/client/components/PreLoader/PreLoader.jsx
new file mode 100644
index 0000000..287aa3e
--- /dev/null
+++ b/client/components/PreLoader/PreLoader.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import Loader from 'react-loader-spinner';
+import './PreLoader.scss';
+
+const PreLoader = () => (
+ Personal Information
+
+ 
+
+ {`${first} ${last}`}
+{email}
+ +
+ {rating && (
+
+ + {rating} + out of 5 rating +
)} + {tripsCount && ( ++ {tripsCount} + trips +
)} + {kmTraveled && ( ++ {kmTraveled} + km travelled +
)} +
+
+);
+
+export default PreLoader;
diff --git a/client/components/PreLoader/PreLoader.scss b/client/components/PreLoader/PreLoader.scss
new file mode 100644
index 0000000..094d1dd
--- /dev/null
+++ b/client/components/PreLoader/PreLoader.scss
@@ -0,0 +1,26 @@
+.pre-loader {
+ position: absolute;
+ right: 0;
+ z-index: 9999;
+ left: 0;
+ width: 100%;
+ height: 100%;
+
+ & > div {
+ width: 100px;
+ margin: auto;
+ margin-top: calc(50vh - 100px);
+ }
+
+ &::before {
+ content: '';
+ display: block;
+ position: absolute;
+ width: calc(100% + 30px);
+ height: 100%;
+ background: url('~@images/profile-page-bg.jpg') top;
+ background-size: cover;
+ filter: blur(10px);
+ z-index: -1;
+ }
+}
diff --git a/client/components/PreLoader/package.json b/client/components/PreLoader/package.json
new file mode 100644
index 0000000..9c287e2
--- /dev/null
+++ b/client/components/PreLoader/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "PreLoader.jsx"
+}
\ No newline at end of file
diff --git a/client/components/ProfileModal/ProfileModal.jsx b/client/components/ProfileModal/ProfileModal.jsx
new file mode 100644
index 0000000..02148fb
--- /dev/null
+++ b/client/components/ProfileModal/ProfileModal.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+
+import './ProfileModal.scss';
+
+const ProfileModal = ({ toClose, isOpen, children }) => (
+ {children}
}
+
+
+);
+
+RoadView.propTypes = {
+ google: PropTypes.objectOf(PropTypes.any).isRequired,
+ startPoint: PropTypes.objectOf(PropTypes.any).isRequired,
+ endPoint: PropTypes.objectOf(PropTypes.any).isRequired
+};
+
+export default GoogleApiWrapper({
+ apiKey: (KEY),
+ language: 'en'
+})(RoadView);
diff --git a/client/components/RoadView/package.json b/client/components/RoadView/package.json
new file mode 100644
index 0000000..614d673
--- /dev/null
+++ b/client/components/RoadView/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "RoadView.jsx"
+}
\ No newline at end of file
diff --git a/client/components/SearchRouteStart/SearchRouteResult/ActiveRouteCard/ActiveRouteCard.jsx b/client/components/SearchRouteStart/SearchRouteResult/ActiveRouteCard/ActiveRouteCard.jsx
new file mode 100644
index 0000000..b51d9a2
--- /dev/null
+++ b/client/components/SearchRouteStart/SearchRouteResult/ActiveRouteCard/ActiveRouteCard.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ActiveRouteCard = ({
+ routeData: {
+ name, rating, startPoint, endPoint, date, seats, price, currency
+ }
+}) => (
+
+
+
+ {startPoint}
{endPoint}
{date}
+{name}, {rating} out of 5
+
+
+
+
+);
+
+ActiveRouteCard.propTypes = {
+ routeData: PropTypes.shape({
+ name: PropTypes.string,
+ rating: PropTypes.number,
+ startPoint: PropTypes.string,
+ endPoint: PropTypes.string,
+ date: PropTypes.string,
+ seats: PropTypes.number,
+ price: PropTypes.number,
+ currency: PropTypes.string
+ }).isRequired
+};
+
+export default ActiveRouteCard;
diff --git a/client/components/SearchRouteStart/SearchRouteResult/ActiveRouteCard/package.json b/client/components/SearchRouteStart/SearchRouteResult/ActiveRouteCard/package.json
new file mode 100644
index 0000000..12cd351
--- /dev/null
+++ b/client/components/SearchRouteStart/SearchRouteResult/ActiveRouteCard/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "ActiveRouteCard.jsx"
+}
diff --git a/client/components/SearchRouteStart/SearchRouteResult/RoutesFilters/RoutesFilters.jsx b/client/components/SearchRouteStart/SearchRouteResult/RoutesFilters/RoutesFilters.jsx
new file mode 100644
index 0000000..ca6c946
--- /dev/null
+++ b/client/components/SearchRouteStart/SearchRouteResult/RoutesFilters/RoutesFilters.jsx
@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import { Datepicker } from 'materialize-css';
+import PropTypes from 'prop-types';
+
+class RoutersFilters extends Component {
+ constructor() {
+ super();
+ this.datepicker = React.createRef();
+ this.filterValues = {
+ date: undefined,
+ passengers: undefined,
+ minPrice: undefined,
+ maxPrice: undefined
+ };
+ }
+
+ componentDidMount() {
+ Datepicker.init(this.datepicker.current, {
+ format: 'mm/dd/yyyy', onSelect: this.handleDataPickerSelect, autoClose: true
+ });
+ this.timer = null;
+ }
+
+ handleFilterChange = (e) => {
+ clearTimeout(this.timer);
+ const { updateFilterValues } = this.props;
+ this.filterValues[e.target.name] = e.target.value;
+ this.timer = setTimeout(() => updateFilterValues(this.filterValues), 500);
+ }
+
+ handleDataPickerSelect = (date) => {
+ const { updateFilterValues } = this.props;
+ const newDate = date ? new Intl.DateTimeFormat('en-US').format(date) : undefined;
+ this.filterValues.date = newDate;
+ updateFilterValues(this.filterValues);
+ }
+
+ render() {
+ return (
+ + {price} + {currency} +
+{seats} seat(s) available
+
+
+ );
+ }
+}
+
+RoutersFilters.propTypes = {
+ updateFilterValues: PropTypes.func.isRequired
+};
+
+export default RoutersFilters;
diff --git a/client/components/SearchRouteStart/SearchRouteResult/RoutesFilters/package.json b/client/components/SearchRouteStart/SearchRouteResult/RoutesFilters/package.json
new file mode 100644
index 0000000..1b4aa3f
--- /dev/null
+++ b/client/components/SearchRouteStart/SearchRouteResult/RoutesFilters/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "RoutesFilters.jsx"
+}
diff --git a/client/components/SearchRouteStart/SearchRouteResult/SearchRouteResult.jsx b/client/components/SearchRouteStart/SearchRouteResult/SearchRouteResult.jsx
new file mode 100644
index 0000000..ceacf98
--- /dev/null
+++ b/client/components/SearchRouteStart/SearchRouteResult/SearchRouteResult.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import ActiveRouteCard from './ActiveRouteCard';
+import RoutesFilters from './RoutesFilters';
+
+const Spinner = () => (
+ Filters
+
+ this.handleDataPickerSelect(undefined)} />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+
+const SearchRouteResult = ({ isActive, routesData, updateFilterValues }) => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {routesData &&
+ {routesData
+ ? routesData.map((routeData, i) =>
+
+ {!isActive &&
+
+);
+
+SearchRouteResult.defaultProps = {
+ routesData: null
+};
+
+SearchRouteResult.propTypes = {
+ isActive: PropTypes.bool.isRequired,
+ routesData: PropTypes.arrayOf(PropTypes.object),
+ updateFilterValues: PropTypes.func.isRequired
+};
+
+export default SearchRouteResult;
diff --git a/client/components/SearchRouteStart/SearchRouteResult/package.json b/client/components/SearchRouteStart/SearchRouteResult/package.json
new file mode 100644
index 0000000..7a9f6f0
--- /dev/null
+++ b/client/components/SearchRouteStart/SearchRouteResult/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "SearchRouteResult.jsx"
+}
diff --git a/client/components/SearchRouteStart/SearchRouteStart.jsx b/client/components/SearchRouteStart/SearchRouteStart.jsx
new file mode 100644
index 0000000..1d8aae8
--- /dev/null
+++ b/client/components/SearchRouteStart/SearchRouteStart.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Geosuggest from 'react-geosuggest';
+
+const SearchRouteStart = ({ setStartPoint, setEndPoint, handleSearchSubmit, isGooleApiLoded }) => (
+ No Routes Found
} +
+
+);
+
+SearchRouteStart.propTypes = {
+ setStartPoint: PropTypes.func.isRequired,
+ setEndPoint: PropTypes.func.isRequired,
+ handleSearchSubmit: PropTypes.func.isRequired,
+ isGooleApiLoded: PropTypes.bool.isRequired
+};
+
+export default SearchRouteStart;
diff --git a/client/components/SearchRouteStart/package.json b/client/components/SearchRouteStart/package.json
new file mode 100644
index 0000000..291b7b3
--- /dev/null
+++ b/client/components/SearchRouteStart/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "SearchRouteStart.jsx"
+}
diff --git a/client/components/Sidebar/Sidebar.jsx b/client/components/Sidebar/Sidebar.jsx
new file mode 100644
index 0000000..2327e90
--- /dev/null
+++ b/client/components/Sidebar/Sidebar.jsx
@@ -0,0 +1,82 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import { toast } from 'materialize-css';
+import { Redirect } from 'react-router-dom';
+import './Sidebar.scss';
+
+import TripInfo from './components/TripInfo';
+import TripPoint from './components/TripPoint';
+
+
+class Sidebar extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ start: 'Enter start point',
+ end: 'Enter end point'
+ };
+ }
+
+ saveTrip = (data) => {
+ const id = sessionStorage.getItem('iduser');
+ axios.post(`/api/trips/${id}/addTrip`, { data })
+ .then(() => {
+ toast({ html: `Your trip ${data.name} has been added!` });
+ setTimeout(() => this.setState({ redirect: true }), 2000);
+ })
+ .catch(() => toast({ html: `Your trip ${data.name} has NOT been added!` }));
+ }
+
+ render() {
+ const { tripInfo, changeName, points, changePoint, create, calcRouteFn } = this.props;
+ const { start, end, redirect } = this.state;
+ if (redirect) {
+ return Where do you want to go?
+
+
+
+
+
+ );
+ }
+}
+
+Sidebar.propTypes = {
+ points: PropTypes.arrayOf(PropTypes.any).isRequired,
+ tripInfo: PropTypes.objectOf(PropTypes.any),
+ changeName: PropTypes.func.isRequired,
+ changePoint: PropTypes.func.isRequired,
+ create: PropTypes.bool.isRequired,
+ calcRouteFn: PropTypes.func.isRequired
+};
+
+Sidebar.defaultProps = {
+ tripInfo: {
+ name: 'New Trip',
+ duration: undefined,
+ time: undefined,
+ fuel: undefined,
+ color: '#fff'
+ }
+};
+
+export default Sidebar;
diff --git a/client/components/Sidebar/Sidebar.scss b/client/components/Sidebar/Sidebar.scss
new file mode 100644
index 0000000..35413a2
--- /dev/null
+++ b/client/components/Sidebar/Sidebar.scss
@@ -0,0 +1,20 @@
+.sidebar {
+ min-height: calc(100vh - 50px);
+ width: 300px;
+ z-index: 1;
+ margin: -10px 0 0 -15px;
+ /* stylelint-disable */
+ box-shadow: 7px 0px 35px -1px rgba(122, 118, 122, 1);
+ /* stylelint-enable */
+
+ .btn {
+ width: 100%;
+ border-radius: 0;
+ }
+}
+
+.trip-point {
+ &:not(:last-child) {
+ border-bottom: none;
+ }
+}
diff --git a/client/components/Sidebar/components/TripInfo/TripInfo.jsx b/client/components/Sidebar/components/TripInfo/TripInfo.jsx
new file mode 100644
index 0000000..c080e11
--- /dev/null
+++ b/client/components/Sidebar/components/TripInfo/TripInfo.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './TripInfo.scss';
+
+
+const TripInfo = ({
+ name, duration, time, fuel, color, onSave
+}) => (
+
+
+
+
+ Search distance from route
+ +
+ {!points.length
+ ?
+ {!tripInfo.distance && create && Create}
+ {tripInfo.distance && this.saveTrip(tripInfo)}>Save}
+
+
+);
+
+TripInfo.propTypes = {
+ name: PropTypes.string.isRequired,
+ duration: PropTypes.string,
+ time: PropTypes.string,
+ fuel: PropTypes.string,
+ color: PropTypes.string.isRequired,
+ onSave: PropTypes.func.isRequired
+};
+
+TripInfo.defaultProps = {
+ duration: '0 км',
+ time: '0',
+ fuel: '0'
+};
+
+export default TripInfo;
diff --git a/client/components/Sidebar/components/TripInfo/TripInfo.scss b/client/components/Sidebar/components/TripInfo/TripInfo.scss
new file mode 100644
index 0000000..7771b6c
--- /dev/null
+++ b/client/components/Sidebar/components/TripInfo/TripInfo.scss
@@ -0,0 +1,64 @@
+.trip-info {
+ background: white;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ & > * {
+ padding: 10px;
+ }
+
+ &_title {
+ padding-bottom: 0;
+ outline: none;
+ }
+
+ &_icon {
+ width: 100%;
+ display: flex;
+ justify-content: space-around;
+ }
+
+ &_radius {
+ width: 100%;
+ background-color: #252d3a;
+ padding: 10px 15px 0;
+ text-align: center;
+ text-transform: uppercase;
+
+ p {
+ color: white;
+ opacity: 0.7;
+ }
+
+ input[type="range"] {
+ border: none;
+ color: white;
+ margin-top: 0;
+
+ &::-webkit-slider-thumb {
+ background-color: #33afe0;
+ }
+
+ &::before,
+ &::after {
+ display: inline;
+ opacity: 0.7;
+ }
+
+ &::before {
+ content: "-";
+ margin-right: 10px;
+ }
+
+ &::after {
+ content: "+";
+ margin-left: 10px;
+ }
+ }
+
+ &_input {
+ width: 100%;
+ }
+ }
+}
diff --git a/client/components/Sidebar/components/TripInfo/package.json b/client/components/Sidebar/components/TripInfo/package.json
new file mode 100644
index 0000000..7f24210
--- /dev/null
+++ b/client/components/Sidebar/components/TripInfo/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "TripInfo.jsx"
+}
\ No newline at end of file
diff --git a/client/components/Sidebar/components/TripPoint/TripPoint.jsx b/client/components/Sidebar/components/TripPoint/TripPoint.jsx
new file mode 100644
index 0000000..a95a502
--- /dev/null
+++ b/client/components/Sidebar/components/TripPoint/TripPoint.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import Geosuggest from 'react-geosuggest';
+import './TripPoint.scss';
+import PropTypes from 'prop-types';
+
+const TripPoint = ({ name, point, onSave }) => (
+ {name}
+
+ {duration}
+ {time}
+ $ {fuel}
+
+
+ {window.google
+ ? location && onSave(location, point)} autoComplete="off" />
+ :
+);
+
+TripPoint.propTypes = {
+ name: PropTypes.string.isRequired,
+ point: PropTypes.string.isRequired,
+ onSave: PropTypes.func.isRequired
+};
+
+export default TripPoint;
diff --git a/client/components/Sidebar/components/TripPoint/TripPoint.scss b/client/components/Sidebar/components/TripPoint/TripPoint.scss
new file mode 100644
index 0000000..d4a3a4e
--- /dev/null
+++ b/client/components/Sidebar/components/TripPoint/TripPoint.scss
@@ -0,0 +1,31 @@
+.trip-point {
+ margin: 10px;
+
+ &__wrapper {
+ padding: 20px 10px;
+ position: relative;
+ }
+
+ &__item {
+ margin-bottom: 10px;
+ }
+
+ input[type=text]:not(.browser-default) {
+ font-size: 1.2em;
+ background-color: transparent;
+ margin: 0;
+ border-color: transparent;
+
+ &::placeholder {
+ color: #252d3a;
+ }
+ }
+
+ .geosuggest__suggests {
+ background: #f7f8fa;
+ top: calc(100% - 19px);
+ border-top: 1px;
+ margin-left: 10px;
+ margin-right: 10px;
+ }
+}
diff --git a/client/components/Sidebar/components/TripPoint/package.json b/client/components/Sidebar/components/TripPoint/package.json
new file mode 100644
index 0000000..03cb9e9
--- /dev/null
+++ b/client/components/Sidebar/components/TripPoint/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "TripPoint.jsx"
+}
\ No newline at end of file
diff --git a/client/components/Sidebar/package.json b/client/components/Sidebar/package.json
new file mode 100644
index 0000000..08c76c5
--- /dev/null
+++ b/client/components/Sidebar/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "Sidebar.jsx"
+}
\ No newline at end of file
diff --git a/client/components/UserList/UserList.jsx b/client/components/UserList/UserList.jsx
new file mode 100644
index 0000000..dcff76d
--- /dev/null
+++ b/client/components/UserList/UserList.jsx
@@ -0,0 +1,103 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+import { toast } from 'materialize-css';
+import ListItem from './components/ListItem';
+import './UserList.scss';
+
+class UserList extends Component {
+ constructor() {
+ super();
+
+ this.state = {
+ userList: [],
+ initialState: []
+ };
+ }
+
+ componentDidMount() {
+ this.getAllUsers();
+ }
+
+ getAllUsers = () => {
+ axios.get('/api/allUsers')
+ .then(({ data }) => this.setState({ userList: data, initialState: data }));
+ }
+
+ setUserStatus = (id, status) => {
+ axios.post('/api/user/unblock', { iduser: id, status })
+ .then(() => {
+ toast({ html: 'Account had been blocked' });
+ this.getAllUsers();
+ })
+ .catch(err => console.log(err));
+ }
+
+ deleteUser = (id) => {
+ axios.post('/api/user/delete', { iduser: id })
+ .then(() => {
+ toast({ html: 'Account had been deleted' });
+ this.getAllUsers();
+ })
+ .catch(err => console.log(err));
+ }
+
+ sortListASC = () => {
+ const { initialState } = this.state;
+ this.setState({ userList: initialState.sort((a, b) => (a.name.last < b.name.last ? -1 : 1)) });
+ };
+
+ sortListDESC = () => {
+ const { initialState } = this.state;
+ this.setState({ userList: initialState.sort((a, b) => (a.name.last > b.name.last ? -1 : 1)) });
+ };
+
+ filterListActive = () => {
+ const { initialState } = this.state;
+ this.setState({ userList: initialState.filter(person => person.acount_status === true) });
+ };
+
+ filterListBlock = () => {
+ const { initialState } = this.state;
+ this.setState({ userList: initialState.filter(person => person.acount_status === false) });
+ };
+
+ initState = () => {
+ this.getAllUsers();
+ };
+
+ render() {
+ const { userList } = this.state;
+ return (
+ {name}
} +
+ {/* Add user */}
+
+ );
+ }
+}
+
+export default UserList;
diff --git a/client/components/UserList/UserList.scss b/client/components/UserList/UserList.scss
new file mode 100644
index 0000000..60507fc
--- /dev/null
+++ b/client/components/UserList/UserList.scss
@@ -0,0 +1,109 @@
+.userlist {
+ &__header {
+ display: flex;
+ justify-content: space-around;
+
+ span {
+ min-width: 30%;
+ }
+ }
+
+ &__item {
+ display: flex;
+ justify-content: space-around;
+ margin-bottom: 5px;
+
+ & > div {
+ min-width: 40%;
+ min-height: 80px;
+ }
+ }
+
+ &__content {
+ max-width: 1024px;
+ }
+
+ &__info {
+ display: flex;
+ align-items: center;
+ }
+
+ &__img {
+ margin-right: 30px;
+ border-radius: 50%;
+ height: 55px;
+ overflow: hidden;
+ }
+
+ &__column {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+
+ &--margin {
+ margin-left: -5%;
+ }
+ }
+
+ &__actions {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+
+ & > :not(:last-child) {
+ margin-right: 5px;
+ }
+ }
+
+ &__status {
+ display: flex;
+ align-items: center;
+ margin-left: 5px;
+ margin-top: -7px;
+ margin-bottom: 14px;
+ }
+
+ .main-btn {
+ min-width: 100px;
+ }
+
+ h5 {
+ margin: 5px 0;
+ }
+}
+
+.menu-buttons {
+ margin-right: 10px;
+ margin-bottom: 5px;
+}
+
+.options-list {
+ margin-bottom: 10px;
+ background-color: #fcfcfd;
+ display: flex;
+ padding: 10px;
+}
+
+.filter-title {
+ margin-left: 10px;
+ padding-top: 6px;
+ font-weight: 600;
+}
+
+.filter-button {
+ display: inline-block;
+ padding: 10px 15px;
+ margin: 0 10px;
+ border-radius: 3px;
+ background-color: #33afe0;
+ color: #fff;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 1em;
+ letter-spacing: 0.6px;
+ cursor: pointer;
+ transition: background-color 0.15s linear;
+ text-align: center;
+ vertical-align: middle;
+}
+
diff --git a/client/components/UserList/components/ListItem/ListItem.jsx b/client/components/UserList/components/ListItem/ListItem.jsx
new file mode 100644
index 0000000..fd72496
--- /dev/null
+++ b/client/components/UserList/components/ListItem/ListItem.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import DefaultUserpic from 'images/default-userpic.png';
+
+
+const ListItem = ({
+ iduser,
+ avatar,
+ role,
+ name: { first, last },
+ acount_status: acountStatus,
+ setUserStatus,
+ deleteUser
+}) => (
+
+
+
+ Clear filters and sorting
+
+ Sort alphabetically(by last name):
+ Ascending + Descending +Filter by:
+ User is active + User is block +
+ User
+ Actions
+
+
+ {userList.map((user, i) => (
+
+
+
+);
+
+ListItem.propTypes = {
+ role: PropTypes.string.isRequired,
+ iduser: PropTypes.number.isRequired,
+ setUserStatus: PropTypes.func.isRequired,
+ deleteUser: PropTypes.func.isRequired,
+ avatar: PropTypes.string,
+ name: PropTypes.shape({
+ first: PropTypes.string.isRequired,
+ last: PropTypes.string.isRequired
+ }).isRequired,
+ acount_status: PropTypes.bool.isRequired
+};
+
+ListItem.defaultProps = {
+ avatar: null
+};
+
+export default ListItem;
diff --git a/client/components/UserList/components/ListItem/package.json b/client/components/UserList/components/ListItem/package.json
new file mode 100644
index 0000000..dd0ae58
--- /dev/null
+++ b/client/components/UserList/components/ListItem/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "ListItem.jsx"
+}
\ No newline at end of file
diff --git a/client/components/UserList/package.json b/client/components/UserList/package.json
new file mode 100644
index 0000000..ab154b5
--- /dev/null
+++ b/client/components/UserList/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "UserList.jsx"
+}
\ No newline at end of file
diff --git a/client/helpers/index.js b/client/helpers/index.js
new file mode 100644
index 0000000..ba1dd24
--- /dev/null
+++ b/client/helpers/index.js
@@ -0,0 +1,19 @@
+export function random(min, max) { return Math.round(min + Math.random() * (max - min)); }
+export const colors = [
+ 'red',
+ 'pink',
+ 'purple',
+ 'blue',
+ 'teal',
+ 'light-green',
+ 'lime',
+ 'orange'
+];
+export function getDateFromTimestamp(string) {
+ return string.split('')
+ .splice(0, 10)
+ .join('')
+ .split('-')
+ .reverse()
+ .join('/');
+}
diff --git a/client/index.js b/client/index.js
new file mode 100644
index 0000000..c3e33a8
--- /dev/null
+++ b/client/index.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BrowserRouter } from 'react-router-dom';
+import axios from 'axios';
+import App from './App';
+import 'materialize-css';
+import './index.scss';
+
+axios.defaults.baseURL = 'http://localhost:3000';
+
+ReactDOM.render(
+
+
+
+
+ 
+
+
+
+ {`${first} ${last}`}
+Dashbord
+
+
+);
+
+export default Info;
diff --git a/client/pages/Info/Info.scss b/client/pages/Info/Info.scss
new file mode 100644
index 0000000..1b0ce62
--- /dev/null
+++ b/client/pages/Info/Info.scss
@@ -0,0 +1,62 @@
+
+.main-info {
+ background-color: #f7f8fa;
+ display: flex;
+ flex-direction: column;
+}
+
+.Map {
+ width: 80%;
+ height: 300px;
+ border: 1px, solid, black;
+ margin: 0 auto;
+ background-color: lightblue;
+}
+
+.contacts {
+ text-align: center;
+}
+
+.form {
+ width: 50%;
+ margin: 0 auto;
+ text-align: center;
+}
+
+footer {
+ margin-top: 50px;
+ height: 100px;
+ width: 100%;
+ background-color: rgb(140, 188, 243);
+ display: flex;
+ justify-content: center;
+ flex-wrap: nowrap;
+}
+
+.copyright {
+ margin-top: 40px;
+ width: 30%;
+}
+
+.footer-menu {
+ margin-top: 40px;
+ width: 30%;
+
+ ul {
+ display: flex;
+ flex-direction: row;
+
+ li {
+ margin-right: 30px;
+ margin-left: 60px;
+ padding: 5px;
+ }
+
+ li:hover {
+ background-color: chocolate;
+ padding: 5px;
+ transition: 0.2s;
+ }
+ }
+}
+
diff --git a/client/pages/Info/package.json b/client/pages/Info/package.json
new file mode 100644
index 0000000..657679f
--- /dev/null
+++ b/client/pages/Info/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "Info.jsx"
+}
\ No newline at end of file
diff --git a/client/pages/Login/Login.jsx b/client/pages/Login/Login.jsx
new file mode 100644
index 0000000..798a9ea
--- /dev/null
+++ b/client/pages/Login/Login.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Redirect } from 'react-router-dom';
+import LoginCard from '../../components/LoginCard/LoginCard';
+
+const Login = ({ updateIsAuth, isAuth }) => (
+ isAuth ?
+
+ Here will be map
+
+
+ Contacts
+Our phone 66-666-666
+Our email ad@666.gmail.com
+
+
+
+
+ Please enter your start point' }); + }); + }); + return location; + }; + + setPoints = (latlng, point) => { + const { A, B } = this.FLAGS; + if (point === A) { + this.setState({ + location: { + lat: latlng.lat, + lng: latlng.lng + } + }); + } + if (point === B) { + this.setState({ + end: { + lat: latlng.lat, + lng: latlng.lng + } + }); + } + } + + getParsetNameFromGeocode = (data) => { + const res = []; + Object.values(data.address_components).map((item) => { + switch (item.types[0]) { + case 'route': + if (item.long_name === 'Unnamed Road') { + res.toString(); + break; + } + res.push(item.long_name); + break; + case 'locality': + res.push(item.long_name); + break; + case 'administrative_area_level_2': + res.push(item.long_name); + break; + case 'administrative_area_level_1': + res.push(item.long_name); + break; + default: res.toString(); + } + return item; + }); + return res.join(', '); + } + + getPointName = (startPoint) => { + const name = new Promise((resolve, reject) => { + if (!window.google) { + reject(new Error('API is undefined')); + } + const geocoder = new window.google.maps.Geocoder(); + geocoder.geocode({ location: startPoint }, res => resolve( + this.getParsetNameFromGeocode(res[0]) + )); + }); + return name; + } + + addMarkers = (latLng, pointFlag) => { + const { markers } = this.state; + const { A, B } = this.FLAGS; + let flag = !markers.length ? A : B; + if (pointFlag) { + flag = pointFlag; + this.setPoints(latLng, pointFlag); + } + if (pointFlag === A) { + this.getPointName(latLng) + .then(res => this.setState(prevState => prevState.markers.splice(0, 1, { + name: res, + title: res, + position: latLng, + point: flag + }))); + } else { + if (markers.length > 1) { + this.setState(prevState => prevState.markers.pop()); + } + this.getPointName(latLng) + .then(res => this.setState(prevState => prevState.markers.push({ + name: res, + title: res, + position: latLng, + point: flag + }))); + } + } + + calculateRoute = () => { + this.eventLoader(); + if (window.google) { + const { location, end } = this.state; + const map = document.getElementById('map'); + const directionsService = new window.google.maps.DirectionsService(); + const directionsDisplay = new window.google.maps.DirectionsRenderer(); + const startPoint = new window.google.maps.LatLng(location); + const endPoint = new window.google.maps.LatLng(end); + const setNewMap = new window.google.maps.Map(map, { + zoom: 7, + startPoint + }); + directionsDisplay.setMap(setNewMap); + const request = { + origin: startPoint, + destination: endPoint, + travelMode: 'DRIVING' + }; + directionsService.route(request, (result, status) => { + if (status === 'OK') { + directionsDisplay.setDirections(result); + this.setState(prevState => ({ + tripInfo: { + ...prevState.tripInfo, + duration: result.routes[0].legs[0].distance.text, + time: result.routes[0].legs[0].duration.text, + start_address: result.routes[0].legs[0].start_address, + end_address: result.routes[0].legs[0].end_address, + distance: { + start: prevState.location, + end: prevState.end + } + }, + load: false + })); + } + }); + } + } + + eventLoader = () => { + this.setState(prevState => ({ load: !prevState.load })); + } + + eventChangeName = ({ currentTarget: { textContent } }) => { + this.setState(prevState => ({ + tripInfo: { + ...prevState.tripInfo, + name: textContent + } + })); + } + + + render() { + const { load, markers, location, defaultZoom, tripInfo } = this.state; + return ( +
+
+ );
+ }
+}
+
+
+export default NewTrip;
diff --git a/client/pages/NewTrip/NewTrip.scss b/client/pages/NewTrip/NewTrip.scss
new file mode 100644
index 0000000..528b8c3
--- /dev/null
+++ b/client/pages/NewTrip/NewTrip.scss
@@ -0,0 +1,10 @@
+.new-trip {
+ display: flex;
+ position: relative;
+
+ .pre-loader {
+ left: 286px;
+ margin-top: -10px;
+ width: calc(100% - 300px);
+ }
+}
diff --git a/client/pages/NewTrip/package.json b/client/pages/NewTrip/package.json
new file mode 100644
index 0000000..b71930c
--- /dev/null
+++ b/client/pages/NewTrip/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "NewTrip.jsx"
+}
\ No newline at end of file
diff --git a/client/pages/Profile/Profile.jsx b/client/pages/Profile/Profile.jsx
new file mode 100644
index 0000000..f84598b
--- /dev/null
+++ b/client/pages/Profile/Profile.jsx
@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import axios from 'axios';
+import './Profile.scss';
+import CarsCard from '../../components/CarsCard';
+import PersonalInfoCard from '../../components/PersonalInfoCard';
+import FeedbacksCard from '../../components/FeedbacksCard';
+import HistoryWrap from '../../components/HistoryWrap';
+
+class Profile extends Component {
+ constructor() {
+ super();
+
+ this.state = {
+ userInfo: null,
+ carsInfo: [],
+ feedbacksInfo: [],
+ allHistory: []
+ };
+ this.USER_ID = sessionStorage.getItem('iduser');
+ }
+
+ componentDidMount() {
+ this.fetchFeedbacksData();
+ this.fetchUserData();
+ this.updateCarData();
+ this.fetchHistoryData();
+ }
+
+ fetchFeedbacksData = () => {
+ axios.get(`/api/feedbacks/${this.USER_ID}`)
+ .then(({ data }) => this.setState({ feedbacksInfo: data }))
+ .catch(e => console.error(e));
+ }
+
+ fetchHistoryData = () => {
+ axios.get(`/api/trips/${this.USER_ID}/byId`)
+ .then(({ data }) => this.setState({ allHistory: data }))
+ .catch(e => console.error(e));
+ }
+
+ fetchUserData = () => {
+ axios.get(`api/user/${this.USER_ID}`)
+ .then(({ data }) => this.setState({ userInfo: data[0] }))
+ .catch(e => console.error(e));
+ }
+
+ updateCarData = () => {
+ axios.get(`api/user/${this.USER_ID}/cars`)
+ .then(({ data }) => this.setState({ carsInfo: data }))
+ .catch(e => console.error(e));
+ }
+
+ render() {
+ const {
+ userInfo, carsInfo, feedbacksInfo, allHistory
+ } = this.state;
+
+ return (
+
+
+
+
+
+ );
+ }
+}
+
+export default Profile;
diff --git a/client/pages/Profile/Profile.scss b/client/pages/Profile/Profile.scss
new file mode 100644
index 0000000..2b98ff8
--- /dev/null
+++ b/client/pages/Profile/Profile.scss
@@ -0,0 +1,89 @@
+.profile {
+ min-height: calc(100vh - 50px);
+ margin: -10px -15px;
+ padding-bottom: 40px;
+ text-align: center;
+ background: url('~@images/profile-page-bg.jpg') top;
+ background-size: cover;
+}
+
+.toast {
+ background-color: #252d3a;
+}
+
+.profile__header {
+ color: #252d3a;
+ font-size: 30px;
+ font-weight: 600;
+ line-height: 1em;
+ padding: 40px 15px 30px;
+ background-color: rgba(#fff, 0.5);
+ margin-bottom: 20px;
+ margin-top: 0;
+}
+
+.profile-content-wrap {
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: 15px;
+ padding-left: 15px;
+ width: 100%;
+ max-width: 1240px;
+}
+
+.row {
+ display: flex;
+ flex-wrap: wrap;
+ margin-right: -15px;
+ margin-left: -15px;
+}
+
+.col-12,
+.col-md-6 {
+ position: relative;
+ width: 100%;
+ min-height: 1px;
+ padding-right: 15px;
+ padding-left: 15px;
+}
+
+.col-12 {
+ flex: 0 0 100%;
+ max-width: 100%;
+}
+
+@media (min-width: 992px) {
+ .col-md-6 {
+ flex: 0 0 50%;
+ max-width: 50%;
+ }
+}
+
+.deleteCar-modal {
+ background-color: #f7f8fa;
+ text-align: left;
+ margin-bottom: 35px;
+ width: 100%;
+ max-width: 400px;
+ border-radius: 3px;
+ box-shadow: 20px 0 40px rgba(74, 77, 101, 0.2);
+}
+
+.deleteCar-heading {
+ position: relative;
+ color: #252d3a;
+ font-size: 14px;
+ line-height: 1em;
+ font-weight: 600;
+ margin-bottom: 0;
+ padding: 32px 20px 31px;
+ box-shadow: 0 20px 40px rgba(89, 100, 191, 0.1);
+ border-radius: 3px 3px 0 0;
+ text-align: center;
+}
+
+.deleteCar-body {
+ padding: 8px 10px 10px;
+ text-align: center;
+ overflow: hidden;
+}
diff --git a/client/pages/Profile/package.json b/client/pages/Profile/package.json
new file mode 100644
index 0000000..bd4edd6
--- /dev/null
+++ b/client/pages/Profile/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "Profile.jsx"
+}
\ No newline at end of file
diff --git a/client/pages/SearchRoute/SearchRoute.jsx b/client/pages/SearchRoute/SearchRoute.jsx
new file mode 100644
index 0000000..5df2845
--- /dev/null
+++ b/client/pages/SearchRoute/SearchRoute.jsx
@@ -0,0 +1,170 @@
+import React, { Component } from 'react';
+import { toast } from 'materialize-css';
+import axios from 'axios';
+
+import './SearchRoute.scss';
+import SearchRouteStart from '../../components/SearchRouteStart';
+import SearchRouteResult from '../../components/SearchRouteStart/SearchRouteResult';
+
+const MissingData = () => (
+ {
+ rating: Number.parseFloat((Math.random() * 2).toFixed(1)) + 3,
+ date: `${Math.ceil(Math.random() * 12)}/${Math.ceil(Math.random() * 28)}/2018`,
+ seats: Math.ceil(Math.random() * 5),
+ price: Math.ceil(Math.random() * 10) * 50,
+ currency: 'UAH'
+ }
+);
+
+class SearchRoute extends Component {
+ constructor() {
+ super();
+ this.state = {
+ isGooleApiLoded: false,
+ searchingStageTwo: false,
+ searchResultIsReady: false,
+ searchedRouteData: null,
+ filterValues: {
+ date: undefined,
+ passengers: undefined,
+ minPrice: undefined,
+ maxPrice: undefined
+ }
+ };
+ this.dataToFilter = null;
+ this.searchPoints = { startPoint: null, endPoint: null };
+ }
+
+ componentDidMount() {
+ if (window.google) this.setState({ isGooleApiLoded: true });
+ }
+
+ setStartPoint = ({ location = null } = {}) => {
+ this.searchPoints.startPoint = location;
+ }
+
+ setEndPoint = ({ location = null } = {}) => {
+ this.searchPoints.endPoint = location;
+ }
+
+ updateFilterValues = ({
+ date = undefined, passengers = undefined, minPrice = undefined, maxPrice = undefined
+ }) => {
+ console.log(date, passengers, minPrice, maxPrice);
+ this.setState({
+ filterValues: {
+ date, passengers, minPrice, maxPrice
+ }
+ });
+ setTimeout(() => this.filterData(), 0);
+ }
+
+ handleSearchSubmit = (e) => {
+ e.preventDefault();
+ const { startPoint, endPoint } = this.searchPoints;
+ return (!startPoint && !endPoint)
+ ? toast({ html: 'Please choose at least one place' })
+ : this.handleRouteSearch();
+ }
+
+ handleRouteSearch = () => {
+ this.setState({ searchingStageTwo: true, searchResultIsReady: false });
+ setTimeout(() => this.fetchLocalStorageData(), 1000);
+ }
+
+ isNear = (filterVal, dbVal) => (
+ Math.abs(Number.parseFloat(filterVal) - Number.parseFloat(dbVal)).toFixed(1) <= 0.1
+ )
+
+ fetchLocalStorageData = () => {
+ const { startPoint, endPoint } = this.searchPoints;
+ axios.get('api/trips/all')
+ .then(({ data }) => {
+ const RoutesToReturn = data
+ .filter((route) => {
+ const {
+ start: { lat: startLat, lng: startLng },
+ end: { lat: endLat, lng: endLng }
+ } = route.distance;
+
+ const shouldReturnStart = startPoint
+ ? (this.isNear(startPoint.lat, startLat) && this.isNear(startPoint.lng, startLng))
+ : true;
+
+ const shouldReturnEnd = endPoint
+ ? (this.isNear(endPoint.lat, endLat) && this.isNear(endPoint.lng, endLng))
+ : true;
+
+ return (shouldReturnStart && shouldReturnEnd);
+ })
+ .map(({ start_address: startAddress, end_address: endAddress, username }) => {
+ const missingData = MissingData();
+ missingData.name = `${username.first} ${username.last}`;
+ missingData.startPoint = startAddress;
+ missingData.endPoint = endAddress;
+ return missingData;
+ });
+ this.dataToFilter = RoutesToReturn;
+ this.filterData();
+ })
+ .catch((e) => {
+ this.setState({ searchedRouteData: null, searchResultIsReady: true });
+ toast({ html: 'Bad connection, please try again later!' });
+ console.error(e);
+ });
+ }
+
+ fetchRoutesData = () => {
+ axios.get('public/data/searchResultOfPublishedRoutes.json')
+ .then(({ data }) => {
+ this.dataToFilter = data;
+ this.filterData();
+ });
+ }
+
+ filterData = () => {
+ const {
+ filterValues: {
+ date, passengers, minPrice, maxPrice
+ }
+ } = this.state;
+ let filteredData = this.dataToFilter;
+
+ if (date) filteredData = filteredData.filter(obj => obj.date === date);
+ if (passengers) filteredData = filteredData.filter(obj => obj.seats >= passengers);
+ if (minPrice) filteredData = filteredData.filter(obj => obj.price >= minPrice);
+ if (maxPrice) filteredData = filteredData.filter(obj => obj.price <= maxPrice);
+ this.setState({ searchedRouteData: filteredData, searchResultIsReady: true });
+ }
+
+ render() {
+ const {
+ searchingStageTwo, searchResultIsReady, searchedRouteData, isGooleApiLoded
+ } = this.state;
+
+ return (
+ My Profile
+
+
+
+
+
+ {userInfo &&
+
+
+
+
+ );
+ }
+}
+
+export default SearchRoute;
diff --git a/client/pages/SearchRoute/SearchRoute.scss b/client/pages/SearchRoute/SearchRoute.scss
new file mode 100644
index 0000000..d99df1a
--- /dev/null
+++ b/client/pages/SearchRoute/SearchRoute.scss
@@ -0,0 +1,331 @@
+.search-route {
+ min-height: calc(100vh - 50px);
+ margin: -10px -15px;
+ padding-bottom: 40px;
+ text-align: center;
+ background: url('~@images/profile-page-bg.jpg') top;
+ background-size: cover;
+
+ &__header {
+ color: #252d3a;
+ font-size: 30px;
+ font-weight: 600;
+ line-height: 1em;
+ padding: 40px 15px 30px;
+ background-color: rgba(#fff, 0.5);
+ margin-bottom: 20px;
+ margin-top: 0;
+ }
+}
+
+.sr-wrap {
+ margin-right: auto;
+ margin-left: auto;
+ width: 100%;
+ padding: 0 15px;
+ max-width: 1240px;
+}
+
+.search-route-start {
+ box-shadow: 0 20px 40px rgba(89, 100, 191, 0.1);
+ border-radius: 3px 3px 0 0;
+ background-color: #fff;
+ padding: 55px 15px;
+}
+
+.sr-inner {
+ box-shadow: 20px 0 40px rgba(74, 77, 101, 0.2);
+ border-radius: 3px;
+ background-color: #f7f8fa;
+}
+
+.srs-h {
+ color: #252d3a;
+ font-size: 18px;
+ font-weight: 600;
+ margin-bottom: 35px;
+}
+
+.sr-form-wrap {
+ max-width: 680px;
+ margin: 0 auto;
+ padding: 0 15px;
+}
+
+.search-start__btn-submit {
+ display: inline-block;
+ padding: 15px 40px 14px;
+ margin: 0 10px;
+ border-radius: 3px;
+ background-color: #33afe0;
+ color: #fff;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 1em;
+ letter-spacing: 0.6px;
+ cursor: pointer;
+ transition: background-color 0.15s linear;
+
+ &:hover {
+ background-color: #252d3a;
+ }
+}
+
+.search-start__col {
+ width: calc(50% - 30px);
+ margin-right: 15px;
+ margin-left: 15px;
+ margin-bottom: 20px;
+}
+
+.geosuggest__suggests {
+ position: absolute;
+ top: calc(100% - 4px);
+ left: 0;
+ right: 0;
+ max-height: 25em;
+ padding: 0;
+ margin-top: -1px;
+ background: #fff;
+ border: 1px solid #33afe0;
+ border-top-width: 0;
+ overflow-x: hidden;
+ overflow-y: hidden;
+ list-style: none;
+ z-index: 5;
+ -webkit-transition: max-height 0.2s, border 0.2s;
+ transition: max-height 0.2s, border 0.2s;
+}
+
+.geosuggest__suggests--hidden {
+ max-height: 0;
+ overflow: hidden;
+ border-width: 0;
+}
+
+.geosuggest__item {
+ font-size: 18px;
+ font-size: 1rem;
+ padding: 0.5em 0.65em;
+ cursor: pointer;
+ text-align: left;
+ transition: bachground-color 0.2s ease-in-out;
+}
+
+.geosuggest__item:hover,
+.geosuggest__item:focus {
+ background-color: #f5f5f5;
+}
+
+.geosuggest__item--active {
+ background-color: #33afe0;
+ color: #fff;
+}
+
+.geosuggest__item--active:hover,
+.geosuggest__item--active:focus {
+ background-color: #ccc;
+}
+
+.geosuggest__item__matched-text {
+ font-weight: bold;
+}
+
+.spinner-mainBlue {
+ border-color: #33afe0;
+}
+
+.search-route-result {
+ position: relative;
+ min-height: 150px;
+ padding: 30px 15px;
+}
+
+.absolute-spinner-wrap {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background-color: rgba(#f7f8fa, 0.9);
+}
+
+.absolute-spinner {
+ position: absolute;
+ top: 50px;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.route__userpic {
+ border-radius: 100%;
+ width: 70px;
+ max-width: 70px;
+ display: block;
+ height: auto;
+ margin: 0 15px;
+}
+
+.datepicker-date-display {
+ background-color: #252d3a;
+}
+
+.datepicker-table td.is-selected {
+ background-color: #33afe0;
+}
+
+.datepicker-day-button:focus {
+ background-color: rgba(#33afe0, 0.25);
+}
+
+.modal-overlay {
+ background-color: #252d3a;
+}
+
+.route-card-btn {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ top: 50%;
+ right: 90px;
+ transform: translate(0, -50%);
+ width: 50px;
+ height: 50px;
+ border-radius: 3px;
+ background-color: #33afe0;
+ transition: transform 0.2s ease-in-out;
+
+ &::before {
+ content: '';
+ display: block;
+ width: 8px;
+ height: 14px;
+ background: url('~@images/arrow-right.svg') center;
+ }
+}
+
+.active-route-card {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ max-width: 850px;
+ box-shadow: 0 20px 40px rgba(89, 100, 191, 0.1);
+ border-radius: 2px;
+ background-color: #fff;
+ margin: 0 auto 5px;
+ padding: 32px 150px 32px 90px;
+ position: relative;
+ text-align: left;
+
+ &:hover {
+ .route-card-btn {
+ transform: translate(5px, -50%);
+ }
+ }
+}
+
+.route-card-inner1 {
+ width: calc(100% - 150px);
+}
+
+.route-card-inner2 {
+ width: 150px;
+}
+
+.route-card-points {
+ color: #333;
+ font-size: 13px;
+ font-weight: 700;
+ line-height: 1.5em;
+ margin-bottom: 10px;
+}
+
+.route-card-date {
+ color: #333;
+ font-size: 15px;
+ font-weight: 600;
+ line-height: 1.4em;
+ margin-bottom: 0;
+}
+
+.route-card-name {
+ color: #252d3a;
+ font-size: 16px;
+ font-weight: 600;
+ line-height: 1.2em;
+}
+
+.route-card-rating {
+ color: #33afe0;
+ font-size: 22px;
+ font-weight: 600;
+ line-height: 1.5em;
+ letter-spacing: 1px;
+}
+
+.route-card-sec {
+ color: rgba(#252d3a, 0.8);
+ font-size: 14px;
+ font-weight: 600;
+ line-height: 1.2;
+}
+
+.route-card-price {
+ display: inline-block;
+ margin-right: 5px;
+ color: #33afe0;
+ font-size: 30px;
+ font-weight: 600;
+ line-height: 1.1em;
+ letter-spacing: 1.5px;
+}
+
+.route-card-currency {
+ color: #333;
+ font-size: 12px;
+ font-weight: 600;
+ line-height: 1.5em;
+}
+
+.route-card-seats {
+ color: #333;
+ font-size: 15px;
+ font-weight: 600;
+ line-height: 1.5em;
+}
+
+.mb5 {
+ margin-bottom: 5px;
+}
+
+.filter-card {
+ display: flex;
+ flex-wrap: wrap;
+ padding: 10px 15px;
+ max-width: 850px;
+ margin: 0 auto 30px;
+ position: relative;
+ text-align: left;
+}
+
+.filter-card-p {
+ width: 100%;
+ color: #252d3a;
+ font-size: 14px;
+ line-height: 1.2em;
+ font-weight: 600;
+ padding-bottom: 15px;
+ padding-left: 15px;
+}
+
+.filter-card-input-wrap {
+ width: calc(25% - 30px);
+ margin: 15px;
+
+ @media (max-width: 767px) {
+ width: 100%;
+ }
+}
diff --git a/client/pages/SearchRoute/package.json b/client/pages/SearchRoute/package.json
new file mode 100644
index 0000000..75b52ba
--- /dev/null
+++ b/client/pages/SearchRoute/package.json
@@ -0,0 +1,3 @@
+{
+ "main": "SearchRoute.jsx"
+}
diff --git a/client/routes/index.js b/client/routes/index.js
new file mode 100644
index 0000000..ed7ff59
--- /dev/null
+++ b/client/routes/index.js
@@ -0,0 +1,32 @@
+import Info from '../pages/Info';
+import Profile from '../pages/Profile';
+import Dashboard from '../pages/Dashbord';
+import SearchRoute from '../pages/SearchRoute';
+import NewTrip from '../pages/NewTrip';
+
+
+const Routes = [
+ {
+ path: '/',
+ exact: true,
+ component: SearchRoute
+ },
+ {
+ path: '/profile',
+ component: Profile
+ },
+ {
+ path: '/info',
+ component: Info
+ },
+ {
+ path: '/dashboard',
+ component: Dashboard
+ },
+ {
+ path: '/new-trip',
+ component: NewTrip
+ }
+];
+
+export default Routes;
diff --git a/config/paths.js b/config/paths.js
new file mode 100644
index 0000000..a60ac76
--- /dev/null
+++ b/config/paths.js
@@ -0,0 +1,17 @@
+const fs = require('fs');
+const path = require('path');
+
+
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+
+
+module.exports = {
+ root: appDirectory,
+ appBuild: resolveApp('build'),
+ appHtml: resolveApp('public/index.html'),
+ appIndexJs: resolveApp('client/index.js'),
+ appSrc: resolveApp('client'),
+ appAssets: resolveApp('public'),
+ globalImages: resolveApp('public/images')
+};
diff --git a/config/webpack.common.js b/config/webpack.common.js
new file mode 100644
index 0000000..c9d11cc
--- /dev/null
+++ b/config/webpack.common.js
@@ -0,0 +1,105 @@
+const paths = require('./paths');
+const webpack = require('webpack');
+const autoprefixer = require('autoprefixer');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const styleLintPlugin = require('stylelint-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+
+module.exports = {
+ entry: paths.appIndexJs,
+ output: {
+ path: paths.appBuild,
+ filename: 'bundle.js',
+ publicPath: '/'
+ },
+ module: {
+ rules: [
+ {
+ enforce: 'pre',
+ test: /\.(js|jsx)$/,
+ exclude: /node_modules/,
+ loader: require.resolve('eslint-loader'),
+ options: {
+ failOnWarning: true,
+ failOnError: true,
+ }
+ },
+ {
+ test: /\.(js|jsx)$/,
+ exclude: /node_modules/,
+ use: {
+ loader: require.resolve('babel-loader'),
+ options: {
+ presets: ['env', 'react', 'stage-2']
+ }
+ }
+ },
+ {
+ test: /\.(scss)$/,
+ use: [
+ require.resolve('style-loader'),
+ require.resolve('css-hot-loader'),
+ MiniCssExtractPlugin.loader,
+ {
+ loader: require.resolve('css-loader'),
+ options: {
+ importLoaders: 1,
+ alias: {
+ '@images': paths.globalImages,
+ }
+ },
+ },
+ require.resolve('sass-loader'),
+ {
+ loader: require.resolve('postcss-loader'),
+ options: {
+ ident: 'postcss',
+ plugins: () => [
+ autoprefixer({
+ browsers: [
+ '>1%',
+ 'last 4 versions',
+ 'Firefox ESR',
+ 'not ie < 9', // React doesn't support IE8
+ ],
+ flexbox: 'no-2009',
+ })
+ ],
+ },
+ },
+ ],
+ },
+ {
+ test: /\.(png|jpe?g|gif|svg)/,
+ use: [
+ {
+ loader: require.resolve('file-loader'),
+ options: {
+ name: 'images/[name].[ext]'
+ }
+ }
+ ]
+ },
+ ]
+ },
+ resolve: {
+ modules: ['node_modules', paths.appAssets],
+ extensions: ['*', '.js', '.jsx', '.scss', '.css'],
+ },
+ plugins: [
+ new webpack.HotModuleReplacementPlugin(),
+ new styleLintPlugin({
+ files: 'client/**/*.scss',
+ failOnError: false,
+ quiet: false,
+ }),
+ new MiniCssExtractPlugin({
+ filename: 'style.css'
+ }),
+ new HtmlWebpackPlugin({
+ template: paths.appHtml,
+ filename: 'index.html'
+ })
+ ],
+};
diff --git a/config/webpack.dev.js b/config/webpack.dev.js
new file mode 100644
index 0000000..1bbcc00
--- /dev/null
+++ b/config/webpack.dev.js
@@ -0,0 +1,19 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common');
+
+
+module.exports = merge(common, {
+ mode: 'development',
+ devtool: 'inline-source-map',
+ devServer: {
+ historyApiFallback: true,
+ stats: 'errors-only',
+ port: '8000',
+ hot: true,
+ open: true,
+ overlay:true,
+ proxy: {
+ '/api': 'http://localhost:3000'
+ }
+ }
+})
diff --git a/config/webpack.prod.js b/config/webpack.prod.js
new file mode 100644
index 0000000..fc17c03
--- /dev/null
+++ b/config/webpack.prod.js
@@ -0,0 +1,18 @@
+const paths = require('./paths');
+const merge = require('webpack-merge');
+const common = require('./webpack.common');
+const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+
+
+module.exports = merge(common, {
+ mode: 'production',
+ plugins: [
+ new CleanWebpackPlugin(['build'], {root: paths.root}),
+ new UglifyJSPlugin({
+ sourceMap: true
+ }),
+ new OptimizeCSSAssetsPlugin()
+ ]
+})
diff --git a/package.json b/package.json
new file mode 100755
index 0000000..feb1bec
--- /dev/null
+++ b/package.json
@@ -0,0 +1,84 @@
+{
+ "name": "trip-assistant",
+ "version": "1.0.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "express": "nodemon server/app.js",
+ "createTables": "node server/utils/scripts/createTables.js",
+ "clearAllTabless": "node server/utils/scripts/reCreateTables.js",
+ "reCreateTables": "npm run clearAllTabless && npm run createTables",
+ "dbseed": "node server/utils/scripts/dbSeed.js",
+ "dev": "webpack-dev-server --config ./config/webpack.dev.js",
+ "build": "webpack --config ./config/webpack.prod.js",
+ "lint": "eslint client"
+ },
+ "keywords": [],
+ "author": "Dmytro Prokopiuk Find Your Trip
+
+
+
+
+