mirror
/
meshastic.web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Loading states for settings, Improve Ch editor

pull/2/head
Sacha Weatherstone 5 years ago
parent
6f1f91e70a
commit
d31e3c7c05
14 changed files with 178 additions and 155 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      package.json
  2. 75
      pnpm-lock.yaml
  3. 87
      src/components/Channel.tsx
  4. 6
      src/components/generic/Card.tsx
  5. 9
      src/components/generic/Loading.tsx
  6. 4
      src/components/generic/form/Select.tsx
  7. 8
      src/pages/Nodes/Node.tsx
  8. 6
      src/pages/settings/Channels.tsx
  9. 12
      src/pages/settings/Index.tsx
  10. 26
      src/pages/settings/Position.tsx
  11. 26
      src/pages/settings/Power.tsx
  12. 18
      src/pages/settings/Radio.tsx
  13. 34
      src/pages/settings/User.tsx
  14. 16
      src/pages/settings/WiFi.tsx

6
package.json
View File

@ -19,7 +19,6 @@
"i18next": "^21.4.2",
"i18next-browser-languagedetector": "^6.1.2",
"react": "^17.0.2",
"react-apexcharts": "^1.3.9",
"react-dom": "^17.0.2",
"react-file-icon": "^1.1.0",
"react-hook-form": "^7.19.4",
@ -27,8 +26,9 @@
"react-icons": "^4.3.1",
"react-json-pretty": "^2.2.0",
"react-redux": "^7.2.6",
"react-timeago": "^6.2.1",
"rfc4648": "^1.5.0",
"swr": "^1.0.1",
"timeago-react": "^3.0.4",
"type-route": "^0.6.0",
"use-breakpoint": "^2.0.2"
},
@ -36,8 +36,6 @@
"@types/react": "^17.0.34",
"@types/react-dom": "^17.0.11",
"@types/react-file-icon": "^1.0.1",
"@types/react-redux": "^7.1.20",
"@types/react-timeago": "^4.1.3",
"@types/w3c-web-serial": "^1.0.2",
"@types/web-bluetooth": "^0.0.11",
"@typescript-eslint/eslint-plugin": "^5.3.1",

75
pnpm-lock.yaml
View File

@ -7,8 +7,6 @@ specifiers:
'@types/react': ^17.0.34
'@types/react-dom': ^17.0.11
'@types/react-file-icon': ^1.0.1
'@types/react-redux': ^7.1.20
'@types/react-timeago': ^4.1.3
'@types/w3c-web-serial': ^1.0.2
'@types/web-bluetooth': ^0.0.11
'@typescript-eslint/eslint-plugin': ^5.3.1
@ -31,7 +29,6 @@ specifiers:
postcss: ^8.3.11
prettier: ^2.4.1
react: ^17.0.2
react-apexcharts: ^1.3.9
react-dom: ^17.0.2
react-file-icon: ^1.1.0
react-hook-form: ^7.19.4
@ -39,10 +36,11 @@ specifiers:
react-icons: ^4.3.1
react-json-pretty: ^2.2.0
react-redux: ^7.2.6
react-timeago: ^6.2.1
rfc4648: ^1.5.0
swr: ^1.0.1
tailwindcss: ^3.0.0-alpha.2
tar: ^6.1.11
timeago-react: ^3.0.4
type-route: ^0.6.0
typescript: ^4.4.4
use-breakpoint: ^2.0.2
@ -52,13 +50,12 @@ specifiers:
dependencies:
'@headlessui/react': 1.4[email protected][email protected]
'@meshtastic/meshtasticjs': 0.6.27
'@meshtastic/meshtasticjs': link:../meshtastic.js
'@reduxjs/toolkit': 1.6[email protected][email protected]
boring-avatars: 1.5.8
i18next: 21.4.2
i18next-browser-languagedetector: 6.1.2
react: 17.0.2
react-apexcharts: 1.3[email protected]
react-dom: 17.0[email protected]
react-file-icon: 1.1[email protected][email protected]
react-hook-form: 7.19[email protected]
@ -66,8 +63,9 @@ dependencies:
react-icons: 4.3[email protected]
react-json-pretty: 2.2[email protected][email protected]
react-redux: 7.2[email protected][email protected]
react-timeago: 6.2[email protected]
rfc4648: 1.5.0
swr: 1.0[email protected]
timeago-react: 3.0[email protected]
type-route: 0.6.0
use-breakpoint: 2.0[email protected][email protected]
@ -75,8 +73,6 @@ devDependencies:
'@types/react': 17.0.34
'@types/react-dom': 17.0.11
'@types/react-file-icon': 1.0.1
'@types/react-redux': 7.1.20
'@types/react-timeago': 4.1.3
'@types/w3c-web-serial': 1.0.2
'@types/web-bluetooth': 0.0.11
'@typescript-eslint/eslint-plugin': 5.3.1_4653b7803b7453f5f37717b7e1448517
@ -1359,13 +1355,6 @@ packages:
resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
dev: true
/@meshtastic/meshtasticjs/0.6.27:
resolution: {integrity: sha512-WiM9v/3+YWtt6/wLJOyyhAQdtsIGcEs3geofRZA6y/TCQkbjo/mdvY8Y+ZMZERSFXIZXiovvZgJG0vSYq7JC9A==}
dependencies:
'@protobuf-ts/runtime': 2.0.7
sub-events: 1.8.9
dev: false
/@nodelib/fs.scandir/2.1.5:
resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
engines: {node: '>= 8'}
@ -1387,10 +1376,6 @@ packages:
fastq: 1.13.0
dev: true
/@protobuf-ts/runtime/2.0.7:
resolution: {integrity: sha512-jT8FYEX7NkAzxZXVjshIhtCV/ReuZm/3sCH0GWnaa8woy9VG+He0N+dpj2svaJbkdUThSxJE3zwmJcH0/3vEsw==}
dev: false
/@reduxjs/toolkit/[email protected][email protected]:
resolution: {integrity: sha512-HbfI/hOVrAcMGAYsMWxw3UJyIoAS9JTdwddsjlr5w3S50tXhWb+EMyhIw+IAvCVCLETkzdjgH91RjDSYZekVBA==}
peerDependencies:
@ -1488,6 +1473,7 @@ packages:
dependencies:
'@types/react': 17.0.34
hoist-non-react-statics: 3.3.2
dev: false
/@types/json-schema/7.0.9:
resolution: {integrity: sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==}
@ -1527,12 +1513,7 @@ packages:
'@types/react': 17.0.34
hoist-non-react-statics: 3.3.2
redux: 4.1.2
/@types/react-timeago/4.1.3:
resolution: {integrity: sha512-XaaMBzuXLw7lxPPDs/fenlohcf3NDqM5qP4oOL/Meu+Hb1QChW4Igw/SruS1llEqch18RQB3wDTIwvqq4nivvw==}
dependencies:
'@types/react': 17.0.34
dev: true
dev: false
/@types/react/17.0.34:
resolution: {integrity: sha512-46FEGrMjc2+8XhHXILr+3+/sTe3OfzSPU9YGKILLrUYbQ1CLQC9Daqo1KzENGXAWwrFwiY0l4ZbF20gRvgpWTg==}
@ -3240,6 +3221,7 @@ packages:
resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
dependencies:
react-is: 16.13.1
dev: false
/html-parse-stringify/3.0.1:
resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
@ -4050,16 +4032,6 @@ packages:
safe-buffer: 5.2.1
dev: true
/react-apexcharts/[email protected]:
resolution: {integrity: sha512-KPonT5uQPHOHSVgTNEzpB0HhCkZtoicQYGjR9P+3DRDSgTsC+DM2vDUfo/B2Fn1m+wdgVeDXWL0VJYDc6JD/tw==}
peerDependencies:
apexcharts: ^3.18.0
react: '>=0.13'
dependencies:
prop-types: 15.7.2
react: 17.0.2
dev: false
/react-dom/[email protected]:
resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==}
peerDependencies:
@ -4157,14 +4129,6 @@ packages:
engines: {node: '>=0.10.0'}
dev: true
/react-timeago/[email protected]:
resolution: {integrity: sha512-b9EObWO8wy4qwfOzj+g/RQZRrPvtMv1Pz12FCdAWKWCXbDGt0rZLyiyTGEr0Lh1O8w5xa48CtRpl3LI+CtGCyw==}
peerDependencies:
react: ^16.0.0 || ^17.0.0
dependencies:
react: 17.0.2
dev: false
/react/17.0.2:
resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==}
engines: {node: '>=0.10.0'}
@ -4192,6 +4156,7 @@ packages:
resolution: {integrity: sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==}
dependencies:
'@babel/runtime': 7.16.3
dev: false
/regenerate-unicode-properties/9.0.0:
resolution: {integrity: sha512-3E12UeNSPfjrgwjkR81m5J7Aw/T55Tu7nUyZVQYCKEOs+2dkxEY+DpPtZzO4YruuiPb7NkYLVcyJC4+zCbk5pA==}
@ -4286,6 +4251,10 @@ packages:
engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
dev: true
/rfc4648/1.5.0:
resolution: {integrity: sha512-FA6W9lDNeX8WbMY31io1xWg+TpZCbeDKsBo0ocwACZiWnh9TUAyk9CCuBQuOPmYnwwdEQZmraQ2ZK7yJsxErBg==}
dev: false
/rimraf/3.0.2:
resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
hasBin: true
@ -4505,11 +4474,6 @@ packages:
engines: {node: '>=8'}
dev: true
/sub-events/1.8.9:
resolution: {integrity: sha512-RhhA2amqVzL6nO+aiZOqxBCgcA3ZLfp4W9iHFUELwq8132TS7pUReJV+bcRjtNKdqm/Ep1sD/h01eAcTBtgrBQ==}
engines: {node: '>=10.0.0'}
dev: false
/supports-color/5.5.0:
resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
engines: {node: '>=4'}
@ -4620,6 +4584,19 @@ packages:
resolution: {integrity: sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=}
dev: true
/timeago-react/[email protected]:
resolution: {integrity: sha512-cv6Bnm01VKyHoQCBKzk24+L9ycj3jLq3uEFpYILKGJT7UUXWEzC0TBCxforsvL4NSjcwqqHNKdEeqEFMNNoN2A==}
peerDependencies:
react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
dependencies:
react: 17.0.2
timeago.js: 4.0.2
dev: false
/timeago.js/4.0.2:
resolution: {integrity: sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==}
dev: false
/tinycolor2/1.4.2:
resolution: {integrity: sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==}
dev: false

87
src/components/Channel.tsx
View File

@ -3,54 +3,50 @@ import React from 'react';
import { useForm } from 'react-hook-form';
import { FiEdit3, FiSave } from 'react-icons/fi';
import { Loading } from '@components/generic/Loading';
import { Protobuf } from '@meshtastic/meshtasticjs';
import { connection } from '../core/connection';
import { Checkbox } from './generic/form/Checkbox';
import { Input } from './generic/form/Input';
import { Select } from './generic/form/Select';
import { IconButton } from './generic/IconButton';
export interface ChannelProps {
channel: Protobuf.Channel;
}
interface DotProps {
role: Protobuf.Channel_Role;
admin: boolean;
}
const Dot = ({ role, admin }: DotProps): JSX.Element => (
<div
className={`h-3 my-auto w-3 rounded-full ${
role === Protobuf.Channel_Role.PRIMARY
? 'bg-green-500'
: admin
? 'bg-amber-400'
: role === Protobuf.Channel_Role.SECONDARY
? 'bg-cyan-500'
: 'bg-gray-400'
}`}
/>
);
export const Channel = ({ channel }: ChannelProps): JSX.Element => {
const [edit, setEdit] = React.useState(false);
const [loading, setLoading] = React.useState(false);
const { register, handleSubmit, formState } = useForm<{
role: Protobuf.Channel_Role;
enabled: boolean;
settings: {
name: string;
bandwidth?: number;
codingRate?: number;
spreadFactor?: number;
downlinkEnabled?: boolean;
uplinkEnabled?: boolean;
txPower?: number;
psk?: string;
};
}>({
defaultValues: {
role: channel.role,
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),
},
},
});
@ -58,9 +54,14 @@ export const Channel = ({ channel }: ChannelProps): JSX.Element => {
const onSubmit = handleSubmit(async (data) => {
setLoading(true);
const adminChannel = Protobuf.Channel.create({
role: data.role,
role: data.enabled
? Protobuf.Channel_Role.SECONDARY
: Protobuf.Channel_Role.DISABLED,
index: channel.index,
settings: data.settings,
settings: {
...data.settings,
psk: new TextEncoder().encode(data.settings.psk),
},
});
await connection.setChannel(adminChannel, (): Promise<void> => {
@ -73,28 +74,18 @@ export const Channel = ({ channel }: ChannelProps): JSX.Element => {
<div className="relative flex justify-between p-3 bg-gray-100 rounded-md dark:bg-gray-700">
{edit ? (
<>
{loading && (
<div className="absolute top-0 bottom-0 left-0 right-0 z-10 flex rounded-md backdrop-filter backdrop-blur-sm">
<div className="m-auto text-lg font-medium text-gray-400">
Loading
</div>
</div>
)}
{loading && <Loading />}
<div className="my-auto space-x-2">
<form>
<div className="flex space-x-2">
{/* @todo: change to disable & make primary buttons */}
<Select
label="Channel Type"
optionsEnum={Protobuf.Channel_Role}
{...register('role', { valueAsNumber: true })}
/>
<Dot
role={channel.role}
admin={channel.settings?.name === 'admin'}
<Checkbox
label="Enabled"
{...register('enabled', { valueAsNumber: true })}
/>
</div>
<Input label="Name" {...register('settings.name')} />
<Input label="Pre-Shared Key" {...register('settings.psk')} />
<Input
label="Bandwidth"
type="number"
@ -112,6 +103,19 @@ export const Channel = ({ channel }: ChannelProps): JSX.Element => {
type="number"
{...register('settings.codingRate', { valueAsNumber: true })}
/>
<Input
label="Transmit Power"
type="number"
{...register('settings.txPower', { valueAsNumber: true })}
/>
<Checkbox
label="Upling Enabled"
{...register('settings.uplinkEnabled')}
/>
<Checkbox
label="Downlink Enabled"
{...register('settings.downlinkEnabled')}
/>
</form>
</div>
<IconButton
@ -126,9 +130,12 @@ export const Channel = ({ channel }: ChannelProps): JSX.Element => {
) : (
<>
<div className="flex my-auto space-x-2">
<Dot
role={channel.role}
admin={channel.settings?.name === 'admin'}
<div
className={`h-3 my-auto w-3 rounded-full ${
channel.role === Protobuf.Channel_Role.SECONDARY
? 'bg-green-500'
: 'bg-gray-400'
}`}
/>
<div>
{channel.settings?.name.length

6
src/components/generic/Card.tsx
View File

@ -1,5 +1,7 @@
import type React from 'react';
import { Loading } from '@components/generic/Loading';
type DefaultDivProps = JSX.IntrinsicElements['div'];
interface CardProps extends DefaultDivProps {
@ -17,13 +19,15 @@ export const Card = ({
children,
className,
lgPlaceholder,
loading,
...props
}: CardProps): JSX.Element => {
return (
<div
className={`flex flex-col flex-auto dark:text-white border-y md:border shadow-md select-none dark:bg-primaryDark border-gray-300 dark:border-transparent md:rounded-3xl ${className}`}
className={`relative flex flex-col flex-auto dark:text-white border-y md:border shadow-md select-none dark:bg-primaryDark border-gray-300 dark:border-transparent md:rounded-md ${className}`}
{...props}
>
{loading && <Loading />}
{(title || description) && (
<div className="flex items-center justify-between mx-10 mt-10">
<div className="flex flex-col">

9
src/components/generic/Loading.tsx
View File

@ -0,0 +1,9 @@
import type React from 'react';
export const Loading = (): JSX.Element => {
return (
<div className="absolute top-0 bottom-0 left-0 right-0 z-10 flex rounded-md backdrop-filter backdrop-blur-sm">
<div className="m-auto text-lg font-medium text-gray-400">Loading</div>
</div>
);
};

4
src/components/generic/form/Select.tsx
View File

@ -29,8 +29,8 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
<InputWrapper>
<select
ref={ref}
className={`w-full rounded-md bg-white dark:bg-transparent focus:outline-none focus:border-primary ${
small ? 'm-1' : 'h-10 mx-2'
className={`w-full rounded-md bg-transparent focus:outline-none focus:border-primary ${
small ? 'p-1' : 'h-10 px-2'
}`}
disabled={
props.disabled

8
src/pages/Nodes/Node.tsx
View File

@ -4,7 +4,7 @@ import React from 'react';
import { FiCode, FiMenu } from 'react-icons/fi';
import JSONPretty from 'react-json-pretty';
import TimeAgo from 'react-timeago';
import TimeAgo from 'timeago-react';
import { Cover } from '@app/components/generic/Cover';
import { useAppSelector } from '@app/hooks/redux';
@ -59,7 +59,7 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
title="Last heard"
value={
node.lastHeard ? (
<TimeAgo date={new Date(node.lastHeard * 1000)} />
<TimeAgo datetime={new Date(node.lastHeard * 1000)} />
) : (
'Never'
)
@ -79,8 +79,8 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
<Card title="Settings" description="Remote node settings">
<div className="p-10">
<form className="space-y-4">
<Input label={'Device Name'} />
<Input label={'Short Name'} maxLength={3} />
<Input label="Device Name" />
<Input label="Short Name" maxLength={3} />
<Checkbox label="Licenced Operator?" />
</form>
</div>

6
src/pages/settings/Channels.tsx
View File

@ -23,7 +23,9 @@ export const Channels = ({
setNavOpen,
}: ChannelsProps): JSX.Element => {
const { t } = useTranslation();
const channels = useAppSelector((state) => state.meshtastic.channels);
const channels = useAppSelector((state) => state.meshtastic.channels).filter(
(channel) => channel.index !== 0,
);
const [debug, setDebug] = React.useState(false);
return (
@ -66,7 +68,7 @@ export const Channels = ({
<Channel key={channel.index} channel={channel} />
))}
<div className="flex space-x-52">
<div className="flex justify-between">
<div
onClick={(): Promise<void> => {
return connection.confirmSetChannel();

12
src/pages/settings/Index.tsx
View File

@ -54,16 +54,16 @@ export const Settings = (): JSX.Element => {
description: 'LoRa settings',
icon: <FiRadio className="flex-shrink-0 w-6 h-6" />,
},
{
title: 'Interface',
description: 'Language and UI settings',
icon: <FiLayout className="flex-shrink-0 w-6 h-6" />,
},
{
title: 'Channels',
description: 'Manage channels',
icon: <FiLayers className="flex-shrink-0 w-6 h-6" />,
},
{
title: 'Interface',
description: 'Language and UI settings',
icon: <FiLayout className="flex-shrink-0 w-6 h-6" />,
},
];
return (
<PageLayout
@ -76,8 +76,8 @@ export const Settings = (): JSX.Element => {
<User key={4} />,
<Power key={5} />,
<Radio key={6} />,
<Interface key={7} />,
<Channels key={8} />,
<Interface key={7} />,
]}
/>
);

26
src/pages/settings/Position.tsx
View File

@ -1,7 +1,6 @@
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';
@ -26,25 +25,28 @@ export const Position = ({
navOpen,
setNavOpen,
}: PositionProps): JSX.Element => {
const { t } = useTranslation();
const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
const preferences = useAppSelector((state) => state.meshtastic.preferences);
const [debug, setDebug] = React.useState(false);
const [loading, setLoading] = React.useState(false);
const { register, handleSubmit, formState, reset } =
useForm<Protobuf.RadioConfig_UserPreferences>({
defaultValues: {
...radioConfig,
...preferences,
positionBroadcastSecs:
radioConfig.positionBroadcastSecs === 0
? radioConfig.isRouter
preferences.positionBroadcastSecs === 0
? preferences.isRouter
? 43200
: 900
: radioConfig.positionBroadcastSecs,
: preferences.positionBroadcastSecs,
},
});
const onSubmit = handleSubmit((data) => {
void connection.setPreferences(data);
setLoading(true);
void connection.setPreferences(data, async () => {
await Promise.resolve();
setLoading(false);
});
});
return (
<PrimaryTemplate
@ -75,12 +77,12 @@ export const Position = ({
/>
}
>
<Card>
<Cover enabled={debug} content={<JSONPretty data={radioConfig} />} />
<Card loading={loading}>
<Cover enabled={debug} content={<JSONPretty data={preferences} />} />
<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)'}
label="Broadcast Interval (seconds)"
type="number"
{...register('positionBroadcastSecs', { valueAsNumber: true })}
/>

26
src/pages/settings/Power.tsx
View File

@ -1,7 +1,6 @@
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';
@ -22,20 +21,23 @@ export interface PowerProps {
}
export const Power = ({ navOpen, setNavOpen }: PowerProps): JSX.Element => {
const { t } = useTranslation();
const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
const preferences = useAppSelector((state) => state.meshtastic.preferences);
const [debug, setDebug] = React.useState(false);
const [loading, setLoading] = React.useState(false);
const { register, handleSubmit, formState, reset } =
useForm<Protobuf.RadioConfig_UserPreferences>({
defaultValues: {
...radioConfig,
isLowPower: radioConfig.isRouter ? true : radioConfig.isLowPower,
...preferences,
isLowPower: preferences.isRouter ? true : preferences.isLowPower,
},
});
const onSubmit = handleSubmit((data) => {
void connection.setPreferences(data);
setLoading(true);
void connection.setPreferences(data, async () => {
await Promise.resolve();
setLoading(false);
});
});
return (
<PrimaryTemplate
@ -66,21 +68,21 @@ export const Power = ({ navOpen, setNavOpen }: PowerProps): JSX.Element => {
/>
}
>
<Card>
<Cover enabled={debug} content={<JSONPretty data={radioConfig} />} />
<Card loading={loading}>
<Cover enabled={debug} content={<JSONPretty data={preferences} />} />
<div className="w-full max-w-3xl p-10 md:max-w-xl">
<form className="space-y-2" onSubmit={onSubmit}>
<Select
label={'Charge current'}
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}
disabled={preferences.isRouter}
validationMessage={
radioConfig.isRouter ? 'Enabled by default in router mode' : ''
preferences.isRouter ? 'Enabled by default in router mode' : ''
}
{...register('isLowPower')}
/>

18
src/pages/settings/Radio.tsx
View File

@ -1,7 +1,6 @@
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';
@ -22,17 +21,20 @@ export interface RadioProps {
}
export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
const { t } = useTranslation();
const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
const preferences = useAppSelector((state) => state.meshtastic.preferences);
const [debug, setDebug] = React.useState(false);
const [loading, setLoading] = React.useState(false);
const { register, handleSubmit, formState, reset } =
useForm<Protobuf.RadioConfig_UserPreferences>({
defaultValues: radioConfig,
defaultValues: preferences,
});
const onSubmit = handleSubmit((data) => {
void connection.setPreferences(data);
setLoading(true);
void connection.setPreferences(data, async () => {
await Promise.resolve();
setLoading(false);
});
});
return (
<PrimaryTemplate
@ -63,8 +65,8 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
/>
}
>
<Card>
<Cover enabled={debug} content={<JSONPretty data={radioConfig} />} />
<Card loading={loading}>
<Cover enabled={debug} content={<JSONPretty data={preferences} />} />
<div className="w-full max-w-3xl p-10 md:max-w-xl">
<form className="space-y-2" onSubmit={onSubmit}>
<Checkbox label="Is Router" {...register('isRouter')} />

34
src/pages/settings/User.tsx
View File

@ -4,10 +4,9 @@ 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 { base16 } from 'rfc4648';
import { FormFooter } from '@app/components/FormFooter';
import { connection } from '@app/core/connection';
import { addUser } from '@app/core/slices/meshtasticSlice';
import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
import { Card } from '@components/generic/Card';
import { Cover } from '@components/generic/Cover';
@ -16,6 +15,8 @@ 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 { connection } from '@core/connection';
import { addUser } from '@core/slices/meshtasticSlice';
import { Protobuf } from '@meshtastic/meshtasticjs';
export interface UserProps {
@ -26,6 +27,7 @@ export interface UserProps {
export const User = ({ navOpen, setNavOpen }: UserProps): JSX.Element => {
const { t } = useTranslation();
const [debug, setDebug] = React.useState(false);
const [loading, setLoading] = React.useState(false);
const dispatch = useAppDispatch();
const myNodeInfo = useAppSelector((state) => state.meshtastic.myNodeInfo);
const user = useAppSelector((state) => state.meshtastic.users).find(
@ -46,9 +48,13 @@ export const User = ({ navOpen, setNavOpen }: UserProps): JSX.Element => {
});
const onSubmit = handleSubmit((data) => {
setLoading(true);
// TODO: can be removed once getUser is implemented
if (user) {
void connection.setOwner({ ...user.data, ...data });
void connection.setOwner({ ...user.data, ...data }, async () => {
await Promise.resolve();
setLoading(false);
});
dispatch(addUser({ ...user, ...{ data: { ...user.data, ...data } } }));
}
});
@ -82,13 +88,13 @@ export const User = ({ navOpen, setNavOpen }: UserProps): JSX.Element => {
/>
}
>
<Card>
<Cover enabled={debug} content={<JSONPretty data={user} />} />
<Card loading={loading}>
<Cover enabled={debug} content={<JSONPretty data={user?.data} />} />
<div className="w-full max-w-3xl p-10 md:max-w-xl">
<form className="space-y-2" onSubmit={onSubmit}>
<Input label={'Device ID'} value={user?.data.id} disabled />
<Input label="Device ID" value={user?.data.id} disabled />
<Input
label={'Hardware'}
label="Hardware"
value={
Protobuf.HardwareModel[
user?.data.hwModel ?? Protobuf.HardwareModel.UNSET
@ -96,9 +102,19 @@ export const User = ({ navOpen, setNavOpen }: UserProps): JSX.Element => {
}
disabled
/>
<Input label={'Device Name'} {...register('longName')} />
<Input
label={'Short Name'}
label="Mac Address"
defaultValue={
base16
.stringify(user?.data.macaddr ?? [])
.match(/.{1,2}/g)
?.join(':') ?? ''
}
disabled
/>
<Input label="Device Name" {...register('longName')} />
<Input
label="Short Name"
maxLength={3}
{...register('shortName')}
/>

16
src/pages/settings/WiFi.tsx
View File

@ -23,12 +23,12 @@ export interface WiFiProps {
export const WiFi = ({ navOpen, setNavOpen }: WiFiProps): JSX.Element => {
const { t } = useTranslation();
const radioConfig = useAppSelector((state) => state.meshtastic.preferences);
const preferences = useAppSelector((state) => state.meshtastic.preferences);
const [debug, setDebug] = React.useState(false);
const [loading, setLoading] = React.useState(false);
const { register, handleSubmit, formState, reset, control } =
useForm<Protobuf.RadioConfig_UserPreferences>({
defaultValues: radioConfig,
defaultValues: preferences,
});
const watchWifiApMode = useWatch({
@ -38,7 +38,11 @@ export const WiFi = ({ navOpen, setNavOpen }: WiFiProps): JSX.Element => {
});
const onSubmit = handleSubmit((data) => {
void connection.setPreferences(data);
setLoading(true);
void connection.setPreferences(data, async () => {
await Promise.resolve();
setLoading(false);
});
});
return (
<PrimaryTemplate
@ -69,8 +73,8 @@ export const WiFi = ({ navOpen, setNavOpen }: WiFiProps): JSX.Element => {
/>
}
>
<Card>
<Cover enabled={debug} content={<JSONPretty data={radioConfig} />} />
<Card loading={loading}>
<Cover enabled={debug} content={<JSONPretty data={preferences} />} />
<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')} />

Write Preview
Loading…
Cancel
Save