VienDesu/vnshed
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

frontend: image file pickers

Browse source
This commit is contained in:
OleSTEEP 2025-10-16 22:51:37 +03:00
parent 41be12050d
commit 792006c7f1
4 changed files with 42 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

23
frontend/src/lib/components/add_button.svelte
View file

@ -1,24 +1,29 @@
<script lang="ts"> <script lang="ts">
let { handler = () => {}, type = "button", files = $bindable() } = $props(); let { handler = () => {}, type = "button", files = $bindable() } = $props();
let file_list: FileList = $state([]); let file_list = $state();
$effect(() => { $effect(() => {
// FileList -> Array[File] // FileList -> Array[File]
let f_list: Array<File> = []; if (file_list) {
for (let file of file_list) let f_list: Array<File> = [];
f_list.push(file); for (let file of file_list)
files = f_list; f_list.push(file);
files = f_list;
}
}); });
</script> </script>
{#if type == "button"} {#if type == "button"}
<button class="plus round" style="height: 32px;" onclick={handler}>+</button> <button class="plus round" style="height: 32px;" onclick={handler}>+</button>
{:else if type == "image"} {:else if type == "image"}
<label for="img-upload" class="plus round" style="height: 48px; display: inline-block;">+</label> <label class="plus round" style="height: 48px; display: inline-block;">+
<input id="img-upload" accept="image/png, image/jpeg" style="display: none" bind:files={file_list} type="file"/> <input accept="image/png, image/jpeg" style="display: none" bind:files={file_list} type="file"/>
</label>
{:else} {:else}
<label for="file-upload" class="file-plus rounded">Загрузить файл</label> <label class="file-plus rounded">Загрузить файл
<input id="file-upload" style="display: none" bind:files={file_list} multiple type="file"/> <input style="display: none" bind:files={file_list} multiple type="file"/>
</label>
{/if} {/if}
<style> <style>

6
frontend/src/lib/components/calendar.svelte
View file

@ -81,8 +81,8 @@
<div class="calendar input rounded"> <div class="calendar input rounded">
<div class="month"> <div class="month">
<ul> <ul>
<button class="prev" onclick={() => prev()}>&#10094;</button> <button class="prev" onclick={prev}>&#10094;</button>
<button class="next" onclick={() => next()}>&#10095;</button> <button class="next" onclick={next}>&#10095;</button>
<li>{monthNames[month]} {year}</li> <li>{monthNames[month]} {year}</li>
</ul> </ul>
</div> </div>
@ -97,7 +97,7 @@
{#if selected == day} {#if selected == day}
<button class="active {isCurrent(day.date) ? "current":""}">{day.name}</button> <button class="active {isCurrent(day.date) ? "current":""}">{day.name}</button>
{:else} {:else}
<button class="nonactive {isCurrent(day.date) ? "current":""}" onclick={set_day(day)}>{day.name}</button> <button class="nonactive {isCurrent(day.date) ? "current":""}" onclick={() => set_day(day)}>{day.name}</button>
{/if} {/if}
</li> </li>
{/each} {/each}

15
frontend/src/lib/components/containers/images.svelte
View file

@ -3,19 +3,20 @@
let { value = $bindable([]) } = $props(); let { value = $bindable([]) } = $props();
let images: Array<File> = $state([]); let images: Array<File> = $state([null]);
let index = $derived(images.length);
$effect(() => { $effect(() => {
console.log(images); if (images[0] !== null) {
}) images.unshift(null);
}
});
</script> </script>
<div class="img-conatiner rounded"> <div class="img-conatiner rounded">
{#each images as image, index} {#each images as image, i}
<Image bind:image={images[index]}/> <Image bind:image={images[i]}/>
{/each} {/each}
<Image bind:image={images[images.length]}/>
</div> </div>
<style> <style>

24
frontend/src/lib/components/image.svelte
View file

@ -1,18 +1,24 @@
<script> <script lang="ts">
import AddButton from "./add_button.svelte"; import AddButton from "./add_button.svelte";
let { direction = "horisontal", shape = "rounded", image = $bindable() } = $props(); let { direction = "horisontal", shape = "rounded", image = $bindable() } = $props();
let files = $state(); let files = $state();
let img_src = $state(); let img_src = $state();
function load_image(img: File) {
const reader = new FileReader();
reader.addEventListener("load", function () {
img_src = reader.result;
});
reader.readAsDataURL(img);
}
$effect(() => { $effect(() => {
if (files.length > 0) { if (files && files.length > 0) {
const reader = new FileReader();
reader.addEventListener("load", function () {
img_src = reader.result;
});
reader.readAsDataURL(files[0]);
image = files[0]; image = files[0];
files = [];
} else {
if (image) load_image(image);
} }
}); });
</script> </script>
@ -44,4 +50,8 @@
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
:global(.img-div + .img-div) {
margin-left: 1rem !important;
}
</style> </style>