75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
import type React from "react";
|
|
|
|
import { useDevice } from "@app/core/providers/useDevice.js";
|
|
import { toMGRS } from "@app/core/utils/toMGRS.js";
|
|
import { BatteryWidget } from "@components/Widgets/BatteryWidget.js";
|
|
import { DeviceWidget } from "@components/Widgets/DeviceWidget.js";
|
|
import { PeersWidget } from "@components/Widgets/PeersWidget.js";
|
|
import { PositionWidget } from "@components/Widgets/PositionWidget.js";
|
|
import { useAppStore } from "@core/stores/appStore.js";
|
|
import { useDeviceStore } from "@core/stores/deviceStore.js";
|
|
import { CommandLineIcon } from "@heroicons/react/24/outline";
|
|
import { Types } from "@meshtastic/meshtasticjs";
|
|
|
|
import { Input } from "./form/Input.js";
|
|
import { Button } from "./form/Button.js";
|
|
|
|
export const Sidebar = (): JSX.Element => {
|
|
const { removeDevice } = useDeviceStore();
|
|
const { connection, hardware, nodes, status, currentMetrics } = useDevice();
|
|
const { selectedDevice, setSelectedDevice, setCommandPaletteOpen } =
|
|
useAppStore();
|
|
const myNode = nodes.find((n) => n.data.num === hardware.myNodeNum);
|
|
|
|
return (
|
|
<div className="bg-slate-50 relative flex w-72 flex-shrink-0 flex-col gap-2 p-2">
|
|
<DeviceWidget
|
|
name={
|
|
nodes.find((n) => n.data.num === hardware.myNodeNum)?.data.user
|
|
?.longName ?? "UNK"
|
|
}
|
|
nodeNum={hardware.myNodeNum.toString()}
|
|
disconnected={status === Types.DeviceStatusEnum.DEVICE_DISCONNECTED}
|
|
disconnect={() => {
|
|
void connection?.disconnect();
|
|
setSelectedDevice(0);
|
|
removeDevice(selectedDevice ?? 0);
|
|
}}
|
|
reconnect={() => {
|
|
void connection?.disconnect();
|
|
}}
|
|
/>
|
|
|
|
<div className="flex flex-grow flex-col gap-3">
|
|
<BatteryWidget
|
|
batteryLevel={currentMetrics.batteryLevel}
|
|
voltage={currentMetrics.voltage}
|
|
/>
|
|
<PeersWidget
|
|
peers={nodes
|
|
.map((n) => n.data)
|
|
.filter((n) => n.num !== hardware.myNodeNum)}
|
|
/>
|
|
<PositionWidget
|
|
grid={toMGRS(
|
|
myNode?.data.position?.latitudeI,
|
|
myNode?.data.position?.longitudeI
|
|
)}
|
|
/>
|
|
<div className="mt-auto">
|
|
<Input
|
|
placeholder={"Search for a command"}
|
|
onClick={() => setCommandPaletteOpen(true)}
|
|
action={{
|
|
icon: <CommandLineIcon className="w-4" />,
|
|
action() {
|
|
setCommandPaletteOpen(true);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|