From 792006c7f1cf5be2228d21ad42d8f7212b2274f4 Mon Sep 17 00:00:00 2001
From: OleSTEEP <krinkinoleg@gmail.com>
Date: Thu, 16 Oct 2025 22:51:37 +0300
Subject: [PATCH] frontend: image file pickers

---
 frontend/src/lib/components/add_button.svelte | 23 +++++++++++-------
 frontend/src/lib/components/calendar.svelte   |  6 ++---
 .../lib/components/containers/images.svelte   | 15 ++++++------
 frontend/src/lib/components/image.svelte      | 24 +++++++++++++------
 4 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/frontend/src/lib/components/add_button.svelte b/frontend/src/lib/components/add_button.svelte
index 59322a0..84bb3c2 100644
--- a/frontend/src/lib/components/add_button.svelte
+++ b/frontend/src/lib/components/add_button.svelte
@@ -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]
-        let f_list: Array<File> = [];
-        for (let file of file_list)
-            f_list.push(file);
-        files = f_list;
+        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>
diff --git a/frontend/src/lib/components/calendar.svelte b/frontend/src/lib/components/calendar.svelte
index e06adf7..27a4d5f 100644
--- a/frontend/src/lib/components/calendar.svelte
+++ b/frontend/src/lib/components/calendar.svelte
@@ -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}
diff --git a/frontend/src/lib/components/containers/images.svelte b/frontend/src/lib/components/containers/images.svelte
index 51309ec..cbf231c 100644
--- a/frontend/src/lib/components/containers/images.svelte
+++ b/frontend/src/lib/components/containers/images.svelte
@@ -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>
diff --git a/frontend/src/lib/components/image.svelte b/frontend/src/lib/components/image.svelte
index fd6b702..3587d28 100644
--- a/frontend/src/lib/components/image.svelte
+++ b/frontend/src/lib/components/image.svelte
@@ -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();
 
+    function load_image(img: File) {
+        const reader = new FileReader();
+        reader.addEventListener("load", function () {
+            img_src = reader.result;
+        });
+        reader.readAsDataURL(img);
+    }
+
     $effect(() => {
-        if (files.length > 0) {
-            const reader = new FileReader();
-            reader.addEventListener("load", function () {
-                img_src = reader.result;
-            });
-            reader.readAsDataURL(files[0]);
+        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>