fabien/lassistanoque
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

choix de la timezone dans un select

Browse Source
This commit is contained in:
fabien committed 2026-08-23 13:33:40 +02:00
1 parent 21e96702a0
commit 357bf9b41c
13 files changed
+848 -42
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

backend/web/src/routes/(authenticated)/profile/+page.svelte
+23 -12
View File
@@ -4,20 +4,24 @@
import type { PageProps } from './$types';
import type { User, Address } from '$lib/types/api'
import { userApi } from '$lib/api/endpoints/user'
import { miscApi } from '$lib/api/endpoints/misc'
import FormError from '$lib/components/FormError.svelte';
import { applyTheme, themeToLocalStorage } from '$lib/ui/themeswitcher';
import { validateEmail } from '$lib/utilities/validators'
import { onMount } from 'svelte';
import { onMount } from 'svelte';
import Select from 'svelte-select/no-styles';
let { data }: PageProps = $props();
let form : User = $state(data.me)
let addresses : Address[] = $state([] as Address[])
let newAddress : Address = $state({} as Address)
let timezones = $state([] as string[])
let errors = new SvelteMap<string,string>()
onMount(async ()=> {
addresses = await userApi.listAddresses(form.id)
timezones = await miscApi.listTimezones()
})
$effect(()=>{
@@ -100,17 +104,8 @@
</div>
<div class="flex">
<div class="flex-1 mr-2">
<label for="theme" class="block my-1 flex-1">Thème</label>
<select bind:value={form.theme} class="textinput">
<option value="auto">Automatic</option>
<option value="dark">Sombre</option>
<option value="light">Clair</option>
</select>
<FormError key="theme" errors={errors} />
</div>
<div class="flex-1 ml-2">
<div class="flex-1 mr-2">
<label for="lang" class="block my-1 flex-1">Langue</label>
<select bind:value={form.lang} class="textinput">
<option value="en">English</option>
@@ -118,6 +113,22 @@
</select>
<FormError key="lang" errors={errors} />
</div>
<div class="flex-1 ml-2">
<label for="lang" class="block my-1 flex-1">Timezone</label>
<Select items={timezones} bind:value={form.timezone}/>
<FormError key="lang" errors={errors} />
</div>
</div>
<div class="flex-1 mr-2">
<label for="theme" class="block my-1 flex-1">Thème</label>
<select bind:value={form.theme} class="textinput">
<option value="auto">Automatique</option>
<option value="dark">Sombre</option>
<option value="light">Clair</option>
</select>
<FormError key="theme" errors={errors} />
</div>
<button class="bt w-full">Enregistrer</button>
@@ -131,7 +142,7 @@
{#each addresses as address (address.id) }
<div class="m-2">
<div class="dark:bg-stone-600 bg-stone-300 rounded flex inline px-2 py-1">
<div class="dark:bg-stone-700 bg-stone-300 rounded flex inline px-2 py-1">
<span class="inline-block w-20">{address.type} : </span>
<span class="font-bold">{address.address}</span>
<button class="ml-4 pointer" onclick={()=>{handleDeleteAddress(address.id)}}>
backend/web/src/routes/layout.css
+135 -3
View File
@@ -21,9 +21,6 @@ h2 {
@apply mb-4 font-bold;
}
.textinput {
@apply w-full rounded bg-white p-1 text-stone-900 dark:bg-stone-700 dark:text-stone-100;
}
.pointer {
@apply cursor-pointer;
}
@@ -105,3 +102,138 @@ h2 {
}
}
}
/* svelte select */
.textinput {
@apply h-8 w-full rounded border-stone-700 bg-white px-2 py-1 text-stone-900 dark:bg-stone-800 dark:text-stone-100;
}
.svelte-select {
@apply relative flex h-8 w-full border-none text-stone-900 dark:bg-stone-800 dark:text-stone-100;
}
.svelte-select .value-container {
@apply relative flex-1;
}
.svelte-select input {
@apply absolute top-0 left-0 m-0 h-8 w-full cursor-default rounded border-stone-700 bg-transparent px-2 py-0 text-sm leading-10 text-stone-100;
}
.svelte-select.focused {
/* @apply border-blue-600; */
}
.svelte-select.disabled {
@apply border-gray-200 bg-gray-200 text-gray-600;
}
.svelte-select.disabled input {
@apply placeholder:text-gray-400 placeholder:opacity-100;
}
.svelte-select > .value-container > .selected-item {
@apply h-8 overflow-x-hidden px-4 leading-8 focus:outline-none;
}
.svelte-select .hide-selected-item {
@apply hidden;
}
.svelte-select .indicators {
@apply pointer-events-none absolute top-0 right-0 bottom-0 flex h-8 translate-y-0 items-center text-gray-200;
}
.svelte-select .icons > * {
@apply transition-colors duration-200 ease-in-out focus:outline-none;
}
.svelte-select .clear-select {
@apply pointer-events-auto;
}
.svelte-select.focused .icons,
.svelte-select .chevron:hover,
.svelte-select .clear-select:hover {
@apply text-gray-600;
}
.svelte-select .clear-select {
@apply h-5 w-9 flex-none px-2 text-gray-300;
}
.svelte-select .chevron {
@apply flex h-5 w-9 border-l-2 pt-0 pr-2 pl-2 text-gray-300;
}
.svelte-select.multi {
@apply h-auto flex-wrap items-stretch pr-9 pl-4;
}
.svelte-select.multi input {
@apply relative m-0 p-0;
}
.svelte-select.error {
@apply border-red-500 bg-white;
}
.a11y-text {
@apply sr-only;
}
.svelte-select-list {
@apply absolute right-0 left-0 z-10 max-h-64 w-full overflow-y-auto rounded-sm border-none bg-stone-50 px-4 shadow-md dark:bg-stone-800;
}
.svelte-select-list .list-group-title {
@apply h-8 cursor-default px-5 text-sm leading-10 font-medium overflow-ellipsis whitespace-nowrap text-gray-400 uppercase;
}
.svelte-select-list .empty {
@apply py-5 text-center text-gray-500;
}
.svelte-select-item {
@apply h-8 cursor-default overflow-hidden px-5 leading-10 overflow-ellipsis whitespace-nowrap text-gray-800;
}
.item.group-item {
@apply px-10;
}
.item.active {
@apply bg-blue-600 text-white dark:bg-blue-900;
}
.item.not-selectable {
@apply text-gray-300;
}
.item.first {
@apply rounded-t-sm;
}
.item.hover:not(.active) {
@apply bg-blue-100 dark:bg-stone-700;
}
.multi input {
flex: 1 1 40px;
}
.multi-item {
@apply mt-1 mr-1 flex h-8 max-w-full cursor-default items-center overflow-hidden rounded-sm border border-gray-200 bg-gray-100 pr-1 pl-1 leading-8 overflow-ellipsis whitespace-nowrap;
}
.multi-item.disabled {
@apply hover:bg-gray-300 hover:text-gray-500;
}
.multi-item-clear {
@apply flex w-5 items-center justify-center;
}
.list-item {
@apply list-none;
}