Tooltips, mqtt status & commit hash
This commit is contained in:
Sacha Weatherstone
@@ -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>;
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user