chore: switched drivers filter from text to select input (TrainsView); updated inputs clear buttons

index.html

@@ -22,11 +22,6 @@
 
     <link rel="icon" href="favicon.ico" />
 
-    <link rel="stylesheet" href="fa/css/fontawesome.css" />
-    <link rel="stylesheet" href="fa/css/brands.css" />
-    <link rel="stylesheet" href="fa/css/regular.css" />
-    <link rel="stylesheet" href="fa/css/solid.css" />
-
     <!-- Static OpenGraph meta -->
     <meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
     <meta property="og:url" content="https://stacjownik-td2.web.app/" />

src/components/JournalView/JournalOptions.vue

@@ -51,7 +51,7 @@
                   :list="propName.toString()"
                 />
 
-                <button class="search-exit" v-if="!propName.toString().startsWith('search-date')">
+                <button class="btn btn--action search-exit" v-if="!propName.toString().startsWith('search-date')">
                   <img
                     src="/images/icon-exit.svg"
                     alt="exit-icon"

src/components/TrainsView/TrainOptions.vue

@@ -24,31 +24,26 @@
                 @blur="preventKeyDown = false"
                 :placeholder="$t(`options.search-train`)"
               />
-              <button class="search-exit">
-                <img
-                  src="/images/icon-exit.svg"
-                  alt="Trains search clear icon"
-                  @click="onInputClear('train')"
-                />
+              <button class="btn btn--action search-exit" @click="onInputClear('train')">
+                <img src="/images/icon-exit.svg" alt="Trains search clear icon" />
               </button>
             </div>
 
             <div class="search-box">
-              <input
-                v-model="searchedDriver"
+              <select
                 class="search-input"
-                id="driver-search"
-                name="driver-search"
-                @focus="preventKeyDown = true"
-                @blur="preventKeyDown = false"
-                :placeholder="$t(`options.search-driver`)"
-              />
-              <button class="search-exit">
-                <img
-                  src="/images/icon-exit.svg"
-                  alt="Driver search clear icon"
-                  @click="onInputClear('driver')"
-                />
+                name="active-trains"
+                id="active-trains"
+                v-model="searchedDriver"
+              >
+                <option value="">{{ $t('options.search-driver') }}</option>
+                <option v-for="driverName in activeDriverNames" :value="driverName">
+                  {{ driverName }}
+                </option>
+              </select>
+
+              <button class="btn btn--action search-exit" @click="onInputClear('driver')">
+                <img src="/images/icon-exit.svg" alt="Trains search clear icon" />
               </button>
             </div>
           </div>
@@ -101,6 +96,7 @@
 import { defineComponent, inject, PropType } from 'vue';
 import keyMixin from '../../mixins/keyMixin';
 import { TrainFilter, TrainFilterSection } from './typings';
+import { useMainStore } from '../../store/mainStore';
 
 export default defineComponent({
   mixins: [keyMixin],
@@ -120,6 +116,7 @@ export default defineComponent({
   data() {
     return {
       showOptions: false,
+      store: useMainStore(),
       lastSelectedFilter: null as TrainFilter | null,
       TrainFilterSection
     };
@@ -141,6 +138,16 @@ export default defineComponent({
         id,
         value: this.$t(`options.sort-${id}`)
       }));
+    },
+
+    activeDriverNames() {
+      const driverNameSet = new Set<string>();
+
+      this.store.trainList.forEach((train) => {
+        driverNameSet.add(train.driverName);
+      });
+
+      return [...driverNameSet].sort((a, b) => a.localeCompare(b));
     }
   },
 

src/locales/en.json

@@ -157,9 +157,8 @@
     "sort-title": "SORT BY:",
     "filter-title": "FILTER BY:",
     "search-title": "SEARCH:",
-    "search-train-no": "Train no. / #",
-    "search-train": "Train no.",
-    "search-driver": "Driver name",
+    "search-train": "Train no. / #",
+    "search-driver": "Choose a driver...",
     "search-dispatcher": "Dispatcher name",
     "search-station": "Scenery name / #",
     "search-author": "Timetable author name",

src/locales/pl.json

@@ -154,9 +154,8 @@
     "sort-title": "SORTUJ WG:",
     "filter-title": "FILTRUJ WG:",
     "search-title": "SZUKAJ:",
-    "search-train-no": "Nr pociągu",
     "search-train": "Nr pociągu / #",
-    "search-driver": "Nick maszynisty",
+    "search-driver": "Wybierz maszynistę...",
     "search-dispatcher": "Nick dyżurnego",
     "search-station": "Nazwa scenerii / #",
     "search-author": "Nick autora rozkładu jazdy",

src/styles/_dropdown-filters.scss

@@ -72,15 +72,6 @@ h1.option-title {
   .search {
     margin: 0.5em auto;
   }
-
-  .search-box {
-    .search-exit {
-      position: absolute;
-      transform: translateY(-50%);
-      top: 50%;
-      right: 0;
-    }
-  }
 }
 
 .options_actions {

src/styles/_search-box.scss

@@ -11,8 +11,9 @@
     position: relative;
 
     display: flex;
+    align-items: center;
+    gap: 0.25em;
 
-    border-radius: 0.5em;
     min-width: 200px;
     margin-right: 0.25em;
   }
@@ -20,6 +21,8 @@
   &-input {
     border: none;
     background-color: #424242;
+    color: white;
+    border-radius: 0.5em;
 
     padding: 0.35em 0.5em;
     width: 100%;
@@ -27,6 +30,7 @@
 
   &-exit {
     background-color: #424242;
+    border-radius: 0.5em;
 
     img {
       vertical-align: middle;
@@ -39,7 +43,7 @@
     max-width: 300px;
   }
 
-  @include responsive.smallScreen{
+  @include responsive.smallScreen {
     &-box,
     &-button {
       margin: 0.5em 0 0 0;
@@ -50,3 +54,15 @@
     }
   }
 }
+
+.search-box > i {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  padding-right: 0.5em;
+}
+
+select.search-input {
+
+}