Filtry pociągów

src/components/TrainsView/TrainOptions.vue

@@ -26,11 +26,37 @@
         </div>
       </div>
     </div>
+
+    <div class="filters">
+      <span
+        :class="{ active: filter.isActive }"
+        class="filter"
+        v-for="filter in filterList"
+        :key="filter.id"
+        tabindex="0"
+        @contextmenu="
+          (e) => {
+            e.preventDefault();
+            return false;
+          }
+        "
+        @click.left="toggleFilter(filter)"
+        @keydown.enter="toggleFilter(filter)"
+        @click.right="setFilterOnly(filter)"
+        @keydown.space="setFilterOnly(filter)"
+      >
+        {{ $t(`trains.filter-${filter.id}`) }}
+      </span>
+
+      <span class="filter reset-btn" @click="resetFilters" tabindex="0">
+        {{ $t('trains.filter-reset') }}
+      </span>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject } from 'vue';
+import { computed, defineComponent, inject, TrainFilter } from 'vue';
 import { useI18n } from 'vue-i18n';
 import SelectBox from '../Global/SelectBox.vue';
 
@@ -50,10 +76,6 @@ export default defineComponent({
         id: 'distance',
         value: 'kilometraż',
       },
-      {
-        id: 'comments',
-        value: 'komentarze',
-      },
       {
         id: 'progress',
         value: 'przebyta trasa',
@@ -76,6 +98,8 @@ export default defineComponent({
       },
     ];
 
+    let filterList = inject('filterList') as TrainFilter[];
+
     const translatedSorterOptions = computed(() =>
       sorterOptions.map(({ id }) => ({
         id,
@@ -88,6 +112,7 @@ export default defineComponent({
       searchedTrain: inject('searchedTrain') as string,
       searchedDriver: inject('searchedDriver') as string,
       sorterActive: inject('sorterActive') as { id: string | number; dir: number },
+      filterList,
     };
   },
 
@@ -96,6 +121,18 @@ export default defineComponent({
       this.sorterActive.id = item.id;
       this.sorterActive.dir = -1;
     },
+
+    toggleFilter(filter: TrainFilter) {
+      filter.isActive = !filter.isActive;
+    },
+
+    setFilterOnly(filter: TrainFilter) {
+      this.filterList.forEach((f) => (f.isActive = f.id == filter.id));
+    },
+
+    resetFilters() {
+      this.filterList.forEach((f) => (f.isActive = true));
+    },
   },
 });
 </script>
@@ -108,6 +145,7 @@ export default defineComponent({
     width: 100%;
   }
 }
+
 .options {
   &_wrapper {
     display: flex;
@@ -178,4 +216,31 @@ export default defineComponent({
     width: 1em;
   }
 }
+
+.filters {
+  display: flex;
+  flex-wrap: wrap;
+
+  @include smallScreen() {
+    justify-content: center;
+  }
+}
+
+.filter {
+  background: #333;
+  padding: 0.2em 0.25em;
+  margin: 0.25em 0.25em 0 0;
+  font-weight: bold;
+
+  cursor: pointer;
+  color: gray;
+
+  &.active {
+    color: gold;
+  }
+
+  &.reset-btn {
+    color: salmon;
+  }
+}
 </style>