hermes/meshtastic-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tooltips, mqtt status & commit hash

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-01-16 15:16:38 +11:00
parent 5f2503976d
commit 070fbc664f
6 changed files with 225 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/generic/Tooltip.tsx
+14
View File
@@ -0,0 +1,14 @@
import 'tippy.js/dist/tippy.css';
import type React from 'react';
import Tippy from '@tippyjs/react';
export interface TooltipProps {
children: JSX.Element;
contents: string;
}
export const Tooltip = ({ children, contents }: TooltipProps): JSX.Element => {
return <Tippy content={contents}>{children}</Tippy>;
};
src/components/menu/BottomNav.tsx
+93 -58
View File
@@ -8,7 +8,13 @@ import {
FiMoon,
FiSun,
FiWifi,
FiX,
} from 'react-icons/fi';
import {
RiArrowDownLine,
RiArrowUpDownLine,
RiArrowUpLine,
} from 'react-icons/ri';
import {
connType,
@@ -17,7 +23,9 @@ import {
} from '@app/core/slices/appSlice';
import { useAppDispatch } from '@hooks/useAppDispatch';
import { useAppSelector } from '@hooks/useAppSelector';
import { Types } from '@meshtastic/meshtasticjs';
import { Protobuf, Types } from '@meshtastic/meshtasticjs';
import { Tooltip } from '../generic/Tooltip';
// export interface BottomNavProps {
@@ -27,70 +35,97 @@ export const BottomNav = (): JSX.Element => {
const dispatch = useAppDispatch();
const meshtasticState = useAppSelector((state) => state.meshtastic);
const appState = useAppSelector((state) => state.app);
// @ts-ignore define version string global
const version = window.__COMMIT_HASH__ as string;
const primaryChannelSettings = useAppSelector(
(state) => state.meshtastic.radio.channels,
).find((channel) => channel.channel.role === Protobuf.Channel_Role.PRIMARY)
?.channel.settings;
return (
<div className="flex justify-between bg-white border-t border-gray-300 dark:bg-secondaryDark dark:border-gray-600">
<div
className={`flex p-1 cursor-pointer group w-min hover:bg-opacity-80 ${
[
Types.DeviceStatusEnum.DEVICE_CONNECTED,
Types.DeviceStatusEnum.DEVICE_CONFIGURED,
].includes(meshtasticState.deviceStatus)
? 'bg-primary'
: [
Types.DeviceStatusEnum.DEVICE_CONNECTING,
Types.DeviceStatusEnum.DEVICE_RECONNECTING,
Types.DeviceStatusEnum.DEVICE_CONFIGURING,
<div className="flex">
<Tooltip contents={`Connection Status`}>
<div
className={`flex p-1 cursor-pointer group w-min hover:bg-opacity-80 ${
[
Types.DeviceStatusEnum.DEVICE_CONNECTED,
Types.DeviceStatusEnum.DEVICE_CONFIGURED,
].includes(meshtasticState.deviceStatus)
? 'bg-yellow-400'
: 'bg-gray-400'
}`}
onClick={(): void => {
dispatch(dispatch(openConnectionModal()));
}}
>
{appState.connType === connType.BLE ? (
<FiBluetooth className="mr-1 p-0.5 group-active:scale-90" />
) : appState.connType === connType.SERIAL ? (
<FiCpu className="mr-1 p-0.5 group-active:scale-90" />
) : (
<FiWifi className="mr-1 p-0.5 group-active:scale-90" />
)}
<div className="text-xs font-medium truncate group-active:scale-90">
{meshtasticState.nodes.find(
(node) => node.number === meshtasticState.radio.hardware.myNodeNum,
)?.user?.longName ?? 'Disconnected'}
</div>
? 'bg-primary'
: [
Types.DeviceStatusEnum.DEVICE_CONNECTING,
Types.DeviceStatusEnum.DEVICE_RECONNECTING,
Types.DeviceStatusEnum.DEVICE_CONFIGURING,
].includes(meshtasticState.deviceStatus)
? 'bg-yellow-400'
: 'bg-gray-400'
}`}
onClick={(): void => {
dispatch(dispatch(openConnectionModal()));
}}
>
{appState.connType === connType.BLE ? (
<FiBluetooth className="mr-1 p-0.5 group-active:scale-90" />
) : appState.connType === connType.SERIAL ? (
<FiCpu className="mr-1 p-0.5 group-active:scale-90" />
) : (
<FiWifi className="mr-1 p-0.5 group-active:scale-90" />
)}
<div className="text-xs font-medium truncate group-active:scale-90">
{meshtasticState.nodes.find(
(node) =>
node.number === meshtasticState.radio.hardware.myNodeNum,
)?.user?.longName ?? 'Disconnected'}
</div>
</div>
</Tooltip>
<Tooltip contents={`MQTT Status`}>
<div className="flex p-1 border-r border-gray-300 cursor-pointer select-none group dark:border-gray-600 dark:text-white hover:bg-gray-200 dark:hover:bg-primaryDark">
{primaryChannelSettings?.uplinkEnabled &&
primaryChannelSettings?.downlinkEnabled ? (
<RiArrowUpDownLine className="p-0.5 group-active:scale-90" />
) : primaryChannelSettings?.uplinkEnabled ? (
<RiArrowUpLine className="p-0.5 group-active:scale-90" />
) : primaryChannelSettings?.downlinkEnabled ? (
<RiArrowDownLine className="p-0.5 group-active:scale-90" />
) : (
<FiX className="p-0.5" />
)}
</div>
</Tooltip>
</div>
<div className="flex">
<a
href={`https://github.com/meshtastic/meshtastic-web/commit/${version}`}
target="_blank"
rel="noreferrer"
className="flex p-1 border-l border-gray-300 cursor-pointer select-none group dark:border-gray-600 dark:text-white hover:bg-gray-200 dark:hover:bg-primaryDark"
>
<FiGitBranch className="p-0.5 mr-1 group-active:scale-90" />
<p className="text-xs opacity-60">{version}</p>
</a>
<div className="flex p-1 border-l border-gray-300 cursor-pointer select-none group dark:border-gray-600 dark:text-white hover:bg-gray-200 dark:hover:bg-primaryDark">
<FiBell className="p-0.5 mr-1 group-active:scale-90" />
<p className="text-xs opacity-60">Example Notification</p>
</div>
<div
className="p-1 border-l border-gray-300 cursor-pointer group dark:border-gray-600 dark:text-white hover:bg-gray-200 dark:hover:bg-primaryDark"
onClick={(): void => {
dispatch(setDarkModeEnabled(!appState.darkMode));
}}
>
{appState.darkMode ? (
<FiSun className="p-0.5 group-active:scale-90" />
) : (
<FiMoon className="p-0.5 group-active:scale-90" />
)}
</div>
<Tooltip contents={`Current Commit`}>
<a
href={`https://github.com/meshtastic/meshtastic-web/commit/${process.env.COMMIT_HASH}`}
target="_blank"
rel="noreferrer"
className="flex p-1 border-l border-gray-300 cursor-pointer select-none group dark:border-gray-600 dark:text-white hover:bg-gray-200 dark:hover:bg-primaryDark"
>
<FiGitBranch className="p-0.5 mr-1 group-active:scale-90" />
<p className="text-xs opacity-60">{process.env.COMMIT_HASH}</p>
</a>
</Tooltip>
<Tooltip contents={`Notifications`}>
<div className="flex p-1 border-l border-gray-300 cursor-pointer select-none group dark:border-gray-600 dark:text-white hover:bg-gray-200 dark:hover:bg-primaryDark">
<FiBell className="p-0.5 mr-1 group-active:scale-90" />
<p className="text-xs opacity-60">Example Notification</p>
</div>
</Tooltip>
<Tooltip contents={`Toggle Theme`}>
<div
className="p-1 border-l border-gray-300 cursor-pointer group dark:border-gray-600 dark:text-white hover:bg-gray-200 dark:hover:bg-primaryDark"
onClick={(): void => {
dispatch(setDarkModeEnabled(!appState.darkMode));
}}
>
{appState.darkMode ? (
<FiSun className="p-0.5 group-active:scale-90" />
) : (
<FiMoon className="p-0.5 group-active:scale-90" />
)}
</div>
</Tooltip>
</div>
</div>
);
src/pages/Nodes/Sidebar.tsx
+4 -1
View File
@@ -110,7 +110,10 @@ export const Sidebar = ({ node, closeSidebar }: SidebarProps): JSX.Element => {
icon={isCopied ? <FiCheck /> : <FiClipboard />}
/>
</div>
<JSONPretty className="max-w-sm overflow-auto" data={node} />
<JSONPretty
className="h-screen max-w-sm pb-40 overflow-y-auto"
data={node}
/>
</Tab.Panel>
</Tab.Panels>
</Tab.Group>