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/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