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

Move components to external library

Browse Source
This commit is contained in:
Sacha Weatherstone
2021-12-31 20:12:13 +11:00
parent 7e1762f123
commit da46ca1a92
45 changed files with 1615 additions and 1362 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+10 -6
View File
@@ -1,5 +1,6 @@
import React from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import { FiBell } from 'react-icons/fi';
import { DeviceStatus } from '@app/components/menu/buttons/DeviceStatus';
@@ -19,7 +20,8 @@ import { NotFound } from '@pages/NotFound';
import { Plugins } from '@pages/Plugins/Index';
import { Settings } from '@pages/settings/Index';
import { addNotification, removeNotification } from './core/slices/appSlice.js';
import { ErrorFallback } from './components/ErrorFallback';
import { addNotification, removeNotification } from './core/slices/appSlice';
export const App = (): JSX.Element => {
const route = useRoute();
@@ -82,11 +84,13 @@ export const App = (): JSX.Element => {
<div className="flex flex-grow w-full min-h-0 md:px-6 md:mb-6">
<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 === false && <NotFound />}
<ErrorBoundary FallbackComponent={ErrorFallback}>
{route.name === 'messages' && <Messages />}
{route.name === 'nodes' && <Nodes />}
{route.name === 'plugins' && <Plugins />}
{route.name === 'settings' && <Settings />}
{route.name === false && <NotFound />}
</ErrorBoundary>
</div>
</div>
</div>
src/components/Channel.tsx
+7 -5
View File
@@ -7,14 +7,16 @@ import { FiEdit3, FiSave } from 'react-icons/fi';
import { MdRefresh, MdVisibility, MdVisibilityOff } from 'react-icons/md';
import QRCode from 'react-qr-code';
import { Card } from '@components/generic/Card';
import { Checkbox } from '@components/generic/form/Checkbox';
import { Input } from '@components/generic/form/Input';
import { Select } from '@components/generic/form/Select';
import { IconButton } from '@components/generic/IconButton';
import { Loading } from '@components/generic/Loading';
import { Modal } from '@components/generic/Modal';
import { connection } from '@core/connection';
import {
Card,
Checkbox,
IconButton,
Input,
Select,
} from '@meshtastic/components';
import { Protobuf } from '@meshtastic/meshtasticjs';
export interface ChannelProps {
src/components/Connection.tsx
+1 -3
View File
@@ -4,9 +4,6 @@ import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
import { BLE } from '@components/connection/BLE';
import { HTTP } from '@components/connection/HTTP';
import { Serial } from '@components/connection/Serial';
import { Button } from '@components/generic/Button';
import { Card } from '@components/generic/Card';
import { Select } from '@components/generic/form/Select';
import { Modal } from '@components/generic/Modal';
import { connection, connectionUrl, setConnection } from '@core/connection';
import {
@@ -15,6 +12,7 @@ import {
setConnectionParams,
setConnType,
} from '@core/slices/appSlice';
import { Button, Card, Select } from '@meshtastic/components';
import { Types } from '@meshtastic/meshtasticjs';
export const Connection = (): JSX.Element => {
src/components/ErrorFallback.tsx
+16
View File
@@ -0,0 +1,16 @@
import type React from 'react';
import type { FallbackProps } from 'react-error-boundary';
export const ErrorFallback = ({
error,
resetErrorBoundary,
}: FallbackProps): JSX.Element => {
return (
<div role="alert">
<p>Something went wrong:</p>
<pre>{error.message}</pre>
<button onClick={resetErrorBoundary}>Try again</button>
</div>
);
};
src/components/FormFooter.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import type React from 'react';
import { FiSave, FiXCircle } from 'react-icons/fi';
import { IconButton } from './generic/IconButton';
import { IconButton } from '@meshtastic/components';
export interface FormFooterProps {
dirty?: boolean;
src/components/Map/index.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ import { FaDirections, FaGlobeAfrica, FaMountain } from 'react-icons/fa';
import { MdFullscreen, MdRadar, MdWbShade } from 'react-icons/md';
import { useAppSelector } from '@app/hooks/redux';
import { IconButton } from '@components/generic/IconButton';
import { IconButton } from '@meshtastic/components';
import { MapStyles } from './styles';
src/components/chat/MessageBar.tsx
+1 -4
View File
@@ -4,12 +4,9 @@ import { useTranslation } from 'react-i18next';
import { FiSend } from 'react-icons/fi';
import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
import { Input } from '@components/generic/form/Input';
import { connection } from '@core/connection';
import { ackMessage } from '@core/slices/meshtasticSlice';
import { Select } from '../generic/form/Select';
import { IconButton } from '../generic/IconButton';
import { IconButton, Input, Select } from '@meshtastic/components';
export interface MessageBarProps {
channelIndex: number;
src/components/connection/BLE.tsx
+1 -2
View File
@@ -4,9 +4,8 @@ import { useForm } from 'react-hook-form';
import { FiCheck } from 'react-icons/fi';
import { connType } from '@app/core/slices/appSlice';
import { Button } from '@components/generic/Button';
import { IconButton } from '@components/generic/IconButton';
import { ble, setConnection } from '@core/connection';
import { Button, IconButton } from '@meshtastic/components';
export const BLE = (): JSX.Element => {
const [bleDevices, setBleDevices] = React.useState<BluetoothDevice[]>([]);
src/components/connection/HTTP.tsx
+1 -4
View File
@@ -3,12 +3,9 @@ import type React from 'react';
import { useForm, useWatch } from 'react-hook-form';
import { useAppDispatch } from '@app/hooks/redux.js';
import { Button } from '@components/generic/Button';
import { Checkbox } from '@components/generic/form/Checkbox';
import { Input } from '@components/generic/form/Input';
import { Select } from '@components/generic/form/Select';
import { connectionUrl, setConnection } from '@core/connection';
import { connType, setConnectionParams } from '@core/slices/appSlice';
import { Button, Checkbox, Input, Select } from '@meshtastic/components';
export const HTTP = (): JSX.Element => {
const dispatch = useAppDispatch();
src/components/connection/Serial.tsx
+34 -29
View File
@@ -4,10 +4,9 @@ import { useForm } from 'react-hook-form';
import { FiCheck } from 'react-icons/fi';
import { useAppDispatch } from '@app/hooks/redux';
import { Button } from '@components/generic/Button';
import { IconButton } from '@components/generic/IconButton';
import { serial, setConnection } from '@core/connection';
import { connType, setConnectionParams } from '@core/slices/appSlice';
import { Button, IconButton } from '@meshtastic/components';
export const Serial = (): JSX.Element => {
const [serialDevices, setSerialDevices] = React.useState<SerialPort[]>([]);
@@ -32,35 +31,41 @@ export const Serial = (): JSX.Element => {
return (
<form onSubmit={onSubmit} className="space-y-2">
{serialDevices.map((device, index) => (
<div
className="flex justify-between p-2 bg-gray-700 rounded-md"
key={index}
>
<div className="flex gap-4 my-auto">
<p>
Vendor: <small>{device.getInfo().usbVendorId}</small>
</p>
<p>
Device: <small>{device.getInfo().usbProductId}</small>
</p>
{serialDevices.length > 0 ? (
serialDevices.map((device, index) => (
<div
className="flex justify-between p-2 bg-gray-700 rounded-md"
key={index}
>
<div className="flex gap-4 my-auto">
<p>
Vendor: <small>{device.getInfo().usbVendorId}</small>
</p>
<p>
Device: <small>{device.getInfo().usbProductId}</small>
</p>
</div>
<IconButton
onClick={async (): Promise<void> => {
dispatch(
setConnectionParams({
type: connType.SERIAL,
params: {
port: device,
},
}),
);
await setConnection(connType.SERIAL);
}}
icon={<FiCheck />}
/>
</div>
<IconButton
onClick={async (): Promise<void> => {
dispatch(
setConnectionParams({
type: connType.SERIAL,
params: {
port: device,
},
}),
);
await setConnection(connType.SERIAL);
}}
icon={<FiCheck />}
/>
))
) : (
<div className="h-40 border rounded-md">
<p>No previously connected devices found</p>
</div>
))}
)}
<Button type="submit" className="mt-2 ml-auto" border>
Connect
</Button>
src/components/generic/Button.tsx
-61
View File
@@ -1,61 +0,0 @@
import React from 'react';
import { FiCheck } from 'react-icons/fi';
type DefaultButtonProps = JSX.IntrinsicElements['button'];
interface ButtonProps extends DefaultButtonProps {
icon?: JSX.Element;
active?: boolean;
border?: boolean;
padding?: string;
confirmAction?: () => void;
}
export const Button = ({
icon,
className,
active,
border,
confirmAction,
disabled,
children,
padding = '2',
...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 border border-transparent dark:text-white active:scale-95 transition duration-200 ease-in-out focus-within:border-primary dark:focus-within:border-primary focus-within:shadow-border rounded-md p-${padding} space-x-3 text-sm ${
active && !disabled ? 'bg-gray-100 dark:bg-gray-700' : ''
} ${
disabled
? 'cursor-not-allowed dark:bg-primaryDark bg-white'
: 'cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 hover:shadow-md'
} ${border ? 'border-gray-400 dark:border-gray-200' : ''} ${className}`}
{...props}
>
{icon && (
<div className="text-gray-500 dark:text-gray-400">
{hasConfirmed ? <FiCheck /> : icon}
</div>
)}
<span>{children}</span>
</button>
);
};
src/components/generic/Card.tsx
-57
View File
@@ -1,57 +0,0 @@
import type React from 'react';
import { Loading } from '@components/generic/Loading';
type DefaultDivProps = JSX.IntrinsicElements['div'];
interface CardProps extends DefaultDivProps {
title?: string;
description?: string | JSX.Element;
buttons?: JSX.Element;
lgPlaceholder?: JSX.Element;
loading?: boolean;
}
export const Card = ({
title,
description,
buttons,
children,
className,
lgPlaceholder,
loading,
...props
}: CardProps): JSX.Element => {
return (
<div
className={`relative flex flex-col flex-auto dark:text-white border-y md:border shadow-md select-none bg-white dark:bg-primaryDark border-gray-300 dark:border-gray-600 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">
{title && (
<div className="mr-4 text-2xl font-semibold leading-7 tracking-tight text-black md:text-3xl dark:text-white">
{title}
</div>
)}
{description && (
<div className="font-medium text-gray-400">{description}</div>
)}
</div>
{buttons}
</div>
)}
<div className="flex">
<div className={`${lgPlaceholder ? 'w-full xl:w-2/3' : 'w-full'}`}>
{children}
</div>
{lgPlaceholder && (
<div className="hidden w-1/3 xl:flex">{lgPlaceholder}</div>
)}
</div>
</div>
);
};
src/components/generic/IconButton.tsx
-35
View File
@@ -1,35 +0,0 @@
import type React from 'react';
type DefaulButtonProps = JSX.IntrinsicElements['button'];
export interface IconButtonProps extends DefaulButtonProps {
icon: React.ReactNode;
active?: boolean;
}
export const IconButton = ({
icon,
active,
disabled,
...props
}: IconButtonProps): JSX.Element => {
return (
<div className="my-auto text-gray-500 dark:text-gray-400">
<button
type="button"
disabled={disabled}
className={`p-2 transition duration-200 ease-in-out rounded-md active:scale-95 ${
active
? 'bg-gray-200 dark:bg-gray-600'
: 'hover:bg-gray-200 dark:hover:bg-gray-600'
} ${
disabled ? 'text-gray-400 dark:text-gray-700 cursor-not-allowed' : ''
}`}
{...props}
>
{icon}
<span className="sr-only">Refresh</span>
</button>
</div>
);
};
src/components/generic/form/BitwiseSelect.tsx
+89
View File
@@ -0,0 +1,89 @@
import type React from 'react';
import type { Noop, RefCallBack } from 'react-hook-form';
import type { Theme } from 'react-select';
import ReactSelect from 'react-select';
import { bitwiseDecode, bitwiseEncode } from '@app/core/utils/bitwise';
import { useAppSelector } from '@app/hooks/redux.js';
import { Label } from './Label';
export interface BiwiseSelectProps {
label: string;
error?: string;
value: number;
optionsEnum: { [s: string]: string | number };
onChange: (...event: unknown[]) => void;
onBlur: Noop;
name: string;
ref: RefCallBack;
}
export const BitwiseSelect = ({
label,
error,
value,
optionsEnum,
onChange,
ref,
}: BiwiseSelectProps): JSX.Element => {
const darkMode = useAppSelector((state) => state.app.darkMode);
return (
<div className="w-full">
{label && <Label label={label} error={error} />}
<ReactSelect
ref={ref}
isMulti
// styles={{
// control: (provided, state) => ({
// ...provided,
// // color: state.isFocused ? 'blue' : 'red',
// // borderColor: state.isFocused ? 'blue' : 'red',
// }),
// }}
theme={(theme): Theme => ({
...theme,
borderRadius: 7,
colors: {
...theme.colors,
primary: '#67ea94', //focus border color
// primary75: 'red',
// primary50: 'red',
// primary25: 'red',
// danger: 'red',
// dangerLight: 'red',
neutral0: darkMode ? 'rgb(30 41 59)' : 'white', //bg color
// neutral5: 'red',
neutral10: darkMode ? 'rgb(75 85 99)' : 'rgb(229 231 235)', //tag bg color
neutral20: darkMode ? 'rgb(229 231 235)' : 'rgb(156 163 175)', //border color
neutral30: '#67ea94', //border hover
// neutral40: 'red',
// neutral50: 'red',
// neutral60: 'red',
// neutral70: 'red',
neutral80: darkMode ? 'white' : 'black', //tag text color
// neutral90: 'red',
},
})}
value={bitwiseDecode(value, optionsEnum).map((flag) => {
return {
value: flag,
label: (optionsEnum[flag] as string).replace('POS_', ''),
};
})}
options={Object.entries(optionsEnum)
.filter((value) => typeof value[1] !== 'number')
.filter((value) => parseInt(value[0]) !== optionsEnum.POS_UNDEFINED)
.map((value) => {
return {
value: parseInt(value[0]),
label: value[1].toString().replace('POS_', ''),
};
})}
onChange={(e): void => onChange(bitwiseEncode(e.map((v) => v.value)))}
/>
</div>
);
};
src/components/generic/form/Checkbox.tsx
-48
View File
@@ -1,48 +0,0 @@
import React from 'react';
import { Label } from './Label';
type DefaultInputProps = JSX.IntrinsicElements['input'];
interface CheckboxProps extends DefaultInputProps {
action?: (enabled: boolean) => void;
label: string;
valid?: boolean;
validationMessage?: string;
error?: boolean;
}
export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
function Input(
{ label, valid, validationMessage, id, error, ...props }: CheckboxProps,
ref,
) {
return (
<div className="flex flex-col w-full">
<Label label={label} />
<div className="ml-auto">
<input
ref={ref}
type="checkbox"
id={id}
className={`appearance-none w-8 h-8 border rounded-md focus:outline-none focus-within:shadow-border checked:bg-primary checked:border-transparent transition duration-200 ease-in-out border-gray-400 dark:border-gray-200 ${
props.disabled
? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400 dark:border-gray-700'
: ''
} ${
error
? 'border-red-500'
: props.disabled
? 'border-gray-200'
: 'focus-within:border-primary dark:focus-within:border-primary hover:border-primary dark:hover:border-primary'
}`}
{...props}
/>
</div>
{!valid && (
<div className="text-sm text-gray-600">{validationMessage}</div>
)}
</div>
);
},
);
src/components/generic/form/Input.tsx
-37
View File
@@ -1,37 +0,0 @@
import React from 'react';
import { InputWrapper } from './InputWrapper';
import { Label } from './Label';
type DefaultInputProps = JSX.IntrinsicElements['input'];
interface InputProps extends DefaultInputProps {
label?: string;
error?: string;
action?: JSX.Element;
prefix?: string;
suffix?: string;
}
export const Input = React.forwardRef<HTMLInputElement, InputProps>(
function Input({ label, error, action, suffix, ...props }: InputProps, ref) {
return (
<div className="w-full">
{label && <Label label={label} error={error} />}
<InputWrapper error={error} disabled={props.disabled}>
<input
ref={ref}
className="w-full h-10 px-3 py-2 bg-transparent focus:outline-none"
{...props}
/>
{suffix && (
<span className="my-auto mr-3 text-sm font-medium text-gray-500 dark:text-gray-400">
{suffix}
</span>
)}
{action && <div className="flex mr-1">{action}</div>}
</InputWrapper>
</div>
);
},
);
src/components/generic/form/InputWrapper.tsx
-29
View File
@@ -1,29 +0,0 @@
import type React from 'react';
export interface LabelProps {
error?: string;
disabled?: boolean;
children: React.ReactNode;
}
export const InputWrapper = ({
error,
disabled,
children,
}: LabelProps): JSX.Element => (
<div
className={`flex w-full border-gray-400 dark:border-gray-200 border-y border rounded-md transition duration-200 ease-in-out ${
disabled
? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400 dark:border-gray-700'
: ''
} ${
error
? 'border-red-500'
: disabled
? 'border-gray-200'
: ' focus-within:border-primary dark:focus-within:border-primary hover:border-primary dark:hover:border-primary focus-within:shadow-border'
}`}
>
{children}
</div>
);
src/components/generic/form/Select.tsx
-66
View File
@@ -1,66 +0,0 @@
import React from 'react';
import { InputWrapper } from './InputWrapper';
import { Label } from './Label';
type DefaultSelectProps = JSX.IntrinsicElements['select'];
interface SelectProps extends DefaultSelectProps {
options?: {
name: string | number;
value: string | number;
}[];
optionsEnum?: { [s: string]: string | number };
label?: string;
error?: string;
small?: boolean;
}
export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
({ options, optionsEnum, label, error, small, ...props }, ref) => {
const optionsEnumValues = optionsEnum
? Object.entries(optionsEnum).filter(
(value) => typeof value[1] === 'number',
)
: [];
return (
<div>
{label && <Label label={label} error={error} />}
<InputWrapper>
<select
ref={ref}
className={`w-full rounded-md bg-transparent focus:outline-none focus:border-primary ${
small ? 'm-1' : 'h-10 mx-2'
}`}
disabled={
props.disabled
? true
: !(optionsEnumValues.length || options?.length)
}
{...props}
>
{!(optionsEnumValues.length || options?.length) && (
<option className="dark:bg-gray-700">Loading</option>
)}
{optionsEnumValues.length &&
optionsEnumValues.map(([name, value]) => (
<option className="dark:bg-gray-700" key={value} value={value}>
{name}
</option>
))}
{options &&
options.map((option) => (
<option
className="dark:bg-gray-700"
key={option.value}
value={option.value}
>
{option.name}
</option>
))}
</select>
</InputWrapper>
</div>
);
},
);
src/components/menu/Navigation.tsx
+1 -1
View File
@@ -2,8 +2,8 @@ import type React from 'react';
import { FiGrid, FiMessageSquare, FiPackage, FiSettings } from 'react-icons/fi';
import { Button } from '@components/generic/Button';
import { routes, useRoute } from '@core/router';
import { Button } from '@meshtastic/components';
type DefaultDivProps = JSX.IntrinsicElements['div'];
src/components/menu/buttons/DeviceStatus.tsx
+8 -11
View File
@@ -3,8 +3,8 @@ import type React from 'react';
import { FiBluetooth, FiCpu, FiWifi } from 'react-icons/fi';
import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
import { Button } from '@components/generic/Button';
import { connType, openConnectionModal } from '@core/slices/appSlice';
import { Button } from '@meshtastic/components';
import { Types } from '@meshtastic/meshtasticjs';
export const DeviceStatus = (): JSX.Element => {
@@ -14,7 +14,6 @@ export const DeviceStatus = (): JSX.Element => {
return (
<Button
padding="0"
active
onClick={(): void => {
dispatch(dispatch(openConnectionModal()));
@@ -43,15 +42,13 @@ export const DeviceStatus = (): JSX.Element => {
(node) => node.number === state.radio.hardware.myNodeNum,
)?.user?.longName ?? 'Disconnected'}
</div>
<div className="py-2">
{appState.connType === connType.BLE ? (
<FiBluetooth className="w-5 h-5" />
) : appState.connType === connType.SERIAL ? (
<FiCpu className="w-5 h-5" />
) : (
<FiWifi className="w-5 h-5" />
)}
</div>
{appState.connType === connType.BLE ? (
<FiBluetooth className="w-5 h-5" />
) : appState.connType === connType.SERIAL ? (
<FiCpu className="w-5 h-5" />
) : (
<FiWifi className="w-5 h-5" />
)}
</div>
</Button>
);
src/components/menu/buttons/MobileNavToggle.tsx
+1 -1
View File
@@ -2,8 +2,8 @@ import type React from 'react';
import { FiMenu } from 'react-icons/fi';
import { IconButton } from '@components/generic/IconButton';
import { openMobileNav } from '@core/slices/appSlice';
import { IconButton } from '@meshtastic/components';
import { useAppDispatch } from '../../../hooks/redux';
src/components/menu/buttons/Notifications.tsx
+2 -7
View File
@@ -3,10 +3,9 @@ import React from 'react';
import { FiBell, FiX } from 'react-icons/fi';
import { useAppSelector } from '@app/hooks/redux';
import { Button } from '@components/generic/Button';
import { IconButton } from '@components/generic/IconButton';
import { shift, useFloating } from '@floating-ui/react-dom';
import { Popover } from '@headlessui/react';
import { Button, IconButton } from '@meshtastic/components';
export const Notifications = (): JSX.Element => {
const [unreadCount, setUnreadCount] = React.useState(0);
@@ -62,11 +61,7 @@ export const Notifications = (): JSX.Element => {
<div className="flex space-x-1">
{notification.action ? (
<div className="my-auto w-18">
<Button
border
padding="0.5"
onClick={notification.action.action}
>
<Button border onClick={notification.action.action}>
{notification.action.message}
</Button>
</div>
src/components/menu/buttons/ThemeToggle.tsx
+1 -1
View File
@@ -3,8 +3,8 @@ import type React from 'react';
import { FiMoon, FiSun } from 'react-icons/fi';
import { useAppDispatch, useAppSelector } from '@app/hooks/redux';
import { IconButton } from '@components/generic/IconButton';
import { setDarkModeEnabled } from '@core/slices/appSlice';
import { IconButton } from '@meshtastic/components';
export const ThemeToggle = (): JSX.Element => {
const dispatch = useAppDispatch();
src/components/templates/PageLayout.tsx
+1 -1
View File
@@ -4,10 +4,10 @@ import { FiXCircle } from 'react-icons/fi';
import { useBreakpoint } from '@app/hooks/breakpoint';
import { Drawer } from '@components/generic/Drawer';
import { IconButton } from '@components/generic/IconButton';
import type { SidebarItemProps } from '@components/generic/SidebarItem';
import { SidebarItem } from '@components/generic/SidebarItem';
import { Tab } from '@headlessui/react';
import { IconButton } from '@meshtastic/components';
export interface PageLayoutProps {
title: string;
src/core/utils/bitwise.ts
+9
View File
@@ -0,0 +1,9 @@
export const bitwiseEncode = (enumValues: number[]): number => {
return enumValues.reduce((acc, curr) => acc | curr, 0);
};
export const bitwiseDecode = (value: number, decodeEnum: object): number[] => {
const enumValues = Object.keys(decodeEnum).map(Number).filter(Boolean);
return enumValues.map((b) => value & b).filter(Boolean);
};
src/index.tsx
+12 -6
View File
@@ -1,9 +1,11 @@
import '@meshtastic/components/dist/style.css';
import '@app/index.css';
import '@core/translation';
import React from 'react';
import ReactDOM from 'react-dom';
import { ErrorBoundary } from 'react-error-boundary';
import { Provider } from 'react-redux';
import { App } from '@app/App';
@@ -11,14 +13,18 @@ import { ReloadPrompt } from '@components/pwa/ReloadPrompt';
import { RouteProvider } from '@core/router';
import { store } from '@core/store';
import { ErrorFallback } from './components/ErrorFallback';
ReactDOM.render(
<React.StrictMode>
<RouteProvider>
<Provider store={store}>
<App />
<ReloadPrompt />
</Provider>
</RouteProvider>
<ErrorBoundary FallbackComponent={ErrorFallback}>
<RouteProvider>
<Provider store={store}>
<App />
<ReloadPrompt />
</Provider>
</RouteProvider>
</ErrorBoundary>
</React.StrictMode>,
document.getElementById('root'),
);
src/pages/Messages.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ import { FiHash } from 'react-icons/fi';
import { Message } from '@components/chat/Message';
import { MessageBar } from '@components/chat/MessageBar';
import { Select } from '@components/generic/form/Select';
import { Select } from '@meshtastic/components';
import { Protobuf } from '@meshtastic/meshtasticjs';
import { useAppSelector } from '../hooks/redux';
src/pages/Nodes/Index.tsx
+1 -1
View File
@@ -5,8 +5,8 @@ import { FiXCircle } from 'react-icons/fi';
import { useBreakpoint } from '@app/hooks/breakpoint';
import { useAppSelector } from '@app/hooks/redux';
import { Drawer } from '@components/generic/Drawer';
import { IconButton } from '@components/generic/IconButton';
import { Map } from '@components/Map';
import { IconButton } from '@meshtastic/components';
import { NodeCard } from './NodeCard';
src/pages/Nodes/NodeCard.tsx
+1 -1
View File
@@ -15,9 +15,9 @@ import {
} from 'react-icons/md';
import TimeAgo from 'timeago-react';
import { IconButton } from '@components/generic/IconButton';
import type { Node } from '@core/slices/meshtasticSlice';
import { Disclosure } from '@headlessui/react';
import { IconButton } from '@meshtastic/components';
import { Protobuf } from '@meshtastic/meshtasticjs';
export interface NodeCardProps {
src/pages/NotFound.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import type React from 'react';
import { Card } from '@components/generic/Card';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
import { Card } from '@meshtastic/components';
export const NotFound = (): JSX.Element => {
return (
src/pages/Plugins/ExternalNotification.tsx
+3 -4
View File
@@ -5,12 +5,9 @@ import { FiMenu } from 'react-icons/fi';
import { FormFooter } from '@app/components/FormFooter';
import { useAppSelector } from '@app/hooks/redux';
import { Card } from '@components/generic/Card';
import { Checkbox } from '@components/generic/form/Checkbox';
import { Input } from '@components/generic/form/Input';
import { IconButton } from '@components/generic/IconButton';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
import { connection } from '@core/connection';
import { Card, Checkbox, IconButton, Input } from '@meshtastic/components';
import type { RadioConfig_UserPreferences } from '@meshtastic/meshtasticjs/dist/generated';
export interface ExternalNotificationProps {
@@ -58,6 +55,8 @@ export const ExternalNotification = ({
void connection.setPreferences(data);
});
//todo, add loading indicator
const watchExternalNotificationPluginEnabled = useWatch({
control,
name: 'extNotificationPluginEnabled',
src/pages/Plugins/Files.tsx
+1 -2
View File
@@ -4,11 +4,10 @@ import type React from 'react';
import { FiMenu, FiTrash, FiUploadCloud } from 'react-icons/fi';
import useSWR from 'swr';
import { Card } from '@components/generic/Card';
import { IconButton } from '@components/generic/IconButton';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
import { connectionUrl } from '@core/connection';
import fetcher from '@core/utils/fetcher';
import { Card, IconButton } from '@meshtastic/components';
export interface RangeTestProps {
navOpen?: boolean;
src/pages/Plugins/RangeTest.tsx
+3 -4
View File
@@ -5,12 +5,9 @@ import { FiMenu } from 'react-icons/fi';
import { useAppSelector } from '@app/hooks/redux';
import { FormFooter } from '@components/FormFooter';
import { Card } from '@components/generic/Card';
import { Checkbox } from '@components/generic/form/Checkbox';
import { Input } from '@components/generic/form/Input';
import { IconButton } from '@components/generic/IconButton';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
import { connection } from '@core/connection';
import { Card, Checkbox, IconButton, Input } from '@meshtastic/components';
import type { RadioConfig_UserPreferences } from '@meshtastic/meshtasticjs/dist/generated';
export interface RangeTestProps {
@@ -47,6 +44,8 @@ export const RangeTest = ({
void connection.setPreferences(data);
});
//todo, add loading indicator
const watchRangeTestPluginEnabled = useWatch({
control,
name: 'rangeTestPluginEnabled',
src/pages/Plugins/Serial.tsx
+2 -4
View File
@@ -5,12 +5,9 @@ import { FiMenu } from 'react-icons/fi';
import { useAppSelector } from '@app/hooks/redux';
import { FormFooter } from '@components/FormFooter';
import { Card } from '@components/generic/Card';
import { Checkbox } from '@components/generic/form/Checkbox';
import { Input } from '@components/generic/form/Input';
import { IconButton } from '@components/generic/IconButton';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
import { connection } from '@core/connection';
import { Card, Checkbox, IconButton, Input } from '@meshtastic/components';
import type { RadioConfig_UserPreferences } from '@meshtastic/meshtasticjs/dist/generated';
export interface SerialProps {
@@ -49,6 +46,7 @@ export const Serial = ({ navOpen, setNavOpen }: SerialProps): JSX.Element => {
const onSubmit = handleSubmit((data) => {
void connection.setPreferences(data);
});
//todo, add loading indicator
const watchSerialPluginEnabled = useWatch({
control,
src/pages/Plugins/StoreAndForward.tsx
+2 -4
View File
@@ -5,12 +5,9 @@ import { FiMenu } from 'react-icons/fi';
import { useAppSelector } from '@app/hooks/redux';
import { FormFooter } from '@components/FormFooter';
import { Card } from '@components/generic/Card';
import { Checkbox } from '@components/generic/form/Checkbox';
import { Input } from '@components/generic/form/Input';
import { IconButton } from '@components/generic/IconButton';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
import { connection } from '@core/connection';
import { Card, Checkbox, IconButton, Input } from '@meshtastic/components';
import type { RadioConfig_UserPreferences } from '@meshtastic/meshtasticjs/dist/generated';
export interface StoreAndForwardProps {
@@ -44,6 +41,7 @@ export const StoreAndForward = ({
const onSubmit = handleSubmit((data) => {
void connection.setPreferences(data);
});
//todo, add loading indicator
const watchStoreForwardPluginEnabled = useWatch({
control,
src/pages/settings/Channels.tsx
+14 -64
View File
@@ -7,15 +7,17 @@ import JSONPretty from 'react-json-pretty';
import { useAppSelector } from '@app/hooks/redux';
import { Channel } from '@components/Channel';
import { FormFooter } from '@components/FormFooter';
import { Card } from '@components/generic/Card';
import { Cover } from '@components/generic/Cover';
import { Checkbox } from '@components/generic/form/Checkbox';
import { Input } from '@components/generic/form/Input';
import { Select } from '@components/generic/form/Select';
import { IconButton } from '@components/generic/IconButton';
import { Loading } from '@components/generic/Loading';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
import { connection } from '@core/connection';
import {
Card,
Checkbox,
IconButton,
Input,
Select,
} from '@meshtastic/components';
import { Protobuf } from '@meshtastic/meshtasticjs';
export interface ChannelsProps {
@@ -33,16 +35,9 @@ export const Channels = ({
const [debug, setDebug] = React.useState(false);
const [loading, setLoading] = React.useState(false);
enum PresetName {
'Long Slow',
'Long Alt',
'Medium',
'Short Fast',
}
const { register, handleSubmit, reset, formState, control } = useForm<{
simple: boolean;
preset?: PresetName;
preset?: Protobuf.ChannelSettings_ModemConfig;
enabled: boolean;
settings: {
name: string;
@@ -57,7 +52,6 @@ export const Channels = ({
}>({
defaultValues: {
simple: true,
preset: PresetName['Long Slow'],
enabled:
channel.role ===
(Protobuf.Channel_Role.PRIMARY || Protobuf.Channel_Role.SECONDARY)
@@ -76,42 +70,6 @@ export const Channels = ({
},
});
const presets = [
{
name: PresetName['Long Slow'],
config: {
bandwidth: 125,
codingRate: 8, // 4/8
spreadFactor: 12, // 4096chips/symbol
},
},
{
name: PresetName['Long Alt'],
config: {
bandwidth: 31.25,
codingRate: 8, // 4/8
spreadFactor: 9, // 512chips/symbol,
},
},
{
name: PresetName['Medium'],
config: {
bandwidth: 125,
codingRate: 5, // 4/5
spreadFactor: 7, // 128chips/symbol,
},
},
{
name: PresetName['Short Fast'],
config: {
bandwidth: 500,
codingRate: 5, // 4/5
spreadFactor: 7, // 128chips/symbol,
},
},
];
const watchSimple = useWatch({
control,
name: 'simple',
@@ -120,10 +78,6 @@ export const Channels = ({
const onSubmit = handleSubmit(async (data) => {
setLoading(true);
console.log(data);
const selectedPreset = data.simple
? presets.find((preset) => preset.name === data.preset)?.config
: undefined;
const adminChannel = Protobuf.Channel.create({
role: data.enabled
@@ -132,7 +86,6 @@ export const Channels = ({
index: channel.index,
settings: {
...data.settings,
...selectedPreset,
psk: new TextEncoder().encode(data.settings.psk),
},
});
@@ -180,17 +133,14 @@ export const Channels = ({
{loading && <Loading />}
<div className="w-full max-w-3xl p-10 md:max-w-xl">
{/* TODO: get gap working */}
<Checkbox
label="Use Presets"
{...register('simple')}
// checked={simpleChannelSettings}
// onChange={(e): void =>
// setSimpleChannelSettings(e.target.checked)
// }
/>
<Checkbox label="Use Presets" {...register('simple')} />
<form onSubmit={onSubmit}>
{watchSimple ? (
<Select label="Preset" optionsEnum={PresetName} />
<Select
label="Preset"
optionsEnum={Protobuf.ChannelSettings_ModemConfig}
{...register('simple')}
/>
) : (
<>
<Input
src/pages/settings/Index.tsx
+39 -25
View File
@@ -1,4 +1,4 @@
import type React from 'react';
import React from 'react';
import {
FiLayers,
@@ -10,6 +10,7 @@ import {
FiZap,
} from 'react-icons/fi';
import type { SidebarItemProps } from '@app/components/generic/SidebarItem.js';
import { PageLayout } from '@components/templates/PageLayout';
import { Channels } from './Channels';
@@ -21,17 +22,20 @@ import { User } from './User';
import { WiFi } from './WiFi';
export const Settings = (): JSX.Element => {
const sidebarItems = [
{
title: 'WiFi',
description: 'WiFi credentials and mode',
icon: <FiWifi className="flex-shrink-0 w-6 h-6" />,
},
{
title: 'Position',
description: 'Position settings and flags',
icon: <FiMapPin className="flex-shrink-0 w-6 h-6" />,
},
// const { hasGps, hasWifi } = useAppSelector((state) => state.meshtastic.radio.hardware);
const hasGps = true;
const hasWifi = true;
const panels: JSX.Element[] = [
<User key={4} />,
<Power key={5} />,
<Radio key={6} />,
<Channels key={8} />,
<Interface key={7} />,
];
const sidebarItems: SidebarItemProps[] = [
{
title: 'User',
description: 'Device name and details',
@@ -58,19 +62,29 @@ export const Settings = (): JSX.Element => {
icon: <FiLayout className="flex-shrink-0 w-6 h-6" />,
},
];
React.useEffect(() => {
if (hasGps) {
panels.unshift(<Position key={3} />);
sidebarItems.unshift({
title: 'Position',
description: 'Position settings and flags',
icon: <FiMapPin className="flex-shrink-0 w-6 h-6" />,
});
}
if (hasWifi) {
panels.unshift(<WiFi key={2} />);
sidebarItems.unshift({
title: 'WiFi',
description: 'WiFi credentials and mode',
icon: <FiWifi className="flex-shrink-0 w-6 h-6" />,
});
}
console.log(panels);
}, [hasGps, hasWifi]);
return (
<PageLayout
title="Settings"
sidebarItems={sidebarItems}
panels={[
<WiFi key={2} />,
<Position key={3} />,
<User key={4} />,
<Power key={5} />,
<Radio key={6} />,
<Channels key={8} />,
<Interface key={7} />,
]}
/>
<PageLayout title="Settings" sidebarItems={sidebarItems} panels={panels} />
);
};
src/pages/settings/Interface.tsx
+1 -3
View File
@@ -3,11 +3,9 @@ import type React from 'react';
import { useTranslation } from 'react-i18next';
import { FiMenu, FiSave } from 'react-icons/fi';
import { Button } from '@components/generic/Button';
import { Card } from '@components/generic/Card';
import { Select } from '@components/generic/form/Select';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
import i18n from '@core/translation';
import { Button, Card, Select } from '@meshtastic/components';
export interface InterfaceProps {
navOpen?: boolean;
src/pages/settings/Position.tsx
+43 -12
View File
@@ -1,21 +1,23 @@
import React from 'react';
import { Controller, useForm, useWatch } from 'react-hook-form';
import { Controller, useForm } from 'react-hook-form';
import { FiCode, FiMenu } from 'react-icons/fi';
import JSONPretty from 'react-json-pretty';
import ReactSelect from 'react-select';
import ReactSelect, { Theme } from 'react-select';
import { useAppSelector } from '@app/hooks/redux';
import { FormFooter } from '@components/FormFooter';
import { Card } from '@components/generic/Card';
import { Cover } from '@components/generic/Cover';
import { Checkbox } from '@components/generic/form/Checkbox';
import { Input } from '@components/generic/form/Input';
import { Label } from '@components/generic/form/Label';
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 {
Card,
Checkbox,
IconButton,
Input,
Select,
} from '@meshtastic/components';
import { Protobuf } from '@meshtastic/meshtasticjs';
export interface PositionProps {
@@ -30,6 +32,7 @@ export const Position = ({
const preferences = useAppSelector(
(state) => state.meshtastic.radio.preferences,
);
const darkMode = useAppSelector((state) => state.app.darkMode);
const [debug, setDebug] = React.useState(false);
const [loading, setLoading] = React.useState(false);
const { register, handleSubmit, formState, reset, control } =
@@ -45,11 +48,11 @@ export const Position = ({
},
});
const watchPsk = useWatch({
control,
name: 'positionFlags',
defaultValue: 0,
});
// const watchPsk = useWatch({
// control,
// name: 'positionFlags',
// defaultValue: 0,
// });
React.useEffect(() => {
reset(preferences);
@@ -128,6 +131,34 @@ export const Position = ({
<ReactSelect
{...rest}
isMulti
theme={(theme): Theme => ({
...theme,
borderRadius: 7,
colors: {
...theme.colors,
primary: '#67ea94', //focus border color
// primary75: 'red',
// primary50: 'red',
// primary25: 'red',
// danger: 'red',
// dangerLight: 'red',
neutral0: darkMode ? 'rgb(30 41 59)' : 'white', //bg color
// neutral5: 'red',
neutral10: darkMode
? 'rgb(75 85 99)'
: 'rgb(229 231 235)', //tag bg color
neutral20: darkMode
? 'rgb(229 231 235)'
: 'rgb(156 163 175)', //border color
neutral30: '#67ea94', //border hover
// neutral40: 'red',
// neutral50: 'red',
// neutral60: 'red',
// neutral70: 'red',
neutral80: darkMode ? 'white' : 'black', //tag text color
// neutral90: 'red',
},
})}
value={decode(value).map((flag) => {
return {
value: flag,
src/pages/settings/Power.tsx
+1 -4
View File
@@ -6,13 +6,10 @@ import JSONPretty from 'react-json-pretty';
import { useAppSelector } from '@app/hooks/redux';
import { FormFooter } from '@components/FormFooter';
import { Card } from '@components/generic/Card';
import { Cover } from '@components/generic/Cover';
import { Checkbox } from '@components/generic/form/Checkbox';
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 { Card, Checkbox, IconButton, Select } from '@meshtastic/components';
import { Protobuf } from '@meshtastic/meshtasticjs';
export interface PowerProps {
src/pages/settings/Radio.tsx
+1 -4
View File
@@ -6,13 +6,10 @@ import JSONPretty from 'react-json-pretty';
import { useAppSelector } from '@app/hooks/redux';
import { FormFooter } from '@components/FormFooter';
import { Card } from '@components/generic/Card';
import { Cover } from '@components/generic/Cover';
import { Checkbox } from '@components/generic/form/Checkbox';
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 { Card, Checkbox, IconButton, Select } from '@meshtastic/components';
import { Protobuf } from '@meshtastic/meshtasticjs';
export interface RadioProps {
src/pages/settings/User.tsx
+7 -5
View File
@@ -7,14 +7,16 @@ import { base16 } from 'rfc4648';
import { useAppSelector } from '@app/hooks/redux';
import { FormFooter } from '@components/FormFooter';
import { Card } from '@components/generic/Card';
import { Cover } from '@components/generic/Cover';
import { Checkbox } from '@components/generic/form/Checkbox';
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 {
Card,
Checkbox,
IconButton,
Input,
Select,
} from '@meshtastic/components';
import { Protobuf } from '@meshtastic/meshtasticjs';
export interface UserProps {
src/pages/settings/WiFi.tsx
+1 -4
View File
@@ -7,13 +7,10 @@ import JSONPretty from 'react-json-pretty';
import { useAppSelector } from '@app/hooks/redux';
import { FormFooter } from '@components/FormFooter';
import { Card } from '@components/generic/Card';
import { Cover } from '@components/generic/Cover';
import { Checkbox } from '@components/generic/form/Checkbox';
import { Input } from '@components/generic/form/Input';
import { IconButton } from '@components/generic/IconButton';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
import { connection } from '@core/connection';
import { Card, Checkbox, IconButton, Input } from '@meshtastic/components';
import type { Protobuf } from '@meshtastic/meshtasticjs';
export interface WiFiProps {