Dodano filtry do widoku historii rozkładów jazdy

src/components/JournalView/JournalOptions.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="journal-options">
+    <div class="options_wrapper">
+      <div class="options_content">
+        <div class="content_select">
+          <select-box
+            :title="$t('journal.option-distance')"
+            :itemList="translatedSorterOptions"
+            :defaultItemIndex="0"
+            @selected="changeSorter"
+          />
+
+        </div>
+
+        <div class="content_search">
+          <div class="search-box">
+            <input
+              class="search-input"
+              v-model="searchedTrain"
+              :placeholder="$t('journal.search-train')"
+              @keydown.enter="search"
+            />
+
+            <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('journal.search-driver')"
+              @keydown.enter="search"
+            />
+
+            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearDriver" />
+          </div>
+
+          <action-button class="search-button" @click="search">
+            {{ $t('history.search') }}
+          </action-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, inject } from 'vue';
+import { useI18n } from 'vue-i18n';
+import ActionButton from '../Global/ActionButton.vue';
+import SelectBox from '../Global/SelectBox.vue';
+
+export default defineComponent({
+  components: { SelectBox, ActionButton },
+  emits: ['changedOptions'],
+
+  data: () => ({
+    exitIcon: require('@/assets/icon-exit.svg'),
+  }),
+
+  setup() {
+    const { t } = useI18n();
+
+    const sorterOptions = ['distance', 'total-stops'];
+
+    const translatedSorterOptions = computed(() =>
+      sorterOptions.map((id) => ({
+        id,
+        value: t(`journal.option-${id}`),
+      }))
+    );
+
+    return {
+      translatedSorterOptions,
+
+      searchedTrain: inject('searchedTrain') as string,
+      searchedDriver: inject('searchedDriver') as string,
+      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
+    };
+  },
+
+  methods: {
+    changeSorter(item: { id: string | number; value: string }) {
+      this.sorterActive.id = item.id;
+      this.sorterActive.dir = -1;
+    },
+
+    search() {
+      console.log('gituwa');
+
+      this.$emit('changedOptions');
+    },
+
+    clearDriver() {
+      this.searchedDriver = '';
+      this.search();
+    },
+
+    clearTrain() {
+      this.searchedTrain = '';
+      this.search();
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive';
+
+.journal-options {
+  @include smallScreen() {
+    width: 100%;
+  }
+}
+
+.options {
+  &_wrapper {
+    display: flex;
+    flex-wrap: wrap;
+
+
+    @include smallScreen() {
+      justify-content: center;
+    }
+  }
+
+  &_content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    .content_search, .content_select {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+
+
+    @include smallScreen() {
+      padding: 0 1em;
+
+      .content_select {
+        margin: 0 auto;
+      }
+
+      .content_search {
+        justify-content: center;
+      }
+    }
+  }
+}
+
+.content_search .search {
+  &-box {
+    position: relative;
+
+    background: #333;
+    border-radius: 0.5em;
+    min-width: 200px;
+
+    margin: 0.5em 0.5em 0.5em 0;
+
+    @include smallScreen() {
+      width: 100%;
+      margin: 0.5em auto;
+    }
+  }
+
+  &-input {
+    border: none;
+
+    min-width: 100%;
+    padding: 0.35em 0.5em;
+  }
+
+  &-exit {
+    position: absolute;
+    cursor: pointer;
+
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+
+    width: 1em;
+  }
+}
+</style>

src/components/StationsView/FilterOption.vue

@@ -1,8 +1,7 @@
 <template>
   <div class="filter-option option">
-    <label class="option-label">
+    <label>
       <input
-        class="option-input"
         type="checkbox"
         :name="option.name"
         :defaultValue="option.defaultValue"
@@ -10,9 +9,7 @@
         v-model="option.value"
         @change="handleChange"
       />
-      <span
+      <span :class="option.section + (option.value ? ' checked' : '')"
-        class="option-content"
-        :class="option.section + (option.value ? ' checked' : '')"
         >{{ $t(`filters.${option.id}`) }}
       </span>
     </label>
@@ -20,7 +17,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent } from 'vue';
 
 interface FilterOption {
   id: string;
@@ -37,10 +34,10 @@ export default defineComponent({
       required: true,
     },
   },
-  emits: ["optionChange"],
+  emits: ['optionChange'],
   methods: {
     handleChange() {
-      this.$emit("optionChange", {
+      this.$emit('optionChange', {
         name: this.option.name,
         value: this.option.value,
       });
@@ -53,6 +50,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import "../../styles/option.scss";
+
 $accessCol: #e03b07;
 $controlCol: #0085ff;
 $signalCol: #bf7c00;
@@ -60,106 +59,74 @@ $statusCol: #349b32;
 $saveCol: #28a826;
 $routesCol: #9049c0;
 
-.option {
+.option span {
-  input {
+  &.checked {
-    display: none;
+    &.access {
-  }
+      background-color: $accessCol;
-
-  span {
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-
-    width: 100%;
-    text-align: center;
-
-    cursor: pointer;
-
-    padding: 0.5em 0.55em;
-
-    display: inline-block;
-    position: relative;
-
-    transition: all 0.2s;
-
-    border-radius: 0.5em;
-
-    &:not(.checked) {
-      background-color: #585858;
 
       &::before {
-        box-shadow: none;
+        box-shadow: 0 0 6px 1px $accessCol;
       }
     }
 
-    &.checked {
+    &.control {
-      &.access {
+      background-color: $controlCol;
-        background-color: $accessCol;
-
-        &::before {
-          box-shadow: 0 0 6px 1px $accessCol;
-        }
-      }
-
-      &.control {
-        background-color: $controlCol;
-
-        &::before {
-          box-shadow: 0 0 6px 1px $controlCol;
-        }
-      }
-
-      &.signals {
-        background-color: $signalCol;
-
-        &::before {
-          box-shadow: 0 0 6px 1px $signalCol;
-        }
-      }
-
-      &.routes {
-        background-color: $routesCol;
-
-        &::before {
-          box-shadow: 0 0 6px 1px $routesCol;
-        }
-      }
-
-      &.status {
-        background-color: $statusCol;
-
-        &::before {
-          box-shadow: 0 0 6px 1px $statusCol;
-        }
-      }
-
-      &.save {
-        background-color: $saveCol;
-
-        &::before {
-          box-shadow: 0 0 6px 1px $saveCol;
-        }
-      }
-
-      &.mode {
-        background-color: lightgreen;
-        color: black;
-
-        font-weight: 500;
-      }
 
       &::before {
-        position: absolute;
+        box-shadow: 0 0 6px 1px $controlCol;
-        content: "";
-        top: 0;
-        left: 0;
-
-        width: 100%;
-        height: 100%;
-
-        border-radius: 0.5em;
       }
     }
+
+    &.signals {
+      background-color: $signalCol;
+
+      &::before {
+        box-shadow: 0 0 6px 1px $signalCol;
+      }
+    }
+
+    &.routes {
+      background-color: $routesCol;
+
+      &::before {
+        box-shadow: 0 0 6px 1px $routesCol;
+      }
+    }
+
+    &.status {
+      background-color: $statusCol;
+
+      &::before {
+        box-shadow: 0 0 6px 1px $statusCol;
+      }
+    }
+
+    &.save {
+      background-color: $saveCol;
+
+      &::before {
+        box-shadow: 0 0 6px 1px $saveCol;
+      }
+    }
+
+    &.mode {
+      background-color: lightgreen;
+      color: black;
+
+      font-weight: 500;
+    }
+
+    &::before {
+      position: absolute;
+      content: '';
+      top: 0;
+      left: 0;
+
+      width: 100%;
+      height: 100%;
+
+      border-radius: 0.5em;
+    }
   }
 }
-</style>
+</style>

src/locales/en.json

@@ -143,7 +143,13 @@
   "journal": {
     "title": "DISPATCHER HISTORY",
     "loading": "Loading dispatcher history data...",
-    "no-history": "No dispatcher history found!"
+    "no-history": "No dispatcher history found!",
+
+    "search-train": "Train no.",
+    "search-driver": "Driver name",
+
+    "option-distance": "distance",
+    "option-total-stops": "total stops"
   },
   "scenery": {
     "users": "PLAYERS ONLINE",

src/locales/pl.json

@@ -143,7 +143,13 @@
   "journal": {
     "title": "HISTORIA DYŻURÓW",
     "loading": "Ładowanie historii dyżurów...",
-    "no-history": "Brak historii dyżurów dla tej scenerii!"
+    "no-history": "Brak historii dyżurów dla tej scenerii!",
+
+    "search-train": "Numer pociągu",
+    "search-driver": "Nick maszynisty",
+
+    "option-distance": "kilometraż",
+    "option-total-stops": "stacje"
   },
   "scenery": {
     "users": "GRACZE ONLINE",

src/router/index.ts

@@ -22,8 +22,8 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: "/journal",
-    name: "TimetableHistoryView",
+    name: "JournalView",
-    component: () => import("@/views/TimetableHistoryView.vue"),
+    component: () => import("@/views/JournalView.vue"),
   },
   {
     path: '/:catchAll(.*)',

src/scripts/interfaces/FilterOption.ts

@@ -0,0 +1,6 @@
+export default interface FilterOption {
+    id: string;
+    name: string;
+    value: boolean;
+    defaultValue: boolean;
+}

src/store/index.ts

@@ -182,7 +182,13 @@ export const store = createStore<State>({
     async fetchTimetableData({ commit }) {
 
       const reducedList = this.state.trainList.reduce(async (acc: Promise<Timetable[]>, train: Train) => {
-        const timetable: TimetableAPIData = await (await axios.get(URLs.getTimetableURL(train.trainNo, this.state.region.id))).data.message;
+        const data: { success: boolean; message: TimetableAPIData } = await (await axios.get(URLs.getTimetableURL(train.trainNo, this.state.region.id))).data;
+
+        if (!data.success) {
+          return acc;
+        }
+        
+        const timetable = data.message;
         const trainInfo = timetable.trainInfo;
 
         if (!timetable || !trainInfo) return acc;

src/styles/option.scss

@@ -0,0 +1,36 @@
+
+.option { 
+    font-size: 1em;
+    
+    input {
+        display: none;
+    }
+        
+    span {
+        user-select: none;
+        -moz-user-select: none;
+        -webkit-user-select: none;
+
+        width: 100%;
+        text-align: center;
+
+        cursor: pointer;
+
+        padding: 0.5em 0.55em;
+
+        display: inline-block;
+        position: relative;
+
+        transition: all 0.2s;
+
+        border-radius: 0.5em;
+
+        &:not(.checked) {
+            background-color: #585858;
+
+            &::before {
+                box-shadow: none;
+            }
+        }
+    }
+}

src/views/JournalView.vue

@@ -1,25 +1,7 @@
 <template>
   <section class="history-view">
     <div class="history-wrapper">
-      <h2>{{ $t('history.title') }}</h2>
+      <JournalOptions @changedOptions="search" />
-      <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">
@@ -114,14 +96,18 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, Ref, ref } from 'vue';
+import { computed, defineComponent, provide, reactive, 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';
 
+import ActionButton from '@/components/Global/ActionButton.vue';
+import JournalOptions from '@/components/JournalView/JournalOptions.vue';
+
+import FilterOption from '@/scripts/interfaces/FilterOption';
+
 const PROD_MODE = true;
 
 const API_URL = PROD_MODE
@@ -160,82 +146,74 @@ interface TimetableHistory {
   fulfilled: boolean;
 }
 
+const initFilters = {
+  status: {
+    active: {
+      id: 'active',
+      name: 'status',
+      value: false,
+      defaultValue: false,
+    },
+
+    abandoned: {
+      id: 'abandoned',
+      name: 'status',
+      value: false,
+      defaultValue: false,
+    },
+
+    fulfilled: {
+      id: 'fulfilled',
+      name: 'status',
+      value: true,
+      defaultValue: true,
+    },
+  },
+};
+
 export default defineComponent({
-  components: { SearchBox, ActionButton },
+  components: { SearchBox, ActionButton, JournalOptions },
   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 sorterActive = ref({ id: 'distance', dir: -1 });
     const searchedDriver = ref('');
     const searchedTrain = ref('');
-    const maxCount = ref(15);
 
-    const fetchHistoryData = async (
+    provide('searchedTrain', searchedTrain);
-      props: {
+    provide('searchedDriver', searchedDriver);
-        searchedDriver?: string;
+    provide('sorterActive', sorterActive);
-        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,
+      historyList: ref([]) as Ref<TimetableHistory[]>,
-      searchedDriver,
-      searchedTrain,
-      maxCount,
-      fetchHistoryData,
       historyDataStatus,
+
       isDataLoading: computed(() => historyDataStatus.value.status === DataStatus.Loading),
       isDataError: computed(() => historyDataStatus.value.status === DataStatus.Error),
+
+      searchedDriver,
+      searchedTrain,
+      sorterActive,
+
+      maxCount: ref(15),
+
+      filters: reactive({ ...initFilters }) as { [filterSection: string]: { [filterId: string]: FilterOption } },
     };
   },
 
+  mounted() {
+    this.fetchHistoryData();
+  },
+
   methods: {
     navigateToTrain(trainNo: number | null) {
       if (!trainNo) return;
@@ -246,23 +224,7 @@ export default defineComponent({
       });
     },
 
-    clearDriver() {
+    search() {
-      this.searchedDriver = '';
-
-      this.search();
-    },
-
-    test() {
-      console.log('xd');
-    },
-
-    clearTrain() {
-      this.searchedTrain = '';
-
-      this.search();
-    },
-
-    async search() {
       this.fetchHistoryData({
         searchedDriver: this.searchedDriver,
         searchedTrain: this.searchedTrain,
@@ -272,12 +234,58 @@ export default defineComponent({
     keyPressed({ keyCode }) {
       if (keyCode == 13) this.search();
     },
+
+    async fetchHistoryData(
+      props: {
+        searchedDriver?: string;
+        searchedTrain?: string;
+        maxCount?: number;
+      } = {}
+    ) {
+      this.historyDataStatus.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}`);
+
+      console.log(this.sorterActive);
+
+      try {
+        const responseData: APIResponse | null = await (await axios.get(`${API_URL}?${queries.join('&')}`)).data;
+
+        if (!responseData) {
+          this.historyDataStatus.status = DataStatus.Error;
+          this.historyDataStatus.error = 'Brak danych!';
+          return;
+        }
+
+        if (responseData.errorMessage) {
+          this.historyDataStatus.status = DataStatus.Error;
+          this.historyDataStatus.error = responseData.errorMessage;
+
+          return;
+        }
+
+        if (!responseData.response) return;
+
+        // Response data exists
+        this.historyList = responseData.response;
+        this.historyDataStatus.status = DataStatus.Loaded;
+      } catch (error) {
+        this.historyDataStatus.status = DataStatus.Error;
+        this.historyDataStatus.error = 'Ups! Coś poszło nie tak!';
+      }
+    },
   },
 });
 </script>
 
 <style lang="scss" scoped>
 @import '../styles/responsive.scss';
+@import '../styles/option.scss';
 
 .warning {
   &-enter-from,
@@ -302,13 +310,9 @@ export default defineComponent({
 }
 
 .history-wrapper {
-  width: 1000px;
+  width: 1300px;
-  padding: 2em 1em;
-}
 
-h2 {
+  padding: 1em 0.5em;
-  text-align: center;
-  margin-bottom: 1rem;
 }
 
 .history_item {
@@ -340,52 +344,12 @@ h2 {
   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;
@@ -406,10 +370,5 @@ li,
   .history-view {
     font-size: 1.25em;
   }
-
-  .search-button {
-    margin-left: 0;
-    margin-top: 0.5em;
-  }
 }
 </style>