code cleanup dziennika

src/components/Global/AddDataButton.vue

@@ -0,0 +1,42 @@
+<template>
+  <button
+    class="btn btn--option btn--load-data"
+    v-if="!scrollNoMoreData && scrollDataLoaded && list.length >= 15"
+    @click="addHistoryData"
+  >
+    {{ $t('journal.load-data') }}
+  </button>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+
+export default defineComponent({
+  props: {
+    scrollNoMoreData: {
+      type: Boolean,
+      required: true,
+    },
+
+    scrollDataLoaded: {
+      type: Boolean,
+      required: true,
+    },
+
+    list: {
+      type: Array as PropType<any[]>,
+      required: true,
+    },
+  },
+
+  emits: ['addHistoryData'],
+
+  methods: {
+    addHistoryData() {
+      this.$emit('addHistoryData');
+    },
+  },
+});
+</script>
+
+<style scoped></style>

src/components/JournalView/JournalTimetables/ItemExtra.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="item-extra" v-if="timetable.stockString && timetable.stockMass && showExtraInfo">
+    <hr />
+
+    <div class="stock-specs">
+      <span class="badge">
+        <span>{{ $t('journal.dispatcher-name') }}</span>
+        <span>{{ timetable.authorName }}</span>
+      </span>
+    </div>
+
+    <div class="stock-specs">
+      <span class="badge">
+        <span>{{ $t('journal.stock-max-speed') }}</span>
+        <span>{{ timetable.maxSpeed }}km/h</span>
+      </span>
+
+      <span class="badge">
+        <span>{{ $t('journal.stock-length') }}</span>
+        <span>
+          {{
+            currentHistoryIndex == 0
+              ? timetable.stockLength
+              : stockHistory[currentHistoryIndex].stockLength || timetable.stockLength
+          }}m
+        </span>
+      </span>
+
+      <span class="badge">
+        <span>{{ $t('journal.stock-mass') }}</span>
+        <span>
+          {{
+            Math.floor(
+              (currentHistoryIndex == 0
+                ? timetable.stockMass!
+                : stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000
+            )
+          }}t
+        </span>
+      </span>
+    </div>
+
+    <!-- Historia zmian w składzie -->
+    <div class="stock-history" v-if="stockHistory.length > 1">
+      <button
+        class="btn--action"
+        v-for="(sh, i) in stockHistory"
+        :data-checked="i == currentHistoryIndex"
+        @click.stop="currentHistoryIndex = i"
+      >
+        {{ sh.updatedAt }}
+      </button>
+    </div>
+
+    <ul class="stock-list">
+      <li
+        v-for="(car, i) in (currentHistoryIndex == 0
+          ? timetable.stockString
+          : stockHistory[currentHistoryIndex].stockString
+        ).split(';')"
+        :key="i"
+      >
+        <img
+          @error="onImageError"
+          :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
+          :alt="car"
+        />
+        <div>{{ car.replace(/_/g, ' ').split(':')[0] }}</div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
+import imageMixin from '../../../mixins/imageMixin';
+
+export default defineComponent({
+  mixins: [imageMixin],
+
+  props: {
+    showExtraInfo: {
+      type: Boolean,
+      required: true,
+    },
+
+    timetable: {
+      type: Object as PropType<TimetableHistory>,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      currentHistoryIndex: 0,
+    };
+  },
+
+  computed: {
+    stockHistory() {
+      return this.timetable.stockHistory
+        .slice()
+        .reverse()
+        .map((h) => {
+          const historyData = h.split('@');
+          return {
+            updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(this.$i18n.locale, {
+              hour: '2-digit',
+              minute: '2-digit',
+            }),
+            stockString: historyData[1],
+            stockMass: Number(historyData[2]) || undefined,
+            stockLength: Number(historyData[3]) || undefined,
+          };
+        });
+    },
+  },
+
+  methods: {
+    onImageError(e: Event) {
+      const imageEl = e.target as HTMLImageElement;
+      imageEl.src = this.getImage('unknown.png');
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/variables.scss';
+@import '../../../styles/responsive.scss';
+@import '../../../styles/badge.scss';
+
+.item-extra {
+  margin-top: 0.5em;
+}
+
+.stock-history {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 1em;
+
+  button[data-checked='true'] {
+    color: $accentCol;
+  }
+}
+
+.stock-specs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 0.5em;
+
+  .badge {
+    margin: 0;
+
+    span:last-child {
+      color: black;
+      background-color: $accentCol;
+    }
+  }
+
+  @include smallScreen() {
+    justify-content: center;
+  }
+}
+
+ul.stock-list {
+  display: flex;
+  align-items: flex-end;
+  overflow: auto;
+  padding-bottom: 0.5em;
+  margin-top: 1em;
+
+  li > div {
+    text-align: center;
+    color: #aaa;
+    font-size: 0.9em;
+  }
+
+  li > img {
+    vertical-align: text-bottom;
+    max-height: 60px;
+  }
+}
+</style>

src/components/JournalView/JournalTimetables/ItemGeneral.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="item-general">
+    <span
+      class="general-train"
+      tabindex="0"
+      @click.stop="showTimetable(timetable, $event.currentTarget)"
+      @keydown.enter="showTimetable(timetable, $event.currentTarget)"
+    >
+      <span class="text--grayed">#{{ timetable.id }}</span>
+
+      <span class="badges" v-if="timetable.skr || timetable.twr">
+        <span class="train-badge twr" v-if="timetable.twr" :title="$t('general.TWR')">TWR</span>
+        <span class="train-badge skr" v-if="timetable.skr" :title="$t('general.SKR')">SKR</span>
+      </span>
+
+      <span>
+        <strong class="text--primary">
+          {{ timetable.trainCategoryCode }}
+        </strong>
+        <strong>&nbsp;{{ timetable.trainNo }}</strong>
+      </span>
+      &bull;
+      <strong
+        v-if="timetable.driverLevel !== null"
+        class="level-badge driver"
+        :style="calculateExpStyle(timetable.driverLevel, timetable.driverIsSupporter)"
+      >
+        {{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel}` }}
+      </strong>
+
+      <strong>{{ timetable.driverName }}</strong>
+    </span>
+
+    <span class="general-time">
+      <b class="info-date"
+        >{{
+          new Date(timetable.createdAt).getTime() - new Date(timetable.beginDate).getTime() < 0
+            ? localeDateTime(timetable.createdAt, $i18n.locale)
+            : localeDateTime(timetable.beginDate, $i18n.locale)
+        }}
+      </b>
+
+      <b
+        class="info-badge"
+        :class="{
+          fulfilled: timetable.fulfilled,
+          terminated: timetable.terminated && !timetable.fulfilled,
+          active: !timetable.terminated,
+        }"
+      >
+        {{
+          !timetable.terminated
+            ? $t('journal.timetable-active')
+            : timetable.fulfilled
+            ? $t('journal.timetable-fulfilled')
+            : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
+        }}
+      </b>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
+
+import dateMixin from '../../../mixins/dateMixin';
+import modalTrainMixin from '../../../mixins/modalTrainMixin';
+import styleMixin from '../../../mixins/styleMixin';
+
+export default defineComponent({
+  mixins: [dateMixin, modalTrainMixin, styleMixin],
+
+  props: {
+    timetable: {
+      type: Object as PropType<TimetableHistory>,
+      required: true,
+    },
+  },
+
+  methods: {
+    showTimetable(timetable: TimetableHistory, target: EventTarget | null) {
+      if (timetable?.terminated) return;
+
+      this.selectModalTrain(timetable.driverName + timetable.trainNo.toString(), target);
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/responsive.scss';
+@import '../../../styles/badge.scss';
+
+.item-general {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+
+  gap: 0.5em;
+  margin-bottom: 0.5em;
+
+  @include smallScreen() {
+    justify-content: center;
+  }
+}
+
+.info-date {
+  margin-right: 0.5em;
+}
+
+.info-badge {
+  padding: 0.05em 0.35em;
+  color: black;
+
+  &.terminated {
+    background-color: salmon;
+  }
+
+  &.fulfilled {
+    background-color: lightgreen;
+  }
+
+  &.active {
+    background-color: lightblue;
+  }
+}
+
+.general-train {
+  cursor: pointer;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25em;
+}
+</style>

src/components/JournalView/JournalTimetables/ItemStatus.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="item-status" style="margin: 0.5em 0">
+    <ProgressBar
+      :progressPercent="~~((timetable.currentDistance / timetable.routeDistance) * 100)"
+      :progressType="!timetable.fulfilled && timetable.terminated ? 'abandoned' : ''"
+    />
+
+    <span>
+      <span :style="{ color: timetable.fulfilled ? 'lightgreen' : timetable.terminated ? 'salmon' : '' }">
+        {{ timetable.currentDistance + ' km' }}
+      </span>
+      <span> / </span>
+      <span class="text--primary">{{ timetable.routeDistance }} km</span>
+      |
+      <span class="text--grayed">{{ timetable.confirmedStopsCount }}/{{ timetable.allStopsCount }}</span>
+    </span>
+
+    <span class="text--grayed" v-if="timetable.currentSceneryName">
+      <b>
+        {{ $t(`journal.${timetable.terminated ? 'last-seen-at' : 'currently-at'}`) }}
+        {{ timetable.currentSceneryName.replace(/.[a-zA-Z0-9]+.sc/, '') }}
+
+        <span v-if="timetable.currentLocation[0] || timetable.currentLocation[1]">&lpar;</span>
+
+        <span v-if="timetable.currentLocation[1]">
+          {{ $t('journal.timetable-location-route') }} {{ timetable.currentLocation[1] }}
+        </span>
+
+        <span v-else-if="timetable.currentLocation[0]">
+          {{ $t('journal.timetable-location-signal') }} {{ timetable.currentLocation[0] }}
+        </span>
+
+        <span v-if="timetable.currentLocation[0] || timetable.currentLocation[1]">&rpar;</span>
+      </b>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
+import ProgressBar from '../../Global/ProgressBar.vue';
+
+export default defineComponent({
+  components: { ProgressBar },
+  props: {
+    timetable: {
+      type: Object as PropType<TimetableHistory>,
+      required: true,
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/responsive.scss';
+
+.item-status {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+
+  @include smallScreen() {
+    justify-content: center;
+  }
+}
+</style>

src/components/JournalView/JournalTimetables/ItemStops.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="stop-list" v-if="showExtraInfo == true">
+    <span
+      v-for="(stop, i) in timetableStops.filter((_, i) =>
+        !showExtraInfo ? i == 0 || i == timetableStops.length - 1 : true
+      )"
+      class="stop-list-item"
+      :key="stop.stopName"
+      :data-confirmed="stop.confirmed"
+    >
+      <span v-if="i > 0">
+        &gt;
+        <span v-if="!showExtraInfo && i == 1 && timetableStops.length > 2">
+          ... (+{{ timetableStops.length - 2 }}) &gt;
+        </span>
+      </span>
+
+      <span class="stop-name">{{ stop.stopName }}</span>
+      <span v-html="stop.html"></span>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import dateMixin from '../../../mixins/dateMixin';
+
+import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
+
+export default defineComponent({
+  mixins: [dateMixin],
+
+  props: {
+    showExtraInfo: {
+      type: Boolean,
+      required: true
+    },
+
+    timetable: {
+      type: Object as PropType<TimetableHistory>,
+      required: true,
+    },
+  },
+
+  computed: {
+    timetableStops() {
+      const timetable = this.timetable;
+
+      const stopNames = timetable.sceneriesString.split('%');
+
+      const beginDateHTML = ` (o. ${
+        timetable.beginDate != timetable.scheduledBeginDate
+          ? `<s class="text--grayed">${this.localeTime(timetable.beginDate, this.$i18n.locale)}</s>`
+          : ''
+      } <span>${this.localeTime(timetable.scheduledBeginDate, this.$i18n.locale)}</span>)`;
+
+      const endDateHTML = ` (p. ${
+        timetable.endDate != timetable.scheduledEndDate && timetable.fulfilled
+          ? `<s class="text--grayed">${this.localeTime(timetable.endDate, this.$i18n.locale)}</s>`
+          : ''
+      } <span>${this.localeTime(timetable.scheduledEndDate, this.$i18n.locale)}</span>)`;
+
+      return stopNames.map((stopName, i) => {
+        const confirmed = i < timetable.confirmedStopsCount;
+        if (i == 0) return { stopName, html: beginDateHTML, confirmed };
+        if (i == stopNames.length - 1) return { stopName, html: endDateHTML, confirmed };
+
+        const departureDateScheduled = this.stringToDate(timetable.checkpointDeparturesScheduled?.at(i));
+        const departureDateReal = this.stringToDate(timetable.checkpointDepartures?.at(i));
+        const arrivalDateScheduled = this.stringToDate(timetable.checkpointArrivalsScheduled?.at(i));
+        const arrivalDateReal = this.stringToDate(timetable.checkpointArrivals?.at(i));
+        const arrivalHTML =
+          (arrivalDateReal && arrivalDateScheduled && arrivalDateReal?.getTime() != arrivalDateScheduled?.getTime()
+            ? `<s class="text--grayed">${this.parseDateToTimeString(arrivalDateScheduled)}</s> `
+            : '') + this.parseDateToTimeString(arrivalDateReal || arrivalDateScheduled);
+        const departureHTML =
+          (departureDateReal &&
+          departureDateScheduled &&
+          departureDateReal?.getTime() != departureDateScheduled?.getTime()
+            ? `<s class="text--grayed">${this.parseDateToTimeString(departureDateScheduled)}</s> `
+            : '') + this.parseDateToTimeString(departureDateReal || departureDateScheduled);
+        let html = `${arrivalHTML}${departureHTML ? ` / ${departureHTML}` : ''}`;
+        if (html) html = ` (${html})`;
+        return { stopName, html, confirmed };
+      });
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.stop-list {
+  word-wrap: break-word;
+  gap: 0.25em;
+  font-size: 0.95em;
+
+  color: #adadad;
+
+  &-item[data-confirmed='true'] {
+    color: lightgreen;
+
+    .stop-name {
+      font-weight: bold;
+    }
+  }
+}
+</style>

src/components/JournalView/JournalTimetables/ListItem.vue

@@ -0,0 +1,124 @@
+<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/JournalTimetablesList.vue

@@ -17,227 +17,18 @@
         </div>
 
         <div v-else>
-          <transition-group tag="ul" name="list-anim">
+          <ul>
-            <li
+            <ListItem :timetableHistory="timetableHistory" />
-              v-for="{ timetable, stockHistoryComp, stops, showExtraInfo, ...item } in computedTimetableHistory"
-              class="journal_item"
-              :key="timetable.id"
-              @click="showExtraInfo.value = !showExtraInfo.value"
-            >
-              <div class="journal_item-info">
-                <div class="info-general">
-                  <span
-                    class="general-train"
-                    tabindex="0"
-                    @click.stop="showTimetable(timetable, $event.currentTarget)"
-                    @keydown.enter="showTimetable(timetable, $event.currentTarget)"
-                  >
-                    <span class="text--grayed">#{{ timetable.id }}</span>
-
-                    <span class="badges" v-if="timetable.skr || timetable.twr">
-                      <span class="train-badge twr" v-if="timetable.twr" :title="$t('general.TWR')">TWR</span>
-                      <span class="train-badge skr" v-if="timetable.skr" :title="$t('general.SKR')">SKR</span>
-                    </span>
-
-                    <span>
-                      <strong class="text--primary">
-                        {{ timetable.trainCategoryCode }}
-                      </strong>
-                      <strong>&nbsp;{{ timetable.trainNo }}</strong>
-                    </span>
-                    &bull;
-                    <strong
-                      v-if="timetable.driverLevel !== null"
-                      class="level-badge driver"
-                      :style="calculateExpStyle(timetable.driverLevel, timetable.driverIsSupporter)"
-                    >
-                      {{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel}` }}
-                    </strong>
-
-                    <strong>{{ timetable.driverName }}</strong>
-                  </span>
-
-                  <span class="general-time">
-                    <b class="info-date"
-                      >{{
-                        new Date(timetable.createdAt).getTime() - new Date(timetable.beginDate).getTime() < 0
-                          ? localeDateTime(timetable.createdAt, $i18n.locale)
-                          : localeDateTime(timetable.beginDate, $i18n.locale)
-                      }}
-                    </b>
-
-                    <b
-                      class="info-badge"
-                      :class="{
-                        fulfilled: timetable.fulfilled,
-                        terminated: timetable.terminated && !timetable.fulfilled,
-                        active: !timetable.terminated,
-                      }"
-                    >
-                      {{
-                        !timetable.terminated
-                          ? $t('journal.timetable-active')
-                          : timetable.fulfilled
-                          ? $t('journal.timetable-fulfilled')
-                          : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
-                      }}
-                    </b>
-                  </span>
-                </div>
-
-                <div class="info-route">
-                  <b>{{ timetable.route.replace('|', ' - ') }}</b>
-                </div>
-
-                <hr />
-
-                <!-- Spis postojów -->
-                <div class="stop-list" v-if="showExtraInfo.value == true">
-                  <span
-                    v-for="(stop, i) in stops.filter((_, i) =>
-                      !showExtraInfo.value ? i == 0 || i == stops.length - 1 : true
-                    )"
-                    class="stop-list-item"
-                    :key="stop.stopName"
-                    :data-confirmed="stop.confirmed"
-                  >
-                    <span v-if="i > 0">
-                      &gt;
-                      <span v-if="!showExtraInfo.value && i == 1 && stops.length > 2">
-                        ... (+{{ stops.length - 2 }}) &gt;
-                      </span>
-                    </span>
-
-                    <span class="stop-name">{{ stop.stopName }}</span>
-                    <span v-html="stop.html"></span>
-                  </span>
-                </div>
-
-                <!-- Status RJ -->
-                <div class="info-status" style="margin: 0.5em 0">
-                  <ProgressBar
-                    :progressPercent="~~((timetable.currentDistance / timetable.routeDistance) * 100)"
-                    :progressType="!timetable.fulfilled && timetable.terminated ? 'abandoned' : ''"
-                  />
-
-                  <span>
-                    <span :style="{ color: timetable.fulfilled ? 'lightgreen' : timetable.terminated ? 'salmon' : '' }">
-                      {{ timetable.currentDistance + ' km' }}
-                    </span>
-                    <span> / </span>
-                    <span class="text--primary">{{ timetable.routeDistance }} km</span>
-                    |
-                    <span class="text--grayed">{{ timetable.confirmedStopsCount }}/{{ timetable.allStopsCount }}</span>
-                  </span>
-
-                  <span class="text--grayed" v-if="timetable.currentSceneryName">
-                    <b>
-                      {{ $t(`journal.${timetable.terminated ? 'last-seen-at' : 'currently-at'}`) }}
-                      {{ timetable.currentSceneryName.replace(/.[a-zA-Z0-9]+.sc/, '') }}
-
-                      <span v-if="timetable.currentLocation[0] || timetable.currentLocation[1]">&lpar;</span>
-
-                      <span v-if="timetable.currentLocation[1]">
-                        {{ $t('journal.timetable-location-route') }} {{ timetable.currentLocation[1] }}
-                      </span>
-
-                      <span v-else-if="timetable.currentLocation[0]">
-                        {{ $t('journal.timetable-location-signal') }} {{ timetable.currentLocation[0] }}
-                      </span>
-
-                      <span v-if="timetable.currentLocation[0] || timetable.currentLocation[1]">&rpar;</span>
-                    </b>
-                  </span>
-                </div>
-
-                <button class="btn--option btn--show">
-                  {{ $t('journal.stock-info') }}
-                  <img :src="getIcon(`arrow-${showExtraInfo.value ? 'asc' : 'desc'}`)" alt="Arrow" />
-                </button>
-
-                <!-- Dodatkowe informacje -->
-                <div class="info-extended" v-if="timetable.stockString && timetable.stockMass && showExtraInfo.value">
-                  <hr />
-
-                  <div class="stock-specs">
-                    <span class="badge specs-badge">
-                      <span>{{ $t('journal.dispatcher-name') }}</span>
-                      <span>{{ timetable.authorName }}</span>
-                    </span>
-                  </div>
-
-                  <div class="stock-specs">
-                    <span class="badge specs-badge">
-                      <span>{{ $t('journal.stock-max-speed') }}</span>
-                      <span>{{ timetable.maxSpeed }}km/h</span>
-                    </span>
-
-                    <span class="badge specs-badge">
-                      <span>{{ $t('journal.stock-length') }}</span>
-                      <span>
-                        {{
-                          item.currentHistoryIndex.value == 0
-                            ? timetable.stockLength
-                            : stockHistoryComp[item.currentHistoryIndex.value].stockLength || timetable.stockLength
-                        }}m
-                      </span>
-                    </span>
-
-                    <span class="badge specs-badge">
-                      <span>{{ $t('journal.stock-mass') }}</span>
-                      <span>
-                        {{
-                          Math.floor(
-                            (item.currentHistoryIndex.value == 0
-                              ? timetable.stockMass!
-                              : stockHistoryComp[item.currentHistoryIndex.value].stockMass || timetable.stockMass) /
-                              1000
-                          )
-                        }}t
-                      </span>
-                    </span>
-                  </div>
-
-                  <!-- Historia zmian w składzie -->
-                  <div class="stock-history" v-if="stockHistoryComp.length > 1">
-                    <button
-                      class="btn--action"
-                      v-for="(sh, i) in stockHistoryComp"
-                      :data-checked="i == item.currentHistoryIndex.value"
-                      @click.stop="item.currentHistoryIndex.value = i"
-                    >
-                      {{ sh.updatedAt }}
-                    </button>
-                  </div>
-
-                  <ul class="stock-list">
-                    <li
-                      v-for="(car, i) in (item.currentHistoryIndex.value == 0
-                        ? timetable.stockString
-                        : stockHistoryComp[item.currentHistoryIndex.value].stockString
-                      ).split(';')"
-                      :key="i"
-                    >
-                      <img
-                        @error="onImageError"
-                        :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
-                        :alt="car"
-                      />
-                      <div>{{ car.replace(/_/g, ' ').split(':')[0] }}</div>
-                    </li>
           </ul>
-                </div>
+          <!-- <transition-group tag="ul" name="list-anim"> -->
-              </div>
+          <!-- </transition-group> -->
-            </li>
-          </transition-group>
 
-          <button
+          <!-- AddDataButton -->
-            class="btn btn--option btn--load-data"
+          <AddDataButton
-            v-if="!scrollNoMoreData && scrollDataLoaded && timetableHistory.length >= 15"
+            :list="timetableHistory"
-            @click="addHistoryData"
+            :scrollDataLoaded="scrollDataLoaded"
-          >
+            :scrollNoMoreData="scrollNoMoreData"
-            {{ $t('journal.load-data') }}
+          />
-          </button>
         </div>
       </div>
     </transition>
@@ -248,20 +39,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref } from 'vue';
+import { defineComponent, PropType } from 'vue';
-import dateMixin from '../../mixins/dateMixin';
-import imageMixin from '../../mixins/imageMixin';
-import modalTrainMixin from '../../mixins/modalTrainMixin';
-import styleMixin from '../../mixins/styleMixin';
 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';
 
 export default defineComponent({
-  components: { ProgressBar, Loading },
+  components: { ProgressBar, Loading, ListItem, AddDataButton },
-  mixins: [dateMixin, imageMixin, modalTrainMixin, styleMixin],
+
   props: {
     timetableHistory: {
       type: Array as PropType<TimetableHistory[]>,
@@ -287,263 +76,9 @@ export default defineComponent({
       store: useStore(),
     };
   },
-
-  computed: {
-    computedTimetableHistory() {
-      return this.timetableHistory.map((timetable) => ({
-        timetable,
-        stockHistoryComp: timetable.stockHistory
-          .slice()
-          .reverse()
-          .map((h) => {
-            const historyData = h.split('@');
-            return {
-              updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(this.$i18n.locale, {
-                hour: '2-digit',
-                minute: '2-digit',
-              }),
-              stockString: historyData[1],
-              stockMass: Number(historyData[2]) || undefined,
-              stockLength: Number(historyData[3]) || undefined,
-            };
-          }),
-        showExtraInfo: ref(false),
-        stops: this.getTimetableStops(timetable),
-        currentHistoryIndex: ref(0),
-      }));
-    },
-  },
-
-  methods: {
-    getTimetableStops(timetable: TimetableHistory) {
-      const stopNames = timetable.sceneriesString.split('%');
-
-      const beginDateHTML = ` (o. ${
-        timetable.beginDate != timetable.scheduledBeginDate
-          ? `<s class="text--grayed">${this.localeTime(timetable.beginDate, this.$i18n.locale)}</s>`
-          : ''
-      } <span>${this.localeTime(timetable.scheduledBeginDate, this.$i18n.locale)}</span>)`;
-
-      const endDateHTML = ` (p. ${
-        timetable.endDate != timetable.scheduledEndDate && timetable.fulfilled
-          ? `<s class="text--grayed">${this.localeTime(timetable.endDate, this.$i18n.locale)}</s>`
-          : ''
-      } <span>${this.localeTime(timetable.scheduledEndDate, this.$i18n.locale)}</span>)`;
-
-      return stopNames.map((stopName, i) => {
-        const confirmed = i < timetable.confirmedStopsCount;
-
-        if (i == 0) return { stopName, html: beginDateHTML, confirmed };
-        if (i == stopNames.length - 1) return { stopName, html: endDateHTML, confirmed };
-
-        const departureDateScheduled = this.stringToDate(timetable.checkpointDeparturesScheduled?.at(i));
-        const departureDateReal = this.stringToDate(timetable.checkpointDepartures?.at(i));
-        const arrivalDateScheduled = this.stringToDate(timetable.checkpointArrivalsScheduled?.at(i));
-        const arrivalDateReal = this.stringToDate(timetable.checkpointArrivals?.at(i));
-
-        const arrivalHTML =
-          (arrivalDateReal && arrivalDateScheduled && arrivalDateReal?.getTime() != arrivalDateScheduled?.getTime()
-            ? `<s class="text--grayed">${this.parseDateToTimeString(arrivalDateScheduled)}</s> `
-            : '') + this.parseDateToTimeString(arrivalDateReal || arrivalDateScheduled);
-
-        const departureHTML =
-          (departureDateReal &&
-          departureDateScheduled &&
-          departureDateReal?.getTime() != departureDateScheduled?.getTime()
-            ? `<s class="text--grayed">${this.parseDateToTimeString(departureDateScheduled)}</s> `
-            : '') + this.parseDateToTimeString(departureDateReal || departureDateScheduled);
-
-        let html = `${arrivalHTML}${departureHTML ? ` / ${departureHTML}` : ''}`;
-
-        if (html) html = ` (${html})`;
-        return { stopName, html, confirmed };
-      });
-    },
-    showTimetable(timetable: TimetableHistory, target: EventTarget | null) {
-      if (timetable?.terminated) return;
-
-      this.selectModalTrain(timetable.driverName + timetable.trainNo.toString(), target);
-    },
-    onImageError(e: Event) {
-      const imageEl = e.target as HTMLImageElement;
-      imageEl.src = this.getImage('unknown.png');
-    },
-  },
 });
 </script>
 
 <style lang="scss" scoped>
 @import '../../styles/animations.scss';
-@import '../../styles/variables.scss';
-@import '../../styles/responsive.scss';
-@import '../../styles/badge.scss';
-@import '../../styles/JournalSection.scss';
-
-.journal_item {
-  cursor: pointer;
-}
-
-hr {
-  margin: 0.25em 0;
-}
-
-.info {
-  &-date {
-    margin-right: 0.5em;
-  }
-
-  &-badge {
-    padding: 0.05em 0.35em;
-    color: black;
-
-    &.terminated {
-      background-color: salmon;
-    }
-
-    &.fulfilled {
-      background-color: lightgreen;
-    }
-
-    &.active {
-      background-color: lightblue;
-    }
-  }
-
-  &-general {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-
-    gap: 0.5em;
-    margin-bottom: 0.5em;
-  }
-
-  &-route {
-    margin: 0.25em 0;
-  }
-
-  &-extended {
-    margin-top: 0.5em;
-  }
-
-  &-status {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 0.5em;
-  }
-}
-
-.general-train {
-  cursor: pointer;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.25em;
-}
-
-ul.stock-list {
-  display: flex;
-  align-items: flex-end;
-  overflow: auto;
-  padding-bottom: 0.5em;
-  margin-top: 1em;
-
-  li > div {
-    text-align: center;
-    color: #aaa;
-    font-size: 0.9em;
-  }
-
-  li > img {
-    vertical-align: text-bottom;
-    max-height: 60px;
-  }
-}
-
-.stock-specs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5em;
-  margin-top: 0.5em;
-
-  .specs-badge {
-    margin: 0;
-
-    span:last-child {
-      color: black;
-      background-color: $accentCol;
-    }
-  }
-}
-
-// badge.scss
-.badges {
-  display: flex;
-  gap: 0.25em;
-}
-
-.stock-history {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5em;
-  margin-top: 1em;
-
-  button[data-checked='true'] {
-    color: $accentCol;
-  }
-}
-
-.stop-list {
-  word-wrap: break-word;
-  gap: 0.25em;
-  font-size: 0.95em;
-
-  color: #adadad;
-
-  &-item[data-confirmed='true'] {
-    color: lightgreen;
-
-    .stop-name {
-      font-weight: bold;
-    }
-  }
-}
-
-.btn--show {
-  display: flex;
-  font-weight: bold;
-  padding: 0.2em 0.45em;
-
-  img {
-    height: 1.3em;
-  }
-}
-
-@include smallScreen {
-  .journal_item-info {
-    text-align: center;
-  }
-
-  .info-route {
-    display: flex;
-    justify-content: center;
-  }
-
-  .info-status {
-    justify-content: center;
-  }
-
-  .btn--show {
-    margin: 1em auto 0 auto;
-  }
-
-  .info-general,
-  .general-train,
-  .stock-specs,
-  .stock-history {
-    justify-content: center;
-  }
-}
 </style>

src/views/JournalDispatchers.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="journal-timetables">
+  <section class="journal-dispatchers">
     <JournalHeader />
 
     <div class="journal_wrapper">