From c4aec1ce04dc5ccd02af32bd11b2bd897372671b Mon Sep 17 00:00:00 2001 From: Norwin Roosen Date: Fri, 22 Jun 2018 00:34:03 +0200 Subject: [PATCH] fix this thing - add PM10 + PM2.5 sensors - rebrand / translate texts to german - make it work with current API TODO: - proper translation service? - load sensors from API instead of hardcode - make box an URL param - make it work with current node - sync scroll between charts --- app/CNAME | 1 - app/assets/scripts/actions/action-creators.js | 12 +++-- app/assets/scripts/actions/action-types.js | 6 +++ .../scripts/components/charts/chart-line.js | 5 +- .../scripts/components/sensor-widget.js | 8 +-- app/assets/scripts/config/production.js | 17 +++--- app/assets/scripts/reducers/reducer.js | 6 ++- app/assets/scripts/utils/format.js | 2 +- app/assets/scripts/views/app.js | 7 +-- app/assets/scripts/views/home.js | 52 ++++++++++++++++--- app/assets/styles/_base.scss | 8 ++- app/index.html | 14 ++--- 12 files changed, 99 insertions(+), 39 deletions(-) delete mode 100644 app/CNAME diff --git a/app/CNAME b/app/CNAME deleted file mode 100644 index 9fa9ef8..0000000 --- a/app/CNAME +++ /dev/null @@ -1 +0,0 @@ -sense.devseed.com \ No newline at end of file diff --git a/app/assets/scripts/actions/action-creators.js b/app/assets/scripts/actions/action-creators.js index 5101a04..3b08198 100644 --- a/app/assets/scripts/actions/action-creators.js +++ b/app/assets/scripts/actions/action-creators.js @@ -31,14 +31,20 @@ export function fetchSensorData (sensor, toDate) { } return response.json(); }) + .then(json => { + return json.sort((a, b) => { + return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime(); + }); + }) .then(json => { dispatch(receiveSensorData(sensor, json)); // setTimeout(() => { // dispatch(receiveSensorData(sensor, json)); - // }, Math.ceil(Math.random() * 5000)); - }, e => { + // }, Math.ceil(Math.random() * 2000)); + }) + .catch(e => { console.log('e', e); - return dispatch(receiveSensorData(null, null, 'Data not available')); + return dispatch(receiveSensorData(sensor, null, 'Data not available')); }); }; } diff --git a/app/assets/scripts/actions/action-types.js b/app/assets/scripts/actions/action-types.js index 8ff729d..4549a0a 100644 --- a/app/assets/scripts/actions/action-types.js +++ b/app/assets/scripts/actions/action-types.js @@ -13,3 +13,9 @@ export const RECEIVE_SENSOR_DATA_UV = 'RECEIVE_SENSOR_DATA_UV'; export const REQUEST_SENSOR_DATA_HUMIDITY = 'REQUEST_SENSOR_DATA_HUMIDITY'; export const RECEIVE_SENSOR_DATA_HUMIDITY = 'RECEIVE_SENSOR_DATA_HUMIDITY'; + +export const REQUEST_SENSOR_DATA_PM10 = 'REQUEST_SENSOR_DATA_PM10'; +export const RECEIVE_SENSOR_DATA_PM10 = 'RECEIVE_SENSOR_DATA_PM10'; + +export const REQUEST_SENSOR_DATA_PM25 = 'REQUEST_SENSOR_DATA_PM25'; +export const RECEIVE_SENSOR_DATA_PM25 = 'RECEIVE_SENSOR_DATA_PM25'; diff --git a/app/assets/scripts/components/charts/chart-line.js b/app/assets/scripts/components/charts/chart-line.js index 25d9d07..0985b5d 100644 --- a/app/assets/scripts/components/charts/chart-line.js +++ b/app/assets/scripts/components/charts/chart-line.js @@ -23,7 +23,6 @@ var LineChart = React.createClass({ }, componentDidMount: function () { - // console.log('LineChart componentDidMount'); // Debounce event. this.onWindowResize = _.debounce(this.onWindowResize, 200); @@ -38,13 +37,11 @@ var LineChart = React.createClass({ }, componentWillUnmount: function () { - // console.log('LineChart componentWillUnmount'); window.removeEventListener('resize', this.onWindowResize); this.chart.destroy(); }, - componentDidUpdate: function (prevProps/* prevState */) { - console.log('LineChart componentDidUpdate'); + componentDidUpdate: function (prevProps) { this.chart.pauseUpdate(); if (prevProps.data !== this.props.data) { this.chart.data(this.props.data); diff --git a/app/assets/scripts/components/sensor-widget.js b/app/assets/scripts/components/sensor-widget.js index 76fb8b7..850159e 100644 --- a/app/assets/scripts/components/sensor-widget.js +++ b/app/assets/scripts/components/sensor-widget.js @@ -60,12 +60,14 @@ var SensorWidget = React.createClass({ data={plotData} /> ) : null} - {!plotData.length && fetching ?

Loading Data...

: null} + {!plotData.length ?

+ {fetching ? 'Lade Daten...' : 'Keine Daten verfügbar'} +

: null}
diff --git a/app/assets/scripts/config/production.js b/app/assets/scripts/config/production.js index 6ead0ee..1771568 100644 --- a/app/assets/scripts/config/production.js +++ b/app/assets/scripts/config/production.js @@ -4,14 +4,17 @@ */ module.exports = { environment: 'production', - api: 'http://opensensemap.org:8000', + api: 'https://api.opensensemap.org', + title: 'Begga Weer', senseBox: { - id: '570629b945fd40c8197462fb', - 'sensorId--uv': '570629b945fd40c8197462fd', - 'sensorId--luminosity': '570629b945fd40c8197462fe', - 'sensorId--pressure': '570629b945fd40c8197462ff', - 'sensorId--humidity': '570629b945fd40c819746300', - 'sensorId--temperature': '570629b945fd40c819746301' + id: '5b26181b1fef04001b69093c', + 'sensorId--pm25': '5b26181b1fef04001b69093d', + 'sensorId--pm10': '5b26181b1fef04001b69093e', + 'sensorId--uv': '5b26181b1fef04001b69093f', + 'sensorId--luminosity': '5b26181b1fef04001b690940', + 'sensorId--pressure': '5b26181b1fef04001b690941', + 'sensorId--humidity': '5b26181b1fef04001b690942', + 'sensorId--temperature': '5b26181b1fef04001b690943' } }; diff --git a/app/assets/scripts/reducers/reducer.js b/app/assets/scripts/reducers/reducer.js index ae0eeed..db20b4e 100644 --- a/app/assets/scripts/reducers/reducer.js +++ b/app/assets/scripts/reducers/reducer.js @@ -29,6 +29,8 @@ const sensorLuminosity = sensorReducerFactory('luminosity'); const sensorPressure = sensorReducerFactory('pressure'); const sensorHumidity = sensorReducerFactory('humidity'); const sensorTemperature = sensorReducerFactory('temperature'); +const sensorPm10 = sensorReducerFactory('pm10'); +const sensorPm25 = sensorReducerFactory('pm25'); export default combineReducers({ routing: routeReducer, @@ -36,5 +38,7 @@ export default combineReducers({ sensorLuminosity, sensorPressure, sensorHumidity, - sensorTemperature + sensorTemperature, + sensorPm10, + sensorPm25, }); diff --git a/app/assets/scripts/utils/format.js b/app/assets/scripts/utils/format.js index fa2b470..ddd401f 100644 --- a/app/assets/scripts/utils/format.js +++ b/app/assets/scripts/utils/format.js @@ -9,7 +9,7 @@ module.exports.numDisplay = function (n, dec = 2, suffix = '', nan = '--') { }; module.exports.formatDate = function (date) { - let months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + let months = ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']; let hour = date.getHours(); hour = hour < 10 ? `0${hour}` : hour; let minute = date.getMinutes(); diff --git a/app/assets/scripts/views/app.js b/app/assets/scripts/views/app.js index 78f2a44..f020e37 100644 --- a/app/assets/scripts/views/app.js +++ b/app/assets/scripts/views/app.js @@ -1,5 +1,6 @@ 'use strict'; import React from 'react'; +import config from '../config'; var App = React.createClass({ displayName: 'App', @@ -15,8 +16,8 @@ var App = React.createClass({
-

Devseed Sense Lisbon - {/* Glacial Inferno */} +

+ {config.title}

@@ -26,7 +27,7 @@ var App = React.createClass({ {this.props.children} ); diff --git a/app/assets/scripts/views/home.js b/app/assets/scripts/views/home.js index 5c2e036..4e04e49 100644 --- a/app/assets/scripts/views/home.js +++ b/app/assets/scripts/views/home.js @@ -26,7 +26,9 @@ var Home = React.createClass({ sensorLuminosity: sensorProps, sensorPressure: sensorProps, sensorHumidity: sensorProps, - sensorTemperature: sensorProps + sensorTemperature: sensorProps, + sensorPm10: sensorProps, + sensorPm25: sensorProps, }, // Having measurements every minute is too much. Group them. @@ -42,7 +44,7 @@ var Home = React.createClass({ prepareData: function (rawData) { var data = null; - if (rawData) { + if (rawData && rawData.length) { data = []; rawData[0].value = +rawData[0].value; let bucket = [rawData[0]]; @@ -127,6 +129,8 @@ var Home = React.createClass({ this.props._requestSensorData('uv', daysAgo3); this.props._requestSensorData('luminosity', daysAgo3); this.props._requestSensorData('pressure', daysAgo3); + this.props._requestSensorData('pm10', daysAgo3); + this.props._requestSensorData('pm25', daysAgo3); }, componentDidMount: function () { @@ -148,6 +152,8 @@ var Home = React.createClass({ let sensorUvData = this.prepareData(this.props.sensorUv.data); let sensorLuminosityData = this.prepareData(this.props.sensorLuminosity.data); let sensorPressureData = this.prepareData(this.props.sensorPressure.data); + let sensorPm10Data = this.prepareData(this.props.sensorPm10.data); + let sensorPm25Data = this.prepareData(this.props.sensorPm25.data); return (
@@ -167,7 +173,7 @@ var Home = React.createClass({ className='card--temp' fetching={this.props.sensorTemperature.fetching} fetched={this.props.sensorTemperature.fetched} - title='Temperature' + title='Temperatur' lastReading={sensorTemperatureData.last} avgs={sensorTemperatureData.avgs} plotData={sensorTemperatureData.data} @@ -181,7 +187,7 @@ var Home = React.createClass({ className='card--hum' fetching={this.props.sensorHumidity.fetching} fetched={this.props.sensorHumidity.fetched} - title='Humidity' + title='rel. Luftfeuchte' lastReading={sensorHumidityData.last} avgs={sensorHumidityData.avgs} plotData={sensorHumidityData.data} @@ -195,7 +201,7 @@ var Home = React.createClass({ className='card--uv' fetching={this.props.sensorUv.fetching} fetched={this.props.sensorUv.fetched} - title='Uv light' + title='Uv Licht' lastReading={sensorUvData.last} avgs={sensorUvData.avgs} plotData={sensorUvData.data} @@ -209,7 +215,7 @@ var Home = React.createClass({ className='card--lux' fetching={this.props.sensorLuminosity.fetching} fetched={this.props.sensorLuminosity.fetched} - title='Luminosity' + title='Helligkeit' lastReading={sensorLuminosityData.last} avgs={sensorLuminosityData.avgs} plotData={sensorLuminosityData.data} @@ -223,7 +229,7 @@ var Home = React.createClass({ className='card--press' fetching={this.props.sensorPressure.fetching} fetched={this.props.sensorPressure.fetched} - title='Air Pressure' + title='Luftdruck' lastReading={sensorPressureData.last} avgs={sensorPressureData.avgs} plotData={sensorPressureData.data} @@ -233,6 +239,34 @@ var Home = React.createClass({ unit=' hPa' /> + + + +
@@ -250,7 +284,9 @@ function selector (state) { sensorLuminosity: state.sensorLuminosity, sensorPressure: state.sensorPressure, sensorHumidity: state.sensorHumidity, - sensorTemperature: state.sensorTemperature + sensorTemperature: state.sensorTemperature, + sensorPm10: state.sensorPm10, + sensorPm25: state.sensorPm25, }; } diff --git a/app/assets/styles/_base.scss b/app/assets/styles/_base.scss index 8e54ab5..2a38cc2 100644 --- a/app/assets/styles/_base.scss +++ b/app/assets/styles/_base.scss @@ -277,6 +277,12 @@ a:active { } &.card--press { + .infographic { + background: linear-gradient(#0d60dd, rgb(52, 122, 196)); + } + } + + &.card--pm { .infographic { background: linear-gradient(#616161, #607D8B); } @@ -298,4 +304,4 @@ a:active { p { opacity: 0.64; } -} \ No newline at end of file +} diff --git a/app/index.html b/app/index.html index 657c379..0268578 100644 --- a/app/index.html +++ b/app/index.html @@ -7,15 +7,15 @@ - Devseed Sense - Lisbon + Begga Weer - - - - - + + + + + +