Module bindable data, detect url change in getState (onDestroy not cald)

UI
==
- SettingsCard: add data as bindable prop
- ObjectArray: change data to a bindable prop and pass as bindable recursively, remove value1 and value2
- Module.svelte: add socketOn/Off (instead of onMount, onDestroy, updateRecursive: create empty array if not exists

Server
=====
- Animations: only emit event if something changed

Author: ewowi

interface/src/lib/components/SettingsCard.svelte

@@ -5,6 +5,7 @@
 	interface Props {
 		open?: boolean;
 		collapsible?: boolean;
+		data?: any; //added by MM to pass through data to other components
 		icon?: import('svelte').Snippet;
 		title?: import('svelte').Snippet;
 		children?: import('svelte').Snippet;
@@ -13,6 +14,7 @@
 	let {
 		open = $bindable(true),
 		collapsible = true,
+		data = $bindable({}),
 		icon,
 		title,
 		children

interface/src/lib/components/custom/ArrayLight.svelte

@@ -12,7 +12,6 @@
 
 
 <script lang="ts">
-	import FileEdit from '$lib/components/custom/FileEdit.svelte';
 	import DragDropList, { VerticalDropZone, reorder, type DropEvent } from 'svelte-dnd-list';
 	import Add from '~icons/tabler/circle-plus';
 	import { user } from '$lib/stores/user';
@@ -24,10 +23,9 @@
 	import Delete from '~icons/tabler/trash';
 	import MultiInput from '$lib/components/custom/MultiInput.svelte';
 	import ObjectArray from '$lib/components/custom/ObjectArray.svelte';
-	import ArrayLight from '$lib/components/custom/ArrayLight.svelte';
     import {initCap} from '$lib/stores/custom_utilities';
 
-    let { property, data, definition, onChange, changeOnInput, value1=$bindable(), value2 } = $props();
+    let { property, data = $bindable(), definition, onChange, changeOnInput} = $props();
 
     let dataEditable: any = $state({});
 
@@ -200,7 +198,7 @@
                 </div>
             {:else if propertyN.type == "array"}
                 <label for="{propertyN.name}">{propertyN.name}</label>
-                <ObjectArray property={propertyN} bind:value1={data[propertyN.name]} value2={data} data={dataEditable} definition={localDefinition} onChange={onChange} changeOnInput={changeOnInput}></ObjectArray>
+                <ObjectArray property={propertyN} bind:data={dataEditable} definition={localDefinition} onChange={onChange} changeOnInput={changeOnInput}></ObjectArray>
             {/if}
         {/each}
     {/if}

interface/src/lib/components/custom/ObjectArray.svelte

@@ -8,7 +8,6 @@
 	import Help from '~icons/tabler/help';
 	import Cancel from '~icons/tabler/x';
 	import MultiInput from '$lib/components/custom/MultiInput.svelte';
-	import { onMount, onDestroy } from 'svelte';
 	import { socket } from '$lib/stores/socket';
 	import ObjectArray from '$lib/components/custom/ObjectArray.svelte';
     import {initCap} from '$lib/stores/custom_utilities';
@@ -20,10 +19,27 @@
 
 	const modeWS: boolean = true; //todo: make this an argument
 
+	// https://github.com/sveltejs/svelte/issues/14091
+	// https://www.reddit.com/r/sveltejs/comments/1atm5xw/detect_url_params_changes_in_sveltekit_2/
+	// let params = $state(page.url.searchParams)
+	// let mName = $derived(params.get('module'));
+	// didn't work
+	let oldName: string = "";//workaround for let params = $state(page.url.searchParams)
+
 	async function getState() {
 
 		let moduleName = page.url.searchParams.get('module') || '';
 
+		//workaround for let params = $state(page.url.searchParams)
+		if (moduleName != oldName) {
+			console.log("getState changed", moduleName);
+			if (oldName != "") {
+				socketOff(oldName);
+			}
+			oldName = moduleName;
+			socketOn(moduleName);
+		}
+
 		console.log("getState", '/rest/' + moduleName)
 
 		//load definition
@@ -112,6 +128,7 @@
 			} else {
 				if (Array.isArray(newData[key])) {
 					//loop over array
+					if (!oldData[key]) oldData[key] = []; //create an empty array
 					for (let i = 0; i < Math.max(oldData[key].length, newData[key].length); i++) {
 						if (oldData[key][i] == undefined) {
 							oldData[key][i] = newData[key][i]; //create new row if not existed, trigger reactiveness
@@ -138,27 +155,25 @@
 		updateRecursive(data, state);
 	};
 
-	onMount(() => {
+	//workaround for let params = $state(page.url.searchParams)
+	const socketOn = ((name: string) => {
 		if (modeWS) {
-			let moduleName = page.url.searchParams.get('module') || ''
-			console.log("onMount", moduleName);
-			socket.on(moduleName, handleState);
-			socket.on(moduleName + "RO", handleRO);
+			console.log("socketOn", name);
+			socket.on(name, handleState);
+			socket.on(name + "RO", handleRO);
 		}
 	});
-
-	onDestroy(() => {
+	const socketOff = ((name: string) => {
 		if (modeWS) {
-			let moduleName = page.url.searchParams.get('module') || ''
-			console.log("onDestroy", moduleName);
-			socket.off(moduleName, handleState);
-			socket.off(moduleName + "RO", handleRO);
+			console.log("socketOff", name);
+			socket.off(name, handleState);
+			socket.off(name + "RO", handleRO);
 		}
 	});
 
 </script>
 
-<SettingsCard collapsible={false}>
+<SettingsCard collapsible={false} bind:data={data}>
 	{#snippet icon()}
 		<Router  class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
 	{/snippet}
@@ -180,7 +195,7 @@
 								<MultiInput property={property} bind:value={data[property.name]} onChange={inputChanged} changeOnInput={!modeWS}></MultiInput>
 							</div>
 						{:else if property.type == "array"}
-							<ObjectArray property={property} value2={data[property.name]} data={data} definition={definition} onChange={inputChanged} changeOnInput={!modeWS}></ObjectArray>
+							<ObjectArray property={property} bind:data={data} definition={definition} onChange={inputChanged} changeOnInput={!modeWS}></ObjectArray>
 						{/if}
 					{/each}
 				</div>

interface/src/routes/moonbase/module/Module.svelte

@@ -109,7 +109,6 @@ void EventSocket::emitEvent(String event, JsonObject &jsonObject, const char *or
     // Only process valid events
     if (!isEventValid(event))
     {
-        ESP_LOGW("EventSocket", "Method tried to emit unregistered event: %s", event.c_str());
         ESP_LOGW(TAG, "Method tried to emit unregistered event: %s", event.c_str());
         return;
     }