From 34f93f7838b4f4721552a13e26d8fe353118e204 Mon Sep 17 00:00:00 2001 From: Markus Tacker Date: Fri, 13 Oct 2023 12:13:06 +0200 Subject: [PATCH] fix: remove support for LEDs --- src/App.tsx | 2 - src/CodeInput.tsx | 67 ----------------------------- src/DeviceList.tsx | 34 +-------------- src/LightbulbDevice.tsx | 65 ---------------------------- src/OnOffControl.tsx | 30 ------------- src/RGBControl.tsx | 66 ---------------------------- src/Settings.tsx | 23 +--------- src/context/Devices.tsx | 12 ------ src/context/WebsocketConnection.tsx | 32 ++++---------- src/hexToRGB.spec.ts | 8 ---- src/hexToRGB.ts | 9 ---- src/rgbToHex.spec.ts | 8 ---- src/rgbToHex.tsx | 4 -- src/test-device/FakeLight.tsx | 19 -------- 14 files changed, 12 insertions(+), 367 deletions(-) delete mode 100644 src/CodeInput.tsx delete mode 100644 src/LightbulbDevice.tsx delete mode 100644 src/OnOffControl.tsx delete mode 100644 src/RGBControl.tsx delete mode 100644 src/hexToRGB.spec.ts delete mode 100644 src/hexToRGB.ts delete mode 100644 src/rgbToHex.spec.ts delete mode 100644 src/rgbToHex.tsx delete mode 100644 src/test-device/FakeLight.tsx diff --git a/src/App.tsx b/src/App.tsx index d675b048..ecc79f33 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,7 +4,6 @@ import { Provider as SettingsProvider } from './context/Settings.js' import { Provider as HistoryChartProvider } from './context/showHistoryChart.js' import { Provider as WebsocketProvider } from './context/WebsocketConnection.js' import { Dashboard } from './Dashboard.js' -import { FakeLight } from './test-device/FakeLight.js' import { FakeTracker } from './test-device/FakeTracker.js' import { WithCredentials as CredentialsProvider } from './WithCredentials.js' @@ -22,7 +21,6 @@ export const App = () => ( - )} diff --git a/src/CodeInput.tsx b/src/CodeInput.tsx deleted file mode 100644 index 6a005a3c..00000000 --- a/src/CodeInput.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { Check, X } from 'lucide-preact' -import { useState } from 'preact/hooks' -import type { Device } from './context/Devices' -import { useSettings } from './context/Settings' - -export const CodeInput = ({ - device, - alias, -}: { - device: Device - alias?: string | undefined -}) => { - const { - update, - settings: { managementCodes }, - } = useSettings() - const currentCode = managementCodes[device.id] - const [code, setCode] = useState(currentCode ?? '') - return ( -
-
- {alias ?? device.id} - { - const code = (e.target as HTMLInputElement).value - setCode(code) - }} - name={`code-${device.id}`} - /> -
- {(currentCode?.length ?? 0) > 0 && ( - - )} - -
- ) -} diff --git a/src/DeviceList.tsx b/src/DeviceList.tsx index 0bc0726a..8546dfdd 100644 --- a/src/DeviceList.tsx +++ b/src/DeviceList.tsx @@ -1,15 +1,8 @@ import styled from 'styled-components' import { DisconnectedWarning } from './DisconnectedWarning.js' import { HistoryOnly } from './HistoryOnly.js' -import { LightbulbDevice } from './LightbulbDevice.js' import { Tracker } from './Tracker.js' -import { - GeoLocationSource, - isLightBulb, - isTracker, - useDevices, -} from './context/Devices.js' -import { useMap } from './context/Map.js' +import { isTracker, useDevices } from './context/Devices.js' import { useSettings } from './context/Settings.js' import { useHistoryChart } from './context/showHistoryChart.js' @@ -115,8 +108,7 @@ export const IssuerName = styled.dd` export const DeviceList = () => { const { devices, lastUpdateTs } = useDevices() - const map = useMap() - const { hide: hideHistoryChart, show: showHistoryChart } = useHistoryChart() + const { show: showHistoryChart } = useHistoryChart() const { settings: { showFavorites, favorites }, } = useSettings() @@ -149,28 +141,6 @@ export const DeviceList = () => { ) - if (isLightBulb(device)) - return ( -
  • - { - if (device.state?.geo !== undefined) { - map?.center( - { - ...device.state.geo, - accuracy: 0, - source: GeoLocationSource.fixed, - }, - 16, - ) - } - hideHistoryChart() - }} - /> -
    • - ) if (device.history !== undefined) return (
  • diff --git a/src/LightbulbDevice.tsx b/src/LightbulbDevice.tsx deleted file mode 100644 index 750ce2c9..00000000 --- a/src/LightbulbDevice.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import { Lightbulb, UploadCloud } from 'lucide-preact' -import { LastUpdate, Properties, Title } from './DeviceList' -import { DeviceName } from './DeviceName' -import { RGBControl } from './RGBControl' -import { RelativeTime } from './RelativeTime' -import { useDevices, type Device } from './context/Devices' -import { useSettings } from './context/Settings' -import { useWebsocket } from './context/WebsocketConnection' - -export const LightbulbDevice = ({ - device, - onClick, -}: { - device: Device - onClick: () => void -}) => { - const { lastUpdateTs } = useDevices() - const { settings } = useSettings() - const { send } = useWebsocket() - const lastUpdateTime = lastUpdateTs(device.id) as number - const color = device.state?.led?.v?.color ?? [0, 0, 0] - const code = settings.managementCodes[device.id] - const unlocked = code !== undefined - - return ( - <> - - <Lightbulb - class={'mx-1'} - color={`rgb(${color[0]},${color[1]},${color[2]})`} - /> - <span class="info"> - <DeviceName device={device} /> - </span> - - {lastUpdateTime !== undefined && ( - <LastUpdate title="Last update"> - <UploadCloud strokeWidth={1} /> - <RelativeTime time={new Date(lastUpdateTime)} /> - </LastUpdate> - )} - - - {unlocked && ( - { - send({ - desired: { - led: { - v: { - color: newColor, - }, - }, - }, - deviceId: device.id, - code, - }) - }} - /> - )} - - - ) -} diff --git a/src/OnOffControl.tsx b/src/OnOffControl.tsx deleted file mode 100644 index fd337608..00000000 --- a/src/OnOffControl.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Lightbulb, LightbulbOff, ToggleLeft, ToggleRight } from 'lucide-preact' -import { useState } from 'preact/hooks' - -export const OnOffControl = ({ - on, - onChange, -}: { - on: boolean - onChange: (desired: boolean) => void -}) => { - const [desired, setDesired] = useState(on) - return ( - <> - {on && } - {!on && } - - - ) -} diff --git a/src/RGBControl.tsx b/src/RGBControl.tsx deleted file mode 100644 index b033eed5..00000000 --- a/src/RGBControl.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { Check, Lightbulb, Palette } from 'lucide-preact' -import { useState } from 'preact/hooks' -import styled from 'styled-components' -import { hexToRGB } from './hexToRGB' -import { rgbToHex, type RGB } from './rgbToHex' - -const ColorInput = styled.input` - border: 0; - width: 25px; - height: 25px; - margin-left: 0.5rem; - margin-right: 0.5rem; -` - -const presetColors: RGB[] = [ - hexToRGB('#00a9ce'), - hexToRGB('#c6007e'), - hexToRGB('#00ff00'), -] - -export const RGBControl = ({ - color, - onChange, -}: { - color: RGB - onChange: (color: RGB) => void -}) => { - const [current, set] = useState(color) - return ( - <> -
    - -
    -
    - {presetColors.map((color) => ( - - ))} - { - set(hexToRGB((e.target as HTMLInputElement).value)) - }} - /> - -
    - - ) -} diff --git a/src/Settings.tsx b/src/Settings.tsx index 14c18c64..683ecce0 100644 --- a/src/Settings.tsx +++ b/src/Settings.tsx @@ -1,7 +1,6 @@ import { ChevronUp, Settings2, Star, StarOff } from 'lucide-preact' import styled from 'styled-components' -import { CodeInput } from './CodeInput.js' -import { isLightBulb, useDevices } from './context/Devices.js' +import { useDevices } from './context/Devices.js' import { useSettings } from './context/Settings.js' const SettingsPanel = styled.aside` @@ -17,7 +16,6 @@ const SettingsPanel = styled.aside` ` export const Settings = () => { - const { devices, alias } = useDevices() const { settings: { showSettings, @@ -27,7 +25,6 @@ export const Settings = () => { showFavorites, consumptionThreshold, showUpdateWarning, - favorites, }, update, reset, @@ -89,22 +86,6 @@ export const Settings = () => { Show firmware update warning? -

    Management

    -

    Below you can provide the device's code to manage it.

    - {/* Code input for Lightbulbs */} - {Object.values(devices) - .filter(isLightBulb) - ?.filter(({ id }) => { - if (!showFavorites) return true - return favorites.includes(id) - }) - .map((device) => ( - - ))}

    Solar

  • diff --git a/src/context/Devices.tsx b/src/context/Devices.tsx index 3bb6f483..004e3b4c 100644 --- a/src/context/Devices.tsx +++ b/src/context/Devices.tsx @@ -115,14 +115,6 @@ export type Reported = Partial<{ ts: number // 1670245539000 } sol: SolarInfo - // LED lights - led: { - v: { - type: 'rgb' | 'on/off' - color?: [number, number, number] // [0, 169, 206] - } - ts: number // 1670245539000 - } // Device has a fixed geo location geo: { lng: number // 10.4383147713927 @@ -196,9 +188,6 @@ export const isTracker = (device: Device): boolean => { const { appV, brdV } = device.state?.dev?.v ?? {} return appV !== undefined && brdV !== undefined } -export const isLightBulb = (device: Device): boolean => - device.state?.led !== undefined - export const hasSoftSIM = (device: Device): boolean => device.state?.dev?.v?.appV?.includes('softsim') ?? false @@ -369,7 +358,6 @@ const getLastUpdateTime = (device?: Device): null | number => { state?.dev?.ts, state?.env?.ts, state?.gnss?.ts, - state?.led?.ts, state?.roam?.ts, state?.sol?.ts, ].filter((s) => s !== undefined) as number[] diff --git a/src/context/WebsocketConnection.tsx b/src/context/WebsocketConnection.tsx index 509256a6..373d4f82 100644 --- a/src/context/WebsocketConnection.tsx +++ b/src/context/WebsocketConnection.tsx @@ -1,6 +1,5 @@ import { createContext, type ComponentChildren } from 'preact' import { useContext, useEffect, useRef, useState } from 'preact/hooks' -import type { RGB } from '../rgbToHex' import { useDevices, type GeoLocation, @@ -21,15 +20,6 @@ enum MessageContext { DeviceMessage = 'https://thingy.rocks/device-message', DeviceLocation = 'https://thingy.rocks/device-location', DeviceHistory = 'https://thingy.rocks/device-history', - Lightbulb = 'https://thingy.rocks/lightbulb', -} - -type LightbulbMessage = { - '@context': MessageContext.Lightbulb - lightbulb: { - type: 'rgb' - color?: RGB - } } type Message = { @@ -53,7 +43,6 @@ type Message = { '@context': MessageContext.DeviceHistory history: Summary } - | LightbulbMessage ) export const Provider = ({ children }: { children: ComponentChildren }) => { @@ -115,14 +104,6 @@ export const Provider = ({ children }: { children: ComponentChildren }) => { case MessageContext.DeviceHistory: deviceMessages.updateHistory(message.deviceId, message.history) break - case MessageContext.Lightbulb: - deviceMessages.updateState(message.deviceId, { - led: { - v: message.lightbulb, - ts: Date.now(), - }, - }) - break default: console.error(`[WS]`, 'Unknown message', message) } @@ -143,11 +124,14 @@ export const Provider = ({ children }: { children: ComponentChildren }) => { if (!connected) return if (connection.current === undefined) return - const pingInterval = setInterval(() => { - connection.current?.send( - JSON.stringify({ message: 'sendmessage', data: 'PING' }), - ) - }, 1000 * 60 * 9) // every 9 minutes + const pingInterval = setInterval( + () => { + connection.current?.send( + JSON.stringify({ message: 'sendmessage', data: 'PING' }), + ) + }, + 1000 * 60 * 9, + ) // every 9 minutes // Initial greeting connection.current.send( diff --git a/src/hexToRGB.spec.ts b/src/hexToRGB.spec.ts deleted file mode 100644 index e629d73c..00000000 --- a/src/hexToRGB.spec.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { hexToRGB } from './hexToRGB' - -describe('hexToRGB()', () => { - it('should convert hex to RGB', () => { - expect(hexToRGB('#ffffff')).toEqual([255, 255, 255]) - expect(hexToRGB('#de823b')).toEqual([222, 130, 59]) - }) -}) diff --git a/src/hexToRGB.ts b/src/hexToRGB.ts deleted file mode 100644 index f6fd0b0f..00000000 --- a/src/hexToRGB.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type { RGB } from './rgbToHex' - -export const hexToRGB = (hex: string): RGB => { - return [ - parseInt(hex.slice(1, 3), 16), - parseInt(hex.slice(3, 5), 16), - parseInt(hex.slice(5, 7), 16), - ] -} diff --git a/src/rgbToHex.spec.ts b/src/rgbToHex.spec.ts deleted file mode 100644 index 8f436ed9..00000000 --- a/src/rgbToHex.spec.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { rgbToHex } from './rgbToHex' - -describe('rgbToHex()', () => { - it('should convert hex to RGB', () => { - expect(rgbToHex([255, 255, 255])).toEqual('ffffff') - expect(rgbToHex([222, 130, 59])).toEqual('de823b') - }) -}) diff --git a/src/rgbToHex.tsx b/src/rgbToHex.tsx deleted file mode 100644 index 9f58ba3a..00000000 --- a/src/rgbToHex.tsx +++ /dev/null @@ -1,4 +0,0 @@ -export type RGB = [R: number, G: number, B: number] - -export const rgbToHex = (rgb: RGB): string => - rgb.map((n) => n.toString(16).padStart(2, '0')).join('') diff --git a/src/test-device/FakeLight.tsx b/src/test-device/FakeLight.tsx deleted file mode 100644 index db15ee5a..00000000 --- a/src/test-device/FakeLight.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { FakeDevice } from './FakeDevice' - -export const FakeLight = () => - -import type { Reported } from '../context/Devices' - -const fakeLightState = (): Reported => ({ - led: { - v: { - type: 'rgb', - color: [0, 169, 206], - }, - ts: Date.now(), - }, - geo: { - lng: 10.4383147713927, - lat: 63.42503380159108, - }, -})