Zmiana w funkcjonowaniu filtrów, zmiany estetyczne

src/components/StationsView/FilterCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="option-card">
+  <section class="filter-card">
     <div class="card-exit" @click="exit">
       <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
     </div>
@@ -18,7 +18,10 @@
             v-model="option.value"
             @change="handleChange"
           />
-          <span class="option-content" :class="option.section">{{option.content}}</span>
+          <span
+            class="option-content"
+            :class="option.section + (option.value ? ' checked' : '')"
+          >{{option.content}}</span>
         </label>
       </div>
     </div>
@@ -45,13 +48,8 @@
     <div class="card-save">
       <div class="option">
         <label class="option-label">
-          <input
-            class="option-input"
-            type="checkbox"
-            v-model="saveOptions"
-            @change="changeSaveState"
-          />
-          <span class="option-content save">ZAPISZ FILTRY</span>
+          <input class="option-input" type="checkbox" v-model="saveOptions" @change="saveFilters" />
+          <span class="option-content save" :class="{'checked': saveOptions}">ZAPISZ FILTRY</span>
         </label>
       </div>
     </div>
@@ -65,22 +63,17 @@
 
 <script lang="ts">
 import { Vue, Component, Prop } from "vue-property-decorator";
-import { Action } from "vuex-class";
 
 import inputData from "@/data/options.json";
 
 @Component
-export default class OptionCard extends Vue {
+export default class FilterCard extends Vue {
   inputs = { ...inputData };
   saveOptions: boolean = false;
-
   STORAGE_KEY: string = "options_saved";
 
   @Prop() exit!: () => void;
 
-  @Action("setFilter") setFilter;
-  @Action("resetFilters") resetFilters;
-
   mounted() {
     const storage = window.localStorage;
 
@@ -91,8 +84,8 @@ export default class OptionCard extends Vue {
   handleChange(e: Event): void {
     const target = <HTMLInputElement>e.target;
 
-    this.setFilter({
-      filterName: target.name,
+    this.$emit("changeFilterValue", {
+      name: target.name,
       value: !target.checked,
     });
 
@@ -102,17 +95,16 @@ export default class OptionCard extends Vue {
 
   handleInput(e: Event): void {
     const target = <HTMLInputElement>e.target;
-
-    this.setFilter({
-      filterName: target.name,
-      value: parseInt(target.value),
+    this.$emit("changeFilterValue", {
+      name: target.name,
+      value: target.value,
     });
 
     if (this.saveOptions)
       window.localStorage.setItem(target.name, target.value + "");
   }
 
-  changeSaveState(): void {
+  saveFilters(): void {
     const storage = window.localStorage;
 
     if (this.saveOptions) {
@@ -139,7 +131,7 @@ export default class OptionCard extends Vue {
       window.localStorage.setItem(slider.name, slider.value + "");
     });
 
-    this.resetFilters();
+    this.$emit('resetFilters');
   }
 
   closeCard(): void {
@@ -152,7 +144,7 @@ export default class OptionCard extends Vue {
 @import "../../styles/responsive";
 @import "../../styles/variables";
 
-.option-card {
+.filter-card {
   position: fixed;
   top: 50%;
   left: 50%;
@@ -235,14 +227,6 @@ export default class OptionCard extends Vue {
 
   &-input {
     display: none;
-
-    &:not(:checked) + span {
-      background-color: #585858;
-
-      &::before {
-        box-shadow: none;
-      }
-    }
   }
 
   &-content {
@@ -267,57 +251,67 @@ export default class OptionCard extends Vue {
 
     transition: all 0.2s;
 
-    &.access {
-      background-color: #e03b07;
+    &:not(.checked) {
+      background-color: #585858;
 
       &::before {
-        box-shadow: 0 0 6px 1px #e03b07;
+        box-shadow: none;
       }
     }
 
-    &.control {
-      background-color: #0085ff;
+    &.checked {
+      &.access {
+        background-color: #e03b07;
+
+        &::before {
+          box-shadow: 0 0 6px 1px #e03b07;
+        }
+      }
+
+      &.control {
+        background-color: #0085ff;
+
+        &::before {
+          box-shadow: 0 0 6px 1px #0085ff;
+        }
+      }
+
+      &.signals {
+        background-color: #b000bf;
+
+        &::before {
+          box-shadow: 0 0 6px 1px #b000bf;
+        }
+      }
+
+      &.status {
+        background-color: #05b702;
+
+        &::before {
+          box-shadow: 0 0 6px 1px #05b702;
+        }
+      }
+
+      &.save {
+        background-color: #05b702;
+
+        &::before {
+          box-shadow: 0 0 6px 1px #05b702;
+        }
+      }
 
       &::before {
-        box-shadow: 0 0 6px 1px #0085ff;
+        position: absolute;
+        content: "";
+        top: 0;
+        left: 0;
+
+        width: 100%;
+        height: 100%;
+
+        border-radius: inherit;
       }
     }
-
-    &.signals {
-      background-color: #b000bf;
-
-      &::before {
-        box-shadow: 0 0 6px 1px #b000bf;
-      }
-    }
-
-    &.status {
-      background-color: #05b702;
-
-      &::before {
-        box-shadow: 0 0 6px 1px #05b702;
-      }
-    }
-
-    &.save {
-      background-color: #05b702;
-
-      &::before {
-        box-shadow: 0 0 6px 1px #05b702;
-      }
-    }
-
-    &::before {
-      position: absolute;
-      content: "";
-      top: 0;
-      left: 0;
-
-      width: 100%;
-      height: 100%;
-
-      border-radius: inherit;
-    }
   }
 }
 

src/components/StationsView/LegendCard.vue

@@ -1,115 +0,0 @@
-<template>
-  <section class="legend-card card">
-    <div class="card-exit" @click="exit">
-      <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
-    </div>
-
-    <div class="card-title flex">LEGENDA</div>
-
-    <div class="card-icons">
-      <div class="legend-icon" v-for="(icon, i) in icons" :key="i">
-        <img :src="require(`@/assets/icon-${icon.name}.svg`)" :alt="icon.name" />
-        <span>{{icon.desc}}</span>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import { Vue, Component, Prop } from "vue-property-decorator";
-
-@Component
-export default class LegendCard extends Vue {
-  @Prop() exit!: void;
-
-  icons: { name: string; desc: string }[] = [
-    { name: "SPK", desc: "Sceneria sterowana za pomocą programu SPK" },
-    { name: "SCS", desc: "Sceneria sterowana za pomocą programu SCS" },
-    {
-      name: "SCS-SPK",
-      desc: "Sceneria sterowana za pomocą programu SCS lub SPK"
-    },
-    {
-      name: "mechaniczne",
-      desc: "Sceneria posiadająca urządzenia sterowane mechanicznie"
-    },
-    {
-      name: "mechaniczne+SPK",
-      desc:
-        "Sceneria posiadająca urządzenia sterowane mechanicznie zintegrowane z SPK"
-    },
-    {
-      name: "mechaniczne+SCS",
-      desc:
-        "Sceneria posiadająca urządzenia sterowane mechanicznie zintegrowane z SCS"
-    },
-    { name: "ręczne", desc: "Sceneria z ręcznie sterowanymi zwrotnicami" },
-    {
-      name: "ręczne+SPK",
-      desc: "Sceneria z ręcznie sterowanymi zwrotnicami zintegrowana z SPK"
-    },
-    {
-      name: "współczesna",
-      desc: "Sceneria ze współczesną sygnalizacją świetlną"
-    },
-    { name: "kształtowa", desc: "Sceneria ze sygnalizacją kształtową" },
-    { name: "historyczna", desc: "Sceneria ze sygnalizacją historyczną" },
-    {
-      name: "mieszana",
-      desc:
-        "Sceneria ze sygnalizacją mieszaną (kształtowe, historyczne lub/i współczesne)"
-    },
-    {
-      name: "SBL",
-      desc:
-        "Sceneria posiadająca samoczynną blokadę liniową na co najmniej jednym z jej szlaków"
-    }
-  ];
-}
-</script>
-
-<style lang="scss">
-@import "../../styles/variables.scss";
-@import "../../styles/responsive.scss";
-
-.card {
-  &-exit {
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    margin: 0.8em;
-
-    img {
-      width: 1.1em;
-    }
-
-    cursor: pointer;
-  }
-
-  &-title {
-    font-size: 3em;
-    font-weight: 700;
-    color: $accentCol;
-
-    margin: 0.3em 0;
-  }
-}
-
-.legend-icon {
-  display: flex;
-  align-items: center;
-
-  padding: 0.5em;
-
-  img {
-    width: 2.5em;
-    margin-right: 0.5em;
-  }
-
-  span {
-    font-size: 1.1em;
-    text-align: start;
-  }
-}
-</style>

src/components/StationsView/Options.vue

@@ -21,25 +21,15 @@
     </div>
 
     <div class="options-content">
-      <transition name="card-anim">
-        <OptionCard v-if="filterCardOpen" :exit="() => toggleCardsState('filter')" />
-      </transition>
-
-      <transition name="card-anim">
-        <LegendCard v-if="legendCardOpen" :exit="() => toggleCardsState('legend')" />
-      </transition>
+      <transition name="card-anim"></transition>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Vue, Component } from "vue-property-decorator";
-import OptionCard from "@/components/StationsView/OptionCard.vue";
-import LegendCard from "@/components/StationsView/LegendCard.vue";
 
-@Component({
-  components: { OptionCard, LegendCard },
-})
+@Component({})
 export default class Options extends Vue {
   filterCardOpen: boolean = false;
   legendCardOpen: boolean = false;

src/components/StationsView/StationTable.vue

@@ -1,140 +1,142 @@
 <template>
   <section class="station-table">
-    <table class="table" v-if="stations.length != 0">
-      <thead class="table-head">
-        <tr>
-          <th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
-            <span>
-              <div>
-                <div>{{head[0]}}</div>
-                <div v-if="head.length > 1">{{head[1]}}</div>
-              </div>
+    <div class="table-wrapper">
+      <table class="table">
+        <thead class="table-head">
+          <tr>
+            <th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
+              <span>
+                <div>
+                  <div>{{head[0]}}</div>
+                  <div v-if="head.length > 1">{{head[1]}}</div>
+                </div>
 
-              <img
-                class="sort-icon"
-                v-if="sorterActive.index == i"
-                :src="sorterActive.dir == 1 ? icons.ascSVG : icons.descSVG"
-                alt
-              />
-            </span>
-          </th>
-        </tr>
-      </thead>
-
-      <tr
-        class="table-item"
-        v-for="(station, i) in stations"
-        :key="i + station.stationHash"
-        @click="() => {  setFocusedStation(station.stationName) }"
-      >
-        <td
-          class="item-station-name"
-          :class="{'default-station': station.default, 'online': station.online}"
-        >{{station.stationName}}</td>
-
-        <td class="item-station-level">
-          <span
-            v-if="station.reqLevel"
-            :style="calculateExpStyle(station.reqLevel)"
-          >{{ (station.reqLevel && station.reqLevel > -1) ? (parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L") : "?" }}</span>
-
-          <span v-else>?</span>
-        </td>
-
-        <td class="item-station-status">
-          <span class="status" :class="statusClasses(station.occupiedTo)">{{station.occupiedTo}}</span>
-        </td>
-
-        <td class="item-dispatcher-name">{{station.online ? station.dispatcherName : ""}}</td>
-        <td class="item-dispatcher-exp">
-          <span
-            v-if="station.online"
-            :style="calculateExpStyle(station.dispatcherExp)"
-          >{{2 > station.dispatcherExp ? 'L' : station.dispatcherExp}}</span>
-        </td>
-        <td
-          class="item-users"
-        >{{station.online ? (station.currentUsers + "/" + station.maxUsers) : ""}}</td>
-        <td class="item-info">
-          <img
-            class="icon-info"
-            v-if="station.controlType"
-            :src="require(`@/assets/icon-${station.controlType}.svg`)"
-            :alt="station.controlType"
-            :title="'Sterowanie ' + station.controlType"
-          />
-
-          <img
-            class="icon-info"
-            v-if="station.signalType"
-            :src="require(`@/assets/icon-${station.signalType}.svg`)"
-            :alt="station.signalType"
-            :title="'Sygnalizacja ' + station.signalType"
-          />
-
-          <img
-            class="icon-info"
-            v-if="station.SBL && station.SBL !== ''"
-            :src="require(`@/assets/icon-SBL.svg`)"
-            alt="SBL"
-            title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
-          />
-
-          <img
-            class="icon-info"
-            v-if="!station.reqLevel || station.nonPublic"
-            :src="require(`@/assets/icon-lock.svg`)"
-            alt="non-public"
-            title="Sceneria niepubliczna"
-          />
-        </td>
-
-        <td class="item-tracks twoway">
-          <span
-            v-if="station.routes && station.routes.twoWay.catenary > 0"
-            class="track catenary"
-            :title="'Liczba zelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.catenary"
-          >{{station.routes.twoWay.catenary}}</span>
-
-          <span
-            v-if="station.routes && station.routes.twoWay.noCatenary > 0"
-            class="track no-catenary"
-            :title="'Liczba niezelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.noCatenary"
-          >{{station.routes.twoWay.noCatenary}}</span>
-
-          <span class="separator"></span>
-
-          <span
-            v-if="station.routes && station.routes.oneWay.catenary > 0"
-            class="track catenary"
-            :title="'Liczba zelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.catenary"
-          >{{station.routes.oneWay.catenary}}</span>
-
-          <span
-            v-if="station.routes && station.routes.oneWay.noCatenary > 0"
-            class="track no-catenary"
-            :title="'Liczba niezelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.noCatenary"
-          >{{station.routes.oneWay.noCatenary}}</span>
-        </td>
-
-        <td class="active-timetables">
-          <transition name="change-anim" mode="out-in">
-            <span :key="station.scheduledTrains.length">
-              <span v-if="station.scheduledTrains">
-                <span style="color:#eee">{{ station.scheduledTrains.length}}</span>
-                /
-                <span
-                  style="color:#bbb"
-                >{{ station.scheduledTrains.filter(train => train.confirmed).length }}</span>
+                <img
+                  class="sort-icon"
+                  v-if="sorterActive.index == i"
+                  :src="sorterActive.dir == 1 ? icons.ascSVG : icons.descSVG"
+                  alt
+                />
               </span>
+            </th>
+          </tr>
+        </thead>
 
-              <span v-else>...</span>
-            </span>
-          </transition>
-        </td>
-      </tr>
-    </table>
-    <div class="no-stations" v-else>Ups! Brak stacji do wyświetlenia!</div>
+        <tr
+          class="table-item"
+          v-for="(station, i) in stations"
+          :key="i + station.stationHash"
+          @click="() => {  setFocusedStation(station.stationName) }"
+        >
+          <td
+            class="item-station-name"
+            :class="{'default-station': station.default, 'online': station.online}"
+          >{{station.stationName}}</td>
+
+          <td class="item-station-level">
+            <span
+              v-if="station.reqLevel"
+              :style="calculateExpStyle(station.reqLevel)"
+            >{{ (station.reqLevel && station.reqLevel > -1) ? (parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L") : "?" }}</span>
+
+            <span v-else>?</span>
+          </td>
+
+          <td class="item-station-status">
+            <span class="status" :class="statusClasses(station.occupiedTo)">{{station.occupiedTo}}</span>
+          </td>
+
+          <td class="item-dispatcher-name">{{station.online ? station.dispatcherName : ""}}</td>
+          <td class="item-dispatcher-exp">
+            <span
+              v-if="station.online"
+              :style="calculateExpStyle(station.dispatcherExp)"
+            >{{2 > station.dispatcherExp ? 'L' : station.dispatcherExp}}</span>
+          </td>
+          <td
+            class="item-users"
+          >{{station.online ? (station.currentUsers + "/" + station.maxUsers) : ""}}</td>
+          <td class="item-info">
+            <img
+              class="icon-info"
+              v-if="station.controlType"
+              :src="require(`@/assets/icon-${station.controlType}.svg`)"
+              :alt="station.controlType"
+              :title="'Sterowanie ' + station.controlType"
+            />
+
+            <img
+              class="icon-info"
+              v-if="station.signalType"
+              :src="require(`@/assets/icon-${station.signalType}.svg`)"
+              :alt="station.signalType"
+              :title="'Sygnalizacja ' + station.signalType"
+            />
+
+            <img
+              class="icon-info"
+              v-if="station.SBL && station.SBL !== ''"
+              :src="require(`@/assets/icon-SBL.svg`)"
+              alt="SBL"
+              title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
+            />
+
+            <img
+              class="icon-info"
+              v-if="!station.reqLevel || station.nonPublic"
+              :src="require(`@/assets/icon-lock.svg`)"
+              alt="non-public"
+              title="Sceneria niepubliczna"
+            />
+          </td>
+
+          <td class="item-tracks twoway">
+            <span
+              v-if="station.routes && station.routes.twoWay.catenary > 0"
+              class="track catenary"
+              :title="'Liczba zelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.catenary"
+            >{{station.routes.twoWay.catenary}}</span>
+
+            <span
+              v-if="station.routes && station.routes.twoWay.noCatenary > 0"
+              class="track no-catenary"
+              :title="'Liczba niezelektryfikowanych szlaków dwutorowych: ' + station.routes.twoWay.noCatenary"
+            >{{station.routes.twoWay.noCatenary}}</span>
+
+            <span class="separator"></span>
+
+            <span
+              v-if="station.routes && station.routes.oneWay.catenary > 0"
+              class="track catenary"
+              :title="'Liczba zelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.catenary"
+            >{{station.routes.oneWay.catenary}}</span>
+
+            <span
+              v-if="station.routes && station.routes.oneWay.noCatenary > 0"
+              class="track no-catenary"
+              :title="'Liczba niezelektryfikowanych szlaków jednotorowych: ' + station.routes.oneWay.noCatenary"
+            >{{station.routes.oneWay.noCatenary}}</span>
+          </td>
+
+          <td class="active-timetables">
+            <transition name="change-anim" mode="out-in">
+              <span :key="station.scheduledTrains.length">
+                <span v-if="station.scheduledTrains">
+                  <span style="color:#eee">{{ station.scheduledTrains.length}}</span>
+                  /
+                  <span
+                    style="color:#bbb"
+                  >{{ station.scheduledTrains.filter(train => train.confirmed).length }}</span>
+                </span>
+
+                <span v-else>...</span>
+              </span>
+            </transition>
+          </td>
+        </tr>
+      </table>
+    </div>
+    <div class="no-stations" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div>
   </section>
 </template>
 
@@ -218,6 +220,9 @@ export default class StationTable extends styleMixin {
 }
 
 .table {
+  &-wrapper {
+    overflow: auto;
+  }
   white-space: nowrap;
   border-collapse: collapse;