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/components/Channel.tsx
+47 -40
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
src/components/generic/Card.tsx
+5 -1
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">
src/components/generic/Loading.tsx
+9
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>
);
};
src/components/generic/form/Select.tsx
+2 -2
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
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')} />