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

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

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

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

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

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

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

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

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