8 changed files with 174 additions and 117 deletions
@ -1,108 +0,0 @@ |
|||||||
<script> |
|
||||||
|
|
||||||
import { t } from '../../translations.svelte.js'; |
|
||||||
import { useTinyRouter } from 'svelte-tiny-router'; |
|
||||||
import { onMount } from 'svelte'; |
|
||||||
import { checkUser } from '../../user.svelte.js'; |
|
||||||
|
|
||||||
const router = useTinyRouter(); |
|
||||||
|
|
||||||
let { user_id } = $props(); |
|
||||||
|
|
||||||
let editUser = $state(null); |
|
||||||
let options = $state([]); |
|
||||||
let sent = $state(false); |
|
||||||
let caption = $state(t('user.save_user')); |
|
||||||
let message = $state(t('user.loading_data')); |
|
||||||
|
|
||||||
onMount(async () => { |
|
||||||
let url = `${location.protocol}//${location.host.replace('5173','8080')}/themes.json`; |
|
||||||
let resp = await fetch(url); |
|
||||||
if (resp.ok){ |
|
||||||
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}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/${user_id}`; |
|
||||||
resp = await fetch(url,{credentials:'include'}); |
|
||||||
if (resp.ok) { |
|
||||||
editUser = await resp.json(); |
|
||||||
} else { |
|
||||||
message = await resp.text(); |
|
||||||
if (message == "") message = t(resp); |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
async function save(elem){ |
|
||||||
sent = true; |
|
||||||
caption = t('user.data_sent'); |
|
||||||
let url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/${user_id}`; |
|
||||||
let resp = await fetch(url,{ |
|
||||||
method: 'PATCH', |
|
||||||
credentials: 'include', |
|
||||||
body: JSON.stringify(editUser) |
|
||||||
}); |
|
||||||
if (resp.ok){ |
|
||||||
caption = t('user.saved'); |
|
||||||
checkUser(); |
|
||||||
router.navigate('/user'); |
|
||||||
} else { |
|
||||||
caption = t('user.failed'); |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<fieldset> |
|
||||||
<legend>{t('user.editing',user_id)}</legend> |
|
||||||
{#if editUser} |
|
||||||
<table> |
|
||||||
<tbody> |
|
||||||
<tr> |
|
||||||
<th>{t('user.id')}</th> |
|
||||||
<td>{editUser.id}</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<th>{t('user.name')}</th> |
|
||||||
<td> |
|
||||||
<input type="text" bind:value={editUser.name} /> |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<th>{t('user.email')}</th> |
|
||||||
<td> |
|
||||||
<input type="text" bind:value={editUser.email} /> |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<th>{t('user.language')}</th> |
|
||||||
<td> |
|
||||||
<input type="text" bind:value={editUser.language} /> |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<th>{t('user.password')}</th> |
|
||||||
<td> |
|
||||||
<input type="password" bind:value={editUser.password} /> |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
<tr> |
|
||||||
<th>{t('user.theme')}</th> |
|
||||||
<td> |
|
||||||
<select bind:value={editUser.theme}> |
|
||||||
{#each options as entry,i} |
|
||||||
<option value={entry.value}>{entry.caption}</option> |
|
||||||
{/each} |
|
||||||
</select> |
|
||||||
</td> |
|
||||||
</tr> |
|
||||||
</tbody> |
|
||||||
</table> |
|
||||||
<button onclick={save} disabled={sent}>{caption}</button> |
|
||||||
{:else} |
|
||||||
{message} |
|
||||||
{/if} |
|
||||||
</fieldset> |
|
||||||
@ -0,0 +1,125 @@ |
|||||||
|
<script> |
||||||
|
|
||||||
|
import { t } from '../../translations.svelte.js'; |
||||||
|
import { useTinyRouter } from 'svelte-tiny-router'; |
||||||
|
import { onMount } from 'svelte'; |
||||||
|
import { checkUser } from '../../user.svelte.js'; |
||||||
|
|
||||||
|
const router = useTinyRouter(); |
||||||
|
|
||||||
|
let { user_id } = $props(); |
||||||
|
|
||||||
|
let editUser = $state(null); |
||||||
|
let options = $state([]); |
||||||
|
let sent = $state(false); |
||||||
|
let caption = $state(t('user.save_user')); |
||||||
|
let message = $state(t('user.loading_data')); |
||||||
|
|
||||||
|
onMount(async () => { |
||||||
|
let url = `${location.protocol}//${location.host.replace('5173','8080')}/themes.json`; |
||||||
|
let resp = await fetch(url); |
||||||
|
if (resp.ok){ |
||||||
|
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}) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (user_id) { |
||||||
|
url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/${user_id}`; |
||||||
|
resp = await fetch(url,{credentials:'include'}); |
||||||
|
if (resp.ok) { |
||||||
|
editUser = await resp.json(); |
||||||
|
} else { |
||||||
|
message = await resp.text(); |
||||||
|
if (message == "") message = t(resp); |
||||||
|
} |
||||||
|
} else { |
||||||
|
editUser = {} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
async function save(ev){ |
||||||
|
ev.preventDefault(); |
||||||
|
sent = true; |
||||||
|
caption = t('user.data_sent'); |
||||||
|
let method = 'PATCH'; |
||||||
|
let url = null; |
||||||
|
if (user_id) { |
||||||
|
url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/${user_id}`; |
||||||
|
} else { |
||||||
|
url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/create`; |
||||||
|
method = 'POST'; |
||||||
|
} |
||||||
|
let resp = await fetch(url,{ |
||||||
|
method: method, |
||||||
|
credentials: 'include', |
||||||
|
body: JSON.stringify(editUser) |
||||||
|
}); |
||||||
|
if (resp.ok){ |
||||||
|
caption = t('user.saved'); |
||||||
|
checkUser(); |
||||||
|
router.navigate('/user'); |
||||||
|
} else { |
||||||
|
caption = t('user.failed'); |
||||||
|
sent = false; |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<fieldset> |
||||||
|
<legend>{t('user.editing',user_id?user_id:'')}</legend> |
||||||
|
{#if editUser} |
||||||
|
<form onsubmit={save}> |
||||||
|
<table> |
||||||
|
<tbody> |
||||||
|
{#if editUser.id} |
||||||
|
<tr> |
||||||
|
<th>{t('user.id')}</th> |
||||||
|
<td>{editUser.id}</td> |
||||||
|
</tr> |
||||||
|
{/if} |
||||||
|
<tr> |
||||||
|
<th>{t('user.name')}</th> |
||||||
|
<td> |
||||||
|
<input type="text" bind:value={editUser.name} /> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<th>{t('user.email')}</th> |
||||||
|
<td> |
||||||
|
<input type="text" bind:value={editUser.email} /> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<th>{t('user.language')}</th> |
||||||
|
<td> |
||||||
|
<input type="text" bind:value={editUser.language} /> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<th>{t('user.password')}</th> |
||||||
|
<td> |
||||||
|
<input type="password" bind:value={editUser.password} /> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<th>{t('user.theme')}</th> |
||||||
|
<td> |
||||||
|
<select bind:value={editUser.theme}> |
||||||
|
{#each options as entry,i} |
||||||
|
<option value={entry.value}>{entry.caption}</option> |
||||||
|
{/each} |
||||||
|
</select> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
<button type="submit" disabled={sent}>{caption}</button> |
||||||
|
</form> |
||||||
|
{:else} |
||||||
|
{message} |
||||||
|
{/if} |
||||||
|
</fieldset> |
||||||
Loading…
Reference in new issue