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

DM support

Browse Source
This commit is contained in:
Sacha Weatherstone
2023-02-19 16:55:59 +10:00
parent 2265a304fe
commit b2c3c89965
17 changed files with 532 additions and 531 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Channels.tsx
+5 -14
View File
@@ -5,10 +5,7 @@ import { Channel } from "@components/PageComponents/Channel.js";
import { useDevice } from "@core/stores/deviceStore.js";
import { QrCodeIcon, ImportIcon } from "lucide-react";
import { Protobuf, Types } from "@meshtastic/meshtasticjs";
import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
import { useState } from "react";
import { Button } from "@components/UI/Button.js";
import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
import {
Tabs,
TabsContent,
@@ -35,7 +32,7 @@ export const ChannelsPage = (): JSX.Element => {
<PageLayout
label={`Channel: ${
channels[activeChannel]
? getChannelName(channels[activeChannel].config)
? getChannelName(channels[activeChannel])
: "Loading..."
}`}
actions={[
@@ -58,20 +55,14 @@ export const ChannelsPage = (): JSX.Element => {
<Tabs defaultValue="0">
<TabsList>
{channels.map((channel) => (
<TabsTrigger
key={channel.config.index}
value={channel.config.index.toString()}
>
{getChannelName(channel.config)}
<TabsTrigger key={channel.index} value={channel.index.toString()}>
{getChannelName(channel)}
</TabsTrigger>
))}
</TabsList>
{channels.map((channel) => (
<TabsContent
key={channel.config.index}
value={channel.config.index.toString()}
>
<Channel key={channel.config.index} channel={channel.config} />
<TabsContent key={channel.index} value={channel.index.toString()}>
<Channel key={channel.index} channel={channel} />
</TabsContent>
))}
</Tabs>
src/pages/Map.tsx
+15 -11
View File
@@ -21,13 +21,17 @@ export const MapPage = (): JSX.Element => {
const { rasterSources } = useAppStore();
const { default: map } = useMap();
const allNodes = Array.from(nodes.values());
const getBBox = () => {
const nodesWithPosition = nodes.filter((n) => n.data.position?.latitudeI);
const nodesWithPosition = allNodes.filter(
(node) => node.position?.latitudeI
);
if (!nodesWithPosition.length) return;
const line = lineString(
nodesWithPosition.map((n) => [
(n.data.position?.latitudeI ?? 0) / 1e7,
(n.data.position?.longitudeI ?? 0) / 1e7
(n.position?.latitudeI ?? 0) / 1e7,
(n.position?.longitudeI ?? 0) / 1e7
])
);
const bounds = bbox(line);
@@ -43,8 +47,8 @@ export const MapPage = (): JSX.Element => {
map?.easeTo({
zoom: 12,
center: [
(nodesWithPosition[0].data.position?.longitudeI ?? 0) / 1e7,
(nodesWithPosition[0].data.position?.latitudeI ?? 0) / 1e7
(nodesWithPosition[0].position?.longitudeI ?? 0) / 1e7,
(nodesWithPosition[0].position?.latitudeI ?? 0) / 1e7
]
});
};
@@ -123,16 +127,16 @@ export const MapPage = (): JSX.Element => {
<Layer type="raster" />
</Source>
))} */}
{nodes.map((n) => {
if (n.data.position?.latitudeI) {
{allNodes.map((node) => {
if (node.position?.latitudeI) {
return (
<Marker
key={n.data.num}
longitude={n.data.position.longitudeI / 1e7}
latitude={n.data.position.latitudeI / 1e7}
key={node.num}
longitude={node.position.longitudeI / 1e7}
latitude={node.position.latitudeI / 1e7}
anchor="bottom"
>
<Hashicon value={n.data.num.toString()} size={32} />
<Hashicon value={node.num.toString()} size={32} />
</Marker>
);
}
src/pages/Messages.tsx
+53 -26
View File
@@ -6,63 +6,90 @@ import { Hashicon } from "@emeraldpay/hashicon-react";
import { HashIcon } from "lucide-react";
import { Protobuf, Types } from "@meshtastic/meshtasticjs";
import { SidebarSection } from "@components/UI/Sidebar/SidebarSection.js";
import { useState } from "react";
import { useMemo, useState } from "react";
import { getChannelName } from "./Channels.js";
import { SidebarButton } from "@components/UI/Sidebar/sidebarButton.js";
export const MessagesPage = (): JSX.Element => {
const { channels, nodes, hardware } = useDevice();
const [activeChannel, setActiveChannel] = useState<Types.ChannelNumber>(
const { channels, nodes, hardware, messages } = useDevice();
const [chatType, setChatType] =
useState<Types.PacketDestination>("broadcast");
const [activeChat, setActiveChat] = useState<number>(
Types.ChannelNumber.PRIMARY
);
const filteredNodes = Array.from(nodes.values()).filter(
(n) => n.num !== hardware.myNodeNum
);
return (
<>
<Sidebar>
<SidebarSection label="Channels">
{channels
.filter((ch) => ch.config.role !== Protobuf.Channel_Role.DISABLED)
.filter((ch) => ch.role !== Protobuf.Channel_Role.DISABLED)
.map((channel) => (
<SidebarButton
key={channel.config.index}
key={channel.index}
label={
channel.config.settings?.name.length
? channel.config.settings?.name
: channel.config.index === 0
channel.settings?.name.length
? channel.settings?.name
: channel.index === 0
? "Primary"
: `Ch ${channel.config.index}`
: `Ch ${channel.index}`
}
active={channel.config.index === activeChannel}
onClick={() => setActiveChannel(channel.config.index)}
active={activeChat === channel.index}
onClick={() => {
setChatType("broadcast");
setActiveChat(channel.index);
}}
element={<HashIcon size={16} className="mr-2" />}
/>
))}
</SidebarSection>
<SidebarSection label="Peers">
{nodes
.filter((n) => n.data.num !== hardware.myNodeNum)
.map((node) => (
<SidebarButton
key={node.data.num}
label={node.data.user?.longName ?? "Unknown"}
element={
<Hashicon size={20} value={node.data.num.toString()} />
}
/>
))}
{filteredNodes.map((node) => (
<SidebarButton
key={node.num}
label={node.user?.longName ?? "Unknown"}
active={activeChat === node.num}
onClick={() => {
setChatType("direct");
setActiveChat(node.num);
}}
element={<Hashicon size={20} value={node.num.toString()} />}
/>
))}
</SidebarSection>
</Sidebar>
<PageLayout
label={`Messages: ${
channels[activeChannel]
? getChannelName(channels[activeChannel].config)
chatType === "broadcast" && channels[activeChat]
? getChannelName(channels[activeChat])
: chatType === "direct" && nodes.get(activeChat)
? nodes.get(activeChat)?.user?.longName ?? "Unknown"
: "Loading..."
}`}
>
{channels.map(
(channel) =>
channel.config.index === activeChannel && (
<ChannelChat key={channel.config.index} channel={channel} />
activeChat === channel.index && (
<ChannelChat
key={channel.index}
to="broadcast"
messages={messages.broadcast.get(channel.index)}
channel={channel.index}
/>
)
)}
{filteredNodes.map(
(node) =>
activeChat === node.num && (
<ChannelChat
key={node.num}
to={activeChat}
messages={messages.direct.get(node.num)}
channel={Types.ChannelNumber.PRIMARY}
/>
)
)}
</PageLayout>
src/pages/Peers.tsx
+17 -13
View File
@@ -8,7 +8,11 @@ import { Protobuf } from "@meshtastic/meshtasticjs";
import { Sidebar } from "@components/Sidebar.js";
export const PeersPage = (): JSX.Element => {
const { connection, nodes } = useDevice();
const { nodes, hardware } = useDevice();
const filteredNodes = Array.from(nodes.values()).filter(
(n) => n.num !== hardware.myNodeNum
);
return (
<>
@@ -23,32 +27,32 @@ export const PeersPage = (): JSX.Element => {
{ title: "Last Heard", type: "normal", sortable: true },
{ title: "SNR", type: "normal", sortable: true }
]}
rows={nodes.map((node) => [
<Hashicon size={24} value={node.data.num.toString()} />,
rows={filteredNodes.map((node) => [
<Hashicon size={24} value={node.num.toString()} />,
<h1>
{node.data.user?.longName ?? node.data.user?.macaddr
{node.user?.longName ?? node.user?.macaddr
? `Meshtastic_${base16
.stringify(node.data.user?.macaddr.subarray(4, 6) ?? [])
.stringify(node.user?.macaddr.subarray(4, 6) ?? [])
.toLowerCase()}`
: `UNK: ${node.data.num}`}
: `UNK: ${node.num}`}
</h1>,
<Mono>{Protobuf.HardwareModel[node.data.user?.hwModel ?? 0]}</Mono>,
<Mono>{Protobuf.HardwareModel[node.user?.hwModel ?? 0]}</Mono>,
<Mono>
{base16
.stringify(node.data.user?.macaddr ?? [])
.stringify(node.user?.macaddr ?? [])
.match(/.{1,2}/g)
?.join(":") ?? "UNK"}
</Mono>,
node.data.lastHeard === 0 ? (
node.lastHeard === 0 ? (
<p>Never</p>
) : (
<TimeAgo timestamp={node.data.lastHeard * 1000} />
<TimeAgo timestamp={node.lastHeard * 1000} />
),
<Mono>
{node.data.snr}db/
{Math.min(Math.max((node.data.snr + 10) * 5, 0), 100)}%/
{(node.data.snr + 10) * 5}raw
{node.snr}db/
{Math.min(Math.max((node.snr + 10) * 5, 0), 100)}%/
{(node.snr + 10) * 5}raw
</Mono>
])}
/>