From 1b85cc5f5894929c6c69d02677375803f42e937f Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Fri, 30 Jun 2023 20:50:03 +0200
Subject: [PATCH] poprawki dziennika rj / dr

---
 src/components/JournalView/JournalStats.vue   |   2 +-
 .../JournalView/JournalTimetablesList.vue     | 212 +++++++++---------
 src/locales/en.json                           |  12 +-
 src/locales/pl.json                           |  11 +-
 src/mixins/dateMixin.ts                       | 120 +++++-----
 .../interfaces/api/TimetablesAPIData.ts       |   1 +
 src/styles/JournalSection.scss                |  13 ++
 src/views/JournalDispatchers.vue              |   6 +
 src/views/JournalTimetables.vue               |   6 +
 9 files changed, 216 insertions(+), 167 deletions(-)

diff --git a/src/components/JournalView/JournalStats.vue b/src/components/JournalView/JournalStats.vue
index 47aab79..daceb0a 100644
--- a/src/components/JournalView/JournalStats.vue
+++ b/src/components/JournalView/JournalStats.vue
@@ -49,7 +49,7 @@ let data = reactive({
     {
       name: 'driver',
       titlePath: 'journal.driver-stats-title',
-      inactive: true,
+      // inactive: true,
     },
   ] as { name: TStatTab; titlePath: string; inactive?: boolean }[],
 });
diff --git a/src/components/JournalView/JournalTimetablesList.vue b/src/components/JournalView/JournalTimetablesList.vue
index 06a87d0..f9d06a7 100644
--- a/src/components/JournalView/JournalTimetablesList.vue
+++ b/src/components/JournalView/JournalTimetablesList.vue
@@ -1,10 +1,10 @@
 <template>
   <transition-group class="journal-list" tag="ul" name="list-anim">
     <li
-      v-for="{ timetable, stockHistoryComp, stops, ...item } in computedTimetableHistory"
+      v-for="{ timetable, stockHistoryComp, stops, showExtraInfo, ...item } in computedTimetableHistory"
       class="journal_item"
       :key="timetable.id"
-      @click="item.showExtra.value = !item.showExtra.value"
+      @click="showExtraInfo.value = !showExtraInfo.value"
     >
       <div class="journal_item-info">
         <div class="info-general">
@@ -43,7 +43,7 @@
           <span class="general-time">
             <b class="info-date">{{ localeDay(timetable.beginDate, $i18n.locale) }}</b>
             <b
-              class="info-status"
+              class="info-badge"
               :class="{
                 fulfilled: timetable.fulfilled,
                 terminated: timetable.terminated && !timetable.fulfilled,
@@ -67,45 +67,28 @@
 
         <hr />
 
+        <!-- Spis postojów -->
         <div class="stop-list">
-          <span class="stop-list-item" v-for="(stop, i) in stops" :data-confirmed="stop.confirmed">
-            <span v-if="i > 0">&nbsp;&gt;&nbsp;</span>
-
-            <span>{{ stop.stopName }}</span>
-
-            <span v-if="stop.scheduledArrivalDate || stop.scheduledDepartureDate">
-              <span>&nbsp;&lpar;</span>
-              <span v-if="stop.scheduledArrivalDate"
-                >p.
-                <s
-                  class="text--grayed"
-                  v-if="stop.realArrivalDate && stop.scheduledArrivalDate != stop.realArrivalDate && stop.confirmed"
-                  >{{ stop.scheduledArrivalDate }}</s
-                >
-                {{ stop.realArrivalDate || stop.scheduledArrivalDate }}
+          <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 v-if="stop.scheduledArrivalDate && stop.scheduledDepartureDate">
-                / <span v-if="stop.stopTime">{{ stop.stopTime }}{{ stop.stopType }} / </span>
-              </span>
-              <span v-if="stop.scheduledDepartureDate"
-                >o.
-                <s
-                  class="text--grayed"
-                  v-if="
-                    stop.realDepartureDate && stop.scheduledDepartureDate != stop.realDepartureDate && stop.confirmed
-                  "
-                >
-                  {{ stop.scheduledDepartureDate }}
-                </s>
-                {{ stop.realDepartureDate || stop.scheduledDepartureDate }}</span
-              >
-              <span>&rpar;</span>
             </span>
+
+            <span class="stop-name">{{ stop.stopName }}</span>
+            <span v-html="stop.html"></span>
           </span>
         </div>
 
         <!-- Status RJ -->
-        <div style="margin: 0.5em 0">
+        <div class="info-status" style="margin: 0.5em 0">
           <span>
             <b>{{ $t('journal.route-length') }}</b>
             {{ !timetable.fulfilled ? timetable.currentDistance + ' /' : '' }}
@@ -122,12 +105,24 @@
             <b>
               {{ $t(`journal.${timetable.terminated ? 'last-seen-at' : 'currently-at'}`) }}
               {{ timetable.currentSceneryName.replace(/.[a-zA-Z0-9]+.sc/, '') }}
+
+              <span v-if="timetable.currentLocation.toString()">&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.toString()">&rpar;</span>
             </b>
           </span>
         </div>
 
-        <!-- Nick dyżurnego -->
-        <div v-if="timetable.authorName">
+        <!-- Info o autorze RJ -->
+        <div class="info-author" v-if="timetable.authorName">
           <b class="text--grayed">{{ $t('journal.dispatcher-name') }}&nbsp;</b>
           <router-link class="dispatcher-link" :to="`/journal/dispatchers?dispatcherName=${timetable.authorName}`">
             <b>{{ timetable.authorName }}</b>
@@ -144,11 +139,11 @@
 
         <button class="btn--option btn--show">
           {{ $t('journal.stock-info') }}
-          <img :src="getIcon(`arrow-${item.showExtra.value ? 'asc' : 'desc'}`)" alt="Arrow" />
+          <img :src="getIcon(`arrow-${showExtraInfo.value ? 'asc' : 'desc'}`)" alt="Arrow" />
         </button>
 
         <!-- Dodatkowe informacje -->
-        <div class="info-extended" v-if="timetable.stockString && timetable.stockMass && item.showExtra.value">
+        <div class="info-extended" v-if="timetable.stockString && timetable.stockMass && showExtraInfo.value">
           <hr />
 
           <div class="stock-specs">
@@ -180,6 +175,7 @@
             </span>
           </div>
 
+          <!-- Historia zmian w składzie -->
           <div class="stock-history" v-if="stockHistoryComp.length > 1">
             <button
               class="btn--action"
@@ -252,70 +248,66 @@ export default defineComponent({
             };
           }),
 
-        stops: timetable.sceneriesString.split('%').map((stopName, i, arr) => {
-          /* Internal error with scheduledBeginDate & scheduledEndDate being mixed up with respectively
-          beginDate and endDate, kurwa mać */
-
-          const scheduledArrivalDateString = timetable.checkpointArrivalsScheduled?.at(i);
-          const scheduledDepartureDateString = timetable.checkpointDeparturesScheduled?.at(i);
-          const arrivalDateString = timetable.checkpointArrivals?.at(i);
-          const departureDateString = timetable.checkpointDepartures?.at(i);
-
-          if (i == 0)
-            return {
-              stopName,
-              scheduledArrivalDate: null,
-              realArrivalDate: null,
-              scheduledDepartureDate: this.localeTime(
-                scheduledDepartureDateString || timetable.beginDate,
-                this.$i18n.locale
-              ),
-              realDepartureDate: this.localeTime(
-                departureDateString || timetable.scheduledBeginDate,
-                this.$i18n.locale
-              ),
-
-              confirmed: i < timetable.confirmedStopsCount,
-            };
-
-          if (i == arr.length - 1)
-            return {
-              stopName,
-              scheduledArrivalDate: this.localeTime(scheduledArrivalDateString || timetable.endDate, this.$i18n.locale),
-              realArrivalDate: this.localeTime(arrivalDateString || timetable.scheduledEndDate, this.$i18n.locale),
-              scheduledDepartureDate: null,
-              realDepartureDate: null,
-
-              confirmed: timetable.fulfilled,
-            };
-
-          const stopInfo = timetable.checkpointStopTypes?.at(i)?.split(',');
-
-          return {
-            stopName,
-            realArrivalDate: arrivalDateString ? this.localeTime(arrivalDateString, this.$i18n.locale) : null,
-            scheduledArrivalDate: scheduledArrivalDateString
-              ? this.localeTime(scheduledArrivalDateString, this.$i18n.locale)
-              : null,
-
-            realDepartureDate: departureDateString ? this.localeTime(departureDateString, this.$i18n.locale) : null,
-            scheduledDepartureDate: scheduledDepartureDateString
-              ? this.localeTime(scheduledDepartureDateString, this.$i18n.locale)
-              : null,
-
-            stopTime: Number(stopInfo?.at(0)) || null,
-            stopType: stopInfo?.at(1) || null,
-
-            confirmed: i < timetable.confirmedStopsCount,
-          };
-        }),
-        showExtra: ref(false),
+        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 arrivalDelay =
+        //   arrivalDateReal && arrivalDateScheduled ? arrivalDateReal.getTime() - arrivalDateScheduled.getTime() : 0;
+
+        // const departureDelay =
+        //   departureDateReal && departureDateScheduled
+        //     ? departureDateReal.getTime() - departureDateScheduled.getTime()
+        //     : 0;
+
+        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) {
       if (!timetable) return;
       if (timetable.terminated) return;
@@ -351,7 +343,7 @@ hr {
     margin-right: 0.5em;
   }
 
-  &-status {
+  &-badge {
     padding: 0.05em 0.35em;
     color: black;
 
@@ -448,10 +440,18 @@ ul.stock-list {
 }
 
 .stop-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25em;
+
   color: #adadad;
 
   &-item[data-confirmed='true'] {
     color: #a3eba3;
+
+    .stop-name {
+      font-weight: bold;
+    }
   }
 }
 
@@ -467,17 +467,10 @@ ul.stock-list {
 }
 
 @include smallScreen {
-  .info-general {
-    flex-direction: column;
-  }
-  .info-extended {
+  .journal_item-info {
     text-align: center;
   }
 
-  .general-train {
-    justify-content: center;
-  }
-
   .info-route {
     display: flex;
     justify-content: center;
@@ -487,10 +480,9 @@ ul.stock-list {
     margin: 1em auto 0 auto;
   }
 
-  .stock-specs {
-    justify-content: center;
-  }
-
+  .info-general,
+  .general-train,
+  .stock-specs,
   .stock-history {
     justify-content: center;
   }
diff --git a/src/locales/en.json b/src/locales/en.json
index 18b305b..67d0ba9 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -274,6 +274,7 @@
     "title": "DISPATCHER HISTORY",
     "loading": "Loading dispatcher history data...",
     "no-history": "No dispatcher history found!",
+    "data-refreshed-at": "Data refreshed at",
 
     "section-timetables": "TIMETABLES",
     "section-dispatchers": "DISPATCHERS",
@@ -291,8 +292,10 @@
 
     "online-since": "ONLINE SINCE",
     "duty-lasted": "The duty lasted",
-    "minutes": "{minutes} mins",
-    "hours": "{hours}h {minutes} mins",
+
+    "hours": "{value} hour | {value} hours",
+    "minutes": "{value} min | {value} mins",
+    "seconds": "{value} s",
 
     "stock-info": "EXTRA INFO",
     "stock-length": "Length",
@@ -329,7 +332,10 @@
     "driver-stats-info": "Enter a proper nickname into filters [F] to see user's driving statistics!",
 
     "stats-loading": "Fetching statistics...",
-    "stats-error": "Oops! An unexpected error occurred while trying to fetch statistics! :/"
+    "stats-error": "Oops! An unexpected error occurred while trying to fetch statistics! :/",
+
+    "timetable-location-signal": "signal:",
+    "timetable-location-route": "route:"
   },
   "scenery": {
     "users": "PLAYERS ONLINE",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index ee22ead..dba4f1e 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -279,6 +279,7 @@
     "title": "HISTORIA DYŻURÓW",
     "loading": "Ładowanie historii dyżurów...",
     "no-history": "Brak historii dyżurów dla tej scenerii!",
+    "data-refreshed-at": "Dane odświeżone o",
 
     "section-timetables": "ROZKŁADY JAZDY",
     "section-dispatchers": "DYŻURNI",
@@ -288,8 +289,9 @@
 
     "online-since": "ONLINE OD",
     "duty-lasted": "Dyżur trwał",
-    "minutes": "{minutes} min.",
-    "hours": "{hours} godz. {minutes} min.",
+    "hours": "{value} godz.",
+    "minutes": "{value} min.",
+    "seconds": "{value} sek.",
 
     "route-length": "Kilometraż:",
     "station-count": "Stacje:",
@@ -333,7 +335,10 @@
     "driver-stats-info": "Wpisz nazwę użytkownika w filtrach [F], aby zobaczyć jego statystyki maszynisty!",
 
     "stats-loading": "Pobieranie statystyk...",
-    "stats-error": "Ups! Wystąpił błąd podczas próby pobrania statystyk! :/"
+    "stats-error": "Ups! Wystąpił błąd podczas próby pobrania statystyk! :/",
+
+    "timetable-location-signal": "semafor:",
+    "timetable-location-route": "szlak:"
   },
   "scenery": {
     "users": "GRACZE ONLINE",
diff --git a/src/mixins/dateMixin.ts b/src/mixins/dateMixin.ts
index 9d96b69..59bf1f6 100644
--- a/src/mixins/dateMixin.ts
+++ b/src/mixins/dateMixin.ts
@@ -1,50 +1,70 @@
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  methods: {
-    localeDate(dateString: string, locale: string) {
-      return new Date(dateString).toLocaleDateString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
-        weekday: 'long',
-        day: 'numeric',
-        month: '2-digit',
-        year: 'numeric',
-        hour: '2-digit',
-        minute: '2-digit',
-      });
-    },
-
-    localeDay(dateString: string, locale: string) {
-      return new Date(dateString).toLocaleDateString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
-        day: 'numeric',
-        month: '2-digit',
-        year: 'numeric',
-      });
-    },
-
-    localeTime(dateString: string, locale: string) {
-      return new Date(dateString).toLocaleTimeString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
-        hour: '2-digit',
-        minute: '2-digit',
-      });
-    },
-
-    timestampToString(timestamp: number | null) {
-      return timestamp
-        ? new Date(timestamp).toLocaleTimeString('pl-PL', {
-            hour: '2-digit',
-            minute: '2-digit',
-          })
-        : '';
-    },
-
-    calculateDuration(timestampMs: number) {
-      const minsTotal = Math.round(timestampMs / 60000);
-      const hoursTotal = Math.floor(minsTotal / 60);
-      const minsInHour = minsTotal % 60;
-
-      return minsTotal > 60
-        ? this.$t('journal.hours', { hours: hoursTotal, minutes: minsInHour })
-        : this.$t('journal.minutes', { minutes: minsTotal });
-    },
-  },
-});
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  methods: {
+    localeDate(dateString: string, locale: string) {
+      return new Date(dateString).toLocaleDateString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
+        weekday: 'long',
+        day: 'numeric',
+        month: '2-digit',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      });
+    },
+
+    localeDay(dateString: string, locale: string) {
+      return new Date(dateString).toLocaleDateString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
+        day: 'numeric',
+        month: '2-digit',
+        year: 'numeric',
+      });
+    },
+
+    localeTime(dateString: string, locale: string) {
+      return new Date(dateString).toLocaleTimeString(locale == 'pl' ? 'pl-PL' : 'en-GB', {
+        hour: '2-digit',
+        minute: '2-digit',
+      });
+    },
+
+    stringToDate(dateString?: string) {
+      return dateString ? new Date(dateString) : null;
+    },
+
+    parseDateToTimeString(date: Date | null) {
+      return (
+        date?.toLocaleTimeString('pl-PL', {
+          hour: '2-digit',
+          minute: '2-digit',
+        }) || ''
+      );
+    },
+
+    timestampToString(timestamp: number | null) {
+      return timestamp
+        ? new Date(timestamp).toLocaleTimeString('pl-PL', {
+            hour: '2-digit',
+            minute: '2-digit',
+          })
+        : '';
+    },
+
+    calculateDuration(timestampMs: number, showSeconds = false) {
+      const secondsTotal = Math.floor(timestampMs / 1000);
+      const minsTotal = Math.round(timestampMs / 60000);
+      const hoursTotal = Math.floor(minsTotal / 60);
+      const minsInHour = minsTotal % 60;
+
+      return minsTotal >= 60
+        ? `${this.$t('journal.hours', { value: hoursTotal }, hoursTotal)} ${this.$t(
+            'journal.minutes',
+            { value: minsInHour },
+            minsInHour
+          )}`
+        : showSeconds && secondsTotal <= 60
+        ? this.$t('journal.seconds', { value: secondsTotal }, secondsTotal)
+        : this.$t('journal.minutes', { value: minsTotal }, minsTotal);
+    },
+  },
+});
diff --git a/src/scripts/interfaces/api/TimetablesAPIData.ts b/src/scripts/interfaces/api/TimetablesAPIData.ts
index 5d81015..e64a231 100644
--- a/src/scripts/interfaces/api/TimetablesAPIData.ts
+++ b/src/scripts/interfaces/api/TimetablesAPIData.ts
@@ -16,6 +16,7 @@ export interface TimetableHistory {
   twr: number;
   skr: number;
   sceneriesString: string;
+  currentLocation: string[];
 
   routeDistance: number;
   currentDistance: number;
diff --git a/src/styles/JournalSection.scss b/src/styles/JournalSection.scss
index 6db9a7c..f7be3d8 100644
--- a/src/styles/JournalSection.scss
+++ b/src/styles/JournalSection.scss
@@ -23,6 +23,15 @@
   padding: 1em 0;
 }
 
+.journal_refreshed-date {
+  background-color: #333;
+  color: #ddd;
+  text-align: end;
+
+  padding: 0.25em;
+  margin: 0.5em 0;
+}
+
 .journal_warning {
   text-align: center;
   font-size: 1.3em;
@@ -71,6 +80,10 @@
     justify-content: center;
     flex-wrap: wrap;
   }
+
+  .journal_refreshed-date {
+    text-align: center;
+  }
 }
 
 @media (orientation: landscape) {
diff --git a/src/views/JournalDispatchers.vue b/src/views/JournalDispatchers.vue
index f68aa79..ce1b622 100644
--- a/src/views/JournalDispatchers.vue
+++ b/src/views/JournalDispatchers.vue
@@ -13,6 +13,10 @@
         optionsType="dispatchers"
       />
 
+      <div class="journal_refreshed-date" v-if="dataRefreshedAt">
+        {{ $t('journal.data-refreshed-at') }}: {{ dataRefreshedAt.toLocaleString($i18n.locale) }}
+      </div>
+
       <div class="list_wrapper" @scroll="handleScroll">
         <transition name="status-anim" mode="out-in">
           <div :key="dataStatus">
@@ -104,6 +108,7 @@ export default defineComponent({
   data: () => ({
     currentQuery: '',
     currentQueryArray: [] as string[],
+    dataRefreshedAt: null as Date | null,
 
     scrollDataLoaded: true,
     scrollNoMoreData: false,
@@ -273,6 +278,7 @@ export default defineComponent({
             ? this.historyList[0].dispatcherName
             : '';
 
+        this.dataRefreshedAt = new Date();
         this.dataStatus = DataStatus.Loaded;
       } catch (error) {
         this.dataStatus = DataStatus.Error;
diff --git a/src/views/JournalTimetables.vue b/src/views/JournalTimetables.vue
index 23e0da1..11b110b 100644
--- a/src/views/JournalTimetables.vue
+++ b/src/views/JournalTimetables.vue
@@ -16,6 +16,10 @@
 
       <JournalStats />
 
+      <div class="journal_refreshed-date" v-if="dataRefreshedAt">
+        {{ $t('journal.data-refreshed-at') }}: {{ dataRefreshedAt.toLocaleString($i18n.locale) }}
+      </div>
+
       <div class="list_wrapper" @scroll="handleScroll">
         <transition name="status-anim" mode="out-in">
           <div :key="dataStatus">
@@ -101,6 +105,7 @@ export default defineComponent({
 
   data: () => ({
     currentQueryParams: {} as TimetablesQueryParams,
+    dataRefreshedAt: null as Date | null,
 
     scrollDataLoaded: true,
     scrollNoMoreData: false,
@@ -326,6 +331,7 @@ export default defineComponent({
             : '';
 
         this.dataStatus = DataStatus.Loaded;
+        this.dataRefreshedAt = new Date();
       } catch (error) {
         this.dataStatus = DataStatus.Error;
         this.dataErrorMessage = 'Ups! Coś poszło nie tak!';