From 0c95245296177897675618afb25fbc59b90489c3 Mon Sep 17 00:00:00 2001 From: Sacha Weatherstone Date: Wed, 25 Aug 2021 13:33:13 +1000 Subject: [PATCH] WIP --- .github/workflows/main.yml | 30 ++++---- src/App.tsx | 6 +- src/components/generic/Tabs.tsx | 69 ++++-------------- src/components/menu/MobileNav.tsx | 2 +- src/components/menu/Navigation.tsx | 2 +- src/components/nodes/Node.tsx | 28 -------- src/components/templates/PrimaryTemplate.tsx | 6 +- src/core/connection.ts | 8 ++- src/pages/Nodes/Index.tsx | 6 ++ src/pages/settings/Connection.tsx | 75 ++++++++++++++++++-- src/pages/settings/Device.tsx | 18 +++-- 11 files changed, 130 insertions(+), 120 deletions(-) delete mode 100644 src/components/nodes/Node.tsx diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index d0b42945..277a61cb 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -4,9 +4,9 @@ name: meshtastic-web build on: # Triggers the workflow on push or pull request events but only for the master branch push: - branches: [ master ] + branches: [master] pull_request: - branches: [ master ] + branches: [master] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: @@ -19,31 +19,31 @@ jobs: # Checks-out repository - name: Checkout uses: actions/checkout@v2 - - # Build project + - uses: pnpm/action-setup@v2.0.1 + with: + version: 6.14.3 - uses: actions/setup-node@v2 with: - node-version: '14' - cache: 'yarn' - - run: yarn install --ignore-optional - - run: yarn lint - - run: yarn build - - run: yarn package + node-version: '16' + cache: 'pnpm' + - run: pnpm lint + - run: pnpm build + - run: pnpm package - run: tree build/output - + # Create a zip file from the output folder - name: Create output zip file uses: papeloto/action-zip@v1 with: files: build/output/ dest: output.zip - + # Upload Artifact - name: Upload a Build Artifact - uses: "marvinpinto/action-automatic-releases@latest" + uses: 'marvinpinto/action-automatic-releases@latest' with: - repo_token: "${{ secrets.GITHUB_TOKEN }}" - automatic_release_tag: "latest" + repo_token: '${{ secrets.GITHUB_TOKEN }}' + automatic_release_tag: 'latest' prerelease: false files: | output.zip diff --git a/src/App.tsx b/src/App.tsx index fde6a4ea..389d2cf8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -137,20 +137,18 @@ const App = (): JSX.Element => { >
-
+
- +
- {/* */}
-
diff --git a/src/components/generic/Tabs.tsx b/src/components/generic/Tabs.tsx index 8b661029..131a2bef 100644 --- a/src/components/generic/Tabs.tsx +++ b/src/components/generic/Tabs.tsx @@ -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 ( - - + + {tabs.map((tab) => ( `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} ))} - + {tabs.map((tab, index) => ( {tab.body} diff --git a/src/components/menu/MobileNav.tsx b/src/components/menu/MobileNav.tsx index b0fc1301..4c6ffd75 100644 --- a/src/components/menu/MobileNav.tsx +++ b/src/components/menu/MobileNav.tsx @@ -19,7 +19,7 @@ export const MobileNav = (): JSX.Element => { dispatch(closeMobileNav()); }} > -
+
diff --git a/src/components/menu/Navigation.tsx b/src/components/menu/Navigation.tsx index c0cdec14..7bbf4513 100644 --- a/src/components/menu/Navigation.tsx +++ b/src/components/menu/Navigation.tsx @@ -21,7 +21,7 @@ export const Navigation = ({ const route = useRoute(); return (
diff --git a/src/components/nodes/Node.tsx b/src/components/nodes/Node.tsx deleted file mode 100644 index 594ac8c8..00000000 --- a/src/components/nodes/Node.tsx +++ /dev/null @@ -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 ( -
- -
{node.user?.longName}
-
- ); -}; diff --git a/src/components/templates/PrimaryTemplate.tsx b/src/components/templates/PrimaryTemplate.tsx index 2911d79a..adbda160 100644 --- a/src/components/templates/PrimaryTemplate.tsx +++ b/src/components/templates/PrimaryTemplate.tsx @@ -17,7 +17,7 @@ export const PrimaryTemplate = ({ }: PrimaryTemplateProps): JSX.Element => { return (
-
+
{button &&
{button}
}
@@ -32,11 +32,11 @@ export const PrimaryTemplate = ({
-
+
{children}
{footer && ( -
+
{button &&
{button}
}
{footer}
diff --git a/src/core/connection.ts b/src/core/connection.ts index 1436b1d8..d8a76fff 100644 --- a/src/core/connection.ts +++ b/src/core/connection.ts @@ -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(); diff --git a/src/pages/Nodes/Index.tsx b/src/pages/Nodes/Index.tsx index 21fecac1..4c8a476c 100644 --- a/src/pages/Nodes/Index.tsx +++ b/src/pages/Nodes/Index.tsx @@ -46,6 +46,12 @@ export const Nodes = (): JSX.Element => {
+ {!nodes.length && ( + + No nodes discovered yet... + + )} + {nodes.map((node) => ( { diff --git a/src/pages/settings/Connection.tsx b/src/pages/settings/Connection.tsx index 0748bdf9..e757dcb7 100644 --- a/src/pages/settings/Connection.tsx +++ b/src/pages/settings/Connection.tsx @@ -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 = ({ } >
+
+ Current connection method: +
+ BLE +
+
HTTP
}, - { name: 'Bluetooth', body:
BLE
}, - { name: 'Serial', body:
SERIAL
}, + { + name: 'HTTP', + body: ( +
+ + +
+ ), + }, + { + name: 'Bluetooth', + body: ( +
+ Devices: + +
+ Device Name + +
+
+ Device Name + +
+
+ ), + }, + { + name: 'Serial', + body: ( +
+ Devices: + +
+ Device Name + +
+
+ Device Name + +
+
+ ), + }, ]} /> diff --git a/src/pages/settings/Device.tsx b/src/pages/settings/Device.tsx index b44a2673..266fe4c8 100644 --- a/src/pages/settings/Device.tsx +++ b/src/pages/settings/Device.tsx @@ -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({ - 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 (