diff --git a/.storybook/seed-fake.js b/.storybook/seed-fake.js
index 9e7f05f5b..d32c915c5 100644
--- a/.storybook/seed-fake.js
+++ b/.storybook/seed-fake.js
@@ -485,10 +485,11 @@ export const seedFake = (db) => {
noiseaware_metadata: {
device_model: 'indoor',
noise_level_nrs: 1,
- noise_level_decibel: 42,
+ noise_level_decibel: 80,
device_name: 'Living room',
device_id: 'noiseaware_123',
},
+ currently_triggering_noise_threshold_ids: [],
},
errors: [],
})
diff --git a/assets/icons/noise-levels-red.svg b/assets/icons/noise-levels-red.svg
new file mode 100644
index 000000000..8e73a3ff8
--- /dev/null
+++ b/assets/icons/noise-levels-red.svg
@@ -0,0 +1,6 @@
+
diff --git a/package-lock.json b/package-lock.json
index 80d95d744..abfa1c3c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
"luxon": "^3.3.0",
"queue": "^7.0.0",
"react-hook-form": "^7.46.1",
- "seamapi": "^8.22.1",
+ "seamapi": "^8.24.0",
"uuid": "^9.0.0",
"zoned-time": "^1.1.2"
},
@@ -20462,9 +20462,9 @@
"dev": true
},
"node_modules/seamapi": {
- "version": "8.22.1",
- "resolved": "https://registry.npmjs.org/seamapi/-/seamapi-8.22.1.tgz",
- "integrity": "sha512-uUT6KewWj+y5tn5nS0UlgMtfZyp9tdD/z45PlvEuTnY6/qA1gL6PvlvKi5aNYomr5sziQtfNCrKcLnYDotebPg==",
+ "version": "8.24.0",
+ "resolved": "https://registry.npmjs.org/seamapi/-/seamapi-8.24.0.tgz",
+ "integrity": "sha512-WP115PUw5YN9p804boU/kqAAr4GfccJtrRVB6gTeZA1l1Lx5IAL/uTVKoP9uPRSOK6CBOaogO1ffXTEXDj/QmA==",
"dependencies": {
"axios": "0.25.0",
"axios-retry": "3.2.5",
diff --git a/package.json b/package.json
index df7496338..e820317c7 100644
--- a/package.json
+++ b/package.json
@@ -132,7 +132,7 @@
"luxon": "^3.3.0",
"queue": "^7.0.0",
"react-hook-form": "^7.46.1",
- "seamapi": "^8.22.1",
+ "seamapi": "^8.24.0",
"uuid": "^9.0.0",
"zoned-time": "^1.1.2"
},
diff --git a/src/lib/icons/NoiseLevelsRed.tsx b/src/lib/icons/NoiseLevelsRed.tsx
new file mode 100644
index 000000000..2daeae137
--- /dev/null
+++ b/src/lib/icons/NoiseLevelsRed.tsx
@@ -0,0 +1,33 @@
+/*
+ * Automatically generated by SVGR from assets/icons/*.svg.
+ * Do not edit this file or add other components to this directory.
+ */
+import type { SVGProps } from 'react'
+export function NoiseLevelsRedIcon(
+ props: SVGProps
+): JSX.Element {
+ return (
+
+ )
+}
diff --git a/src/lib/ui/device/NoiseLevelStatus.tsx b/src/lib/ui/device/NoiseLevelStatus.tsx
index 75f7c3d1f..f2fe8ea19 100644
--- a/src/lib/ui/device/NoiseLevelStatus.tsx
+++ b/src/lib/ui/device/NoiseLevelStatus.tsx
@@ -1,6 +1,8 @@
+import classNames from 'classnames'
import type { NoiseSensorDevice } from 'seamapi'
import { NoiseLevelsIcon } from 'lib/icons/NoiseLevels.js'
+import { NoiseLevelsRedIcon } from 'lib/icons/NoiseLevelsRed.js'
interface NoiseLevelStatusProps {
device: NoiseSensorDevice
@@ -9,13 +11,22 @@ interface NoiseLevelStatusProps {
export function NoiseLevelStatus({
device,
}: NoiseLevelStatusProps): JSX.Element {
+ const isActivated =
+ (device?.properties?.currently_triggering_noise_threshold_ids ?? [])
+ ?.length > 0
+
return (
<>
{t.noiseLevel}:
-
- {getNoiseLevel(device)}
+ {isActivated ? : }
+
+ {getNoiseLevel(device)}
+ {isActivated && ` (${t.noisy})`}
+
)
@@ -55,4 +66,5 @@ const t = {
unknown: 'Unknown',
decibel: 'dB',
noiseAwareDefault: '0-40 dB',
+ noisy: 'noisy',
}