Poprawki w stylach; dodano ikonę pociągu offline

src/components/TrainsView/TrainInfoExtended.vue

@@ -31,6 +31,8 @@
                 <span>{{ train.driverName }}</span>
               </span>
 
+              <img class="image-offline" v-if="!train.currentStationHash" :src="icons.offline" alt="offline" :title="$t('trains.offline')" />
+
               <span class="hide-info" @click="toggleInfo">
                 <img :src="icons.ascArrow" :class="{ hidden: !isInfoShown }" />
                 <span>{{ isInfoShown ? 'Ukryj' : 'Pokaż' }} informacje</span>
@@ -73,10 +75,15 @@
       </div>
 
       <div class="driver_position">
-        <span v-if="train.currentStationName">
+        <span v-if="train.currentStationHash">
           {{ $t('trains.current-scenery') }} <b class="text--primary">{{ train['currentStationName'] }}&nbsp;</b>
         </span>
 
+        <span v-else>
+          {{ $t('trains.current-scenery') }}
+          <span><b class="text--primary">{{ train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, '') }}</b> (offline)&nbsp;</span>
+        </span>
+
         <span v-if="train.signal">
           {{ $t('trains.current-signal') }} <b class="text--primary">{{ train['signal'] }}&nbsp;</b>
         </span>
@@ -133,6 +140,7 @@ export default defineComponent({
     icons: {
       warning: require('@/assets/icon-warning.svg'),
       ascArrow: require('@/assets/icon-arrow-asc.svg'),
+      offline: require('@/assets/icon-offline.svg'),
     },
 
     isInfoShown: true,
@@ -147,11 +155,12 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.image-warning {
-  width: 1.2em;
-  vertical-align: text-bottom;
+.image-warning,
+.image-offline {
+  width: 1em;
+  height: 1em;
 
-  margin-left: 0.2em;
+  margin-left: 0.5em;
 }
 
 .extended {

src/components/TrainsView/TrainInfoSimple.vue

@@ -12,6 +12,10 @@
           <strong v-if="train.timetableData">{{ train.timetableData.category }}&nbsp;</strong>
           <strong>{{ train.trainNo }}</strong>
           <span>&nbsp;| {{ train.driverName }}</span>
+
+          <img class="image-offline" v-if="!train.currentStationHash" :src="icons.offline" alt="offline" 
+            :title="$t('trains.offline')"
+          >
         </div>
 
         <div class="timetable_route">
@@ -43,10 +47,14 @@
         </div>
 
         <div class="driver_position text--grayed">
-          <span v-if="train.currentStationName">
+          <span v-if="train.currentStationHash">
             {{ $t('trains.current-scenery') }} <span>{{ train['currentStationName'] }}&nbsp;</span>
           </span>
 
+          <span v-else>
+            {{ $t('trains.current-scenery') }} <span>{{ train['currentStationName'].replace(/.[a-zA-Z0-9]+.sc/, "") }} (offline)&nbsp;</span>
+          </span>
+
           <span v-if="train.signal">
             {{ $t('trains.current-signal') }} <span>{{ train['signal'] }}&nbsp;</span>
           </span>
@@ -99,6 +107,7 @@ export default defineComponent({
   data: () => ({
     icons: {
       warning: require('@/assets/icon-warning.svg'),
+      offline: require("@/assets/icon-offline.svg")
     },
   }),
 });
@@ -107,7 +116,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 
-.image-warning {
+.image-warning, .image-offline {
   width: 1em;
   height: 1em;
 
@@ -124,6 +133,8 @@ export default defineComponent({
   }
 }
 
+
+
 .simple {
   display: grid;
   grid-template-columns: 2fr 1fr;

src/components/TrainsView/TrainOptions.vue

@@ -2,27 +2,23 @@
   <div class="train-options">
     <div class="options_wrapper">
       <div class="options_content">
-        <div class="content_select">
-          <select-box
-            :itemList="translatedSorterOptions"
-            :defaultItemIndex="0"
-            @selected="changeSorter"
-            :prefix="$t('trains.sorter-prefix')"
-          />
+        <select-box
+          :itemList="translatedSorterOptions"
+          :defaultItemIndex="0"
+          @selected="changeSorter"
+          :prefix="$t('trains.sorter-prefix')"
+        />
+
+        <div class="search-box">
+          <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
+
+          <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedTrain = '')" />
         </div>
 
-        <div class="content_search">
-          <div class="search-box">
-            <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
+        <div class="search-box">
+          <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
 
-            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedTrain = '')" />
-          </div>
-
-          <div class="search-box">
-            <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
-
-            <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedDriver = '')" />
-          </div>
+          <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedDriver = '')" />
         </div>
       </div>
     </div>
@@ -152,37 +148,30 @@ export default defineComponent({
     flex-wrap: wrap;
 
     @include smallScreen() {
+      padding: 0 1em;
+
       justify-content: center;
     }
   }
 
   &_content {
     display: flex;
-    flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
 
-    .content_search,
-    .content_select {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
+    & > * {
+        margin-right: 0.25em;
+        margin-top: 0.25em;
     }
 
     @include smallScreen() {
-      padding: 0 1em;
-
-      .content_select {
-        margin: 0 auto;
-      }
-
-      .content_search {
-        justify-content: center;
-      }
+      margin: 0 auto;
+      justify-content: center;
     }
   }
 }
 
-.content_search .search {
+.search {
   &-box {
     position: relative;
 
@@ -190,11 +179,9 @@ export default defineComponent({
     border-radius: 0.5em;
     min-width: 200px;
 
-    margin: 0.5em 0.5em 0.5em 0;
 
     @include smallScreen() {
-      width: 100%;
-      margin: 0.5em auto;
+      flex-grow: 2;
     }
   }
 
@@ -221,6 +208,8 @@ export default defineComponent({
   display: flex;
   flex-wrap: wrap;
 
+  margin-top: 0.5em;
+
   @include smallScreen() {
     justify-content: center;
   }
@@ -236,7 +225,7 @@ export default defineComponent({
   color: gray;
 
   &.active {
-    color: gold;
+    color: var(--clr-primary);
   }
 
   &.reset-btn {

src/components/TrainsView/TrainOptionsCard.vue

@@ -0,0 +1,159 @@
+<template>
+  <section class="filter-card" v-click-outside="closeCard">
+    <div class="card_btn">
+      <action-button @click="toggleCard">
+        <img class="button_icon" :src="filterIcon" alt="icon-filter" />
+        <p>{{ $t('options.filters') }}</p>
+      </action-button>
+    </div>
+
+    <transition name="card-anim">
+      <div class="card_content card" v-if="isVisible">
+        <div class="card_exit" @click="closeCard"></div>
+
+        <div class="options_wrapper">
+          <div class="options_content">
+            <div class="content_select">
+              <select-box
+                :itemList="translatedSorterOptions"
+                :defaultItemIndex="0"
+                @selected="changeSorter"
+                :prefix="$t('trains.sorter-prefix')"
+              />
+            </div>
+
+            <div class="content_search">
+              <div class="search-box">
+                <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
+
+                <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedTrain = '')" />
+              </div>
+
+              <div class="search-box">
+                <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
+
+                <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedDriver = '')" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <section class="card_actions flex">
+          <action-button class="outlined">
+            {{ $t('filters.reset') }}
+          </action-button>
+          <action-button class="outlined" @click="closeCard">{{ $t('filters.close') }}</action-button>
+        </section>
+      </div>
+    </transition>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent, inject } from '@vue/runtime-core';
+
+import inputData from '@/data/options.json';
+
+import ActionButton from '@/components/Global/ActionButton.vue';
+import { sorterOptions } from '@/data/trainOptions';
+import { TrainFilter, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import SelectBox from '../Global/SelectBox.vue';
+
+export default defineComponent({
+  components: { ActionButton, SelectBox },
+  emits: ['changeFilterValue', 'invertFilters', 'resetFilters'],
+
+  data: () => ({
+    filterIcon: require('@/assets/icon-filter2.svg'),
+    exitIcon: require('@/assets/icon-exit.svg'),
+
+    inputs: { ...inputData },
+  }),
+
+  setup() {
+    const isVisible = inject('isTrainOptionsCardVisible');
+
+    const { t } = useI18n();
+
+    let filterList = inject('filterList') as TrainFilter[];
+
+    const translatedSorterOptions = computed(() =>
+      sorterOptions.map(({ id }) => ({
+        id,
+        value: t(`trains.option-${id}`),
+      }))
+    );
+
+    return {
+      translatedSorterOptions,
+      searchedTrain: inject('searchedTrain') as string,
+      searchedDriver: inject('searchedDriver') as string,
+      sorterActive: inject('sorterActive') as { id: string | number; dir: number },
+      filterList,
+      isVisible,
+    };
+  },
+
+  methods: {
+    closeCard() {
+      this.isVisible = false;
+    },
+
+    toggleCard() {
+      this.isVisible = !this.isVisible;
+    },
+
+    changeSorter(item: { id: string | number; value: string }) {
+      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>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive';
+@import '../../styles/card';
+
+.card-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all $animDuration $animType;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    transform: translate(-50%, -50%) scale(0.85);
+    opacity: 0;
+  }
+}
+
+.card {
+  section {
+    margin: 0.5em 0;
+  }
+
+  &_title {
+    font-size: 2em;
+    font-weight: 700;
+    color: $accentCol;
+
+    margin: 0.5em 0;
+
+    text-align: center;
+  }
+}
+</style>

src/components/TrainsView/TrainTable.vue

@@ -196,8 +196,6 @@ img.train-image {
 
 .train {
   &-list {
-    max-height: 100vh;
-    min-height: 550px;
     overflow: auto;
 
     padding-right: 0.5em;