-
31 | {children}
32 |
20 |
27 | );
28 | });
29 |
30 | export default DashboardFeatureWrapper;
31 |
--------------------------------------------------------------------------------
/src/components/dashboard-page/index.tsx:
--------------------------------------------------------------------------------
1 | import type { AnySubFeature, BasicFeature, DeviceState, FeatureAccessMode, FeatureWithAnySubFeatures, FeatureWithSubFeatures } from "../../types.js";
2 |
3 | const BLACKLISTED_PARTIAL_FEATURE_NAMES = ["schedule_", "_mode", "_options", "_startup", "_type", "inching_"];
4 |
5 | const BLACKLISTED_FEATURE_NAMES = [
6 | "battery",
7 | "linkquality",
8 | "options",
9 | "position",
10 | "programming",
11 | "strength",
12 | "voltage",
13 | "warning",
14 | "gradient",
15 | "power_outage_memory",
16 | "power_on_behavior",
17 | ];
18 |
19 | const WHITELISTED_FEATURE_NAMES = ["state", "brightness", "color_temp", "mode", "sound", "occupancy", "tamper", "alarm", "action", "contact"];
20 |
21 | const isValid = (name: string | undefined, _access: FeatureAccessMode): boolean => {
22 | if (name) {
23 | if (WHITELISTED_FEATURE_NAMES.includes(name)) {
24 | return true;
25 | }
26 |
27 | for (const bName of BLACKLISTED_PARTIAL_FEATURE_NAMES) {
28 | if (name.includes(bName)) {
29 | return false;
30 | }
31 | }
32 |
33 | if (BLACKLISTED_FEATURE_NAMES.includes(name)) {
34 | return false;
35 | }
36 | }
37 |
38 | return true;
39 | };
40 |
41 | export const getDashboardFeatures = (
42 | feature: BasicFeature | FeatureWithSubFeatures,
43 | deviceState: DeviceState = {},
44 | ): FeatureWithAnySubFeatures | undefined => {
45 | const { property, name, access } = feature;
46 |
47 | if ("features" in feature && feature.features && feature.features.length > 0) {
48 | const features: AnySubFeature[] = [];
49 | const state = property ? (deviceState[property] as DeviceState) : deviceState;
50 |
51 | for (const subFeature of feature.features) {
52 | const validFeature = getDashboardFeatures(subFeature, state);
53 |
54 | if (validFeature && !features.some((f) => f.property === validFeature.property)) {
55 | features.push(validFeature);
56 | }
57 | }
58 |
59 | return features.length > 0 || isValid(name, access) ? { ...feature, features } : undefined;
60 | }
61 |
62 | return isValid(name, access) ? { ...feature } : undefined;
63 | };
64 |
--------------------------------------------------------------------------------
/src/components/device-page/ExternalDefinition.tsx:
--------------------------------------------------------------------------------
1 | import { memo, useCallback, useContext, useState } from "react";
2 | import { useTranslation } from "react-i18next";
3 | import { Link } from "react-router";
4 | import { WebSocketApiRouterContext } from "../../WebSocketApiRouterContext.js";
5 | import { SUPPORT_NEW_DEVICES_DOCS_URL } from "../../consts.js";
6 | import { useAppSelector } from "../../hooks/useApp.js";
7 | import type { Device } from "../../types.js";
8 | import Button from "../Button.js";
9 | import TextareaField from "../form-fields/TextareaField.js";
10 |
11 | export interface ExternalDefinitionProps {
12 | device: Device;
13 | }
14 |
15 | const ExternalDefinition = memo((props: ExternalDefinitionProps) => {
16 | const { device } = props;
17 | const [loading, setLoading] = useState
22 | {t(featureName!, { defaultValue: fallbackFeatureName })}
23 | {feature.endpoint ? ` (${feature.endpoint})` : null}
24 |
25 | {children}
26 |
43 | {loading ? (
44 |
45 | ) : (
46 | className="btn btn-primary" onClick={onGenerateExternalDefinitionClick}>
47 | {t("generate_external_definition")}
48 |
49 | )}
50 |
51 | );
52 | });
53 |
54 | export default ExternalDefinition;
55 |
--------------------------------------------------------------------------------
/src/components/device-page/HeaderDeviceSelector.tsx:
--------------------------------------------------------------------------------
1 | import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import { memo, useMemo, useState } from "react";
4 | import { useTranslation } from "react-i18next";
5 | import { Link } from "react-router";
6 | import type { TabName } from "../../pages/DevicePage.js";
7 | import type { RootState } from "../../store.js";
8 | import type { Device } from "../../types.js";
9 | import PopoverDropdown from "../PopoverDropdown.js";
10 |
11 | interface HeaderDeviceSelectorProps {
12 | devices: RootState["devices"];
13 | currentDevice: Device | undefined;
14 | tab?: TabName;
15 | }
16 |
17 | const HeaderDeviceSelector = memo((props: HeaderDeviceSelectorProps) => {
18 | const { devices, currentDevice, tab = "info" } = props;
19 | const [searchTerm, setSearchTerm] = useState
14 |
20 | );
21 | });
22 |
23 | export default LastLogResult;
24 |
--------------------------------------------------------------------------------
/src/components/device-page/ScenePicker.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from "react";
2 | import { useTranslation } from "react-i18next";
3 | import type { Scene } from "../../types.js";
4 | import InputField from "../form-fields/InputField.js";
5 | import SelectField from "../form-fields/SelectField.js";
6 |
7 | type ScenePickerProps = {
8 | value?: Scene;
9 | scenes: Scene[];
10 | onSceneSelected: (sceneId: number) => void;
11 | };
12 |
13 | const ScenePicker = memo((props: ScenePickerProps) => {
14 | const { t } = useTranslation("scene");
15 | const { onSceneSelected, scenes = [], value } = props;
16 |
17 | return scenes.length > 0 ? (
18 |
15 |
16 | [{message.timestamp}] {message.message}
17 |
18 |
19 |
86 | {[...bindingRules, newBindingRule].map((rule) => (
87 |
90 | );
91 | }
92 |
--------------------------------------------------------------------------------
/src/components/device-page/tabs/Clusters.tsx:
--------------------------------------------------------------------------------
1 | import { faArrowCircleLeft, faArrowCircleRight } from "@fortawesome/free-solid-svg-icons";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import { type JSX, useMemo } from "react";
4 | import { useTranslation } from "react-i18next";
5 | import type { Device } from "../../../types.js";
6 |
7 | interface ClustersProps {
8 | device: Device;
9 | }
10 |
11 | export default function Clusters({ device }: ClustersProps) {
12 | const { t } = useTranslation("zigbee");
13 |
14 | const clustersByEndpoint = useMemo(() => {
15 | const clusters: JSX.Element[] = [];
16 |
17 | for (const endpointId in device.endpoints) {
18 | const endpoint = device.endpoints[endpointId];
19 |
20 | clusters.push(
21 |
23 |
57 | 24 | {t("endpoint")} {endpointId} 25 |
26 |-
27 |
-
28 | 29 |40 |
30 |
32 |{t("output_clusters")} 31 | -
33 | {endpoint.clusters.output.map((cluster) => (
34 |
- 35 | {cluster} 36 | 37 | ))} 38 |
41 | -
42 | 43 |54 |
44 |
46 |{t("input_clusters")} 45 | -
47 | {endpoint.clusters.input.map((cluster) => (
48 |
- 49 | {cluster} 50 | 51 | ))} 52 |
55 |
- {clustersByEndpoint}
32 |
37 |
28 | {device.definition.options.map((option) => (
29 |
40 | ) : (
41 | t("empty_exposes_definition")
42 | );
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/device-page/tabs/Exposes.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useContext } from "react";
2 | import type { Device } from "../../../types.js";
3 |
4 | import { useTranslation } from "react-i18next";
5 | import { WebSocketApiRouterContext } from "../../../WebSocketApiRouterContext.js";
6 | import { useAppSelector } from "../../../hooks/useApp.js";
7 | import Feature from "../../features/Feature.js";
8 | import FeatureWrapper from "../../features/FeatureWrapper.js";
9 | import { getFeatureKey } from "../../features/index.js";
10 |
11 | type ExposesProps = {
12 | device: Device;
13 | };
14 |
15 | export default function Exposes(props: ExposesProps) {
16 | const { device } = props;
17 | const { t } = useTranslation(["exposes"]);
18 | const { sendMessage } = useContext(WebSocketApiRouterContext);
19 | const deviceState = useAppSelector((state) => state.deviceStates[device.friendly_name] ?? {});
20 |
21 | const onChange = useCallback(
22 | async (value: Record
45 | {device.definition.exposes.map((expose) => (
46 |
58 | ) : (
59 | t("empty_exposes_definition")
60 | );
61 | }
62 |
--------------------------------------------------------------------------------
/src/components/device-page/tabs/Reporting.tsx:
--------------------------------------------------------------------------------
1 | import { type JSX, useCallback, useContext, useEffect, useMemo, useState } from "react";
2 | import type { Device } from "../../../types.js";
3 |
4 | import { WebSocketApiRouterContext } from "../../../WebSocketApiRouterContext.js";
5 | import ReportingRow from "../ReportingRow.js";
6 |
7 | interface ReportingProps {
8 | device: Device;
9 | }
10 |
11 | export type NiceReportingRule = {
12 | isNew?: string;
13 | endpoint: string;
14 | } & Device["endpoints"][number]["configured_reportings"][number];
15 |
16 | const convertBindingsIntoNiceStructure = (device: Device): NiceReportingRule[] => {
17 | const niceReportingRules: NiceReportingRule[] = [];
18 |
19 | for (const key in device.endpoints) {
20 | const endpoint = device.endpoints[key];
21 |
22 | for (const cr of endpoint.configured_reportings) {
23 | niceReportingRules.push({
24 | ...cr,
25 | endpoint: key,
26 | });
27 | }
28 | }
29 |
30 | return niceReportingRules;
31 | };
32 |
33 | const getRuleKey = (rule: NiceReportingRule): string => `${rule.isNew}-${rule.endpoint}-${rule.cluster}-${rule.attribute}`;
34 |
35 | export default function Reporting(props: ReportingProps): JSX.Element {
36 | const { device } = props;
37 | const { sendMessage } = useContext(WebSocketApiRouterContext);
38 | const [newReportingRule, setNewReportingRule] = useState
82 | {[...reportingRules, newReportingRule].map((rule) => (
83 |
86 | );
87 | }
88 |
--------------------------------------------------------------------------------
/src/components/device-page/tabs/Scene.tsx:
--------------------------------------------------------------------------------
1 | import { useAppSelector } from "../../../hooks/useApp.js";
2 | import type { Device } from "../../../types.js";
3 | import AddScene from "../AddScene.js";
4 | import RecallRemove from "../RecallRemove.js";
5 |
6 | type SceneProps = {
7 | device: Device;
8 | };
9 |
10 | export default function Scene(props: SceneProps) {
11 | const deviceState = useAppSelector((state) => state.deviceStates[props.device.friendly_name] ?? {});
12 |
13 | return (
14 |
15 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/device-page/tabs/State.tsx:
--------------------------------------------------------------------------------
1 | import { useAppSelector } from "../../../hooks/useApp.js";
2 | import type { Device } from "../../../types.js";
3 |
4 | type StatesProps = { device: Device };
5 |
6 | export default function State(props: StatesProps) {
7 | const { device } = props;
8 | const deviceState = useAppSelector((state) => state.deviceStates[device.friendly_name] ?? {});
9 | const jsonState = JSON.stringify(deviceState, null, 4);
10 | const lines = Math.max(10, (jsonState.match(/\n/g) || "").length + 1);
11 |
12 | return ;
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/device/DeviceControlEditName.tsx:
--------------------------------------------------------------------------------
1 | import NiceModal from "@ebay/nice-modal-react";
2 | import { faEdit } from "@fortawesome/free-solid-svg-icons";
3 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4 | import { memo } from "react";
5 | import { useTranslation } from "react-i18next";
6 | import Button from "../Button.js";
7 | import { RenameDeviceModal } from "../modal/components/RenameDeviceModal.js";
8 |
9 | interface DeviceControlEditNameProps {
10 | name: string;
11 | renameDevice(old: string, newName: string, homeassistantRename: boolean): Promise
16 |
18 |
19 |
21 |
33 |
40 | className="btn btn-warning join-item btn-square"
41 | onClick={configureDevice}
42 | item={device.ieee_address}
43 | title={t("reconfigure")}
44 | modalDescription={t("common:dialog_confirmation_prompt")}
45 | modalCancelLabel={t("common:cancel")}
46 | disabled={disableInterview}
47 | >
48 |
51 | className="btn btn-info join-item btn-square"
52 | onClick={interviewDevice}
53 | item={device.ieee_address}
54 | title={t("interview")}
55 | modalDescription={t("common:dialog_confirmation_prompt")}
56 | modalCancelLabel={t("common:cancel")}
57 | disabled={disableInterview}
58 | >
59 |
62 | onClick={async () => await NiceModal.show(RemoveDeviceModal, { device, removeDevice })}
63 | className="btn btn-error join-item btn-square"
64 | title={t("remove_device")}
65 | >
66 |
69 | );
70 | }
71 |
--------------------------------------------------------------------------------
/src/components/device/DeviceControlUpdateDesc.tsx:
--------------------------------------------------------------------------------
1 | import NiceModal from "@ebay/nice-modal-react";
2 | import { faEdit } from "@fortawesome/free-solid-svg-icons";
3 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
4 | import { memo } from "react";
5 | import { useTranslation } from "react-i18next";
6 | import type { Device } from "../../types.js";
7 | import Button from "../Button.js";
8 | import { UpdateDeviceDescModal } from "../modal/components/EditDeviceDescModal.js";
9 |
10 | interface DeviceControlUpdateDescProps {
11 | device: Device;
12 | setDeviceDescription(old: string, newDesc: string): Promise
51 | {values.map((v) => (
52 |
53 | key={isPrimitive(v) ? v : v.name}
54 | className={`btn btn-soft btn-sm join-item${(isPrimitive(v) ? v === value : v.value === (isPrimitive(value) ? value : value?.value)) ? " btn-active" : ""}`}
55 | onClick={(item) => onChange(item)}
56 | item={isPrimitive(v) ? v : v.value}
57 | title={isPrimitive(v) ? `${v}` : v.description}
58 | >
59 | {isPrimitive(v) ?
63 | );
64 | });
65 |
66 | export default EnumEditor;
67 |
--------------------------------------------------------------------------------
/src/components/editors/RangeEditor.tsx:
--------------------------------------------------------------------------------
1 | import { type ChangeEvent, type InputHTMLAttributes, memo, useCallback, useEffect, useState } from "react";
2 | import EnumEditor, { type ValueWithLabelOrPrimitive } from "./EnumEditor.js";
3 |
4 | type RangeProps = Omit
28 | {!minimal && steps ?
67 | );
68 | });
69 |
70 | export default RangeEditor;
71 |
--------------------------------------------------------------------------------
/src/components/editors/TextEditor.tsx:
--------------------------------------------------------------------------------
1 | import { type InputHTMLAttributes, memo, useEffect, useState } from "react";
2 |
3 | type TextProps = Omit
31 |
43 |
49 | ) : null}
50 | {(!minimal || !showRange) && (
51 |
65 | )}
66 |
44 | {min}
45 | {minimal && {currentValue}}
46 | {max}
47 |
48 |
9 | {feature.property && (
10 |
11 |
16 | );
17 | });
18 |
19 | export default BaseViewer;
20 |
--------------------------------------------------------------------------------
/src/components/features/Binary.tsx:
--------------------------------------------------------------------------------
1 | import { faQuestion } from "@fortawesome/free-solid-svg-icons";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import { type ChangeEvent, memo, useCallback } from "react";
4 | import { useTranslation } from "react-i18next";
5 | import { type BinaryFeature, FeatureAccessMode } from "../../types.js";
6 | import Button from "../Button.js";
7 | import DisplayValue from "../value-decorators/DisplayValue.js";
8 | import BaseViewer from "./BaseViewer.js";
9 | import NoAccessError from "./NoAccessError.js";
10 | import type { BaseFeatureProps } from "./index.js";
11 |
12 | type BinaryProps = BaseFeatureProps
34 | {showOnOffButtons && (
35 | className="btn btn-link" item={valueOff} onClick={onButtonClick}>
36 | className="btn btn-link" item={valueOn} onClick={onButtonClick}>
46 |
50 | );
51 | }
52 |
53 | if (access & FeatureAccessMode.STATE) {
54 | return
48 | item={feature} onClick={onSyncClick} className="btn btn-xs btn-square btn-primary">
61 |
65 | );
66 | });
67 |
68 | export default FeatureWrapper;
69 |
--------------------------------------------------------------------------------
/src/components/features/Gradient.tsx:
--------------------------------------------------------------------------------
1 | import { memo, useCallback, useEffect, useState } from "react";
2 | import { useTranslation } from "react-i18next";
3 | import type { GradientFeature } from "../../types.js";
4 | import Button from "../Button.js";
5 | import ColorEditor from "../editors/ColorEditor.js";
6 | import type { BaseFeatureProps } from "./index.js";
7 |
8 | type GradientProps = BaseFeatureProps
49 |
51 |
52 |
58 |
53 | {label}
54 | {feature.endpoint ? ` (${t("zigbee:endpoint")}: ${feature.endpoint})` : ""}
55 |
56 | {feature.description && t(feature.description)}
57 | {children}
59 | {isReadable && (
60 |
62 | {colors.map((color, idx) => (
63 | // biome-ignore lint/suspicious/noArrayIndexKey: not much data
64 |
92 | );
93 | });
94 |
--------------------------------------------------------------------------------
/src/components/features/Light.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from "react";
2 | import type { LightFeature, WithAnySubFeatures } from "../../types.js";
3 | import { scale } from "../../utils.js";
4 | import type { ValueWithLabelOrPrimitive } from "../editors/EnumEditor.js";
5 | import FeatureSubFeatures from "./FeatureSubFeatures.js";
6 | import type { BaseWithSubFeaturesProps } from "./index.js";
7 |
8 | type LightProps = BaseWithSubFeaturesProps
65 | {
67 | setColor(idx, color.hex);
68 | }}
69 | value={color}
70 | format="hex"
71 | />
72 | {canRemove && (
73 | className="btn btn-error" onClick={() => removeColor(idx)}>
74 | -
75 |
76 | )}
77 |
78 | ))}
79 | {canAdd && (
80 |
81 | className="btn btn-success" onClick={addColor}>
82 | +
83 |
84 |
85 | )}
86 |
87 |
90 |
91 |
65 |
68 |
69 | )}
70 |
71 | );
72 | }
73 |
74 | if (access & FeatureAccessMode.STATE) {
75 | return
8 | Unknown access
10 | );
11 | });
12 |
13 | export default NoAccessError;
14 |
--------------------------------------------------------------------------------
/src/components/features/Numeric.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from "react";
2 | import { FeatureAccessMode, type NumericFeature } from "../../types.js";
3 | import type { ValueWithLabelOrPrimitive } from "../editors/EnumEditor.js";
4 | import RangeEditor from "../editors/RangeEditor.js";
5 | import BaseViewer from "./BaseViewer.js";
6 | import NoAccessError from "./NoAccessError.js";
7 | import type { BaseFeatureProps } from "./index.js";
8 |
9 | interface NumericProps extends BaseFeatureProps{props.feature.access}
9 | {t("add_to_group_header")}
35 |
36 | setEndpoint(e)} />
38 |
39 |
51 |
,
61 | );
62 | }
63 | }
64 |
65 | return members;
66 | }, [group, devices, lastSeenConfig, deviceStates, removeMember, setDeviceState, getDeviceState]);
67 |
68 | return {groupMembers}
;
69 | });
70 |
71 | export default GroupMembers;
72 |
--------------------------------------------------------------------------------
/src/components/group-page/HeaderGroupSelector.tsx:
--------------------------------------------------------------------------------
1 | import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import { memo, useMemo, useState } from "react";
4 | import { useTranslation } from "react-i18next";
5 | import { Link } from "react-router";
6 | import type { TabName } from "../../pages/GroupPage.js";
7 | import type { RootState } from "../../store.js";
8 | import type { Group } from "../../types.js";
9 | import PopoverDropdown from "../PopoverDropdown.js";
10 |
11 | interface HeaderGroupSelectorProps {
12 | groups: RootState["groups"];
13 | currentGroup: Group | undefined;
14 | tab?: TabName;
15 | }
16 |
17 | const HeaderGroupSelector = memo((props: HeaderGroupSelectorProps) => {
18 | const { groups, currentGroup, tab = "devices" } = props;
19 | const [searchTerm, setSearchTerm] = useState
15 |
25 |
16 |
18 |
19 |
21 |
22 |
24 |
31 |
36 |
57 |
60 |
49 | setDescription(e.target.value)}
53 | rows={3}
54 | value={description}
55 | />
56 |
57 |
47 |
51 |
47 | setFriendlyName(e.target.value)}
51 | value={friendlyName}
52 | type="text"
53 | />
54 | {homeassistantEnabled && (
55 | setIsHASSRename(e.target.checked)}
59 | checked={isHASSRename}
60 | />
61 | )}
62 |
63 |
47 | setFriendlyName(e.target.value)}
51 | value={friendlyName}
52 | type="text"
53 | required
54 | />
55 |
56 |
31 |
54 | 32 | {t(ZIGBEE_RELATIONSHIP_TMAP[relationship])} ({relations.length}) 33 |
34 |-
35 | {relations.map((relation) => {
36 | const device = devices.find((device) => device.ieee_address === relation.source.ieeeAddr);
37 |
38 | return device ? (
39 |
- 48 | {t("zigbee:unknown")}: {relation.source.ieeeAddr} 49 | 50 | ); 51 | })} 52 |
29 |
63 | );
64 | });
65 |
66 | export default ContextMenu;
67 |
--------------------------------------------------------------------------------
/src/components/network-page/raw-map/Legend.tsx:
--------------------------------------------------------------------------------
1 | import { faArrowRightLong, faCircle } from "@fortawesome/free-solid-svg-icons";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import { memo } from "react";
4 | import { useTranslation } from "react-i18next";
5 | import { EDGE_RELATIONSHIP_FILL_COLORS, NODE_TYPE_FILL_COLORS, ZigbeeRelationship } from "..";
6 |
7 | const Legend = memo(() => {
8 | const { t } = useTranslation("network");
9 |
10 | return (
11 |
30 |
62 | 31 | {/* */} 32 | {data.friendlyName} 33 | {/* */} 34 |
35 | {data.type} 36 | {data.ieeeAddr} 37 | 38 | {toHex(data.networkAddress, 4)} | {data.networkAddress} 39 | 40 | {parent && ( 41 | 42 | {t("parent")}: {parent} 43 | 44 | )} 45 | {data.failed && data.failed.length > 0 && ( 46 |
47 |
50 | )}
51 |
52 | {canCollapse && (
53 |
56 | )}
57 |
60 |
61 |
12 |
60 | );
61 | });
62 |
63 | export default Legend;
64 |
--------------------------------------------------------------------------------
/src/components/network-page/raw-map/SliderField.tsx:
--------------------------------------------------------------------------------
1 | import { FontAwesomeIcon, type FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
2 | import { type ChangeEvent, type DetailedHTMLProps, type InputHTMLAttributes, memo, useCallback, useEffect, useState } from "react";
3 |
4 | type SliderFieldProps = Omit<
5 | DetailedHTMLProps{t("legend")}
13 |
14 |
59 |
15 |
44 |
16 |
29 | {t("nodes")}:
17 |-
18 |
-
19 |
Coordinator 20 |
21 | -
22 |
Router 23 |
24 | -
25 |
EndDevice 26 |
27 |
30 |
43 | {t("edges")}:
31 |-
32 |
-
33 |
{t("parent")} 34 |
35 | -
36 |
{t("child")} 37 |
38 | -
39 |
{t("sibling")} 40 |
41 |
{t("legend_node_siblings")}
45 |{t("legend_node_size")}
46 |{t("legend_node_select")}
47 |{t("legend_node_fold")}
48 |{t("legend_edge_toggle")}
49 | {/* XXX: temporary */} 50 |Known issues:
51 |-
52 |
- 53 | If you cannot see labels (names/LQIs) after the map has finished loading, zoom-in sufficiently, switch the "{t("label_type")}" 54 | value to something else, then back to the one you want 55 | 56 |
- Edge colors are currently not working 57 |
44 |
62 | );
63 | });
64 |
65 | export default SliderField;
66 |
--------------------------------------------------------------------------------
/src/components/ota-page/OtaFileVersion.tsx:
--------------------------------------------------------------------------------
1 | import { memo, useMemo } from "react";
2 | import { useTranslation } from "react-i18next";
3 |
4 | type OtaFileVersionProps = {
5 | version?: number | null;
6 | };
7 |
8 | const OtaFileVersion = memo((props: OtaFileVersionProps) => {
9 | const { t } = useTranslation("ota");
10 | const versions = useMemo(() => {
11 | if (props.version == null || props.version < 0) {
12 | return undefined;
13 | }
14 |
15 | const versionString = props.version.toString(16).padStart(8, "0");
16 | const appRelease = `${versionString[0]}.${versionString[1]}`;
17 | const appBuild = versionString.slice(2, 4);
18 | const stackRelease = `${versionString[4]}.${versionString[5]}`;
19 | const stackBuild = versionString.slice(6);
20 |
21 | return [appRelease, appBuild, stackRelease, stackBuild];
22 | }, [props.version]);
23 |
24 | return versions === undefined ? (
25 | <>N/A
26 | ) : (
27 |
46 |
55 |
61 |
56 | {props.min}
57 | {currentValue}
58 | {props.max}
59 |
60 |
28 |
29 | {t("app")}: {`${versions[0]} build ${versions[1]}`}
30 |
31 |
32 | {t("stack")}: {`${versions[2]} build ${versions[3]}`}
33 |
34 |
35 | );
36 | });
37 |
38 | export default OtaFileVersion;
39 |
--------------------------------------------------------------------------------
/src/components/pickers/AttributePicker.tsx:
--------------------------------------------------------------------------------
1 | import { type ChangeEvent, type InputHTMLAttributes, type JSX, memo, useMemo } from "react";
2 | import { useTranslation } from "react-i18next";
3 | import type { Zigbee2MQTTAPI } from "zigbee2mqtt";
4 | import { useAppSelector } from "../../hooks/useApp.js";
5 | import type { AttributeDefinition, Device } from "../../types.js";
6 | import SelectField from "../form-fields/SelectField.js";
7 |
8 | interface AttributePickerProps extends Omit
32 |
35 | {t(name)}
33 |- {children}
-
76 |
- 77 | 78 | {t("total")} {devices.length - 1 /* coordinator */} 79 | 80 | 81 | {statRows} 82 |
7 |
8 | 
14 |
15 |
16 |
,
20 |
14 |
15 |
16 |
21 |
22 | 
28 |
29 |
30 |
,
34 | ];
35 |
36 | export default function Donate() {
37 | const { t } = useTranslation("settings");
38 |
39 | return (
40 |
28 |
29 |
30 |
41 | {t("donation_text")}
42 | {DONATE_ROWS.sort(() => Math.random() - 0.5)}
43 |
44 | );
45 | }
46 |
--------------------------------------------------------------------------------
/src/components/settings-page/tabs/Settings.tsx:
--------------------------------------------------------------------------------
1 | import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import type { JSONSchema7 } from "json-schema";
4 | import { useCallback, useContext, useState } from "react";
5 | import { useTranslation } from "react-i18next";
6 | import { WebSocketApiRouterContext } from "../../../WebSocketApiRouterContext.js";
7 | import { CONFIGURATION_DOCS_URL } from "../../../consts.js";
8 | import { useAppSelector } from "../../../hooks/useApp.js";
9 | import Button from "../../Button.js";
10 | import SettingsList from "../../json-schema/SettingsList.js";
11 |
12 | const ROOT_TAB = "main";
13 | const TABS = [ROOT_TAB, "frontend", "mqtt", "serial", "availability", "ota", "advanced", "homeassistant"];
14 |
15 | export default function Settings() {
16 | const { sendMessage } = useContext(WebSocketApiRouterContext);
17 | const bridgeInfo = useAppSelector((state) => state.bridgeInfo);
18 | const [currentTab, setCurrentTab] = useState
35 |
40 |
41 | {TABS.map((tab) => (
42 |
51 | ))}
52 |
69 |
70 | );
71 | }
72 |
--------------------------------------------------------------------------------
/src/components/table/TextFilter.tsx:
--------------------------------------------------------------------------------
1 | import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
3 | import type { Column } from "@tanstack/react-table";
4 | import { useTranslation } from "react-i18next";
5 | import DebouncedInput from "../form-fields/DebouncedInput.js";
6 |
7 | export default function TextFilter
53 | {currentTab === ROOT_TAB ? (
54 | }
57 | set={setSettings}
58 | rootOnly
59 | />
60 | ) : (
61 |
68 | remove(idx)}>
27 | {log!.message}
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/toasts/Toasts.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useState } from "react";
2 | import store2 from "store2";
3 | import { useAppSelector } from "../../hooks/useApp.js";
4 | import { MAX_ON_SCREEN_NOTIFICATIONS_KEY } from "../../localStoreConsts.js";
5 | import type { LogMessage } from "../../types.js";
6 | import Toast from "./Toast.js";
7 |
8 | const TOAST_EXPIRY_TIME = 5000;
9 |
10 | const BLACKLISTED_MESSAGES: string[] = ["MQTT publish"];
11 |
12 | export default function Toasts() {
13 | const notificationFilter = useAppSelector((state) => state.bridgeInfo.config.frontend.notification_filter);
14 | const lastLog = useAppSelector((state) => state.lastNonDebugLog);
15 | const [logs, setLogs] = useState
41 | {logs.slice(0, store2.get(MAX_ON_SCREEN_NOTIFICATIONS_KEY, 1)).map((log, idx) => (
42 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/value-decorators/Availability.tsx:
--------------------------------------------------------------------------------
1 | import { type JSX, memo } from "react";
2 | import { useTranslation } from "react-i18next";
3 | import type { AvailabilityState } from "../../types.js";
4 |
5 | export type AvailabilityStateProps = {
6 | availability: AvailabilityState;
7 | availabilityFeatureEnabled: boolean;
8 | availabilityEnabledForDevice: boolean | undefined;
9 | disabled: boolean;
10 | };
11 |
12 | const Availability = memo((props: AvailabilityStateProps): JSX.Element => {
13 | const { t } = useTranslation(["availability"]);
14 | const { availability, availabilityFeatureEnabled, availabilityEnabledForDevice, disabled } = props;
15 |
16 | if (disabled) {
17 | return {t("disabled")};
18 | }
19 |
20 | return (availabilityEnabledForDevice ?? availabilityFeatureEnabled) ? (
21 | {t(availability.state)}
22 | ) : (
23 |
29 | {t("disabled")}
30 |
31 | );
32 | });
33 |
34 | export default Availability;
35 |
--------------------------------------------------------------------------------
/src/components/value-decorators/Countdown.tsx:
--------------------------------------------------------------------------------
1 | import { memo, useEffect, useState } from "react";
2 |
3 | type CountdownProps = {
4 | seconds: number;
5 | hideZeroes: boolean;
6 | };
7 |
8 | const Countdown = memo((props: CountdownProps) => {
9 | const [remaining, setRemaining] = useState(props.seconds);
10 |
11 | useEffect(() => {
12 | const timer = setTimeout(() => {
13 | setRemaining(remaining - 1);
14 | }, 1000);
15 |
16 | return () => clearTimeout(timer);
17 | }, [remaining]);
18 |
19 | const hours = Math.floor(remaining / 3600);
20 | const minutes = Math.floor(remaining / 60) % 60;
21 | const seconds = Math.floor(remaining % 60);
22 | const showHours = !props.hideZeroes || hours > 0;
23 | const showMinutes = !props.hideZeroes || minutes > 0;
24 |
25 | return (
26 |
27 | {showHours && (
28 |
29 | {hours}
30 |
31 | )}
32 | {showHours && ":"}
33 | {showMinutes && (
34 |
35 | {minutes}
36 |
37 | )}
38 | {showMinutes && ":"}
39 |
40 | {seconds}
41 |
42 |
43 | );
44 | });
45 |
46 | export default Countdown;
47 |
--------------------------------------------------------------------------------
/src/components/value-decorators/DisplayValue.tsx:
--------------------------------------------------------------------------------
1 | import { type JSX, memo } from "react";
2 | import { useTranslation } from "react-i18next";
3 |
4 | type DisplayValueProps = {
5 | name: string;
6 | value: unknown;
7 | };
8 |
9 | const BooleanValueView = memo((props: DisplayValueProps) => {
10 | const { value, name } = props;
11 | const { t } = useTranslation("values");
12 |
13 | switch (name) {
14 | case "contact": {
15 | return value ? t("closed") : t("open");
16 | }
17 | case "occupancy": {
18 | return value ? t("occupied") : t("clear");
19 | }
20 | case "water_leak": {
21 | return value ? {t("leaking")} : t("clear");
22 | }
23 | case "tamper": {
24 | return value ? {t("tampered")} : t("clear");
25 | }
26 | case "supported": {
27 | return value ? t("supported") : t("not_supported");
28 | }
29 | default: {
30 | return value ? t("true") : t("false");
31 | }
32 | }
33 | });
34 |
35 | const DisplayValue = memo((props: DisplayValueProps): JSX.Element => {
36 | const { t } = useTranslation("values");
37 | const { value } = props;
38 |
39 | switch (typeof value) {
40 | case "boolean":
41 | return {t("common:unknown_group")}
;
38 | }
39 |
40 | switch (tab) {
41 | case "devices":
42 | return
52 |
53 |
56 |
57 |
60 |
61 | {content}
62 |
63 | );
64 | }
65 |
--------------------------------------------------------------------------------
/src/pages/HomePage.tsx:
--------------------------------------------------------------------------------
1 | import { type JSX, useEffect } from "react";
2 | import { useNavigate } from "react-router";
3 | import store2 from "store2";
4 | import { HOMEPAGE_KEY } from "../localStoreConsts.js";
5 |
6 | export default function HomePage(): JSX.Element {
7 | const navigate = useNavigate();
8 |
9 | useEffect(() => {
10 | navigate(store2.get(HOMEPAGE_KEY) === "dashboard" ? "/dashboard" : "/devices", { replace: true });
11 | }, [navigate]);
12 |
13 | return <>;
14 | }
15 |
--------------------------------------------------------------------------------
/src/styles/NotoSans-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nerivec/zigbee2mqtt-windfront/3d1d433a7063728ac20692bef11d1b2b0262aab0/src/styles/NotoSans-Regular.ttf
--------------------------------------------------------------------------------
/src/styles/styles.global.css:
--------------------------------------------------------------------------------
1 | @import "tailwindcss";
2 | @plugin "daisyui" {
3 | themes: all;
4 | logs: false;
5 | }
6 |
7 | /* Default uses grid, this does not play well with array-containing fieldsets */
8 | .fieldset {
9 | display: flex;
10 | flex-direction: column;
11 | flex-wrap: wrap;
12 | }
13 |
14 | /* Always wrap text in fieldset labels to avoid weird display with settings (long descriptions) */
15 | .fieldset > .label {
16 | white-space: normal;
17 | }
18 |
--------------------------------------------------------------------------------
/test/index.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe, it } from "vitest";
2 |
3 | describe("Test", () => {
4 | it("passes", () => {});
5 | });
6 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "./dist",
4 | "moduleResolution": "bundler",
5 | "module": "esnext",
6 | "target": "esnext",
7 | "lib": ["ESNext", "DOM"],
8 | "noImplicitAny": false,
9 | "removeComments": true,
10 | "sourceMap": true,
11 | "jsx": "react-jsx",
12 | "experimentalDecorators": true,
13 | "allowSyntheticDefaultImports": true,
14 | "esModuleInterop": true,
15 | "strictNullChecks": true,
16 | "resolveJsonModule": true,
17 | "checkJs": true,
18 | "skipLibCheck": true
19 | },
20 | "suppressImplicitAnyIndexErrors": true,
21 | "lib": ["dom", "esnext"],
22 | "include": ["./src/**/*", "./test/**/*"]
23 | }
24 |
--------------------------------------------------------------------------------
/vite.config.mts:
--------------------------------------------------------------------------------
1 | import tailwindcss from "@tailwindcss/vite";
2 | import react from "@vitejs/plugin-react";
3 | import { defineConfig } from "vite";
4 | import { compression } from "vite-plugin-compression2";
5 | import { startServer } from "./mocks/ws.js";
6 |
7 | export default defineConfig(async ({ command, mode }) => {
8 | if (command === "serve" && mode !== "test") {
9 | startServer();
10 | }
11 |
12 | return {
13 | root: "src",
14 | base: "",
15 | build: {
16 | emptyOutDir: true,
17 | outDir: "../dist",
18 | },
19 | test: {
20 | dir: "test",
21 | environment: "jsdom",
22 | onConsoleLog() {
23 | return false;
24 | },
25 | coverage: {
26 | enabled: false,
27 | include: ["src/**"],
28 | extension: [".ts", ".tsx"],
29 | // exclude: [],
30 | clean: true,
31 | cleanOnRerun: true,
32 | reportsDirectory: "coverage",
33 | reporter: ["text", "html"],
34 | reportOnFailure: false,
35 | thresholds: {
36 | /** current dev status, should maintain above this */
37 | statements: 0,
38 | functions: 0,
39 | branches: 0,
40 | lines: 0,
41 | },
42 | },
43 | },
44 | plugins: [react(), tailwindcss(), compression({ algorithm: "brotliCompress" })],
45 | server: {
46 | proxy: {
47 | "/api": {
48 | changeOrigin: true,
49 | target: process.env.Z2M_API_URI ? process.env.Z2M_API_URI : "ws://localhost:8579",
50 | ws: true,
51 | },
52 | },
53 | },
54 | };
55 | });
56 |
--------------------------------------------------------------------------------