hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Loading states for settings, Improve Ch editor

Browse Source
This commit is contained in:
Sacha Weatherstone
2021-11-14 23:23:53 +11:00
parent 6f1f91e70a
commit d31e3c7c05
14 changed files with 178 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Nodes/Node.tsx
+4 -4
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>
src/pages/settings/Channels.tsx
+4 -2
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();
src/pages/settings/Index.tsx
+6 -6
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} />,
]}
/>
);
src/pages/settings/Position.tsx
+14 -12
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 })}
/>
src/pages/settings/Power.tsx
+14 -12
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')}
/>
src/pages/settings/Radio.tsx
+10 -8
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')} />
src/pages/settings/User.tsx
+25 -9
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')}
/>
src/pages/settings/WiFi.tsx
+10 -6
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')} />