cleanup c.d.

src/components/JournalView/JournalTimetables/JournalTimetablesList.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <transition name="status-anim" mode="out-in">
+      <div :key="dataStatus">
+        <div class="journal_warning" v-if="store.isOffline">
+          {{ $t('app.offline') }}
+        </div>
+
+        <Loading v-else-if="dataStatus == DataStatus.Loading" />
+
+        <div v-else-if="dataStatus == DataStatus.Error" class="journal_warning error">
+          {{ $t('app.error') }}
+        </div>
+
+        <div v-else-if="timetableHistory.length == 0" class="journal_warning">
+          {{ $t('app.no-result') }}
+        </div>
+
+        <div v-else>
+          <TimetableHistoryList :timetableHistory="timetableHistory" />
+
+          <AddDataButton
+            :list="timetableHistory"
+            :scrollDataLoaded="scrollDataLoaded"
+            :scrollNoMoreData="scrollNoMoreData"
+            @addHistoryData="addHistoryData"
+          />
+        </div>
+      </div>
+    </transition>
+
+    <div class="journal_warning" v-if="scrollNoMoreData">{{ $t('journal.no-further-data') }}</div>
+    <div class="journal_warning" v-else-if="!scrollDataLoaded">{{ $t('journal.loading-further-data') }}</div>
+  </div>
+</template>
+
+<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 AddDataButton from '../../Global/AddDataButton.vue';
+import TimetableHistoryList from './TimetableHistoryList.vue';
+
+export default defineComponent({
+  components: { ProgressBar, Loading, AddDataButton, TimetableHistoryList },
+
+  props: {
+    timetableHistory: {
+      type: Array as PropType<TimetableHistory[]>,
+      required: true,
+    },
+    scrollNoMoreData: {
+      type: Boolean,
+    },
+    scrollDataLoaded: {
+      type: Boolean,
+    },
+    addHistoryData: {
+      type: Function as PropType<() => void>,
+    },
+    dataStatus: {
+      type: Number as PropType<DataStatus>,
+    },
+  },
+
+  data() {
+    return {
+      DataStatus,
+      store: useStore(),
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@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>