From d28d600833e41e688e5a373a6d5352b60e33262c Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Fri, 29 Sep 2023 03:03:59 +0200
Subject: [PATCH] code cleanup dziennika

---
 src/assets/car-cargo-unknown.png              | Bin 0 -> 932 bytes
 src/assets/car-passenger-unknown.png          | Bin 0 -> 953 bytes
 src/assets/loco-e-unknown.png                 | Bin 0 -> 1319 bytes
 src/assets/loco-ezt-unknown.png               | Bin 0 -> 1610 bytes
 src/assets/loco-s-unknown.png                 | Bin 0 -> 1020 bytes
 src/components/Global/AddDataButton.vue       |  42 ++
 .../JournalTimetables/ItemExtra.vue           | 187 +++++++
 .../JournalTimetables/ItemGeneral.vue         | 137 +++++
 .../JournalTimetables/ItemStatus.vue          |  68 +++
 .../JournalTimetables/ItemStops.vue           | 107 ++++
 .../JournalTimetables/ListItem.vue            | 124 +++++
 .../JournalView/JournalTimetablesList.vue     | 497 +-----------------
 src/views/JournalDispatchers.vue              |   2 +-
 13 files changed, 682 insertions(+), 482 deletions(-)
 create mode 100644 src/assets/car-cargo-unknown.png
 create mode 100644 src/assets/car-passenger-unknown.png
 create mode 100644 src/assets/loco-e-unknown.png
 create mode 100644 src/assets/loco-ezt-unknown.png
 create mode 100644 src/assets/loco-s-unknown.png
 create mode 100644 src/components/Global/AddDataButton.vue
 create mode 100644 src/components/JournalView/JournalTimetables/ItemExtra.vue
 create mode 100644 src/components/JournalView/JournalTimetables/ItemGeneral.vue
 create mode 100644 src/components/JournalView/JournalTimetables/ItemStatus.vue
 create mode 100644 src/components/JournalView/JournalTimetables/ItemStops.vue
 create mode 100644 src/components/JournalView/JournalTimetables/ListItem.vue

diff --git a/src/assets/car-cargo-unknown.png b/src/assets/car-cargo-unknown.png
new file mode 100644
index 0000000000000000000000000000000000000000..3a270b5c2756ff60e2ee087e469fb94127b41e4f
GIT binary patch
literal 932
zcmV;V16%xwP)<h;3K|Lk000e1NJLTq0077U001Qj1^@s62ZE-;0004lX+uL$Nkc;*
zaB^>EX>4Tx04R}tkv&MmKpe$iQ;Q-k4t5Z62vVIah>AFB6^c+H)C#RSm|Xe=O&XFE
z7e~Rh;NZt%)xpJCR|i)?5c~jfb#YR3krMxx6k5c1aNLh~_a1le0HIM~n$<N9Xu55t
zlL;}KTNS%sAs~bZh9Sz#GUg;H1>f;?j{slq;yla$+@B+&<}C&UMB-Uym^SeS@${x`
zaNZ}5vXZP4pA(OnbV1@rt}7nDaW1+n@XV;0NzW5UiN#_ED;>;ArbawP98)!&@`bF&
zD(5ZETBXKX_v9}O=k=9kuG1Vs5{p=Z1Q7~qD5C-!aawg!ETm~a;o~24{Svtpa+Sfz
zv4AQx$gUs!4}N!R6(%RVq;LWVy*SRt2++L?H0zG@ee5{R6Cn5uT<L9pwE@h0l3s6X
zu_K^w8@RY`YswyQxdRM58L}z6Qjn%lC;;zg^i4US{}$+7^LlIT<MaW@P*<rN;NTD#
zEmHQn&%1j%d;9lHtG^#eSaOy(qBTVT000JJOGiWi{{a60|De66lK=n!32;bRa{vG?
zBLDy{BLR4&KXw2B00(qQO+^Ri0tF2!1_WE!h5!Hn8FWQhbVF}#ZDnqB07G(RVRU6=
zAa`kWXdp*PO;A^X4i^9b0ewkCK~#9!?c6bPgD?<<VdSAnmnLV`88~a2bSa(6GuVTO
z1V~``{>GlM0qxs;(uy$--3u|sdk0*YVHm>W{f#+*G&d3eX+r7)s|l{$T3JB=Ef&Ba
z0D}Mw0=$Dk+`$5@AOM2^3<59+z#ssF01N^!2*4l!g8*O<fI$ET0UGf146a}C0?*H;
z2c`fDTdc3o56S>3gM9z|QU>U{uAl0?rrNGy7($Hk{&+oW-+7eS#(I|=w|4wz&2LVO
zQ#COA$8lE>YieUQRcN)fNExBjB#$x99W#z&Togx}Bw89IrB`2?u&aoeqeaR0Q+k!2
zd+V_-G2xkV_+Q+;rFeOZQ&Ln*^{P?0<4JC=oxbV>Hzt(yvvY008HKyT%vyU-bJQH?
z)^>Km=k~NMH&uJhDvWaORU>-^X(?V#KwI3QQR@5WyG5?I%6HgXz@?i?#&|!Y)V^h1
zBhO(^@zw;CD;{&~Z<4h+XmO3^21x~2BaqtX$MN#qD%XF;toZJU4n~jw0000<MNUMn
GLSTX|n2*2!

literal 0
HcmV?d00001

diff --git a/src/assets/car-passenger-unknown.png b/src/assets/car-passenger-unknown.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a930b9d944319307688642ef5c00bc1fd98f7c5
GIT binary patch
literal 953
zcmeAS@N?(olHy`uVBq!ia0y~yV2lT{wK>>;<o&|#M?it*OlRi+PiJR^f};Gi%$!sP
z291fe6Ky>XJIEZ35AIgd<tq~?<OrIp)6r#-CE69Bc!g`N)r^>5tiDo{M8w?>Zhi3J
zc+%B_M<c`8!yN_wFcg*+29-<{`afMH>PSVwo&NIga^>$C76vBHx@yXou`74kWKP4`
z(W1NK6%|@I+7wTnF?yz=$$I}|X+J~!`$smX|KFLfyy%%O8;i@M$g~+|AK5;BS(aOH
zPrYx`q%}hGh5KigI6iV;r!BX?P;Zychchc?dY%_{?>w5st}T1UYnhvkt4y%z+)u4*
zj%z*FJr}j~Sk(6?`aI9SPEB2RS;k4IJEDn2kSj}LF_Uy*RB4dTl1%%DkL64L3hfjr
zntJfW#s)2u6YJ#v@Yj`Ri>j&bSyI5nvDf0<agGanxlLa8eXf0DaaLI22T#n)-1@DI
zXKE(J<!5hHUXU-nV@F>0DY=53%se)dn>2R^O;{G7!SFu)i?8K^|6(s<KUZbHef)*-
zL_qjT=?4!4By@wm?K;1^+N%2Zcc0b!<vk*brkO7?bp^%>TavfC3&Vd9T(EcfWS|IV
zfk$L91B0G22s2hJwJ!q-vX^-Jy0SlKV&zq5+xT_aX`ql~iEBiObAE1aYF-J0b5Uwy
zNotBhd1gt5g1e`0KzJjcI54&+dAc};RNQ)d)4Qx$L89T}gvqv>*}`(&{i<pd6uRzN
zzsiitJ@DVy_t0|{!(%U*KQL%6z3^*BB)dpZ!?uHbN!%Cgk2sbv{%ZfBy@%m1>qFKZ
z3i}RmU$}o=h@nHj;Rln#K88o!K)OR8NCP=wK@<)`1s3IJ4qa<DJeK*-YN^Pyef!my
ziuC=lDScME>DlY-&C9>udOLUfw;Idyr@vl!e=F+sv-<s)gmZJ#GFN1lGtRO7pqtOO
zcF~OLIf40HTb~<rmsW4uR=4!`_tSefMBkem%kp00hkDD$%<8;vr*3W8n&&P*`+T^q
zz~_V8+p=G#$FMvKE8hFH;-BHMl}~mo-Cy2bTJ!tPlP_zo%CXO`y}SR`&iA~!YZr!3
z`ZDA6_PtT>EW;nJoBeOeSz%u{u8$MHTOTbu@MGJp3wNwP-<;3Utre$x{k-Qpo$Xo2
zr@oeOyLV@^_<Oy2_8I4&pM5?-p6g58nYI2pjvedg_X?(e;pd(DYm@TK$-unGz~JfX
K=d#Wzp$Py@(5~<R

literal 0
HcmV?d00001

diff --git a/src/assets/loco-e-unknown.png b/src/assets/loco-e-unknown.png
new file mode 100644
index 0000000000000000000000000000000000000000..c95616fa277f2d9e3fa357a75500fbe6abfaaca7
GIT binary patch
literal 1319
zcmV+?1=#wDP)<h;3K|Lk000e1NJLTq0080u002A)1^@s6dn9Iv0004lX+uL$Nkc;*
zaB^>EX>4Tx04R}tkv&MmKpe$iQ;Q-k4t5Z62vVIah>AFB6^c+H)C#RSm|Xe=O&XFE
z7e~Rh;NZt%)xpJCR|i)?5c~jfb#YR3krMxx6k5c1aNLh~_a1le0HIM~n$<N9Xu55t
zlL;}KTNS%sAs~bZh9Sz#GUg;H1>f;?j{slq;yla$+@B+&<}C&UMB-Uym^SeS@${x`
zaNZ}5vXZP4pA(OnbV1@rt}7nDaW1+n@XV;0NzW5UiN#_ED;>;ArbawP98)!&@`bF&
zD(5ZETBXKX_v9}O=k=9kuG1Vs5{p=Z1Q7~qD5C-!aawg!ETm~a;o~24{Svtpa+Sfz
zv4AQx$gUs!4}N!R6(%RVq;LWVy*SRt2++L?H0zG@ee5{R6Cn5uT<L9pwE@h0l3s6X
zu_K^w8@RY`YswyQxdRM58L}z6Qjn%lC;;zg^i4US{}$+7^LlIT<MaW@P*<rN;NTD#
zEmHQn&%1j%d;9lHtG^#eSaOy(qBTVT000JJOGiWi{{a60|De66lK=n!32;bRa{vG?
zBLDy{BLR4&KXw2B00(qQO+^Ri0tF2#7kBW<H2?qr8FWQhbVF}#ZDnqB07G(RVRU6=
zAa`kWXdp*PO;A^X4i^9b0{}@xK~#9!?VU|-+%ODA%}G!o$f}zjqu0|mTV5~6$YxeS
zfdcJx<;EC{ZAsRTMZO0NkYoZ|rudPc<Vh?OKnFqyxA|*T74Pv75@8<_rGD(a$M`~8
zloc&($B|ef#6z8q1S(t1a2Z(BL&73~%G*#x>P(1_HV8rpx4pzbkny}t)8$tPe~!e?
z<3^5n6yNgaYZJ|8PJf5tsZ)wK0WRN<5#b~8BFH@V5G&R#hhjCx;!S`tc2remt7GmZ
z)QjrV+cf?4QsmY;*IKa)A>3Y6pJof2QtYf2KJg~Nt%-jm&aH0htwU}JFx7SB%$wyn
zi<RVvo$#0hYLTQ?>}Rd`<&0_MIGd>0F_pR1q*>iyXn9?+qO?@(%vz@&oylrfY|#;8
zg>SXcncRVDEr8th>FBn<XOXj(v!=J(Ygy9R<620bm=08{OK~63pa5%<^U0jj=l62W
z+($%+hZ1LP*VY0puPIlEKfb^I{QB<O;+@~q$My5QcMLCHM5d}Tzgi~C{dj96Z0T!C
zJznW++M27}bA4Pt-@jhh#jC#vPumgslOynEa|ICr^cS%pJb?b<6a)y+Uyy<b0s4!P
ze;x&J0+NMDHv~9=5CNb(U2oh1uuh~S0$@!6tdrs(5hB1y9g+1R0M--$Ap$_%bs|Cp
zpd$hRLIfB|i0qgG&=CO;A^_AU>tP=NkjCBz!0Ctp4cKdF2oZoaA^_GjYK_P`5umOJ
zqdFoY1i+dCxZs(t2hfH!ovEq_A_Tyi0suk;I0yfqX1le;ihTvhWAE0*ti4OjF9SeX
z0p9-}))as>B7jX&mve5Pk2qU`R@bs-RbtPdyL?z4KlK<b=ehNK<c_h{e2FI!-UnwC
z5grv|>*`)2PNNt5?hh(eRT*XTr^Q%HiEyN(Dlrdd&7oT3dOq5o_bf$9JMV4nO4*~7
zb9uD#%beJXLu~G}Dt3>~Qz|aSl40*&<dNWvV97k*0vaVgHI@J|g`|rRO9tz#Nj<_C
diP4zj`v+{vi%3JrXB7Yd002ovPDHLkV1m)qOx^$h

literal 0
HcmV?d00001

diff --git a/src/assets/loco-ezt-unknown.png b/src/assets/loco-ezt-unknown.png
new file mode 100644
index 0000000000000000000000000000000000000000..357177d72162e3129b8df583ae4104d05f8f3606
GIT binary patch
literal 1610
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
IM6N<$g5CA(h5!Hn

literal 0
HcmV?d00001

diff --git a/src/assets/loco-s-unknown.png b/src/assets/loco-s-unknown.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ed3948de7e75a4bac4ce095c6940659b55f1ecd
GIT binary patch
literal 1020
zcmV<Y0|WetP)<h;3K|Lk000e1NJLTq007+p001!v1^@s6UP7$n0004lX+uL$Nkc;*
zaB^>EX>4Tx04R}tkv&MmKpe$iQ;Q-k4t5Z62vVIah>AFB6^c+H)C#RSm|Xe=O&XFE
z7e~Rh;NZt%)xpJCR|i)?5c~jfb#YR3krMxx6k5c1aNLh~_a1le0HIM~n$<N9Xu55t
zlL;}KTNS%sAs~bZh9Sz#GUg;H1>f;?j{slq;yla$+@B+&<}C&UMB-Uym^SeS@${x`
zaNZ}5vXZP4pA(OnbV1@rt}7nDaW1+n@XV;0NzW5UiN#_ED;>;ArbawP98)!&@`bF&
zD(5ZETBXKX_v9}O=k=9kuG1Vs5{p=Z1Q7~qD5C-!aawg!ETm~a;o~24{Svtpa+Sfz
zv4AQx$gUs!4}N!R6(%RVq;LWVy*SRt2++L?H0zG@ee5{R6Cn5uT<L9pwE@h0l3s6X
zu_K^w8@RY`YswyQxdRM58L}z6Qjn%lC;;zg^i4US{}$+7^LlIT<MaW@P*<rN;NTD#
zEmHQn&%1j%d;9lHtG^#eSaOy(qBTVT000JJOGiWi{{a60|De66lK=n!32;bRa{vG?
zBLDy{BLR4&KXw2B00(qQO+^Ri0tF2vI;^a?&Hw-a8FWQhbVF}#ZDnqB07G(RVRU6=
zAa`kWXdp*PO;A^X4i^9b0o6%FK~#9!?cBX?gD?~ZP&?wCS-bMYovL(-gdzwg*q6U^
zwpNKkY=2xEVshfv`o4dj{W}c9kk53y55rF2h?O;gFsN{`I$ej5nO?%BX8=M6LI*+z
zrkE9Vdp1_9g>mF(alH_?9xFNGOTgLH3}O~Ihz*`K9RwE@p@U#T2SNuz2M8Sq9UydY
zOtUxp`o4b-!;nkwO{{q>T-hrNb2roTr@)o`@AV<$zu|6yD*fN)>7^eLgEbup9UycN
zX6ib}W9miLYM|1=>C6?cZmA@yda!*;IhIRa?8Y~gRklw#c@?l#H?^m#-gpftnA{~;
zb3YU*dA~Is1QR+CI=Hr+Qc6E5J%0QCPjf)q^<YXVxhe^!mvHTBCv>3F!L?1^?A9z$
zcS@<!!HzmjaQw5Q*@rb9!P60h4uM1H;5@!Mt1j)kyTkswrR_}LY<HTga?x#RtJd_m
zt~E2+G?mdQG1JOD+S$hCcFTdT_J@w2`rNA1)@~r&tAdnXfjrVW?!C&js(Rn{Nz}<{
zJbss+Y#v(aN~>V4j;lR5YYnXT6U@~vhD;5zwQV(S<5umn<tYYJ?`w6Od5;dOdDe(J
q{<&kk%R`(>+u_J<@aY&M`|%&56F&*bJq3aQ0000<MNUMnLSTY_UB^HG

literal 0
HcmV?d00001

diff --git a/src/components/Global/AddDataButton.vue b/src/components/Global/AddDataButton.vue
new file mode 100644
index 0000000..edf888a
--- /dev/null
+++ b/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>
diff --git a/src/components/JournalView/JournalTimetables/ItemExtra.vue b/src/components/JournalView/JournalTimetables/ItemExtra.vue
new file mode 100644
index 0000000..b59fac7
--- /dev/null
+++ b/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>
diff --git a/src/components/JournalView/JournalTimetables/ItemGeneral.vue b/src/components/JournalView/JournalTimetables/ItemGeneral.vue
new file mode 100644
index 0000000..433e19c
--- /dev/null
+++ b/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>
diff --git a/src/components/JournalView/JournalTimetables/ItemStatus.vue b/src/components/JournalView/JournalTimetables/ItemStatus.vue
new file mode 100644
index 0000000..6239423
--- /dev/null
+++ b/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>
diff --git a/src/components/JournalView/JournalTimetables/ItemStops.vue b/src/components/JournalView/JournalTimetables/ItemStops.vue
new file mode 100644
index 0000000..c53e427
--- /dev/null
+++ b/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>
diff --git a/src/components/JournalView/JournalTimetables/ListItem.vue b/src/components/JournalView/JournalTimetables/ListItem.vue
new file mode 100644
index 0000000..672b78f
--- /dev/null
+++ b/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>
diff --git a/src/components/JournalView/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetablesList.vue
index d1f5583..e44f52a 100644
--- a/src/components/JournalView/JournalTimetablesList.vue
+++ b/src/components/JournalView/JournalTimetablesList.vue
@@ -17,227 +17,18 @@
         </div>
 
         <div v-else>
-          <transition-group tag="ul" name="list-anim">
-            <li
-              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>
+          <ul>
+            <ListItem :timetableHistory="timetableHistory" />
+          </ul>
+          <!-- <transition-group tag="ul" name="list-anim"> -->
+          <!-- </transition-group> -->
 
-                    <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>
-              </div>
-            </li>
-          </transition-group>
-
-          <button
-            class="btn btn--option btn--load-data"
-            v-if="!scrollNoMoreData && scrollDataLoaded && timetableHistory.length >= 15"
-            @click="addHistoryData"
-          >
-            {{ $t('journal.load-data') }}
-          </button>
+          <!-- AddDataButton -->
+          <AddDataButton
+            :list="timetableHistory"
+            :scrollDataLoaded="scrollDataLoaded"
+            :scrollNoMoreData="scrollNoMoreData"
+          />
         </div>
       </div>
     </transition>
@@ -248,20 +39,18 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref } from 'vue';
-import dateMixin from '../../mixins/dateMixin';
-import imageMixin from '../../mixins/imageMixin';
-import modalTrainMixin from '../../mixins/modalTrainMixin';
-import styleMixin from '../../mixins/styleMixin';
+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';
 
 export default defineComponent({
-  components: { ProgressBar, Loading },
-  mixins: [dateMixin, imageMixin, modalTrainMixin, styleMixin],
+  components: { ProgressBar, Loading, ListItem, AddDataButton },
+
   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>
diff --git a/src/views/JournalDispatchers.vue b/src/views/JournalDispatchers.vue
index a5e3daa..0f1cf02 100644
--- a/src/views/JournalDispatchers.vue
+++ b/src/views/JournalDispatchers.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="journal-timetables">
+  <section class="journal-dispatchers">
     <JournalHeader />
 
     <div class="journal_wrapper">