You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
103 lines
3.1 KiB
103 lines
3.1 KiB
import type React from "react";
|
|
|
|
import {
|
|
Badge,
|
|
Heading,
|
|
Link,
|
|
majorScale,
|
|
MapMarkerIcon,
|
|
Pane,
|
|
} from "evergreen-ui";
|
|
import { FiBluetooth, FiTerminal, FiWifi } from "react-icons/fi";
|
|
|
|
import { toMGRS } from "@app/core/utils/toMGRS.js";
|
|
import { useDevice } from "@core/providers/useDevice.js";
|
|
import { Hashicon } from "@emeraldpay/hashicon-react";
|
|
import { Types } from "@meshtastic/meshtasticjs";
|
|
|
|
export const DeviceCard = (): JSX.Element => {
|
|
const { hardware, nodes, status, connection } = useDevice();
|
|
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
|
|
|
|
return (
|
|
<Pane
|
|
display="flex"
|
|
flexGrow={1}
|
|
flexDirection="column"
|
|
marginTop="auto"
|
|
gap={majorScale(1)}
|
|
>
|
|
<Pane display="flex" gap={majorScale(2)}>
|
|
<Hashicon value={hardware.myNodeNum.toString()} size={42} />
|
|
<Pane flexGrow={1}>
|
|
<Heading>{myNode?.data.user?.longName}</Heading>
|
|
<Link
|
|
target="_blank"
|
|
href="https://github.com/meshtastic/meshtastic-device/releases/"
|
|
>
|
|
<Badge
|
|
color="green"
|
|
width="100%"
|
|
marginRight={8}
|
|
display="flex"
|
|
marginTop={4}
|
|
>
|
|
{hardware.firmwareVersion}
|
|
</Badge>
|
|
</Link>
|
|
</Pane>
|
|
</Pane>
|
|
<Pane display="flex" gap={majorScale(1)}>
|
|
<MapMarkerIcon />
|
|
<Badge
|
|
color={myNode?.data.position?.latitudeI ? "green" : "red"}
|
|
display="flex"
|
|
width="100%"
|
|
>
|
|
{toMGRS(
|
|
myNode?.data.position?.latitudeI,
|
|
myNode?.data.position?.longitudeI
|
|
)}
|
|
</Badge>
|
|
</Pane>
|
|
<Pane display="flex" gap={majorScale(1)}>
|
|
{connection?.connType === "ble" && <FiBluetooth />}
|
|
{connection?.connType === "http" && <FiWifi />}
|
|
{connection?.connType === "serial" && <FiTerminal />}
|
|
<Badge
|
|
color={
|
|
[
|
|
Types.DeviceStatusEnum.DEVICE_CONNECTED,
|
|
Types.DeviceStatusEnum.DEVICE_CONFIGURED,
|
|
Types.DeviceStatusEnum.DEVICE_CONFIGURING,
|
|
].includes(status)
|
|
? "green"
|
|
: [
|
|
Types.DeviceStatusEnum.DEVICE_CONNECTING,
|
|
Types.DeviceStatusEnum.DEVICE_RECONNECTING,
|
|
Types.DeviceStatusEnum.DEVICE_CONNECTED,
|
|
].includes(status)
|
|
? "orange"
|
|
: "red"
|
|
}
|
|
display="flex"
|
|
width="100%"
|
|
>
|
|
{[
|
|
Types.DeviceStatusEnum.DEVICE_CONNECTED,
|
|
Types.DeviceStatusEnum.DEVICE_CONFIGURED,
|
|
Types.DeviceStatusEnum.DEVICE_CONFIGURING,
|
|
].includes(status)
|
|
? "Connected"
|
|
: [
|
|
Types.DeviceStatusEnum.DEVICE_CONNECTING,
|
|
Types.DeviceStatusEnum.DEVICE_RECONNECTING,
|
|
Types.DeviceStatusEnum.DEVICE_CONNECTED,
|
|
].includes(status)
|
|
? "Connecting"
|
|
: "Disconnected"}
|
|
</Badge>
|
|
</Pane>
|
|
</Pane>
|
|
);
|
|
};
|
|
|