From 0ff5ca344fc0a615c279d3d1b2642ad784822f2d Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Wed, 26 Jan 2022 14:58:47 +0100
Subject: [PATCH] =?UTF-8?q?Dodano=20filtry=20do=20widoku=20historii=20rozk?=
 =?UTF-8?q?=C5=82ad=C3=B3w=20jazdy?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/JournalView/JournalOptions.vue | 188 ++++++++++++++
 src/components/StationsView/FilterOption.vue  | 167 +++++-------
 src/locales/en.json                           |   8 +-
 src/locales/pl.json                           |   8 +-
 src/router/index.ts                           |   4 +-
 src/scripts/interfaces/FilterOption.ts        |   6 +
 src/store/index.ts                            |   8 +-
 src/styles/option.scss                        |  36 +++
 ...metableHistoryView.vue => JournalView.vue} | 243 ++++++++----------
 9 files changed, 421 insertions(+), 247 deletions(-)
 create mode 100644 src/components/JournalView/JournalOptions.vue
 create mode 100644 src/scripts/interfaces/FilterOption.ts
 create mode 100644 src/styles/option.scss
 rename src/views/{TimetableHistoryView.vue => JournalView.vue} (75%)

diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
new file mode 100644
index 0000000..ff41ea0
--- /dev/null
+++ b/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>
diff --git a/src/components/StationsView/FilterOption.vue b/src/components/StationsView/FilterOption.vue
index f1f633a..fe21e30 100644
--- a/src/components/StationsView/FilterOption.vue
+++ b/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
-        class="option-content"
-        :class="option.section + (option.value ? ' checked' : '')"
+      <span :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 {
-  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;
+.option span {
+  &.checked {
+    &.access {
+      background-color: $accessCol;
 
       &::before {
-        box-shadow: none;
+        box-shadow: 0 0 6px 1px $accessCol;
       }
     }
 
-    &.checked {
-      &.access {
-        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;
-      }
+    &.control {
+      background-color: $controlCol;
 
       &::before {
-        position: absolute;
-        content: "";
-        top: 0;
-        left: 0;
-
-        width: 100%;
-        height: 100%;
-
-        border-radius: 0.5em;
+        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;
+      content: '';
+      top: 0;
+      left: 0;
+
+      width: 100%;
+      height: 100%;
+
+      border-radius: 0.5em;
+    }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/locales/en.json b/src/locales/en.json
index 1fbfe7f..fae189f 100644
--- a/src/locales/en.json
+++ b/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",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index aa4a525..2171aef 100644
--- a/src/locales/pl.json
+++ b/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",
diff --git a/src/router/index.ts b/src/router/index.ts
index be38a0f..753668c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -22,8 +22,8 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: "/journal",
-    name: "TimetableHistoryView",
-    component: () => import("@/views/TimetableHistoryView.vue"),
+    name: "JournalView",
+    component: () => import("@/views/JournalView.vue"),
   },
   {
     path: '/:catchAll(.*)',
diff --git a/src/scripts/interfaces/FilterOption.ts b/src/scripts/interfaces/FilterOption.ts
new file mode 100644
index 0000000..02e8c78
--- /dev/null
+++ b/src/scripts/interfaces/FilterOption.ts
@@ -0,0 +1,6 @@
+export default interface FilterOption {
+    id: string;
+    name: string;
+    value: boolean;
+    defaultValue: boolean;
+}
\ No newline at end of file
diff --git a/src/store/index.ts b/src/store/index.ts
index 08cc9dc..332f5eb 100644
--- a/src/store/index.ts
+++ b/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;
diff --git a/src/styles/option.scss b/src/styles/option.scss
new file mode 100644
index 0000000..0b1edcc
--- /dev/null
+++ b/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;
+            }
+        }
+    }
+}
diff --git a/src/views/TimetableHistoryView.vue b/src/views/JournalView.vue
similarity index 75%
rename from src/views/TimetableHistoryView.vue
rename to src/views/JournalView.vue
index 56fe5f5..65af776 100644
--- a/src/views/TimetableHistoryView.vue
+++ b/src/views/JournalView.vue
@@ -1,25 +1,7 @@
 <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>
+      <JournalOptions @changedOptions="search" />
 
       <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 (
-      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();
+    provide('searchedTrain', searchedTrain);
+    provide('searchedDriver', searchedDriver);
+    provide('sorterActive', sorterActive);
 
     return {
-      historyList,
-      searchedDriver,
-      searchedTrain,
-      maxCount,
-      fetchHistoryData,
+      historyList: ref([]) as Ref<TimetableHistory[]>,
       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() {
-      this.searchedDriver = '';
-
-      this.search();
-    },
-
-    test() {
-      console.log('xd');
-    },
-
-    clearTrain() {
-      this.searchedTrain = '';
-
-      this.search();
-    },
-
-    async search() {
+    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;
-  padding: 2em 1em;
-}
+  width: 1300px;
 
-h2 {
-  text-align: center;
-  margin-bottom: 1rem;
+  padding: 1em 0.5em;
 }
 
 .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>