Sacha Weatherstone
5 years ago
21 changed files with 559 additions and 258 deletions
@ -0,0 +1,36 @@ |
|||
import type React from 'react'; |
|||
|
|||
import { FiSave, FiXCircle } from 'react-icons/fi'; |
|||
|
|||
import { IconButton } from './generic/IconButton'; |
|||
|
|||
export interface FormFooterProps { |
|||
dirty: boolean; |
|||
clearAction: () => void; |
|||
saveAction: () => void; |
|||
} |
|||
|
|||
export const FormFooter = ({ |
|||
dirty, |
|||
clearAction, |
|||
saveAction, |
|||
}: FormFooterProps): JSX.Element => { |
|||
return ( |
|||
<div className="flex float-right gap-2"> |
|||
<IconButton |
|||
icon={<FiXCircle className="w-5 h-5" />} |
|||
disabled={!dirty} |
|||
onClick={(): void => { |
|||
clearAction(); |
|||
}} |
|||
/> |
|||
<IconButton |
|||
disabled={!dirty} |
|||
onClick={(): void => { |
|||
saveAction(); |
|||
}} |
|||
icon={<FiSave className="w-5 h-5" />} |
|||
/> |
|||
</div> |
|||
); |
|||
}; |
|||
@ -0,0 +1,127 @@ |
|||
import React from 'react'; |
|||
|
|||
import { useForm } from 'react-hook-form'; |
|||
import { useTranslation } from 'react-i18next'; |
|||
import { FiCode, FiMenu } from 'react-icons/fi'; |
|||
import JSONPretty from 'react-json-pretty'; |
|||
|
|||
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 { Cover } from '@components/generic/Cover'; |
|||
import { Checkbox } from '@components/generic/form/Checkbox'; |
|||
import { Input } from '@components/generic/form/Input'; |
|||
import { Select } from '@components/generic/form/Select'; |
|||
import { IconButton } from '@components/generic/IconButton'; |
|||
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate'; |
|||
import { Protobuf } from '@meshtastic/meshtasticjs'; |
|||
|
|||
export interface PositionProps { |
|||
navOpen?: boolean; |
|||
setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>; |
|||
} |
|||
|
|||
export const Position = ({ |
|||
navOpen, |
|||
setNavOpen, |
|||
}: PositionProps): 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, |
|||
positionBroadcastSecs: |
|||
radioConfig.positionBroadcastSecs === 0 |
|||
? radioConfig.isRouter |
|||
? 43200 |
|||
: 900 |
|||
: radioConfig.positionBroadcastSecs, |
|||
}, |
|||
}); |
|||
|
|||
const onSubmit = handleSubmit((data) => { |
|||
void connection.setPreferences(data); |
|||
}); |
|||
return ( |
|||
<PrimaryTemplate |
|||
title="Position" |
|||
tagline="Settings" |
|||
leftButton={ |
|||
<IconButton |
|||
icon={<FiMenu className="w-5 h-5" />} |
|||
onClick={(): void => { |
|||
setNavOpen && setNavOpen(!navOpen); |
|||
}} |
|||
/> |
|||
} |
|||
rightButton={ |
|||
<IconButton |
|||
icon={<FiCode className="w-5 h-5" />} |
|||
active={debug} |
|||
onClick={(): void => { |
|||
setDebug(!debug); |
|||
}} |
|||
/> |
|||
} |
|||
footer={ |
|||
<FormFooter |
|||
dirty={formState.isDirty} |
|||
saveAction={onSubmit} |
|||
clearAction={reset} |
|||
/> |
|||
} |
|||
> |
|||
<Card> |
|||
<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}> |
|||
<Input |
|||
label={'Broadcast Interval (seconds)'} |
|||
type="number" |
|||
{...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 })} |
|||
/> |
|||
<Select |
|||
label="Display Format" |
|||
optionsEnum={Protobuf.GpsCoordinateFormat} |
|||
{...register('gpsFormat', { valueAsNumber: true })} |
|||
/> |
|||
<Checkbox label="Accept 2D Fix" {...register('gpsAccept2D')} /> |
|||
<Input |
|||
label="Max DOP" |
|||
type="number" |
|||
{...register('gpsMaxDop', { valueAsNumber: true })} |
|||
/> |
|||
<Input |
|||
label="Last GPS Attempt" |
|||
disabled |
|||
{...register('gpsAttemptTime', { valueAsNumber: true })} |
|||
/> |
|||
</form> |
|||
</div> |
|||
</Card> |
|||
</PrimaryTemplate> |
|||
); |
|||
}; |
|||
@ -0,0 +1,92 @@ |
|||
import React from 'react'; |
|||
|
|||
import { useForm } from 'react-hook-form'; |
|||
import { useTranslation } from 'react-i18next'; |
|||
import { FiCode, FiMenu } from 'react-icons/fi'; |
|||
import JSONPretty from 'react-json-pretty'; |
|||
|
|||
import { FormFooter } from '@app/components/FormFooter'; |
|||
import { Select } from '@app/components/generic/form/Select'; |
|||
import { connection } from '@app/core/connection'; |
|||
import { useAppSelector } from '@app/hooks/redux'; |
|||
import { Card } from '@components/generic/Card'; |
|||
import { Cover } from '@components/generic/Cover'; |
|||
import { Checkbox } from '@components/generic/form/Checkbox'; |
|||
import { IconButton } from '@components/generic/IconButton'; |
|||
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate'; |
|||
import { Protobuf } from '@meshtastic/meshtasticjs'; |
|||
|
|||
export interface PowerProps { |
|||
navOpen?: boolean; |
|||
setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>; |
|||
} |
|||
|
|||
export const Power = ({ navOpen, setNavOpen }: PowerProps): 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, |
|||
isLowPower: radioConfig.isRouter ? true : radioConfig.isLowPower, |
|||
}, |
|||
}); |
|||
|
|||
const onSubmit = handleSubmit((data) => { |
|||
void connection.setPreferences(data); |
|||
}); |
|||
return ( |
|||
<PrimaryTemplate |
|||
title="Power" |
|||
tagline="Settings" |
|||
leftButton={ |
|||
<IconButton |
|||
icon={<FiMenu className="w-5 h-5" />} |
|||
onClick={(): void => { |
|||
setNavOpen && setNavOpen(!navOpen); |
|||
}} |
|||
/> |
|||
} |
|||
rightButton={ |
|||
<IconButton |
|||
icon={<FiCode className="w-5 h-5" />} |
|||
active={debug} |
|||
onClick={(): void => { |
|||
setDebug(!debug); |
|||
}} |
|||
/> |
|||
} |
|||
footer={ |
|||
<FormFooter |
|||
dirty={formState.isDirty} |
|||
saveAction={onSubmit} |
|||
clearAction={reset} |
|||
/> |
|||
} |
|||
> |
|||
<Card> |
|||
<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}> |
|||
<Select |
|||
label={'Charge current'} |
|||
optionsEnum={Protobuf.ChargeCurrent} |
|||
{...register('chargeCurrent', { valueAsNumber: true })} |
|||
/> |
|||
<Checkbox label="Always powered" {...register('isAlwaysPowered')} /> |
|||
<Checkbox |
|||
label="Powered by low power source (solar)" |
|||
disabled={radioConfig.isRouter} |
|||
validationMessage={ |
|||
radioConfig.isRouter ? 'Enabled by default in router mode' : '' |
|||
} |
|||
{...register('isLowPower')} |
|||
/> |
|||
</form> |
|||
</div> |
|||
</Card> |
|||
</PrimaryTemplate> |
|||
); |
|||
}; |
|||
@ -0,0 +1,93 @@ |
|||
import React from 'react'; |
|||
|
|||
import { useForm, useWatch } from 'react-hook-form'; |
|||
import { useTranslation } from 'react-i18next'; |
|||
import { FiCode, FiMenu } from 'react-icons/fi'; |
|||
import JSONPretty from 'react-json-pretty'; |
|||
|
|||
import { FormFooter } from '@app/components/FormFooter'; |
|||
import { Checkbox } from '@app/components/generic/form/Checkbox'; |
|||
import { connection } from '@app/core/connection'; |
|||
import { useAppSelector } from '@app/hooks/redux'; |
|||
import { Card } from '@components/generic/Card'; |
|||
import { Cover } from '@components/generic/Cover'; |
|||
import { Input } from '@components/generic/form/Input'; |
|||
import { IconButton } from '@components/generic/IconButton'; |
|||
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate'; |
|||
import type { Protobuf } from '@meshtastic/meshtasticjs'; |
|||
|
|||
export interface WiFiProps { |
|||
navOpen?: boolean; |
|||
setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>; |
|||
} |
|||
|
|||
export const WiFi = ({ navOpen, setNavOpen }: WiFiProps): JSX.Element => { |
|||
const { t } = useTranslation(); |
|||
const radioConfig = useAppSelector((state) => state.meshtastic.preferences); |
|||
const [debug, setDebug] = React.useState(false); |
|||
|
|||
const { register, handleSubmit, formState, reset, control } = |
|||
useForm<Protobuf.RadioConfig_UserPreferences>({ |
|||
defaultValues: radioConfig, |
|||
}); |
|||
|
|||
const watchWifiApMode = useWatch({ |
|||
control, |
|||
name: 'wifiApMode', |
|||
defaultValue: false, |
|||
}); |
|||
|
|||
const onSubmit = handleSubmit((data) => { |
|||
void connection.setPreferences(data); |
|||
}); |
|||
return ( |
|||
<PrimaryTemplate |
|||
title="WiFi" |
|||
tagline="Settings" |
|||
leftButton={ |
|||
<IconButton |
|||
icon={<FiMenu className="w-5 h-5" />} |
|||
onClick={(): void => { |
|||
setNavOpen && setNavOpen(!navOpen); |
|||
}} |
|||
/> |
|||
} |
|||
rightButton={ |
|||
<IconButton |
|||
icon={<FiCode className="w-5 h-5" />} |
|||
active={debug} |
|||
onClick={(): void => { |
|||
setDebug(!debug); |
|||
}} |
|||
/> |
|||
} |
|||
footer={ |
|||
<FormFooter |
|||
dirty={formState.isDirty} |
|||
saveAction={onSubmit} |
|||
clearAction={reset} |
|||
/> |
|||
} |
|||
> |
|||
<Card> |
|||
<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}> |
|||
<Checkbox label="Enable WiFi AP" {...register('wifiApMode')} /> |
|||
<Input |
|||
label={t('strings.wifi_ssid')} |
|||
disabled={watchWifiApMode} |
|||
{...register('wifiSsid')} |
|||
/> |
|||
<Input |
|||
type="password" |
|||
label={t('strings.wifi_psk')} |
|||
disabled={watchWifiApMode} |
|||
{...register('wifiPassword')} |
|||
/> |
|||
</form> |
|||
</div> |
|||
</Card> |
|||
</PrimaryTemplate> |
|||
); |
|||
}; |
|||
Loading…
Reference in new issue