cleanup c.d.

src/components/JournalView/JournalDispatchersList.vue

@@ -82,13 +82,12 @@
             </tbody>
           </table>
 
-          <button
-            class="btn btn--option btn--load-data"
-            v-if="!scrollNoMoreData && scrollDataLoaded && dispatcherHistory.length > 15"
-            @click="addHistoryData"
-          >
-            {{ $t('journal.load-data') }}
-          </button>
+          <AddDataButton
+            :list="dispatcherHistory"
+            :scrollDataLoaded="scrollDataLoaded"
+            :scrollNoMoreData="scrollNoMoreData"
+            @addHistoryData="addHistoryData"
+          />
         </div>
       </div>
     </transition>
@@ -113,9 +112,10 @@ import { DataStatus } from '../../scripts/enums/DataStatus';
 import { useStore } from '../../store/store';
 import Loading from '../Global/Loading.vue';
 import { regions } from '../../data/options.json';
+import AddDataButton from '../Global/AddDataButton.vue';
 
 export default defineComponent({
-  components: { Loading },
+  components: { Loading, AddDataButton },
 
   mixins: [dateMixin, styleMixin, imageMixin],
 
@@ -195,6 +195,8 @@ table.scenery-history-table {
   position: relative;
   text-align: center;
 
+  margin-bottom: 1em;
+
   thead {
     position: sticky;
     top: 0;
@@ -208,7 +210,7 @@ table.scenery-history-table {
   tr {
     background-color: var(--_bg-row);
     border-bottom: 2px solid black;
-  
+
     &:last-child {
       border: none;
     }

src/components/JournalView/JournalTimetables/JournalTimetablesList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="journal-list">
+  <div>
     <transition name="status-anim" mode="out-in">
       <div :key="dataStatus">
         <div class="journal_warning" v-if="store.isOffline">
@@ -17,17 +17,13 @@
         </div>
 
         <div v-else>
-          <ul>
-            <ListItem :timetableHistory="timetableHistory" />
-          </ul>
-          <!-- <transition-group tag="ul" name="list-anim"> -->
-          <!-- </transition-group> -->
+          <TimetableHistoryList :timetableHistory="timetableHistory" />
 
-          <!-- AddDataButton -->
           <AddDataButton
             :list="timetableHistory"
             :scrollDataLoaded="scrollDataLoaded"
             :scrollNoMoreData="scrollNoMoreData"
+            @addHistoryData="addHistoryData"
           />
         </div>
       </div>
@@ -40,16 +36,17 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import { DataStatus } from '../../scripts/enums/DataStatus';
-import { TimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
-import { useStore } from '../../store/store';
-import Loading from '../Global/Loading.vue';
-import ProgressBar from '../Global/ProgressBar.vue';
-import ListItem from './JournalTimetables/ListItem.vue';
-import AddDataButton from '../Global/AddDataButton.vue';
+import { DataStatus } from '../../../scripts/enums/DataStatus';
+import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
+import { useStore } from '../../../store/store';
+
+import Loading from '../../Global/Loading.vue';
+import ProgressBar from '../../Global/ProgressBar.vue';
+import AddDataButton from '../../Global/AddDataButton.vue';
+import TimetableHistoryList from './TimetableHistoryList.vue';
 
 export default defineComponent({
-  components: { ProgressBar, Loading, ListItem, AddDataButton },
+  components: { ProgressBar, Loading, AddDataButton, TimetableHistoryList },
 
   props: {
     timetableHistory: {
@@ -80,5 +77,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/animations.scss';
+@import '../../../styles/JournalSection.scss';
+@import '../../../styles/animations.scss';
 </style>

src/components/JournalView/JournalTimetables/ListItem.vue

@@ -1,124 +0,0 @@
-<template>
-  <li
-    v-for="{ timetable, showExtraInfo} in computedTimetableHistory"
-    class="journal_item"
-    :key="timetable.id"
-    @click="showExtraInfo.value = !showExtraInfo.value"
-  >
-    <div class="journal_item-info">
-      <!-- Item General -->
-      <ItemGeneral :timetable="timetable" />
-
-      <!-- Item Route -->
-      <span class="item-route">
-        <b>{{ timetable.route.replace('|', ' - ') }}</b>
-      </span>
-
-      <hr />
-
-      <!-- Item Stops -->
-      <ItemStops :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
-
-      <!-- Item Status -->
-      <ItemStatus :timetable="timetable" />
-
-      <button class="btn--option btn--show">
-        {{ $t('journal.stock-info') }}
-        <img :src="getIcon(`arrow-${showExtraInfo.value ? 'asc' : 'desc'}`)" alt="Arrow" />
-      </button>
-
-      <!-- Item Extra -->
-      <ItemExtra :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
-    </div>
-  </li>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, ref } from 'vue';
-import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
-import imageMixin from '../../../mixins/imageMixin';
-
-import ItemGeneral from './ItemGeneral.vue';
-import ItemStops from './ItemStops.vue';
-import ItemStatus from './ItemStatus.vue';
-import ItemExtra from './ItemExtra.vue';
-
-export default defineComponent({
-  mixins: [imageMixin],
-  props: {
-    timetableHistory: {
-      type: Array as PropType<TimetableHistory[]>,
-      required: true,
-    },
-  },
-  computed: {
-    computedTimetableHistory() {
-      return this.timetableHistory.map((timetable) => ({
-        timetable,
-        showExtraInfo: ref(false),
-      }));
-    },
-  },
-  methods: {},
-  components: { ItemGeneral, ItemStops, ItemStatus, ItemExtra },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../../styles/variables.scss';
-@import '../../../styles/responsive.scss';
-
-.btn--show {
-  display: flex;
-  font-weight: bold;
-  padding: 0.2em 0.45em;
-
-  img {
-    height: 1.3em;
-  }
-}
-
-.journal_item {
-  cursor: pointer;
-}
-
-.journal_item,
-.journal_warning {
-  background-color: #1a1a1a;
-  padding: 1em;
-  margin-bottom: 1em;
-}
-
-hr {
-  margin: 0.25em 0;
-}
-
-// badge.scss
-.badges {
-  display: flex;
-  gap: 0.25em;
-}
-
-@include smallScreen {
-  .journal_item-info {
-    text-align: center;
-  }
-
-  .item-route {
-    display: flex;
-    justify-content: center;
-  }
-
-
-  .btn--show {
-    margin: 1em auto 0 auto;
-  }
-
-  .info-general,
-  .general-train,
-  .stock-specs,
-  .stock-history {
-    justify-content: center;
-  }
-}
-</style>

src/components/JournalView/JournalTimetables/TimetableHistoryList.vue

@@ -0,0 +1,96 @@
+<template>
+  <ul class="journal-list">
+    <li
+      v-for="{ timetable, showExtraInfo } in computedTimetableHistory"
+      class="journal_item"
+      :key="timetable.id"
+      @click="showExtraInfo.value = !showExtraInfo.value"
+    >
+      <div class="journal_item-info">
+        <!-- General -->
+        <TimetableGeneral :timetable="timetable" />
+        <!-- Route -->
+        <span class="item-route">
+          <b>{{ timetable.route.replace('|', ' - ') }}</b>
+        </span>
+        <hr />
+        <!-- Stops -->
+        <TimetableStops :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
+        <!-- Status -->
+        <TimetableStatus :timetable="timetable" />
+        <button class="btn--option btn--show">
+          {{ $t('journal.stock-info') }}
+          <img :src="getIcon(`arrow-${showExtraInfo.value ? 'asc' : 'desc'}`)" alt="Arrow" />
+        </button>
+        <!-- Extra -->
+        <TimetableExtra :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent, ref } from 'vue';
+import imageMixin from '../../../mixins/imageMixin';
+import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
+
+import TimetableGeneral from './TimetableGeneral.vue';
+import TimetableStops from './TimetableStops.vue';
+import TimetableStatus from './TimetableStatus.vue';
+import TimetableExtra from './TimetableExtra.vue';
+
+export default defineComponent({
+  mixins: [imageMixin],
+  props: {
+    timetableHistory: {
+      type: Array as PropType<TimetableHistory[]>,
+      required: true,
+    },
+  },
+  computed: {
+    computedTimetableHistory() {
+      return this.timetableHistory.map((timetable) => ({
+        timetable,
+        showExtraInfo: ref(false),
+      }));
+    },
+  },
+  methods: {},
+  components: { TimetableGeneral, TimetableStops, TimetableStatus, TimetableExtra },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/variables.scss';
+@import '../../../styles/responsive.scss';
+@import '../../../styles/JournalSection.scss';
+
+.btn--show {
+  display: flex;
+  font-weight: bold;
+  padding: 0.2em 0.45em;
+
+  img {
+    height: 1.3em;
+  }
+}
+
+hr {
+  margin: 0.25em 0;
+}
+
+@include smallScreen {
+  .journal_item-info {
+    text-align: center;
+  }
+
+  .item-route {
+    display: flex;
+    justify-content: center;
+  }
+
+  .btn--show {
+    margin: 1em auto 0 auto;
+  }
+}
+</style>

src/styles/JournalSection.scss

@@ -1,6 +1,5 @@
 @import 'responsive.scss';
 @import 'animations.scss';
-//Styles
 
 .list_wrapper {
   overflow-y: auto;
@@ -10,10 +9,6 @@
   padding-right: 0.2em;
 }
 
-.journal-list {
-  position: relative;
-}
-
 .journal_wrapper {
   max-width: 1350px;
   width: 100%;
@@ -41,8 +36,8 @@
   }
 }
 
-.schedule-dates > * {
-  margin-right: 0.25em;
+.journal_item {
+  cursor: pointer;
 }
 
 .journal_item,
@@ -50,6 +45,7 @@
   background-color: #1a1a1a;
   padding: 1em;
   margin-bottom: 1em;
+  cursor: pointer;
 }
 
 .journal_top-bar {
@@ -59,7 +55,6 @@
   gap: 0.5em;
 
   position: relative;
-
   margin-bottom: 0.5em;
 }
 
@@ -72,10 +67,6 @@
 }
 
 @include smallScreen() {
-  .list_wrapper {
-    font-size: 1.1em;
-  }
-
   .journal_top-bar {
     justify-content: center;
     flex-wrap: wrap;
@@ -85,9 +76,3 @@
     text-align: center;
   }
 }
-
-@media (orientation: landscape) {
-  .list_wrapper {
-    font-size: 1em;
-  }
-}

src/views/JournalTimetables.vue

@@ -46,7 +46,6 @@ import DriverStats from '../components/JournalView/JournalDriverStats.vue';
 import JournalOptions from '../components/JournalView/JournalOptions.vue';
 import JournalStats from '../components/JournalView/JournalStats.vue';
 import JournalHeader from '../components/JournalView/JournalHeader.vue';
-import JournalTimetablesList from '../components/JournalView/JournalTimetablesList.vue';
 import Loading from '../components/Global/Loading.vue';
 
 import { DataStatus } from '../scripts/enums/DataStatus';
@@ -63,11 +62,12 @@ import {
   JournalTimetableSorter,
 } from '../scripts/types/JournalTimetablesTypes';
 import { journalTimetableFilters } from '../constants/Journal/JournalTimetablesConsts';
+import JournalTimetablesList from '../components/JournalView/JournalTimetables/JournalTimetablesList.vue';
 
 const TIMETABLES_API_URL = `${URLs.stacjownikAPI}/api/getTimetables`;
 
 export default defineComponent({
-  components: { DriverStats, Loading, JournalOptions, JournalTimetablesList, JournalStats, JournalHeader },
+  components: { DriverStats, Loading, JournalOptions, JournalStats, JournalHeader, JournalTimetablesList },
   mixins: [dateMixin, routerMixin, modalTrainMixin, imageMixin],
 
   name: 'JournalTimetables',