Update packages dependencies

Fix values conversion according to the user units settings (issues 9)

client/components/ModuleNetatmoBarometer.tsx

@@ -11,6 +11,7 @@ interface IPropsFromState {
     unit: string
     device_id: string|undefined
     selected_timelapse: '12h'|'1d'|'1m'
+    pressure_ratio: number
 }
 
 // We can use `typeof` here to map our dispatch types to the props, like so.
@@ -33,7 +34,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'], props.selected_timelapse)}>
-                        {props.pressure}<small>{props.unit}</small>
+                        {Math.round(props.pressure as number * props.pressure_ratio * 10) / 10}<small>{props.unit}</small>
                     </div>
                 </div>
             </div>

client/components/ModuleNetatmoIndoor.tsx

@@ -18,6 +18,7 @@ interface IPropsFromState {
 interface IPropsFromDispatch {
     [key: string]: any
     fetchMeasure: typeof netatmoActions.fetchMeasure
+    temperature_ratio: string
 }
 
 // Combine both state + dispatch props - as well as any props we want to pass - in a union type.
@@ -36,7 +37,7 @@ const NetatmoModuleIndoor: React.FunctionComponent<AllProps> = (props) => {
                 <div className="row">
                     <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>
+                        {Math.round(eval(props.module_data?.data?.temperature + '*' + props.temperature_ratio) * 10) / 10}<small>°C</small>
                     </div>
                     <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>

client/components/ModuleNetatmoOutdoor.tsx

@@ -12,6 +12,7 @@ interface IPropsFromState {
     module_data: INetatmoNAModule1|undefined
     device_id: string|undefined
     selected_timelapse: '12h'|'1d'|'1m'
+    temperature_ratio: string
 }
 
 // We can use `typeof` here to map our dispatch types to the props, like so.
@@ -36,7 +37,7 @@ const NetatmoModuleOutdoor: React.FunctionComponent<AllProps> = (props) => {
                 <div className="row">
                     <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>
+                        {Math.round(eval(props.module_data?.data?.temperature + '*' + props.temperature_ratio) * 10) / 10}<small>°C</small>
                     </div>
                     <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>

client/components/ModuleNetatmoStation.tsx

@@ -12,6 +12,7 @@ interface IPropsFromState {
     station_data: INetatmoNAMain|undefined
     device_id: string|undefined
     selected_timelapse: '12h'|'1d'|'1m'
+    temperature_ratio: string
 }
 
 // We can use `typeof` here to map our dispatch types to the props, like so.
@@ -35,7 +36,7 @@ const NetatmoModuleStation: React.FunctionComponent<AllProps> = (props) => {
                 <div className="row">
                     <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>
+                        {Math.round(eval(props.station_data?.data?.temperature + '*' + props.temperature_ratio) * 10) / 10}<small>°C</small>
                     </div>
                     <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>

client/components/ModuleNetatmoWind.tsx

@@ -13,6 +13,7 @@ interface IPropsFromState {
     device_id: string|undefined
     unit: string
     selected_timelapse: '12h'|'1d'|'1m'
+    wind_ratio: number
 }
 
 // We can use `typeof` here to map our dispatch types to the props, like so.
@@ -36,11 +37,11 @@ const NetatmoModuleWind: React.FunctionComponent<AllProps> = (props) => {
                 <div className="row">
                     <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>
+                        {Math.round(props.module_data?.data?.wind_strength as number * props.wind_ratio)}<small>{props.unit}</small>
                     </div>
                     <div className="wind-max">
                         <div className="sub-label" style={{ color: Colors.GRAY4, textAlign: "right" }}>Max day</div>
-                        {props.module_data?.data?.max_wind_str}<small>{props.unit}</small>
+                        {Math.round(props.module_data?.data?.max_wind_str as number * props.wind_ratio)}<small>{props.unit}</small>
                     </div>
                 </div>
                 <div className="row">

client/containers/ModuleNetatmoBarometerContainer.ts

@@ -9,7 +9,8 @@ const mapStateToProps = ({ netatmo, application}: ApplicationState) => ({
     pressure: netatmo.station_data?.data?.pressure,
     unit: application.user.pressure_unit,
     device_id: netatmo.station_data?.id,
-    selected_timelapse: netatmo.selected_timelapse
+    selected_timelapse: netatmo.selected_timelapse,
+    pressure_ratio: application.user.pressure_ratio
 });
 
 const mapDispatchToProps = (dispatch: ThunkDispatch<any, any, any>) => ({

client/containers/ModuleNetatmoIndoorContainer.ts

@@ -4,10 +4,11 @@ import { ApplicationState } from "../store";
 import ModuleNetatmoIndoor from "../components/ModuleNetatmoIndoor"
 import * as netatmoActions from "../store/netatmo/actions";
 
-const mapStateToProps = ({ netatmo}: ApplicationState) => ({
+const mapStateToProps = ({ netatmo, application}: ApplicationState) => ({
     module_data: netatmo.station_data?.modules.INDOOR,
     device_id: netatmo.station_data?.id,
-    selected_timelapse: netatmo.selected_timelapse
+    selected_timelapse: netatmo.selected_timelapse,
+    temperature_ratio: application.user.temperature_ratio
 });
 
 const mapDispatchToProps = (dispatch: ThunkDispatch<any, any, any>) => ({

client/containers/ModuleNetatmoOutdoorContainer.ts

@@ -4,10 +4,11 @@ import { ApplicationState } from "../store";
 import ModuleNetatmoOutdoor from "../components/ModuleNetatmoOutdoor"
 import * as netatmoActions from "../store/netatmo/actions";
 
-const mapStateToProps = ({ netatmo}: ApplicationState) => ({
+const mapStateToProps = ({ netatmo, application}: ApplicationState) => ({
     module_data: netatmo.station_data?.modules.OUTDOOR,
     device_id: netatmo.station_data?.id,
-    selected_timelapse: netatmo.selected_timelapse
+    selected_timelapse: netatmo.selected_timelapse,
+    temperature_ratio: application.user.temperature_ratio,
 });
 
 const mapDispatchToProps = (dispatch: ThunkDispatch<any, any, any>) => ({

client/containers/ModuleNetatmoStationContainer.ts

@@ -4,10 +4,11 @@ import { ApplicationState } from "../store";
 import ModuleNetatmoStation from "../components/ModuleNetatmoStation"
 import * as netatmoActions from "../store/netatmo/actions";
 
-const mapStateToProps = ({ netatmo}: ApplicationState) => ({
+const mapStateToProps = ({ netatmo, application}: ApplicationState) => ({
     station_data: netatmo.station_data,
     device_id: netatmo.station_data?.id,
-    selected_timelapse: netatmo.selected_timelapse
+    selected_timelapse: netatmo.selected_timelapse,
+    temperature_ratio: application.user.temperature_ratio
 });
 
 const mapDispatchToProps = (dispatch: ThunkDispatch<any, any, any>) => ({

client/containers/ModuleNetatmoWindContainer.ts

@@ -3,13 +3,13 @@ import { ThunkDispatch} from "redux-thunk";
 import { ApplicationState } from "../store";
 import ModuleNetatmoWind from "../components/ModuleNetatmoWind"
 import * as netatmoActions from "../store/netatmo/actions";
-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,
-    selected_timelapse: netatmo.selected_timelapse
+    selected_timelapse: netatmo.selected_timelapse,
+    wind_ratio: application.user.wind_ratio
 });
 
 const mapDispatchToProps = (dispatch: ThunkDispatch<any, any, any>) => ({

client/models/NetatmoUserInformation.ts

@@ -1,6 +1,4 @@
 /**
- * Netatmo User information DTO
- *
  * unit : 0 -> metric system, 1 -> imperial system
  * windunit: 0 -> kph, 1 -> mph, 2 -> ms, 3 -> beaufort, 4 -> knot
  * pressureunit: 0 -> mbar, 1 -> inHg, 2 -> mmHg
@@ -16,6 +14,9 @@ export interface INetatmoUserInformation {
     pressure_unit: string
     unit: string
     windunit: string
+    temperature_ratio: string;
+    wind_ratio: number;
+    pressure_ratio: number;
 }
 
 
@@ -26,6 +27,9 @@ class NetatmoUserInformation implements INetatmoUserInformation{
     pressure_unit: string;
     unit: string;
     windunit: string;
+    temperature_ratio: string;
+    wind_ratio: number;
+    pressure_ratio: number;
 
     constructor(data: any) {
         this.mail = data.mail;
@@ -35,48 +39,62 @@ class NetatmoUserInformation implements INetatmoUserInformation{
         switch (data.administrative.pressureunit) {
             case 0:
                 this.pressure_unit = 'mbar';
+                this.pressure_ratio = 1;
                 break;
             case 1:
                 this.pressure_unit = 'inHg';
+                this.pressure_ratio = 0.02953;
                 break;
             case 2:
                 this.pressure_unit = 'mmHg';
+                this.pressure_ratio = 0.750062;
                 break;
             default:
                 this.pressure_unit = 'mbar';
+                this.pressure_ratio = 1;
                 break;
         }
 
         switch (data.administrative.unit) {
             case 0:
                 this.unit = 'si';
+                this.temperature_ratio = '1';
                 break;
             case 1:
                 this.unit = 'us';
+                this.temperature_ratio = '9/5 + 32';
                 break;
             default:
                 this.unit = 'si';
+                this.temperature_ratio = '1';
                 break;
         }
 
         switch (data.administrative.windunit) {
             case 0:
                 this.windunit = 'km/h';
+                this.wind_ratio = 1;
                 break;
             case 1:
                 this.windunit = 'mp/h';
+                this.wind_ratio = 0.621371;
                 break;
             case 2:
                 this.windunit = 'ms';
+                this.wind_ratio = 0.2777778;
                 break;
             case 3:
                 this.windunit = 'beaufort';
+                this.wind_ratio = 1; // TODO
+                // Currently not supported : https://www.meteosuisse.admin.ch/content/dam/meteoswiss/fr/Wetter/Prognosen/Wetterbegriffe/Doc/wetter-tabelle-force-des-vents.pdf
                 break;
             case 4:
-                this.windunit = 'knot';
+                this.windunit = 'kts';
+                this.wind_ratio = 0.5399568;
                 break;
             default:
                 this.windunit = 'km/h';
+                this.wind_ratio = 1;
                 break;
         }
 

client/store/application/reducer.ts

@@ -14,8 +14,11 @@ const initialState: IApplicationState = {
         lang: 'en',
         locale: '',
         pressure_unit: '',
-        unit: 'si',
-        windunit: ''
+        unit: '',
+        windunit: '',
+        temperature_ratio: '',
+        pressure_ratio: 1,
+        wind_ratio: 1
     },
     loading: true
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cbatmo",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "A Netatmo Weather Station Web-APP for Raspberry Pi and official Raspberry touchscreen",
   "keywords": [
     "dark sky",
@@ -38,12 +38,12 @@
     "@mdi/font": "^4.7.95",
     "@types/classnames": "^2.2.9",
     "@types/express": "^4.16.1",
-    "@types/node": "^12.12",
+    "@types/node": "^13.7.7",
     "@types/react": "^16.9.16",
     "@types/react-dom": "^16.9.4",
     "@types/react-redux": "^7.1.5",
     "@types/recharts": "^1.8.3",
-    "@types/styled-components": "^4.4.1",
+    "@types/styled-components": "^5.0.1",
     "awesome-typescript-loader": "^5.2.1",
     "classnames": "^2.2.6",
     "concurrently": "^5.0.1",