Add select for relays

central_frontend/src/widgets/forms/SelectMultipleRelaysInput.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { DeviceRelay, RelayID } from "../../api/DeviceApi";
+import { RelayApi } from "../../api/RelayApi";
+import { AsyncWidget } from "../AsyncWidget";
+import { MultipleSelectInput } from "./MultipleSelectInput";
+
+export function SelectMultipleRelaysInput(p: {
+  label: string;
+  value: RelayID[];
+  onValueChange: (ids: RelayID[]) => void;
+  exclude?: RelayID[];
+  helperText?: string;
+}): React.ReactElement {
+  const [list, setList] = React.useState<DeviceRelay[]>();
+
+  const load = async () => {
+    setList(await RelayApi.GetList());
+  };
+
+  const values =
+    list?.map((r) => {
+      return {
+        label: r.name,
+        value: r.id,
+      };
+    }) ?? [];
+
+  return (
+    <AsyncWidget
+      loadKey={1}
+      load={load}
+      errMsg="Failed to load the list of relays!"
+      build={() => (
+        <MultipleSelectInput
+          label={p.label}
+          onChange={p.onValueChange}
+          selected={p.value}
+          helperText={p.helperText}
+          values={values}
+        />
+      )}
+    />
+  );
+}