From e10b5abe90e6cd773fded6f9f309884f2197f3c1 Mon Sep 17 00:00:00 2001
From: "p.belezov" <p.belezov@mfc38.ru>
Date: Thu, 7 Mar 2024 12:35:07 +0800
Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B5=D0=B0=D0=BB=D0=B8=D0=B7=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=B0=D0=BB=20=D0=BF=D1=80=D0=B5=D0=BB=D0=BE=D0=B0=D0=B4?=
 =?UTF-8?q?=D0=B5=D1=80=D1=8B=20=D0=BD=D0=B0=20=D1=81=D1=82=D1=80=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=86=D1=83=20=D1=80=D0=B0=D1=81=D0=BF=D0=B8=D1=81?=
 =?UTF-8?q?=D0=B0=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/views/Preloader/Preloader.vue       | 22 -------------------
 resources/views/Preloader/PreloaderWindow.vue | 15 -------------
 resources/views/Schedule.vue                  | 22 +++++++++++--------
 resources/views/Schedule/Links.vue            |  9 ++++----
 resources/views/Schedule/ScheduleTable.vue    |  9 ++++----
 resources/views/Welcome.vue                   | 11 ++--------
 6 files changed, 25 insertions(+), 63 deletions(-)
 delete mode 100644 resources/views/Preloader/Preloader.vue
 delete mode 100644 resources/views/Preloader/PreloaderWindow.vue

diff --git a/resources/views/Preloader/Preloader.vue b/resources/views/Preloader/Preloader.vue
deleted file mode 100644
index f955302..0000000
--- a/resources/views/Preloader/Preloader.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-    <v-dialog
-        class=""
-        :model-value="true"
-        width="auto"
-        persistent
-    >
-        <PreloaderWindow/>
-    </v-dialog>
-</template>
-
-<script>
-import PreloaderWindow from "./PreloaderWindow.vue";
-
-export default {
-    name: "Preloader"
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/resources/views/Preloader/PreloaderWindow.vue b/resources/views/Preloader/PreloaderWindow.vue
deleted file mode 100644
index fbd1ea3..0000000
--- a/resources/views/Preloader/PreloaderWindow.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-    <div class="window glass rounded-lg d-flex flex-column justify-center align-center px-2">
-        <v-progress-linear indeterminate rounded="lg"/>
-    </div>
-</template>
-
-<script>
-export default {
-    name: "PreloaderWindow"
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/resources/views/Schedule.vue b/resources/views/Schedule.vue
index 8281ee5..8d51fc2 100644
--- a/resources/views/Schedule.vue
+++ b/resources/views/Schedule.vue
@@ -1,7 +1,8 @@
 <template>
     <v-sheet class="mt-5 mb-5 rounded-lg w-75">
         <p class="text-h3 ma-5">Расписание стримов</p>
-        <p class="ma-5 text-h4">{{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
+        <v-skeleton-loader v-if="fetching" type="text" />
+        <p v-else class="ma-5 text-h4"> {{ parseDate(dates[0].current_date) }} - {{ parseDate(dates[1].current_date) }}</p>
         <ScheduleTable/>
         <p class="text-h3 ma-5">Ссылочки</p>
         <Links/>
@@ -12,27 +13,30 @@
 import axios from "axios";
 import ScheduleTable from "./Schedule/ScheduleTable.vue";
 import Links from "./Schedule/Links.vue";
-import {useScheduleStore} from '../stores/Schedule.js';
 
 export default {
     name: "Schedule",
     components: {Links, ScheduleTable},
     data: () => ({
-        dates: []
+        dates: [],
+        fetching: true
     }),
     methods: {
         parseDate(date){
             let dateArr = date.split("-");
             return dateArr[2] + "." + dateArr[1];
+        },
+        async getDates(){
+            await axios
+                .get('/api/v1/dates')
+                .then(response => {
+                    this.dates = response.data;
+                    this.fetching = false;
+                });
         }
     },
     mounted() {
-        axios
-            .get('/api/v1/dates')
-            .then(response => {
-                this.dates = response.data;
-                useScheduleStore().fetchingDates = false;
-            });
+        this.getDates();
     }
 }
 </script>
diff --git a/resources/views/Schedule/Links.vue b/resources/views/Schedule/Links.vue
index a673dd4..42146ef 100644
--- a/resources/views/Schedule/Links.vue
+++ b/resources/views/Schedule/Links.vue
@@ -1,18 +1,18 @@
 <script>
     import axios from "axios";
-    import {useScheduleStore} from '../../stores/Schedule.js';
 
     export default {
         name: "Links",
         data: () => ({
-            links: []
+            links: [],
+            fetching: true
         }),
         mounted() {
             axios
                 .get('/api/v1/links')
                 .then(response => {
                     this.links = response.data;
-                    useScheduleStore().fetchingLinks = false;
+                    this.fetching = false;
                 });
         }
     }
@@ -21,7 +21,8 @@
 <template>
     <div class="w-100 d-flex justify-center">
         <v-list class="w-66">
-            <v-list-item class="ma-5 bg-gradient-noh" elevation="6" v-for="link in links" :href="link.link"> <!-- style="background-color: #E57373; color: #FFFFFF" -->
+            <v-skeleton-loader v-if="fetching" type="list-item"/>
+            <v-list-item v-else class="ma-5 bg-gradient-noh" elevation="6" v-for="link in links" :href="link.link"> <!-- style="background-color: #E57373; color: #FFFFFF" -->
                 <template v-slot:prepend>
                     <v-avatar :image="link.image" rounded="0"></v-avatar>
                 </template>
diff --git a/resources/views/Schedule/ScheduleTable.vue b/resources/views/Schedule/ScheduleTable.vue
index 578822c..5ffee7e 100644
--- a/resources/views/Schedule/ScheduleTable.vue
+++ b/resources/views/Schedule/ScheduleTable.vue
@@ -1,11 +1,11 @@
 <script>
     import axios from "axios";
-    import {useScheduleStore} from '../../stores/Schedule.js';
 
     export default {
         name: "ScheduleTable",
         data: () => ({
-            schedules: []
+            schedules: [],
+            fetching: true
         }),
         methods: {
             parseDate(date){
@@ -18,7 +18,7 @@
                 .get('/api/v1/schedules')
                 .then(response => {
                     this.schedules = response.data;
-                    useScheduleStore().fetchingTable = false;
+                    this.fetching = false;
                 });
         }
     }
@@ -26,7 +26,8 @@
 
 <template>
     <div class="w-100 d-flex justify-center">
-        <v-table class="text-h5 w-66">
+        <v-skeleton-loader v-if="fetching" type="table"/>
+        <v-table v-else class="text-h5 w-66">
             <tbody>
             <tr v-for="schedule in schedules">
                 <td>{{ parseDate(schedule.current_date) }} {{ schedule.weekday_name }} {{ schedule.stream_time }}</td>
diff --git a/resources/views/Welcome.vue b/resources/views/Welcome.vue
index c2b638c..3fd0e79 100644
--- a/resources/views/Welcome.vue
+++ b/resources/views/Welcome.vue
@@ -1,24 +1,17 @@
 <template>
     <v-app>
         <v-sheet class="bg-gradient h-100 w-100 d-flex justify-center">
-            <Preloader v-if="fetching.value" />
-            <Schedule v-else />
+            <Schedule/>
         </v-sheet>
     </v-app>
 </template>
 
 <script>
 import Schedule from "./Schedule.vue";
-import Preloader from "./Preloader/Preloader.vue";
-import {ref} from "vue";
-import {useScheduleStore} from '../stores/Schedule.js';
 
 export default {
     name: "Welcome",
-    components: {Preloader, Schedule},
-    data: () => ({
-        fetching: ref(useScheduleStore().fetchingDates || useScheduleStore().fetchingLinks || useScheduleStore().fetchingTable)
-    })
+    components: {Schedule}
 }
 </script>