From 753807f82d4f6fa6cd620562483957b605f21577 Mon Sep 17 00:00:00 2001 From: Stan0men Date: Tue, 17 Jul 2018 23:43:32 +0300 Subject: [PATCH 01/26] add main pages and styles --- .../Menu/components/Navigation/Navigation.jsx | 2 +- .../pages/TripDescription/TripDescription.jsx | 17 +++++++ .../TripDescription/TripDescription.scss | 3 ++ .../components/MainPage/MainPage.jsx | 47 ++++++++++++++++++ .../components/MainPage/MainPage.scss | 40 ++++++++++++++++ .../components/MainPage/package.json | 3 ++ .../components/SideBar/SideBar.jsx | 16 +++++++ .../components/SideBar/SideBar.scss | 48 +++++++++++++++++++ .../components/SideBar/package.json | 3 ++ client/pages/TripDescription/package.json | 3 ++ client/routes/index.js | 6 ++- 11 files changed, 186 insertions(+), 2 deletions(-) create mode 100644 client/pages/TripDescription/TripDescription.jsx create mode 100644 client/pages/TripDescription/TripDescription.scss create mode 100644 client/pages/TripDescription/components/MainPage/MainPage.jsx create mode 100644 client/pages/TripDescription/components/MainPage/MainPage.scss create mode 100644 client/pages/TripDescription/components/MainPage/package.json create mode 100644 client/pages/TripDescription/components/SideBar/SideBar.jsx create mode 100644 client/pages/TripDescription/components/SideBar/SideBar.scss create mode 100644 client/pages/TripDescription/components/SideBar/package.json create mode 100644 client/pages/TripDescription/package.json diff --git a/client/components/Menu/components/Navigation/Navigation.jsx b/client/components/Menu/components/Navigation/Navigation.jsx index 6acaf42..df5a314 100644 --- a/client/components/Menu/components/Navigation/Navigation.jsx +++ b/client/components/Menu/components/Navigation/Navigation.jsx @@ -10,7 +10,7 @@ import DashbordIco from 'images/dashbord.svg'; const MENU_ITEM = [ { name: 'MY PROFILE', path: '/profile', ico: UserMenuIco }, { name: 'INFO', path: '/info', ico: EnvelopeIco }, - { name: 'CONTACT', path: '/contacts', ico: EnvelopeIco }, + { name: 'TRIP_DESCRIPTION', path: '/TripDescription', ico: EnvelopeIco }, { name: 'DASHBORD', path: '/dashbord', ico: DashbordIco } ]; diff --git a/client/pages/TripDescription/TripDescription.jsx b/client/pages/TripDescription/TripDescription.jsx new file mode 100644 index 0000000..1f35ca6 --- /dev/null +++ b/client/pages/TripDescription/TripDescription.jsx @@ -0,0 +1,17 @@ +import React, { Component } from 'react'; +import './TripDescription.scss'; +import MainPage from './components/MainPage/MainPage'; +import SideBar from './components/SideBar/SideBar'; + +class TripDescription extends Component { + render() { + return ( +
+ + +
+ ); + } +} + +export default TripDescription; diff --git a/client/pages/TripDescription/TripDescription.scss b/client/pages/TripDescription/TripDescription.scss new file mode 100644 index 0000000..251f74d --- /dev/null +++ b/client/pages/TripDescription/TripDescription.scss @@ -0,0 +1,3 @@ +p { + font-size: 14px; +} diff --git a/client/pages/TripDescription/components/MainPage/MainPage.jsx b/client/pages/TripDescription/components/MainPage/MainPage.jsx new file mode 100644 index 0000000..5ba5d03 --- /dev/null +++ b/client/pages/TripDescription/components/MainPage/MainPage.jsx @@ -0,0 +1,47 @@ +import React, { Component } from 'react'; +import './MainPage.scss'; + +class MainPage extends Component { + render() { + return ( +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EmployeeSalaryBonusSupervisor
Stephen C. Cox$300$50Bob
Josephin Tan$150-Annie
Joyce Ming$200$35Andy
James A. Pentel$175$25Annie
+
+
+ ); + } +} + +export default MainPage; diff --git a/client/pages/TripDescription/components/MainPage/MainPage.scss b/client/pages/TripDescription/components/MainPage/MainPage.scss new file mode 100644 index 0000000..dc3913e --- /dev/null +++ b/client/pages/TripDescription/components/MainPage/MainPage.scss @@ -0,0 +1,40 @@ +.table { + width: 80%; + margin: 0 auto; + + table { + font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; + font-size: 14px; + text-align: left; + border-collapse: collapse; + border-radius: 5px; + box-shadow: 0 0 0 3px #f2906b; + color: #452f21; + + th { + padding: 10px 8px; + background: white; + + table th:first-child { + border-top-left-radius: 20px; + } + + table th:last-child { + border-top-right-radius: 20px; + } + + td { + padding: 8px; + background: white; + } + + table td:first-child { + border-bottom-left-radius: 20px; + } + + table td:last-child { + border-bottom-right-radius: 20px; + } + } + } +} diff --git a/client/pages/TripDescription/components/MainPage/package.json b/client/pages/TripDescription/components/MainPage/package.json new file mode 100644 index 0000000..0f4df48 --- /dev/null +++ b/client/pages/TripDescription/components/MainPage/package.json @@ -0,0 +1,3 @@ +{ + "main": "MainPage.jsx" +} \ No newline at end of file diff --git a/client/pages/TripDescription/components/SideBar/SideBar.jsx b/client/pages/TripDescription/components/SideBar/SideBar.jsx new file mode 100644 index 0000000..2c22dfb --- /dev/null +++ b/client/pages/TripDescription/components/SideBar/SideBar.jsx @@ -0,0 +1,16 @@ +import React, { Component } from 'react'; +import './SideBar.scss'; + +class SideBar extends Component { + render() { + return ( +
+
{'<'} +
Щось
+
+
+ ); + } +} + +export default SideBar; diff --git a/client/pages/TripDescription/components/SideBar/SideBar.scss b/client/pages/TripDescription/components/SideBar/SideBar.scss new file mode 100644 index 0000000..5f76789 --- /dev/null +++ b/client/pages/TripDescription/components/SideBar/SideBar.scss @@ -0,0 +1,48 @@ +.sideBar { + #panel { + position: fixed; + top: 100px; + right: 20px; + background: green; + width: 30px; + height: 40px; + font-size: 14px Arial; + color: #fff; + text-align: center; + padding: 5px; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + -o-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-border-radius: 0 0 0 0; + -moz-border-radius: 0 0 0 0; + border-radius: 10px 0 0 10px; + + #hidden_panel { + position: fixed; + top: 100px; + right: 0; + background: lavender; + color: #000; + width: 200px; + height: 150px; + padding: 10px; + text-align: left; + -webkit-transition-duration: 0.3s; + -moz-transition-duration: 0.3s; + -o-transition-duration: 0.3s; + transition-duration: 0.3s; + -webkit-border-radius: 0 5px 5px 0; + -moz-border-radius: 0 5px 5px 0; + border-radius: 0 5px 5px 0; + } + + #panel:hover { + left: 220px; + } + + #panel:hover #hidden_panel { + left: 0; + } + } +} diff --git a/client/pages/TripDescription/components/SideBar/package.json b/client/pages/TripDescription/components/SideBar/package.json new file mode 100644 index 0000000..b967f1a --- /dev/null +++ b/client/pages/TripDescription/components/SideBar/package.json @@ -0,0 +1,3 @@ +{ + "main": "TripDescription.jsx" +} \ No newline at end of file diff --git a/client/pages/TripDescription/package.json b/client/pages/TripDescription/package.json new file mode 100644 index 0000000..b967f1a --- /dev/null +++ b/client/pages/TripDescription/package.json @@ -0,0 +1,3 @@ +{ + "main": "TripDescription.jsx" +} \ No newline at end of file diff --git a/client/routes/index.js b/client/routes/index.js index aaf24b9..029b514 100644 --- a/client/routes/index.js +++ b/client/routes/index.js @@ -2,6 +2,7 @@ import React from 'react'; import Map from '../components/Map'; import Info from '../pages/Info'; import Dashbord from '../pages/Dashbord'; +import TripDescription from '../pages/TripDescription/TripDescription'; // Pages example. @@ -33,10 +34,13 @@ const Routes = [ path: '/info', component: Info }, - { path: '/dashbord', component: Dashbord + }, + { + path: '/tripdescription', + component: TripDescription } ]; From 25669178284c5f130d2f2fec015e5628b40067bf Mon Sep 17 00:00:00 2001 From: Stan0men Date: Wed, 18 Jul 2018 20:37:33 +0300 Subject: [PATCH 02/26] trouble with hide panel -_- --- .../TripDescription/components/SideBar/SideBar.jsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/client/pages/TripDescription/components/SideBar/SideBar.jsx b/client/pages/TripDescription/components/SideBar/SideBar.jsx index 2c22dfb..9f7d796 100644 --- a/client/pages/TripDescription/components/SideBar/SideBar.jsx +++ b/client/pages/TripDescription/components/SideBar/SideBar.jsx @@ -1,11 +1,19 @@ import React, { Component } from 'react'; import './SideBar.scss'; + class SideBar extends Component { + constructor() { + super(); + const style = { + display: 'none' + }; + } + render() { return (
-
{'<'} +
{'<'}
Щось
From 444eb68c57527bf6be9e5d6a1a07ca5333836498 Mon Sep 17 00:00:00 2001 From: Stan0men Date: Wed, 18 Jul 2018 23:29:31 +0300 Subject: [PATCH 03/26] add state with error --- .../components/MainPage/MainPage.jsx | 45 ++++++++++--------- .../components/SideBar/SideBar.jsx | 14 ++++-- 2 files changed, 35 insertions(+), 24 deletions(-) diff --git a/client/pages/TripDescription/components/MainPage/MainPage.jsx b/client/pages/TripDescription/components/MainPage/MainPage.jsx index 5ba5d03..a998ec6 100644 --- a/client/pages/TripDescription/components/MainPage/MainPage.jsx +++ b/client/pages/TripDescription/components/MainPage/MainPage.jsx @@ -8,34 +8,39 @@ class MainPage extends Component {
- - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + + - - - - + + + + +
EmployeeSalaryBonusSupervisorTrip dateFromToCost ₴Driver
Stephen C. Cox$300$50Bob14.08.2010ChernobulNarnia1488Stalker
Josephin Tan$150-Annie14.08.2010ChernobulNarnia1488Stalker
Joyce Ming$200$35Andy14.08.2010ChernobulNarnia1488Stalker
James A. Pentel$175$25Annie14.08.2010ChernobulNarnia1488Stalker
diff --git a/client/pages/TripDescription/components/SideBar/SideBar.jsx b/client/pages/TripDescription/components/SideBar/SideBar.jsx index 9f7d796..c43aef3 100644 --- a/client/pages/TripDescription/components/SideBar/SideBar.jsx +++ b/client/pages/TripDescription/components/SideBar/SideBar.jsx @@ -5,16 +5,22 @@ import './SideBar.scss'; class SideBar extends Component { constructor() { super(); - const style = { - display: 'none' + state = { + style: [ + { display: 'none' } + ] }; + let showPanelHandler = () => { + + }; + this.showPanelHandler = this.showPanelHandler.bind(this); } render() { return (
-
{'<'} -
Щось
+
{'<'} +
Щось
); From df9a34bd9715d467f417cb663ee838111917d622 Mon Sep 17 00:00:00 2001 From: Stan0men Date: Thu, 19 Jul 2018 10:37:13 +0300 Subject: [PATCH 04/26] add function toogglePanel --- .../components/SideBar/SideBar.jsx | 18 +++++++++--------- .../components/SideBar/SideBar.scss | 7 ++++++- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/client/pages/TripDescription/components/SideBar/SideBar.jsx b/client/pages/TripDescription/components/SideBar/SideBar.jsx index c43aef3..0ca251c 100644 --- a/client/pages/TripDescription/components/SideBar/SideBar.jsx +++ b/client/pages/TripDescription/components/SideBar/SideBar.jsx @@ -5,22 +5,22 @@ import './SideBar.scss'; class SideBar extends Component { constructor() { super(); - state = { - style: [ - { display: 'none' } - ] + this.state = { + isPanelOpen: false }; - let showPanelHandler = () => { + this.tooggelPanel = this.tooggelPanel.bind(this); + } - }; - this.showPanelHandler = this.showPanelHandler.bind(this); + tooggelPanel() { + this.setState(prevState => ({ isPanelOpen: !prevState.isPanelOpen })); } render() { + const { isPanelOpen } = this.state; return (
-
{'<'} -
Щось
+
); diff --git a/client/pages/TripDescription/components/SideBar/SideBar.scss b/client/pages/TripDescription/components/SideBar/SideBar.scss index 5f76789..e198db1 100644 --- a/client/pages/TripDescription/components/SideBar/SideBar.scss +++ b/client/pages/TripDescription/components/SideBar/SideBar.scss @@ -18,7 +18,8 @@ -moz-border-radius: 0 0 0 0; border-radius: 10px 0 0 10px; - #hidden_panel { + .hidden_panel { + display: none; position: fixed; top: 100px; right: 0; @@ -35,6 +36,10 @@ -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; + + &--active { + display: block; + } } #panel:hover { From d01b69119208a88b964974a41597aae04e36e3be Mon Sep 17 00:00:00 2001 From: Stan0men Date: Mon, 23 Jul 2018 16:52:48 +0300 Subject: [PATCH 05/26] pass json to tripListDetails --- .../pages/TripDescription/TripDescription.jsx | 29 ++++++++++--------- .../components/TripListDetails.jsx | 11 +++---- 2 files changed, 20 insertions(+), 20 deletions(-) diff --git a/client/pages/TripDescription/TripDescription.jsx b/client/pages/TripDescription/TripDescription.jsx index bd3f4cf..08b6a03 100644 --- a/client/pages/TripDescription/TripDescription.jsx +++ b/client/pages/TripDescription/TripDescription.jsx @@ -1,28 +1,31 @@ import React, { Component } from 'react'; import './TripDescription.scss'; import TripListDetails from './components/TripListDetails'; - +import feedbacksData from '../../../public/data/feedbacksData.json'; class TripDescription extends Component { - constructor() { - super(); - this.inputHandler = this.inputHandler.bind(this); - } - - inputHandler = (e) => { - console.log(e.target.value); - } - render() { return (
Here will be map
- + {feedbacksData.map((feedbackData, i) => ( + + ))}
); diff --git a/client/pages/TripDescription/components/TripListDetails.jsx b/client/pages/TripDescription/components/TripListDetails.jsx index d8c5ec1..6a940fa 100644 --- a/client/pages/TripDescription/components/TripListDetails.jsx +++ b/client/pages/TripDescription/components/TripListDetails.jsx @@ -1,22 +1,19 @@ import React, { Component } from 'react'; import './TripListDetails.scss'; -import feedbackData from '../../../../public/data/feedbacksData.json'; - class TripListDetails extends Component { - constructor() { - super(); - + constructor(props) { + super(props); this.state = { }; } - render() { + const { feedbacksData } = this.state; return (
-

some

+ {feedbacksData}
); From b0d0b0fee0912529b842fe15692f278d041da25f Mon Sep 17 00:00:00 2001 From: Stan0men Date: Tue, 24 Jul 2018 00:03:49 +0300 Subject: [PATCH 06/26] add data to tripListDetails --- .../pages/TripDescription/TripDescription.jsx | 2 +- .../components/TripListDetails.jsx | 19 +++++++++++++----- .../components/TripListDetails.scss | 20 +++++-------------- 3 files changed, 20 insertions(+), 21 deletions(-) diff --git a/client/pages/TripDescription/TripDescription.jsx b/client/pages/TripDescription/TripDescription.jsx index 08b6a03..9743717 100644 --- a/client/pages/TripDescription/TripDescription.jsx +++ b/client/pages/TripDescription/TripDescription.jsx @@ -22,7 +22,7 @@ class TripDescription extends Component { Submitbutton
-
+
{feedbacksData.map((feedbackData, i) => ( ))} diff --git a/client/pages/TripDescription/components/TripListDetails.jsx b/client/pages/TripDescription/components/TripListDetails.jsx index 6a940fa..0af9554 100644 --- a/client/pages/TripDescription/components/TripListDetails.jsx +++ b/client/pages/TripDescription/components/TripListDetails.jsx @@ -1,5 +1,6 @@ import React, { Component } from 'react'; import './TripListDetails.scss'; +import PropTypes from 'prop-types'; class TripListDetails extends Component { constructor(props) { @@ -9,15 +10,23 @@ class TripListDetails extends Component { } render() { - const { feedbacksData } = this.state; + const { feedbackData } = this.props; return ( -
-
- {feedbacksData} +
+
+ {feedbackData.userName} +
+
+ {feedbackData.name} +
+
+ {feedbackData.rating}
); } } - +TripListDetails.propTypes = { + feedbackData: PropTypes.element.isRequired +}; export default TripListDetails; diff --git a/client/pages/TripDescription/components/TripListDetails.scss b/client/pages/TripDescription/components/TripListDetails.scss index 6d970b8..b56b44f 100644 --- a/client/pages/TripDescription/components/TripListDetails.scss +++ b/client/pages/TripDescription/components/TripListDetails.scss @@ -1,19 +1,9 @@ -.trip-map { - width: 80%; - height: 200px; - margin: 0 auto; - background-color: aquamarine; -} - -.search { - width: 50%; - margin: 0 auto; - border: 1px solid black; +.triplist-wrapper { display: flex; - margin-top: 50px; + flex-direction: row; + justify-content: space-between; } -.search > input { - width: 50%; - margin: 0 auto; +.feedback-rating { + border: 1px solid black; } From 0515073916c26126f9bc0ed0289803709702c43f Mon Sep 17 00:00:00 2001 From: Stan0men Date: Tue, 24 Jul 2018 11:59:58 +0300 Subject: [PATCH 07/26] add clearInput --- client/pages/Info/Info.jsx | 4 +-- .../pages/TripDescription/TripDescription.jsx | 28 +++++++++++++++---- .../TripDescription/TripDescription.scss | 16 ++++++++++- ...Details.jsx => TripDescriptionDetails.jsx} | 10 +++---- ...tails.scss => TripDescriptionDetails.scss} | 5 +--- 5 files changed, 45 insertions(+), 18 deletions(-) rename client/pages/TripDescription/components/{TripListDetails.jsx => TripDescriptionDetails.jsx} (72%) rename client/pages/TripDescription/components/{TripListDetails.scss => TripDescriptionDetails.scss} (66%) diff --git a/client/pages/Info/Info.jsx b/client/pages/Info/Info.jsx index 9987a42..14baed7 100644 --- a/client/pages/Info/Info.jsx +++ b/client/pages/Info/Info.jsx @@ -16,9 +16,7 @@ const Info = () => (


- +