#401 show last measured value under alert sliders

ruuvi · Mar 24, 2024 · f50037d · f50037d
1 parent 96488cd
commit f50037d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/components/AlertItem.js b/src/components/AlertItem.js
@@ -2,7 +2,7 @@ import { Box, ListItem } from "@chakra-ui/layout";
 import { Switch } from "@chakra-ui/switch";
 import React, { Component, Suspense } from "react";
 import { withTranslation } from 'react-i18next';
-import { getAlertRange, getUnitHelper, localeNumber, round } from "../UnitHelper";
+import { getAlertRange, getDisplayValue, getUnitHelper, localeNumber, round } from "../UnitHelper";
 import EditableText from "./EditableText";
 import InputDialog from "./InputDialog";
 import RangeInputDialog from "./RangeInputDialog";
@@ -148,6 +148,9 @@ class AlertItem extends Component {
                 </span>
             </div>
         </>
+        const getUnit = () => {
+            return type !== "movement" && type !== "signal" && type !== "offline" ? ` ${type === "humidity" ? "%" : uh.unit}` : ""
+        }
 
         return (
             <ListItem key={type}>
@@ -176,9 +179,16 @@ class AlertItem extends Component {
                             }>
                                 <AlertSlider type={type} value={alert || { ...getAlertRange(this.props.type) }} onChange={(v, final) => this.setAlert({ ...alert, min: v[0], max: v[1] }, type, alert ? alert.enabled : false, !final)} />
                             </Suspense>
+                            {this.props.latestValue !== undefined &&
+                                <div style={{ ...editItemMargins, display: "flex", justifyContent: "flex-end" }}>
+                                    <span style={{ ...this.props.detailedSubText, opacity: 0.5 }}>
+                                        {t("latest_measured_value").replace(/{(.*?)}/, getDisplayValue(this.props.type.toLowerCase(), this.props.latestValue))} {getUnit()}
+                                    </span>
+                                </div>
+                            }
                         </Box>
                     }
-                    {this.props.showDelay &&  type !== "offline" &&
+                    {this.props.showDelay && type !== "offline" &&
                         <Box mt={5}>
                             <ScreenSizeWrapper>
                                 {delaySetting()}

diff --git a/src/states/Sensor.js b/src/states/Sensor.js
@@ -708,11 +708,13 @@ class Sensor extends Component {
                                         </Box>}
                                         {["temperature", "humidity", "pressure", "signal", "movement", ...[["Free", "Basic"].includes(sensorSubscription) ? null : "offline"]].map(x => {
                                             if (!x) return null
-                                            let dataKey = x === "movement" ? "movementCounter" : "signal" ? "rssi" : x;
-                                            if (this.getLatestReading()[dataKey] === undefined) return null;
+                                            let dataKey = x === "movement" ? "movementCounter" :  x === "signal" ? "rssi" : x;
+                                            let latestValue = this.getLatestReading()[dataKey]
+                                            if (latestValue === undefined) return null;
                                             var alert = this.getAlert(x)
                                             let key = alert ? alert.min + "" + alert.max + "" + alert.enabled.toString() + "" + alert.description : x
                                             return <AlertItem key={key} alerts={this.props.sensor.alerts} alert={alert} sensor={this.props.sensor}
+                                                latestValue={latestValue}
                                                 showDelay={sensorSubscription === "Business Starter"}
                                                 detailedTitle={detailedTitle}
                                                 detailedText={detailedText} detailedSubText={detailedSubText}