Skip to content

Commit

Permalink
fix node neighbors, update some styling on the main node page
Browse files Browse the repository at this point in the history
  • Loading branch information
@daviesgeek
daviesgeek committed Sep 11, 2024
1 parent 902d51e commit 766400c
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 72 deletions.
67 changes: 36 additions & 31 deletions frontend/src/pages/Neighbors.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { formatDuration, formatISO, intervalToDuration } from "date-fns";
import { useMemo } from "react";
import { formatISO } from "date-fns";
import { useEffect, useMemo, useState } from "react";
import { Link } from "react-router-dom";

import { Avatar } from "../components/Avatar";
import { DateToSince } from "../components/DateSince";
import { HeardBy } from "../components/HeardBy";
import { useGetNodesQuery } from "../slices/apiSlice";
import { convertNodeIdFromIntToHex } from "../utils/convertNodeId";
Expand All @@ -17,6 +19,15 @@ export const Neighbors = () => {
[nodes]
);

const [currentDate, setCurrentDate] = useState(new Date());

useEffect(() => {
const interval = setInterval(() => {
setCurrentDate(new Date());
}, 3000);
return () => clearInterval(interval);
}, []);

if (!nodes) {
return <div>Loading...</div>;
}
Expand Down Expand Up @@ -67,25 +78,25 @@ export const Neighbors = () => {
</tr>
</thead>
<tbody>
{Object.entries(activeNodesWithNeighbors).map(([id, node]) => {
const sanitizedId = id.replace("!", "");
{activeNodesWithNeighbors.map((node) => {
const id = node.id.replace("!", "");
return (
<tr key={id}>
<tr key={`neighbors-${id}`}>
<td
className="p-1 border border-gray-400"
align="center"
valign="middle"
>
<a href={`node_${sanitizedId}.html`}>
<Avatar id={sanitizedId} size={16} className="mb-1" />
</a>
<Link to={`/nodes/${id}`}>
<Avatar id={id} size={16} className="mb-1" />
</Link>
</td>
<td
className="p-1 border border-gray-400"
style={{ color: node.shortname === "UNK" ? "#777" : "#000" }}
align="center"
>
<a href={`node_${sanitizedId}.html`}>{node.shortname}</a>
<Link to={`/nodes/${id}`}>{node.shortname}</Link>
</td>
<td
className="p-1 border border-gray-400"
Expand All @@ -98,17 +109,17 @@ export const Neighbors = () => {
<td className="p-0 border border-gray-400" valign="top">
<table className="table-auto min-w-full">
<tbody className="divide-y divide-dashed divide-gray-400">
{node.neighborinfo?.neighbors?.map(
(neighbor, index) => (
// eslint-disable-next-line react/no-array-index-key
<tr key={`neighbors-${index}`}>
{node.neighborinfo?.neighbors?.map((neighbor) => {
const neighborIdHex = convertNodeIdFromIntToHex(
neighbor.node_id
);
return (
<tr key={`neighbors-${node.id}-${neighborIdHex}`}>
<td className="w-1/3 p-1 text-nowrap">
{nodes[neighbor.node_id] ? (
<a
href={`node_${nodes[neighbor.node_id].id}.html`}
>
{nodes[neighbor.node_id].shortname}
</a>
{nodes[neighborIdHex] ? (
<Link to={`/nodes/${id}`}>
{nodes[neighborIdHex].shortname}
</Link>
) : (
<span className="text-gray-500">UNK</span>
)}
Expand All @@ -121,8 +132,8 @@ export const Neighbors = () => {
`${neighbor.distance} km`}
</td>
</tr>
)
)}
);
})}
</tbody>
</table>
</td>
Expand Down Expand Up @@ -175,16 +186,10 @@ export const Neighbors = () => {
className="hidden xl:table-cell p-1 text-nowrap border border-gray-400"
align="right"
>
{formatDuration(
intervalToDuration({
start: new Date(node.last_seen),
end: new Date(),
}),
{
format: ["seconds"],
}
)}
secs
<DateToSince
date={node.last_seen}
currentDate={currentDate}
/>
</td>
</tr>
);
Expand Down
99 changes: 58 additions & 41 deletions frontend/src/pages/Node.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -215,7 +215,9 @@ export const Node = () => {
case 10:
return "ATAK Tracker";
default:
return "Unknown";
return (
<span style={{ color: "#777" }}>Unknown</span>
);
}
})()
: "Client"}
Expand All @@ -228,29 +230,35 @@ export const Node = () => {
<td className="p-1">
{node.position &&
node.position.latitude_i &&
node.position.longitude_i
? `${node.position.longitude_i / 1e7}, ${node.position.latitude_i / 1e7}`
: "Unknown"}
node.position.longitude_i ? (
`${node.position.longitude_i / 1e7}, ${node.position.latitude_i / 1e7}`
) : (
<span style={{ color: "#777" }}>Unknown</span>
)}
</td>
</tr>
<tr>
<th className="p-1" align="left">
Location
</th>
<td className="p-1">
{node.position && node.position.geocoded
? node.position.geocoded.display_name
: "Unknown"}
{node.position && node.position.geocoded ? (
node.position.geocoded.display_name
) : (
<span style={{ color: "#777" }}>Unknown</span>
)}
</td>
</tr>
<tr>
<th className="p-1" align="left">
Altitude
</th>
<td className="p-1">
{node.position && node.position.altitude
? `${node.position.altitude} m`
: "Unknown"}
{node.position && node.position.altitude ? (
`${node.position.altitude} m`
) : (
<span style={{ color: "#777" }}>Unknown</span>
)}
</td>
</tr>
<tr>
Expand All @@ -265,9 +273,11 @@ export const Node = () => {
{calculateDistanceBetweenNodes(
nodes[config?.server?.node_id ?? ""],
node
) !== null
? `${calculateDistanceBetweenNodes(nodes[config?.server?.node_id ?? ""], node)} km`
: "Unknown"}
) !== null ? (
`${calculateDistanceBetweenNodes(nodes[config?.server?.node_id ?? ""], node)} km`
) : (
<span style={{ color: "#777" }}>Unknown</span>
)}
</td>
</tr>
<tr>
Expand All @@ -290,7 +300,9 @@ export const Node = () => {
className="p-1 text-nowrap"
title={node.last_seen || "Unknown"}
>
{node.last_seen || "Unknown"}
{node.last_seen || (
<span style={{ color: "#777" }}>Unknown</span>
)}
</td>
</tr>
</tbody>
Expand All @@ -303,32 +315,35 @@ export const Node = () => {
<tbody className="divide-y divide-dashed divide-gray-200">
{node.neighborinfo ? (
node.neighborinfo?.neighbors?.map((neighbor, index) => {
const nid = convertNodeIdFromIntToHex(neighbor.node_id);
const nnode = nodes[nid] || null;
return (
// eslint-disable-next-line react/no-array-index-key
<tr key={`neighbors-${index}`}>
<td className="w-1/3 p-1 text-nowrap">
{nnode ? (
<Link to={`/nodes/${nid}`}>{nnode.shortname}</Link>
) : (
<span className="text-gray-500">UNK</span>
)}
</td>
<td className="p-1 text-nowrap">SNR: {neighbor.snr}</td>
<td className="p-1 text-nowrap" align="right">
{nnode && calculateDistanceBetweenNodes(nnode, node)
? `${calculateDistanceBetweenNodes(nnode, node)} km`
: ""}
</td>
</tr>
);
})
) : (
<tr>
<td className="p-1" colSpan={3}>No neighbors detected. Does this node publish Neighbor Info?</td>
</tr>
)}
const nid = convertNodeIdFromIntToHex(neighbor.node_id);
const nnode = nodes[nid] || null;
return (
// eslint-disable-next-line react/no-array-index-key
<tr key={`neighbors-${index}`}>
<td className="w-1/3 p-1 text-nowrap">
{nnode ? (
<Link to={`/nodes/${nid}`}>{nnode.shortname}</Link>
) : (
<span className="text-gray-500">UNK</span>
)}
</td>
<td className="p-1 text-nowrap">SNR: {neighbor.snr}</td>
<td className="p-1 text-nowrap" align="right">
{nnode && calculateDistanceBetweenNodes(nnode, node)
? `${calculateDistanceBetweenNodes(nnode, node)} km`
: ""}
</td>
</tr>
);
})
) : (
<tr>
<td className="p-1" colSpan={3}>
No neighbors detected. Does this node publish Neighbor
Info?
</td>
</tr>
)}
</tbody>
</table>
</div>
Expand All @@ -351,7 +366,9 @@ export const Node = () => {
<tr key={`neighbors-heard-by-${index}-${subIndex}`}>
<td className="w-1/3 p-1 text-nowrap">
{iid in nodes ? (
<Link to={`/nodes/${iid}`}>{nodes[iid].shortname}</Link>
<Link to={`/nodes/${iid}`}>
{nodes[iid].shortname}
</Link>
) : (
<span className="text-gray-500">UNK</span>
)}
Expand Down

0 comments on commit 766400c

Please sign in to comment.