8 changed files with 162 additions and 69 deletions
@ -1,19 +1,102 @@
@@ -1,19 +1,102 @@
|
||||
<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')); |
||||
|
||||
onMount(async () => { |
||||
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/${user.id}`; |
||||
const resp = await fetch(url,{credentials:include}); |
||||
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(); |
||||
}); |
||||
|
||||
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){ |
||||
const json = await resp.json(); |
||||
caption = t('user.saved'); |
||||
checkUser(); |
||||
router.navigate('/user'); |
||||
} else { |
||||
caption = t('user.failed'); |
||||
} |
||||
}); |
||||
} |
||||
</script> |
||||
|
||||
<fieldset> |
||||
<legend>{t('user.editing')} {user_id}</legend> |
||||
…Edit form here… |
||||
<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} |
||||
{t('user.loading_data')} |
||||
{/if} |
||||
</fieldset> |
||||
Loading…
Reference in new issue