Skip to content

Commit

Permalink
Merge pull request #4 from oSoc19/fixed/ui-overview
Browse files Browse the repository at this point in the history 
Fixed/ui overview
  • Loading branch information
@ClementJanssens
ClementJanssens authored Jul 4, 2019
2 parents d65fe7b + 6965eba commit 4f78e6c
Show file tree
Hide file tree
Showing 11 changed files with 284 additions and 83 deletions.
75 changes: 75 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
"react-chartkick": "^0.3.1",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.1",
"react-scripts": "3.0.1"
"react-scripts": "3.0.1",
"react-transition-group": "^4.2.1"
},
"scripts": {
"start": "react-scripts start",
Expand Down
79 changes: 79 additions & 0 deletions src/components/Animations.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
/* Fade effect */

.fade-enter {
opacity: 0;
}

.fade-enter-active {
opacity: 1;
transition: all 300ms linear;
}

.fade-exit {
opacity: 1;
}

.fade-exit-active {
opacity: 0;
transition: all 300ms linear;
}

.fade-exit-done {
opacity: 0;
}

.fade-appear {
opacity: 0;
}

.fade-appear-active {
opacity: 1;
transition: all 300ms linear;
}

/* Slide effect */

.slide-enter {
width: 0px;
overflow: hidden;
float: left;
}

.slide-enter-active {
width: 40px;
transition: all 100ms linear;
overflow: hidden;
float: left;
}

.slide-exit {
width: 40px;
overflow: hidden;
float: left;
}

.slide-exit-active {
width: 0px;
transition: all 100ms linear;
overflow: hidden;
float: left;
}

.slide-exit-done {
width: 0px;
overflow: hidden;
float: left;
}

.slide-appear {
width: 0px;
overflow: hidden;
float: left;
}

.slide-appear-active {
width: 100px;
transition: all 100ms linear;
overflow: hidden;
float: left;
}
29 changes: 15 additions & 14 deletions src/components/DirectionCollection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { Component } from 'react'
import DirectionItem from './DirectionItem';

class DirectionCollection extends Component {
constructor(props){
constructor(props) {
super(props);
this.state = {
error: null,
Expand All @@ -12,6 +12,7 @@ class DirectionCollection extends Component {
}

componentDidMount() {

for(let i=0; i < 5; i++) {
fetch("https://stunning-voyageurs-87289.herokuapp.com/delay/station")
.then( response => response.json())
Expand All @@ -24,24 +25,24 @@ class DirectionCollection extends Component {
}));
},

// Handle error
(error) => {
this.setState({
isReady: true,
error: 'Error occurred while fetching the data!'
})
},
)
// Handle error
(error) => {
this.setState({
isReady: true,
error: 'Error occurred while fetching the data!'
})
},
)
}
}

render() {
const {error, isReady, predictions} = this.state;
if(error) {
const { error, isReady, predictions } = this.state;
if (error) {
console.log("Error loading");
return <div>Error!</div>
}
else if(!isReady) {
else if (!isReady) {
console.log("Loading data...");
return <div>Loading...</div>
}
Expand All @@ -50,8 +51,8 @@ class DirectionCollection extends Component {
return (
<div className='direction-collection'>
{
predictions.map(prediction =>(
<DirectionItem delay_probability={prediction.delay_probability} average_delay={prediction.average_delay} />
predictions.map((prediction, index) => (
<DirectionItem key={index} delay_probability={prediction.delay_probability} average_delay={prediction.average_delay} />
))
}
</div>
Expand Down
115 changes: 59 additions & 56 deletions src/components/DirectionItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { Component } from 'react'
import { Timeline } from 'antd'
import WhiteWarningIcon from '../images/white-warning.png'
import DirectionChart from './DirectionChart.js'
import { CSSTransition } from 'react-transition-group'

class DirectionItem extends Component {
constructor(props) {
Expand All @@ -17,74 +18,76 @@ class DirectionItem extends Component {

render() {
return (
<div className='direction-item'>
<h2>Vilvoorde → Gent-Sint-Pieters</h2>
<CSSTransition in={true} appear={true} timeout={300} classNames='fade'>
<div className='direction-item'>
<h2>Vilvoorde → Gent-Sint-Pieters</h2>

<div className='details'>
{
this.props.delay_probability > 20?
<div className='important-sign'>
<img src={WhiteWarningIcon} alt='important notice' />
</div>
: null
}
<div className='details'>
{
this.props.delay_probability > 20 ?
<div className='important-sign'>
<img src={WhiteWarningIcon} alt='important notice' />
</div>
: null
}

<div className='inside-content'>
<Timeline>
<Timeline.Item color="blue">
<h3>Vilvoorde</h3>
<div className='station-informations'>
<div className='from'>
<p>15:09</p>
<p>Platform <b>5</b></p>
</div>
<div className='inside-content'>
<Timeline>
<Timeline.Item color="blue">
<h3>Vilvoorde</h3>
<div className='station-informations'>
<div className='from'>
<p>15:09</p>
<p>Platform <b>5</b></p>
</div>

<div className='to'>
<p>15:12</p>
<p>Platform <b>11</b></p>
<div className='to'>
<p>15:12</p>
<p>Platform <b>11</b></p>
</div>
</div>
</div>
</Timeline.Item>
</Timeline.Item>

<Timeline.Item color="blue">
<h3>Brussel-Zuid</h3>
<div className='station-informations'>
<div className='from'>
<p>15:09</p>
<p>Platform <b>14</b></p>
<Timeline.Item color="blue">
<h3>Brussel-Zuid</h3>
<div className='station-informations'>
<div className='from'>
<p>15:09</p>
<p>Platform <b>14</b></p>
</div>
</div>
</div>
</Timeline.Item>
</Timeline.Item>

<Timeline.Item color={this.props.delay_probability > 20? "orange": "blue"}>
<h3>Gent-Sint-Pieters</h3>
<div className='station-informations'>
<div className='from'>
<p>15:09</p>
<p>Platform <b>3</b></p>
<Timeline.Item color={this.props.delay_probability > 20 ? "orange" : "blue"}>
<h3>Gent-Sint-Pieters</h3>
<div className='station-informations'>
<div className='from'>
<p>15:09</p>
<p>Platform <b>3</b></p>
</div>
</div>
</div>
</Timeline.Item>

</Timeline>
</Timeline.Item>

{
this.props.delay_probability > 20?
<div>
<div className='last-direction-notice' onClick={() => this.toggleChart()} >
<div className='last-direction-notice-icon' />
<p>You <b>{this.props.delay_probability > 50? 'will probably': 'might'}</b> arrive too late with approximately <b>{this.props.average_delay} min.</b> delay.</p>
</div>
</Timeline>

{
this.state.chartVisible? <DirectionChart />: null
}
</div>
: null
}
{
this.props.delay_probability > 20 ?
<div>
<div className='last-direction-notice' onClick={() => this.toggleChart()} >
<div className='last-direction-notice-icon' />
<p>You <b>{this.props.delay_probability > 50 ? 'will probably' : 'might'}</b> arrive too late with approximately <b>{this.props.average_delay} min.</b> delay.</p>
</div>

{
this.state.chartVisible ? <DirectionChart /> : null
}
</div>
: null
}
</div>
</div>
</div>
</div>
</CSSTransition>
)
}
}
Expand Down
Loading

0 comments on commit 4f78e6c

Please sign in to comment.