widok historii rozkładów

src/App.vue

@@ -81,7 +81,6 @@
 </template>
 
 <script lang="ts">
-// import UpdateModal from "@/components/Global/UpdateModal.vue";
 import Clock from "@/components/App/Clock.vue";
 
 import StorageManager from "@/scripts/managers/storageManager";
@@ -89,7 +88,6 @@ import { computed, ComputedRef, defineComponent } from "vue";
 import { GETTERS } from "./constants/storeConstants";
 import { StoreData } from "./scripts/interfaces/StoreData";
 import { useStore } from "./store";
-// import { StoreData } from "./scripts/interfaces/StoreData";
 
 export default defineComponent({
   components: {

src/components/Global/SearchBox.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="search-box">
+    <input
+      class="search-input"
+      :placeholder="$t(titleToTranslate)"
+      v-model="compSearchedValue"
+      @keypress="updateValue"
+    />
+
+    <img
+      class="search-exit"
+      :src="exitIcon"
+      alt="exit-icon"
+      @click="() => (compSearchedValue = '')"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch } from "vue";
+
+export default defineComponent({
+  data: () => ({
+    exitIcon: require("@/assets/icon-exit.svg"),
+  }),
+  props: {
+    searchedValue: {
+      type: String,
+      required: true,
+    },
+    updateOnInput: {
+      type: Boolean,
+      default: true,
+    },
+    titleToTranslate: {
+      type: String,
+      required: true,
+    },
+  },
+
+  setup(props, { emit }) {
+    const compSearchedValue = ref(props.searchedValue);
+
+    if (props.updateOnInput) {
+      watch(
+        () => compSearchedValue.value,
+        (value) => {
+          emit("update:searchedValue", value);
+        }
+      );
+    }
+
+    const updateValue = (e) => {
+      if (!props.updateOnInput && e.keyCode == 13)
+        emit("update:searchedValue", compSearchedValue.value);
+    };
+
+    return {
+      compSearchedValue,
+      updateValue,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/responsive";
+
+.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;
+  }
+}
+</style>

src/components/SceneryView/SceneryInfo.vue

@@ -7,14 +7,12 @@
           :href="stationInfo.stationURL"
           target="_blank"
           rel="noopener noreferrer"
-        >{{ stationInfo.stationName }}</a>
+          >{{ stationInfo.stationName }}</a
+        >
 
         <span v-else>{{ stationInfo.stationName }}</span>
       </div>
-      <div
+      <div class="scenery-hash" v-if="stationInfo.stationHash">
-        class="scenery-hash"
-        v-if="stationInfo.stationHash"
-      >
         #{{ stationInfo.stationHash }}
       </div>
     </div>
@@ -25,36 +23,24 @@
         :class="!stationInfo.stationHash ? 'no-stats' : ''"
       >
         <span class="likes">
-          <img
+          <img :src="likeIcon" alt="icon-like" />
-            :src="likeIcon"
-            alt="icon-like"
-          />
           <span>{{ stationInfo.dispatcherRate }}</span>
         </span>
 
         <span class="users">
-          <img
+          <img :src="userIcon" alt="icon-user" />
-            :src="userIcon"
-            alt="icon-user"
-          />
           <span>{{ stationInfo.currentUsers }}</span>
           /
           <span>{{ stationInfo.maxUsers }}</span>
         </span>
 
         <span class="spawns">
-          <img
+          <img :src="spawnIcon" alt="icon-spawn" />
-            :src="spawnIcon"
-            alt="icon-spawn"
-          />
           <span>{{ stationInfo.spawns.length }}</span>
         </span>
 
         <span class="schedules">
-          <img
+          <img :src="timetableIcon" alt="icon-timetable" />
-            :src="timetableIcon"
-            alt="icon-timetable"
-          />
           <span v-if="stationInfo.scheduledTrains">
             <span style="color: #eee">{{
               stationInfo.scheduledTrains.length
@@ -90,45 +76,42 @@
 
         <img
           v-if="stationInfo.SBL && stationInfo.SBL !== ''"
-          :src="require(`@/assets/icon-SBL.svg`)"
+          :src="SBLIcon"
           alt="SBL"
           :title="$t('desc.SBL') + `${stationInfo.SBL}`"
         />
 
         <img
           v-if="stationInfo.default"
-          :src="require(`@/assets/icon-td2.svg`)"
+          :src="td2Icon"
           alt="default-pack"
           :title="$t('desc.default')"
         />
 
         <img
           v-if="stationInfo.nonPublic || !stationInfo.reqLevel"
-          :src="require(`@/assets/icon-lock.svg`)"
+          :src="lockIcon"
           alt="non-public"
           :title="$t('desc.non-public')"
         />
 
         <img
           v-if="stationInfo.unavailable"
-          :src="require(`@/assets/icon-unavailable.svg`)"
+          :src="unavailableIcon"
           alt="icon-unavailable"
           :title="$t('desc.unavailable')"
         />
 
         <img
           v-if="stationInfo.stationLines && stationInfo.stationLines != ''"
-          :src="require('@/assets/icon-real.svg')"
+          :src="realIcon"
           alt="real"
           :title="$t('desc.real')"
         />
       </div>
 
       <div class="info-dispatcher">
-        <div
+        <div class="dispatcher" v-if="stationInfo.stationHash">
-          class="dispatcher"
-          v-if="stationInfo.stationHash"
-        >
           <span
             class="dispatcher_level"
             :style="
@@ -146,10 +129,7 @@
           <span class="dispatcher_name">{{ stationInfo.dispatcherName }}</span>
         </div>
 
-        <span
+        <span class="status-badge" :class="stationInfo.statusID">
-          class="status-badge"
-          :class="stationInfo.statusID"
-        >
           {{ $t(`status.${stationInfo.statusID}`) }}
           {{
             stationInfo.statusID == "online" ? stationInfo.statusTimeString : ""
@@ -161,10 +141,7 @@
         <div class="user-list">
           <h3 class="user-header">
             {{ $t("scenery.users") }}
-            <img
+            <img :src="userIcon" alt="icon-user" />
-              :src="userIcon"
-              alt="icon-user"
-            />
           </h3>
 
           <div
@@ -189,10 +166,7 @@
         <div class="spawn-list">
           <h3 class="spawn-header">
             {{ $t("scenery.spawns") }}
-            <img
+            <img :src="spawnIcon" alt="icon-spawn" />
-              :src="spawnIcon"
-              alt="icon-spawn"
-            />
           </h3>
 
           <span
@@ -224,6 +198,7 @@ export default defineComponent({
   props: {
     stationInfo: {
       type: Object as () => Station,
+      default: {},
     },
 
     timetableOnly: Boolean,
@@ -236,6 +211,12 @@ export default defineComponent({
     spawnIcon: require("@/assets/icon-spawn.svg"),
     timetableIcon: require("@/assets/icon-timetable.svg"),
     userIcon: require("@/assets/icon-user.svg"),
+
+    SBLIcon: require("@/assets/icon-SBL.svg"),
+    td2Icon: require("@/assets/icon-td2.svg"),
+    lockIcon: require("@/assets/icon-lock.svg"),
+    unavailableIcon: require("@/assets/icon-unavailable.svg"),
+    realIcon: require("@/assets/icon-real.svg"),
   }),
 
   setup(props) {

src/locales/en.json

@@ -142,5 +142,9 @@
     "terminated": "Terminated",
     "begins": "BEGINS HERE",
     "terminates": "TERMINATES\nHERE"
+  },
+  "history": {
+    "search-train": "Search by train number",
+    "search-driver": "Search by driver name"
   }
 }

src/locales/pl.json

@@ -104,8 +104,8 @@
     "option-length": "długość",
     "option-distance": "kilometraż",
     "option-timetable": "numer pociągu",
-    "search-no": "Szukaj nr pociągu...",
+    "search-no": "Szukaj nr pociągu",
-    "search-driver": "Szukaj maszynisty...",
+    "search-driver": "Szukaj maszynisty",
     "detailed-timetable": "Szczegółowy rozkład jazdy pociągu ",
     "via-title": "Przez: ",
     "no-timetable": "brak rozkładu jazdy",
@@ -142,5 +142,9 @@
     "terminated": "Skończył bieg",
     "begins": "ROZPOCZYNA\nBIEG",
     "terminates": "KOŃCZY BIEG"
+  },
+  "history": {
+    "search-train": "Szukaj nr pociągu",
+    "search-driver": "Szukaj maszynisty"
   }
 }

src/router/index.ts

@@ -21,6 +21,15 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import("@/views/SceneryView.vue"),
     props: true
   },
+  {
+    path: "/history",
+    name: "HistoryView",
+    component: () => import("@/views/HistoryView.vue"),
+  },
+  {
+    path: '/:catchAll(.*)',
+    redirect: "/"
+  }
 ]
 
 const router = createRouter({

src/views/HistoryView.vue

@@ -0,0 +1,210 @@
+<template>
+  <section class="history-view">
+    <h2>Historia rozkładów jazdy</h2>
+
+    <div style="display: flex; justify-content: center; align-items: center">
+      <search-box
+        v-model:searchedValue="searchDriver"
+        titleToTranslate="history.search-driver"
+        :updateOnInput="false"
+      ></search-box>
+
+      <search-box
+        v-model:searchedValue="searchTrain"
+        titleToTranslate="history.search-train"
+        :updateOnInput="false"
+      ></search-box>
+    </div>
+
+    <div class="history_list">
+      <ul v-if="historyList">
+        <li v-for="item in historyList" :key="item.timetableId">
+          <div class="history_item-top">
+            <span>
+              <span
+                @click="
+                  () =>
+                    !item.terminated ? navigateToTrain(item.trainNo) : null
+                "
+                style="cursor: pointer"
+                >{{ item.trainCategoryCode }} {{ 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>Rozpoczęcie:</b>
+              {{ new Date(item.beginDate).toLocaleString() }}
+            </div>
+            <div>
+              <b>Zakończenie:</b> {{ new Date(item.endDate).toLocaleString() }}
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import SearchBox from "@/components/Global/SearchBox.vue";
+import axios from "axios";
+import { computed, defineComponent, Ref, ref } from "vue";
+
+const API_URL =
+  "https://stacjownik-api-m9z4k.ondigitalocean.app/api/getTimetables?count=15";
+
+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;
+  sceneries: string[];
+
+  routeDistance: number;
+  currentDistance: number;
+
+  confirmedStopsCount: number;
+  allStopsCount: number;
+
+  beginDate: string;
+  endDate: string;
+
+  terminated: boolean;
+  fulfilled: boolean;
+}
+
+async function fetchData(): Promise<TimetableHistory[] | null> {
+  const responseData: APIResponse | null = await (
+    await axios.get(API_URL)
+  ).data;
+
+  return responseData?.response || null;
+}
+
+export default defineComponent({
+  components: { SearchBox },
+  setup() {
+    // const historyList = computed(async () => await fetchData());
+    const historyList: Ref<TimetableHistory[] | null> = ref([]);
+    const searchDriver = ref("");
+    const searchTrain = ref("");
+
+    (async () => {
+      const response = await fetchData();
+
+      historyList.value = response;
+
+      console.log(response);
+    })();
+
+    return {
+      historyList,
+      searchDriver,
+      searchTrain,
+    };
+  },
+  methods: {
+    navigateToTrain(trainNo: number) {
+      this.$router.push({
+        name: "TrainsView",
+        params: { queryTrain: trainNo.toString() },
+      });
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.history-view {
+  /* min-height: 100vh; */
+  height: 100%;
+
+  padding: 2em;
+}
+
+h2 {
+  text-align: center;
+  margin-bottom: 1rem;
+}
+
+h3 {
+  text-align: center;
+}
+
+.history_list {
+  display: flex;
+  justify-content: center;
+}
+
+.history_item {
+  &-top {
+    display: flex;
+    justify-content: space-between;
+
+    padding: 0.2em 0;
+  }
+
+  &-status {
+    &.terminated {
+      color: salmon;
+    }
+
+    &.fulfilled {
+      color: lightgreen;
+    }
+
+    &.active {
+      color: lightblue;
+    }
+  }
+}
+
+ul {
+  width: 800px;
+}
+
+li {
+  background: #202020;
+  padding: 1em;
+  margin: 1em 0;
+}
+</style>

src/views/StationsView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="stations-view">
+  <section class="stations-view">
     <div class="wrapper">
       <div class="body">
         <div class="options-bar">
@@ -13,15 +13,12 @@
           </action-button>
 
           <div class="paypal-link">
-            <a
+            <a target="_blank" href="https://paypal.me/spythere">
-              target="_blank"
-              href="https://paypal.me/spythere"
-            >
               <img
                 src="https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white"
                 alt="PayPal image"
                 style="width: 7em"
-              >
+              />
             </a>
           </div>
         </div>
@@ -43,7 +40,7 @@
         @resetFilters="resetFilters"
       />
     </transition>
-  </div>
+  </section>
 </template>
 
 <script lang="ts">