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.
63 lines
1.7 KiB
63 lines
1.7 KiB
import type React from "react";
|
|
|
|
import { Button, majorScale, Pane, TextInputField } from "evergreen-ui";
|
|
import { useForm } from "react-hook-form";
|
|
import { FiPlusCircle } from "react-icons/fi";
|
|
|
|
import { useAppStore } from "@app/core/stores/appStore.js";
|
|
import { useDeviceStore } from "@app/core/stores/deviceStore.js";
|
|
import { subscribeAll } from "@app/core/subscriptions.js";
|
|
import { randId } from "@app/core/utils/randId.js";
|
|
import { IHTTPConnection } from "@meshtastic/meshtasticjs";
|
|
|
|
export interface HTTPProps {
|
|
close: () => void;
|
|
}
|
|
|
|
export const HTTP = ({ close }: HTTPProps): JSX.Element => {
|
|
const { addDevice } = useDeviceStore();
|
|
const { setSelectedDevice } = useAppStore();
|
|
const { register, handleSubmit } = useForm<{
|
|
ip: string;
|
|
tls: boolean;
|
|
}>({
|
|
defaultValues: {
|
|
ip: "meshtastic.local",
|
|
tls: false,
|
|
},
|
|
});
|
|
|
|
const onSubmit = handleSubmit((data) => {
|
|
const id = randId();
|
|
const device = addDevice(id);
|
|
setSelectedDevice(id);
|
|
const connection = new IHTTPConnection(id);
|
|
// TODO: Promise never resolves
|
|
void connection.connect({
|
|
address: data.ip,
|
|
fetchInterval: 2000,
|
|
tls: data.tls,
|
|
});
|
|
device.addConnection(connection);
|
|
subscribeAll(device, connection);
|
|
close();
|
|
});
|
|
|
|
return (
|
|
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
|
<form onSubmit={onSubmit}>
|
|
<Pane
|
|
display="flex"
|
|
flexDirection="column"
|
|
padding={majorScale(2)}
|
|
gap={majorScale(2)}
|
|
>
|
|
<TextInputField label="IP Address/Hostname" {...register("ip")} />
|
|
<Button appearance="primary" gap={majorScale(1)} type="submit">
|
|
Connect
|
|
<FiPlusCircle />
|
|
</Button>
|
|
</Pane>
|
|
</form>
|
|
);
|
|
};
|
|
|