From 06c620230de56317af05ece6a83d1a70f5c0f7d5 Mon Sep 17 00:00:00 2001
From: Stephan Richter <s.richter@srsoftware.de>
Date: Tue, 1 Jul 2025 22:56:49 +0200
Subject: [PATCH] implemented theme changer

---
 frontend/src/Components/Footer.svelte       |  1 +
 frontend/src/Components/Menu.svelte         |  1 +
 frontend/src/app.css                        |  0
 frontend/src/main.js                        |  1 -
 frontend/src/routes/user/ClickSelect.svelte | 34 +++++++++++++++++++
 frontend/src/routes/user/User.svelte        | 23 ++++++++++---
 web/src/main/resources/web/css/winter.css   | 37 +++++++++++++++++++++
 web/src/main/resources/web/themes.json      | 13 ++++++++
 8 files changed, 105 insertions(+), 5 deletions(-)
 delete mode 100644 frontend/src/app.css
 create mode 100644 frontend/src/routes/user/ClickSelect.svelte
 create mode 100644 web/src/main/resources/web/css/winter.css
 create mode 100644 web/src/main/resources/web/themes.json

diff --git a/frontend/src/Components/Footer.svelte b/frontend/src/Components/Footer.svelte
index fc1d9bf..d13ee8c 100644
--- a/frontend/src/Components/Footer.svelte
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/Components/Menu.svelte b/frontend/src/Components/Menu.svelte
index b021aea..2199c78 100644
--- a/frontend/src/Components/Menu.svelte
+++ b/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>
diff --git a/frontend/src/app.css b/frontend/src/app.css
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 458c7a8..37b4dbb 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,5 +1,4 @@
 import { mount } from 'svelte'
-import './app.css'
 import App from './App.svelte'
 
 const app = mount(App, {
diff --git a/frontend/src/routes/user/ClickSelect.svelte b/frontend/src/routes/user/ClickSelect.svelte
new file mode 100644
index 0000000..2bb86fe
--- /dev/null
+++ b/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}
diff --git a/frontend/src/routes/user/User.svelte b/frontend/src/routes/user/User.svelte
index a7b43d7..42e0f39 100644
--- a/frontend/src/routes/user/User.svelte
+++ b/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>
diff --git a/web/src/main/resources/web/css/winter.css b/web/src/main/resources/web/css/winter.css
new file mode 100644
index 0000000..185e52c
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/web/src/main/resources/web/themes.json b/web/src/main/resources/web/themes.json
new file mode 100644
index 0000000..6b737b4
--- /dev/null
+++ b/web/src/main/resources/web/themes.json
@@ -0,0 +1,13 @@
+[
+  {
+    "value"   : "winter",
+    "caption" : "Winter"
+  },
+  {
+    "value" : "bloodshed"
+  },
+  {
+    "value" : "default",
+    "caption": "default"
+  }
+]
\ No newline at end of file