Dodano dziennik rozkładów jazdy

src/App.scss

@@ -88,13 +88,6 @@
 .train-logo {
   position:  relative;
   z-index: 2;
-
-  .logo-cap {
-    position: absolute;
-    left: 0;
-    transform: translateX(0.22em);
-    width: 0.7em;
-  }
 }
 
 .header {

src/App.vue

@@ -1,11 +1,5 @@
 <template>
   <div class="app">
-    <!-- <UpdateModal
-      :currentVersion="VERSION"
-      @toggleUpdateModal="toggleUpdateModal"
-      v-if="updateModalVisible"
-    /> -->
-
     <div class="app_container">
       <!-- <div class="wip-alert">
         <img class="icon-error" :src="iconError" alt="error" />
@@ -15,10 +9,8 @@
       <header class="app_header">
         <div class="header_body">
           <span class="header_brand">
-            <span>
             <span>
               <span>S</span>
-              </span>
               <span>tacj</span>
               <span class="train-logo">
                 <img class="logo-image" src="@/assets/stacjownik-logo.svg" alt="stacjownik logo" />
@@ -66,6 +58,8 @@
             <router-link class="route" active-class="route-active" to="/" exact>{{ $t('app.sceneries') }} </router-link>
             /
             <router-link class="route" active-class="route-active" to="/trains">{{ $t('app.trains') }} </router-link>
+            /
+            <router-link class="route" active-class="route-active" to="/journal">{{ $t('app.journal') }} </router-link>
           </span>
         </div>
       </header>
@@ -101,7 +95,6 @@ import { StoreData } from './scripts/interfaces/StoreData';
 import { useStore } from './store';
 
 import packageInfo from '.././package.json';
-import axios from 'axios';
 
 export default defineComponent({
   components: {
@@ -175,7 +168,6 @@ export default defineComponent({
     },
 
     updateToNewestVersion() {
-      //   to do
       if (!StorageManager.isRegistered('unavailable-status')) {
         StorageManager.setBooleanValue('unavailable-status', true);
         StorageManager.setBooleanValue('ending-status', true);

src/components/SceneryView/SceneryHistory.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="scenery-history">
-    <!-- <div>HISTORIA DYŻURÓW</div>
+    <h2>HISTORIA DYŻURÓW</h2>
 
     <ul>
       <li v-for="(dispatcher, i) in dispatcherHistory" :key="i">
@@ -8,7 +8,7 @@
         &nbsp;
         {{ timestampToString(dispatcher.dispatcherFrom) }}
       </li>
-    </ul> -->
+    </ul>
   </div>
 </template>
 

src/components/TrainsView/TrainOptions.vue

@@ -12,7 +12,7 @@
         <input
           class="search-input"
           v-model="searchedTrain"
-          :placeholder="$t('trains.search-no')"
+          :placeholder="$t('trains.search-train')"
         />
 
         <img

src/components/TrainsView/TrainTable.vue

@@ -454,7 +454,7 @@ img.train-image {
   grid-template-rows: 1fr;
 
   @include smallScreen() {
-    font-size: 1.3em;
+    font-size: 1.2em;
   }
 }
 

src/locales/en.json

@@ -4,7 +4,9 @@
     "trains": "TRAINS",
     "journal": "JOURNAL",
     "loading": "Loading data...",
-    "support": "Support the project"
+    "support": "Support the project",
+    "error": "An error occured while loading data!",
+    "no-result": "No results for current search!"
   },
   "desc": {
     "control-type": "Control type: ",
@@ -121,8 +123,8 @@
     "option-length": "length",
     "option-distance": "distance",
     "option-timetable": "train no.",
-    "search-no": "Search for train no...",
+    "search-train": "Train no.",
-    "search-driver": "Search for driver...",
+    "search-driver": "Driver name",
     "detailed-timetable": "Detailed timetable for train no. ",
     "via-title": "Via: ",
     "no-timetable": "no current timetable",
@@ -161,7 +163,18 @@
     "terminates": "TERMINATES\nHERE"
   },
    "history": {
-    "search-train": "Search for train no.",
+    "title": "TIMETABLE JOURNAL",
-    "search-driver": "Search for driver name..."
+    "search": "Search",
+    "search-train": "Train no.",
+    "search-driver": "Driver name",
+    "driver-name": "Driver:",
+    "route-length": "Route length:",
+    "station-count": "Stations:",
+    "begins-at": "Begins at:",
+    "terminates-at": "Terminates at:",
+    "terminates-at-actual": "Terminates at (actual time):",
+    "timetable-active": "ACTIVE",
+    "timetable-fulfilled": "FULFILLED",
+    "timetable-abandoned": "ABANDONED"
   }
 }

src/locales/pl.json

@@ -4,7 +4,9 @@
     "trains": "POCIĄGI",
     "journal": "DZIENNIK",
     "loading": "Pobieranie danych...",
-    "support": "Wspomóż projekt"
+    "support": "Wspomóż projekt",
+    "error": "An error occured while loading data!",
+    "no-result": "No results for current search!"
   },
   "desc": {
     "control-type": "Sterowanie: ",
@@ -121,8 +123,8 @@
     "option-length": "długość",
     "option-distance": "kilometraż",
     "option-timetable": "numer pociągu",
-    "search-no": "Szukaj nr pociągu",
+    "search-train": "Numer pociągu",
-    "search-driver": "Szukaj maszynisty",
+    "search-driver": "Nick maszynisty",
     "detailed-timetable": "Szczegółowy rozkład jazdy pociągu ",
     "via-title": "Przez: ",
     "no-timetable": "brak rozkładu jazdy",
@@ -161,7 +163,18 @@
     "terminates": "KOŃCZY BIEG"
   },
   "history": {
-    "search-train": "Szukaj nr pociągu",
+    "title": "DZIENNIK ROZKŁADÓW JAZDY",
-    "search-driver": "Szukaj maszynisty"
+    "search": "Szukaj",
+    "search-train": "Numer pociągu",
+    "search-driver": "Nick maszynisty",
+    "driver-name": "Maszynista:",
+    "route-length": "Kilometraż:",
+    "station-count": "Stacje:",
+    "begins-at": "Rozpoczęcie:",
+    "terminates-at": "Zakończenie (planowe):",
+    "terminates-at-actual": "Zakończenie (rzeczywiste):",
+    "timetable-active": "AKTYWNY",
+    "timetable-fulfilled": "WYPEŁNIONY",
+    "timetable-abandoned": "PORZUCONY"
   }
 }

src/mixins/dateMixin.ts

@@ -2,8 +2,8 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
   methods: {
-    localeDate(dateString: string) {
+    localeDate(dateString: string, locale: string) {
-        return new Date(dateString).toLocaleDateString("pl-PL", { 
+      return new Date(dateString).toLocaleDateString(locale == 'pl' ? 'pl-PL' : 'en-GB', { 
             weekday: "long",
             day: "numeric", 
             month: "2-digit", 

src/router/index.ts

@@ -21,9 +21,9 @@ const routes: Array<RouteRecordRaw> = [
     props: true
   },
   {
-    path: "/history",
+    path: "/journal",
-    name: "HistoryView",
+    name: "TimetableHistoryView",
-    component: () => import("@/views/HistoryView.vue"),
+    component: () => import("@/views/TimetableHistoryView.vue"),
   },
   {
     path: '/:catchAll(.*)',

src/views/SceneryView.vue

@@ -19,7 +19,7 @@
         :timetableOnly="timetableOnly"
       />
 
-      <SceneryHistory :name="stationInfo.name" />
+      <!-- <SceneryHistory :name="stationInfo.name" /> -->
     </div>
   </div>
 </template>

src/views/TimetableHistoryView.vue

@@ -0,0 +1,415 @@
+<template>
+  <section class="history-view">
+    <div class="history-wrapper">
+      <h2>{{ $t('history.title') }}</h2>
+      <form class="history_search" action="javascript:void(0);">
+        <div class="search-box">
+          <input
+            class="search-input"
+            v-model="searchedTrain"
+            :placeholder="$t('history.search-train')"
+            @submit="test"
+          />
+          <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearTrain" />
+        </div>
+        <div class="search-box">
+          <input class="search-input" v-model="searchedDriver" :placeholder="$t('history.search-driver')" />
+          <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearDriver" />
+        </div>
+        <action-button class="search-button" @click="search">
+          {{ $t('history.search') }}
+        </action-button>
+      </form>
+
+      <div class="history_list">
+        <div class="list_wrapper">
+          <transition name="warning" mode="out-in">
+            <div :key="historyDataStatus.status">
+              <div v-if="isDataLoading" class="history_warning">{{ $t('app.loading') }}</div>
+
+              <div v-if="!isDataLoading && isDataError" class="history_warning error">
+                {{ $t('app.error') }}
+              </div>
+
+              <div class="history_warning" v-if="!isDataLoading && !isDataError && historyList.length == 0">
+                {{ $t('app.no-result') }}
+              </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>
+
+                      <div class="text--grayed">
+                        {{ item.sceneriesString.replaceAll('%', ' - ') }}
+                      </div>
+                    </span>
+
+                    <b
+                      class="history_item-status"
+                      :class="{
+                        fulfilled: item.fulfilled,
+                        terminated: item.terminated && !item.fulfilled,
+                        active: !item.terminated,
+                      }"
+                    >
+                      {{
+                        !item.terminated
+                          ? $t('history.timetable-active')
+                          : item.fulfilled
+                          ? $t('history.timetable-fulfilled')
+                          : $t('history.timetable-abandoned')
+                      }}
+                    </b>
+                  </div>
+
+                  <div style="margin: 1em 0">
+                    <div>
+                      <b>{{ $t('history.driver-name') }}</b>
+                      {{ item.driverName }}
+                    </div>
+                    <div>
+                      <b>{{ $t('history.route-length') }}</b>
+                      {{ !item.fulfilled ? item.currentDistance + ' /' : '' }}
+                      {{ item.routeDistance }} km
+                    </div>
+
+                    <div>
+                      <b>{{ $t('history.station-count') }}</b>
+                      {{ item.confirmedStopsCount }} /
+                      {{ item.allStopsCount }}
+                    </div>
+
+                    <div>
+                      <b>{{ $t('history.begins-at') }}</b>
+                      {{ localeDate(item.beginDate, $i18n.locale) }}
+                    </div>
+
+                    <div>
+                      <b>{{ $t('history.terminates-at') }}</b>
+                      {{ localeDate(item.scheduledEndDate, $i18n.locale) }}
+                    </div>
+
+                    <div v-if="item.terminated">
+                      <b>{{ $t('history.terminates-at-actual') }}</b>
+                      {{ localeDate(item.endDate, $i18n.locale) }}
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </transition>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+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 PROD_MODE = true;
+
+const API_URL = PROD_MODE
+  ? 'https://stacjownik-api-di22o.ondigitalocean.app/api/getTimetables'
+  : 'http://localhost:3001/api/getTimetables';
+
+interface APIResponse {
+  errorMessage: string | null;
+  response: TimetableHistory[] | null;
+}
+
+interface TimetableHistory {
+  timetableId: number;
+  trainNo: number;
+  trainCategoryCode: string;
+  driverId: number;
+  driverName: string;
+  route: string;
+  twr: number;
+  skr: number;
+  sceneriesString: string;
+
+  routeDistance: number;
+  currentDistance: number;
+
+  confirmedStopsCount: number;
+  allStopsCount: number;
+
+  beginDate: string;
+  endDate: string;
+
+  scheduledBeginDate: string;
+  scheduledEndDate: string;
+
+  terminated: boolean;
+  fulfilled: boolean;
+}
+
+export default defineComponent({
+  components: { SearchBox, ActionButton },
+  mixins: [dateMixin],
+
+  data: () => ({
+    exitIcon: require('@/assets/icon-exit.svg'),
+  }),
+  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);
+
+    const fetchHistoryData = async (
+      props: {
+        searchedDriver?: string;
+        searchedTrain?: string;
+        maxCount?: number;
+      } = {}
+    ) => {
+      historyDataStatus.value.status = DataStatus.Loading;
+
+      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 | null) {
+      if (!trainNo) return;
+
+      this.$router.push({
+        name: 'TrainsView',
+        query: { train: trainNo.toString() },
+      });
+    },
+
+    clearDriver() {
+      this.searchedDriver = '';
+
+      this.search();
+    },
+
+    test() {
+      console.log('xd');
+    },
+
+    clearTrain() {
+      this.searchedTrain = '';
+
+      this.search();
+    },
+
+    async search() {
+      this.fetchHistoryData({
+        searchedDriver: this.searchedDriver,
+        searchedTrain: this.searchedTrain,
+      });
+    },
+
+    keyPressed({ keyCode }) {
+      if (keyCode == 13) this.search();
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/responsive.scss';
+
+.warning {
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active {
+    transition: all 100ms ease-out;
+  }
+
+  &-leave-active {
+    transition: all 100ms ease-out 100ms;
+  }
+}
+
+.history-view {
+  height: 100%;
+
+  display: flex;
+  justify-content: center;
+}
+
+.history-wrapper {
+  width: 1000px;
+  padding: 2em 1em;
+}
+
+h2 {
+  text-align: center;
+  margin-bottom: 1rem;
+}
+
+.history_item {
+  &-top {
+    display: flex;
+    justify-content: space-between;
+
+    padding: 0.2em 0;
+  }
+
+  &-status {
+    &.terminated {
+      color: salmon;
+    }
+
+    &.fulfilled {
+      color: lightgreen;
+    }
+
+    &.active {
+      color: lightblue;
+    }
+  }
+}
+
+.history_search {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+
+  margin-bottom: 0.5em;
+
+  @include smallScreen() {
+    justify-content: center;
+    flex-direction: column;
+  }
+}
+
+.search {
+  &-box {
+    position: relative;
+
+    background: #333;
+    border-radius: 0.5em;
+    min-width: 200px;
+
+    margin: 0.5em 0 0.5em 0.5em;
+
+    @include smallScreen() {
+      width: 85%;
+    }
+  }
+
+  &-input {
+    border: none;
+
+    min-width: 85%;
+    padding: 0.35em 0.5em;
+  }
+
+  &-exit {
+    position: absolute;
+    cursor: pointer;
+
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+
+    width: 1em;
+  }
+}
+
+.search-button {
+  margin-left: 0.5em;
+}
+
+.history_warning {
+  text-align: center;
+  font-size: 1.3em;
+
+  &.error {
+    background-color: var(--clr-error);
+  }
+}
+
+li,
+.history_warning {
+  background: #202020;
+  padding: 1em;
+  margin: 1em 0;
+}
+
+@include smallScreen() {
+  .history-view {
+    font-size: 1.25em;
+  }
+
+  .search-button {
+    margin-left: 0;
+    margin-top: 0.5em;
+  }
+}
+</style>