8 changed files with 174 additions and 117 deletions
@ -1,108 +0,0 @@
@@ -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 @@
@@ -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