You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
3.6 KiB
103 lines
3.6 KiB
import type { TabElementProps } from "../../Dialog/NewDeviceDialog.tsx";
|
|
import { Button } from "@components/UI/Button.tsx";
|
|
import { Mono } from "@components/generic/Mono.tsx";
|
|
import { useAppStore } from "@core/stores/appStore.ts";
|
|
import { useDeviceStore } from "@core/stores/deviceStore.ts";
|
|
import { subscribeAll } from "@core/subscriptions.ts";
|
|
import { randId } from "@core/utils/randId.ts";
|
|
import { MeshDevice } from "@meshtastic/core";
|
|
import { TransportWebSerial } from "@meshtastic/transport-web-serial";
|
|
import { useCallback, useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useMessageStore } from "../../../core/stores/messageStore/index.ts";
|
|
|
|
export const Serial = (
|
|
{ closeDialog }: TabElementProps,
|
|
) => {
|
|
const [connectionInProgress, setConnectionInProgress] = useState(false);
|
|
const [serialPorts, setSerialPorts] = useState<SerialPort[]>([]);
|
|
const { addDevice } = useDeviceStore();
|
|
const messageStore = useMessageStore();
|
|
const { setSelectedDevice } = useAppStore();
|
|
const { t } = useTranslation();
|
|
|
|
const updateSerialPortList = useCallback(async () => {
|
|
setSerialPorts(await navigator?.serial.getPorts());
|
|
}, []);
|
|
|
|
navigator?.serial?.addEventListener("connect", () => {
|
|
updateSerialPortList();
|
|
});
|
|
navigator?.serial?.addEventListener("disconnect", () => {
|
|
updateSerialPortList();
|
|
});
|
|
useEffect(() => {
|
|
updateSerialPortList();
|
|
}, [updateSerialPortList]);
|
|
|
|
const onConnect = async (port: SerialPort) => {
|
|
const id = randId();
|
|
const device = addDevice(id);
|
|
setSelectedDevice(id);
|
|
const transport = await TransportWebSerial.createFromPort(port);
|
|
const connection = new MeshDevice(transport, id);
|
|
connection.configure();
|
|
device.addConnection(connection);
|
|
subscribeAll(device, connection, messageStore);
|
|
|
|
closeDialog();
|
|
};
|
|
|
|
return (
|
|
<fieldset
|
|
className="flex w-full flex-col gap-2 p-4"
|
|
disabled={connectionInProgress}
|
|
>
|
|
<div className="flex h-48 flex-col gap-2 overflow-y-auto">
|
|
{serialPorts.map((port, index) => {
|
|
const { usbProductId, usbVendorId } = port.getInfo();
|
|
const vendor = usbVendorId ?? t("unknown.shortName");
|
|
const product = usbProductId ?? t("unknown.shortName");
|
|
return (
|
|
<Button
|
|
key={`${vendor}-${product}-${index}`}
|
|
disabled={port.readable !== null}
|
|
variant="default"
|
|
onClick={async () => {
|
|
setConnectionInProgress(true);
|
|
await onConnect(port);
|
|
// No need to setConnectionInProgress(false) here as closeDialog() unmounts.
|
|
}}
|
|
>
|
|
{t("newDeviceDialog.serialConnection.deviceIdentifier", {
|
|
index: index,
|
|
vendorId: vendor,
|
|
productId: product,
|
|
})}
|
|
</Button>
|
|
);
|
|
})}
|
|
{serialPorts.length === 0 && (
|
|
<Mono className="m-auto select-none">
|
|
{t("newDeviceDialog.serialConnection.noDevicesPaired")}
|
|
</Mono>
|
|
)}
|
|
</div>
|
|
<Button
|
|
variant="default"
|
|
onClick={async () => {
|
|
await navigator.serial.requestPort().then((port) => {
|
|
setSerialPorts(serialPorts.concat(port));
|
|
// No need to setConnectionInProgress(false) here if requestPort is quick
|
|
}).catch((error) => {
|
|
console.error("Error requesting port:", error);
|
|
}).finally(() => {
|
|
setConnectionInProgress(false);
|
|
});
|
|
}}
|
|
>
|
|
<span>{t("newDeviceDialog.serialConnection.newDeviceButton")}</span>
|
|
</Button>
|
|
</fieldset>
|
|
);
|
|
};
|
|
|