Skip to content

Commit

Permalink
Several changes
Browse files Browse the repository at this point in the history
  • Loading branch information
=Morten Jansrud committed Jan 24, 2017
1 parent 492c0e5 commit c0b5d7c
Show file tree
Hide file tree
Showing 2 changed files with 213 additions and 142 deletions.
3 changes: 3 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,11 @@
"react-scripts": "0.8.5"
},
"dependencies": {
"chart.js": "^1.1.1",
"react": "^15.4.2",
"react-bootstrap": "^0.30.7",
"react-chartjs": "^0.8.0",
"react-d3-basic": "^1.6.11",
"react-dom": "^15.4.2"
},
"scripts": {
Expand Down
352 changes: 210 additions & 142 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,168 +1,236 @@
import React, { Component, } from 'react';
import React, { Component} from 'react';
import {BarChart, PieChart} from 'react-easy-chart';
import {Table} from 'react-bootstrap';
import ReactHtmlParser from 'react-html-parser';
import './App.css';
import moment from 'moment';
import 'moment/locale/nb';
import './App.css';

class App extends Component {
constructor(props){
super(props);
moment.defineLocale('nb-fix', {
parentLocale: 'nb',
relativeTime : {
future : ' %s',},
});
this.state = {
toCentrum: [],
fromCentrum: [],
weather: '',
};
constructor(props){
super(props);
moment.defineLocale('nb-fix', {
parentLocale: 'nb',
relativeTime : {
future : ' %s',},
});
this.state = {
toCentrum: [],
fromCentrum: [],
weather: [],
weatherStations: [],
orders: [],
statistics: []
};
}

componentWillMount(){
var app = this;
app.loadToStopData();
app.loadFromStopData();
app.loadWeatherData();
setInterval(() =>{
console.log('fetching');
app.loadToStopData();
app.loadFromStopData();
}, 10000);
}
var app = this;
app.loadToStopData();
app.loadFromStopData();
app.loadWeatherData();
app.loadOrdersData();
app.loadStatisticsData();
setInterval(() =>{
console.log('Fetching data');
app.loadToStopData();
app.loadFromStopData();
app.loadOrdersData();
app.loadStatisticsData();
}, 10000);

}

loadToStopData(){
fetch('https://api.founder.no/atb/stop/16011404')
.then((response) => response.json())
.then((responseJson) => {
this.setState({toCentrum: responseJson});
})
.catch((error) => {
console.error(error);
})
fetch('https://api.founder.no/atb/stop/16011404')
.then((response) => response.json())
.then((responseJson) => {
this.setState({toCentrum: responseJson.next.slice(0, 6)});
})
.catch((error) => {
//console.error(error);
})
}

loadFromStopData(){
fetch('https://api.founder.no/atb/stop/16010404')
.then((response) => response.json())
.then((responseJson) => {
this.setState({fromCentrum: responseJson});
})
.catch((error) => {
console.error(error);
})
fetch('https://api.founder.no/atb/stop/16010404')
.then((response) => response.json())
.then((responseJson) => {
this.setState({fromCentrum: responseJson.next.slice(0, 6)});
}).catch((error) => {
//console.error(error);
})
}

loadWeatherData(){
fetch('https://api.founder.no/yr/weather')
.then((response) => response.json())
.then((responseJson) => {
this.setState({weather: responseJson});
console.log(responseJson);
})
.catch((error) => {
console.error(error);
})
fetch('https://api.founder.no/yr/weather')
.then((response) => response.json())
.then((responseJson) => {
this.setState({weather: responseJson});
//console.log(responseJson);
}).catch((error) => {
console.error(error);
})
}

loadOrdersData(){
fetch('https://api.founder.no/bar/orders_get')
.then((response) => response.json())
.then((responseJson) => {
this.setState({orders: responseJson});
}).catch((error) => {
console.error(error);
})
}

loadStatisticsData(){
fetch('https://api.founder.no/bar/orders_statistics')
.then((response) => response.json())
.then((responseJson) => {
this.setState({statistics: responseJson});
//console.log(responseJson);
}).catch((error) => {
console.error(error);
})
}

getWeather(time){
var degreeSign = String.fromCharCode(parseInt("00B0", 16));
var from = this.state.weather.forecast.tabular.time[time]["@attributes"].from.substring(11,16);
var to = this.state.weather.forecast.tabular.time[time]["@attributes"].to.substring(11,16);
//var date = weather.forecast.tabular.time[0]["@attributes"].from.substring(11,16);
var symbol = this.state.weather.forecast.tabular.time[time].symbol["@attributes"].name;
var windSpeed = this.state.weather.forecast.tabular.time[time].windSpeed["@attributes"].name;
var windDir = this.state.weather.forecast.tabular.time[time].windDirection["@attributes"].name.toLowerCase();
var temp = this.state.weather.forecast.tabular.time[time].temperature["@attributes"].value;
var iMorgen = moment().isBefore(moment(this.state.weather.forecast.tabular.time[time]["@attributes"].from, 'YYYY-MM-DD HH:mm'), 'day') > 0 ? ' i morgen' : '';
return from + '-' + to + iMorgen + ': ' + symbol + ', ' + windSpeed + ' fra ' + windDir + '. ' + temp + degreeSign +'C.';
if(this.state.weather.forecast){
var degreeSign = String.fromCharCode(parseInt("00B0", 16));
var from = this.state.weather.forecast.tabular.time[time]["@attributes"].from.substring(11,16);
var to = this.state.weather.forecast.tabular.time[time]["@attributes"].to.substring(11,16);
var symbol = this.state.weather.forecast.tabular.time[time].symbol["@attributes"].name;
var windSpeed = this.state.weather.forecast.tabular.time[time].windSpeed["@attributes"].name;
var windDir = this.state.weather.forecast.tabular.time[time].windDirection["@attributes"].name.toLowerCase();
var temp = this.state.weather.forecast.tabular.time[time].temperature["@attributes"].value;
var iMorgen = moment().isBefore(moment(this.state.weather.forecast.tabular.time[time]["@attributes"].from, 'YYYY-MM-DD HH:mm'), 'day') > 0 ? ' i morgen' : '';
return from + '-' + to + iMorgen + ': ' + symbol + ', ' + windSpeed + ' fra ' + windDir + '. ' + temp + degreeSign +'C.';
}
}

render() {
if(this.state.toCentrum.next && this.state.fromCentrum.next){
var toCentrum = this.state.toCentrum.next.slice(0,6);
var fromCentrum = this.state.fromCentrum.next.slice(0,6);
var weather = this.state.weather;
var now = moment().format('HH:mm')
var degreeSign = String.fromCharCode(parseInt("00B0", 16));
return (
<div className='container'>
<div className='flex-container'>
<h1 className='clock'>{now}</h1>
<div className='temp-container'>
<div style={{textAlign: 'center', fontSize: 22}}>inne: 22{degreeSign}C</div>
<div style={{textAlign: 'center', fontSize: 22}}>ute: {weather.observations.weatherstation[0].temperature['@attributes'].value}{degreeSign}C</div>
</div>
</div>
<h1>Vær i {weather.location.name}</h1>
<p>{this.getWeather(0)}</p>
<p>{this.getWeather(1)}</p>
<p>{this.getWeather(2)}</p>
<h1 style={{marginTop: 50}}>Til Sentrum</h1>
<Table condensed hover responsive>
<tbody>
<td className='col-md-3'>Buss</td>
<td className='col-md-5'>Mot</td>
<td className='col-md-4' style={{textAlign:'right'}}>Ankomst</td>
{toCentrum.map((bus)=>{
let arrival = new Date(bus.t.substring(6,10) + "-" + bus.t.substring(3,5) + "-" + bus.t.substring(0,2) + " " + bus.t.substring(11,13) + ":" + bus.t.substring(14,16));
if(arrival - new Date() > 0){
if(arrival - new Date() < 30000){
return(<tr>
<td className='col-md-3'>{bus.l}</td>
<td className='col-md-5'>{bus.d}</td>
<td className='col-md-4' style={{textAlign:'right'}}>nå</td>
</tr>);
}
return(<tr>
<td className='col-md-3'>{bus.l}</td>
<td className='col-md-5'>{bus.d}</td>
<td className='col-md-4' style={{textAlign:'right'}}>{moment(arrival).fromNow()}</td>
</tr>);
}
})}
</tbody>
</Table>
<h1>Fra Sentrum</h1>
<Table condensed hover responsive>
<tbody>
<td className='col-md-3'>Buss</td>
<td className='col-md-5'>Mot</td>
<td className='col-md-4' style={{textAlign:'right'}}>Ankomst</td>
{fromCentrum.map((bus)=>{
let arrival = new Date(bus.t.substring(6,10) + "-" + bus.t.substring(3,5) + "-" + bus.t.substring(0,2) + " " + bus.t.substring(11,13) + ":" + bus.t.substring(14,16));
if(arrival - new Date() > 0){
if(arrival - new Date() < 30000){
return(<tr>
<td className='col-md-3'>{bus.l}</td>
<td className='col-md-5'>{bus.d}</td>
<td className='col-md-4' style={{textAlign:'right'}}>nå</td>
</tr>);
}
return(<tr>
<td className='col-md-3'>{bus.l}</td>
<td className='col-md-5'>{bus.d}</td>
<td className='col-md-4' style={{textAlign:'right'}}>{moment(arrival).fromNow()}</td>
</tr>);
}
})}
</tbody>
</Table>
</div>
);
}
else{
return(
<div className = "App" >
<div className = "container" >
<p className = "App-intro" >
Loading...
</p>
console.log("Rendering bitches");
var toCentrum = this.state.toCentrum;
var fromCentrum = this.state.fromCentrum;
var weather = this.state.weather;
var orders = this.state.orders;
var statistics = this.state.statistics;

var now = moment().format('HH:mm');
var degreeSign = String.fromCharCode(parseInt("00B0", 16));

var data_bar = [];
var data_pie = [];
var barchart;
var piechart;
var temperature;
var forecast;

if(statistics.length){
statistics.map(function(statistic){
data_bar.push({x: statistic.lastname,y: statistic.count});
data_pie.push({key: statistic.lastname + ' (' + statistic.count +')', value: statistic.count});
})
}
if(weather.observations){
temperature = weather.observations.weatherstation[0].temperature['@attributes'].value + degreeSign + 'C';
}
if(weather.forecast){
forecast = 'Vær i ' + weather.location.name;
}



return (
<div className='container'>
<div className='flex-container'>
<h1 className='clock'>{now}</h1>
<div className='temp-container'>
<div style={{textAlign: 'center', fontSize: 22}}>inne: 22{degreeSign}C</div>
<div style={{textAlign: 'center', fontSize: 22}}>ute: {temperature}</div>
</div>
</div>
<h1>{forecast}</h1>
<p>{this.getWeather(0)}</p>
<p>{this.getWeather(1)}</p>
<p>{this.getWeather(2)}</p>
<h1 style={{marginTop: 50}}>Til Sentrum</h1>
<Table condensed responsive>
<tbody>
<tr>
<td className='col-md-3'>Buss</td>
<td className='col-md-5'>Mot</td>
<td className='col-md-4' style={{textAlign:'right'}}>Ankomst</td>
</tr>
{toCentrum.map((bus) => {
let arrival = new Date(bus.t.substring(6, 10) + "-" + bus.t.substring(3, 5) + "-" + bus.t.substring(0, 2) + " " + bus.t.substring(11, 13) + ":" + bus.t.substring(14, 16));
if (arrival - new Date() > 0) {
if (arrival - new Date() < 30000) {
return (
<tr>
<td className='col-md-3'>{bus.l}</td>
<td className='col-md-5'>{bus.d}</td>
<td className='col-md-4' style={{textAlign: 'right'}}>nå</td>
</tr>);
}
return (
<tr>
<td className='col-md-3'>{bus.l}</td>
<td className='col-md-5'>{bus.d}</td>
<td className='col-md-4'
style={{textAlign: 'right'}}>{moment(arrival).fromNow()}</td>
</tr>);
}
})}
</tbody>
</Table>
<h1>Fra Sentrum</h1>
<Table condensed responsive>
<tbody>
<tr>
<td className='col-md-3'>Buss</td>
<td className='col-md-5'>Mot</td>
<td className='col-md-4' style={{textAlign:'right'}}>Ankomst</td>
</tr>
{fromCentrum.map((bus)=> {
let arrival = new Date(bus.t.substring(6, 10) + "-" + bus.t.substring(3, 5) + "-" + bus.t.substring(0, 2) + " " + bus.t.substring(11, 13) + ":" + bus.t.substring(14, 16));
if (arrival - new Date() > 0) {
if (arrival - new Date() < 30000) {
return (
<tr>
<td className='col-md-3'>{bus.l}</td>
<td className='col-md-5'>{bus.d}</td>
<td className='col-md-4' style={{textAlign: 'right'}}>nå</td>
</tr>);
}
return (
<tr>
<td className='col-md-3'>{bus.l}</td>
<td className='col-md-5'>{bus.d}</td>
<td className='col-md-4'
style={{textAlign: 'right'}}>{moment(arrival).fromNow()}</td>
</tr>);
}
})}
</tbody>
</Table>
<h1>Fra baren</h1>
<Table condensed responsive>
<tbody>
{orders.map((order)=> {
return (
<tr>
<td className='col-md-3'>{order.lastname}</td>
<td className='col-md-5'>{order.drink_name}</td>
<td className='col-md-4' style={{textAlign: 'right'}}>I kø</td>
</tr>);
})}
</tbody>
</Table>
<div className='col-md-6'></div>
<div className='col-md-6'><PieChart padding={50} labels styles={{ '.chart_lines': {strokeWidth: 0},'.chart_text': {fontFamily: 'serif', fontSize: '0.1em', fill: '#fff'}}} data={data_pie} /></div>

</div>
</div>
)
}
)
}
}

Expand Down

0 comments on commit c0b5d7c

Please sign in to comment.