Poprawki wyświetlania

src/App.scss

@@ -3,18 +3,6 @@
 @import "./styles/global.scss";
 @import "./styles/scenery_status.scss";
 
-:root {
-  --clr-primary: #ffc014;
-  --clr-secondary: #2f2f2f;
-
-  --clr-bg: #333;
-
-  --clr-accent: #1085b3;
-  --clr-accent2: #ff3d5d;
-
-  --clr-skr: #ff5100;
-  --clr-twr: #ffbb00;
-}
 
 // VUE ROUTE CHANGE ANIMATION
 .view-anim {

src/components/TrainsView/TrainTable.vue

@@ -21,10 +21,10 @@
         v-for="(train, i) in computedTrains"
         :key="i"
         :ref="
-          train.timetableData &&
-          ((el) => {
+          (el) => {
+            if (!train.timetableData) return;
             elList[train.timetableData.timetableId] = el;
-          })
+          }
         "
       >
         <div
@@ -169,7 +169,7 @@
           <TrainSchedule
             :followingStops="train.timetableData.followingStops"
             :currentStationName="train.currentStationName"
-            @click="changeScheduleShowState(train.timetableData.timetableId)"
+            @click="changeScheduleShowState(train.timetableData?.timetableId)"
           />
         </div>
       </li>
@@ -259,7 +259,7 @@ export default defineComponent({
 
   setup(props) {
     const store = useStore();
-    const elList: Ref<HTMLElement[]> = ref([]);
+    const elList: Ref<(HTMLElement | null)[]> = ref([]);
 
     onBeforeUpdate(() => {
       elList.value.length = 0;
@@ -293,16 +293,25 @@ export default defineComponent({
   },
 
   methods: {
+    focusOnTrain(trainNoStr: string) {
+      const timetableId = this.computedTrains.find(
+        (train) => train.trainNo == Number(trainNoStr)
+      )?.timetableData?.timetableId;
+
+      if (!timetableId) return;
+
+      this.changeScheduleShowState(timetableId);
+    },
+
     changeScheduleShowState(timetableId: number | undefined) {
       if (!timetableId || timetableId < 0) return;
 
       this.showedSchedule =
         this.showedSchedule == timetableId ? 0 : timetableId;
-
       this.$nextTick(() => {
-        const currentEl: HTMLElement = this.elList[timetableId];
+        const currentEl = this.elList[timetableId];
 
-        currentEl.scrollIntoView({
+        currentEl?.scrollIntoView({
           behavior: "smooth",
           block: "nearest",
         });
@@ -352,16 +361,8 @@ export default defineComponent({
     },
   },
 
-  watch: {
-    queryTrain(trainNo: string) {
-      const timetableId = this.computedTrains.find(
-        (train) => train.trainNo == parseInt(trainNo)
-      )?.timetableData?.timetableId;
-
-      if (!timetableId) return;
-
-      this.changeScheduleShowState(timetableId);
-    },
+  activated() {
+    if (this.queryTrain) this.focusOnTrain(this.queryTrain);
   },
 });
 </script>
@@ -388,7 +389,7 @@ img.train-image {
 .traffic-warning {
   padding: 1em 0.5em;
   margin-bottom: 0.5em;
-  background: firebrick;
+  background: var(--clr-warning);
 }
 
 .train {

src/styles/global.scss

@@ -1,3 +1,20 @@
+:root {
+  --clr-primary: #ffc014;
+  --clr-secondary: #2f2f2f;
+
+  --clr-bg: #333;
+
+  --clr-accent: #1085b3;
+  --clr-accent2: #ff3d5d;
+
+  --clr-skr: #ff5100;
+  --clr-twr: #ffbb00;
+
+  --clr-error: #df3e3e;
+  --clr-warning: #c59429;
+}
+
+
 html {
   scroll-behavior: smooth;
 }
@@ -171,4 +188,10 @@ ul {
   &-column {
     flex-direction: column;
   }
+}
+
+.text {
+  &--primary {
+    color: var(--clr-primary);
+  }
 }

src/views/HistoryView.vue

@@ -30,77 +30,110 @@
     </div>
 
     <div class="history_list">
-      <transition-group name="list" tag="ul">
-        <li v-for="(item, i) in historyList" :key="i">
-          <div class="history_item-top">
-            <span>
-              <span
-                @click="
-                  () =>
-                    !item.terminated ? navigateToTrain(item.trainNo) : null
-                "
-                style="cursor: pointer"
-              >
-                {{ item.trainCategoryCode }} {{ item.trainNo }}
-              </span>
+      <div class="list_wrapper">
+        <transition name="warning" mode="out-in">
+          <div :key="historyDataStatus.status">
+            <div v-if="isDataLoading" class="history_warning">Ładowanie...</div>
 
-              <div>
-                <b>{{ item.route.replace("|", " - ") }}</b>
-              </div>
-            </span>
-
-            <span
-              class="history_item-status"
-              :class="{
-                fulfilled: item.fulfilled,
-                terminated: item.terminated && !item.fulfilled,
-                active: !item.terminated,
-              }"
+            <div
+              v-if="!isDataLoading && isDataError"
+              class="history_warning error"
             >
-              {{
-                !item.terminated
-                  ? "AKTYWNY"
-                  : item.fulfilled
-                  ? "WYPEŁNIONY"
-                  : "NIEWYPEŁNIONY"
-              }}
-            </span>
+              Wystąpił błąd!
+            </div>
+
+            <div
+              class="history_warning"
+              v-if="!isDataLoading && !isDataError && historyList.length == 0"
+            >
+              Brak wyników!
+            </div>
+
+            <ul v-if="!isDataLoading && !isDataError">
+              <li
+                v-for="(item, i) in historyList"
+                :key="item.timetableId"
+                :style="`--delay: ${i * 50}ms`"
+              >
+                <div class="history_item-top">
+                  <span>
+                    <span
+                      @click="
+                        navigateToTrain(!item.terminated ? item.trainNo : null)
+                      "
+                      style="cursor: pointer"
+                    >
+                      <b class="text--primary">{{ item.trainCategoryCode }}</b>
+                      {{ item.trainNo }}
+                    </span>
+
+                    <div>
+                      <b>{{ item.route.replace("|", " - ") }}</b>
+                    </div>
+                  </span>
+
+                  <span
+                    class="history_item-status"
+                    :class="{
+                      fulfilled: item.fulfilled,
+                      terminated: item.terminated && !item.fulfilled,
+                      active: !item.terminated,
+                    }"
+                  >
+                    {{
+                      !item.terminated
+                        ? "AKTYWNY"
+                        : item.fulfilled
+                        ? "WYPEŁNIONY"
+                        : "NIEWYPEŁNIONY"
+                    }}
+                  </span>
+                </div>
+
+                <div style="margin: 1em 0">
+                  <div>
+                    <b>Maszynista:</b>
+                    {{ item.driverName }}
+                  </div>
+                  <div>
+                    <b>Kilometraż:</b>
+                    {{ !item.fulfilled ? item.currentDistance + " /" : "" }}
+                    {{ item.routeDistance }} km
+                  </div>
+
+                  <div>
+                    <b>Stacje:</b>
+                    {{ item.confirmedStopsCount }} /
+                    {{ item.allStopsCount }}
+                  </div>
+
+                  <div>
+                    <b>Rozpoczęcie:</b>
+                    {{ localeDate(item.beginDate) }}
+                  </div>
+
+                  <div>
+                    <b>Zakończenie:</b>
+                    {{ localeDate(item.endDate) }}
+                  </div>
+                </div>
+              </li>
+            </ul>
           </div>
-
-          <div style="margin: 1em 0">
-            <div><b>Maszynista:</b> {{ item.driverName }}</div>
-            <div>
-              <b>Kilometraż:</b>
-              {{ !item.fulfilled ? item.currentDistance + " /" : "" }}
-              {{ item.routeDistance }} km
-            </div>
-
-            <div>
-              <b>Stacje:</b>
-              {{ item.confirmedStopsCount }} /
-              {{ item.allStopsCount }}
-            </div>
-
-            <div>
-              <b>Rozpoczęcie:</b>
-              {{ localeDate(item.beginDate) }}
-            </div>
-
-            <div><b>Zakończenie:</b> {{ localeDate(item.endDate) }}</div>
-          </div>
-        </li>
-      </transition-group>
+        </transition>
+      </div>
     </div>
   </section>
 </template>
 
 <script lang="ts">
-import { defineComponent, Ref, ref } from "vue";
+import { computed, defineComponent, Ref, ref } from "vue";
 import axios from "axios";
 
 import ActionButton from "@/components/Global/ActionButton.vue";
 import SearchBox from "@/components/Global/SearchBox.vue";
 import dateMixin from "@/mixins/dateMixin";
+import { DataStatus } from "@/scripts/enums/DataStatus";
 
 const API_URL =
   "https://stacjownik-api-m9z4k.ondigitalocean.app/api/getTimetables";
@@ -134,49 +167,86 @@ interface TimetableHistory {
   fulfilled: boolean;
 }
 
-async function fetchData(props: {
-  searchedDriver?: string;
-  searchedTrain?: string;
-  maxCount?: number;
-}): Promise<TimetableHistory[] | null> {
-  const queries: string[] = [];
-
-  if (!props.searchedDriver && !props.searchedTrain) queries.push("count=15");
-  if (props.maxCount) queries.push(`count=${props.maxCount}`);
-  if (props.searchedDriver) queries.push(`driver=${props.searchedDriver}`);
-  if (props.searchedTrain) queries.push(`train=${props.searchedTrain}`);
-
-  const responseData: APIResponse | null = await (
-    await axios.get(`${API_URL}?${queries.join("&")}`)
-  ).data;
-
-  return responseData?.response || null;
-}
-
 export default defineComponent({
   components: { SearchBox, ActionButton },
   mixins: [dateMixin],
   setup() {
     const historyList: Ref<TimetableHistory[]> = ref([]);
+    const historyDataStatus: Ref<{ status: DataStatus; error: string | null }> =
+      ref({ status: DataStatus.Loading, error: null });
+
     const searchedDriver = ref("");
     const searchedTrain = ref("");
     const maxCount = ref(15);
 
-    (async () => {
-      const response = await fetchData({});
+    const fetchHistoryData = async (
+      props: {
+        searchedDriver?: string;
+        searchedTrain?: string;
+        maxCount?: number;
+      } = {}
+    ) => {
+      historyDataStatus.value.status = DataStatus.Loading;
 
-      if (response) historyList.value = response;
-    })();
+      const queries: string[] = [];
+
+      if (!props.searchedDriver && !props.searchedTrain)
+        queries.push("count=15");
+      if (props.maxCount) queries.push(`count=${props.maxCount}`);
+      if (props.searchedDriver) queries.push(`driver=${props.searchedDriver}`);
+      if (props.searchedTrain) queries.push(`train=${props.searchedTrain}`);
+
+      try {
+        const responseData: APIResponse | null = await (
+          await axios.get(`${API_URL}?${queries.join("&")}`)
+        ).data;
+
+        if (!responseData) {
+          historyDataStatus.value.status = DataStatus.Error;
+          historyDataStatus.value.error = "Brak danych!";
+          return;
+        }
+
+        if (responseData.errorMessage) {
+          historyDataStatus.value.status = DataStatus.Error;
+          historyDataStatus.value.error = responseData.errorMessage;
+
+          return;
+        }
+
+        if (!responseData.response) return;
+
+        // Response data exists
+        historyList.value = responseData.response;
+        historyDataStatus.value.status = DataStatus.Loaded;
+      } catch (error) {
+        historyDataStatus.value.status = DataStatus.Error;
+        historyDataStatus.value.error = "Ups! Coś poszło nie tak!";
+      }
+    };
+
+    // on created
+    fetchHistoryData();
 
     return {
       historyList,
       searchedDriver,
       searchedTrain,
       maxCount,
+      fetchHistoryData,
+      historyDataStatus,
+      isDataLoading: computed(
+        () => historyDataStatus.value.status === DataStatus.Loading
+      ),
+      isDataError: computed(
+        () => historyDataStatus.value.status === DataStatus.Error
+      ),
     };
   },
   methods: {
-    navigateToTrain(trainNo: number) {
+    navigateToTrain(trainNo: number | null) {
+      if (!trainNo) return;
+
       this.$router.push({
         name: "TrainsView",
         params: { queryTrain: trainNo.toString() },
@@ -196,12 +266,10 @@ export default defineComponent({
     },
 
     async search() {
-      const response = await fetchData({
+      this.fetchHistoryData({
         searchedDriver: this.searchedDriver,
         searchedTrain: this.searchedTrain,
       });
-
-      if (response) this.historyList = response;
     },
 
     keyPressed({ keyCode }) {
@@ -212,8 +280,22 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.warning {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active {
+    transition: all 100ms ease-out;
+  }
+
+  &-leave-active {
+    transition: all 100ms ease-out 100ms;
+  }
+}
+
 .history-view {
-  /* min-height: 100vh; */
   height: 100%;
 
   padding: 2em;
@@ -224,10 +306,6 @@ h2 {
   margin-bottom: 1rem;
 }
 
-h3 {
-  text-align: center;
-}
-
 .history_list {
   display: flex;
   justify-content: center;
@@ -256,30 +334,23 @@ h3 {
   }
 }
 
-ul {
+.history_warning {
+  text-align: center;
+  font-size: 1.3em;
+
+  &.error {
+    background-color: var(--clr-error);
+  }
+}
+
+.list_wrapper {
   width: 1000px;
 }
 
-li {
+li,
+.history_warning {
   background: #202020;
   padding: 1em;
   margin: 1em 0;
 }
-
-.list-enter-active,
-.list-leave-active {
-  transition: all 350ms ease;
-}
-
-.list-enter-from,
-.list-leave-to {
-  opacity: 0;
-  transform: scale(0.95);
-  /* transform: translateX(30px); */
-}
-
-.list-enter-to,
-.list-leave-from {
-  opacity: 1;
-}
 </style>

src/views/TrainsView.vue

@@ -2,10 +2,7 @@
   <section class="trains-view">
     <div class="wrapper">
       <div class="options-bar">
-        <TrainStats
-          :trains="trainList"
-          :trainStatsOpen="trainStatsOpen"
-        />
+        <TrainStats :trains="trainList" :trainStatsOpen="trainStatsOpen" />
 
         <TrainOptions
           :queryTrain="queryTrain"
@@ -15,10 +12,7 @@
         />
       </div>
 
-      <TrainTable
-        :computedTrains="computedTrains"
-        :queryTrain="queryTrain"
-      />
+      <TrainTable :computedTrains="computedTrains" :queryTrain="queryTrain" />
     </div>
   </section>
 </template>