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-08-25 13:33:13 +10:00
parent 3984beb1ff
commit 0c95245296
11 changed files with 130 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+2 -4
View File
@@ -137,20 +137,18 @@ const App = (): JSX.Element => {
>
<div className="flex flex-col h-full bg-gray-200 dark:bg-primaryDark">
<div className="flex flex-shrink-0 overflow-hidden bg-primary dark:bg-primary">
<div className="w-full overflow-hidden bg-white border-b md:mt-12 md:mx-8 md:pt-4 md:pb-3 md:rounded-t-3xl dark:border-gray-600 md:shadow-md dark:bg-primaryDark">
<div className="w-full overflow-hidden bg-white border-b md:mt-8 md:mx-8 md:pt-4 md:pb-3 md:rounded-t-3xl dark:border-gray-600 md:shadow-md dark:bg-primaryDark">
<div className="flex items-center justify-between h-16 px-4 md:px-6">
<div className="hidden md:flex">
<Logo />
</div>
<Navigation className="hidden md:flex" />
<MobileNavToggle />
<div className="flex items-center space-x-2">
<DeviceStatusDropdown />
{/* <LanguageDropdown /> */}
<ThemeToggle />
</div>
</div>
<Navigation className="hidden md:flex" />
</div>
</div>
<MobileNav />
src/components/generic/Tabs.tsx
+12 -57
View File
@@ -11,76 +11,31 @@ interface TabProps extends DefaultDivProps {
}[];
}
export const Tabs = ({ tabs }: TabProps) => {
// let [categories] = useState({
// Recent: [
// {
// id: 1,
// title: 'Does drinking coffee make you smarter?',
// date: '5h ago',
// commentCount: 5,
// shareCount: 2,
// },
// {
// id: 2,
// title: "So you've bought coffee... now what?",
// date: '2h ago',
// commentCount: 3,
// shareCount: 2,
// },
// ],
// Popular: [
// {
// id: 1,
// title: 'Is tech making coffee better or worse?',
// date: 'Jan 7',
// commentCount: 29,
// shareCount: 16,
// },
// {
// id: 2,
// title: 'The most innovative things happening in coffee',
// date: 'Mar 19',
// commentCount: 24,
// shareCount: 12,
// },
// ],
// Trending: [
// {
// id: 1,
// title: 'Ask Me Anything: 10 answers to your questions about coffee',
// date: '2d ago',
// commentCount: 9,
// shareCount: 5,
// },
// {
// id: 2,
// title: "The worst advice we've ever heard about coffee",
// date: '4d ago',
// commentCount: 1,
// shareCount: 2,
// },
// ],
// })
export const Tabs = ({ tabs, className, ...props }: TabProps): JSX.Element => {
return (
<Tab.Group as="div">
<Tab.List className="flex p-2 space-x-2 border shadow-md rounded-t-3xl dark:border-gray-600">
<Tab.Group as="div" className={className}>
<Tab.List className="flex border-l border-r border-t shadow-md rounded-t-3xl dark:border-gray-600">
{tabs.map((tab) => (
<Tab
key={tab.name}
className={({ selected }) => `w-full text-lg font-medium`}
className={({ selected }): string =>
`w-full text-lg font-medium p-2 border-b-2 ${
selected
? 'dark:border-gray-200 border-gray-600'
: 'border-transparent dark:border-transparent'
}`
}
>
{tab.name}
</Tab>
))}
</Tab.List>
<Tab.Panels>
<Tab.Panels className="h-full">
{tabs.map((tab, index) => (
<Tab.Panel
key={index}
className={
'border dark:border-gray-600 rounded-b-3xl p-2 h-80 shadow-md'
'border dark:border-gray-600 rounded-b-3xl p-4 h-full shadow-md'
}
>
{tab.body}
src/components/menu/MobileNav.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ export const MobileNav = (): JSX.Element => {
dispatch(closeMobileNav());
}}
>
<div className="flex flex-col w-64">
<div className="flex flex-col">
<div className="m-auto my-6">
<Logo />
</div>
src/components/menu/Navigation.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export const Navigation = ({
const route = useRoute();
return (
<div
className={`h-16 px-4 md:space-x-2 space-y-2 md:space-y-0 ${className}`}
className={`px-4 md:space-x-2 space-y-2 md:space-y-0 ${className}`}
{...props}
>
<div onClick={onClick}>
src/components/nodes/Node.tsx
-28
View File
@@ -1,28 +0,0 @@
import React from 'react';
import Avatar from 'boring-avatars';
import type { Protobuf } from '@meshtastic/meshtasticjs';
type DefaultDivProps = JSX.IntrinsicElements['div'];
export interface NodeProps extends DefaultDivProps {
node: Protobuf.NodeInfo;
}
export const Node = ({ node, ...props }: NodeProps): JSX.Element => {
return (
<div
{...props}
className="flex items-center w-full p-2 mt-6 space-x-4 border rounded-md shadow-md dark:bg-primaryDark dark:border-gray-600 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-900"
>
<Avatar
size={30}
name={node.user?.longName ?? 'UNK'}
variant="beam"
colors={['#213435', '#46685B', '#648A64', '#A6B985', '#E1E3AC']}
/>
<div>{node.user?.longName}</div>
</div>
);
};
src/components/templates/PrimaryTemplate.tsx
+3 -3
View File
@@ -17,7 +17,7 @@ export const PrimaryTemplate = ({
}: PrimaryTemplateProps): JSX.Element => {
return (
<div className="flex flex-col flex-auto min-w-0">
<div className="flex px-6 py-2 bg-white border-b md:p-6 md:flex-row flex-0 md:items-center md:justify-between md:py-8 md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
<div className="flex p-4 bg-white border-b md:flex-row flex-0 md:items-center md:justify-between md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
{button && <div className="pr-2 m-auto md:hidden">{button}</div>}
<div className="flex-1 min-w-0">
<div className="flex flex-wrap items-center font-medium">
@@ -32,11 +32,11 @@ export const PrimaryTemplate = ({
</div>
</div>
</div>
<div className="flex-auto flex-grow p-6 bg-white md:p-10 dark:bg-secondaryDark">
<div className="flex-auto flex-grow p-6 bg-white md:p-10 dark:bg-secondaryDark overflow-y-auto">
{children}
</div>
{footer && (
<div className="flex p-6 bg-white border-t md:flex-row flex-0 md:items-center md:justify-between md:py-8 md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
<div className="flex p-4 bg-white border-t md:flex-row flex-0 md:items-center md:justify-between md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
{button && <div className="pr-2 m-auto md:hidden">{button}</div>}
<div className="flex-1 min-w-0">{footer}</div>
</div>
src/core/connection.ts
+7 -1
View File
@@ -1,3 +1,9 @@
import { IHTTPConnection } from '@meshtastic/meshtasticjs';
import {
IBLEConnection,
IHTTPConnection,
ISerialConnection,
} from '@meshtastic/meshtasticjs';
export const connection = new IHTTPConnection();
export const bleConnection = new IBLEConnection();
export const serialConnection = new ISerialConnection();
src/pages/Nodes/Index.tsx
+6
View File
@@ -46,6 +46,12 @@ export const Nodes = (): JSX.Element => {
</div>
</div>
{!nodes.length && (
<span className="p-4 text-sm text-gray-400 dark:text-gray-600">
No nodes discovered yet...
</span>
)}
{nodes.map((node) => (
<Tab
onClick={(): void => {
src/pages/settings/Connection.tsx
+70 -5
View File
@@ -3,12 +3,18 @@ import React from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { Input } from '@app/components/generic/Input';
import { Tabs } from '@app/components/generic/Tabs';
import { connection } from '@app/core/connection';
import { Toggle } from '@app/components/generic/Toggle';
import {
bleConnection,
connection,
serialConnection,
} from '@app/core/connection';
import { useAppSelector } from '@app/hooks/redux';
import { Button } from '@components/generic/Button';
import { PrimaryTemplate } from '@components/templates/PrimaryTemplate';
import { MenuIcon, SaveIcon } from '@heroicons/react/outline';
import { LinkIcon, MenuIcon, SaveIcon } from '@heroicons/react/outline';
import type { Protobuf } from '@meshtastic/meshtasticjs';
export interface ConnectionProps {
@@ -57,12 +63,71 @@ export const Connection = ({
}
>
<div className="w-full max-w-3xl md:max-w-xl">
<div className="mb-2 flex w-full border dark:border-gray-600 rounded-3xl p-2">
Current connection method:
<div className="ml-2 rounded-full bg-gray-400 dark:bg-primaryDark text-sm px-1 my-auto">
BLE
</div>
</div>
<form className="space-y-2" onSubmit={onSubmit}>
<Tabs
className="h-60"
tabs={[
{ name: 'HTTP', body: <div>HTTP</div> },
{ name: 'Bluetooth', body: <div>BLE</div> },
{ name: 'Serial', body: <div>SERIAL</div> },
{
name: 'HTTP',
body: (
<div className="space-y-2">
<Input label={'Device URL'} />
<Toggle label="Use TLS?" />
</div>
),
},
{
name: 'Bluetooth',
body: (
<div className="space-y-2">
Devices:
<Button
onClick={async (): Promise<void> => {
console.log(await bleConnection.getDevices());
}}
>
Get Devices
</Button>
<div className="flex justify-between rounded-3xl border dark:border-600 p-2">
Device Name
<LinkIcon className="my-auto mr-2 w-5 h-5 text-gray-300" />
</div>
<div className="flex justify-between rounded-3xl border dark:border-600 p-2">
Device Name
<LinkIcon className="my-auto mr-2 w-5 h-5 text-gray-600" />
</div>
</div>
),
},
{
name: 'Serial',
body: (
<div className="space-y-2">
Devices:
<Button
onClick={async (): Promise<void> => {
console.log(await serialConnection.getPorts());
}}
>
Get Devices
</Button>
<div className="flex justify-between rounded-3xl border dark:border-600 p-2">
Device Name
<LinkIcon className="my-auto mr-2 w-5 h-5 text-gray-300" />
</div>
<div className="flex justify-between rounded-3xl border dark:border-600 p-2">
Device Name
<LinkIcon className="my-auto mr-2 w-5 h-5 text-gray-600" />
</div>
</div>
),
},
]}
/>
</form>
src/pages/settings/Device.tsx
+13 -5
View File
@@ -10,7 +10,7 @@ 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';
import { Protobuf } from '@meshtastic/meshtasticjs';
export interface DeviceProps {
navOpen: boolean;
@@ -20,13 +20,21 @@ export interface DeviceProps {
export const Device = ({ navOpen, setNavOpen }: DeviceProps): JSX.Element => {
const { t } = useTranslation();
const user = useAppSelector((state) => state.meshtastic.user);
const { register, handleSubmit, formState } = useForm<Protobuf.User>({
defaultValues: user,
const { register, handleSubmit, formState } = useForm<{
isLicensed: boolean;
shortName: string;
longName: string;
}>({
defaultValues: {
isLicensed: user.isLicensed,
shortName: user.shortName,
longName: user.longName,
},
});
const onSubmit = handleSubmit((data) => {
void connection.setOwner(data);
Protobuf.User.mergePartial(user, data);
void connection.setOwner(user);
});
return (