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

WIP

Browse Source
This commit is contained in:
Sacha Weatherstone
2021-10-17 13:45:40 +11:00
parent 1803b22d66
commit 1cffbab98d
25 changed files with 555 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+11 -7
View File
@@ -28,6 +28,7 @@ import { Nodes } from '@pages/Nodes/Index';
import { Settings } from '@pages/settings/Index';
import { NotFound } from './pages/NotFound';
import { Plugins } from './pages/Plugins/Index.jsx';
const App = (): JSX.Element => {
const dispatch = useAppDispatch();
@@ -40,22 +41,24 @@ const App = (): JSX.Element => {
);
const hostOverride = useAppSelector((state) => state.meshtastic.hostOverride);
const connectionURL = hostOverrideEnabled
? hostOverride
: import.meta.env.NODE_ENV === 'production'
? window.location.hostname
: (import.meta.env.SNOWPACK_PUBLIC_DEVICE_IP as string) ??
'http://meshtastic.local';
React.useEffect(() => {
SettingsManager.debugMode = Protobuf.LogRecord_Level.TRACE;
void connection.connect({
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
address: hostOverrideEnabled
? hostOverride
: import.meta.env.NODE_ENV === 'production'
? window.location.hostname
: import.meta.env.SNOWPACK_PUBLIC_DEVICE_IP ??
'http://meshtastic.local',
address: connectionURL,
receiveBatchRequests: false,
tls: false,
fetchInterval: 2000,
});
}, [hostOverrideEnabled, hostOverride]);
}, [hostOverrideEnabled, hostOverride, connectionURL]);
React.useEffect(() => {
connection.onDeviceStatus.subscribe((status) => {
@@ -159,6 +162,7 @@ const App = (): JSX.Element => {
<div className="flex w-full bg-gray-100 md:shadow-xl md:overflow-hidden dark:bg-secondaryDark md:rounded-b-3xl">
{route.name === 'messages' && <Messages />}
{route.name === 'nodes' && <Nodes />}
{route.name === 'plugins' && <Plugins />}
{route.name === 'settings' && <Settings />}
{route.name === 'about' && <About />}
{route.name === false && <NotFound />}
src/components/chat/MessageBar.tsx
+4 -12
View File
@@ -1,16 +1,12 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { FiPaperclip, FiSend, FiSmile } from 'react-icons/fi';
import { useAppSelector } from '@app/hooks/redux';
import { Button } from '@components/generic/Button';
import { Input } from '@components/generic/Input';
import { connection } from '@core/connection';
import {
EmojiHappyIcon,
PaperAirplaneIcon,
PaperClipIcon,
} from '@heroicons/react/outline';
export const MessageBar = (): JSX.Element => {
const ready = useAppSelector((state) => state.meshtastic.ready);
@@ -26,8 +22,8 @@ export const MessageBar = (): JSX.Element => {
<div className="flex w-full p-4 mx-auto space-x-2 text-gray-500 bg-gray-50 dark:bg-transparent dark:text-gray-400">
<div className="flex w-full max-w-4xl mx-auto">
<div className="flex">
<Button icon={<EmojiHappyIcon className="w-5 h-5" />} circle />
<Button icon={<PaperClipIcon className="w-5 h-5" />} circle />
<Button icon={<FiSmile className="w-5 h-5" />} circle />
<Button icon={<FiPaperclip className="w-5 h-5" />} circle />
</div>
<form
className="flex w-full space-x-2"
@@ -46,11 +42,7 @@ export const MessageBar = (): JSX.Element => {
setCurrentMessage(e.target.value);
}}
/>
<Button
icon={<PaperAirplaneIcon className="w-5 h-5" />}
type="submit"
circle
/>
<Button icon={<FiSend className="w-5 h-5" />} type="submit" circle />
</form>
</div>
</div>
src/components/generic/Button.tsx
+20 -1
View File
@@ -1,5 +1,7 @@
import React from 'react';
import { FiCheck } from 'react-icons/fi';
type DefaultButtonProps = JSX.IntrinsicElements['button'];
interface ButtonProps extends DefaultButtonProps {
@@ -7,6 +9,7 @@ interface ButtonProps extends DefaultButtonProps {
circle?: boolean;
active?: boolean;
border?: boolean;
confirmAction?: () => void;
}
export const Button = ({
@@ -15,12 +18,28 @@ export const Button = ({
className,
active,
border,
confirmAction,
disabled,
children,
...props
}: ButtonProps): JSX.Element => {
const [hasConfirmed, setHasConfirmed] = React.useState(false);
const handleConfirm = (): void => {
if (typeof confirmAction == 'function') {
if (hasConfirmed) {
void confirmAction();
}
setHasConfirmed(true);
setTimeout(() => {
setHasConfirmed(false);
}, 3000);
}
};
return (
<button
onClick={handleConfirm}
className={`items-center select-none flex dark:text-white active:scale-95 ${
active && !disabled ? 'bg-gray-100 dark:bg-gray-700' : ''
} ${
@@ -38,7 +57,7 @@ export const Button = ({
circle ? 'mx-auto' : ''
}`}
>
{icon}
{hasConfirmed ? <FiCheck /> : icon}
</div>
)}
src/components/generic/Select.tsx
+3 -2
View File
@@ -1,7 +1,8 @@
import React from 'react';
import { FiChevronDown } from 'react-icons/fi';
import { Listbox } from '@headlessui/react';
import { SelectorIcon } from '@heroicons/react/solid';
export interface SelectProps {
label: string;
@@ -41,7 +42,7 @@ export const Select = ({
<div className="mx-2 my-auto">{active.icon}</div>
<span className="block my-auto truncate">{active.name}</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<SelectorIcon
<FiChevronDown
className="w-5 h-5 text-gray-400"
aria-hidden="true"
/>
src/components/generic/Toggle.tsx
+17 -1
View File
@@ -5,19 +5,35 @@ import { Switch } from '@headlessui/react';
type DefaultButtonProps = JSX.IntrinsicElements['button'];
interface ToggleProps extends DefaultButtonProps {
action?: (enabled: boolean) => void;
label?: string;
valid?: boolean;
validationMessage?: string;
checked?: boolean;
}
export const Toggle = ({
action,
label,
valid,
validationMessage,
checked,
id,
...props
}: ToggleProps): JSX.Element => {
const [enabled, setEnabled] = React.useState(false);
React.useEffect(() => {
if (checked !== undefined) {
setEnabled(checked);
}
}, [checked]);
const handleToggle = (enabled: boolean) => {
setEnabled(enabled);
if (action) {
action(enabled);
}
};
return (
<div className="flex flex-col w-full">
@@ -32,7 +48,7 @@ export const Toggle = ({
id={id}
{...props}
checked={enabled}
onChange={setEnabled}
onChange={handleToggle}
className={`${
enabled ? 'bg-primary' : 'bg-gray-200 dark:bg-secondaryDark'
}
src/components/menu/Navigation.tsx
+22 -10
View File
@@ -1,13 +1,15 @@
import React from 'react';
import {
FiGrid,
FiInfo,
FiMessageSquare,
FiPackage,
FiSettings,
} from 'react-icons/fi';
import { Button } from '@components/generic/Button';
import { routes, useRoute } from '@core/router';
import {
AnnotationIcon,
CogIcon,
InformationCircleIcon,
ViewGridIcon,
} from '@heroicons/react/outline';
type DefaultDivProps = JSX.IntrinsicElements['div'];
@@ -26,7 +28,7 @@ export const Navigation = ({
>
<div onClick={onClick}>
<Button
icon={<AnnotationIcon className="w-6 h-6" />}
icon={<FiMessageSquare className="w-6 h-6" />}
active={route.name === 'messages'}
className="w-full md:w-auto"
{...routes.messages().link}
@@ -36,7 +38,7 @@ export const Navigation = ({
</div>
<div onClick={onClick}>
<Button
icon={<ViewGridIcon className="w-6 h-6" />}
icon={<FiGrid className="w-6 h-6" />}
className="w-full md:w-auto"
active={route.name === 'nodes'}
{...routes.nodes().link}
@@ -46,7 +48,17 @@ export const Navigation = ({
</div>
<div onClick={onClick}>
<Button
icon={<CogIcon className="w-6 h-6" />}
icon={<FiPackage className="w-6 h-6" />}
className="w-full md:w-auto"
active={route.name === 'plugins'}
{...routes.plugins().link}
>
Plugins
</Button>
</div>
<div onClick={onClick}>
<Button
icon={<FiSettings className="w-6 h-6" />}
className="w-full md:w-auto"
active={route.name === 'settings'}
{...routes.settings().link}
@@ -56,7 +68,7 @@ export const Navigation = ({
</div>
<div onClick={onClick}>
<Button
icon={<InformationCircleIcon className="w-6 h-6" />}
icon={<FiInfo className="w-6 h-6" />}
className="w-full md:w-auto"
active={route.name === 'about'}
{...routes.about().link}
src/components/menu/buttons/DeviceStatusDropdown.tsx
+12 -10
View File
@@ -1,20 +1,22 @@
import React from 'react';
import { FiWifi, FiWifiOff } from 'react-icons/fi';
import { useAppSelector } from '@app/hooks/redux';
import { Button } from '@components/generic/Button';
import { SwitchVerticalIcon } from '@heroicons/react/outline';
export const DeviceStatusDropdown = (): JSX.Element => {
const ready = useAppSelector((state) => state.meshtastic.ready);
return (
<Button
icon={
<SwitchVerticalIcon
className={`h-6 w-6 ${!ready ? 'animate-pulse' : ''}`}
/>
}
circle
/>
return !ready ? (
<Button icon={<FiWifi className="w-6 h-6" />} circle />
) : (
<div className="flex bg-black rounded-full bg-opacity-20">
<div className="flex px-2 my-auto text-white">
<div className="my-auto mx-2 w-2 h-2 rounded-full bg-yellow-400 min-w-[2]"></div>
Loading
</div>
<Button icon={<FiWifiOff className="w-6 h-6 animate-pulse" />} circle />
</div>
);
};
src/components/menu/buttons/MobileNavToggle.tsx
+3 -2
View File
@@ -1,8 +1,9 @@
import React from 'react';
import { FiMenu } from 'react-icons/fi';
import { Button } from '@components/generic/Button';
import { openMobileNav } from '@core/slices/appSlice';
import { MenuIcon } from '@heroicons/react/outline';
import { useAppDispatch } from '../../../hooks/redux';
@@ -12,7 +13,7 @@ export const MobileNavToggle = (): JSX.Element => {
return (
<div className="md:hidden">
<Button
icon={<MenuIcon className="w-5 h-5" />}
icon={<FiMenu className="w-5 h-5" />}
onClick={(): void => {
dispatch(openMobileNav());
}}
src/components/menu/buttons/ThemeToggle.tsx
+4 -3
View File
@@ -1,9 +1,10 @@
import React from 'react';
import { FiMoon, FiSun } from 'react-icons/fi';
import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
import { Button } from '@components/generic/Button';
import { setDarkModeEnabled } from '@core/slices/appSlice';
import { MoonIcon, SunIcon } from '@heroicons/react/outline';
export const ThemeToggle = (): JSX.Element => {
const dispatch = useAppDispatch();
@@ -13,9 +14,9 @@ export const ThemeToggle = (): JSX.Element => {
<Button
icon={
darkMode ? (
<SunIcon className="w-5 h-5" />
<FiSun className="w-5 h-5" />
) : (
<MoonIcon className="w-5 h-5" />
<FiMoon className="w-5 h-5" />
)
}
circle
src/core/router.ts
+1
View File
@@ -3,6 +3,7 @@ import { createRouter, defineRoute } from 'type-route';
export const { RouteProvider, useRoute, routes } = createRouter({
messages: defineRoute('/'),
nodes: defineRoute('/nodes'),
plugins: defineRoute('/plugins'),
settings: defineRoute('/settings'),
about: defineRoute('/about'),
});
src/core/utils/fetcher.ts
+7
View File
@@ -0,0 +1,7 @@
export default async function fetcher<JSON>(
input: RequestInfo,
init?: RequestInit,
): Promise<JSON> {
const res = await fetch(input, init);
return res.json() as Promise<JSON>;
}
src/pages/Messages.tsx
+5 -4
View File
@@ -1,9 +1,10 @@
import React from 'react';
import { FiHash, FiMap, FiUsers } from 'react-icons/fi';
import { Message } from '@components/chat/Message';
import { MessageBar } from '@components/chat/MessageBar';
import { Button } from '@components/generic/Button';
import { HashtagIcon, MapIcon, UsersIcon } from '@heroicons/react/outline';
import { Protobuf } from '@meshtastic/meshtasticjs';
import { useAppSelector } from '../hooks/redux';
@@ -25,13 +26,13 @@ export const Messages = (): JSX.Element => {
<div className="flex flex-col w-full">
<div className="flex justify-between w-full px-2 border-b dark:border-gray-600 dark:text-gray-300">
<div className="flex my-auto text-sm">
<HashtagIcon className="w-4 h-4 my-auto" />
<FiHash className="w-4 h-4 my-auto" />
{channelName()}
</div>
<div className="flex">
<Button icon={<MapIcon className="w-5 h-5" />} circle />
<Button icon={<FiMap className="w-5 h-5" />} circle />
<Button icon={<UsersIcon className="w-5 h-5" />} circle />
<Button icon={<FiUsers className="w-5 h-5" />} circle />
</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">
src/pages/Nodes/Index.tsx
+2 -2
View File
@@ -1,6 +1,7 @@
import React from 'react';
import Avatar from 'boring-avatars';
import { FiXCircle } from 'react-icons/fi';
import { useBreakpoint } from '@app/hooks/breakpoint';
import { useAppSelector } from '@app/hooks/redux';
@@ -8,7 +9,6 @@ import { Button } from '@components/generic/Button';
import { Drawer } from '@components/generic/Drawer';
import { SidebarItem } from '@components/generic/SidebarItem';
import { Tab } from '@headlessui/react';
import { XCircleIcon } from '@heroicons/react/outline';
import { Protobuf } from '@meshtastic/meshtasticjs';
import { Node } from './Node';
@@ -37,7 +37,7 @@ export const Nodes = (): JSX.Element => {
</div>
<div className="md:hidden">
<Button
icon={<XCircleIcon className="w-5 h-5" />}
icon={<FiXCircle className="w-5 h-5" />}
circle
onClick={(): void => {
setNavOpen(false);
src/pages/Nodes/Node.tsx
+5 -5
View File
@@ -1,6 +1,7 @@
import React from 'react';
import moment from 'moment';
import { FiMenu, FiTerminal } from 'react-icons/fi';
import { Card } from '@app/components/generic/Card';
import { Chart } from '@app/components/generic/Chart';
@@ -8,7 +9,6 @@ import { Input } from '@app/components/generic/Input';
import { Toggle } from '@app/components/generic/Toggle';
import { Button } from '@components/generic/Button';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
import { MenuIcon, PuzzleIcon } from '@heroicons/react/outline';
import type { Protobuf } from '@meshtastic/meshtasticjs';
export interface NodeProps {
@@ -24,7 +24,7 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
tagline="Node"
button={
<Button
icon={<MenuIcon className="w-5 h-5" />}
icon={<FiMenu className="w-5 h-5" />}
onClick={(): void => {
setNavOpen(!navOpen);
}}
@@ -34,8 +34,8 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
>
<div className="w-full space-y-4">
<Chart
title="Visitors Overview"
description="Number of unique visitors"
title={`${node.user?.longName ?? 'UNK'}`}
description="Airtime"
hasMultipleSeries={true}
series={[
{
@@ -151,7 +151,7 @@ export const Node = ({ navOpen, setNavOpen, node }: NodeProps): JSX.Element => {
description="Remote node settings"
lgPlaceholder={
<div className="w-full h-full text-black dark:text-white">
<PuzzleIcon className="w-24 h-24 m-auto" />
<FiTerminal className="w-24 h-24 m-auto" />
<div className="text-center">Placeholder</div>
</div>
}
src/pages/Plugins/Files.tsx
+143
View File
@@ -0,0 +1,143 @@
import React from 'react';
import { DefaultExtensionType, defaultStyles, FileIcon } from 'react-file-icon';
import { FiMenu, FiTrash, FiUploadCloud } from 'react-icons/fi';
import useSWR from 'swr';
import { Card } from '@app/components/generic/Card';
import fetcher from '@app/core/utils/fetcher.js';
import { useAppSelector } from '@app/hooks/redux';
import { Button } from '@components/generic/Button';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
export interface RangeTestProps {
navOpen: boolean;
setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
}
interface IFile {
name: string;
nameModified: string;
size: number;
}
interface IFiles {
data: {
files: IFile[];
filesystem: {
free: number;
total: number;
used: number;
};
};
status: boolean;
}
export const Files = ({ navOpen, setNavOpen }: RangeTestProps): JSX.Element => {
const hostOverrideEnabled = useAppSelector(
(state) => state.meshtastic.hostOverrideEnabled,
);
const hostOverride = useAppSelector((state) => state.meshtastic.hostOverride);
const connectionURL = hostOverrideEnabled
? hostOverride
: import.meta.env.NODE_ENV === 'production'
? window.location.hostname
: (import.meta.env.SNOWPACK_PUBLIC_DEVICE_IP as string) ??
'http://meshtastic.local';
const { data } = useSWR<IFiles>(
`http://${connectionURL}/json/spiffs/browse/static`,
fetcher,
);
return (
<PrimaryTemplate
title="File Browser"
tagline="Plugin"
button={
<Button
icon={<FiMenu className="w-5 h-5" />}
onClick={(): void => {
setNavOpen(!navOpen);
}}
circle
/>
}
>
<div className="flex flex-col justify-between w-full gap-4 md:flex-row-reverse">
<Card title="SPIFFS" description="Statistics">
{data ? (
<div className="flex">
<div className="mx-auto my-4 bg-gray-500 rounded-3xl">
<div></div>
{JSON.stringify(data.data.filesystem.used)} bytes total
</div>
</div>
) : (
<div>Loading...</div>
)}
</Card>
<Card
title="Files"
description="SPIFFS Contents"
buttons={
<Button active className="font-medium">
<FiUploadCloud className="w-8 h-8" />
</Button>
}
className="md:w-1/3"
>
{data ? (
<div className="flex flex-col my-4 space-y-2">
{data.data.files.map((file: IFile) => (
<div
key={file.name}
className="flex p-2 mx-4 bg-gray-300 rounded-md max-h-14 dark:bg-gray-600 "
>
<div className="flex w-12">
<FileIcon
extension={
(file.nameModified ?? file.name).split('.')[
(file.nameModified ?? file.name).split('.').length - 1
]
}
{...defaultStyles[
(file.nameModified ?? file.name).split('.')[
(file.nameModified ?? file.name).split('.').length - 1
] as DefaultExtensionType
]}
/>
</div>
<a
href={`http://${connectionURL}/${file.name.replace(
'static/',
'',
)}`}
className="my-auto font-semibold"
>
{file.nameModified ?? file.name}
</a>
<Button
className="ml-auto space-x-0"
active
confirmAction={async (): Promise<void> => {
await fetch(
`http://${connectionURL}/json/spiffs/delete`,
{
method: 'DELETE',
},
);
}}
icon={<FiTrash />}
/>
</div>
))}
</div>
) : (
<div>Loading...</div>
)}
</Card>
</div>
</PrimaryTemplate>
);
};
src/pages/Plugins/Index.tsx
+87
View File
@@ -0,0 +1,87 @@
import React from 'react';
import { FiFileText, FiRss, FiXCircle } from 'react-icons/fi';
import { useBreakpoint } from '@app/hooks/breakpoint';
import { Button } from '@components/generic/Button';
import { Drawer } from '@components/generic/Drawer';
import { SidebarItem } from '@components/generic/SidebarItem';
import { Tab } from '@headlessui/react';
import { Files } from './Files';
import { RangeTest } from './RangeTest';
export const Plugins = (): JSX.Element => {
const [navOpen, setNavOpen] = React.useState(false);
const { breakpoint } = useBreakpoint();
return (
<Tab.Group>
<div className="relative flex w-full dark:text-white">
<Drawer
open={breakpoint === 'sm' ? navOpen : true}
permenant={breakpoint !== 'sm'}
onClose={(): void => {
setNavOpen(!navOpen);
}}
>
<Tab.List className="flex flex-col border-b divide-y divide-gray-300 dark:divide-gray-600 dark:border-gray-600">
<div className="flex items-center justify-between m-8 mr-6 md:my-10">
<div className="text-4xl font-extrabold leading-none tracking-tight">
Plugins
</div>
<div className="md:hidden">
<Button
icon={<FiXCircle className="w-5 h-5" />}
circle
onClick={(): void => {
setNavOpen(false);
}}
/>
</div>
</div>
<Tab
onClick={(): void => {
setNavOpen(false);
}}
>
{({ selected }): JSX.Element => (
<SidebarItem
title="Range Test"
description="Test the range of your Meshtastic node"
selected={selected}
icon={<FiRss className="flex-shrink-0 w-6 h-6" />}
/>
)}
</Tab>
<Tab
onClick={(): void => {
setNavOpen(false);
}}
>
{({ selected }): JSX.Element => (
<SidebarItem
title="File Browser"
description="HTTP only file browser"
selected={selected}
icon={<FiFileText className="flex-shrink-0 w-6 h-6" />}
/>
)}
</Tab>
</Tab.List>
</Drawer>
<div className="flex w-full">
<Tab.Panels className="flex w-full">
<Tab.Panel className="flex w-full">
<RangeTest navOpen={navOpen} setNavOpen={setNavOpen} />
</Tab.Panel>
<Tab.Panel className="flex w-full">
<Files navOpen={navOpen} setNavOpen={setNavOpen} />
</Tab.Panel>
</Tab.Panels>
</div>
</div>
</Tab.Group>
);
};
src/pages/Plugins/RangeTest.tsx
+112
View File
@@ -0,0 +1,112 @@
import React from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { FiMenu, FiSave } from 'react-icons/fi';
import { Card } from '@app/components/generic/Card';
import { Input } from '@app/components/generic/Input.jsx';
import { Toggle } from '@app/components/generic/Toggle';
import { connection } from '@app/core/connection.js';
import { useAppSelector } from '@app/hooks/redux';
import { Button } from '@components/generic/Button';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
import type { RadioConfig_UserPreferences } from '@meshtastic/meshtasticjs/dist/generated';
export interface RangeTestProps {
navOpen: boolean;
setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
}
export const RangeTest = ({
navOpen,
setNavOpen,
}: RangeTestProps): JSX.Element => {
const { t } = useTranslation();
const preferences = useAppSelector((state) => state.meshtastic.preferences);
const { register, handleSubmit, formState } =
useForm<RadioConfig_UserPreferences>({
defaultValues: {
rangeTestPluginEnabled: preferences.rangeTestPluginEnabled,
rangeTestPluginSave: preferences.rangeTestPluginSave,
rangeTestPluginSender: preferences.rangeTestPluginSender,
},
});
const onSubmit = handleSubmit((data) => {
console.log(data);
void connection.setPreferences(data);
});
return (
<PrimaryTemplate
title="Range Test"
tagline="Plugin"
button={
<Button
icon={<FiMenu className="w-5 h-5" />}
onClick={(): void => {
setNavOpen(!navOpen);
}}
circle
/>
}
footer={
<Button
className="px-10 ml-auto"
icon={<FiSave className="w-5 h-5" />}
disabled={!formState.isDirty}
onClick={onSubmit}
active
border
>
{t('strings.save_changes')}
</Button>
}
>
<div className="w-full space-y-4">
<Card title="..." description="...">
<div className="w-full max-w-3xl p-10 md:max-w-xl">
<form onSubmit={onSubmit}>
<Toggle
label="Range Test Plugin Enabled?"
checked={preferences.rangeTestPluginEnabled}
action={(checked): void => {
void connection.setPreferences({
...preferences,
rangeTestPluginEnabled: checked,
});
}}
/>
<Toggle
label="Range Test Plugin Save?"
checked={preferences.rangeTestPluginEnabled}
action={(checked): void => {
void connection.setPreferences({
...preferences,
rangeTestPluginSave: checked,
});
}}
/>
<Toggle
label="Range Test Plugin Save?"
{...register('rangeTestPluginEnabled', {
valueAsNumber: true,
})}
/>
<Input
type="number"
label="Message Interval"
{...register('rangeTestPluginSender', {
valueAsNumber: true,
})}
/>
</form>
</div>
</Card>
</div>
</PrimaryTemplate>
);
};
src/pages/settings/Connection.tsx
+7 -7
View File
@@ -2,6 +2,7 @@ import React from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { FiLink2, FiMenu, FiSave } from 'react-icons/fi';
import { Card } from '@app/components/generic/Card';
import { Input } from '@app/components/generic/Input';
@@ -11,7 +12,6 @@ import { bleConnection, serialConnection } from '@app/core/connection';
import { useAppSelector } from '@app/hooks/redux';
import { Button } from '@components/generic/Button';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
import { LinkIcon, MenuIcon, SaveIcon } from '@heroicons/react/outline';
import type { Protobuf } from '@meshtastic/meshtasticjs';
export interface ConnectionProps {
@@ -40,7 +40,7 @@ export const Connection = ({
tagline="Settings"
button={
<Button
icon={<MenuIcon className="w-5 h-5" />}
icon={<FiMenu className="w-5 h-5" />}
onClick={(): void => {
setNavOpen(!navOpen);
}}
@@ -50,7 +50,7 @@ export const Connection = ({
footer={
<Button
className="px-10 ml-auto"
icon={<SaveIcon className="w-5 h-5" />}
icon={<FiSave className="w-5 h-5" />}
disabled={!formState.isDirty}
active
border
@@ -97,11 +97,11 @@ export const Connection = ({
</Button>
<div className="flex justify-between p-2 border rounded-3xl dark:border-600">
Device Name
<LinkIcon className="w-5 h-5 my-auto mr-2 text-gray-300" />
<FiLink2 className="w-5 h-5 my-auto mr-2 text-gray-300" />
</div>
<div className="flex justify-between p-2 border rounded-3xl dark:border-600">
Device Name
<LinkIcon className="w-5 h-5 my-auto mr-2 text-gray-600" />
<FiLink2 className="w-5 h-5 my-auto mr-2 text-gray-600" />
</div>
</div>
),
@@ -120,11 +120,11 @@ export const Connection = ({
</Button>
<div className="flex justify-between p-2 border rounded-3xl dark:border-600">
Device Name
<LinkIcon className="w-5 h-5 my-auto mr-2 text-gray-300" />
<FiLink2 className="w-5 h-5 my-auto mr-2 text-gray-300" />
</div>
<div className="flex justify-between p-2 border rounded-3xl dark:border-600">
Device Name
<LinkIcon className="w-5 h-5 my-auto mr-2 text-gray-600" />
<FiLink2 className="w-5 h-5 my-auto mr-2 text-gray-600" />
</div>
</div>
),
src/pages/settings/Device.tsx
+3 -3
View File
@@ -2,6 +2,7 @@ import React from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { FiMenu, FiSave } from 'react-icons/fi';
import { Card } from '@app/components/generic/Card';
import { Toggle } from '@app/components/generic/Toggle';
@@ -10,7 +11,6 @@ import { useAppSelector } from '@app/hooks/redux';
import { Button } from '@components/generic/Button';
import { Input } from '@components/generic/Input';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
import { MenuIcon, SaveIcon } from '@heroicons/react/outline';
import { Protobuf } from '@meshtastic/meshtasticjs';
export interface DeviceProps {
@@ -44,7 +44,7 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
tagline="Settings"
button={
<Button
icon={<MenuIcon className="w-5 h-5" />}
icon={<FiMenu className="w-5 h-5" />}
onClick={(): void => {
setNavOpen(!navOpen);
}}
@@ -54,7 +54,7 @@ export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
footer={
<Button
className="px-10 ml-auto"
icon={<SaveIcon className="w-5 h-5" />}
icon={<FiSave className="w-5 h-5" />}
disabled={!formState.isDirty}
active
border
src/pages/settings/Index.tsx
+13 -12
View File
@@ -1,17 +1,18 @@
import React from 'react';
import {
FiLayout,
FiLink2,
FiRss,
FiSmartphone,
FiXCircle,
} from 'react-icons/fi';
import { useBreakpoint } from '@app/hooks/breakpoint';
import { Button } from '@components/generic/Button';
import { Drawer } from '@components/generic/Drawer';
import { SidebarItem } from '@components/generic/SidebarItem';
import { Tab } from '@headlessui/react';
import {
CollectionIcon,
DeviceMobileIcon,
LinkIcon,
WifiIcon,
XCircleIcon,
} from '@heroicons/react/outline';
import { Connection } from './Connection';
import { Device } from './Device';
@@ -40,7 +41,7 @@ export const Settings = (): JSX.Element => {
</div>
<div className="md:hidden">
<Button
icon={<XCircleIcon className="w-5 h-5" />}
icon={<FiXCircle className="w-5 h-5" />}
circle
onClick={(): void => {
setNavOpen(false);
@@ -58,7 +59,7 @@ export const Settings = (): JSX.Element => {
title="Connection"
description="Method and peramaters for connecting to the device"
selected={selected}
icon={<LinkIcon className="flex-shrink-0 w-6 h-6" />}
icon={<FiLink2 className="flex-shrink-0 w-6 h-6" />}
/>
)}
</Tab>
@@ -72,7 +73,7 @@ export const Settings = (): JSX.Element => {
title="Device"
description="Device settings, such as device name and wifi settings"
selected={selected}
icon={<DeviceMobileIcon className="flex-shrink-0 w-6 h-6" />}
icon={<FiSmartphone className="flex-shrink-0 w-6 h-6" />}
/>
)}
</Tab>
@@ -82,7 +83,7 @@ export const Settings = (): JSX.Element => {
title="Radio"
description="Adjust radio power and frequency settings"
selected={selected}
icon={<WifiIcon className="flex-shrink-0 w-6 h-6" />}
icon={<FiRss className="flex-shrink-0 w-6 h-6" />}
/>
)}
</Tab>
@@ -92,7 +93,7 @@ export const Settings = (): JSX.Element => {
title="Interface"
description="Change language and other UI settings"
selected={selected}
icon={<CollectionIcon className="flex-shrink-0 w-6 h-6" />}
icon={<FiLayout className="flex-shrink-0 w-6 h-6" />}
/>
)}
</Tab>
src/pages/settings/Interface.tsx
+4 -4
View File
@@ -2,13 +2,13 @@ import React from 'react';
import { Jp, Pt, Us } from 'react-flags-select';
import { useTranslation } from 'react-i18next';
import { FiMenu, FiSave } from 'react-icons/fi';
import { Card } from '@app/components/generic/Card';
import { Select } from '@app/components/generic/Select';
import i18n from '@app/core/translation';
import { Button } from '@components/generic/Button';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
import { MenuIcon, SaveIcon } from '@heroicons/react/outline';
export interface InterfaceProps {
navOpen: boolean;
@@ -27,7 +27,7 @@ export const Interface = ({
tagline="Settings"
button={
<Button
icon={<MenuIcon className="w-5 h-5" />}
icon={<FiMenu className="w-5 h-5" />}
onClick={(): void => {
setNavOpen(!navOpen);
}}
@@ -37,7 +37,7 @@ export const Interface = ({
footer={
<Button
className="px-10 ml-auto"
icon={<SaveIcon className="w-5 h-5" />}
icon={<FiSave className="w-5 h-5" />}
active
border
>
@@ -49,7 +49,7 @@ export const Interface = ({
title="Basic settings"
description="Device name and user parameters"
>
<div className="w-full max-w-3xl space-y-2 md:max-w-xl p-10">
<div className="w-full max-w-3xl p-10 space-y-2 md:max-w-xl">
<Select
label="Language"
active={
src/pages/settings/Radio.tsx
+3 -3
View File
@@ -2,6 +2,7 @@ import React from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { FiMenu, FiSave } from 'react-icons/fi';
import { Card } from '@app/components/generic/Card';
import { connection } from '@app/core/connection';
@@ -9,7 +10,6 @@ import { useAppSelector } from '@app/hooks/redux';
import { Button } from '@components/generic/Button';
import { Input } from '@components/generic/Input';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
import { MenuIcon, SaveIcon } from '@heroicons/react/outline';
import type { Protobuf } from '@meshtastic/meshtasticjs';
export interface RadioProps {
@@ -35,7 +35,7 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
tagline="Settings"
button={
<Button
icon={<MenuIcon className="w-5 h-5" />}
icon={<FiMenu className="w-5 h-5" />}
onClick={(): void => {
setNavOpen(!navOpen);
}}
@@ -45,7 +45,7 @@ export const Radio = ({ navOpen, setNavOpen }: RadioProps): JSX.Element => {
footer={
<Button
className="px-10 ml-auto"
icon={<SaveIcon className="w-5 h-5" />}
icon={<FiSave className="w-5 h-5" />}
disabled={!formState.isDirty}
active
border