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">
-            <input
+            <h3 class="section-header">{{ $t('filters.authors-search') }}</h3>
-              type="text"
+
-              :placeholder="$t('filters.authors-search')"
+            <form action="javascript:void(0);" @submit="handleAuthorsInput">
-              name="authors"
+              <input
-              v-model="authorsInputValue"
+                type="text"
-              @input="handleAuthorsInput"
+                id="author"
-              @focus="preventKeyDown = true"
+                list="authors"
-              @blur="preventKeyDown = false"
+                name="authors"
-            />
+                :placeholder="$t('filters.authors-placeholder')"
+                v-model="authorsInputValue"
+                @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,136 +322,139 @@ 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;
+  background-color: #111;
-    padding: 0.5em;
+  padding: 0.5em;
+}
+
+.card_controls {
+  display: flex;
+  gap: 0.5em;
+
+  input {
+    border-radius: 0.5em 0.5em 0 0;
+    height: 100%;
+  }
+}
+
+.card_content {
+  padding: 1em 0.5em;
+
+  display: flex;
+  flex-direction: column;
+
+  gap: 1em;
+  overflow: auto;
+}
+
+.card_title {
+  font-size: 2em;
+  font-weight: 700;
+  color: $accentCol;
+
+  text-align: center;
+}
+
+.card_regions {
+  display: flex;
+  justify-content: center;
+
+  label > input {
+    display: none;
   }
 
-  &_controls {
+  label > span {
+    padding: 0.25em 0.5em;
+    margin: 0 0.25em;
+
+    cursor: pointer;
+
+    background-color: gray;
+
+    &.checked {
+      background-color: seagreen;
+    }
+  }
+}
+
+.card_timestamp {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  .clock {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-size: 1.2em;
+    text-align: center;
+
+    span {
+      min-width: 120px;
+      font-weight: bold;
+      color: $accentCol;
+    }
+
+    button {
+      padding: 0.2em 0.6em;
+    }
+  }
+}
+
+.card_authors-search {
+  margin: 1em 0;
+
+  form {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 0.5em;
+    width: 100%;
+    margin-top: 1em;
+  }
+
+  input {
+    width: 70%;
+    max-width: 400px;
+    padding: 0.5em;
+    outline: 1px solid white;
+  }
+}
+
+.card_actions {
+  width: 100%;
+  padding: 0.5em;
+
+  .filter-option {
+    max-width: 50%;
+    margin: 0 auto;
+  }
+
+  .action-buttons {
     display: flex;
     gap: 0.5em;
-
-    input {
-      border-radius: 0.5em 0.5em 0 0;
-      height: 100%;
-    }
-  }
-
-  &_content {
-    padding: 1em 0.5em;
-
-    display: flex;
-    flex-direction: column;
-
-    gap: 1em;
-    overflow: auto;
-  }
-
-  &_title {
-    font-size: 2em;
-    font-weight: 700;
-    color: $accentCol;
-
-    text-align: center;
-  }
-
-  &_regions {
-    display: flex;
-    justify-content: center;
-
-    label > input {
-      display: none;
-    }
-
-    label > span {
-      padding: 0.25em 0.5em;
-      margin: 0 0.25em;
-
-      cursor: pointer;
-
-      background-color: gray;
-
-      &.checked {
-        background-color: seagreen;
-      }
-    }
-  }
-
-  &_timestamp {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    .clock {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      font-size: 1.2em;
-      margin-top: 0.5em;
-
-      span {
-        min-width: 120px;
-        font-weight: bold;
-        color: $accentCol;
-      }
-
-      button {
-        padding: 0.2em 0.6em;
-      }
-    }
-  }
-
-  &_modes {
-    display: flex;
-    justify-content: center;
-
-    .option {
-      margin: 0 1em;
-    }
-  }
-
-  &_authors-search {
-    display: inline-block;
-    margin: 0 auto;
-    width: 60%;
-    min-width: 240px;
-
-    input {
-      width: 100%;
-      padding: 0.5em;
-      border: 1px solid white;
-    }
-  }
-
-  &_actions {
     width: 100%;
-    padding: 0.5em;
 
-    .filter-option {
+    margin-top: 0.5em;
-      max-width: 50%;
+
+    button {
+      width: 50%;
       margin: 0 auto;
-    }
+      padding: 0.5em;
 
-    .action-buttons {
+      &[data-selected='true'] {
-      display: flex;
+        background-color: forestgreen;
-      gap: 0.5em;
-      width: 100%;
-
-      margin-top: 0.5em;
-
-      button {
-        width: 50%;
-        margin: 0 auto;
-        padding: 0.5em;
-
-        &[data-selected='true'] {
-          background-color: forestgreen;
-        }
       }
     }
   }

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.",