Module: support button, new rows, nested tables

Docs
====
- some changes

UI
==
- MultiInput: add button
- Array.svelte: add localDefinition - WIP
- Module.svelte: remove Array bind value - WIP

Server
=====
- FileService: add TAG
- Module: add TAG, UpdatedItem: replace index by getParendIndex/Name , compareRecursive: refactor to catch more cases
- ModuleAnimations: add right fields to scripts array, refactored onUpdate

Author: ewowi

docs/custom/module/animations.md

@@ -17,12 +17,12 @@
 
 ## Technical
 
-* See [Modules](https://moonmodules.org/MoonLight/custom/modules/)
+* See [Modules](../modules/)
 
 ### Server
 
-[Instances.h](https://github.com/MoonModules/MoonLight/blob/main/lib/framework/Instances.h) and [Instances.cpp](https://github.com/MoonModules/MoonLight/blob/main/lib/framework/Instances.cpp)
+[ModuleAnimations.h](/src/custom/ModuleAnimations.h)
 
 ### UI
 
-[Instances.svelte](https://github.com/MoonModules/MoonLight/blob/main/interface/src/routes/system/status/Instances.svelte)
+Generated

docs/custom/module/demo.md

@@ -6,12 +6,12 @@
 
 ## Technical
 
-* See [Modules](https://moonmodules.org/MoonLight/custom/modules/)
+* See [Modules](../modules/)
 
 ### Server
 
-[Instances.h](https://github.com/MoonModules/MoonLight/blob/main/lib/framework/Instances.h) and [Instances.cpp](https://github.com/MoonModules/MoonLight/blob/main/lib/framework/Instances.cpp)
+[ModuleDemo.h](/src/custom/ModuleDemo.h)
 
 ### UI
 
-[Instances.svelte](https://github.com/MoonModules/MoonLight/blob/main/interface/src/routes/system/status/Instances.svelte)
+Generated

docs/custom/modules.md

@@ -17,7 +17,7 @@ See [Demo](https://moonmodules.org/MoonLight/custom/module/demo/) and [Animation
     * This name will be used to set up http rest api and webserver sockets
     * See [ModuleDemo.h](https://github.com/ewowi/MoonBase/blob/main/src/custom/ModuleDemo.h)
 
-```
+```cpp
 class ModuleDemo : public Module
 {
 public:
@@ -26,7 +26,7 @@ ModuleDemo(PsychicHttpServer *server
       , ESP32SvelteKit *sveltekit
       , FilesService *filesService
     ) : Module("demo", server, sveltekit, filesService) {
-        ESP_LOGD("", "ModuleDemo::constructor");
+        ESP_LOGD(TAG, "ModuleDemo::constructor");
     }
 }
 ```
@@ -36,7 +36,7 @@ ModuleDemo(PsychicHttpServer *server
     * Generate the UI
     * Initialy create the module data
 
-```
+```cpp
 void setupDefinition(JsonArray root) override{
     JsonObject property;
     JsonArray details;
@@ -62,24 +62,27 @@ void setupDefinition(JsonArray root) override{
     * struct UpdatedItem defines the update (parent property, name of property, value and index (in case of multiple records)
     * This is run in the httpd / webserver task. To run it in the main (application task use runInLoopTask - see [ModuleAnimations](https://github.com/ewowi/MoonBase/blob/main/src/custom/ModuleAnimations.h))
 
-```
+```cpp
 void onUpdate(UpdatedItem updatedItem) override
 {
-  if (updatedItem.name == "lightsOn" || updatedItem.name == "brightness") {
-      ESP_LOGD("", "handle %s.%s[%d] %s", updatedItem.parent.c_str(), updatedItem.name.c_str(), updatedItem.index, updatedItem.value.as<String>());
-      FastLED.setBrightness(_state.data["lightsOn"]?_state.data["brightness"]:0);
-  } else if (updatedItem.parent == "nodes" && updatedItem.name == "animation") {    
-      ESP_LOGD("", "handle %s.%s[%d] %s", updatedItem.parent.c_str(), updatedItem.name.c_str(), updatedItem.index, _state.data["nodes"][updatedItem.index]["animation"].as<String>().c_str());
-      animation = _state.data["nodes"][updatedItem.index]["animation"].as<String>();
-      compileAndRun(animation);
-  } else
-      ESP_LOGD("", "no handle for %s.%s[%d] %s (%d %s)", updatedItem.parent.c_str(), updatedItem.name.c_str(), updatedItem.index, updatedItem.value.as<String>().c_str(), _state.data["driverOn"].as<bool>(), _state.data["nodes"][0]["animation"].as<String>());
-}
+    void onUpdate(UpdatedItem updatedItem) override
+    {
+        if (updatedItem.name == "lightsOn" || updatedItem.name == "brightness") {
+            ESP_LOGD(TAG, "handle %s.%s = %s", updatedItem.parent.c_str(), updatedItem.name.c_str(), updatedItem.value.as<String>());
+            FastLED.setBrightness(_state.data["lightsOn"]?_state.data["brightness"]:0);
+        } else if (updatedItem.getParentName() == "nodes" && updatedItem.name == "animation") {    
+            int index = updatedItem.getParentIndex();
+            animation = _state.data["nodes"][index]["animation"].as<String>();
+            ESP_LOGD(TAG, "handle %s.%s = %s", updatedItem.parent.c_str(), updatedItem.name.c_str(), animation.c_str());
+            compileAndRun(animation);
+        } else
+            ESP_LOGD(TAG, "no handle for %s.%s = %s", updatedItem.parent.c_str(), updatedItem.name.c_str(), updatedItem.value.as<String>().c_str());
+    }
 ```
 
 * Add the module in [main.cpp](https://github.com/ewowi/MoonBase/blob/main/src/main.cpp)
 
-```
+```cpp
 ModuleDemo moduleDemo = ModuleDemo(&server, &esp32sveltekit, &filesService);
 ...
 moduleDemo.begin();
@@ -89,7 +92,7 @@ moduleDemo.loop();
 
 * Add the module in [menu.svelte](https://github.com/ewowi/MoonBase/blob/main/interface/src/routes/menu.svelte) (this will be automated in the future)
 
-```
+```ts
 submenu: [
    {
       title: 'Module Demo',

docs/esp32sveltekit.md

@@ -7,8 +7,8 @@ hide:
 # ESP32 SvelteKit - Create Amazing IoT Projects
 
 <div style="flex">
-<img src="./media/Screenshot_light.png" style="height:480px"> 
-<img src="./media/Screenshot_mobile.png" style="height:480px"> 
+<img src="../media/Screenshot_light.png" style="height:480px"> 
+<img src="../media/Screenshot_mobile.png" style="height:480px"> 
 </div>
 
 A simple and extensible framework for ESP32 based IoT projects with a feature-rich, beautiful, and responsive front-end build with [Sveltekit](https://kit.svelte.dev/), [TailwindCSS](https://tailwindcss.com/) and [DaisyUI](https://daisyui.com/). This is a project template to get you started in no time backed by a powerful back end service, an amazing front end served from the ESP32 and an easy to use build chain to get everything going.

docs/general/gettingstarted.md

@@ -47,6 +47,7 @@
 * Read the [ESP32 Sveltekit docs](https://moonmodules.org/MoonLight/eskIndex/) (Latest version (Svelte 5) here [ESP32 Sveltekit docs](https://theelims.github.io/ESP32-sveltekit/))
 * Read [Customizing Sveltekit](https://moonmodules.org/MoonLight/general/customizingsveltekit/)
 * UI dev: configure vite.config.ts, go to interface folder, npm install, npm run dev. A local webserver starts on localhost. UI changes will directly be shown via this webserver
+* Changes made to the UI are not always visible in the browser, issue with caching / max-age (WIP), clear the browser cache to see latest UI.
 * Want to make changes: fork the repo and submit pull requests
 
 ## MoonBase specific

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

@@ -41,11 +41,14 @@
 
     let lastIndex: number = -1;
 
-    console.log("Array property", property, data, definition, changeOnInput, data[property.name], value1, value2);
+    let localDefinition: any = $state([]);
+
+    // console.log("Array property", property, data, definition, changeOnInput, data[property.name], value1, value2);
     for (let i = 0; i < definition.length; i++) {
         // console.log("addItem def", propertyName, property)
         if (property.name == definition[i].name) {
-            console.log("def[i]", property.name, definition[i].n)
+            localDefinition = definition[i].n;
+            console.log("localDefinition", property.name, definition[i].n)
         }
     }
 
@@ -66,10 +69,10 @@
 		dataEditable = {};
 
 		//set properties with their defaults
-		for (let i = 0; i < definition.length; i++) {
-			let property = definition[i];
-			// console.log("addItem def", propertyName, property)
+		for (let i = 0; i < localDefinition.length; i++) {
+			let property = localDefinition[i];
 			if (property.name == propertyName) {
+                console.log("addItem def", propertyName, property)
 				for (let i=0; i < property.n.length; i++) {
 					let propertyN = property.n[i];
 					// console.log("propertyN", propertyN)
@@ -80,7 +83,7 @@
 	}
 
 	function handleEdit(propertyName: string, index: number) {
-		console.log("handleEdit", propertyName, index)
+		console.log("handleEdit", propertyName, index, data[propertyName][index])
         if (lastIndex != index) {
             showEditor = true;
             lastIndex = index;
@@ -196,7 +199,7 @@
                 </div>
             {:else if propertyN.type == "array"}
                 <label for="{propertyN.name}">{propertyN.name}</label>
-                <Array property={propertyN} bind:value1={data[propertyN.name]} value2={data} data={dataEditable} definition={definition} onChange={onChange} changeOnInput={changeOnInput}></Array>
+                <Array property={propertyN} bind:value1={data[propertyN.name]} value2={data} data={dataEditable} definition={localDefinition} onChange={onChange} changeOnInput={changeOnInput}></Array>
             {/if}
         {/each}
     {/if}

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

@@ -135,7 +135,7 @@
         on:input={(event:any) => {if (changeOnInput) onChange(event)}}
     />
 {:else if property.type == "button"}
-    <button class="btn btn-primary" type="button" on:click={onChange}
+    <button class="btn btn-primary" type="button" on:click={(event:any) => {if (value==null) value = 1; else value++; onChange(event)}}
     >{property.name}</button
     >
 {:else}

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

@@ -35,7 +35,7 @@
 				}
 			});
 			definition = await response.json();
-			console.log("definition", definition)
+			// console.log("definition", definition)
 		} catch (error) {
 			console.error('Error:', error);
 		}
@@ -95,6 +95,7 @@
 	function inputChanged() {
 		if (modeWS) {
 			let moduleName = page.url.searchParams.get('module')||'';
+			console.log(moduleName, data);
 			socket.sendEvent(moduleName, data)
 		} else {
 			changed = true;
@@ -146,7 +147,7 @@
 								<MultiInput property={property} bind:value={data[property.name]} onChange={inputChanged} changeOnInput={!modeWS}></MultiInput>
 							</div>
 						{:else if property.type == "array"}
-							<Array property={property} bind:value1={data[property.name]} value2={data[property.name]} data={data} definition={definition} onChange={inputChanged} changeOnInput={!modeWS}></Array>
+							<Array property={property} value2={data[property.name]} data={data} definition={definition} onChange={inputChanged} changeOnInput={!modeWS}></Array>
 						{/if}
 					{/each}
 				</div>