96 lines
2.9 KiB
TypeScript
96 lines
2.9 KiB
TypeScript
import type React from 'react';
|
|
|
|
import { useForm, useWatch } from 'react-hook-form';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { FiMenu } from 'react-icons/fi';
|
|
|
|
import { FormFooter } from '@app/components/FormFooter';
|
|
import { connection } from '@app/core/connection';
|
|
import { useAppSelector } from '@app/hooks/redux';
|
|
import { Card } from '@components/generic/Card';
|
|
import { Checkbox } from '@components/generic/form/Checkbox';
|
|
import { Input } from '@components/generic/form/Input';
|
|
import { IconButton } from '@components/generic/IconButton';
|
|
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
|
|
import type { RadioConfig_UserPreferences } from '@meshtastic/meshtasticjs/dist/generated';
|
|
|
|
export interface RangeTestProps {
|
|
navOpen?: boolean;
|
|
setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
}
|
|
|
|
export const RangeTest = ({
|
|
navOpen,
|
|
setNavOpen,
|
|
}: RangeTestProps): JSX.Element => {
|
|
const { t } = useTranslation();
|
|
const preferences = useAppSelector((state) => state.meshtastic.preferences);
|
|
|
|
const { register, handleSubmit, formState, reset, control } =
|
|
useForm<RadioConfig_UserPreferences>({
|
|
defaultValues: {
|
|
rangeTestPluginEnabled: preferences.rangeTestPluginEnabled,
|
|
rangeTestPluginSave: preferences.rangeTestPluginSave,
|
|
rangeTestPluginSender: preferences.rangeTestPluginSender,
|
|
},
|
|
});
|
|
|
|
const onSubmit = handleSubmit((data) => {
|
|
void connection.setPreferences(data);
|
|
});
|
|
|
|
const watchRangeTestPluginEnabled = useWatch({
|
|
control,
|
|
name: 'rangeTestPluginEnabled',
|
|
defaultValue: false,
|
|
});
|
|
|
|
return (
|
|
<PrimaryTemplate
|
|
title="Range Test"
|
|
tagline="Plugin"
|
|
leftButton={
|
|
<IconButton
|
|
icon={<FiMenu className="w-5 h-5" />}
|
|
onClick={(): void => {
|
|
setNavOpen && setNavOpen(!navOpen);
|
|
}}
|
|
/>
|
|
}
|
|
footer={
|
|
<FormFooter
|
|
dirty={formState.isDirty}
|
|
saveAction={onSubmit}
|
|
clearAction={reset}
|
|
/>
|
|
}
|
|
>
|
|
<div className="w-full space-y-4">
|
|
<Card title="Range Test" description="Settings">
|
|
<div className="w-full max-w-3xl p-10 md:max-w-xl">
|
|
<form onSubmit={onSubmit}>
|
|
<Checkbox
|
|
label="Range Test Plugin Enabled?"
|
|
{...register('rangeTestPluginEnabled')}
|
|
/>
|
|
<Checkbox
|
|
label="Range Test Plugin Save?"
|
|
disabled={!watchRangeTestPluginEnabled}
|
|
{...register('rangeTestPluginSave')}
|
|
/>
|
|
<Input
|
|
type="number"
|
|
label="Message Interval"
|
|
disabled={!watchRangeTestPluginEnabled}
|
|
{...register('rangeTestPluginSender', {
|
|
valueAsNumber: true,
|
|
})}
|
|
/>
|
|
</form>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</PrimaryTemplate>
|
|
);
|
|
};
|