From 74dfc5628ef43ab5dcc18f3e625024932abb8fb1 Mon Sep 17 00:00:00 2001
From: CakesTwix <oleg.kiryazov@gmail.com>
Date: Tue, 24 Sep 2024 15:14:11 +0300
Subject: [PATCH] Added circle progress while titles is loading and fix missing
 images

---
 frontend/index.html                   |   1 +
 frontend/src/pages/index.vue          | 130 +++++++++++++-------------
 frontend/src/pages/settings/index.vue |   2 +-
 3 files changed, 69 insertions(+), 64 deletions(-)
diff --git a/frontend/index.html b/frontend/index.html
index dde16aa..6f1b9e0 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <meta name="referrer" content="no-referrer" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Vue + TS</title>
diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue
index 42e9487..a413515 100644
--- a/frontend/src/pages/index.vue
+++ b/frontend/src/pages/index.vue
@@ -1,76 +1,80 @@
 <template>
 
-
-    <form @submit.prevent="filterTitles">
-        <div class="field large prefix round fill">
-            <i class="front">search</i>
-            <input v-model="search" type="text">
-        </div>
-    </form>
-
-    <nav>
-        <a class="chip" @click="updateByCodename('')">
-            <i id="update_all_icon">done_all</i>
-            <span>Завантажити нові серії</span>
-        </a>
-        <a class="chip" @click="fetchTorrents">
-            <i>restart_alt</i>
-            <span>Оновити список</span>
-        </a>
-        <div class="max"></div>
-        <button class="round fill">
-            <span>Сортування</span>
-            <i>arrow_drop_down</i>
-            <menu id="sort-menu">
-                <a @click="sortTitles('name')">За назвою</a>
-                <a @click="sortTitles('date')">За датою</a>
-                <a @click="sortTitles('release')">За релізером</a>
-            </menu>
-        </button>
-    </nav>
-
-    <article class="no-padding" v-for="title in titles">
-        <div class="grid">
-            <div class="s12 m6 l3">
-                <img class="responsive " :src=title.image>
+    <main v-if="titles.length > 0">
+        <form @submit.prevent="filterTitles">
+            <div class="field large prefix round fill">
+                <i class="front">search</i>
+                <input v-model="search" type="text">
             </div>
-            <div class="s9">
-                <div class="padding">
-                    <h5 class="primary-text">{{ title.torrent_name }} ({{ title.codename }})</h5>
+        </form>
 
-                    <hr class="medium">
+        <nav>
+            <a class="chip" @click="updateByCodename('')">
+                <i id="update_all_icon">done_all</i>
+                <span>Завантажити нові серії</span>
+            </a>
+            <a class="chip" @click="fetchTorrents">
+                <i>restart_alt</i>
+                <span>Оновити список</span>
+            </a>
+            <div class="max"></div>
+            <button class="round fill">
+                <span>Сортування</span>
+                <i>arrow_drop_down</i>
+                <menu id="sort-menu">
+                    <a @click="sortTitles('name')">За назвою</a>
+                    <a @click="sortTitles('date')">За датою</a>
+                    <a @click="sortTitles('release')">За релізером</a>
+                </menu>
+            </button>
+        </nav>
 
-                    <div>
-                        <a class="chip no-margin"><i>route</i><span>{{ title.download_dir }}</span></a>
-                        <a class="chip no-margin"><i>signature</i><span>{{ title.release_group }}</span></a>
-                        <a class="chip no-margin"><i>calendar_month</i><span>{{ title.publish_date }}</span></a>
-                        <a class="chip no-margin"><i>tag</i><span>{{ title.hash }}</span></a>
-                    </div>
+        <article class="no-padding" v-for="title in titles">
+            <div class="grid">
+                <div class="s12 m6 l3">
+                    <img class="responsive " :src=title.image>
+                </div>
+                <div class="s9">
+                    <div class="padding">
+                        <h5 class="primary-text">{{ title.torrent_name }} ({{ title.codename }})</h5>
 
-                    <hr class="large">
+                        <hr class="medium">
 
-                    <div>
-                        <a class="chip primary-border no-margin" :href="'https://toloka.to/' + title.guid">
-                            <i>link</i>
-                            <span>Посилання</span>
-                        </a>
-                        <a class="chip green-border no-margin" @click="updateByCodename(title.codename)">
-                            <i>update</i>
-                            <span>Оновити</span>
-                        </a>
-                        <a class="chip amber-border no-margin" @click="editByCodename(title.codename)">
-                            <i>edit</i>
-                            <span>Редагувати</span>
-                        </a>
-                        <a class="chip red-border no-margin" @click="deleteByCodename(title.codename)">
-                            <i>delete</i>
-                            <span>Видалити</span>
-                        </a>
+                        <div>
+                            <a class="chip no-margin"><i>route</i><span>{{ title.download_dir }}</span></a>
+                            <a class="chip no-margin"><i>signature</i><span>{{ title.release_group }}</span></a>
+                            <a class="chip no-margin"><i>calendar_month</i><span>{{ title.publish_date }}</span></a>
+                            <a class="chip no-margin"><i>tag</i><span>{{ title.hash }}</span></a>
+                        </div>
+
+                        <hr class="large">
+
+                        <div>
+                            <a class="chip primary-border no-margin" :href="'https://toloka.to/' + title.guid">
+                                <i>link</i>
+                                <span>Посилання</span>
+                            </a>
+                            <a class="chip green-border no-margin" @click="updateByCodename(title.codename)">
+                                <i>update</i>
+                                <span>Оновити</span>
+                            </a>
+                            <a class="chip amber-border no-margin" @click="editByCodename(title.codename)">
+                                <i>edit</i>
+                                <span>Редагувати</span>
+                            </a>
+                            <a class="chip red-border no-margin" @click="deleteByCodename(title.codename)">
+                                <i>delete</i>
+                                <span>Видалити</span>
+                            </a>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </article>
+        </article>
+    </main>
+    <main class="responsive middle-align center-align" v-else>
+        <progress class="circle extra"></progress>
+    </main>
 
     <dialog :class="{ 'active': isUpdated }">
         <h5 class="primary-text">{{ update.response_code }}</h5>
diff --git a/frontend/src/pages/settings/index.vue b/frontend/src/pages/settings/index.vue
index 26204ab..7fd2c68 100644
--- a/frontend/src/pages/settings/index.vue
+++ b/frontend/src/pages/settings/index.vue
@@ -20,7 +20,7 @@
     <article class="secondary-text">
         <a class="row wave"><i>title</i> Toloka2Web v2 Vue Version</a>
         <hr>
-        <a class="row wave"><i>conversion_path</i> v1.0.3</a>
+        <a class="row wave"><i>conversion_path</i> v1.0.4</a>
     </article>
 
 </template>
