implemented theme changer

frontend/src/Components/Footer.svelte

@@ -1,6 +1,7 @@
 <script>
     import { t } from '../translations.svelte.js';
 </script>
+
 <footer>
     {@html t('footer.message','<a href="https://srsoftware.de">SRSoftware</a>')}
 </footer>

frontend/src/Components/Menu.svelte

@@ -9,6 +9,7 @@
         router.navigate('/about');
     }
 </script>
+
 <nav>
     <a onclick={() => router.navigate('/user')}>{t('menu.users')}</a>
     <a href="https://svelte.dev/tutorial/svelte/state" target="_blank">{t('menu.tutorial')}</a>

frontend/src/main.js

@@ -1,5 +1,4 @@
 import { mount } from 'svelte'
-import './app.css'
 import App from './App.svelte'
 
 const app = mount(App, {

frontend/src/routes/user/ClickSelect.svelte

@@ -0,0 +1,34 @@
+<script>
+    import { t } from '../../translations.svelte.js';
+    import { checkUser } from '../../user.svelte.js';
+
+    let { fetchOptions, key, value, onUpdate } = $props();
+
+    let options = $state([]);
+
+    async function loadOptions(){
+        const resp = await fetchOptions();
+        const arr = await resp.json();
+        for (let entry of arr){
+            const value = entry.value;
+            const caption = entry.caption ? entry.caption : value;
+            options.push({caption:caption,value:value})
+        }
+    }
+
+    function propagate(){
+        let changeset = {}
+        changeset[key] = value;
+        onUpdate(changeset);
+    }
+</script>
+
+{#if options.length > 0}
+    <select bind:value onchange={propagate} >
+        {#each options as entry,i}
+        <option value={entry.value}>{entry.caption}</option>
+        {/each}
+    </select>
+{:else}
+    <span onclick={loadOptions}>{value}</span>
+{/if}

frontend/src/routes/user/User.svelte

@@ -3,6 +3,7 @@
     import { user } from '../../user.svelte.js';
     import EditableField from './EditableField.svelte';
     import ClickInput from './ClickInput.svelte';
+    import ClickSelect from './ClickSelect.svelte';
 
     async function patch(changeset){
         const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/${user.id}`;
@@ -17,7 +18,13 @@
             for (let key of Object.keys(json)) user[key] = json[key];
         }
     }
+
+    async function fetchThemes(){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/themes.json`;
+        return fetch(url);
+    }
 </script>
+
 <h1>{t('user.user_module')}</h1>
 
 <fieldset>
@@ -32,7 +39,9 @@
         </tr>
         <tr>
             <th>{t('user.name')}</th>
-            <td><ClickInput key='name' value={user.name} onUpdate={patch} /></td>
+            <td>
+                <ClickInput key='name' value={user.name} onUpdate={patch} />
+            </td>
         </tr>
         <tr>
             <th>{t('user.login')}</th>
@@ -40,15 +49,21 @@
         </tr>
         <tr>
             <th>{t('user.email')}</th>
-            <td><ClickInput key='email' value={user.email} onUpdate={patch} /></td>
+            <td>
+                <ClickInput key='email' value={user.email} onUpdate={patch} />
+            </td>
         </tr>
         <tr>
             <th>{t('user.language')}</th>
-            <td><ClickInput key='language' value={user.language} onUpdate={patch} /></td>
+            <td>
+                <ClickInput key='language' value={user.language} onUpdate={patch} />
+            </td>
         </tr>
         <tr>
             <th>{t('user.theme')}</th>
-            <td>{user.theme}</td>
+            <td>
+                <ClickSelect key='theme' value={user.theme} fetchOptions={fetchThemes} onUpdate={patch} />
+            </td>
         </tr>
         <tr>
             <th>{t('user.permissions')}</th>

web/src/main/resources/web/css/winter.css

@@ -0,0 +1,37 @@
+a {
+    color: black;
+}
+body {
+    background: white;
+    color: navy;
+}
+
+fieldset {
+    border: 1px solid blue;
+    border-radius: 4px;
+}
+
+input{
+    background: lightcyan;
+    border: 1px dotted blue;
+    border-radius: 4px;
+    padding: 3px;
+    margin: 3px;
+    color: blue;
+}
+
+button{
+    background: red;
+    border-radius: 5px;
+    padding: 5px 7px;
+    border-width: 2px;
+    border-style: solid;
+    border-color: yellow red red yellow;
+}
+footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  margin: 5px;
+}

web/src/main/resources/web/themes.json

@@ -0,0 +1,13 @@
+[
+  {
+    "value"   : "winter",
+    "caption" : "Winter"
+  },
+  {
+    "value" : "bloodshed"
+  },
+  {
+    "value" : "default",
+    "caption": "default"
+  }
+]