140 lines
4.4 KiB
TypeScript
140 lines
4.4 KiB
TypeScript
import React from 'react';
|
|
|
|
import { useForm } from 'react-hook-form';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { FiCode, FiMenu, FiSave, FiXCircle } from 'react-icons/fi';
|
|
import JSONPretty from 'react-json-pretty';
|
|
|
|
import { Card } from '@app/components/generic/Card';
|
|
import { Cover } from '@app/components/generic/Cover.jsx';
|
|
import { Checkbox } from '@app/components/generic/form/Checkbox';
|
|
import { Select } from '@app/components/generic/form/Select.jsx';
|
|
import { IconButton } from '@app/components/generic/IconButton.jsx';
|
|
import { connection } from '@app/core/connection';
|
|
import { useAppSelector } from '@app/hooks/redux';
|
|
import { Button } from '@components/generic/Button';
|
|
import { Input } from '@components/generic/form/Input';
|
|
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
|
|
import { Protobuf } from '@meshtastic/meshtasticjs';
|
|
|
|
export interface RadioProps {
|
|
navOpen?: boolean;
|
|
setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>;
|
|
}
|
|
|
|
export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
|
|
const { t } = useTranslation();
|
|
const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
|
|
const [debug, setDebug] = React.useState(false);
|
|
|
|
const { register, handleSubmit, formState, reset } =
|
|
useForm<Protobuf.RadioConfig_UserPreferences>({
|
|
defaultValues: radioConfig,
|
|
});
|
|
|
|
const onSubmit = handleSubmit((data) => {
|
|
void connection.setPreferences(data);
|
|
});
|
|
return (
|
|
<PrimaryTemplate
|
|
title="Radio"
|
|
tagline="Settings"
|
|
button={
|
|
<IconButton
|
|
icon={<FiMenu className="w-5 h-5" />}
|
|
onClick={(): void => {
|
|
setNavOpen && setNavOpen(!navOpen);
|
|
}}
|
|
/>
|
|
}
|
|
footer={
|
|
<div className="flex space-x-2">
|
|
<IconButton
|
|
icon={<FiXCircle className="w-5 h-5" />}
|
|
disabled={formState.isDirty}
|
|
onClick={(): void => {
|
|
reset();
|
|
}}
|
|
/>
|
|
<Button
|
|
className="px-10 ml-auto"
|
|
icon={<FiSave className="w-5 h-5" />}
|
|
disabled={!formState.isDirty}
|
|
onClick={onSubmit}
|
|
active
|
|
border
|
|
>
|
|
{t('strings.save_changes')}
|
|
</Button>
|
|
</div>
|
|
}
|
|
>
|
|
<Card
|
|
title="Basic settings"
|
|
description="Device name and user parameters"
|
|
buttons={
|
|
<Button
|
|
border
|
|
active={debug}
|
|
onClick={(): void => {
|
|
setDebug(!debug);
|
|
}}
|
|
icon={<FiCode />}
|
|
>
|
|
Debug
|
|
</Button>
|
|
}
|
|
>
|
|
<Cover enabled={debug} content={<JSONPretty data={radioConfig} />} />
|
|
<div className="w-full max-w-3xl p-10 md:max-w-xl">
|
|
<form className="space-y-2" onSubmit={onSubmit}>
|
|
<div>WiFi</div>
|
|
<Input label={t('strings.wifi_ssid')} {...register('wifiSsid')} />
|
|
<Input
|
|
type="password"
|
|
label={t('strings.wifi_psk')}
|
|
{...register('wifiPassword')}
|
|
/>
|
|
<Input
|
|
label={'Charge current'}
|
|
disabled
|
|
{...register('chargeCurrent', { valueAsNumber: true })}
|
|
/>
|
|
<div>Position</div>
|
|
<Input
|
|
label={'Broadcast Interval (seconds)'}
|
|
{...register('positionBroadcastSecs', { valueAsNumber: true })}
|
|
/>
|
|
<Select
|
|
label="Position Type"
|
|
optionsEnum={Protobuf.PositionFlags}
|
|
{...register('positionFlags', { valueAsNumber: true })}
|
|
/>
|
|
<Checkbox
|
|
label="Use Fixed Position"
|
|
{...register('fixedPosition')}
|
|
/>
|
|
<Select
|
|
label="Location Sharing"
|
|
optionsEnum={Protobuf.LocationSharing}
|
|
{...register('locationShare', { valueAsNumber: true })}
|
|
/>
|
|
<Select
|
|
label="GPS Mode"
|
|
optionsEnum={Protobuf.GpsOperation}
|
|
{...register('gpsOperation', { valueAsNumber: true })}
|
|
/>
|
|
|
|
<div>Other</div>
|
|
<Input
|
|
label={'Last GPS Attempt'}
|
|
disabled
|
|
{...register('gpsAttemptTime', { valueAsNumber: true })}
|
|
/>
|
|
</form>
|
|
</div>
|
|
</Card>
|
|
</PrimaryTemplate>
|
|
);
|
|
};
|