Migrate config, migrate analysis plotselection

web/frontend/src/Config.root.svelte

@@ -14,15 +14,18 @@
   import SupportSettings from "./config/SupportSettings.svelte";
   import AdminSettings from "./config/AdminSettings.svelte";
 
-  export let isAdmin;
+  /* Svelte 5 Props */
-  export let isSupport;
+  let {
-  export let isApi;
+    isAdmin,
-  export let username;
+    isSupport,
-  export let ncontent;
+    isApi,
+    username,
+    ncontent,
+  } = $props();
 </script>
 
 {#if isAdmin}
-  <Card style="margin-bottom: 1.5em;">
+  <Card style="margin-bottom: 1.5rem;">
     <CardHeader>
       <CardTitle class="mb-1">Admin Options</CardTitle>
     </CardHeader>
@@ -31,7 +34,7 @@
 {/if}
 
 {#if isSupport || isAdmin}
-  <Card style="margin-bottom: 1.5em;">
+  <Card style="margin-bottom: 1.5rem;">
     <CardHeader>
       <CardTitle class="mb-1">Support Options</CardTitle>
     </CardHeader>

web/frontend/src/analysis/PlotSelection.svelte

@@ -21,10 +21,14 @@
   } from "@sveltestrap/sveltestrap";
   import { gql, getContextClient, mutationStore } from "@urql/svelte";
 
-  export let availableMetrics;
+  /* Svelte 5 Props */
-  export let metricsInHistograms;
+  let {
-  export let metricsInScatterplots;
+    availableMetrics,
+    metricsInHistograms = $bindable(),
+    metricsInScatterplots = $bindable(),
+  } = $props();
 
+  /* Const Init */
   const client = getContextClient();
   const updateConfigurationMutation = ({ name, value }) => {
     return mutationStore({
@@ -38,11 +42,13 @@
     });
   };
 
-  let isHistogramConfigOpen = false,
+  /* State Init */
-    isScatterPlotConfigOpen = false;
+  let isHistogramConfigOpen = $state(false);
-  let selectedMetric1 = null,
+  let isScatterPlotConfigOpen = $state(false);
-    selectedMetric2 = null;
+  let selectedMetric1 = $state(null);
+  let selectedMetric2 = $state(null);
 
+  /* Functions */
   function updateConfiguration(data) {
     updateConfigurationMutation({
       name: data.name,
@@ -55,12 +61,12 @@
   }
 </script>
 
-<Button outline on:click={() => (isHistogramConfigOpen = true)}>
+<Button outline onclick={() => (isHistogramConfigOpen = true)}>
   <Icon name="" />
   Select Plots for Histograms
 </Button>
 
-<Button outline on:click={() => (isScatterPlotConfigOpen = true)}>
+<Button outline onclick={() => (isScatterPlotConfigOpen = true)}>
   <Icon name="" />
   Select Plots in Scatter Plots
 </Button>
@@ -78,7 +84,7 @@
             type="checkbox"
             bind:group={metricsInHistograms}
             value={metric}
-            on:change={() =>
+            onchange={() =>
               updateConfiguration({
                 name: "analysis_view_histogramMetrics",
                 value: metricsInHistograms,
@@ -91,7 +97,7 @@
     </ListGroup>
   </ModalBody>
   <ModalFooter>
-    <Button color="primary" on:click={() => (isHistogramConfigOpen = false)}>
+    <Button color="primary" onclick={() => (isHistogramConfigOpen = false)}>
       Close
     </Button>
   </ModalFooter>
@@ -112,7 +118,7 @@
             style="float: right;"
             outline
             color="danger"
-            on:click={() => {
+            onclick={() => {
               metricsInScatterplots = metricsInScatterplots.filter(
                 (p) => pair != p,
               );
@@ -146,7 +152,7 @@
       <Button
         outline
         disabled={selectedMetric1 == null || selectedMetric2 == null}
-        on:click={() => {
+        onclick={() => {
           metricsInScatterplots = [
             ...metricsInScatterplots,
             [selectedMetric1, selectedMetric2],
@@ -164,7 +170,7 @@
     </InputGroup>
   </ModalBody>
   <ModalFooter>
-    <Button color="primary" on:click={() => (isScatterPlotConfigOpen = false)}>
+    <Button color="primary" onclick={() => (isScatterPlotConfigOpen = false)}>
       Close
     </Button>
   </ModalFooter>

web/frontend/src/config/AdminSettings.svelte

@@ -12,13 +12,17 @@
   import Options from "./admin/Options.svelte";
   import NoticeEdit from "./admin/NoticeEdit.svelte";
 
-  export let ncontent;
+  /* Svelte 5 Props */
-
+  let { ncontent } = $props();
-  let users = [];
-  let roles = [];
 
+  /* Const Init*/
   const ccconfig = getContext("cc-config");
 
+  /* State Init */
+  let users = $state([]);
+  let roles = $state([]);
+
+  /* Functions */
   function getUserList() {
     fetch("/config/users/?via-ldap=false&not-just-user=true")
       .then((res) => res.json())
@@ -40,21 +44,22 @@
     getValidRoles();
   }
 
+  /* on Mount */
   onMount(() => initAdmin());
 </script>
 
 <Row cols={2} class="p-2 g-2">
   <Col class="mb-1">
-    <AddUser {roles} on:reload={getUserList} />
+    <AddUser {roles} reloadUser={() => getUserList()} />
   </Col>
   <Col class="mb-1">
-    <ShowUsers on:reload={getUserList} bind:users />
+    <ShowUsers reloadUser={() => getUserList()} bind:users />
   </Col>
   <Col>
-    <EditRole {roles} on:reload={getUserList} />
+    <EditRole {roles} reloadUser={() => getUserList()} />
   </Col>
   <Col>
-    <EditProject on:reload={getUserList} />
+    <EditProject reloadUser={() => getUserList()} />
   </Col>
   <Options config={ccconfig}/>
   <NoticeEdit {ncontent}/>

web/frontend/src/config/UserSettings.svelte

@@ -12,17 +12,26 @@
   import PlotRenderOptions from "./user/PlotRenderOptions.svelte";
   import PlotColorScheme from "./user/PlotColorScheme.svelte";
 
-  export let username
+  /* Svelte 5 Props */
-  export let isApi
+  let {
+    username,
+    isApi
+  } = $props();
 
+  /* Const Init */
   const ccconfig = getContext("cc-config");
-  let message = { msg: "", target: "", color: "#d63384" };
-  let displayMessage = false;
-  let cbmode = ccconfig?.plot_general_colorblindMode || false;
   
-  async function handleSettingSubmit(event) {
+  /* State Init */
-    const selector = event.detail.selector
+  let message = $state({ msg: "", target: "", color: "#d63384" });
-    const target = event.detail.target
+  let displayMessage = $state(false);
+  let cbmode = $state(ccconfig?.plot_general_colorblindMode || false);
+
+  /* Functions */
+  async function handleSettingSubmit(event, setting) {
+    event.preventDefault();
+
+    const selector = setting.selector
+    const target = setting.target
     let form = document.querySelector(selector);
     let formData = new FormData(form);
     try {
@@ -53,6 +62,6 @@
   }
 </script>
 
-<UserOptions config={ccconfig} {username} {isApi} bind:message bind:displayMessage on:update-config={(e) => handleSettingSubmit(e)}/>
+<UserOptions config={ccconfig} {username} {isApi} bind:message bind:displayMessage updateSetting={(e, newSetting) => handleSettingSubmit(e, newSetting)}/>
-<PlotRenderOptions config={ccconfig} bind:message bind:displayMessage on:update-config={(e) => handleSettingSubmit(e)}/>
+<PlotRenderOptions config={ccconfig} bind:message bind:displayMessage updateSetting={(e, newSetting) => handleSettingSubmit(e, newSetting)}/>
-<PlotColorScheme config={ccconfig} bind:cbmode bind:message bind:displayMessage on:update-config={(e) => handleSettingSubmit(e)}/>
+<PlotColorScheme config={ccconfig} bind:cbmode bind:message bind:displayMessage updateSetting={(e, newSetting) => handleSettingSubmit(e, newSetting)}/>

web/frontend/src/config/admin/AddUser.svelte

@@ -10,17 +10,19 @@
  
  <script>
   import { Button, Card, CardTitle } from "@sveltestrap/sveltestrap";
-  import { createEventDispatcher } from "svelte";
   import { fade } from "svelte/transition";
 
-  const dispatch = createEventDispatcher();
+  /* Svelte 5 Props */
+  let { roles, reloadUser } = $props();
 
-  let message = { msg: "", color: "#d63384" };
+  /* State Init */
-  let displayMessage = false;
+  let message = $state({ msg: "", color: "#d63384" });
+  let displayMessage = $state(false);
 
-  export let roles;
+  /* Functions */
+  async function handleUserSubmit(event) {
+    event.preventDefault();
     
-  async function handleUserSubmit() {
     let form = document.querySelector("#create-user-form");
     let formData = new FormData(form);
 
@@ -29,7 +31,7 @@
       if (res.ok) {
         let text = await res.text();
         popMessage(text, "#048109");
-        reloadUserList();
+        reloadUser();
         form.reset();
       } else {
         let text = await res.text();
@@ -47,10 +49,6 @@
       displayMessage = false;
     }, 3500);
   }
-
-  function reloadUserList() {
-    dispatch("reload");
-  }
 </script>
 
 <Card>
@@ -60,7 +58,7 @@
     action="/config/users/"
     class="card-body"
     autocomplete="off"
-    on:submit|preventDefault={handleUserSubmit}
+    onsubmit={(e) => handleUserSubmit(e)}
   >
     <CardTitle class="mb-3">Create User</CardTitle>
     <div class="mb-3">

web/frontend/src/config/admin/EditProject.svelte

@@ -7,15 +7,19 @@
 
 <script>
   import { Card, CardTitle, CardBody } from "@sveltestrap/sveltestrap";
-  import { createEventDispatcher } from "svelte";
   import { fade } from "svelte/transition";
 
-  const dispatch = createEventDispatcher();
+  /* Svelte 5 Props */
+  let { reloadUser } = $props();
 
-  let message = { msg: "", color: "#d63384" };
+  /* State Init */
-  let displayMessage = false;
+  let message = $state({ msg: "", color: "#d63384" });
+  let displayMessage = $state(false);
+
+  /* Functions */
+  async function handleAddProject(event) {
+    event.preventDefault();
 
-  async function handleAddProject() {
     const username = document.querySelector("#project-username").value;
     const project = document.querySelector("#project-id").value;
 
@@ -36,7 +40,7 @@
       if (res.ok) {
         let text = await res.text();
         popMessage(text, "#048109");
-        reloadUserList();
+        reloadUser();
       } else {
         let text = await res.text();
         throw new Error("Response Code " + res.status + "-> " + text);
@@ -46,7 +50,9 @@
     }
   }
 
-  async function handleRemoveProject() {
+  async function handleRemoveProject(event) {
+    event.preventDefault();
+
     const username = document.querySelector("#project-username").value;
     const project = document.querySelector("#project-id").value;
 
@@ -67,7 +73,7 @@
       if (res.ok) {
         let text = await res.text();
         popMessage(text, "#048109");
-        reloadUserList();
+        reloadUser();
       } else {
         let text = await res.text();
         throw new Error("Response Code " + res.status + "-> " + text);
@@ -84,10 +90,6 @@
       displayMessage = false;
     }, 3500);
   }
-
-  function reloadUserList() {
-    dispatch("reload");
-  }
 </script>
 
 <Card>
@@ -108,19 +110,17 @@
         placeholder="project-id"
         id="project-id"
       />
-      <!-- PreventDefault on Sveltestrap-Button more complex to achieve than just use good ol' html button -->
-      <!-- see: https://stackoverflow.com/questions/69630422/svelte-how-to-use-event-modifiers-in-my-own-components -->
       <button
         class="btn btn-primary"
         type="button"
         id="add-project-button"
-        on:click|preventDefault={() => handleAddProject()}>Add</button
+        onclick={(e) => handleAddProject(e)}>Add</button
       >
       <button
         class="btn btn-danger"
         type="button"
         id="remove-project-button"
-        on:click|preventDefault={() => handleRemoveProject()}>Remove</button
+        onclick={(e) => handleRemoveProject(e)}>Remove</button
       >
     </div>
     <p>

web/frontend/src/config/admin/EditRole.svelte

@@ -10,17 +10,19 @@
 
 <script>
   import { Card, CardTitle, CardBody } from "@sveltestrap/sveltestrap";
-  import { createEventDispatcher } from "svelte";
   import { fade } from "svelte/transition";
 
-  const dispatch = createEventDispatcher();
+  /* SVelte 5 Props */
+  let {roles, reloadUser } = $props();
 
-  let message = { msg: "", color: "#d63384" };
+  /* State Init */
-  let displayMessage = false;
+  let message = $state({ msg: "", color: "#d63384" });
+  let displayMessage = $state(false);
 
-  export let roles;
+  /* Functions */
+  async function handleAddRole(event) {
+    event.preventDefault();
 
-  async function handleAddRole() {
     const username = document.querySelector("#role-username").value;
     const role = document.querySelector("#role-select").value;
 
@@ -41,7 +43,7 @@
       if (res.ok) {
         let text = await res.text();
         popMessage(text, "#048109");
-        reloadUserList();
+        reloadUser();
       } else {
         let text = await res.text();
         throw new Error("Response Code " + res.status + "-> " + text);
@@ -51,7 +53,9 @@
     }
   }
 
-  async function handleRemoveRole() {
+  async function handleRemoveRole(event) {
+    event.preventDefault();
+
     const username = document.querySelector("#role-username").value;
     const role = document.querySelector("#role-select").value;
 
@@ -72,7 +76,7 @@
       if (res.ok) {
         let text = await res.text();
         popMessage(text, "#048109");
-        reloadUserList();
+        reloadUser();
       } else {
         let text = await res.text();
         throw new Error("Response Code " + res.status + "-> " + text);
@@ -89,10 +93,6 @@
       displayMessage = false;
     }, 3500);
   }
-
-  function reloadUserList() {
-    dispatch("reload");
-  }
 </script>
 
 <Card>
@@ -113,19 +113,17 @@
           >
         {/each}
       </select>
-      <!-- PreventDefault on Sveltestrap-Button more complex to achieve than just use good ol' html button -->
-      <!-- see: https://stackoverflow.com/questions/69630422/svelte-how-to-use-event-modifiers-in-my-own-components -->
       <button
         class="btn btn-primary"
         type="button"
         id="add-role-button"
-        on:click|preventDefault={() => handleAddRole()}>Add</button
+        onclick={(e) => handleAddRole(e)}>Add</button
       >
       <button
         class="btn btn-danger"
         type="button"
         id="remove-role-button"
-        on:click|preventDefault={() =>handleRemoveRole()}>Remove</button
+        onclick={(e) =>handleRemoveRole(e)}>Remove</button
       >
     </div>
     <p>

web/frontend/src/config/admin/NoticeEdit.svelte

@@ -6,14 +6,18 @@
   import { Col, Card, CardTitle, CardBody } from "@sveltestrap/sveltestrap";
   import { fade } from "svelte/transition";
 
-  export let ncontent;
+  /* Svelte 5 Props */
+  let { ncontent } = $props();
 
-  let message = { msg: "", color: "#d63384" };
+  /* State Init */
-  let displayMessage = false;
+  let message = $state({ msg: "", color: "#d63384" });
+  let displayMessage = $state(false);
+
+  /* Functions */
+  async function handleEditNotice(event) {
+    event.preventDefault();
 
-  async function handleEditNotice() {
     const content = document.querySelector("#notice-content").value;
-
     let formData = new FormData();
     formData.append("new-content", content);
 
@@ -56,14 +60,11 @@
           value={ncontent}
           id="notice-content"
         />
-
-        <!-- PreventDefault on Sveltestrap-Button more complex to achieve than just use good ol' html button -->
-        <!-- see: https://stackoverflow.com/questions/69630422/svelte-how-to-use-event-modifiers-in-my-own-components -->
         <button
           class="btn btn-primary"
           type="button"
           id="edit-notice-button"
-          on:click|preventDefault={() => handleEditNotice()}>Edit Notice</button
+          onclick={(e) => handleEditNotice(e)}>Edit Notice</button
         >
       </div>
       <p>

web/frontend/src/config/admin/Options.svelte

@@ -6,10 +6,13 @@
   import { getContext, onMount } from "svelte";
   import { Col, Card, CardBody, CardTitle } from "@sveltestrap/sveltestrap";
 
-  let scrambled;
+  /*Const Init */
-
   const resampleConfig = getContext("resampling");
 
+  /* State Init */
+  let scrambled = $state(false);
+  
+  /* on Mount */
   onMount(() => {
     scrambled = window.localStorage.getItem("cc-scramble-names") != null;
   });
@@ -33,7 +36,7 @@
         type="checkbox"
         id="scramble-names-checkbox"
         style="margin-right: 1em;"
-        on:click={() => handleScramble()}
+        onclick={() => handleScramble()}
         bind:checked={scrambled}
       />
       Active?

web/frontend/src/config/admin/ShowUsers.svelte

@@ -16,23 +16,19 @@
     CardTitle,
     CardBody,
   } from "@sveltestrap/sveltestrap";
-  import { createEventDispatcher } from "svelte";
   import ShowUsersRow from "./ShowUsersRow.svelte";
 
-  export let users = [];
+  /*Svelte 5 Props */
-
+  let { users = $bindable([]), reloadUser } = $props();
-  const dispatch = createEventDispatcher();
-  function reloadUserList() {
-    dispatch("reload");
-  }
 
+  /* Functions */
   function deleteUser(username) {
     if (confirm("Are you sure?")) {
       let formData = new FormData();
       formData.append("username", username);
       fetch("/config/users/", { method: "DELETE", body: formData }).then((res) => {
         if (res.status == 200) {
-          reloadUserList();
+          reloadUser();
         } else {
           confirm(res.statusText);
         }
@@ -40,7 +36,6 @@
     }
   }
 
-  $: userList = users;
 </script>
 
 <Card class="h-100">
@@ -53,7 +48,7 @@
       <Button
         color="secondary"
         size="sm"
-        on:click={() => reloadUserList()}
+        onclick={() => reloadUser()}
         style="float: right;">Reload</Button
       >
     </p>
@@ -71,13 +66,13 @@
           </tr>
         </thead>
         <tbody id="users-list">
-          {#each userList as user}
+          {#each users as user}
             <tr id="user-{user.username}">
               <ShowUsersRow {user} />
               <td
                 ><button
                   class="btn btn-danger del-user"
-                  on:click={() => deleteUser(user.username)}>Delete</button
+                  onclick={() => deleteUser(user.username)}>Delete</button
                 ></td
               >
             </tr>

web/frontend/src/config/admin/ShowUsersRow.svelte

@@ -10,9 +10,13 @@
   import { Button } from "@sveltestrap/sveltestrap";
   import { fetchJwt } from "../../generic/utils.js"
 
-  export let user;
+  /* Svelte 5 Props */
+  let { user } = $props();
 
-  let jwt = "";
+  /* State Init */
+  let jwt = $state("");
+
+  /* Functions */
   function getUserJwt(username) {
     const p = fetchJwt(username);
     p.then((content) => {
@@ -30,7 +34,7 @@
 <td><code>{user?.roles ? user.roles.join(", ") : "No Roles"}</code></td>
 <td>
   {#if !jwt}
-    <Button color="success" on:click={() => getUserJwt(user.username)}
+    <Button color="success" onclick={() => getUserJwt(user.username)}
       >Gen. JWT</Button
     >
   {:else}

web/frontend/src/config/support/SupportOptions.svelte

@@ -6,12 +6,17 @@
   import { Row, Col, Card, CardTitle, CardBody, Button} from "@sveltestrap/sveltestrap";
   import { fade } from "svelte/transition";
 
-  export let config;
+  /* Svelte 5 Props */
+  let { config } = $props();
 
-  let message;
+  /* State Init */
-  let displayMessage;
+  let message = $state("");
+  let displayMessage = $state(false);
+
+  /* Functions */
+  async function handleSettingSubmit(event, selector, target) {
+    event.preventDefault()
 
-  async function handleSettingSubmit(selector, target) {
     let form = document.querySelector(selector);
     let formData = new FormData(form);
     try {
@@ -58,7 +63,7 @@
           id="node-paging-form"
           method="post"
           action="/frontend/configuration/"
-          on:submit|preventDefault={() => handleSettingSubmit("#node-paging-form", "npag")}>
+          onsubmit={(e) => handleSettingSubmit(e, "#node-paging-form", "npag")}>
           <input type="hidden" name="key" value="node_list_usePaging" />
           <div class="mb-3">
             <div>

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;
+    /* Svelte 5 Props */
-    export let message;
+    let {
-    export let displayMessage;
+      config,
-    export let cbmode = false;
+      message = $bindable(),
+      displayMessage = $bindable(),
+      cbmode = $bindable(false),
+      updateSetting
+    } = $props();
 
-    const dispatch = createEventDispatcher();
+    /* State Init */
-    function updateSetting(selector, target) {
+    let activeRow = $state(JSON.stringify(config?.plot_general_colorscheme));
-        dispatch('update-config', {
-            selector: selector,
-            target: target
-        });
-    }
 
+    /* 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]}
+              {#key activeRow}
-                <tr>
+                {#each Object.entries(cbmode ? cvdschemes : colorschemes) as [name, rgbrow]}
-                  <th scope="col">{name}</th>
+                  <tr>
-                  <td>
+                    <th scope="col">{name}</th>
-                    {#if rgbrow.join(",") == config.plot_general_colorscheme}
+                    <td>
                       <input
                         type="radio"
                         name="value"
                         value={JSON.stringify(rgbrow)}
-                        checked
+                        checked={activeRow == JSON.stringify(rgbrow)}
-                        on:click={() =>
+                        onclick={(e) => {
-                          updateSetting("#colorscheme-form", "cs")}
+                          activeRow = JSON.stringify(rgbrow)
+                          updateSetting(e, {
+                            selector: "#colorscheme-form",
+                            target: "cs",
+                          });
+                        }}
                       />
-                    {:else}
+                    </td>
-                      <input
+                    <td>
-                        type="radio"
+                      {#each rgbrow as rgb}
-                        name="value"
+                        <span class="color-dot" style="background-color: {rgb};"
-                        value={JSON.stringify(rgbrow)}
+                        ></span>
-                        on:click={() =>
+                      {/each}
-                          updateSetting("#colorscheme-form", "cs")}
+                    </td>
-                      />
+                  </tr>
-                    {/if}
+                {/each}
-                  </td>
+              {/key}
-                  <td>
-                    {#each rgbrow as rgb}
-                      <span class="color-dot" style="background-color: {rgb};"
-                      ></span>
-                    {/each}
-                  </td>
-                </tr>
-              {/each}
             </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;
+    /* Svelte 5 Props */
-    export let message;
+    let {
-    export let displayMessage;
+      config,
-
+      message = $bindable(),
-    const dispatch = createEventDispatcher();
+      displayMessage = $bindable(),
-    function updateSetting(selector, target) {
+      updateSetting
-        dispatch('update-config', {
+    } = $props();
-            selector: selector,
-            target: target
-        });
-    }
 </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={() =>
+          onsubmit={(e) => updateSetting(e, {
-            updateSetting("#line-width-form", "lw")}
+            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={() =>
+          onsubmit={(e) => updateSetting(e, {
-            updateSetting("#plots-per-row-form", "ppr")}
+            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={() =>
+          onsubmit={(e) => updateSetting(e, {
-            updateSetting("#backgrounds-form", "bg")}
+            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={() =>
+          onsubmit={(e) => updateSetting(e, {
-            updateSetting("#colorblindmode-form", "cbm")}
+            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;
+    /* Svelte 5 Props */
-    export let message;
+    let {
-    export let displayMessage;
+      config,
-    export let username;
+      message = $bindable(),
-    export let isApi;
+      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={() =>
+        onsubmit={(e) => updateSetting(e, {
-          updateSetting("#paging-form", "pag")}
+          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">

web/frontend/src/generic/PlotGrid.svelte

@@ -19,6 +19,7 @@
     * Requirements
     * - Parent Components must be already Migrated
     * - TODO: Job.root.svelte, Node.root.svelte
+    * - DONE: Analysis, Status, User
     * 
     * How-To
     * - Define "Plot-Slotcode" as SV5 Snippet with argument "item" in parent (!)