mirror
/
meshastic.web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

device store cleanup & peers page improvements

pull/66/head
Sacha Weatherstone 3 years ago
parent
ec25ec60ee
commit
0fcf27a77f
8 changed files with 132 additions and 146 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      package.json
  2. 23
      pnpm-lock.yaml
  3. 2
      src/components/PageComponents/Config/Network.tsx
  4. 7
      src/components/PageComponents/Messages/ChannelChat.tsx
  5. 13
      src/components/PageComponents/Messages/Message.tsx
  6. 204
      src/core/stores/deviceStore.ts
  7. 20
      src/core/subscriptions.ts
  8. 6
      src/pages/Peers.tsx

3
package.json
View File

@ -27,7 +27,7 @@
"@heroicons/react": "^2.0.13",
"@hookform/error-message": "^2.0.1",
"@hookform/resolvers": "^2.9.10",
"@meshtastic/meshtasticjs": "^0.9.2",
"@meshtastic/meshtasticjs": "^0.9.7",
"@tailwindcss/line-clamp": "^0.4.2",
"@tailwindcss/typography": "^0.5.8",
"@turf/turf": "^6.5.0",
@ -52,6 +52,7 @@
"react-map-gl": "^7.0.20",
"react-qrcode-logo": "^2.8.0",
"rfc4648": "^1.5.2",
"timeago-react": "^3.0.5",
"zustand": "4.1.5"
},
"devDependencies": {

23
pnpm-lock.yaml
View File

@ -6,7 +6,7 @@ specifiers:
'@heroicons/react': ^2.0.13
'@hookform/error-message': ^2.0.1
'@hookform/resolvers': ^2.9.10
'@meshtastic/meshtasticjs': ^0.9.2
'@meshtastic/meshtasticjs': ^0.9.7
'@tailwindcss/forms': ^0.5.3
'@tailwindcss/line-clamp': ^0.4.2
'@tailwindcss/typography': ^0.5.8
@ -56,6 +56,7 @@ specifiers:
rollup-plugin-visualizer: ^5.9.0
tailwindcss: ^3.2.4
tar: ^6.1.13
timeago-react: ^3.0.5
tslib: ^2.4.1
typescript: ^4.9.4
unimported: ^1.24.0
@ -70,7 +71,7 @@ dependencies:
'@heroicons/react': 2.0[email protected]
'@hookform/error-message': 2.0.1_7yhncxxycytkes3mwygyjxyp6u
'@hookform/resolvers': 2.9[email protected]
'@meshtastic/meshtasticjs': 0.9.2
'@meshtastic/meshtasticjs': 0.9.7
'@tailwindcss/line-clamp': 0.4[email protected]
'@tailwindcss/typography': 0.5[email protected]
'@turf/turf': 6.5.0
@ -95,6 +96,7 @@ dependencies:
react-map-gl: 7.0.20_6eczaga5xxiwzxtfiyk6fioasq
react-qrcode-logo: 2.8.0_biqbaboplfbrettd7655fr4n2y
rfc4648: 1.5.2
timeago-react: 3.0[email protected]
zustand: 4.1[email protected][email protected]
devDependencies:
@ -1710,8 +1712,8 @@ packages:
engines: {node: '>=6.0.0'}
dev: false
/@meshtastic/meshtasticjs/0.9.2:
resolution: {integrity: sha512-rS/dK3RekRC9R930/RbNgdcktQ/XZv/bPpFZ6/6PJ61+8NjguN6SeNE3GP007TS5GSkp0zu3IgfOHn+pEL94KA==}
/@meshtastic/meshtasticjs/0.9.7:
resolution: {integrity: sha512-FQAfgJ2FeC55HbmOR1Z7Y3iIyXN32YO5OmtsviPolaZWivE7cCCfwSQGOHrtQUwXUSRv6Up0ucJ0eW7teaXxhA==}
dependencies:
'@protobuf-ts/runtime': 2.8.2
glob: 8.0.3
@ -6430,6 +6432,19 @@ packages:
readable-stream: 3.6.0
dev: true
/timeago-react/[email protected]:
resolution: {integrity: sha512-1k/aDt+ADpcABCmg3BIBuZSa7aSxolmuYFkdcpL7mlNkFcDAK/KwuxLf68gowhM7Oq3vWTE7LPeq3kLkSt45Jg==}
peerDependencies:
react: ^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
dependencies:
react: 18.2.0
timeago.js: 4.0.2
dev: false
/timeago.js/4.0.2:
resolution: {integrity: sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==}
dev: false
/tiny-glob/0.2.9:
resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
dependencies:

2
src/components/PageComponents/Config/Network.tsx
View File

@ -52,8 +52,6 @@ export const Network = (): JSX.Element => {
}, [reset, config.network]);
const onSubmit = handleSubmit((data) => {
console.log(data);
if (connection) {
void toast.promise(
connection

7
src/components/PageComponents/Messages/ChannelChat.tsx
View File

@ -22,12 +22,9 @@ export const ChannelChat = ({ channel }: ChannelChatProps): JSX.Element => {
lastMsgSameUser={
index === 0
? false
: channel.messages[index - 1].packet.from ===
message.packet.from
}
sender={
nodes.find((node) => node.data.num === message.packet.from)?.data
: channel.messages[index - 1].from === message.from
}
sender={nodes.find((node) => node.data.num === message.from)?.data}
/>
))}
</div>

13
src/components/PageComponents/Messages/Message.tsx
View File

@ -25,12 +25,12 @@ export const Message = ({
const { setPeerInfoOpen, setActivePeer, connection } = useDevice();
const openPeer = (): void => {
setActivePeer(message.packet.from);
setActivePeer(message.from);
setPeerInfoOpen(true);
};
return lastMsgSameUser ? (
<div className="ml-4 flex">
<div className="ml-5 flex">
{message.state === "ack" ? (
<CheckCircleIcon className="my-auto h-4 text-textSecondary" />
) : message.state === "waiting" ? (
@ -46,7 +46,7 @@ export const Message = ({
message.state === "ack" ? "text-textPrimary" : "text-textSecondary"
}`}
>
{message.text}
{message.data}
</span>
)}
</div>
@ -63,14 +63,13 @@ export const Message = ({
{sender?.user?.longName ?? "UNK"}
</span>
<span className="mt-1 font-mono text-xs text-textSecondary">
{new Date(message.packet.rxTime).toLocaleTimeString(undefined, {
{message.rxTime.toLocaleTimeString(undefined, {
hour: "2-digit",
minute: "2-digit"
})}
</span>
</div>
<div className="flex">
{/* <ExclamationCircleIcon /> */}
<div className="ml-1 flex">
{message.state === "ack" ? (
<CheckCircleIcon className="my-auto h-4 text-textSecondary" />
) : message.state === "waiting" ? (
@ -88,7 +87,7 @@ export const Message = ({
: "text-textSecondary"
}`}
>
{message.text}
{message.data}
</span>
)}
</div>

204
src/core/stores/deviceStore.ts
View File

@ -15,12 +15,12 @@ export type Page =
| "info"
| "logs";
export interface MessageWithState extends Types.MessagePacket {
export interface MessageWithState extends Types.PacketMetadata<string> {
state: MessageState;
}
export interface WaypointIDWithState
extends Omit<Types.WaypointPacket, "data"> {
extends Omit<Types.PacketMetadata<Protobuf.Waypoint>, "data"> {
waypointID: number;
state: MessageState;
}
@ -42,6 +42,12 @@ export interface Node {
data: Protobuf.NodeInfo;
}
export interface processPacketParams {
from: number;
snr: number;
time: number;
}
export interface Device {
id: number;
ready: boolean;
@ -69,20 +75,22 @@ export interface Device {
setConfig: (config: Protobuf.Config) => void;
setModuleConfig: (config: Protobuf.ModuleConfig) => void;
setHardware: (hardware: Protobuf.MyNodeInfo) => void;
setMetrics: (metrics: Types.TelemetryPacket) => void;
setMetrics: (metrics: Types.PacketMetadata<Protobuf.Telemetry>) => void;
setActivePage: (page: Page) => void;
setPeerInfoOpen: (open: boolean) => void;
setActivePeer: (peer: number) => void;
setPendingSettingsChanges: (state: boolean) => void;
addChannel: (channel: Channel) => void;
addWaypoint: (waypoint: Protobuf.Waypoint) => void;
addNodeInfo: (nodeInfo: Types.NodeInfoPacket) => void;
addUser: (user: Types.UserPacket) => void;
addPosition: (position: Types.PositionPacket) => void;
addNodeInfo: (nodeInfo: Protobuf.NodeInfo) => void;
addUser: (user: Types.PacketMetadata<Protobuf.User>) => void;
addPosition: (position: Types.PacketMetadata<Protobuf.Position>) => void;
addConnection: (connection: Types.ConnectionType) => void;
addMessage: (message: MessageWithState) => void;
addWaypointMessage: (message: WaypointIDWithState) => void;
addDeviceMetadataMessage: (metadata: Types.DeviceMetadataPacket) => void;
addDeviceMetadataMessage: (
metadata: Types.PacketMetadata<Protobuf.DeviceMetadata>
) => void;
setMessageState: (
channelIndex: number,
messageId: number,
@ -92,6 +100,7 @@ export interface Device {
setQRDialogOpen: (open: boolean) => void;
setShutdownDialogOpen: (open: boolean) => void;
setRebootDialogOpen: (open: boolean) => void;
processPacket: (data: processPacketParams) => void;
}
export interface DeviceState {
@ -237,27 +246,13 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
})
);
},
setMetrics: (metrics: Types.TelemetryPacket) => {
setMetrics: (metrics: Types.PacketMetadata<Protobuf.Telemetry>) => {
set(
produce<DeviceState>((draft) => {
const device = draft.devices.get(id);
let node = device?.nodes.find(
(n) => n.data.num === metrics.packet.from
(n) => n.data.num === metrics.from
);
if (device && !node) {
node = {
data: Protobuf.NodeInfo.create({
num: metrics.packet.from,
snr: metrics.packet.rxSnr,
lastHeard: Date.now()
}),
metadata: undefined,
deviceMetrics: [],
environmentMetrics: []
};
device.nodes.push(node);
}
if (node) {
switch (metrics.data.variant.oneofKind) {
case "deviceMetrics":
@ -283,19 +278,13 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
}
node.deviceMetrics.push({
...metrics.data.variant.deviceMetrics,
timestamp:
metrics.packet.rxTime === 0
? new Date()
: new Date(metrics.packet.rxTime * 1000)
timestamp: metrics.rxTime
});
break;
case "environmentMetrics":
node.environmentMetrics.push({
...metrics.data.variant.environmentMetrics,
timestamp:
metrics.packet.rxTime === 0
? new Date()
: new Date(metrics.packet.rxTime * 1000)
timestamp: metrics.rxTime
});
break;
}
@ -364,30 +353,18 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
set(
produce<DeviceState>((draft) => {
const device = draft.devices.get(id);
if (device) {
const node = device.nodes.find(
(node) => node.data.num === nodeInfo.data.num
);
if (node) {
node.data = nodeInfo.data;
node.data.lastHeard =
nodeInfo.packet.rxTime !== 0
? nodeInfo.packet.rxTime * 1000
: Date.now();
} else {
device.nodes.push({
data: Protobuf.NodeInfo.create({
...nodeInfo.data,
lastHeard:
nodeInfo.packet.rxTime !== 0
? nodeInfo.packet.rxTime * 1000
: Date.now()
}),
metadata: undefined,
deviceMetrics: [],
environmentMetrics: []
});
}
const node = device?.nodes.find(
(node) => node.data.num === nodeInfo.num
);
if (node) {
node.data = nodeInfo;
} else {
device?.nodes.push({
data: nodeInfo,
metadata: undefined,
deviceMetrics: [],
environmentMetrics: []
});
}
})
);
@ -416,29 +393,11 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
set(
produce<DeviceState>((draft) => {
const device = draft.devices.get(id);
if (device) {
const node = device.nodes.find(
(node) => node.data.num === user.packet.from
);
if (node) {
node.data.user = user.data;
// if (action.payload.packet.rxTime) {
// node.data.lastHeard = new Date(
// action.payload.packet.rxTime * 1000,
// ).getTime();
// }
} else {
device.nodes.push({
data: Protobuf.NodeInfo.create({
num: user.packet.from,
snr: user.packet.rxSnr,
user: user.data
}),
metadata: undefined,
deviceMetrics: [],
environmentMetrics: []
});
}
const node = device?.nodes.find(
(node) => node.data.num === user.from
);
if (node) {
node.data.user = user.data;
}
})
);
@ -447,28 +406,11 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
set(
produce<DeviceState>((draft) => {
const device = draft.devices.get(id);
if (device) {
const node = device.nodes.find(
(node) => node.data.num === position.packet.from
);
if (node) {
node.data.position = position.data;
// if (action.payload.packet.rxTime) {
// node.data.lastHeard = new Date(
// action.payload.packet.rxTime * 1000,
// ).getTime();
// }
} else {
device.nodes.push({
data: Protobuf.NodeInfo.create({
num: position.packet.from,
position: position.data
}),
metadata: undefined,
deviceMetrics: [],
environmentMetrics: []
});
}
const node = device?.nodes.find(
(node) => node.data.num === position.from
);
if (node) {
node.data.position = position.data;
}
})
);
@ -487,11 +429,9 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
set(
produce<DeviceState>((draft) => {
const device = draft.devices.get(id);
if (device) {
device.channels
.find((ch) => ch.config.index === message.packet.channel)
?.messages.push(message);
}
device?.channels
.find((ch) => ch.config.index === message.channel)
?.messages.push(message);
})
);
},
@ -499,11 +439,9 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
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);
}
device?.channels
.find((ch) => ch.config.index === waypointID.channel)
?.messages.push(waypointID);
})
);
},
@ -511,15 +449,11 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
set(
produce<DeviceState>((draft) => {
const device = draft.devices.get(id);
if (device) {
const node = device.nodes.find(
(n) => n.data.num === metadata.packet.from
);
if (node) {
node.metadata = metadata.data;
} else {
console.log("Node not found!");
}
const node = device?.nodes.find(
(n) => n.data.num === metadata.from
);
if (node) {
node.metadata = metadata.data;
}
})
);
@ -537,7 +471,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
(ch) => ch.config.index === channelIndex
);
const message = channel?.messages.find(
(msg) => msg.packet.id === messageId
(msg) => msg.id === messageId
);
if (message) {
message.state = state;
@ -584,6 +518,36 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
}
})
);
},
processPacket(data: processPacketParams) {
set(
produce<DeviceState>((draft) => {
const device = draft.devices.get(id);
if (!device) {
return;
}
const node = device.nodes.find((n) => n.data.num === data.from);
if (!node) {
device.nodes.push({
data: Protobuf.NodeInfo.create({
num: data.from,
lastHeard: data.time,
snr: data.snr
}),
metadata: undefined,
deviceMetrics: [],
environmentMetrics: []
});
return;
} else {
node.data = {
...node.data,
lastHeard: data.time,
snr: data.snr
};
}
})
);
}
});
})

20
src/core/subscriptions.ts
View File

@ -65,7 +65,7 @@ export const subscribeAll = (
device.addWaypoint(data);
device.addWaypointMessage({
waypointID: data.id,
state: rest.packet.from !== myNodeNum ? "ack" : "waiting",
state: rest.from !== myNodeNum ? "ack" : "waiting",
...rest
});
});
@ -84,7 +84,7 @@ export const subscribeAll = (
});
connection.events.onNodeInfoPacket.subscribe((nodeInfo) => {
toast(`New Node Discovered: ${nodeInfo.data.user?.shortName ?? "UNK"}`, {
toast(`New Node Discovered: ${nodeInfo.user?.shortName ?? "UNK"}`, {
icon: "🔎"
});
device.addNodeInfo(nodeInfo);
@ -92,26 +92,34 @@ export const subscribeAll = (
connection.events.onChannelPacket.subscribe((channel) => {
device.addChannel({
config: channel.data,
config: channel,
lastInterraction: new Date(),
messages: []
});
});
connection.events.onConfigPacket.subscribe((config) => {
device.setConfig(config.data);
device.setConfig(config);
});
connection.events.onModuleConfigPacket.subscribe((moduleConfig) => {
device.setModuleConfig(moduleConfig.data);
device.setModuleConfig(moduleConfig);
});
connection.events.onMessagePacket.subscribe((messagePacket) => {
device.addMessage({
...messagePacket,
state: messagePacket.packet.from !== myNodeNum ? "ack" : "waiting"
state: messagePacket.from !== myNodeNum ? "ack" : "waiting"
});
});
connection.events.onPendingSettingsChange.subscribe((state) => {
device.setPendingSettingsChanges(state);
});
connection.events.onMeshPacket.subscribe((meshPacket) => {
device.processPacket({
from: meshPacket.from,
snr: meshPacket.rxSnr,
time: meshPacket.rxTime
});
});
};

6
src/pages/Peers.tsx
View File

@ -12,6 +12,7 @@ import {
EllipsisHorizontalIcon
} from "@heroicons/react/24/outline";
import { Protobuf } from "@meshtastic/meshtasticjs";
import TimeAgo from "timeago-react";
export const PeersPage = (): JSX.Element => {
const { connection, nodes } = useDevice();
@ -98,7 +99,10 @@ export const PeersPage = (): JSX.Element => {
)}
</td>
<td className="whitespace-nowrap py-2 text-sm text-textSecondary">
{new Date(node.data.lastHeard).toLocaleTimeString()}
<TimeAgo
datetime={node.data.lastHeard * 1000}
opts={{ minInterval: 10 }}
/>
</td>
<td className="whitespace-nowrap py-2 text-sm text-textSecondary">
<Mono>{node.data.snr}db</Mono>

Write Preview
Loading…
Cancel
Save