mirror
/
meshastic.web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

WIP

pull/1/head
Sacha Weatherstone 5 years ago
parent
3984beb1ff
commit
0c95245296
11 changed files with 130 additions and 120 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      .github/workflows/main.yml
  2. 6
      src/App.tsx
  3. 69
      src/components/generic/Tabs.tsx
  4. 2
      src/components/menu/MobileNav.tsx
  5. 2
      src/components/menu/Navigation.tsx
  6. 28
      src/components/nodes/Node.tsx
  7. 6
      src/components/templates/PrimaryTemplate.tsx
  8. 8
      src/core/connection.ts
  9. 6
      src/pages/Nodes/Index.tsx
  10. 75
      src/pages/settings/Connection.tsx
  11. 18
      src/pages/settings/Device.tsx

30
.github/workflows/main.yml
View File

@ -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/[email protected]
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

6
src/App.tsx
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 />

69
src/components/generic/Tabs.tsx
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}

2
src/components/menu/MobileNav.tsx
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>

2
src/components/menu/Navigation.tsx
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}>

28
src/components/nodes/Node.tsx
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>
);
};

6
src/components/templates/PrimaryTemplate.tsx
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>

8
src/core/connection.ts
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();

6
src/pages/Nodes/Index.tsx
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 => {

75
src/pages/settings/Connection.tsx
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>

18
src/pages/settings/Device.tsx
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 (

Write Preview
Loading…
Cancel
Save