-
Notifications
You must be signed in to change notification settings - Fork 92
/
Sidebar.tsx
73 lines (68 loc) · 2.48 KB
/
Sidebar.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
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";
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>
);
};