Poprawiono działanie filtrów historii rozkładów

src/components/Global/SelectBox.vue

@@ -2,29 +2,22 @@
   <div class="select-box">
     <div class="select-box_content">
       <button class="selected" @click="toggleBox">
-        {{ computedSelectedItem.value }}
+        <span class="text--primary">{{prefix}}</span> {{ computedSelectedItem.value }}
       </button>
 
       <ul class="options" :ref="(el) => (listRef = el)">
         <li class="option" v-for="(item, i) in itemList" :key="item.id">
           <transition
             name="unfold"
-            :style="`
+            :style="
+              `
             --delay-in: ${i * 55}ms; 
-            --delay-out: ${(itemList.length - 1 - i) * 55}ms`"
+            --delay-out: ${(itemList.length - 1 - i) * 55}ms`
+            "
           >
             <label :for="item.id" v-if="listOpen">
-              <input
+              <input type="button" :id="item.id" name="select-box" @click="selectOption(item)" />
-                type="button"
+              <span :style="computedSelectedItem.id == item.id ? 'color: gold;' : ''">
-                :id="item.id"
-                name="select-box"
-                @click="selectOption(item)"
-              />
-              <span
-                :style="
-                  computedSelectedItem.id == item.id ? 'color: gold;' : ''
-                "
-              >
                 {{ item.value }}
               </span>
             </label>
@@ -40,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, Ref, ref } from "@vue/runtime-core";
+import { computed, defineComponent, Ref, ref } from '@vue/runtime-core';
 
 interface Item {
   id: string | number;
@@ -48,7 +41,7 @@ interface Item {
 }
 
 export default defineComponent({
-  emits: ["selected"],
+  emits: ['selected'],
 
   props: {
     itemList: {
@@ -60,11 +53,16 @@ export default defineComponent({
       type: Number,
       default: 0,
     },
+
+    prefix: {
+      type: String,
+      default: '',
+    },
   },
 
   data: () => ({
-    ascIcon: require("@/assets/icon-arrow-asc.svg"),
+    ascIcon: require('@/assets/icon-arrow-asc.svg'),
-    descIcon: require("@/assets/icon-arrow-desc.svg"),
+    descIcon: require('@/assets/icon-arrow-desc.svg'),
   }),
 
   setup(props) {
@@ -77,10 +75,7 @@ export default defineComponent({
     let selectedItem: Ref<Item> = ref(props.itemList[props.defaultItemIndex]);
 
     const computedSelectedItem = computed(() => {
-      return (
+      return props.itemList.find((item) => item.id === selectedItem.value.id) || props.itemList[props.defaultItemIndex];
-        props.itemList.find((item) => item.id === selectedItem.value.id) ||
-        props.itemList[props.defaultItemIndex]
-      );
     });
 
     return {
@@ -98,7 +93,7 @@ export default defineComponent({
       this.selectedItem = item;
       this.listOpen = false;
 
-      this.$emit("selected", item);
+      this.$emit('selected', item);
     },
 
     toggleBox(e: Event) {
@@ -116,7 +111,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/variables.scss";
+@import '../../styles/variables.scss';
 
 .unfold {
   &-enter-from,
@@ -244,4 +239,4 @@ li.option {
     cursor: pointer;
   }
 }
-</style>
+</style>

src/components/JournalView/JournalOptions.vue

@@ -4,12 +4,11 @@
       <div class="options_content">
         <div class="content_select">
           <select-box
-            :title="$t('journal.option-distance')"
             :itemList="translatedSorterOptions"
             :defaultItemIndex="0"
             @selected="changeSorter"
+            :prefix="$t('journal.sort-prefix')"
           />
-
         </div>
 
         <div class="content_search">
@@ -61,7 +60,7 @@ export default defineComponent({
   setup() {
     const { t } = useI18n();
 
-    const sorterOptions = ['distance', 'total-stops'];
+    const sorterOptions = ['date', 'distance', 'total-stops'];
 
     const translatedSorterOptions = computed(() =>
       sorterOptions.map((id) => ({
@@ -83,11 +82,11 @@ export default defineComponent({
     changeSorter(item: { id: string | number; value: string }) {
       this.sorterActive.id = item.id;
       this.sorterActive.dir = -1;
+
+      this.$emit('changedOptions');
     },
 
     search() {
-      console.log('gituwa');
-
       this.$emit('changedOptions');
     },
 
@@ -118,7 +117,6 @@ export default defineComponent({
     display: flex;
     flex-wrap: wrap;
 
-
     @include smallScreen() {
       justify-content: center;
     }
@@ -129,14 +127,13 @@ export default defineComponent({
     flex-direction: column;
     align-items: flex-start;
 
-    .content_search, .content_select {
+    .content_search,
+    .content_select {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
     }
 
-
-
     @include smallScreen() {
       padding: 0 1em;
 

src/locales/en.json

@@ -147,9 +147,12 @@
 
     "search-train": "Train no.",
     "search-driver": "Driver name",
+    
+    "sort-prefix": "Sort: ", 
 
     "option-distance": "distance",
-    "option-total-stops": "total stops"
+    "option-total-stops": "total stops",
+    "option-date": "date"
   },
   "scenery": {
     "users": "PLAYERS ONLINE",

src/locales/pl.json

@@ -148,8 +148,11 @@
     "search-train": "Numer pociągu",
     "search-driver": "Nick maszynisty",
 
+    "sort-prefix": "Sortuj: ", 
+
     "option-distance": "kilometraż",
-    "option-total-stops": "stacje"
+    "option-total-stops": "stacje",
+    "option-date": "data"
   },
   "scenery": {
     "users": "GRACZE ONLINE",

src/views/JournalView.vue

@@ -38,7 +38,7 @@
                     <b
                       class="history_item-status"
                       :class="{
-                        fulfilled: item.fulfilled,
+                        fulfilled: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9,
                         terminated: item.terminated && !item.fulfilled,
                         active: !item.terminated,
                       }"
@@ -46,7 +46,7 @@
                       {{
                         !item.terminated
                           ? $t('history.timetable-active')
-                          : item.fulfilled
+                          : (item.fulfilled || item.currentDistance >= item.routeDistance * 0.9)
                           ? $t('history.timetable-fulfilled')
                           : $t('history.timetable-abandoned')
                       }}
@@ -185,7 +185,7 @@ export default defineComponent({
       error: null,
     });
 
-    const sorterActive = ref({ id: 'distance', dir: -1 });
+    const sorterActive = ref({ id: 'date', dir: -1 });
     const searchedDriver = ref('');
     const searchedTrain = ref('');
 
@@ -251,7 +251,12 @@ export default defineComponent({
       if (props.searchedDriver) queries.push(`driver=${props.searchedDriver}`);
       if (props.searchedTrain) queries.push(`train=${props.searchedTrain}`);
 
-      console.log(this.sorterActive);
+      // Z API: const SORT_TYPES = ['allStopsCount', 'endDate', 'beginDate', 'routeDistance'];
+      if (this.sorterActive.id == 'distance') queries.push("sortBy=routeDistance");
+      else if (this.sorterActive.id == 'total-stops') queries.push("sortBy=allStopsCount");
+
+      console.log(queries);
+      
 
       try {
         const responseData: APIResponse | null = await (await axios.get(`${API_URL}?${queries.join('&')}`)).data;