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

Move to waypoints from location

Browse Source
This commit is contained in:
Sacha Weatherstone
2022-08-31 17:32:19 +10:00
parent 0374b00359
commit c0be3bb2ba
8 changed files with 177 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/stores/deviceStore.ts
+27 -11
View File
@@ -13,16 +13,21 @@ export type Page =
| "channels"
| "info";
export interface MessageWithAck {
message: Types.MessagePacket;
export interface MessageWithAck extends Types.MessagePacket {
ack: boolean;
received: Date;
}
export interface WaypointIDWithAck extends Omit<Types.WaypointPacket, "data"> {
waypointID: number;
ack: boolean;
}
export type AllMessageTypes = MessageWithAck | WaypointIDWithAck;
export interface Channel {
config: Protobuf.Channel;
lastInterraction: Date;
messages: MessageWithAck[];
messages: AllMessageTypes[];
}
export interface Node {
@@ -44,7 +49,7 @@ export interface Device {
activePage: Page;
peerInfoOpen: boolean;
activePeer: number;
waypoints: Protobuf.Location[];
waypoints: Protobuf.Waypoint[];
regionUnset: boolean;
setReady(ready: boolean): void;
@@ -57,12 +62,13 @@ export interface Device {
setPeerInfoOpen: (open: boolean) => void;
setActivePeer: (peer: number) => void;
addChannel: (channel: Channel) => void;
addWaypoint: (waypoint: Protobuf.Location) => void;
addWaypoint: (waypoint: Protobuf.Waypoint) => void;
addNodeInfo: (nodeInfo: Types.NodeInfoPacket) => void;
addUser: (user: Types.UserPacket) => void;
addPosition: (position: Types.PositionPacket) => void;
addConnection: (connection: IConnection) => void;
addMessage: (message: MessageWithAck) => void;
addWaypointMessage: (message: WaypointIDWithAck) => void;
ackMessage: (channelIndex: number, messageId: number) => void;
}
@@ -265,7 +271,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
})
);
},
addWaypoint: (waypoint: Protobuf.Location) => {
addWaypoint: (waypoint: Protobuf.Waypoint) => {
set(
produce<DeviceState>((draft) => {
const device = draft.devices.get(id);
@@ -404,14 +410,24 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
const device = draft.devices.get(id);
if (device) {
device.channels
.find(
(ch) => ch.config.index === message.message.packet.channel
)
.find((ch) => ch.config.index === message.packet.channel)
?.messages.push(message);
}
})
);
},
addWaypointMessage: (waypointID) => {
set(
produce<DeviceState>((draft) => {
const device = draft.devices.get(id);
if (device) {
device.channels
.find((ch) => ch.config.index === waypointID.packet.channel)
?.messages.push(waypointID);
}
})
);
},
ackMessage: (channelIndex: number, messageId: number) => {
console.log("ack called");
@@ -424,7 +440,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
);
if (channel) {
const message = channel.messages.find(
(msg) => msg.message.packet.id === messageId
(msg) => msg.packet.id === messageId
);
if (message) {
message.ack = true;
src/core/subscriptions.ts
+11 -7
View File
@@ -32,6 +32,16 @@ export const subscribeAll = (device: Device, connection: IConnection) => {
}
});
connection.onWaypointPacket.subscribe((waypoint) => {
const { data, ...rest } = waypoint;
device.addWaypoint(data);
device.addWaypointMessage({
waypointID: data.id,
ack: rest.packet.from !== device.hardware.myNodeNum,
...rest,
});
});
connection.onMyNodeInfo.subscribe((nodeInfo) => {
device.setHardware(nodeInfo);
});
@@ -64,14 +74,8 @@ export const subscribeAll = (device: Device, connection: IConnection) => {
connection.onMessagePacket.subscribe((messagePacket) => {
device.addMessage({
message: messagePacket,
...messagePacket,
ack: messagePacket.packet.from !== device.hardware.myNodeNum,
received: messagePacket.packet.rxTime
? new Date(messagePacket.packet.rxTime * 1000)
: new Date(),
});
if (messagePacket.location) {
device.addWaypoint(messagePacket.location);
}
});
};
src/pages/Messages/ChannelChat.tsx
+4 -8
View File
@@ -45,19 +45,15 @@ export const ChannelChat = ({ channel }: ChannelChatProps): JSX.Element => {
{channel.messages.map((message, index) => (
<Message
key={index}
messagePacket={message.message}
ack={message.ack}
rxTime={message.received}
message={message}
lastMsgSameUser={
index === 0
? false
: channel.messages[index - 1].message.packet.from ===
message.message.packet.from
: channel.messages[index - 1].packet.from ===
message.packet.from
}
sender={
nodes.find(
(node) => node.data.num === message.message.packet.from
)?.data
nodes.find((node) => node.data.num === message.packet.from)?.data
}
/>
))}
src/pages/Messages/Message.tsx
+17 -20
View File
@@ -10,50 +10,47 @@ import {
Text,
} from "evergreen-ui";
import type { AllMessageTypes } from "@app/core/stores/deviceStore.js";
import { WaypointMessage } from "@app/pages/Messages/WaypointMessage.js";
import { useDevice } from "@core/providers/useDevice.js";
import { Hashicon } from "@emeraldpay/hashicon-react";
import type { Protobuf, Types } from "@meshtastic/meshtasticjs";
import { LocationMessage } from "@pages/Messages/LocationMessage.js";
import type { Protobuf } from "@meshtastic/meshtasticjs";
export interface MessageProps {
lastMsgSameUser: boolean;
messagePacket: Types.MessagePacket;
ack: boolean;
rxTime: Date;
message: AllMessageTypes;
sender?: Protobuf.NodeInfo;
}
export const Message = ({
lastMsgSameUser,
messagePacket,
ack,
rxTime,
message,
sender,
}: MessageProps): JSX.Element => {
const { setPeerInfoOpen, setActivePeer } = useDevice();
const openPeer = (): void => {
setActivePeer(messagePacket.packet.from);
setActivePeer(message.packet.from);
setPeerInfoOpen(true);
};
return lastMsgSameUser ? (
<Pane display="flex" marginLeft={majorScale(3)}>
{ack ? (
{message.ack ? (
<FullCircleIcon color="#9c9fab" marginY="auto" size={8} />
) : (
<CircleIcon color="#9c9fab" marginY="auto" size={8} />
)}
{messagePacket.location ? (
<LocationMessage location={messagePacket.location} />
{"waypointID" in message ? (
<WaypointMessage waypointID={message.waypointID} />
) : (
<Text
color={ack ? "#474d66" : "#9c9fab"}
color={message.ack ? "#474d66" : "#9c9fab"}
marginLeft={majorScale(2)}
paddingLeft={majorScale(1)}
borderLeft="3px solid #e6e6e6"
>
{messagePacket.text}
{message.text}
</Text>
)}
</Pane>
@@ -67,28 +64,28 @@ export const Message = ({
{sender?.user?.longName ?? "UNK"}
</Strong>
<Small>
{rxTime.toLocaleTimeString(undefined, {
{new Date(message.packet.rxTime).toLocaleTimeString(undefined, {
hour: "2-digit",
minute: "2-digit",
})}
</Small>
</Pane>
<Pane display="flex" marginLeft={majorScale(1)}>
{ack ? (
{message.ack ? (
<FullCircleIcon color="#9c9fab" marginY="auto" size={8} />
) : (
<CircleIcon color="#9c9fab" marginY="auto" size={8} />
)}
{messagePacket.location ? (
<LocationMessage location={messagePacket.location} />
{"waypointID" in message ? (
<WaypointMessage waypointID={message.waypointID} />
) : (
<Text
color={ack ? "#474d66" : "#9c9fab"}
color={message.ack ? "#474d66" : "#9c9fab"}
marginLeft={majorScale(2)}
paddingLeft={majorScale(1)}
borderLeft="3px solid #e6e6e6"
>
{messagePacket.text}
{message.text}
</Text>
)}
</Pane>
src/pages/Messages/NewLocationMessage.tsx
+2 -2
View File
@@ -37,8 +37,8 @@ export const NewLocationMessage = (): JSX.Element => {
<Button
width="100%"
onClick={() => {
void connection?.sendLocation(
Protobuf.Location.create({
void connection?.sendWaypoint(
Protobuf.Waypoint.create({
latitudeI: Math.floor(3.89103 * 1e7),
longitudeI: Math.floor(105.87005 * 1e7),
name: "TEST",
src/pages/Messages/LocationMessage.tsx → src/pages/Messages/WaypointMessage.tsx
+12 -9
View File
@@ -10,16 +10,19 @@ import {
Text,
} from "evergreen-ui";
import { useDevice } from "@app/core/providers/useDevice.js";
import { toMGRS } from "@core/utils/toMGRS.js";
import type { Protobuf } from "@meshtastic/meshtasticjs";
export interface LocationMessageProps {
location: Protobuf.Location;
export interface WaypointMessageProps {
waypointID: number;
}
export const LocationMessage = ({
location,
}: LocationMessageProps): JSX.Element => {
export const WaypointMessage = ({
waypointID,
}: WaypointMessageProps): JSX.Element => {
const { waypoints } = useDevice();
const waypoint = waypoints.find((wp) => wp.id === waypointID);
return (
<Pane
marginLeft={majorScale(2)}
@@ -36,12 +39,12 @@ export const LocationMessage = ({
<LocateIcon color="#474d66" marginY="auto" />
<Pane>
<Pane display="flex" gap={majorScale(1)}>
<Heading>{location.name}</Heading>
<Heading>{waypoint?.name}</Heading>
<Text color="orange">
{toMGRS(location.latitudeI, location.longitudeI)}
{toMGRS(waypoint?.latitudeI, waypoint?.longitudeI)}
</Text>
</Pane>
<Small>{location.description}</Small>
<Small>{waypoint?.description}</Small>
</Pane>
</Pane>
</Pane>