dodano wybór z listy autorów w filtrach

src/components/StationsView/StationFilterCard.vue

@@ -60,8 +60,9 @@
             </div>
           </section>
 
-          <section class="card_timestamp" style="text-align: center">
+          <section class="card_timestamp">
-            <div>{{ $t('filters.minimum-hours-title') }}</div>
+            <h3 class="section-header">{{ $t('filters.minimum-hours-title') }}</h3>
+
             <span class="clock">
               <button class="btn--action" @click="subHour">-</button>
               <span>{{
@@ -75,16 +76,27 @@
             </span>
           </section>
 
+          <datalist id="authors">
+            <option v-for="(author, i) in authors" :key="i" :value="author"></option>
+          </datalist>
+
           <section class="card_authors-search">
+            <h3 class="section-header">{{ $t('filters.authors-search') }}</h3>
+
+            <form action="javascript:void(0);" @submit="handleAuthorsInput">
               <input
                 type="text"
-              :placeholder="$t('filters.authors-search')"
+                id="author"
+                list="authors"
                 name="authors"
+                :placeholder="$t('filters.authors-placeholder')"
                 v-model="authorsInputValue"
-              @input="handleAuthorsInput"
                 @focus="preventKeyDown = true"
                 @blur="preventKeyDown = false"
               />
+
+              <button class="btn--action">{{ $t('filters.authors-button-title') }}</button>
+            </form>
           </section>
 
           <section class="card_sliders">
@@ -196,6 +208,19 @@ export default defineComponent({
 
     currentOptionsActive() {
       return true;
+    },
+
+    authors() {
+      return this.store.stationList
+        .reduce((acc, station) => {
+          station.generalInfo?.authors?.forEach((author) => {
+            if (author.trim() != '' && !acc.includes(author.toLocaleLowerCase()))
+              acc.push(author.toLocaleLowerCase());
+          });
+
+          return acc;
+        }, [] as string[])
+        .sort((a, b) => a.localeCompare(b));
     }
   },
 
@@ -230,12 +255,12 @@ export default defineComponent({
       if (this.saveOptions) StorageManager.setStringValue(target.name, target.value);
     },
 
-    handleAuthorsInput(e: Event) {
+    handleAuthorsInput() {
-      clearTimeout(this.delayInputTimer);
+      console.log(this.authorsInputValue);
 
-      this.delayInputTimer = window.setTimeout(() => {
+      this.filterStore.changeFilterValue('authors', this.authorsInputValue);
-        this.handleInput(e);
+
-      }, 400);
+      if (this.saveOptions) StorageManager.setStringValue('authors', this.authorsInputValue);
     },
 
     changeNumericFilterValue(name: string, value: number, saveToStorage = false) {
@@ -297,16 +322,22 @@ export default defineComponent({
 @import '../../styles/card.scss';
 @import '../../styles/animations.scss';
 
+h3.section-header {
+  text-align: center;
+  margin: 0.5em 0;
+}
+
 .card {
   display: grid;
   grid-template-rows: 1fr auto;
+}
 
-  &_info {
+.card_info {
   background-color: #111;
   padding: 0.5em;
-  }
+}
 
-  &_controls {
+.card_controls {
   display: flex;
   gap: 0.5em;
 
@@ -314,9 +345,9 @@ export default defineComponent({
     border-radius: 0.5em 0.5em 0 0;
     height: 100%;
   }
-  }
+}
 
-  &_content {
+.card_content {
   padding: 1em 0.5em;
 
   display: flex;
@@ -324,17 +355,17 @@ export default defineComponent({
 
   gap: 1em;
   overflow: auto;
-  }
+}
 
-  &_title {
+.card_title {
   font-size: 2em;
   font-weight: 700;
   color: $accentCol;
 
   text-align: center;
-  }
+}
 
-  &_regions {
+.card_regions {
   display: flex;
   justify-content: center;
 
@@ -354,9 +385,9 @@ export default defineComponent({
       background-color: seagreen;
     }
   }
-  }
+}
 
-  &_timestamp {
+.card_timestamp {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -367,7 +398,7 @@ export default defineComponent({
     justify-content: center;
 
     font-size: 1.2em;
-      margin-top: 0.5em;
+    text-align: center;
 
     span {
       min-width: 120px;
@@ -379,31 +410,29 @@ export default defineComponent({
       padding: 0.2em 0.6em;
     }
   }
-  }
+}
 
-  &_modes {
+.card_authors-search {
+  margin: 1em 0;
+
+  form {
     display: flex;
     justify-content: center;
-
+    flex-wrap: wrap;
-    .option {
+    gap: 0.5em;
-      margin: 0 1em;
+    width: 100%;
+    margin-top: 1em;
   }
-  }
-
-  &_authors-search {
-    display: inline-block;
-    margin: 0 auto;
-    width: 60%;
-    min-width: 240px;
 
   input {
-      width: 100%;
+    width: 70%;
+    max-width: 400px;
     padding: 0.5em;
-      border: 1px solid white;
+    outline: 1px solid white;
-    }
   }
+}
 
-  &_actions {
+.card_actions {
   width: 100%;
   padding: 0.5em;
 
@@ -429,7 +458,6 @@ export default defineComponent({
       }
     }
   }
-  }
 }
 
 .option-section h3 {

src/locales/en.json

@@ -227,7 +227,10 @@
       "routes-2t-cat": "MIN. CATENARY DOUBLE TRACK ROUTES",
       "routes-2t-other": "MIN. OTHER DOUBLE TRACK ROUTES"
     },
-    "authors-search": "Search by author (other filters apply)",
+    "authors-search": "SEARCH BY AUTHOR NAME (other filters apply):",
+    "authors-placeholder": "Enter the author nickname...",
+    "authors-button-title": "Search",
+
     "minimum-hours-title": "SHOW ONLY SCENERIES UNTIL:",
     "now": "NOW",
     "hour": "h",

src/locales/pl.json

@@ -218,7 +218,9 @@
       "routes-2t-other": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
     },
 
-    "authors-search": "Szukaj autora (uwzględnia inne filtry)",
+    "authors-search": "SZUKAJ AUTORA (uwzględnia inne filtry):",
+    "authors-placeholder": "Wpisz nick autora...",
+    "authors-button-title": "Szukaj",
     "minimum-hours-title": "POKAŻ TYLKO SCENERIE DOSTĘPNE MINIMUM DO:",
     "now": "TERAZ",
     "hour": " godz.",