Able to remove from List and shows in real time

app/admin_panel/js/behaviour_tree.js

@@ -30,10 +30,18 @@ function updateBehaviourTreeList(behaviour_tree_list) {
 }
 
 async function saveBehaviourTree(_event, args) {
+    const uuid = crypto.randomUUID();
     const name = args.name;
     const code = args.code;
     let behaviour_tree_list = getBehaviourTreeList();
-    updateBehaviourTreeList(behaviour_tree_list.concat({name: name, code: code}));
+    updateBehaviourTreeList(behaviour_tree_list.concat({uuid: uuid, name: name, code: code}));
+}
+
+async function removeBehaviourTree(_event, args) {
+    const uuid = args.uuid;
+    let behaviour_tree_list = getBehaviourTreeList();
+    behaviour_tree_list = behaviour_tree_list.filter((behaviour_tree) => behaviour_tree.uuid !== uuid);
+    updateBehaviourTreeList(behaviour_tree_list);
 }
 
 ipcMain.handle('sendBehaviourTree', sendBehaviourTree);
@@ -42,11 +50,13 @@ ipcMain.handle('stopBehaviourTree', stopBehaviourTree);
 
 ipcMain.handle('getBehaviourTreeList', getBehaviourTreeList);
 ipcMain.handle('saveBehaviourTree', saveBehaviourTree);
+ipcMain.handle('removeBehaviourTree', removeBehaviourTree);
 
 module.exports = {
     sendBehaviourTree: sendBehaviourTree,
     startBehaviourTree: startBehaviourTree,
     stopBehaviourTree: stopBehaviourTree,
     getBehaviourTreeList: getBehaviourTreeList,
     saveBehaviourTree: saveBehaviourTree,
+    removeBehaviourTree: removeBehaviourTree,
 }

app/admin_panel/js/main.js

@@ -80,7 +80,7 @@ const { websocket_server } = require('./websocket');
 const { closeWebSocketServer } = require('./websocket_events');
 const { selectRaspberryPi, unselectRaspberryPi, getRaspberryPiList, getSelectedRaspberryPi } = require('./raspberry_pi');
 const { getLocalIPList } = require('./device');
-const { sendBehaviourTree, startBehaviourTree, stopBehaviourTree, getBehaviourTreeList, saveBehaviourTree } = require('./behaviour_tree');
+const { sendBehaviourTree, startBehaviourTree, stopBehaviourTree, getBehaviourTreeList, saveBehaviourTree, removeBehaviourTree } = require('./behaviour_tree');
 
 function onClose() {
     closeWebSocketServer();

app/admin_panel/js/preload.js

@@ -25,6 +25,7 @@ const WINDOW_API = {
 
     getBehaviourTreeList: () => ipcRenderer.invoke("getBehaviourTreeList"),
     saveBehaviourTree: (/** @type {any} */ args) => ipcRenderer.invoke("saveBehaviourTree", args),
+    removeBehaviourTree: (/** @type {any} */ args) => ipcRenderer.invoke("removeBehaviourTree", args)
 }
 
 contextBridge.exposeInMainWorld("api", WINDOW_API)

app/admin_panel/src/lib/BehaviourTreeHandler.svelte

@@ -5,13 +5,9 @@
         behaviour_tree_xml_code,
         behaviour_tree_save_modal_code,
         show_behaviour_tree_save_modal,
-    } from "../store/behaviour_tree_code_store";
+        behaviour_tree_list,
+    } from "../store/behaviour_tree_store";
 
-    let behaviour_tree_list = []
-    async function main() {
-        behaviour_tree_list = await api.getBehaviourTreeList();
-    }
-    main()
 </script>
 
 <div class="w-full h-full bg-white dark:bg-gray-800">
@@ -26,14 +22,20 @@
     <Card
         class="w-full max-w-full h-full max-h-full overflow-scroll my-4 gap-y-2"
     >
-        {#each behaviour_tree_list as behaviour_tree}
-            <Card class="w-full max-w-full">
+        {#each $behaviour_tree_list as behaviour_tree}
+            <Card class="w-full max-w-full grid grid-rows-2">
                 <h3>
                     {behaviour_tree.name === "" ? "[Empty Name]" : behaviour_tree.name}
                 </h3>
-                <Button color="blue" on:click={()=>{
-                    $behaviour_tree_xml_code = behaviour_tree.code;
-                }}>Load</Button>
+                <div class="grid grid-cols-2 gap-1">
+                    <Button color="red" on:click={()=>{
+                        api.removeBehaviourTree({uuid: behaviour_tree.uuid});
+                        behaviour_tree_list.set($behaviour_tree_list.filter((item) => item.uuid !== behaviour_tree.uuid));
+                    }}>Remove</Button>
+                    <Button color="blue" on:click={()=>{
+                        $behaviour_tree_xml_code = behaviour_tree.code;
+                    }}>Load</Button>
+                </div>
             </Card>
         {/each}
     </Card>

app/admin_panel/src/lib/CodeBox.svelte

@@ -6,7 +6,7 @@
 
     import { node_hover, xml_schema } from "./CodeBox_Constants";
 
-    import { behaviour_tree_xml_code } from "../store/behaviour_tree_code_store";
+    import { behaviour_tree_xml_code } from "../store/behaviour_tree_store";
     import CodeMessagingBar from "./CodeMessagingBar.svelte";
 </script>
 

app/admin_panel/src/lib/CodeMessagingBar.svelte

@@ -1,7 +1,7 @@
 <script>
     import { selected_raspberry_pi_uuid } from "../store/raspberry_pi_store";
     import xmlFormat from "xml-formatter";
-    import { behaviour_tree_xml_code } from "../store/behaviour_tree_code_store";
+    import { behaviour_tree_xml_code } from "../store/behaviour_tree_store";
 
     /** @type {string} */
     let send_behaviour_tree_text = "Send Behaviour Tree";

app/admin_panel/src/lib/SaveBehaviourTreeModal.svelte

@@ -11,7 +11,8 @@
     import {
         show_behaviour_tree_save_modal,
         behaviour_tree_save_modal_code,
-    } from "../store/behaviour_tree_code_store";
+        behaviour_tree_list,
+    } from "../store/behaviour_tree_store";
 
     let behaviour_tree_name = "";
 </script>
@@ -50,6 +51,7 @@
                     code: $behaviour_tree_save_modal_code,
                 };
                 api.saveBehaviourTree(behaviour_tree_save_state);
+                behaviour_tree_list.set([...$behaviour_tree_list, behaviour_tree_save_state]);
             }}>Yes</Button
         >
         <Button color="alternative">No</Button>

app/admin_panel/src/routes/Home.svelte

@@ -111,7 +111,7 @@
                 </Pane>
             </Splitpanes>
         </Pane>
-        <Pane size={side_pane_size_1} minSize={13} maxSize={80}>
+        <Pane size={side_pane_size_1} minSize={17} maxSize={80}>
             <BehaviourTreeHandler />
         </Pane>
     </Splitpanes>

app/admin_panel/src/store/behaviour_tree_store.js

@@ -0,0 +1,14 @@
+import { writable } from 'svelte/store';
+
+export const behaviour_tree_xml_code = writable("");
+
+export const show_behaviour_tree_save_modal = writable(false);
+export const behaviour_tree_save_modal_code = writable("");
+
+export let behaviour_tree_list = writable([]);
+
+async function main() {
+    behaviour_tree_list.set(await api.getBehaviourTreeList());
+}
+
+main();

app/admin_panel/src/store/home_store.js

@@ -3,5 +3,5 @@ import { writable } from 'svelte/store';
 export const main_pane_size_0_store = writable(80);
 export const main_pane_size_1_store = writable(20);
 
-export const side_pane_size_0_store = writable(87);
-export const side_pane_size_1_store = writable(13);
+export const side_pane_size_0_store = writable(83);
+export const side_pane_size_1_store = writable(17);

app/backend/xml/move_and_turn.xml

@@ -0,0 +1,16 @@
+<BehaviourTree>
+    <Root>
+        <Selector>
+            <Sequence>
+                <Condition:SuccessOnAverageNearbyScan min_angle="45" max_angle="135" cm="33"/>
+                <Action:SetWheelDirection direction_type="Backward" wheel_type="Both"/>
+                <Action:SetSpeed speed="50" wheel_type="Both"/>
+                <Action:SetAngle angle="270" servo_type="FrontWheels"/>
+            </Sequence>
+            <Sequence>
+                <Action:SetWheelDirection direction_type="Forward" wheel_type="Both"/>
+                <Action:SetSpeed speed="30" wheel_type="Both"/>
+            </Sequence>
+        </Selector>
+    </Root>
+</BehaviourTree>