From 8e35d2ecb5e0ff78b8ca94d37cd522be1eccdacf Mon Sep 17 00:00:00 2001
From: Kseninia Mikhaylova <k.mikhailova@svs-tech.pro>
Date: Fri, 19 Jul 2024 09:10:21 +0300
Subject: [PATCH] load images

---
 back/tgbot/tgbot.py           |  2 +-
 front/components/getImage.vue | 11 ++++++++++-
 front/store/images.ts         | 27 ++++++++++++++++++++++++++-
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/back/tgbot/tgbot.py b/back/tgbot/tgbot.py
index b4dbda0..a8a62ce 100644
--- a/back/tgbot/tgbot.py
+++ b/back/tgbot/tgbot.py
@@ -69,7 +69,7 @@ class TgBot:
                     text = await TgBot.app.bot.get_file(item.text)
                     TgBotUpdater.return_values[item.text] = text.file_path
                 except Exception as e:
-                    pass
+                    TgBotUpdater.return_values[item.text] = 'error'
 
     async def set_handlers(self):
         TgBot.app.add_handler(
diff --git a/front/components/getImage.vue b/front/components/getImage.vue
index f4f15f5..8f4ad82 100644
--- a/front/components/getImage.vue
+++ b/front/components/getImage.vue
@@ -16,7 +16,7 @@ watch(imagesStore, () => {
 }, { deep: true })
 </script>
 <template>
-    <template v-if="img.result">
+    <template v-if="img.status == 'success'">
         <a href="#">
             <Icon name="i-mdi-image" @click="openImage" />
         </a>
@@ -24,4 +24,13 @@ watch(imagesStore, () => {
             <img :src="img.result" />
         </UModal>
     </template>
+    <template v-else-if="img.status == 'error'">
+        <Icon name="i-mdi-close-circle-outline" />
+    </template>
+    <template v-else-if="img.status == 'pending'">
+        <Icon name="i-mdi-reload" />
+    </template>
+    <template v-else-if="img.status == 'idle'">
+        <Icon name="i-mdi-progress-question" />
+    </template>
 </template>
\ No newline at end of file
diff --git a/front/store/images.ts b/front/store/images.ts
index 5e0687d..27ab451 100644
--- a/front/store/images.ts
+++ b/front/store/images.ts
@@ -11,10 +11,35 @@ export const useImagesStore = defineStore('images', {
             if (!this.list[name]) {
                 this.list[name] = {
                     status: 'idle',
-                    result: 'https://media.istockphoto.com/id/1490517357/photo/scientists-are-researching-and-analyzing-harmful-contaminants-in-the-laboratory.webp?s=170667a&w=0&k=20&c=Fh4t-P_b-a1QxwyBUzUa0AuLp8FLNyLy4hl4HUm82Ao='
+                    // result: 'https://media.istockphoto.com/id/1490517357/photo/scientists-are-researching-and-analyzing-harmful-contaminants-in-the-laboratory.webp?s=170667a&w=0&k=20&c=Fh4t-P_b-a1QxwyBUzUa0AuLp8FLNyLy4hl4HUm82Ao='
                 }
             }
+            if (
+                !Object.entries(this.list).filter(el => el[1].status == 'pending').length &&
+                Object.entries(this.list).filter(el => el[1].status == 'idle').length) {
+                this.loadImages()
+            }
             return this.list[name]
         },
+        async loadOneImage(name: string) {
+            const file_url_data = await apiCall<string[]>(`tgbot/items/get_image/${name}/`)
+            
+            if (file_url_data.length > 0 && file_url_data[0] !== 'error') {
+                this.list[name].status = 'success'
+                this.list[name].result = file_url_data[0]
+            } else {
+                this.list[name].status = 'error'
+            }
+            if (Object.entries(this.list).filter(el => el[1].status == 'idle').length) {
+                this.loadImages()
+            }
+        },
+        loadImages() {
+            const elements = Object.entries(this.list).filter(el => el[1].status == 'idle')
+            elements.slice(0, 2).map(el => {
+                this.list[el[0]].status = 'pending'
+                this.loadOneImage(el[0])
+            })
+        }
     },
 })
\ No newline at end of file