Animacja ładowania danych w widoku dziennika RJ (WIP)

src/assets/icon-loading.svg

@@ -0,0 +1,60 @@
+<svg width="79" height="127" viewBox="0 0 79 127" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon-loading">
+<g id="Rectangle 37">
+<rect id="Rectangle 38" x="36.9999" y="79" width="6" height="16" fill="#FF0000"/>
+<rect id="Rectangle 40" x="36.9999" y="111" width="6" height="16" fill="#FF0000"/>
+<rect id="Rectangle 39" x="36.9999" y="95" width="6" height="16" fill="white"/>
+</g>
+<g id="Group 8">
+<path id="Vector 15" d="M59.5018 41.0003H23.0018C-1.49817 41.0003 -0.498171 79.5003 23.0018 79.5003H59.5018C83.0018 79.5003 84.0018 41.0003 59.5018 41.0003Z" fill="#3F3E3E"/>
+<g id="Group 51">
+<circle id="light-left" cx="22.9999" cy="60" r="9" fill="#FF1313" fill-opacity="1"/>
+
+<animate
+    attributeType="XML"
+    attributeName="opacity"
+    values="0.25;1;1;0.25;0.25"
+    dur="1s"
+    repeatCount="indefinite"
+/>
+</g>
+
+<g id="Group 51">
+<circle id="light-right" cx="57.9999" cy="60" r="9" fill="#FF1313" fill-opacity="1"/>
+
+<animate
+    attributeType="XML"
+    attributeName="opacity"
+    values="1;0.25;0.25;1;1"
+    dur="1s"
+    repeatCount="indefinite"
+/>
+</g>
+
+
+</g>
+<g id="Group 52">
+<rect id="Rectangle 36" x="37.9999" y="10" width="4" height="31" fill="#525252"/>
+<g id="Vector 23">
+<path id="Rectangle 28" d="M4.09756 32.3241L10.9579 29.2933L14.1908 36.611L7.33047 39.6418L3.42724 36.9932L4.09756 32.3241Z" fill="#FF0000"/>
+<path id="Rectangle 30" d="M10.9579 29.2933L20.105 25.2522L23.3379 32.5698L14.1908 36.611L12.5743 32.9521L10.9579 29.2933Z" fill="white"/>
+<path id="Rectangle 34" d="M20.105 25.2522L29.2521 21.211L32.485 28.5287L23.3379 32.5698L21.7214 28.911L20.105 25.2522Z" fill="#FF0000"/>
+<path id="Rectangle 35" d="M47.5463 13.1288L56.6934 9.08762L59.9263 16.4053L50.7792 20.4464L49.1627 16.7876L47.5463 13.1288Z" fill="#FF0000"/>
+<path id="Rectangle 31" d="M29.2521 21.211L38.3992 17.1699L41.6321 24.4876L32.485 28.5287L30.8685 24.8699L29.2521 21.211Z" fill="white"/>
+<path id="Rectangle 32" d="M38.3992 17.1699L47.5463 13.1288L50.7792 20.4464L41.6321 24.4876L40.0156 20.8287L38.3992 17.1699Z" fill="white"/>
+<path id="Rectangle 33" d="M56.6934 9.08762L65.8404 5.04649L69.0734 12.3642L59.9263 16.4053L58.3098 12.7465L56.6934 9.08762Z" fill="white"/>
+<path id="Rectangle 29" d="M73.1581 1.81359L65.8405 5.04649L69.0734 12.3642L76.391 9.13126L76.604 4.6642L73.1581 1.81359Z" fill="#FF0000"/>
+</g>
+<g id="Vector 24">
+<path id="Rectangle 28_2" d="M6.36567 3.47438L13.3598 6.18222L10.4714 13.6426L3.47731 10.9348L2.59012 6.30195L6.36567 3.47438Z" fill="#FF0000"/>
+<path id="Rectangle 30_2" d="M13.3597 6.18222L22.6852 9.79268L19.7969 17.2531L10.4714 13.6426L11.9156 9.91241L13.3597 6.18222Z" fill="white"/>
+<path id="Rectangle 34_2" d="M22.6853 9.79268L32.0108 13.4031L29.1224 20.8635L19.7969 17.2531L21.2411 13.5229L22.6853 9.79268Z" fill="#FF0000"/>
+<path id="Rectangle 35_2" d="M50.6617 20.6241L59.9872 24.2345L57.0989 31.6949L47.7734 28.0844L49.2176 24.3542L50.6617 20.6241Z" fill="#FF0000"/>
+<path id="Rectangle 31_2" d="M32.0107 13.4031L41.3362 17.0136L38.4479 24.474L29.1224 20.8635L30.5666 17.1333L32.0107 13.4031Z" fill="white"/>
+<path id="Rectangle 32_2" d="M41.3363 17.0136L50.6618 20.6241L47.7734 28.0844L38.4479 24.474L39.8921 20.7438L41.3363 17.0136Z" fill="white"/>
+<path id="Rectangle 33_2" d="M59.9872 24.2345L69.3127 27.845L66.4243 35.3054L57.0988 31.6949L58.543 27.9647L59.9872 24.2345Z" fill="white"/>
+<path id="Rectangle 29_2" d="M76.7731 30.7333L69.3127 27.845L66.4243 35.3054L73.8847 38.1937L77.194 35.1856L76.7731 30.7333Z" fill="#FF0000"/>
+</g>
+</g>
+</g>
+</svg>

src/views/JournalView.vue

@@ -4,10 +4,10 @@
       <JournalOptions @changedOptions="search" />
 
       <div class="history_list">
-        <div class="list_wrapper">
+        <div class="list_wrapper" ref="scrollElement">
           <transition name="warning" mode="out-in">
             <div :key="historyDataStatus.status">
-              <div v-if="isDataLoading" class="history_warning">{{ $t('app.loading') }}</div>
+              <!-- <div v-if="isDataLoading" class="history_warning"></div> -->
 
               <div v-if="!isDataLoading && isDataError" class="history_warning error">
                 {{ $t('app.error') }}
@@ -110,12 +110,17 @@
           </transition>
         </div>
       </div>
+
+      <div class="history-loading" v-if="isDataLoading">
+        <img :src="icons.loading" alt="loading icon" />
+        <span class="loading-label">{{ $t('app.loading') }}</span>
+      </div>
     </div>
   </section>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, provide, reactive, Ref, ref } from 'vue';
+import { computed, defineComponent, onMounted, onUnmounted, provide, reactive, Ref, ref } from 'vue';
 import axios from 'axios';
 
 import SearchBox from '@/components/Global/SearchBox.vue';
@@ -130,9 +135,7 @@ import { URLs } from '@/scripts/utils/apiURLs';
 
 const PROD_MODE = true;
 
-const API_URL = PROD_MODE
-  ? `${URLs.stacjownikAPI}/api/getTimetables`
-  : 'http://localhost:3001/api/getTimetables';
+const API_URL = PROD_MODE ? `${URLs.stacjownikAPI}/api/getTimetables` : 'http://localhost:3001/api/getTimetables';
 
 interface APIResponse {
   errorMessage: string | null;
@@ -199,7 +202,9 @@ export default defineComponent({
   mixins: [dateMixin],
 
   data: () => ({
-    exitIcon: require('@/assets/icon-exit.svg'),
+    icons: {
+      loading: require('@/assets/icon-loading.svg'),
+    },
   }),
 
   setup() {
@@ -211,11 +216,34 @@ export default defineComponent({
     const sorterActive = ref({ id: 'timetableId', dir: -1 });
     const searchedDriver = ref('');
     const searchedTrain = ref('');
+    const countFromIndex = ref(0);
+    const countLimit = 15;
 
     provide('searchedTrain', searchedTrain);
     provide('searchedDriver', searchedDriver);
     provide('sorterActive', sorterActive);
 
+    const scrollElement: Ref<HTMLElement | null> = ref(null);
+
+    const handleScroll = (e: Event) => {
+      if (!scrollElement.value) return;
+
+      const element = scrollElement.value;
+
+      if (element.getBoundingClientRect().bottom * 0.9 < window.innerHeight) {
+        console.log('gituwa');
+        // historyDataStatus.value.status = DataStatus.Loading
+      }
+    };
+
+    onMounted(() => {
+      window.addEventListener('scroll', handleScroll);
+    });
+
+    onUnmounted(() => {
+      window.removeEventListener('scroll', handleScroll);
+    });
+
     return {
       historyList: ref([]) as Ref<TimetableHistory[]>,
       historyDataStatus,
@@ -227,6 +255,10 @@ export default defineComponent({
       searchedTrain,
       sorterActive,
 
+      countFromIndex,
+      countLimit,
+
+      scrollElement,
       maxCount: ref(15),
 
       filters: reactive({ ...initFilters }) as { [filterSection: string]: { [filterId: string]: FilterOption } },
@@ -282,7 +314,7 @@ export default defineComponent({
       else if (this.sorterActive.id == 'beginDate') queries.push('sortBy=beginDate');
       else queries.push('sortBy=timetableId');
 
-      queries.push('countLimit=15')
+      queries.push('countLimit=15');
 
       try {
         const responseData: APIResponse | null = await (await axios.get(`${API_URL}?${queries.join('&')}`)).data;
@@ -416,4 +448,26 @@ li,
     font-size: 1.25em;
   }
 }
+
+.history-loading {
+  margin-top: 1em;
+
+  img {
+    margin: 0 auto;
+    display: block;
+
+    width: 8em;
+  }
+
+  text-align: center;
+
+  .loading-label {
+
+    background: white;
+    color: black;
+
+    padding: 0.15em 0.25em;
+    font-size: 1.3em;
+  }
+}
 </style>