add button to delete node from node info page

liamcottle · Nov 17, 2024 · aeb9df7 · aeb9df7
1 parent 3a7a995
commit aeb9df7
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/src/components/pages/NodePage.vue b/src/components/pages/NodePage.vue
@@ -7,11 +7,16 @@
                 <NodeIcon v-if="node" :node="node" class="mr-3"/>
             </template>
             <template v-slot:trailing>
-                <IconButton v-if="node" @click="onRequestNodeInfo(node)" class="mr-3">
+                <IconButton v-if="node" @click="onRequestNodeInfo(node)" class="mr-1">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                         <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
                     </svg>
                 </IconButton>
+                <IconButton v-if="node" @click="onDeleteNode(node)" class="mr-3">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+                    </svg>
+                </IconButton>
             </template>
         </AppBar>
 
@@ -126,6 +131,22 @@ export default {
         getRoleName: (roleId) => NodeUtils.getRoleName(roleId),
         getHardwareName: (roleId) => NodeUtils.getHardwareName(roleId),
         latLongIntegerToLatLong: (latLongInteger) => NodeUtils.latLongIntegerToLatLong(latLongInteger),
+        async onDeleteNode(node) {
+
+            // confirm user wants to remove this node
+            if(!confirm("Are you sure you want to forget this node?")){
+                return;
+            }
+
+            // go back to main page
+            this.$router.push({
+                name: "main",
+            });
+
+            // remove node
+            await NodeAPI.removeNodeByNum(node.num);
+
+        },
         onRequestNodeInfo(node) {
             NodeAPI.requestNodeInfo(node.num);
         },

diff --git a/src/js/NodeAPI.js b/src/js/NodeAPI.js
@@ -36,6 +36,16 @@ class NodeAPI {
 
     }
 
+    /**
+     * Removes the node from global state, and also tells the meshtastic device to remove the node.
+     * @param nodeId the node id to remove
+     * @returns {Promise<*>}
+     */
+    static async removeNodeByNum(nodeId) {
+        delete GlobalState.nodesById[nodeId];
+        return await GlobalState.connection.removeNodeByNum(nodeId);
+    }
+
 }
 
 export default NodeAPI;