Sacha Weatherstone
5 years ago
21 changed files with 802 additions and 397 deletions
File diff suppressed because it is too large
@ -0,0 +1,116 @@ |
|||
import React from 'react'; |
|||
|
|||
import { useForm } from 'react-hook-form'; |
|||
|
|||
import { Loading } from '@components/generic/Loading'; |
|||
import { Protobuf } from '@meshtastic/meshtasticjs'; |
|||
|
|||
import { connection } from '../core/connection'; |
|||
import { Card } from './generic/Card'; |
|||
import { Checkbox } from './generic/form/Checkbox'; |
|||
import { Input } from './generic/form/Input'; |
|||
|
|||
export interface LoraConfigProps { |
|||
channel: Protobuf.Channel; |
|||
} |
|||
|
|||
export const LoraConfig = ({ channel }: LoraConfigProps): JSX.Element => { |
|||
const [loading, setLoading] = React.useState(false); |
|||
|
|||
const { register, handleSubmit } = useForm<{ |
|||
enabled: boolean; |
|||
settings: { |
|||
name: string; |
|||
bandwidth?: number; |
|||
codingRate?: number; |
|||
spreadFactor?: number; |
|||
downlinkEnabled?: boolean; |
|||
uplinkEnabled?: boolean; |
|||
txPower?: number; |
|||
psk?: string; |
|||
}; |
|||
}>({ |
|||
defaultValues: { |
|||
enabled: |
|||
channel.role === |
|||
(Protobuf.Channel_Role.PRIMARY || Protobuf.Channel_Role.SECONDARY) |
|||
? true |
|||
: false, |
|||
settings: { |
|||
name: channel.settings?.name, |
|||
bandwidth: channel.settings?.bandwidth, |
|||
codingRate: channel.settings?.codingRate, |
|||
spreadFactor: channel.settings?.spreadFactor, |
|||
downlinkEnabled: channel.settings?.downlinkEnabled, |
|||
uplinkEnabled: channel.settings?.uplinkEnabled, |
|||
txPower: channel.settings?.txPower, |
|||
psk: new TextDecoder().decode(channel.settings?.psk), |
|||
}, |
|||
}, |
|||
}); |
|||
|
|||
const onSubmit = handleSubmit(async (data) => { |
|||
setLoading(true); |
|||
const adminChannel = Protobuf.Channel.create({ |
|||
role: data.enabled |
|||
? Protobuf.Channel_Role.SECONDARY |
|||
: Protobuf.Channel_Role.DISABLED, |
|||
index: channel.index, |
|||
settings: { |
|||
...data.settings, |
|||
psk: new TextEncoder().encode(data.settings.psk), |
|||
}, |
|||
}); |
|||
|
|||
await connection.setChannel(adminChannel, (): Promise<void> => { |
|||
setLoading(false); |
|||
return Promise.resolve(); |
|||
}); |
|||
}); |
|||
|
|||
return ( |
|||
<Card> |
|||
{loading && <Loading />} |
|||
<div className="w-full max-w-3xl p-10 md:max-w-xl"> |
|||
{/* TODO: get gap working */} |
|||
<form onSubmit={onSubmit}> |
|||
<Input |
|||
label="Bandwidth" |
|||
type="number" |
|||
suffix="MHz" |
|||
{...register('settings.bandwidth', { valueAsNumber: true })} |
|||
/> |
|||
<Input |
|||
label="Spread Factor" |
|||
type="number" |
|||
suffix="CPS" |
|||
min={7} |
|||
max={12} |
|||
{...register('settings.spreadFactor', { |
|||
valueAsNumber: true, |
|||
})} |
|||
/> |
|||
<Input |
|||
label="Coding Rate" |
|||
type="number" |
|||
{...register('settings.codingRate', { valueAsNumber: true })} |
|||
/> |
|||
<Input |
|||
label="Transmit Power" |
|||
type="number" |
|||
suffix="dBm" |
|||
{...register('settings.txPower', { valueAsNumber: true })} |
|||
/> |
|||
<Checkbox |
|||
label="Uplink Enabled" |
|||
{...register('settings.uplinkEnabled')} |
|||
/> |
|||
<Checkbox |
|||
label="Downlink Enabled" |
|||
{...register('settings.downlinkEnabled')} |
|||
/> |
|||
</form> |
|||
</div> |
|||
</Card> |
|||
); |
|||
}; |
|||
@ -1,14 +0,0 @@ |
|||
import type React from 'react'; |
|||
|
|||
import { Card } from '@components/generic/Card'; |
|||
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate'; |
|||
|
|||
export const About = (): JSX.Element => { |
|||
return ( |
|||
<PrimaryTemplate title="meshtastic-web" tagline="About"> |
|||
<Card title="Project desc" description="..."> |
|||
<p className="p-10">Content</p> |
|||
</Card> |
|||
</PrimaryTemplate> |
|||
); |
|||
}; |
|||
@ -0,0 +1,117 @@ |
|||
import type React from 'react'; |
|||
|
|||
import { useForm, useWatch } from 'react-hook-form'; |
|||
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 ExternalNotificationProps { |
|||
navOpen?: boolean; |
|||
setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>; |
|||
} |
|||
|
|||
export const ExternalNotification = ({ |
|||
navOpen, |
|||
setNavOpen, |
|||
}: ExternalNotificationProps): JSX.Element => { |
|||
const preferences = useAppSelector((state) => state.meshtastic.preferences); |
|||
|
|||
const { register, handleSubmit, formState, reset, control } = |
|||
useForm<RadioConfig_UserPreferences>({ |
|||
defaultValues: { |
|||
extNotificationPluginActive: preferences.extNotificationPluginActive, |
|||
extNotificationPluginAlertBell: |
|||
preferences.extNotificationPluginAlertBell, |
|||
extNotificationPluginAlertMessage: |
|||
preferences.extNotificationPluginAlertMessage, |
|||
extNotificationPluginEnabled: preferences.extNotificationPluginEnabled, |
|||
extNotificationPluginOutput: preferences.extNotificationPluginOutput, |
|||
extNotificationPluginOutputMs: |
|||
preferences.extNotificationPluginOutputMs, |
|||
}, |
|||
}); |
|||
|
|||
const onSubmit = handleSubmit((data) => { |
|||
void connection.setPreferences(data); |
|||
}); |
|||
|
|||
const watchExternalNotificationPluginEnabled = useWatch({ |
|||
control, |
|||
name: 'extNotificationPluginEnabled', |
|||
defaultValue: false, |
|||
}); |
|||
|
|||
return ( |
|||
<PrimaryTemplate |
|||
title="External Notification" |
|||
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> |
|||
<div className="w-full max-w-3xl p-10 md:max-w-xl"> |
|||
<form onSubmit={onSubmit}> |
|||
<Checkbox |
|||
label="Plugin Enabled" |
|||
{...register('extNotificationPluginEnabled')} |
|||
/> |
|||
<Checkbox |
|||
label="Active" |
|||
disabled={!watchExternalNotificationPluginEnabled} |
|||
{...register('extNotificationPluginActive')} |
|||
/> |
|||
<Checkbox |
|||
label="Bell" |
|||
disabled={!watchExternalNotificationPluginEnabled} |
|||
{...register('extNotificationPluginAlertBell')} |
|||
/> |
|||
<Checkbox |
|||
label="Message" |
|||
disabled={!watchExternalNotificationPluginEnabled} |
|||
{...register('extNotificationPluginAlertMessage')} |
|||
/> |
|||
<Input |
|||
type="number" |
|||
label="Output" |
|||
disabled={!watchExternalNotificationPluginEnabled} |
|||
{...register('extNotificationPluginOutput', { |
|||
valueAsNumber: true, |
|||
})} |
|||
/> |
|||
<Input |
|||
type="number" |
|||
label="Output MS" |
|||
disabled={!watchExternalNotificationPluginEnabled} |
|||
{...register('extNotificationPluginOutputMs', { |
|||
valueAsNumber: true, |
|||
})} |
|||
/> |
|||
</form> |
|||
</div> |
|||
</Card> |
|||
</div> |
|||
</PrimaryTemplate> |
|||
); |
|||
}; |
|||
@ -0,0 +1,118 @@ |
|||
import type React from 'react'; |
|||
|
|||
import { useForm, useWatch } from 'react-hook-form'; |
|||
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 SerialProps { |
|||
navOpen?: boolean; |
|||
setNavOpen?: React.Dispatch<React.SetStateAction<boolean>>; |
|||
} |
|||
|
|||
export const Serial = ({ navOpen, setNavOpen }: SerialProps): JSX.Element => { |
|||
const preferences = useAppSelector((state) => state.meshtastic.preferences); |
|||
|
|||
const { register, handleSubmit, formState, reset, control } = |
|||
useForm<RadioConfig_UserPreferences>({ |
|||
defaultValues: { |
|||
serialpluginEnabled: preferences.serialpluginEnabled, |
|||
serialpluginEcho: preferences.serialpluginEcho, |
|||
serialpluginMode: preferences.serialpluginMode, |
|||
serialpluginRxd: preferences.serialpluginRxd, |
|||
serialpluginTimeout: preferences.serialpluginTimeout, |
|||
serialpluginTxd: preferences.serialpluginTxd, |
|||
}, |
|||
}); |
|||
|
|||
const onSubmit = handleSubmit((data) => { |
|||
void connection.setPreferences(data); |
|||
}); |
|||
|
|||
const watchSerialPluginEnabled = useWatch({ |
|||
control, |
|||
name: 'serialpluginEnabled', |
|||
defaultValue: false, |
|||
}); |
|||
|
|||
return ( |
|||
<PrimaryTemplate |
|||
title="Serial" |
|||
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> |
|||
<div className="w-full max-w-3xl p-10 md:max-w-xl"> |
|||
<form onSubmit={onSubmit}> |
|||
<Checkbox |
|||
label="Plugin Enabled" |
|||
{...register('serialpluginEnabled')} |
|||
/> |
|||
<Checkbox |
|||
label="Echo" |
|||
disabled={!watchSerialPluginEnabled} |
|||
{...register('serialpluginEcho')} |
|||
/> |
|||
|
|||
<Input |
|||
type="number" |
|||
label="RX" |
|||
disabled={!watchSerialPluginEnabled} |
|||
{...register('serialpluginRxd', { |
|||
valueAsNumber: true, |
|||
})} |
|||
/> |
|||
<Input |
|||
type="number" |
|||
label="TX" |
|||
disabled={!watchSerialPluginEnabled} |
|||
{...register('serialpluginTxd', { |
|||
valueAsNumber: true, |
|||
})} |
|||
/> |
|||
<Input |
|||
type="number" |
|||
label="Mode" |
|||
disabled={!watchSerialPluginEnabled} |
|||
{...register('serialpluginMode', { |
|||
valueAsNumber: true, |
|||
})} |
|||
/> |
|||
<Input |
|||
type="number" |
|||
label="Timeout" |
|||
disabled={!watchSerialPluginEnabled} |
|||
{...register('serialpluginTimeout', { |
|||
valueAsNumber: true, |
|||
})} |
|||
/> |
|||
</form> |
|||
</div> |
|||
</Card> |
|||
</div> |
|||
</PrimaryTemplate> |
|||
); |
|||
}; |
|||
Loading…
Reference in new issue