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-06-15 23:15:33 +10:00
parent 7d220e2683
commit 339143ef7f
22 changed files with 161 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MessageBox.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ import type {
ISerialConnection,
} from '@meshtastic/meshtasticjs';
import { TranslationContext } from '../translations/TranslationContext';
import { TranslationsContext } from '../translations/TranslationsContext';
export interface MessageBoxProps {
sidebarOpen: boolean;
@@ -17,7 +17,7 @@ export interface MessageBoxProps {
}
const MessageBox = (props: MessageBoxProps): JSX.Element => {
const { translations } = React.useContext(TranslationContext);
const { translations } = React.useContext(TranslationsContext);
const [currentMessage, setCurrentMessage] = React.useState('');
const sendMessage = () => {
if (props.isReady) {
src/components/Sidebar.tsx
+2 -18
View File
@@ -1,22 +1,11 @@
import React from 'react';
import type {
IBLEConnection,
IHTTPConnection,
ISerialConnection,
} from '@meshtastic/meshtasticjs';
import type { LanguageEnum } from '../translations/TranslationContext';
import Channels from './Sidebar/Channels/Index';
import Device from './Sidebar/Device/Index';
import Nodes from './Sidebar/Nodes/Index';
import UI from './Sidebar/UI/Index';
interface SidebarProps {
isReady: boolean;
connection: ISerialConnection | IHTTPConnection | IBLEConnection;
language: LanguageEnum;
setLanguage: React.Dispatch<React.SetStateAction<LanguageEnum>>;
myId: number;
sidebarOpen: boolean;
darkmode: boolean;
@@ -31,15 +20,10 @@ const Sidebar = (props: SidebarProps): JSX.Element => {
} flex-col rounded-md md:ml-0 shadow-md border w-full max-w-sm`}
>
<Nodes myId={props.myId} />
<Device isReady={props.isReady} connection={props.connection} />
<Device />
<Channels />
<div className="flex-grow border-b"></div>
<UI
language={props.language}
setLanguage={props.setLanguage}
darkmode={props.darkmode}
setDarkmode={props.setDarkmode}
/>
<UI darkmode={props.darkmode} setDarkmode={props.setDarkmode} />
</div>
);
};
src/components/Sidebar/Channels/Index.tsx
+2 -2
View File
@@ -7,11 +7,11 @@ import {
HashtagIcon,
} from '@heroicons/react/outline';
import { TranslationContext } from '../../../translations/TranslationContext';
import { TranslationsContext } from '../../../translations/TranslationsContext';
import ChannelList from './ChannelList';
const Channels = (): JSX.Element => {
const { translations } = React.useContext(TranslationContext);
const { translations } = React.useContext(TranslationsContext);
return (
<Disclosure>
{({ open }) => (
src/components/Sidebar/Device/Index.tsx
+4 -17
View File
@@ -6,22 +6,12 @@ import {
ChevronDownIcon,
ChevronRightIcon,
} from '@heroicons/react/outline';
import type {
IBLEConnection,
IHTTPConnection,
ISerialConnection,
} from '@meshtastic/meshtasticjs';
import { TranslationContext } from '../../../translations/TranslationContext';
import { TranslationsContext } from '../../../translations/TranslationsContext';
import Settings from './Settings';
interface DeviceProps {
isReady: boolean;
connection: ISerialConnection | IHTTPConnection | IBLEConnection;
}
const Device = (props: DeviceProps): JSX.Element => {
const { translations } = React.useContext(TranslationContext);
const Device = (): JSX.Element => {
const { translations } = React.useContext(TranslationsContext);
return (
<Disclosure>
{({ open }) => (
@@ -46,10 +36,7 @@ const Device = (props: DeviceProps): JSX.Element => {
</div>
}
>
<Settings
connection={props.connection}
isReady={props.isReady}
/>
<Settings />
</React.Suspense>
</>
</Disclosure.Panel>
src/components/Sidebar/Device/Settings.tsx
+3 -13
View File
@@ -5,23 +5,13 @@ import { useForm } from 'react-hook-form';
import JSONPretty from 'react-json-pretty';
import { SaveIcon } from '@heroicons/react/outline';
import type {
IBLEConnection,
IHTTPConnection,
ISerialConnection,
} from '@meshtastic/meshtasticjs';
import { Protobuf } from '@meshtastic/meshtasticjs';
import { preferencesResource } from '../../../streams';
import { TranslationContext } from '../../../translations/TranslationContext';
import { TranslationsContext } from '../../../translations/TranslationsContext';
export interface SettingsProps {
isReady: boolean;
connection: ISerialConnection | IHTTPConnection | IBLEConnection;
}
const Settings = (props: SettingsProps): JSX.Element => {
const { translations } = React.useContext(TranslationContext);
const Settings = (): JSX.Element => {
const { translations } = React.useContext(TranslationsContext);
const preferences = useObservableSuspense(preferencesResource);
const { register, handleSubmit } =
src/components/Sidebar/Nodes/Index.tsx
+2 -2
View File
@@ -7,7 +7,7 @@ import {
UsersIcon,
} from '@heroicons/react/outline';
import { TranslationContext } from '../../../translations/TranslationContext';
import { TranslationsContext } from '../../../translations/TranslationsContext';
import NodeList from './NodeList';
interface NodesProps {
@@ -15,7 +15,7 @@ interface NodesProps {
}
const Nodes = (props: NodesProps): JSX.Element => {
const { translations } = React.useContext(TranslationContext);
const { translations } = React.useContext(TranslationsContext);
return (
<Disclosure>
{({ open }) => (
src/components/Sidebar/Nodes/Node.tsx
+1 -1
View File
@@ -36,7 +36,7 @@ const Node = (props: NodeProps): JSX.Element => {
) : null}
<Avatar
size={30}
name={props.node.data.user?.longName}
name={props.node.data.user?.longName ?? 'Unknown'}
variant="beam"
colors={[
'#213435',
src/components/Sidebar/UI/Index.tsx
+3 -9
View File
@@ -7,19 +7,16 @@ import {
CogIcon,
} from '@heroicons/react/outline';
import type { LanguageEnum } from '../../../translations/TranslationContext';
import { TranslationContext } from '../../../translations/TranslationContext';
import { TranslationsContext } from '../../../translations/TranslationsContext';
import Translations from './Translations';
interface UIProps {
language: LanguageEnum;
setLanguage: React.Dispatch<React.SetStateAction<LanguageEnum>>;
darkmode: boolean;
setDarkmode: React.Dispatch<React.SetStateAction<boolean>>;
}
const UI = (props: UIProps): JSX.Element => {
const { translations } = React.useContext(TranslationContext);
const { translations } = React.useContext(TranslationsContext);
return (
<Disclosure>
{({ open }) => (
@@ -36,10 +33,7 @@ const UI = (props: UIProps): JSX.Element => {
</div>
</Disclosure.Button>
<Disclosure.Panel>
<Translations
language={props.language}
setLanguage={props.setLanguage}
/>
<Translations />
</Disclosure.Panel>
</>
)}
src/components/Sidebar/UI/Translations.tsx
+11 -15
View File
@@ -7,16 +7,12 @@ import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/outline';
import {
LanguageEnum,
TranslationContext,
} from '../../../translations/TranslationContext';
TranslationsContext,
} from '../../../translations/TranslationsContext';
export interface TranslationsProps {
language: LanguageEnum;
setLanguage: React.Dispatch<React.SetStateAction<LanguageEnum>>;
}
const Translations = (props: TranslationsProps): JSX.Element => {
const { translations } = React.useContext(TranslationContext);
const Translations = (): JSX.Element => {
const { translations, language, setLanguage } =
React.useContext(TranslationsContext);
return (
<Disclosure>
{({ open }) => (
@@ -30,11 +26,11 @@ const Translations = (props: TranslationsProps): JSX.Element => {
)}
{translations.language_title}
<div className="my-auto">
{props.language === LanguageEnum.ENGLISH ? (
{language === LanguageEnum.ENGLISH ? (
<Us className="ml-2 w-8" />
) : props.language === LanguageEnum.JAPANESE ? (
) : language === LanguageEnum.JAPANESE ? (
<Jp className="ml-2 w-8" />
) : props.language === LanguageEnum.PORTUGUESE ? (
) : language === LanguageEnum.PORTUGUESE ? (
<Br className="ml-2 w-8" />
) : null}
</div>
@@ -44,7 +40,7 @@ const Translations = (props: TranslationsProps): JSX.Element => {
<div
className="flex bg-gray-100 hover:bg-gray-200 cursor-pointer justify-between p-2"
onClick={() => {
props.setLanguage(LanguageEnum.ENGLISH);
setLanguage(LanguageEnum.ENGLISH);
}}
>
English <Us className="w-8 my-auto" />
@@ -52,7 +48,7 @@ const Translations = (props: TranslationsProps): JSX.Element => {
<div
className="flex bg-gray-100 hover:bg-gray-200 cursor-pointer justify-between p-2"
onClick={() => {
props.setLanguage(LanguageEnum.PORTUGUESE);
setLanguage(LanguageEnum.PORTUGUESE);
}}
>
Português <Br className="w-8 my-auto" />
@@ -60,7 +56,7 @@ const Translations = (props: TranslationsProps): JSX.Element => {
<div
className="flex bg-gray-100 hover:bg-gray-200 cursor-pointer justify-between p-2"
onClick={() => {
props.setLanguage(LanguageEnum.JAPANESE);
setLanguage(LanguageEnum.JAPANESE);
}}
>
日本語 <Jp className="w-8 my-auto" />