zamiana infinite scrolla na przyciski

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -1,8 +1,9 @@
 <template>
-  <section class="scenery-dispatchers-history scenery-section">
+  <section class="scenery-table-section">
-    <Loading v-if="dataStatus != 2" />
+    <Loading v-if="dataStatus != DataStatus.Loaded && historyList.length == 0" />
+    <div class="no-history" v-else-if="historyList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
 
-    <table class="scenery-history-table" v-else-if="historyList.length">
+    <table class="scenery-history-table" v-else="historyList.length">
       <thead>
         <th>{{ $t('scenery.dispatchers-history-hash') }}</th>
         <th>{{ $t('scenery.dispatchers-history-dispatcher') }}</th>
@@ -48,10 +49,13 @@
         </tr>
       </tbody>
     </table>
-
-    <div class="no-history" v-else>{{ $t('scenery.history-list-empty') }}</div>
-    <div ref="bottomDiv"></div>
   </section>
+
+  <div class="bottom-info">
+    <button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory">
+      {{ $t('scenery.bottom-info') }}
+    </button>
+  </div>
 </template>
 
 <script lang="ts">
@@ -80,36 +84,35 @@ export default defineComponent({
     return {
       historyList: [] as DispatcherHistory[],
       dataStatus: DataStatus.Loading,
+      DataStatus,
     };
   },
 
-  mounted() {
+  async activated() {
-    this.mountObserver(this.fireObserverAction, this.$refs['bottomDiv'] as Element);
+    // if (this.historyList.length == 0) {
+    const fetchedHistory = await this.fetchAPIData();
+    if (fetchedHistory) this.historyList = fetchedHistory;
+    // }
   },
 
-  unmounted() {
-    this.unmountObserver();
-  },
-
-  activated() {
-    if (this.historyList.length == 0) this.fetchAPIData();
-  },
   methods: {
-    async fetchAPIData(countFrom = 0, countLimit = 30) {
+    async fetchAPIData(countFrom = 0, countLimit = 30): Promise<DispatcherHistory[] | null> {
       try {
+        this.dataStatus = DataStatus.Loading;
+
         const requestString = `${URLs.stacjownikAPI}/api/getDispatchers?stationName=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
         const historyAPIData: DispatcherHistory[] = await (await axios.get(requestString)).data;
 
-        this.historyList.push(...historyAPIData);
         this.dataStatus = DataStatus.Loaded;
+        return historyAPIData;
       } catch (error) {
+        this.dataStatus = DataStatus.Error;
         console.error(error);
+        return null;
       }
     },
-
+    navigateToHistory() {
-    fireObserverAction() {
+      this.$router.push(`/journal/dispatchers?sceneryName=${this.station.name}`);
-      if (this.historyList.length > 0 && this.dataStatus == DataStatus.Loaded)
-        this.fetchAPIData(this.historyList.length);
     },
   },
   components: { Loading },

src/components/SceneryView/SceneryHeader.vue

@@ -4,7 +4,9 @@
       {{ station.name }}
     </a>
 
-    <div class="scenery-abbrev">{{ $t('scenery.abbrev') }} <b>{{ station.generalInfo?.abbr }}</b></div>
+    <div class="scenery-abbrev">
+      {{ $t('scenery.abbrev') }} <b>{{ station.generalInfo?.abbr }}</b>
+    </div>
 
     <div class="scenery-hash" v-if="station.onlineInfo?.hash">#{{ station.onlineInfo.hash }}</div>
   </section>
@@ -28,6 +30,10 @@ export default defineComponent({
 @import '../../styles/variables.scss';
 @import '../../styles/responsive.scss';
 
+.info-header {
+  margin-top: 1em;
+}
+
 .scenery-name {
   font-weight: bold;
   font-size: 3em;

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -1,8 +1,9 @@
 <template>
-  <section class="scenery-timetables-history scenery-section">
+  <section class="scenery-table-section">
-    <Loading v-if="dataStatus != 2" />
+    <Loading v-if="dataStatus != DataStatus.Loaded" />
+    <div class="no-history" v-else-if="historyList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
 
-    <table class="scenery-history-table" v-else-if="historyList.length">
+    <table class="scenery-history-table" v-else>
       <thead>
         <th>{{ $t('scenery.timetables-history-id') }}</th>
         <th>{{ $t('scenery.timetables-history-number') }}</th>
@@ -26,7 +27,7 @@
           <td>
             <router-link
               v-if="historyItem.authorName"
-              :to="`/journal/dispatchers?dispatcherName=${historyItem.authorName}`"
+              :to="`/journal/timetables?authorName=${historyItem.authorName}`"
               >{{ historyItem.authorName }}
             </router-link>
             <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
@@ -38,10 +39,13 @@
         </tr>
       </tbody>
     </table>
-
-    <div class="no-history" v-else>{{ $t('scenery.history-list-empty') }}</div>
-    <div ref="bottomDiv"></div>
   </section>
+
+  <div class="bottom-info">
+    <button class="btn btn--option" v-if="historyList.length > 0" @click="navigateToHistory()">
+      {{ $t('scenery.bottom-info') }}
+    </button>
+  </div>
 </template>
 
 <script lang="ts">
@@ -69,37 +73,31 @@ export default defineComponent({
     return {
       historyList: [] as TimetableHistory[],
       dataStatus: DataStatus.Loading,
+      DataStatus,
     };
   },
 
-  mounted() {
+  async activated() {
-    this.mountObserver(this.fireObserverAction, this.$refs['bottomDiv'] as Element);
+    const fetchedHistory = await this.fetchAPIData();
-  },
+    if (fetchedHistory) this.historyList = fetchedHistory.timetables;
-
-  unmounted() {
-    this.unmountObserver();
-  },
-
-  activated() {
-    if (this.historyList.length == 0) this.fetchAPIData();
   },
 
   methods: {
-    async fetchAPIData(countFrom = 0, countLimit = 15) {
+    async fetchAPIData(countFrom = 0, countLimit = 15): Promise<SceneryTimetableHistory | null> {
       try {
         const requestString = `${URLs.stacjownikAPI}/api/getIssuedTimetables?name=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
         const historyAPIData: SceneryTimetableHistory = await (await axios.get(requestString)).data;
 
-        this.historyList.push(...historyAPIData.timetables);
         this.dataStatus = DataStatus.Loaded;
+        return historyAPIData;
       } catch (error) {
         console.error(error);
+        return null;
       }
     },
 
-    fireObserverAction() {
+    navigateToHistory() {
-      if (this.historyList.length > 0 && this.dataStatus == DataStatus.Loaded)
+      this.$router.push(`/journal/timetables?issuedFrom=${this.station.name}`);
-        this.fetchAPIData(this.historyList.length);
     },
   },
   components: { Loading },

src/locales/en.json

@@ -382,7 +382,9 @@
     "forum-topic": "Official {name} forum topic",
 
     "pragotron-link": "Timetable pallet board (beta)",
-    "tablice-link": "Timetable summary board (by Thundo)"
+    "tablice-link": "Timetable summary board (by Thundo)",
+
+    "bottom-info": "Show full history in the Journal tab"
   },
   "availability": {
     "title": "Availability",

src/locales/pl.json

@@ -385,7 +385,9 @@
     "forum-topic": "Oficjalny wątek scenerii {name}",
 
     "pragotron-link": "Paletowa tablica informacyjna (beta)",
-    "tablice-link": "Tablica informacyjna zbiorcza (autorstwa Thundo)"
+    "tablice-link": "Tablica informacyjna zbiorcza (autorstwa Thundo)",
+
+    "bottom-info": "Pokaż pełną historię w zakładce Dziennika"
   },
   "availability": {
     "title": "Dostępność",

src/mixins/listObserverMixin.ts

@@ -9,8 +9,10 @@ export default defineComponent({
   methods: {
     mountObserver(actionFunction: () => void, target: Element) {
       this.observer = new IntersectionObserver((entries) => {
-        if (entries[0].intersectionRatio > 0) actionFunction();
+        console.log(entries);
-      });
+        
+        if (entries[0].intersectionRatio > 0.5) actionFunction();
+      }, { threshold: 0.2 });
 
       this.observer.observe(target);
     },

src/styles/sceneryViewTables.scss

@@ -1,3 +1,9 @@
+.scenery-table-section {
+  position: relative;
+  height: 100%;
+  overflow-y: scroll;
+}
+
 table.scenery-history-table {
   width: 100%;
   border-collapse: collapse;
@@ -29,3 +35,12 @@ table.scenery-history-table {
   font-size: 1.2em;
   color: #ccc;
 }
+
+.bottom-info {
+  display: flex;
+  justify-content: center;
+
+  button {
+    padding: 0.5em;
+  }
+}

src/views/JournalDispatchers.vue

@@ -194,8 +194,10 @@ export default defineComponent({
     },
 
     handleQueries(query: LocationQuery) {
-      if ('sceneryName' in query) this.searchersValues['search-station'] = `${query.sceneryName}`;
+      const queryKeys = Object.keys(query);
-      if ('dispatcherName' in query) this.searchersValues['search-dispatcher'] = `${query.dispatcherName}`;
+
+      if (queryKeys.includes('sceneryName')) this.setSearchers('', `${query.sceneryName}`, '');
+      if (queryKeys.includes('dispatcherName')) this.setSearchers('', '', `${query.dispatcherName}`);
     },
 
     setSearchers(date: string, station: string, dispatcher: string) {

src/views/JournalTimetables.vue

@@ -190,7 +190,11 @@ export default defineComponent({
     },
 
     handleQueries(query: LocationQuery) {
-      if ('timetableId' in query) this.searchersValues['search-train'] = `#${query.timetableId}`;
+      const queryKeys = Object.keys(query);
+
+      if (queryKeys.includes('timetableId')) this.setSearchers('', '', `#${query.timetableId}`, '', '');
+      if (queryKeys.includes('issuedFrom')) this.setSearchers('', '', '', '', `${query.issuedFrom}`);
+      if (queryKeys.includes('authorName')) this.setSearchers('', '', '', `${query.authorName}`, '');
     },
 
     setSearchers(date: string, driver: string, train: string, dispatcher: string, issuedFrom: string) {

src/views/SceneryView.vue

@@ -33,12 +33,7 @@
         </div>
 
         <keep-alive>
-          <component
+          <component :is="currentViewCompontent" :station="stationInfo" :key="currentViewCompontent"></component>
-            :is="currentViewCompontent"
-            :station="stationInfo"
-            :timetableOnly="timetableOnly"
-            :key="currentViewCompontent"
-          ></component>
         </keep-alive>
       </div>
     </div>
@@ -172,12 +167,6 @@ button.back-btn {
   }
 }
 
-.scenery-section {
-  position: relative;
-  height: 100%;
-  overflow-y: scroll;
-}
-
 .scenery-wrapper {
   display: grid;
   grid-template-columns: 4fr 5fr;
@@ -214,14 +203,14 @@ button.back-btn {
 
 .scenery-right {
   background: #181818;
-  padding: 2em 0.5em;
+  padding: 1em 0.5em;
 
   height: 95vh;
   min-height: 550px;
   max-height: 1000px;
 
   display: grid;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto 1fr auto;
   gap: 1em;
 }