Unit of measurement (#1072)

* Fix, cleanup and add units of measurement on entity weather card * Move to units component * Add unit of measurement to state
timmo001 · Apr 20, 2020 · 15caef3 · 15caef3
1 parent 337662e
commit 15caef3
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 122 deletions.
diff --git a/src/Components/HomeAssistant/Cards/State.tsx b/src/Components/HomeAssistant/Cards/State.tsx
@@ -130,6 +130,7 @@ function State(props: EntityProps): ReactElement | null {
           component="h5"
           style={{ fontSize: props.card.state_size }}>
           {props.entity.state}
+          {props.entity.attributes.unit_of_measurement}
         </Typography>
       </Grid>
     </Grid>

diff --git a/src/Components/HomeAssistant/Cards/Weather.tsx b/src/Components/HomeAssistant/Cards/Weather.tsx
@@ -6,15 +6,16 @@ import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 
 import { EntityProps } from './Entity';
-import properCase from '../../../utils/properCase';
+import { getUnit, weatherNameMap, weatherMap } from '../Utils/Units';
 
 const useStyles = makeStyles((theme: Theme) => ({
   root: {
     flex: 1,
   },
   name: {
-    margin: 'auto 0',
+    margin: theme.spacing(0, 1),
     overflow: 'hidden',
+    textAlign: 'center',
     textOverflow: 'ellipsis',
     fontSize: '1.12rem',
     lineHeight: '1.34rem',
@@ -32,8 +33,8 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   icon: {
     color: theme.palette.text.primary,
-    fontSize: 42,
-    lineHeight: '1.0em',
+    fontSize: 64,
+    lineHeight: '0.7em',
   },
   attribute: {
     lineHeight: '1.2em',
@@ -61,135 +62,58 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
-const weatherMap: { [item: string]: string } = {
-  'clear-night': 'weather-night',
-  cloudy: 'weather-cloudy',
-  fog: 'weather-fog',
-  hail: 'weather-hail',
-  lightning: 'weather-lightning',
-  'lightning-rainy': 'weather-lightning-rainy',
-  partlycloudy: 'weather-partly-cloudy',
-  pouring: 'weather-pouring',
-  rainy: 'weather-rainy',
-  snowy: 'weather-snowy',
-  'snowy-rainy': 'weather-snowy-rainy',
-  sunny: 'weather-sunny',
-  windy: 'weather-windy',
-  'windy-variant': 'weather-windy-variant',
-};
-
-const weatherNameMap: { [item: string]: string } = {
-  'clear-night': 'Clear',
-  cloudy: 'Cloudy',
-  fog: 'Fog',
-  hail: 'Hail',
-  lightning: 'Lightning',
-  'lightning-rainy': 'Lightning & Rain',
-  partlycloudy: 'Partly Cloudy',
-  pouring: 'Rain',
-  rainy: 'Rain',
-  snowy: 'Snow',
-  'snowy-rainy': 'Snow & Rain',
-  sunny: 'Sunny',
-  windy: 'Windy',
-  'windy-variant': 'Windy',
-};
-
 function Weather(props: EntityProps): ReactElement {
-  function getUnit(measure: string): string | null {
-    if (props.hassConfig) {
-      const lengthUnit = props.hassConfig.unit_system.length || '';
-      switch (measure) {
-        case 'pressure':
-          return lengthUnit === 'km' ? ' hPa' : ' inHg';
-        case 'length':
-          return ` ${lengthUnit}`;
-        case 'precipitation':
-          return lengthUnit === 'km' ? ' mm' : ' in';
-        case 'wind_speed':
-          return lengthUnit === 'km' ? ' km/h' : ' mph';
-        case 'wind_bearing':
-          return '°';
-        case 'humidity':
-          return '%';
-        default:
-          return '';
-        // return props.hassConfig.unit_system[measure]
-        //   ? `${props.hassConfig.unit_system[measure]}`
-        //   : '';
-      }
-    } else return null;
-  }
-
   const classes = useStyles();
 
   return (
-    <Grid className={classes.root} container direction="row">
+    <Grid
+      className={classes.root}
+      container
+      direction="row"
+      alignContent="space-around"
+      alignItems="center"
+      justify="space-around">
       <Grid
         item
         xs
         container
         direction="row"
         alignContent="center"
-        justify="space-between">
-        <Typography className={classes.name} variant="h5" noWrap>
-          {weatherNameMap[props.entity.state]}
-        </Typography>
+        alignItems="center"
+        justify="center">
+        <Grid item>
+          <Typography className={classes.forecastTextIcon} variant="body2">
+            <span
+              className={classnames(
+                'mdi',
+                `mdi-${weatherMap[props.entity.state]}`,
+                classes.icon
+              )}
+            />
+          </Typography>
+        </Grid>
         <Grid
           item
-          container
-          spacing={1}
-          direction="row"
-          alignContent="center"
-          justify="space-between">
-          <Grid
-            item
-            xs={!props.card.width || props.card.width > 1 ? 4 : 12}
-            container
-            direction="column"
-            alignContent="center"
-            justify="center">
-            <Grid item>
-              <span
-                className={classnames(
-                  'mdi',
-                  `mdi-${props.entity.attributes.icon}`,
-                  classes.icon
-                )}
-              />
-            </Grid>
-            <Grid item className={classes.temperature}>
-              <Typography variant="subtitle1">
-                {props.entity.attributes.temperature}
-              </Typography>
-              <Typography variant="subtitle1">
-                {getUnit('temperature')}
-              </Typography>
-            </Grid>
-          </Grid>
-          {!props.card.width ||
-          props.card.width > 1 ||
-          !props.card.height ||
-          props.card.height > 1 ? (
-            <Grid item xs>
-              {Object.keys(props.entity.attributes)
-                .filter((i) => typeof props.entity.attributes[i] == 'number')
-                .map(
-                  (attribute, i) =>
-                    attribute !== 'temperature' &&
-                    attribute !== 'ozone' && (
-                      <Typography
-                        key={i}
-                        className={classes.attribute}
-                        variant="body2">
-                        {properCase(attribute)}:{' '}
-                        {props.entity.attributes[attribute]}
-                        {getUnit(attribute)}
-                      </Typography>
-                    )
-                )}
-            </Grid>
-          ) : null}
+          style={{
+            textAlign:
+              !props.card.width || props.card.width < 1 ? 'center' : 'left',
+          }}>
+          <Typography
+            className={classes.name}
+            component="span"
+            variant="h5"
+            noWrap>
+            {weatherNameMap[props.entity.state]}
+          </Typography>
+          <br />
+          <Typography
+            className={classes.name}
+            component="span"
+            variant="h6"
+            noWrap>
+            {props.entity.attributes.temperature}
+            {getUnit('temperature', props.hassConfig)}
+          </Typography>
         </Grid>
       </Grid>
       {(!props.card.width || props.card.width > 1) &&
@@ -243,7 +167,7 @@ function Weather(props: EntityProps): ReactElement {
                       className={classes.forecastText}
                       variant="body2">
                       {w.temperature}
-                      {getUnit('temperature')}
+                      {getUnit('temperature', props.hassConfig)}
                     </Typography>
                     <Typography
                       noWrap

diff --git a/src/Components/HomeAssistant/Utils/Units.tsx b/src/Components/HomeAssistant/Utils/Units.tsx
@@ -0,0 +1,63 @@
+import { HassConfig } from 'home-assistant-js-websocket';
+
+export const weatherMap: { [item: string]: string } = {
+  'clear-night': 'weather-night',
+  cloudy: 'weather-cloudy',
+  fog: 'weather-fog',
+  hail: 'weather-hail',
+  lightning: 'weather-lightning',
+  'lightning-rainy': 'weather-lightning-rainy',
+  partlycloudy: 'weather-partly-cloudy',
+  pouring: 'weather-pouring',
+  rainy: 'weather-rainy',
+  snowy: 'weather-snowy',
+  'snowy-rainy': 'weather-snowy-rainy',
+  sunny: 'weather-sunny',
+  windy: 'weather-windy',
+  'windy-variant': 'weather-windy-variant',
+};
+
+export const weatherNameMap: { [item: string]: string } = {
+  'clear-night': 'Clear',
+  cloudy: 'Cloudy',
+  fog: 'Fog',
+  hail: 'Hail',
+  lightning: 'Lightning',
+  'lightning-rainy': 'Lightning & Rain',
+  partlycloudy: 'Partly Cloudy',
+  pouring: 'Rain',
+  rainy: 'Rain',
+  snowy: 'Snow',
+  'snowy-rainy': 'Snow & Rain',
+  sunny: 'Sunny',
+  windy: 'Windy',
+  'windy-variant': 'Windy',
+};
+
+export function getUnit(
+  measure: string,
+  hassConfig?: HassConfig
+): string | null {
+  if (hassConfig) {
+    const lengthUnit = hassConfig.unit_system.length || '';
+    switch (measure) {
+      case 'length':
+      case 'mass':
+      case 'volume':
+      case 'temperature':
+        return hassConfig.unit_system[measure];
+      case 'pressure':
+        return lengthUnit === 'km' ? ' hPa' : ' inHg';
+      case 'precipitation':
+        return lengthUnit === 'km' ? ' mm' : ' in';
+      case 'wind_speed':
+        return lengthUnit === 'km' ? ' km/h' : ' mph';
+      case 'wind_bearing':
+        return '°';
+      case 'humidity':
+        return '%';
+      default:
+        return '';
+    }
+  } else return null;
+}