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 08:41:22 +10:00
parent 59888f32e7
commit 7d220e2683
7 changed files with 199 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+1 -27
View File
@@ -15,10 +15,6 @@ import {
import Header from './components/Header';
import Main from './Main';
import { channelSubject$, nodeSubject$, preferencesSubject$ } from './streams';
import Translations_English from './translations/en';
import Translations_Japanese from './translations/jp';
import Translations_Portuguese from './translations/pt';
import type { languageTemplate } from './translations/TranslationContext';
import { LanguageEnum } from './translations/TranslationContext';
const App = (): JSX.Element => {
@@ -29,8 +25,6 @@ const App = (): JSX.Element => {
const [myNodeInfo, setMyNodeInfo] = React.useState<Protobuf.MyNodeInfo>(
Protobuf.MyNodeInfo.create(),
);
// const [channels, setChannels] = React.useState([] as Protobuf.Channel[]);
const [nodes, setNodes] = React.useState<Types.NodeInfoPacket[]>([]);
const [connection, setConnection] = React.useState<
ISerialConnection | IHTTPConnection | IBLEConnection
>(new IHTTPConnection());
@@ -41,27 +35,8 @@ const App = (): JSX.Element => {
const [language, setLanguage] = React.useState<LanguageEnum>(
LanguageEnum.ENGLISH,
);
const [translations, setTranslations] =
React.useState<languageTemplate>(Translations_English);
const [darkmode, setDarkmode] = React.useState<boolean>(false);
React.useEffect(() => {
switch (language) {
case LanguageEnum.ENGLISH:
setTranslations(Translations_English);
break;
case LanguageEnum.PORTUGUESE:
setTranslations(Translations_Portuguese);
break;
case LanguageEnum.JAPANESE:
setTranslations(Translations_Japanese);
break;
default:
break;
}
}, [language]);
React.useEffect(() => {
const client = new Client();
const tmpConnection = client.createHTTPConnection();
@@ -126,7 +101,7 @@ const App = (): JSX.Element => {
meshHeartbeat?.unsubscribe();
connection.disconnect();
};
}, [connection, nodes]);
}, [connection]);
return (
<div className="flex flex-col h-screen w-screen">
@@ -135,7 +110,6 @@ const App = (): JSX.Element => {
IsReady={isReady}
LastMeshInterraction={lastMeshInterraction}
connection={connection}
setConnection={setConnection}
/>
<Main
isReady={isReady}
src/components/Header.tsx
+4 -62
View File
@@ -1,19 +1,16 @@
import React from 'react';
import {
ChipIcon,
DeviceMobileIcon,
RssIcon,
StatusOfflineIcon,
StatusOnlineIcon,
WifiIcon,
} from '@heroicons/react/outline';
import {
import type {
IBLEConnection,
IHTTPConnection,
ISerialConnection,
Types,
} from '@meshtastic/meshtasticjs';
import { Types } from '@meshtastic/meshtasticjs';
import Logo from './logo';
@@ -22,14 +19,9 @@ interface HeaderProps {
IsReady: boolean;
LastMeshInterraction: number;
connection: IHTTPConnection | ISerialConnection | IBLEConnection;
setConnection: React.Dispatch<
React.SetStateAction<IHTTPConnection | ISerialConnection | IBLEConnection>
>;
}
const Header = (props: HeaderProps): JSX.Element => {
const [activeConnection, setActiveConnection] =
React.useState<'http' | 'serial' | 'ble'>('http');
return (
<nav className="w-full shadow-md">
<div className="flex w-full container mx-auto justify-between px-6 py-4">
@@ -37,57 +29,7 @@ const Header = (props: HeaderProps): JSX.Element => {
<div></div>
<div className="flex space-x-2 items-center">
<button
className={`rounded-md px-3 py-2 ${
activeConnection === 'serial' ? 'bg-green-300' : 'bg-gray-300'
}`}
onClick={() => {
props.connection.disconnect();
const connection = new ISerialConnection();
connection.connect({});
setActiveConnection('serial');
props.setConnection(connection);
}}
>
<ChipIcon className="m-auto h-5 w-5" />
</button>
<button
className={`rounded-md px-3 py-2 ${
activeConnection === 'http' ? 'bg-green-300' : 'bg-gray-300'
}`}
onClick={() => {
props.connection.disconnect();
const connection = new IHTTPConnection();
connection.connect({
address:
import.meta.env.NODE_ENV === 'production'
? window.location.hostname
: import.meta.env.SNOWPACK_PUBLIC_DEVICE_IP,
receiveBatchRequests: false,
tls: false,
fetchInterval: 2000,
});
setActiveConnection('http');
props.setConnection(connection);
}}
>
<WifiIcon className="m-auto h-5 w-5" />
</button>
<button
className={`rounded-md px-3 py-2 ${
activeConnection === 'ble' ? 'bg-green-300' : 'bg-gray-300'
}`}
onClick={() => {
props.connection.disconnect();
const connection = new IBLEConnection();
connection.connect({});
setActiveConnection('ble');
props.setConnection(connection);
}}
>
<RssIcon className="m-auto h-5 w-5" />
</button>
<div className="flex pl-2">
<div className="flex">
<div
className={`w-5 h-5 rounded-full ${
new Date(props.LastMeshInterraction) <
@@ -107,7 +49,7 @@ const Header = (props: HeaderProps): JSX.Element => {
)}
</div>
<div className="flex pl-2">
<div className="flex">
<div
className={`w-5 h-5 rounded-full ${
props.status <= Types.DeviceStatusEnum.DEVICE_DISCONNECTED
src/index.tsx
+11 -25
View File
@@ -1,36 +1,22 @@
/// <reference types="react/experimental" />
/// <reference types="react-dom/experimental" />
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Translations_English from './translations/en';
import {
LanguageEnum,
TranslationContext,
} from './translations/TranslationContext';
import { TranslationContext } from './translations/TranslationContext';
const element = document.getElementById('root');
const rootElement = document.getElementById('root');
if (!rootElement) throw new Error('Failed to find the root element');
const root = ReactDOM.createRoot(rootElement);
if (element) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
ReactDOM.createRoot(element).render(
<React.StrictMode>
<TranslationContext.Provider
value={{
language: LanguageEnum.ENGLISH,
translations: Translations_English,
}}
>
<App />
</TranslationContext.Provider>
</React.StrictMode>,
);
}
root.render(
<React.StrictMode>
<TranslationContext>
<App />
</TranslationContext>
</React.StrictMode>,
);
// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
// Learn more: https://www.snowpack.dev/#hot-module-replacement
src/translations/TranslationContext.tsx
+45 -11
View File
@@ -1,6 +1,8 @@
import React from 'react';
import Translations_English from './en';
import Translations_EN from './en';
import Translations_JP from './jp';
import Translations_PT from './pt';
export interface languageTemplate {
no_messages_message: string;
@@ -24,16 +26,48 @@ export enum LanguageEnum {
PORTUGUESE,
}
export const TranslationContext = React.createContext({
const Context = React.createContext<{
language: LanguageEnum;
setLanguage: React.Dispatch<React.SetStateAction<LanguageEnum>>;
translations: languageTemplate;
}>({
language: LanguageEnum.ENGLISH,
translations: Translations_English,
setLanguage: () => {},
translations: Translations_EN,
});
// const TranslationProvider: React.FC = ({ children }) => {
// const [language, setLanguage] = React.useState<LanguageEnum>(
// LanguageEnum.ENGLISH,
// );
// return { children };
// };
// export default TranslationProvider;
export const TranslationContext = ({
children,
}: {
children: React.ReactNode;
}): JSX.Element => {
const [language, setLanguage] = React.useState<LanguageEnum>(
LanguageEnum.ENGLISH,
);
const [translation, setTranslation] =
React.useState<languageTemplate>(Translations_EN);
React.useEffect(() => {
switch (language) {
case LanguageEnum.ENGLISH:
setTranslation(Translations_EN);
break;
case LanguageEnum.JAPANESE:
setTranslation(Translations_JP);
break;
case LanguageEnum.PORTUGUESE:
setTranslation(Translations_PT);
break;
}
}, [language]);
return (
<Context.Provider
value={{
language: language,
setLanguage: setLanguage,
translations: translation,
}}
>
{children}
</Context.Provider>
);
};