Poprawki w stylach; dodano ikonę pociągu offline

2026-05-03 05:18:11 +00:00 · 2022-04-14 14:02:49 +02:00
parent 274dfadc11
commit ebede5349c
11 changed files with 287 additions and 87 deletions
@@ -0,0 +1,4 @@
+<svg width="144" height="144" viewBox="0 0 144 144" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M114.48 28.8L28.8002 114.48" stroke="white" stroke-width="14.4"/>
+<circle cx="72" cy="72" r="64.8" stroke="white" stroke-width="14.4"/>
+</svg>
@@ -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 {
@@ -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;
@@ -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 {
@@ -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>
@@ -196,8 +196,6 @@ img.train-image {

 .train {
  &-list {
-    max-height: 100vh;
-    min-height: 550px;
    overflow: auto;

    padding-right: 0.5em;
@@ -0,0 +1,60 @@
+import { TrainFilterType } from "@/scripts/enums/TrainFilterType";
+import { TrainFilter } from "vue";
+
+export const trainFilters: TrainFilter[] = [
+  {
+    id: TrainFilterType.twr,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.skr,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.passenger,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.freight,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.other,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.comments,
+    isActive: true,
+  },
+  {
+    id: TrainFilterType.noTimetable,
+    isActive: true,
+  },
+];
+
+export const sorterOptions = [
+  {
+    id: 'distance',
+    value: 'kilometraż',
+  },
+  {
+    id: 'progress',
+    value: 'przebyta trasa',
+  },
+  {
+    id: 'delay',
+    value: 'opóźnienie',
+  },
+  {
+    id: 'mass',
+    value: 'masa',
+  },
+  {
+    id: 'speed',
+    value: 'prędkość',
+  },
+  {
+    id: 'length',
+    value: 'długość',
+  }
+];
@@ -123,6 +123,7 @@
  "trains": {
    "no-trains": "No trains to show here!",
    "loading": "Loading train data...",
+    "offline": "Offline ride",

    "stats": "TRAFFIC STATISTICS",
    "stats-speed": "TRAINS SPEED (MIN, AVG, MAX) [km/h]",
@@ -124,6 +124,7 @@
  "trains": {
    "no-trains": "Brak pociągów do wyświetlenia!",
    "loading": "Pobieranie danych o pociągach...",
+    "offline": "Przejazd offline",

    "stats": "STATYSTYKI RUCHU",
    "stats-speed": "PRĘDKOŚCI POCIĄGÓW (MIN, ŚR, MAX) [km/h]",
@@ -14,6 +14,8 @@
  overflow: auto;
  background: $primaryCol;

+  outline: 2px solid white;
+
  box-shadow: 0 0 15px 5px #292929;

  width: 650px;
@@ -4,7 +4,7 @@
      <div class="options-bar">
        <!-- <TrainStats :trains="trainList" :trainStatsOpen="trainStatsOpen" /> -->

-        <TrainOptions />
+        <train-options />
      </div>

      <TrainTable :trains="computedTrains" />
@@ -15,16 +15,15 @@
 <script lang="ts">
 import { computed, ComputedRef, defineComponent, provide, reactive, ref, TrainFilter } from 'vue';
 import { filteredTrainList } from '@/scripts/managers/trainFilterManager';
+import  { trainFilters } from "@/data/trainOptions";

 import Train from '@/scripts/interfaces/Train';
-
 import TrainTable from '@/components/TrainsView/TrainTable.vue';
 import TrainStats from '@/components/TrainsView/TrainStats.vue';
 import TrainOptions from '@/components/TrainsView/TrainOptions.vue';

 import { useStore } from '@/store';
 import { GETTERS } from '@/constants/storeConstants';
-import { TrainFilterType } from '@/scripts/enums/TrainFilterType';

 export default defineComponent({
  components: {
@@ -45,39 +44,9 @@ export default defineComponent({

    const trainList: ComputedRef<Train[]> = computed(() => store.getters[GETTERS.trainList]);

-    const initFilters: TrainFilter[] = [
-      {
-        id: TrainFilterType.twr,
-        isActive: true,
-      },
-      {
-        id: TrainFilterType.skr,
-        isActive: true,
-      },
-      {
-        id: TrainFilterType.passenger,
-        isActive: true,
-      },
-      {
-        id: TrainFilterType.freight,
-        isActive: true,
-      },
-      {
-        id: TrainFilterType.other,
-        isActive: true,
-      },
-      {
-        id: TrainFilterType.comments,
-        isActive: true,
-      },
-       {
-        id: TrainFilterType.noTimetable,
-        isActive: true,
-      },
-    ];
-
    const sorterActive = ref({ id: 'distance', dir: -1 });
-    const filterList = reactive([...initFilters]) as TrainFilter[];
+    const filterList = reactive([...trainFilters]) as TrainFilter[];
+    const isTrainOptionsCardVisible = ref(false);

    const searchedDriver = ref('');
    const searchedTrain = ref('');
@@ -86,6 +55,7 @@ export default defineComponent({
    provide('searchedDriver', searchedDriver);
    provide('sorterActive', sorterActive);
    provide('filterList', filterList);
+    provide('isTrainOptionsCardVisible', isTrainOptionsCardVisible);

    const computedTrains: ComputedRef<Train[]> = computed(() => {
      return filteredTrainList(
@@ -97,9 +67,6 @@ export default defineComponent({
      );
    });

-    /* Provide list for TrainStats category filter */
-    const chosenTrainCategories = reactive([] as string[]);
-    provide('chosenTrainCategories', chosenTrainCategories);

    return {
      trainList,
@@ -107,7 +74,6 @@ export default defineComponent({
      searchedTrain,
      searchedDriver,
      sorterActive,
-      chosenTrainCategories,
    };
  },