Migrate config, migrate analysis plotselection

web/frontend/src/config/user/PlotColorScheme.svelte

@@ -19,21 +19,20 @@
         CardTitle,
     } from "@sveltestrap/sveltestrap";
     import { fade } from "svelte/transition";
-    import { createEventDispatcher } from 'svelte';
 
-    export let config;
-    export let message;
-    export let displayMessage;
-    export let cbmode = false;
+    /* Svelte 5 Props */
+    let {
+      config,
+      message = $bindable(),
+      displayMessage = $bindable(),
+      cbmode = $bindable(false),
+      updateSetting
+    } = $props();
 
-    const dispatch = createEventDispatcher();
-    function updateSetting(selector, target) {
-        dispatch('update-config', {
-            selector: selector,
-            target: target
-        });
-    }
-  
+    /* State Init */
+    let activeRow = $state(JSON.stringify(config?.plot_general_colorscheme));
+
+    /* Const Init */
     const colorschemes = {
       Default: [
         "#00bfff",
@@ -321,7 +320,6 @@
         "rgb(189,189,189)",
       ]
     }
-
 </script>
 
 <Row cols={1} class="p-2 g-2">
@@ -350,37 +348,34 @@
           <input type="hidden" name="key" value="plot_general_colorscheme" />
           <Table hover>
             <tbody>
-              {#each Object.entries(cbmode ? cvdschemes : colorschemes) as [name, rgbrow]}
-                <tr>
-                  <th scope="col">{name}</th>
-                  <td>
-                    {#if rgbrow.join(",") == config.plot_general_colorscheme}
+              {#key activeRow}
+                {#each Object.entries(cbmode ? cvdschemes : colorschemes) as [name, rgbrow]}
+                  <tr>
+                    <th scope="col">{name}</th>
+                    <td>
                       <input
                         type="radio"
                         name="value"
                         value={JSON.stringify(rgbrow)}
-                        checked
-                        on:click={() =>
-                          updateSetting("#colorscheme-form", "cs")}
+                        checked={activeRow == JSON.stringify(rgbrow)}
+                        onclick={(e) => {
+                          activeRow = JSON.stringify(rgbrow)
+                          updateSetting(e, {
+                            selector: "#colorscheme-form",
+                            target: "cs",
+                          });
+                        }}
                       />
-                    {:else}
-                      <input
-                        type="radio"
-                        name="value"
-                        value={JSON.stringify(rgbrow)}
-                        on:click={() =>
-                          updateSetting("#colorscheme-form", "cs")}
-                      />
-                    {/if}
-                  </td>
-                  <td>
-                    {#each rgbrow as rgb}
-                      <span class="color-dot" style="background-color: {rgb};"
-                      ></span>
-                    {/each}
-                  </td>
-                </tr>
-              {/each}
+                    </td>
+                    <td>
+                      {#each rgbrow as rgb}
+                        <span class="color-dot" style="background-color: {rgb};"
+                        ></span>
+                      {/each}
+                    </td>
+                  </tr>
+                {/each}
+              {/key}
             </tbody>
           </Table>
         </form>

web/frontend/src/config/user/PlotRenderOptions.svelte

@@ -19,33 +19,29 @@
         CardTitle,
     } from "@sveltestrap/sveltestrap";
     import { fade } from "svelte/transition";
-    import { createEventDispatcher } from 'svelte';
 
-    export let config;
-    export let message;
-    export let displayMessage;
-
-    const dispatch = createEventDispatcher();
-    function updateSetting(selector, target) {
-        dispatch('update-config', {
-            selector: selector,
-            target: target
-        });
-    }
+    /* Svelte 5 Props */
+    let {
+      config,
+      message = $bindable(),
+      displayMessage = $bindable(),
+      updateSetting
+    } = $props();
 </script>
 
 <Row cols={3} class="p-2 g-2">
     <!-- LINE WIDTH -->
     <Col
       ><Card class="h-100">
-        <!-- Important: Function with arguments needs to be event-triggered like on:submit={() => functionName('Some','Args')} OR no arguments and like this: on:submit={functionName} -->
         <form
           id="line-width-form"
           method="post"
           action="/frontend/configuration/"
           class="card-body"
-          on:submit|preventDefault={() =>
-            updateSetting("#line-width-form", "lw")}
+          onsubmit={(e) => updateSetting(e, {
+            selector: "#line-width-form",
+            target: "lw",
+          })}
         >
           <!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
           <CardTitle
@@ -90,8 +86,10 @@
           method="post"
           action="/frontend/configuration/"
           class="card-body"
-          on:submit|preventDefault={() =>
-            updateSetting("#plots-per-row-form", "ppr")}
+          onsubmit={(e) => updateSetting(e, {
+            selector: "#plots-per-row-form",
+            target: "ppr",
+          })}
         >
           <!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
           <CardTitle
@@ -136,8 +134,10 @@
           method="post"
           action="/frontend/configuration/"
           class="card-body"
-          on:submit|preventDefault={() =>
-            updateSetting("#backgrounds-form", "bg")}
+          onsubmit={(e) => updateSetting(e, {
+            selector: "#backgrounds-form",
+            target: "bg",
+          })}
         >
           <!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
           <CardTitle
@@ -180,8 +180,10 @@
           method="post"
           action="/frontend/configuration/"
           class="card-body"
-          on:submit|preventDefault={() =>
-            updateSetting("#colorblindmode-form", "cbm")}
+          onsubmit={(e) => updateSetting(e, {
+            selector: "#colorblindmode-form",
+            target: "cbm",
+          })}
         >
           <!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
           <CardTitle

web/frontend/src/config/user/UserOptions.svelte

@@ -22,16 +22,23 @@
         CardBody
     } from "@sveltestrap/sveltestrap";
     import { fade } from "svelte/transition";
-    import { createEventDispatcher } from 'svelte';
     import { fetchJwt } from "../../generic/utils.js";
 
-    export let config;
-    export let message;
-    export let displayMessage;
-    export let username;
-    export let isApi;
+    /* Svelte 5 Props */
+    let {
+      config,
+      message = $bindable(),
+      displayMessage = $bindable(),
+      username,
+      isApi,
+      updateSetting
+    } = $props();
 
-    let jwt = "";
+    /* State Init */
+    let jwt = $state("");
+    let displayCheck = $state(false);
+
+    /* Functions */
     function getUserJwt(username) {
         if (username) {
             const p = fetchJwt(username);
@@ -43,7 +50,6 @@
         }
     }
 
-    let displayCheck = false;
     function clipJwt() {
       displayCheck = true;
       // Navigator clipboard api needs a secure context (https)
@@ -71,14 +77,6 @@
         displayCheck = false;
       }, 1000);
     }
-
-    const dispatch = createEventDispatcher();
-    function updateSetting(selector, target) {
-        dispatch('update-config', {
-            selector: selector,
-            target: target
-        });
-    }
 </script>
 
 <Row cols={isApi ? 3 : 1} class="p-2 g-2">
@@ -90,8 +88,10 @@
         method="post"
         action="/frontend/configuration/"
         class="card-body"
-        on:submit|preventDefault={() =>
-          updateSetting("#paging-form", "pag")}
+        onsubmit={(e) => updateSetting(e, {
+          selector: "#paging-form",
+          target: "pag",
+        })}
       >
         <!-- Svelte 'class' directive only on DOMs directly, normal 'class="xxx"' does not work, so style-array it is. -->
         <CardTitle
@@ -137,7 +137,7 @@
             <CardBody>
                 <CardTitle>Generate JWT</CardTitle>
                 {#if jwt}
-                    <Button color="secondary" on:click={() => clipJwt()}>
+                    <Button color="secondary" onclick={() => clipJwt()}>
                         Copy JWT to Clipboard
                     </Button>
                     <p class="mt-2">
@@ -149,7 +149,7 @@
                         </p>
                     {/if}
                 {:else}
-                    <Button color="success" on:click={() => getUserJwt(username)}>
+                    <Button color="success" onclick={() => getUserJwt(username)}>
                         Generate JWT for '{username}'
                     </Button>
                     <p class="mt-2">