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-08-11 23:09:45 +10:00
parent aff46494e9
commit 2940791b9e
36 changed files with 1096 additions and 623 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+36 -32
View File
@@ -1,5 +1,6 @@
import React from 'react';
import { ThemeProvider } from '@material-ui/system';
import { Protobuf, SettingsManager, Types } from '@meshtastic/meshtasticjs';
import { DeviceStatusDropdown } from './components/menu/buttons/DeviceStatusDropdown';
@@ -9,13 +10,8 @@ import { ThemeToggle } from './components/menu/buttons/ThemeToggle';
import { Logo } from './components/menu/Logo';
import { MobileNav } from './components/menu/MobileNav';
import { Navigation } from './components/menu/Navigation';
import { connection } from './connection';
import { useAppDispatch, useAppSelector } from './hooks/redux';
import { About } from './pages/About';
import { Messages } from './pages/Messages';
import { Nodes } from './pages/Nodes';
import { Settings } from './pages/Settings';
import { useRoute } from './router';
import { connection } from './core/connection';
import { useRoute } from './core/router';
import {
ackMessage,
addChannel,
@@ -26,7 +22,13 @@ import {
setMyNodeInfo,
setPreferences,
setReady,
} from './slices/meshtasticSlice';
} from './core/slices/meshtasticSlice';
import { theme } from './core/theme';
import { useAppDispatch, useAppSelector } from './hooks/redux';
import { About } from './pages/About';
import { Messages } from './pages/Messages';
import { Nodes } from './pages/Nodes';
import { Settings } from './pages/Settings';
const App = (): JSX.Element => {
const dispatch = useAppDispatch();
@@ -126,39 +128,41 @@ const App = (): JSX.Element => {
}, [dispatch, myNodeInfo.myNodeNum]);
return (
<div className={`h-screen w-screen ${darkMode ? 'dark' : ''}`}>
<div className="flex flex-col h-full w-full bg-gray-200 dark:bg-primaryDark">
<div className="flex flex-shrink-0 w-full overflow-hidden bg-primary dark:bg-primary">
<div className="w-full sm:py-3 sm:m-8 sm:mb-0 md:mt-12 md:mx-8 md:pt-4 md:pb-3 sm:rounded-t-xl border-b dark:border-gray-600 sm:shadow-md overflow-hidden bg-white dark:bg-primaryDark">
<div className="flex items-center justify-between h-16 px-4 md:px-6">
<div className="hidden md:flex">
<Logo />
</div>
<ThemeProvider theme={theme(darkMode)}>
<div className={`h-screen w-screen ${darkMode ? 'dark' : ''}`}>
<div className="flex flex-col h-full w-full bg-gray-200 dark:bg-primaryDark">
<div className="flex flex-shrink-0 w-full overflow-hidden bg-primary dark:bg-primary">
<div className="w-full sm:py-3 sm:m-8 sm:mb-0 md:mt-12 md:mx-8 md:pt-4 md:pb-3 sm:rounded-t-xl border-b dark:border-gray-600 sm:shadow-md overflow-hidden bg-white dark:bg-primaryDark">
<div className="flex items-center justify-between h-16 px-4 md:px-6">
<div className="hidden md:flex">
<Logo />
</div>
<MobileNavToggle />
<div className="flex items-center space-x-2">
<DeviceStatusDropdown />
<LanguageDropdown />
<ThemeToggle />
<MobileNavToggle />
<div className="flex items-center space-x-2">
<DeviceStatusDropdown />
<LanguageDropdown />
<ThemeToggle />
</div>
</div>
<Navigation />
</div>
<Navigation />
</div>
</div>
<MobileNav />
<MobileNav />
<div className="flex flex-grow min-h-0 w-full sm:px-8 sm:mb-8">
<div className="flex w-full sm:shadow-xl sm:overflow-hidden bg-gray-100 dark:bg-secondaryDark sm:rounded-b-xl">
{route.name === 'messages' && <Messages />}
{route.name === 'nodes' && <Nodes />}
{route.name === 'settings' && <Settings />}
{route.name === 'about' && <About />}
{route.name === false && 'Not Found'}
<div className="flex flex-grow min-h-0 w-full sm:px-8 sm:mb-8">
<div className="flex w-full sm:shadow-xl sm:overflow-hidden bg-gray-100 dark:bg-secondaryDark sm:rounded-b-xl">
{route.name === 'messages' && <Messages />}
{route.name === 'nodes' && <Nodes />}
{route.name === 'settings' && <Settings />}
{route.name === 'about' && <About />}
{route.name === false && 'Not Found'}
</div>
</div>
</div>
</div>
</div>
</ThemeProvider>
);
};