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

Fixes, new debug output & more.

Browse Source
This commit is contained in:
Sacha Weatherstone
2021-11-11 13:44:19 +11:00
parent 85fd796322
commit 8aeeb9a36a
22 changed files with 312 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Messages.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export const Messages = (): JSX.Element => {
/>
</div>
</div>
<div className="flex flex-col flex-grow p-6 space-y-2 overflow-y-auto bg-white border-b md:py-8 md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
<div className="flex flex-col flex-grow p-6 space-y-2 overflow-y-auto bg-white border-b border-gray-300 md:py-8 md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
{messages.map((message, index) => (
<Message
key={index}
src/pages/Nodes/Node.tsx
+17 -5
View File
@@ -1,13 +1,18 @@
import 'react-json-pretty/themes/acai.css';
import React from 'react';
import moment from 'moment';
import { FiMenu, FiTerminal } from 'react-icons/fi';
import JSONPretty from 'react-json-pretty';
import TimeAgo from 'react-timeago';
import { Card } from '@app/components/generic/Card';
import { Chart } from '@app/components/generic/Chart';
import { Checkbox } from '@app/components/generic/form/Checkbox';
import { Input } from '@app/components/generic/form/Input';
import { IconButton } from '@app/components/generic/IconButton.jsx';
import { StatCard } from '@app/components/generic/StatCard';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
import type { Protobuf } from '@meshtastic/meshtasticjs';
@@ -32,6 +37,13 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
}
>
<div className="w-full space-y-4">
<div className="justify-between space-y-2 md:space-y-0 md:space-x-2 md:flex">
<StatCard
title="Last heard"
value={<TimeAgo date={new Date(node.lastHeard * 1000)} />}
/>
<StatCard title="SNR" value={node.snr.toString()} />
</div>
<Chart
title={`${node.user?.longName ?? 'UNK'}`}
description="Airtime"
@@ -145,12 +157,12 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
},
]}
/>
<Card title="Position" description={node.num.toString()}>
<Card
title="Position"
description={new Date(node.lastHeard * 1000).toLocaleString()}
>
<div className="p-10">
<div>
<div></div>
<div>{node.position?.satsInView}</div>
</div>
<JSONPretty data={node.position} />
</div>
</Card>
<Card
src/pages/settings/Channels.tsx
+18 -13
View File
@@ -1,10 +1,12 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { FiMenu, FiSave } from 'react-icons/fi';
import { FiCode, FiMenu, FiSave } from 'react-icons/fi';
import JSONPretty from 'react-json-pretty';
import { Channel } from '@app/components/Channel.jsx';
import { Card } from '@app/components/generic/Card';
import { Cover } from '@app/components/generic/Cover.jsx';
import { IconButton } from '@app/components/generic/IconButton.jsx';
import { connection } from '@app/core/connection.js';
import { useAppSelector } from '@app/hooks/redux.js';
@@ -22,6 +24,7 @@ export const Channels = ({
}: ChannelsProps): JSX.Element => {
const { t } = useTranslation();
const channels = useAppSelector((state) => state.meshtastic.channels);
const [debug, setDebug] = React.useState(false);
return (
<PrimaryTemplate
@@ -49,20 +52,22 @@ export const Channels = ({
<div className="space-y-4">
<Card
title="Manage Channels"
description={
<div className="flex space-x-2 truncate">
<div className="w-3 h-3 my-auto bg-green-500 rounded-full" />
&nbsp;- Primary
<div className="w-3 h-3 my-auto rounded-full bg-cyan-500" />
&nbsp;- Secondary
<div className="w-3 h-3 my-auto bg-gray-400 rounded-full" />
&nbsp;- Disabled
<div className="w-3 h-3 my-auto rounded-full bg-amber-400" />
&nbsp;- Admin
</div>
description="Edit channel throughput and other settings"
buttons={
<Button
border
active={debug}
onClick={(): void => {
setDebug(!debug);
}}
icon={<FiCode />}
>
Debug
</Button>
}
>
<div className="w-full max-w-3xl p-4 space-y-2 md:p-10 md:max-w-xl">
<Cover enabled={debug} content={<JSONPretty data={channels} />} />
<div className="w-full p-4 space-y-2 md:p-10">
{channels.map((channel) => (
<Channel key={channel.index} channel={channel} />
))}
src/pages/settings/Device.tsx
+31 -3
View File
@@ -2,13 +2,17 @@ import React from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { FiMenu, FiSave } from 'react-icons/fi';
import { FiCode, FiMenu, FiSave } from 'react-icons/fi';
import JSONPretty from 'react-json-pretty';
import { Card } from '@app/components/generic/Card';
import { Cover } from '@app/components/generic/Cover.jsx';
import { Checkbox } from '@app/components/generic/form/Checkbox';
import { Select } from '@app/components/generic/form/Select.jsx';
import { IconButton } from '@app/components/generic/IconButton.jsx';
import { connection } from '@app/core/connection';
import { useAppSelector } from '@app/hooks/redux';
import { addUser } from '@app/core/slices/meshtasticSlice.js';
import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
import { Button } from '@components/generic/Button';
import { Input } from '@components/generic/form/Input';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
@@ -21,21 +25,27 @@ export interface DeviceProps {
export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
const { t } = useTranslation();
const user = useAppSelector((state) => state.meshtastic.user);
const [debug, setDebug] = React.useState(false);
const dispatch = useAppDispatch();
const user = useAppSelector((state) => state.meshtastic.myUser);
const { register, handleSubmit, formState } = useForm<{
longName: string;
shortName: string;
isLicensed: boolean;
team: Protobuf.Team;
}>({
defaultValues: {
longName: user.longName,
shortName: user.shortName,
isLicensed: user.isLicensed,
team: user.team,
},
});
const onSubmit = handleSubmit((data) => {
void connection.setOwner({ ...user, ...data });
// TODO: can be remove once getUser is implemented
dispatch(addUser({ ...user, ...data }));
});
return (
@@ -66,7 +76,20 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
<Card
title="Basic settings"
description="Device name and user parameters"
buttons={
<Button
border
active={debug}
onClick={(): void => {
setDebug(!debug);
}}
icon={<FiCode />}
>
Debug
</Button>
}
>
<Cover enabled={debug} content={<JSONPretty data={user} />} />
<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.id} disabled />
@@ -82,6 +105,11 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
{...register('shortName')}
/>
<Checkbox label="Licenced Operator?" {...register('isLicensed')} />
<Select
label="Team"
optionsEnum={Protobuf.Team}
{...register('team')}
/>
</form>
</div>
</Card>
src/pages/settings/Radio.tsx
+17 -1
View File
@@ -2,9 +2,11 @@ import React from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { FiMenu, FiSave, FiXCircle } from 'react-icons/fi';
import { FiCode, FiMenu, FiSave, FiXCircle } from 'react-icons/fi';
import JSONPretty from 'react-json-pretty';
import { Card } from '@app/components/generic/Card';
import { Cover } from '@app/components/generic/Cover.jsx';
import { Checkbox } from '@app/components/generic/form/Checkbox';
import { Select } from '@app/components/generic/form/Select.jsx';
import { IconButton } from '@app/components/generic/IconButton.jsx';
@@ -23,6 +25,7 @@ export interface RadioProps {
export const Radio = ({ navOpen, setNavOpen }: RadioProps): 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>({
@@ -69,7 +72,20 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
<Card
title="Basic settings"
description="Device name and user parameters"
buttons={
<Button
border
active={debug}
onClick={(): void => {
setDebug(!debug);
}}
icon={<FiCode />}
>
Debug
</Button>
}
>
<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}>
<div>WiFi</div>