diff --git a/src/components/nodes/NodesList.vue b/src/components/nodes/NodesList.vue index 3bf6d70..884d8e1 100644 --- a/src/components/nodes/NodesList.vue +++ b/src/components/nodes/NodesList.vue @@ -8,13 +8,7 @@
- - - - - -
@@ -53,30 +47,38 @@ export default { GlobalState() { return GlobalState; }, - myNode() { - return this.nodes.find((node) => { + orderedNodes() { + + // get ordered nodes + var orderedNodes = this.nodesOrderedByLastHeard; + + // find our node in the list + const myNode = orderedNodes.find((node) => { return node.num === GlobalState.myNodeId; }); - }, - otherNodes() { - return this.nodes.filter((node) => { + + // remove our node from the list + orderedNodes = orderedNodes.filter((node) => { return node.num !== GlobalState.myNodeId; }); - }, - orderedNodes() { - return this.nodesOrderedByLastHeard; + + // add our node to the start of the list + orderedNodes.unshift(myNode); + + return orderedNodes; + }, nodesOrderedByName() { - // sort nodes by name asc - return this.otherNodes.sort((nodeA, nodeB) => { + // sort nodes by name asc (using a shallow copy to ensure it updates automatically) + return [...this.nodes].sort((nodeA, nodeB) => { const nodeALongName = this.getNodeLongName(nodeA.num); const nodeBLongName = this.getNodeLongName(nodeB.num); return nodeALongName.localeCompare(nodeBLongName); }); }, nodesOrderedByLastHeard() { - // sort nodes by last heard desc - return this.otherNodes.sort((nodeA, nodeB) => { + // sort nodes by last heard desc (using a shallow copy to ensure it updates automatically) + return [...this.nodes].sort((nodeA, nodeB) => { const nodeALastHeard = nodeA.lastHeard; const nodeBLastHeard = nodeB.lastHeard; return nodeBLastHeard - nodeALastHeard;