From 8e196c82791a4098c35b5d2270408df3dfbc741d Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 14 Apr 2025 19:24:28 +0200
Subject: [PATCH] chore: switched drivers filter from text to select input
 (TrainsView); updated inputs clear buttons

---
 index.html                                    |  5 --
 src/components/JournalView/JournalOptions.vue |  2 +-
 src/components/TrainsView/TrainOptions.vue    | 47 +++++++++++--------
 src/locales/en.json                           |  5 +-
 src/locales/pl.json                           |  3 +-
 src/styles/_dropdown-filters.scss             |  9 ----
 src/styles/_search-box.scss                   | 20 +++++++-
 7 files changed, 49 insertions(+), 42 deletions(-)

diff --git a/index.html b/index.html
index 5f383af..fa01a2b 100644
--- a/index.html
+++ b/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/" />
diff --git a/src/components/JournalView/JournalOptions.vue b/src/components/JournalView/JournalOptions.vue
index cdb434b..87df1cd 100644
--- a/src/components/JournalView/JournalOptions.vue
+++ b/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"
diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index b7f43e0..9474e1b 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/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));
     }
   },
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 40b387f..6ee0c7e 100644
--- a/src/locales/en.json
+++ 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",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index e413baa..0168d5d 100644
--- a/src/locales/pl.json
+++ b/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",
diff --git a/src/styles/_dropdown-filters.scss b/src/styles/_dropdown-filters.scss
index 355b97a..8234875 100644
--- a/src/styles/_dropdown-filters.scss
+++ b/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 {
diff --git a/src/styles/_search-box.scss b/src/styles/_search-box.scss
index 7d21c7c..12991f0 100644
--- a/src/styles/_search-box.scss
+++ b/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 {
+
+}