feat: filtering journal timetables by train category

src/components/JournalView/JournalOptions.vue

@@ -33,31 +33,56 @@
           <h1 class="option-title">{{ $t('options.search-title') }}</h1>
           <div class="search_content">
             <div class="search" v-for="(_, propName) in searchersValues" :key="propName">
-              <label v-if="propName == 'search-date-from'" for="search-date">{{
+              <!-- Train category select -->
-                $t(`options.search-${optionsType}-date`)
+              <div v-if="propName.toString() == 'select-categoryCode'">
-              }}</label>
+                <label for="journalCategoryCode">{{ $t(`options.${propName}`) }}</label>
 
-              <div class="search-box">
+                <div class="search-box">
-                <input
+                  <select
-                  class="search-input"
+                    class="search-input"
-                  v-model="searchersValues[propName]"
+                    name="journalCategoryCode"
-                  @keydown.enter="searchConfirm"
+                    id="journalCategoryCode"
-                  @focus="preventKeyDown = true"
+                    v-model="searchersValues[propName]"
-                  @blur="preventKeyDown = false"
+                  >
-                  :placeholder="$t(`options.${propName}`)"
+                    <option value="">...</option>
-                  :type="propName.toString().startsWith('search-date') ? 'date' : 'text'"
+                    <option v-for="categoryName in allCategories" :value="categoryName">
-                  :min="propName.toString().startsWith('search-date') ? '2022-02-01' : undefined"
+                      {{ categoryName }} - {{ getCategoryExplanation(categoryName) }}
-                  :id="`${propName}`"
+                    </option>
-                  :list="propName.toString()"
+                  </select>
-                />
+                </div>
+              </div>
 
-                <button class="btn btn--action search-exit" v-if="!propName.toString().startsWith('search-date')">
+              <!-- Other inputs -->
-                  <img
+              <div v-else>
-                    src="/images/icon-exit.svg"
+                <label v-if="propName == 'search-date-from'" for="search-date">{{
-                    alt="exit-icon"
+                  $t(`options.search-${optionsType}-date`)
-                    @click="onInputClear(propName)"
+                }}</label>
+                
+                <div class="search-box">
+                  <input
+                    class="search-input"
+                    v-model="searchersValues[propName]"
+                    @keydown.enter="searchConfirm"
+                    @focus="preventKeyDown = true"
+                    @blur="preventKeyDown = false"
+                    :placeholder="$t(`options.${propName}`)"
+                    :type="propName.toString().startsWith('search-date') ? 'date' : 'text'"
+                    :min="propName.toString().startsWith('search-date') ? '2022-02-01' : undefined"
+                    :id="`${propName}`"
+                    :list="propName.toString()"
                   />
-                </button>
+
+                  <button
+                    class="btn btn--action search-exit"
+                    v-if="!propName.toString().startsWith('search-date')"
+                  >
+                    <img
+                      src="/images/icon-exit.svg"
+                      alt="exit-icon"
+                      @click="onInputClear(propName)"
+                    />
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -117,10 +142,12 @@ import { useMainStore } from '../../store/mainStore';
 import { Journal } from './typings';
 import { Status } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
+import { allCategories } from '../../data/trainNumberRules.json';
+import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 
 export default defineComponent({
   emits: ['onSearchConfirm', 'onOptionsReset', 'onRefreshData'],
-  mixins: [keyMixin],
+  mixins: [keyMixin, trainCategoryMixin],
 
   props: {
     sorterOptionIds: {
@@ -152,6 +179,7 @@ export default defineComponent({
   data() {
     return {
       showOptions: false,
+      allCategories,
 
       driverSuggestions: [] as string[],
       dispatcherSuggestions: [] as string[],

src/components/JournalView/typings.ts

@@ -12,7 +12,8 @@ export namespace Journal {
     | 'search-dispatcher'
     | 'search-issuedFrom'
     | 'search-terminatingAt'
-    | 'search-via';
+    | 'search-via'
+    | 'select-categoryCode';
 
   export type TimetableSearchType = {
     [key in TimetableSearchKey]: string;

src/data/trainNumberRules.json

@@ -1,4 +1,34 @@
 {
+    "allCategories": [			
+      "ROE", "ROJ", "ROS", "ROM",
+      "RPE", "RPJ", "RPS", "RPM", 
+      "RME", "RMJ", "RMS", "RMM", 
+      "RAE", "RAJ", "RAS", "RAM", 
+      "MPE", "MPJ", "MPS", "MPM",
+      "MME", "MMJ", "MMS", "MMM",
+      "MOE", "MOJ", "MOS", "MOM",
+      "MHE", "MHJ", "MHS",
+      "EIE", "EIS", 
+      "ENE", "ENS", 
+      "ECE", "ECS", 
+      "PWE", "PWM", "PWJ", "PWS", 
+      "PXE", "PXM", "PXJ", "PXS", 
+      "TCE", "TCS", 
+      "TDE", "TDS", 
+      "TGE", "TGS", 
+      "TKE", "TKS", 
+      "TME", "TMS", 
+      "TNE", "TNS", 
+      "TRE", "TRS", 
+      "TSE", "TSS",
+      "THE", "THS",
+      "LPE", 
+      "LTE", "LTS",
+      "LSS",
+      "LZE", "LZS", 
+      "ZNE", "ZNS",
+      "ZUE", "ZUS"
+    ],
     "regionNumbers": {
       "Warszawa (1)": 1,
       "Lublin (2)": 2,

src/locales/pl.json

@@ -167,6 +167,7 @@
     "search-dispatchers-date": "Data służby (od / do)",
     "search-date-from": "Data (UTC+2 / CEST)",
     "search-date-to": "Data (UTC+2 / CEST)",
+    "select-categoryCode": "Kategoria pociągu",
     "sort-routeDistance": "kilometraż",
     "sort-allStopsCount": "stacje",
     "sort-beginDate": "data",

src/styles/_dropdown.scss

@@ -29,17 +29,19 @@
   top: calc(100% + 0.5em);
 
   background-color: var(--clr-bg3);
-  // box-shadow: 0 5px 10px 2px #0f0f0f;
   box-shadow: 0 0 5px 1px var(--clr-primary);
 
   width: 100%;
   max-width: 550px;
 
+  max-height: 750px;
+  overflow: auto;
+
   padding: 1em;
   z-index: 100;
 }
 
-@include responsive.smallScreen{
+@include responsive.smallScreen {
   .dropdown_wrapper {
     font-size: 1.1em;
     max-width: 100%;

src/styles/_journal-section.scss

@@ -12,7 +12,7 @@
 .list_wrapper {
   overflow-y: auto;
   height: calc(100vh - 12.5em);
-  min-height: 650px;
+  min-height: 700px;
   margin-top: 0.5em;
   position: relative;
 

src/views/JournalTimetables.vue

@@ -122,6 +122,7 @@ interface TimetablesQueryParams {
   driverName?: string;
   trainNo?: string;
   timetableId?: string;
+  categoryCode?: string;
 
   authorName?: string;
 
@@ -215,6 +216,7 @@ export default defineComponent({
       'search-issuedFrom': '',
       'search-via': '',
       'search-terminatingAt': '',
+      'select-categoryCode': '',
       'search-date-from': ''
     } as Journal.TimetableSearchType);
 
@@ -230,6 +232,7 @@ export default defineComponent({
     return {
       sorterActive,
       searchersValues,
+
       filterList,
       initFilters,
 
@@ -356,6 +359,7 @@ export default defineComponent({
       const issuedFrom = this.searchersValues['search-issuedFrom'].trim() || undefined;
       const via = this.searchersValues['search-via'].trim() || undefined;
       const terminatingAt = this.searchersValues['search-terminatingAt'].trim() || undefined;
+      const categoryCode = this.searchersValues['select-categoryCode'].trim() || undefined;
 
       let dateTo: string | undefined = undefined;
 
@@ -365,8 +369,6 @@ export default defineComponent({
 
         dateTo = d.toISOString().split('T')[0];
       }
-      // const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) : undefined;
-      // const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
 
       const queryParams: TimetablesQueryParams = {};
 
@@ -433,6 +435,7 @@ export default defineComponent({
       queryParams['issuedFrom'] = issuedFrom;
       queryParams['terminatingAt'] = terminatingAt;
       queryParams['via'] = via;
+      queryParams['categoryCode'] = categoryCode;
 
       queryParams['issuedFrom'] = issuedFrom;
       queryParams['sortBy'] =