Dodano sortowanie wg uwag eksploatacyjnych; poprawiono pomniejsze błędy

src/components/Global/SelectBox.vue

@@ -2,7 +2,7 @@
   <div class="select-box">
     <div class="select-box_content">
       <button class="selected" @click="toggleBox">
-        <span class="text--primary">{{prefix}}</span> {{ computedSelectedItem.value }}
+        <span class="text--primary">{{ prefix }}</span> {{ computedSelectedItem.value }}
       </button>
 
       <ul class="options" :ref="(el) => (listRef = el)">

src/components/TrainsView/TrainOptions.vue

@@ -1,6 +1,33 @@
 <template>
   <div class="train-options">
     <div class="options_wrapper">
+      <div class="options_content">
+        <div class="content_select">
+          <select-box
+            :itemList="translatedSorterOptions"
+            :defaultItemIndex="0"
+            @selected="changeSorter"
+            :prefix="$t('trains.sorter-prefix')"
+          />
+        </div>
+
+        <div class="content_search">
+          <div class="search-box">
+            <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
+
+            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedTrain = '')" />
+          </div>
+
+          <div class="search-box">
+            <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
+
+            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedDriver = '')" />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- <div class="options_wrapper">
       <select-box
         :title="$t('trains.option-distance')"
         :itemList="translatedSorterOptions"
@@ -8,7 +35,9 @@
         :prefix="$t('trains.sorter-prefix')"
         @selected="changeSorter"
       />
+    </div>
 
+    <div class="options_wrapper">
       <div class="search-box">
         <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
 
@@ -20,7 +49,7 @@
 
         <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedDriver = '')" />
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -45,6 +74,10 @@ export default defineComponent({
         id: 'distance',
         value: 'kilometraż',
       },
+      {
+        id: 'comments',
+        value: 'komentarze',
+      },
       {
         id: 'progress',
         value: 'przebyta trasa',
@@ -99,25 +132,43 @@ export default defineComponent({
     width: 100%;
   }
 }
+.options {
+  &_wrapper {
+    display: flex;
+    flex-wrap: wrap;
 
-.options_wrapper {
+    @include smallScreen() {
-  display: flex;
+      justify-content: center;
-  align-items: center;
+    }
-  flex-wrap: wrap;
+  }
 
-  margin-bottom: 0.5em;
+  &_content {
-
+    display: flex;
-  @include smallScreen() {
-    justify-content: center;
     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;
+      }
+    }
   }
 }
 
-.select-box {
+.content_search .search {
-  margin: 0.5em 0;
-}
-
-.search {
   &-box {
     position: relative;
 
@@ -125,17 +176,18 @@ export default defineComponent({
     border-radius: 0.5em;
     min-width: 200px;
 
-    margin: 0.5em 0 0.5em 0.5em;
+    margin: 0.5em 0.5em 0.5em 0;
 
     @include smallScreen() {
-      width: 85%;
+      width: 100%;
+      margin: 0.5em auto;
     }
   }
 
   &-input {
     border: none;
 
-    min-width: 85%;
+    min-width: 100%;
     padding: 0.35em 0.5em;
   }
 

src/components/TrainsView/TrainTable.vue

@@ -201,6 +201,7 @@ img.train-image {
     overflow: auto;
 
     padding-right: 0.5em;
+    margin-top: 1em;
 
     @include smallScreen() {
       width: 100%;

src/components/TrainsView/TrainTimetableCard.vue

@@ -6,7 +6,12 @@
     </div>
 
     <train-info :train="train" />
-    <train-schedule v-if="train.timetableData" :followingStops="train.timetableData.followingStops" ref="card-inner" tabindex="0" />
+    <train-schedule
+      v-if="train.timetableData"
+      :followingStops="train.timetableData.followingStops"
+      ref="card-inner"
+      tabindex="0"
+    />
   </section>
 </template>
 
@@ -38,7 +43,7 @@ export default defineComponent({
   methods: {
     close() {
       this.$emit('close');
-    }
+    },
   },
 });
 </script>
@@ -64,7 +69,10 @@ export default defineComponent({
 
   width: 95%;
   max-width: 1300px;
+  max-height: calc(100vh - 2em);
 
+  top: 0;
+  transform: translate(-50%, 1em);
 
   border: 1px solid white;
 }

src/locales/en.json

@@ -143,6 +143,7 @@
     "option-timetable": "train no.",
     "option-progress": "route progress",
     "option-delay": "current delay",
+    "option-comments": "comments",
 
     "sorter-prefix": "Sort: ",
     "search-train": "Train no.",

src/locales/pl.json

@@ -144,6 +144,7 @@
     "option-timetable": "nr pociągu",
     "option-progress": "przebyta trasa",
     "option-delay": "opóźnienie",
+    "option-comments": "uwagi ekspl.",
 
     "sorter-prefix": "Sortuj: ",
     "search-train": "Numer pociągu",

src/views/TrainsView.vue

@@ -42,67 +42,90 @@ const currentDelay = (stops: TrainStop[] | undefined) => {
   return delay;
 };
 
+function sortTrainList(trainList: Train[], sorterActive: { id: string; dir: number }) {
+  return trainList.sort((a: Train, b: Train) => {
+    switch (sorterActive.id) {
+      case 'mass':
+        if (a.mass > b.mass) return sorterActive.dir;
+        return -sorterActive.dir;
+
+      case 'distance':
+        if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
+
+        return -sorterActive.dir;
+
+      case 'progress':
+        if (confirmedPercentage(a.timetableData?.followingStops) > confirmedPercentage(b.timetableData?.followingStops))
+          return sorterActive.dir;
+
+        return -sorterActive.dir;
+
+      case 'delay':
+        if (currentDelay(a.timetableData?.followingStops) > currentDelay(b.timetableData?.followingStops))
+          return sorterActive.dir;
+
+        return -sorterActive.dir;
+
+      case 'speed':
+        if (a.speed > b.speed) return sorterActive.dir;
+        return -sorterActive.dir;
+
+      case 'timetable':
+        if (a.trainNo > b.trainNo) return sorterActive.dir;
+        return -sorterActive.dir;
+
+      case 'length':
+        if (a.length > b.length) return sorterActive.dir;
+        return -sorterActive.dir;
+
+      default:
+        break;
+    }
+
+    return 0;
+  });
+}
+
 const filteredTrainList = (
   trainList: Train[],
   searchedTrain: string,
   searchedDriver: string,
-  sorterActive: { id: string; dir: number }
+  sorterActive: { id: string; dir: number },
-) => {  
+  priorityProp: string
-  return trainList
+) => {
-    .filter(
+  let finalTrainList: Train[] = [];
-      (train) =>
-        (searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
-        (searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true)
-    )
-    .sort((a, b) => {
-      const commentsA = a.timetableData?.followingStops.some(s => s.comments) ? 1 : 0;
-      const commentsB = b.timetableData?.followingStops.some(s => s.comments) ? 1 : 0;
 
-      return commentsB - commentsA;
+  switch (sorterActive.id) {
-    })
+    case 'comments':
-    .sort((a: Train, b: Train) => {
+      const trainsSortedByComments = trainList
-      switch (sorterActive.id) {
+        .filter(
-        case 'mass':
+          (train) =>
-          if (a.mass > b.mass) return sorterActive.dir;
+            (searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
-          return -sorterActive.dir;
+            (searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true)
+        )
+        .sort((a, b) => {
+          const commentsA = a.timetableData?.followingStops.some((s) => s.comments) ? 1 : 0;
+          const commentsB = b.timetableData?.followingStops.some((s) => s.comments) ? 1 : 0;
 
-        case 'distance':
+          return commentsB - commentsA;
-          if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
+        });
 
-          return -sorterActive.dir;
+      const trainsWithComments = trainsSortedByComments.filter((train) =>
+        train.timetableData?.followingStops.some((s) => s.comments)
+      );
 
-        case 'progress':
+      const trainsWithoutComments = trainsSortedByComments.slice(trainsWithComments.length);
-          if (
-            confirmedPercentage(a.timetableData?.followingStops) > confirmedPercentage(b.timetableData?.followingStops)
-          )
-            return sorterActive.dir;
 
-          return -sorterActive.dir;
+      finalTrainList.push(...trainsWithComments);
+      finalTrainList.push(...sortTrainList(trainsWithoutComments, sorterActive));
+      break;
 
-        case 'delay':
+    default:
-          if (currentDelay(a.timetableData?.followingStops) > currentDelay(b.timetableData?.followingStops))
+      finalTrainList.push(...sortTrainList(trainList, sorterActive));
-            return sorterActive.dir;
+      break;
+  }
 
-          return -sorterActive.dir;
+  return finalTrainList;
-
-        case 'speed':
-          if (a.speed > b.speed) return sorterActive.dir;
-          return -sorterActive.dir;
-
-        case 'timetable':
-          if (a.trainNo > b.trainNo) return sorterActive.dir;
-          return -sorterActive.dir;
-
-        case 'length':
-          if (a.length > b.length) return sorterActive.dir;
-          return -sorterActive.dir;
-
-        default:
-          break;
-      }
-
-      return 0;
-    });
 };
 
 export default defineComponent({
@@ -129,13 +152,20 @@ export default defineComponent({
     const sorterActive = ref({ id: 'distance', dir: -1 });
     const searchedDriver = ref('');
     const searchedTrain = ref('');
+    const priorityProp = ref('');
 
     provide('searchedTrain', searchedTrain);
     provide('searchedDriver', searchedDriver);
     provide('sorterActive', sorterActive);
 
     const computedTrains: ComputedRef<Train[]> = computed(() => {
-      return filteredTrainList(trainList.value, searchedTrain.value, searchedDriver.value, sorterActive.value);
+      return filteredTrainList(
+        trainList.value,
+        searchedTrain.value,
+        searchedDriver.value,
+        sorterActive.value,
+        priorityProp.value
+      );
     });
 
     /* Provide list for TrainStats category filter */