Merge pull request #2 from oSoc19/feature/fetch-data

Connecting back end to front end
oSoc19 · Jul 4, 2019 · bf52145 · bf52145
2 parents ee76d8b + c30eda8
commit bf52145
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 20 deletions.
diff --git a/src/components/DirectionCollection.js b/src/components/DirectionCollection.js
@@ -2,13 +2,61 @@ import React, { Component } from 'react'
 import DirectionItem from './DirectionItem';
 
 class DirectionCollection extends Component {
+  constructor(props){
+        super(props);
+        this.state = {
+            error: null,
+            isReady: false,
+            predictions: []
+        };
+    }
+
+    componentDidMount() {
+        for(let i=0; i < 5; i++) {
+            fetch("http://127.0.0.1:8000/delay/station")
+            .then( response => response.json())
+            .then(
+                // Handle the result
+                (result) => {
+                    this.setState(prevState => ({
+                        isReady : true,
+                        predictions: [...prevState.predictions, result]
+                    }));
+                },
+
+                // Handle error 
+                (error) => {
+                    this.setState({
+                        isReady: true,
+                        error: 'Error occurred while fetching the data!'
+                    })
+                },
+            )
+        }
+    }
+
     render() {
-        return (
-            <div className='direction-collection'>
-                <DirectionItem />
-                <DirectionItem />
-            </div>
-        )
+        const {error, isReady, predictions} = this.state;
+        if(error) {
+            console.log("Error loading");
+            return <div>Error!</div>
+        }
+        else if(!isReady) {
+            console.log("Loading data...");
+            return <div>Loading...</div>
+        }
+        else {
+            console.log(JSON.stringify(predictions))
+            return (
+                <div className='direction-collection'>
+                    {
+                        predictions.map(prediction =>( 
+                            <DirectionItem delay_probability={prediction.delay_probability} average_delay={prediction.average_delay} />
+                        ))
+                    }
+                </div>
+            )
+        }
     }
 }
 

diff --git a/src/components/DirectionItem.js b/src/components/DirectionItem.js
@@ -21,9 +21,13 @@ class DirectionItem extends Component {
                 <h2>Vilvoorde → Gent-Sint-Pieters</h2>
 
                 <div className='details'>
-                    <div className='important-sign'>
-                        <img src={WhiteWarningIcon} alt='important notice' />
-                    </div>
+                    {
+                        this.props.delay_probability > 20?
+                        <div className='important-sign'>
+                            <img src={WhiteWarningIcon} alt='important notice' />
+                        </div>
+                        : null
+                    }
 
                     <div className='inside-content'>
                         <Timeline>
@@ -32,12 +36,12 @@ class DirectionItem extends Component {
                                 <div className='station-informations'>
                                     <div className='from'>
                                         <p>15:09</p>
-                                        <p>Plateform <b>5</b></p>
+                                        <p>Platform <b>5</b></p>
                                     </div>
 
                                     <div className='to'>
                                         <p>15:12</p>
-                                        <p>Plateform <b>11</b></p>
+                                        <p>Platform <b>11</b></p>
                                     </div>
                                 </div>
                             </Timeline.Item>
@@ -47,30 +51,36 @@ class DirectionItem extends Component {
                                 <div className='station-informations'>
                                     <div className='from'>
                                         <p>15:09</p>
-                                        <p>Plateform <b>14</b></p>
+                                        <p>Platform <b>14</b></p>
                                     </div>
                                 </div>
                             </Timeline.Item>
 
-                            <Timeline.Item color="orange">
+                            <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>Plateform <b>3</b></p>
+                                        <p>Platform <b>3</b></p>
                                     </div>
                                 </div>
                             </Timeline.Item>
 
                         </Timeline>
 
-                        <div className='last-direction-notice' onClick={() => this.toggleChart()} >
-		            <div className='last-direction-notice-icon'  />
-                            <p>You will probably arrive too late with approximately 16 - 20 min. delay</p>
-                        </div>
-
                         {
-                            this.state.chartVisible? <DirectionChart />: 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>