Merge pull request #7 from Gulivertx/2.1.x

2.1.1
Gulivertx · Dec 31, 2019 · 0a56c62 · 0a56c62
2 parents be9875a + ff83691
commit 0a56c62
Show file tree

Hide file tree

Showing 27 changed files with 144 additions and 41 deletions.
diff --git a/client/components/ModuleNetatmoBarometer.tsx b/client/components/ModuleNetatmoBarometer.tsx
@@ -10,6 +10,7 @@ interface IPropsFromState {
     pressure?: number
     unit: string
     device_id: string|undefined
+    selected_timelapse: '12h'|'1d'|'1m'
 }
 
 // We can use `typeof` here to map our dispatch types to the props, like so.
@@ -31,7 +32,7 @@ const NetatmoModuleBarmometer: React.FunctionComponent<AllProps> = (props) => {
         >
             <div className="modules-layout">
                 <div className="row">
-                    <div className="pressure" onClick={() => props.fetchMeasure(props.device_id as string, props.device_id as string, ['Pressure'])}>
+                    <div className="pressure" onClick={() => props.fetchMeasure(props.device_id as string, props.device_id as string, ['Pressure'], props.selected_timelapse)}>
                         {props.pressure}<small>{props.unit}</small>
                     </div>
                 </div>

diff --git a/client/components/ModuleNetatmoGraph.tsx b/client/components/ModuleNetatmoGraph.tsx
@@ -1,22 +1,34 @@
 import React from 'react';
-import { Colors } from "@blueprintjs/core";
+import { Alignment, Button, ButtonGroup, Colors } from "@blueprintjs/core";
 import { AreaChart, Area, CartesianGrid, XAxis, YAxis } from 'recharts';
 import removeAccents from 'remove-accents';
 import ModuleLayout from "../layouts/ModuleLayout";
 import {Types} from "../models/NetatmoChartsData";
 import {colorChooser} from "../utils/tools";
 import {INetatmoNAMain} from "../models/NetatmoNAMain";
+import * as netatmoActions from "../store/netatmo/actions";
+import {ConnectedReduxProps} from "../store";
 
 // Separate state props + dispatch props to their own interfaces.
 interface IPropsFromState {
     measure_data: []
     selected_types: Types[]
-    selected_module: string,
+    selected_module: string
+    selected_timelapse: '12h'|'1d'|'1m'
     station_data: INetatmoNAMain|undefined
 }
 
+// We can use `typeof` here to map our dispatch types to the props, like so.
+interface IPropsFromDispatch {
+    [key: string]: any
+    fetchMeasure: typeof netatmoActions.fetchMeasure
+}
+
+// Combine both state + dispatch props - as well as any props we want to pass - in a union type.
+type AllProps = IPropsFromState & IPropsFromDispatch & ConnectedReduxProps;
+
 /** Rain module */
-class NetatmoModuleGraph extends React.Component<IPropsFromState> {
+class NetatmoModuleGraph extends React.Component<AllProps> {
 
     private findModuleName = (module_id: string) => {
         // @ts-ignore
@@ -37,18 +49,36 @@ class NetatmoModuleGraph extends React.Component<IPropsFromState> {
         }
     };
 
+    private handleOnclick = (timelapse: '12h'|'1d'|'1m'): void => {
+        this.props.fetchMeasure(this.props.station_data?.id as string, this.props.selected_module, this.props.selected_types, timelapse);
+    };
+
     public render() {
         return (
             <ModuleLayout
                 label="Graph"
                 reachable={true}
             >
                 <div className="modules-layout">
+                    <ButtonGroup className="toolbar" alignText={Alignment.CENTER} minimal={true}>
+                        <Button
+                            active={this.props.selected_timelapse === '12h'}
+                            onClick={() => this.handleOnclick('12h')}
+                        >12h</Button>
+                        <Button
+                            active={this.props.selected_timelapse === '1d'}
+                            onClick={() => this.handleOnclick('1d')}
+                        >1 day</Button>
+                        <Button
+                            active={this.props.selected_timelapse === '1m'}
+                            onClick={() => this.handleOnclick('1m')}
+                        >1 month</Button>
+                    </ButtonGroup>
                     <AreaChart
                         width={270}
-                        height={130}
+                        height={132}
                         data={this.props.measure_data}
-                        margin={{top: 10, right: 0, left: -30, bottom: 8}}
+                        margin={{top: 14, right: 0, left: -30, bottom: 8}}
                     >
                         <CartesianGrid stroke={Colors.GRAY1} />
                         <YAxis tick={{fontSize: '10px'}} stroke={Colors.GRAY4} minTickGap={1} />

diff --git a/client/components/ModuleNetatmoIndoor.tsx b/client/components/ModuleNetatmoIndoor.tsx
@@ -11,6 +11,7 @@ import {ConnectedReduxProps} from "../store";
 interface IPropsFromState {
     module_data: INetatmoNAModule4|undefined
     device_id: string|undefined
+    selected_timelapse: '12h'|'1d'|'1m'
 }
 
 // We can use `typeof` here to map our dispatch types to the props, like so.
@@ -33,17 +34,17 @@ const NetatmoModuleIndoor: React.FunctionComponent<AllProps> = (props) => {
         >
             <div className="modules-layout">
                 <div className="row">
-                    <div className="temperature" onClick={() => props.fetchMeasure(props.device_id as string, props.module_data?.id as string, ['Temperature'])}>
+                    <div className="temperature" onClick={() => props.fetchMeasure(props.device_id as string, props.module_data?.id as string, ['Temperature'], props.selected_timelapse)}>
                         <div className="sub-label" style={{ color: Colors.GRAY4 }}>Temperature</div>
                         {props.module_data?.data?.temperature}<small>°C</small>
                     </div>
-                    <div className="humidity" onClick={() => props.fetchMeasure(props.device_id as string, props.module_data?.id as string, ['Humidity'])}>
+                    <div className="humidity" onClick={() => props.fetchMeasure(props.device_id as string, props.module_data?.id as string, ['Humidity'], props.selected_timelapse)}>
                         <div className="sub-label" style={{ color: Colors.GRAY4, textAlign: "right" }}>Humidity</div>
                         {props.module_data?.data?.humidity}<small>%</small>
                     </div>
                 </div>
                 <div className="row">
-                    <div className="co2" onClick={() => props.fetchMeasure(props.device_id as string, props.module_data?.id as string, ['CO2'])}>
+                    <div className="co2" onClick={() => props.fetchMeasure(props.device_id as string, props.module_data?.id as string, ['CO2'], props.selected_timelapse)}>
                         <div className="sub-label" style={{ color: Colors.GRAY4 }}>co2</div>
                         {props.module_data?.data?.co2}<small>ppm</small>
                     </div>

diff --git a/client/components/ModuleNetatmoOutdoor.tsx b/client/components/ModuleNetatmoOutdoor.tsx
@@ -11,6 +11,7 @@ import {ConnectedReduxProps} from "../store";
 interface IPropsFromState {
     module_data: INetatmoNAModule1|undefined
     device_id: string|undefined
+    selected_timelapse: '12h'|'1d'|'1m'
 }
 
 // We can use `typeof` here to map our dispatch types to the props, like so.
@@ -33,11 +34,11 @@ const NetatmoModuleOutdoor: React.FunctionComponent<AllProps> = (props) => {
         >
             <div className="modules-layout">
                 <div className="row">
-                    <div className="temperature" onClick={() => props.fetchMeasure(props.device_id as string, props.module_data?.id as string, ['Temperature'])}>
+                    <div className="temperature" onClick={() => props.fetchMeasure(props.device_id as string, props.module_data?.id as string, ['Temperature'], props.selected_timelapse)}>
                         <div className="sub-label" style={{ color: Colors.GRAY4 }}>Temperature</div>
                         {props.module_data?.data?.temperature}<small>°C</small>
                     </div>
-                    <div className="humidity" onClick={() => props.fetchMeasure(props.device_id as string, props.module_data?.id as string, ['Humidity'])}>
+                    <div className="humidity" onClick={() => props.fetchMeasure(props.device_id as string, props.module_data?.id as string, ['Humidity'], props.selected_timelapse)}>
                         <div className="sub-label" style={{ color: Colors.GRAY4, textAlign: "right" }}>Humidity</div>
                         {props.module_data?.data?.humidity}<small>%</small>
                     </div>

diff --git a/client/components/ModuleNetatmoRain.tsx b/client/components/ModuleNetatmoRain.tsx
@@ -11,6 +11,7 @@ import {ConnectedReduxProps} from "../store";
 interface IPropsFromState {
     module_data: INetatmoNAModule3|undefined
     device_id: string|undefined
+    selected_timelapse: '12h'|'1d'|'1m'
 }
 
 // We can use `typeof` here to map our dispatch types to the props, like so.
@@ -34,7 +35,7 @@ const NetatmoModuleRain: React.FunctionComponent<AllProps> = (props) => {
                     <div className="graph">
                         <ModuleNetatmoRainGraphContainer />
                     </div>
-                    <div className="rain-24" onClick={() => props.fetchMeasure(props.device_id as string, props.module_data?.id as string, ['Rain'])}>
+                    <div className="rain-24" onClick={() => props.fetchMeasure(props.device_id as string, props.module_data?.id as string, ['Rain'], props.selected_timelapse)}>
                         <div className="sub-label" style={{ color: Colors.GRAY4, textAlign: "right" }}>Daily</div>
                         {props.module_data?.data?.sum_rain_24 ? props.module_data?.data?.sum_rain_24.toFixed(1) : '0'}<small>mm</small>
                     </div>

diff --git a/client/components/ModuleNetatmoStation.tsx b/client/components/ModuleNetatmoStation.tsx
@@ -11,6 +11,7 @@ import {ConnectedReduxProps} from "../store";
 interface IPropsFromState {
     station_data: INetatmoNAMain|undefined
     device_id: string|undefined
+    selected_timelapse: '12h'|'1d'|'1m'
 }
 
 // We can use `typeof` here to map our dispatch types to the props, like so.
@@ -32,21 +33,21 @@ const NetatmoModuleStation: React.FunctionComponent<AllProps> = (props) => {
         >
             <div className="modules-layout">
                 <div className="row">
-                    <div className="temperature" onClick={() => props.fetchMeasure(props.device_id as string, props.device_id as string, ['Temperature'])}>
+                    <div className="temperature" onClick={() => props.fetchMeasure(props.device_id as string, props.device_id as string, ['Temperature'], props.selected_timelapse)}>
                         <div className="sub-label" style={{ color: Colors.GRAY4 }}>Temperature</div>
                         {props.station_data?.data?.temperature}<small>°C</small>
                     </div>
-                    <div className="humidity" onClick={() => props.fetchMeasure(props.device_id as string, props.device_id as string, ['Humidity'])}>
+                    <div className="humidity" onClick={() => props.fetchMeasure(props.device_id as string, props.device_id as string, ['Humidity'], props.selected_timelapse)}>
                         <div className="sub-label" style={{ color: Colors.GRAY4, textAlign: "right" }}>Humidity</div>
                         {props.station_data?.data?.humidity}<small>%</small>
                     </div>
                 </div>
                 <div className="row">
-                    <div className="co2" onClick={() => props.fetchMeasure(props.device_id as string, props.device_id as string, ['CO2'])}>
+                    <div className="co2" onClick={() => props.fetchMeasure(props.device_id as string, props.device_id as string, ['CO2'], props.selected_timelapse)}>
                         <div className="sub-label" style={{ color: Colors.GRAY4 }}>co2</div>
                         {props.station_data?.data?.co2}<small>ppm</small>
                     </div>
-                    <div className="noise" onClick={() => props.fetchMeasure(props.device_id as string, props.device_id as string, ['Noise'])}>
+                    <div className="noise" onClick={() => props.fetchMeasure(props.device_id as string, props.device_id as string, ['Noise'], props.selected_timelapse)}>
                         <div className="sub-label" style={{ color: Colors.GRAY4, textAlign: "right" }}>Noise</div>
                         {props.station_data?.data?.noise}<small>dB</small>
                     </div>

diff --git a/client/components/ModuleNetatmoWind.tsx b/client/components/ModuleNetatmoWind.tsx
@@ -12,6 +12,7 @@ interface IPropsFromState {
     module_data: INetatmoNAModule2|undefined
     device_id: string|undefined
     unit: string
+    selected_timelapse: '12h'|'1d'|'1m'
 }
 
 // We can use `typeof` here to map our dispatch types to the props, like so.
@@ -33,7 +34,7 @@ const NetatmoModuleWind: React.FunctionComponent<AllProps> = (props) => {
         >
             <div className="modules-layout">
                 <div className="row">
-                    <div className="wind-strength" onClick={() => props.fetchMeasure(props.device_id as string, props.module_data?.id as string, ['windStrength'])}>
+                    <div className="wind-strength" onClick={() => props.fetchMeasure(props.device_id as string, props.module_data?.id as string, ['windStrength'], props.selected_timelapse)}>
                         <div className="sub-label" style={{ color: Colors.GRAY4 }}>Wind strength</div>
                         {props.module_data?.data?.wind_strength}<small>{props.unit}</small>
                     </div>

diff --git a/client/components/WeatherIcon.tsx b/client/components/WeatherIcon.tsx
@@ -13,7 +13,7 @@ const WeatherIcon: React.FunctionComponent<IPropsFromState> = ({condition, size
             case 'clear-night': return 'wi-night-clear';
             case 'rain': return 'wi-rain';
             case 'snow': return 'wi-snow';
-            case 'sleet': return 'wi-snow';
+            case 'sleet': return 'wi-sleet';
             case 'wind': return 'wi-strong-wind';
             case 'fog': return 'wi-fog';
             case 'cloudy': return 'wi-day-cloudy';

diff --git a/client/containers/ModuleNetatmoBarometerContainer.ts b/client/containers/ModuleNetatmoBarometerContainer.ts
@@ -8,11 +8,12 @@ const mapStateToProps = ({ netatmo, application}: ApplicationState) => ({
     reachable: netatmo.station_data?.reachable,
     pressure: netatmo.station_data?.data?.pressure,
     unit: application.user.pressure_unit,
-    device_id: netatmo.station_data?.id
+    device_id: netatmo.station_data?.id,
+    selected_timelapse: netatmo.selected_timelapse
 });
 
 const mapDispatchToProps = (dispatch: ThunkDispatch<any, any, any>) => ({
-    fetchMeasure: (device: string, module: string, type: string[]) => dispatch(netatmoActions.fetchMeasure(device, module, type))
+    fetchMeasure: (device: string, module: string, type: string[], timelapse: '12h'|'1d'|'1m') => dispatch(netatmoActions.fetchMeasure(device, module, type, timelapse))
 });
 
 const ModuleNetatmoBarometerContainer = connect(

diff --git a/client/containers/ModuleNetatmoGraphContainer.ts b/client/containers/ModuleNetatmoGraphContainer.ts
@@ -2,16 +2,18 @@ import { connect } from 'react-redux'
 import { ThunkDispatch } from "redux-thunk";
 import ModuleNetatmoGraph from "../components/ModuleNetatmoGraph";
 import {ApplicationState} from "../store";
+import * as netatmoActions from "../store/netatmo/actions";
 
 const mapStateToProps = ({ netatmo}: ApplicationState) => ({
     measure_data: netatmo.measure_data,
     selected_types: netatmo.selected_types,
     selected_module: netatmo.selected_module,
+    selected_timelapse: netatmo.selected_timelapse,
     station_data: netatmo.station_data
 });
 
 const mapDispatchToProps = (dispatch: ThunkDispatch<any, any, any>) => ({
-
+    fetchMeasure: (device: string, module: string, type: string[], timelapse: '12h'|'1d'|'1m') => dispatch(netatmoActions.fetchMeasure(device, module, type, timelapse)),
 });
 
 const ModuleNetatmoRainGraphContainer = connect(

diff --git a/client/containers/ModuleNetatmoIndoorContainer.ts b/client/containers/ModuleNetatmoIndoorContainer.ts
@@ -6,11 +6,12 @@ import * as netatmoActions from "../store/netatmo/actions";
 
 const mapStateToProps = ({ netatmo}: ApplicationState) => ({
     module_data: netatmo.station_data?.modules.INDOOR,
-    device_id: netatmo.station_data?.id
+    device_id: netatmo.station_data?.id,
+    selected_timelapse: netatmo.selected_timelapse
 });
 
 const mapDispatchToProps = (dispatch: ThunkDispatch<any, any, any>) => ({
-    fetchMeasure: (device: string, module: string, type: string[]) => dispatch(netatmoActions.fetchMeasure(device, module, type))
+    fetchMeasure: (device: string, module: string, type: string[], timelapse: '12h'|'1d'|'1m') => dispatch(netatmoActions.fetchMeasure(device, module, type, timelapse))
 });
 
 const ModuleNetatmoIndoorContainer = connect(

diff --git a/client/containers/ModuleNetatmoOutdoorContainer.ts b/client/containers/ModuleNetatmoOutdoorContainer.ts
@@ -6,11 +6,12 @@ import * as netatmoActions from "../store/netatmo/actions";
 
 const mapStateToProps = ({ netatmo}: ApplicationState) => ({
     module_data: netatmo.station_data?.modules.OUTDOOR,
-    device_id: netatmo.station_data?.id
+    device_id: netatmo.station_data?.id,
+    selected_timelapse: netatmo.selected_timelapse
 });
 
 const mapDispatchToProps = (dispatch: ThunkDispatch<any, any, any>) => ({
-    fetchMeasure: (device: string, module: string, type: string[]) => dispatch(netatmoActions.fetchMeasure(device, module, type))
+    fetchMeasure: (device: string, module: string, type: string[], timelapse: '12h'|'1d'|'1m') => dispatch(netatmoActions.fetchMeasure(device, module, type, timelapse))
 });
 
 const ModuleNetatmoOutdoorContainer = connect(

diff --git a/client/containers/ModuleNetatmoRainContainer.ts b/client/containers/ModuleNetatmoRainContainer.ts
@@ -6,11 +6,12 @@ import * as netatmoActions from "../store/netatmo/actions";
 
 const mapStateToProps = ({ netatmo}: ApplicationState) => ({
     module_data: netatmo.station_data?.modules.RAIN,
-    device_id: netatmo.station_data?.id
+    device_id: netatmo.station_data?.id,
+    selected_timelapse: netatmo.selected_timelapse
 });
 
 const mapDispatchToProps = (dispatch: ThunkDispatch<any, any, any>) => ({
-    fetchMeasure: (device: string, module: string, type: string[]) => dispatch(netatmoActions.fetchMeasure(device, module, type))
+    fetchMeasure: (device: string, module: string, type: string[], timelapse: '12h'|'1d'|'1m') => dispatch(netatmoActions.fetchMeasure(device, module, type, timelapse))
 });
 
 const ModuleNetatmoRainContainer = connect(

diff --git a/client/containers/ModuleNetatmoStationContainer.ts b/client/containers/ModuleNetatmoStationContainer.ts
@@ -6,11 +6,12 @@ import * as netatmoActions from "../store/netatmo/actions";
 
 const mapStateToProps = ({ netatmo}: ApplicationState) => ({
     station_data: netatmo.station_data,
-    device_id: netatmo.station_data?.id
+    device_id: netatmo.station_data?.id,
+    selected_timelapse: netatmo.selected_timelapse
 });
 
 const mapDispatchToProps = (dispatch: ThunkDispatch<any, any, any>) => ({
-    fetchMeasure: (device: string, module: string, type: string[]) => dispatch(netatmoActions.fetchMeasure(device, module, type))
+    fetchMeasure: (device: string, module: string, type: string[], timelapse: '12h'|'1d'|'1m') => dispatch(netatmoActions.fetchMeasure(device, module, type, timelapse))
 });
 
 const ModuleNetatmoStationContainer = connect(

diff --git a/client/containers/ModuleNetatmoWindContainer.ts b/client/containers/ModuleNetatmoWindContainer.ts
@@ -8,11 +8,12 @@ import {Scale} from "../models/NetatmoChartsData";
 const mapStateToProps = ({ netatmo, application}: ApplicationState) => ({
     module_data: netatmo.station_data?.modules.WIND,
     device_id: netatmo.station_data?.id,
-    unit: application.user.windunit
+    unit: application.user.windunit,
+    selected_timelapse: netatmo.selected_timelapse
 });
 
 const mapDispatchToProps = (dispatch: ThunkDispatch<any, any, any>) => ({
-    fetchMeasure: (device: string, module: string, type: string[], hours?: number, scale?: Scale) => dispatch(netatmoActions.fetchMeasure(device, module, type, hours, scale))
+    fetchMeasure: (device: string, module: string, type: string[], timelapse: '12h'|'1d'|'1m') => dispatch(netatmoActions.fetchMeasure(device, module, type, timelapse))
 });
 
 const ModuleNetatmoWindContainer = connect(

diff --git a/client/css/style.scss b/client/css/style.scss
@@ -44,6 +44,12 @@ body {
   //max-width: 266px;
   //min-width: 180px;
 
+  .toolbar {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+  }
+
   .item-label {
     position: absolute;
     top: 0;