Wskaźnik aktywnych filtrów pociągów online

src/components/TrainsView/TrainOptions.vue

@@ -2,9 +2,10 @@
   <div class="filters-options" @keydown.esc="showOptions = false">
     <div class="bg" v-if="showOptions" @click="showOptions = false"></div>
 
-    <button class="btn--filled btn--image" @click="toggleShowOptions" ref="button">
+    <button class="filter-button btn--filled btn--image" @click="toggleShowOptions" ref="button">
       <img :src="getIcon('filter2')" alt="Open filters" />
       {{ $t('options.filters') }} [F]
+      <span class="active-indicator" v-if="currentOptionsActive"></span>
     </button>
 
     <transition name="options-anim">
@@ -56,7 +57,7 @@
           <h1 class="option-title" v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
           <div class="options_filters">
             <div class="filter-option" v-for="filter in trainFilterList">
-              <button class="btn--option" :data-disabled="!filter.isActive" @click="onFilterChange(filter)">
+              <button class="btn--option" :data-inactive="!filter.isActive" @click="onFilterChange(filter)">
                 {{ $t(`options.filter-${filter.id}`) }}
               </button>
             </div>
@@ -89,6 +90,11 @@ export default defineComponent({
       type: Array as PropType<Array<string>>,
       required: true,
     },
+
+    currentOptionsActive: {
+      type: Boolean,
+      default: false
+    }
   },
 
   data() {

src/styles/global.scss

@@ -208,11 +208,15 @@ button {
 
   transition: all 100ms ease;
 
-  &[data-disabled=true] {
+  &[data-disabled='true'] {
     user-select: none;
     pointer-events: none;
     opacity: 0.85;
   }
+
+  &[data-inactive='true'] {
+    opacity: 0.55;
+  }
 }
 
 button.btn--filled {

src/views/TrainsView.vue

@@ -1,7 +1,10 @@
 <template>
   <section class="trains-view">
     <div class="trains_wrapper">
-      <TrainOptions :sorter-option-ids="['distance', 'progress', 'delay', 'mass', 'speed', 'length']" />
+      <TrainOptions
+        :sorter-option-ids="['distance', 'progress', 'delay', 'mass', 'speed', 'length']"
+        :current-options-active="currentOptionsActive"
+      />
 
       <TrainTable :trains="computedTrains" />
     </div>
@@ -9,7 +12,7 @@
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, defineComponent, provide, reactive, ref } from 'vue';
+import { computed, ComputedRef, defineComponent, provide, reactive, ref, watch } from 'vue';
 import TrainOptions from '../components/TrainsView/TrainOptions.vue';
 import TrainStats from '../components/TrainsView/TrainStats.vue';
 import TrainTable from '../components/TrainsView/TrainTable.vue';
@@ -52,10 +55,13 @@ export default defineComponent({
 
   setup() {
     const store = useStore();
+    const initTrainFilters = [...trainFilters.map((f) => ({ ...f }))];
 
-    const sorterActive = ref({ id: 'distance', dir: -1 });
+    const sorterActive = reactive({ id: 'distance', dir: -1 });
     const filterList = reactive([...trainFilters]) as TrainFilter[];
 
+    const currentOptionsActive = ref(false);
+
     const searchedDriver = ref('');
     const searchedTrain = ref('');
 
@@ -65,13 +71,13 @@ export default defineComponent({
     provide('filterList', filterList);
 
     const computedTrains: ComputedRef<Train[]> = computed(() => {
-      return filteredTrainList(
-        store.trainList,
-        searchedTrain.value,
-        searchedDriver.value,
-        sorterActive.value,
-        filterList
-      );
+      return filteredTrainList(store.trainList, searchedTrain.value, searchedDriver.value, sorterActive, filterList);
+    });
+
+    watch([searchedTrain, searchedDriver, sorterActive, filterList], ([sT, sD, sA, fL]) => {
+      const areFiltersActive = fL.some((f, i) => f.isActive !== initTrainFilters[i].isActive);
+
+      currentOptionsActive.value = sT.length > 0 || sD.length > 0 || sA.id != 'distance' || areFiltersActive;
     });
 
     return {
@@ -80,6 +86,7 @@ export default defineComponent({
       searchedDriver,
       sorterActive,
       store,
+      currentOptionsActive,
     };
   },