Zmieniono położenie filtrów

src/App.vue

@@ -10,7 +10,7 @@
       </header>
 
       <div class="app-info">
-        <span>Scenerie online: {{stations.length}} | Maszyniści online: {{ trainCount }}</span>
+        <span>Scenerie online: {{stationCount}} | Maszyniści online: {{ trainCount }}</span>
       </div>
 
       <main class="app-main">
@@ -38,7 +38,8 @@ export default Vue.extend({
   components: { Error, Loading },
   computed: mapGetters({
     stations: "getStations",
-    trainCount: "getTrainCount"
+    trainCount: "getTrainCount",
+    stationCount: "getStationCount"
   }),
 
   methods: {
@@ -81,6 +82,11 @@ body {
   min-height: 100vh;
 }
 
+button,
+input {
+  font-family: "Lato", sans-serif;
+}
+
 *,
 *::before,
 *::after {
@@ -146,11 +152,6 @@ a {
 
     padding: 0.3rem;
   }
-
-  &-main {
-    display: flex;
-    justify-content: center;
-  }
 }
 
 footer {

src/components/states/Error.vue

@@ -19,6 +19,8 @@ export default {
   justify-content: center;
   align-items: center;
 
+  min-height: 100vh;
+
   flex-direction: column;
 
   font-size: calc(1rem + 1.5vw);

src/components/states/Loading.vue

@@ -13,6 +13,8 @@ export default Vue.extend({});
   justify-content: center;
   align-items: center;
 
+  min-height: 100vh;
+
   font-size: calc(0.75rem + 1vw);
 
   color: #fdc62f;

src/components/ui/List.vue

@@ -2,8 +2,6 @@
   <div class="list">
     <Card :stationInfo="focusedStationInfo" :closeCard="closeCard" />
 
-    <Options />
-
     <div class="table-wrapper">
       <table class="table">
         <thead>
@@ -115,13 +113,11 @@ import Vue from "vue";
 import { mapGetters } from "vuex";
 
 import Card from "@/components/ui/Card.vue";
-import Options from "@/components/ui/Options.vue";
 
 export default Vue.extend({
   name: "List",
   components: {
-    Card,
-    Options
+    Card
   },
   data: () => ({
     focusedStationName: ""
@@ -238,7 +234,7 @@ ul {
 
 .list {
   display: flex;
-  flex-direction: column;
+  justify-content: center;
 }
 
 .default-station {
@@ -246,8 +242,13 @@ ul {
 }
 
 .table {
+  &-wrapper {
+    overflow: auto;
+  }
+
   display: block;
-  overflow-y: hidden;
+
+  max-height: 100vh;
 
   white-space: nowrap;
   border-collapse: collapse;
@@ -258,6 +259,7 @@ ul {
   thead th {
     padding: 0.8rem;
     background-color: #444;
+    min-width: 100px;
   }
 
   tr {

src/components/ui/Options.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="options">
     <div class="option-buttons">
-      <button class="button-filters" @click="filtersOpen = !filtersOpen">FILTRY</button>
+      <button
+        class="button-filters"
+        :class="{'open': filtersOpen}"
+        @click="filtersOpen = !filtersOpen"
+      >FILTRY</button>
     </div>
 
     <div class="option-wrapper">
@@ -29,30 +33,57 @@ export default Vue.extend({
 
 
 <style lang="scss" scoped>
+@import "../../styles/variables.scss";
+@import "../../styles/responsive.scss";
+
 .options {
   font-size: calc(0.7rem + 0.5vw);
+
+  display: flex;
+  padding: 1rem;
+
+  @include smallScreen() {
+    flex-direction: column;
+    padding: 1rem 0;
+  }
 }
 
-button.button-filters {
+button {
   color: #e0e0e0;
-  font-size: 0.9em;
+  font-size: 1em;
+
+  background: #333;
+  border: none;
 
-  border: 2px solid #e0e0e0;
-  background: rgba(#e0e0e0, 0.2);
   outline: none;
 
-  border-radius: 0.5em;
-
   padding: 0.5em;
-  margin: 0.4em 0;
 
   cursor: pointer;
 
-  transition: background 0.4s, color 0.4s;
+  border-left: 3px solid white;
+  transition: all 0.3s;
+
+  @include smallScreen {
+    border-left: none;
+    border-top: 2px solid white;
+  }
+
+  &.open {
+    color: $accentCol;
+    border-radius: 1em 0 0 1em;
+    border: none;
+
+    @include smallScreen() {
+      border-radius: 1em 1em 0 0;
+    }
+
+    font-weight: bold;
+  }
 
   &:hover {
     color: #ffffff;
-    background: rgba(#e0e0e0, 0.4);
+    background: rgba(#e0e0e0, 0.1);
   }
 
   img {

src/components/utils/ListFilter.vue

@@ -1,61 +1,15 @@
 <template>
   <div class="list-filter">
-    <div class="filter-content">
-      <div class="content-row">
-        <div class="content-column">
-          <div class="column-title">Dostępność:</div>
+    <div class="filter-grid">
+      <div class="grid-row">
+        <div class="grid-column" v-for="(el, i) in gridElements" :key="i">
+          <div class="column-title">{{el.title}}</div>
 
-          <div class="content-item">
-            <input type="checkbox" id="is-default" checked @change="handleChange" />
-            <label for="is-default">W paczce z grą</label>
-          </div>
-
-          <div class="content-item">
-            <input type="checkbox" id="not-default" checked @change="handleChange" />
-            <label for="not-default">Poza paczką z grą</label>
-          </div>
-        </div>
-
-        <div class="content-column">
-          <div class="column-title">Sterowanie:</div>
-
-          <div class="content-item">
-            <input type="checkbox" id="control-SPK" checked @change="handleChange" />
-            <label for="control-SPK">SPK</label>
-          </div>
-
-          <div class="content-item">
-            <input type="checkbox" id="control-SCS" checked @change="handleChange" />
-            <label for="control-SCS">SCS</label>
-          </div>
-
-          <div class="content-item">
-            <input type="checkbox" id="control-hands" checked @change="handleChange" />
-            <label for="control-hands">ręczne</label>
-          </div>
-
-          <div class="content-item">
-            <input type="checkbox" id="control-levers" checked @change="handleChange" />
-            <label for="control-levers">mechaniczne</label>
-          </div>
-        </div>
-
-        <div class="content-column">
-          <div class="column-title">Sygnalizacja:</div>
-
-          <div class="content-item">
-            <input type="checkbox" id="signals-modern" checked @change="handleChange" />
-            <label for="signals-modern">współczesna</label>
-          </div>
-
-          <div class="content-item">
-            <input type="checkbox" id="signals-mixed" checked @change="handleChange" />
-            <label for="signals-mixed">mieszana</label>
-          </div>
-
-          <div class="content-item">
-            <input type="checkbox" id="signals-historic" checked @change="handleChange" />
-            <label for="signals-historic">kształtowa</label>
+          <div class="column-content">
+            <div class="grid-item" v-for="(item, i) in el.items" :key="i">
+              <input :type="el.type" :id="item.id" :name="item.name" checked @change="handleChange" />
+              <label :for="item.id">{{ item.content }}</label>
+            </div>
           </div>
         </div>
       </div>
@@ -64,21 +18,98 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import { Vue, Component } from "vue-property-decorator";
 import { mapActions } from "vuex";
 
 export default Vue.extend({
   name: "list-filter",
-  data: () => ({}),
-  methods: {
-    ...mapActions(["addFilter", "removeFilter"]),
-    handleChange(e: any) {
-      // this.$store.commit(e.target.checked ? "removeFilter" : "addFilter", {
-      //   id: e.target.id
-      // });
+  data: () => ({
+    gridElements: {
+      access: {
+        title: "Dostępność",
+        type: "checkbox",
+        items: [
+          {
+            id: "is-default",
+            name: "default",
+            content: "w paczce z grą"
+          },
+          {
+            id: "not-default",
+            name: "notDefault",
+            content: "poza paczką z grą"
+          },
+          {
+            id: "non-public",
+            name: "nonPublic",
+            content: "niepubliczna"
+          }
+        ]
+      },
 
-      if (e.target.checked) this.removeFilter(e.target.id);
-      else this.addFilter(e.target.id);
+      control: {
+        title: "Sterowanie",
+        type: "checkbox",
+
+        items: [
+          {
+            id: "SPK",
+            name: "SPK",
+            content: "SPK"
+          },
+          {
+            id: "SCS",
+            name: "SCS",
+            content: "SCS"
+          },
+          {
+            id: "by-hand",
+            name: "ręczne",
+            content: "ręczne"
+          },
+          {
+            id: "levers",
+            name: "mechaniczne",
+            content: "mechaniczne"
+          }
+        ]
+      },
+
+      signals: {
+        title: "Sygnalizacja",
+        type: "checkbox",
+
+        items: [
+          {
+            id: "modern",
+            name: "współczesna",
+            content: "współczesna"
+          },
+          {
+            id: "semaphore",
+            name: "kształtowa",
+            content: "kształtowa"
+          },
+          {
+            id: "mixed",
+            name: "mieszana",
+            content: "mieszana"
+          },
+          {
+            id: "historic",
+            name: "historyczna",
+            content: "historyczna"
+          }
+        ]
+      }
+    }
+  }),
+  methods: {
+    ...mapActions(["addFilters", "removeFilters"]),
+    handleChange(e: any) {
+      if (e.target.checked) {
+        this.removeFilters([e.target.name]);
+      } else this.addFilters([e.target.name]);
     }
   }
 });
@@ -91,20 +122,19 @@ export default Vue.extend({
   display: flex;
 
   font-size: calc(0.6rem + 0.4vw);
-}
-
-.filter-content {
-  background: #333;
-  border-top-left-radius: 1rem;
-  border-top-right-radius: 1rem;
-  padding: 0.3rem;
 
   @include smallScreen() {
     width: 100%;
   }
 }
 
-.content {
+.filter-grid {
+  background: #333;
+  border-radius: 0 1rem 1rem 1rem;
+  padding: 0.3rem;
+}
+
+.grid {
   &-row {
     display: flex;
     justify-content: center;

src/data/stations.json

@@ -1615,7 +1615,6 @@
                 "noCatenary": 0
             }
         },
-        "default": false,
-        "non-public": true
+        "default": false
     }
 ]

src/store/index.ts

@@ -87,13 +87,13 @@ export default new Vuex.Store({
       commit('filterStations');
     },
 
-    addFilter({ commit }, filterId) {
-      commit('addFilter', filterId);
+    addFilters({ commit }, filterId) {
+      commit('addFilters', filterId);
       commit('filterStations');
     },
 
-    removeFilter({ commit }, filterId) {
-      commit('removeFilter', filterId);
+    removeFilters({ commit }, filterId) {
+      commit('removeFilters', filterId);
       commit('filterStations');
     }
   },
@@ -101,40 +101,25 @@ export default new Vuex.Store({
     setStations: (state, stations) => state.stations = stations,
     setTrainCount: (state, count) => state.trainCount = count,
 
-    addFilter(state: any, filterId: string) {
-      state.filters.push(filterId);
-
+    addFilters(state: any, filters: string[]) {
+      state.filters.push(...filters);
     },
-    removeFilter: (state: { filters: string[] }, filterId: string) => {
-      state.filters = state.filters.filter((id: string) => id !== filterId);
+    removeFilters: (state: { filters: string[] }, filters: string[]) => {
+      filters.forEach(filter => {
+        state.filters = state.filters.filter((id: string) => id !== filter);
+      })
     },
 
     filterStations(state: any) {
-      let isDefault = state.filters.includes("is-default");
-      let isNotDefault = state.filters.includes("not-default");
-
-      let hasSPK = state.filters.includes("control-SPK");
-      let hasSCS = state.filters.includes("control-SCS");
-      let hasHand = state.filters.includes("control-hands");
-      let hasLevers = state.filters.includes("control-levers");
-
-      let modernSignals = state.filters.includes("signals-modern");
-      let mixedSignals = state.filters.includes("signals-mixed");
-      let historicSignals = state.filters.includes("signals-historic");
-
       state.filteredStations = state.stations.filter((station: any) => {
-        if (isDefault && station.default) return false;
-        if (isNotDefault && !station.default) return false;
-        if (hasSPK && (station.controlType === "SPK" || station.controlType === "SCS-SPK")) return false;
-        if (hasSCS && (station.controlType === "SCS" || station.controlType === "SCS-SPK")) return false;
-        if (hasHand && (station.controlType === "ręczne")) return false;
-        if (hasLevers && (station.controlType === "mechaniczne"
-          || station.controlType === "mechaniczne+SCS"
-          || station.controlType === "mechaniczne+SPK")) return false;
+        if (station.default && state.filters.includes("default")) return false;
+        if ((!station.default) && state.filters.includes("notDefault")) return false;
+        if ((station.nonPublic || !station.reqLevel) && (state.filters.includes("nonPublic"))) return false;
 
-        if (modernSignals && (station.signalType === "współczesna")) return false;
-        if (mixedSignals && (station.signalType === "mieszana")) return false;
-        if (historicSignals && (station.signalType === "kształtowa" || station.signalType === "historyczna")) return false;
+        if (state.filters.includes(station.controlType)) return false;
+        if (state.filters.includes(station.signalType)) return false;
+
+        if (station.controlType && state.filters.filter((f: string) => station.controlType.includes(f)).length > 0) return false;
 
         return true;
       })
@@ -142,6 +127,7 @@ export default new Vuex.Store({
   },
   getters: {
     getStations: state => state.filteredStations,
+    getStationCount: state => state.stations.length,
     getTrainCount: state => state.trainCount,
     getFilters: (state: any) => state.filters,
   }

src/views/Home.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="home">
+    <Options />
     <List />
   </div>
 </template>
@@ -7,10 +8,11 @@
 <script lang="ts">
 import { Vue, Component } from "vue-property-decorator";
 
+import Options from "@/components/ui/Options.vue";
 import List from "@/components/ui/List.vue";
 
 @Component({
-  components: { List }
+  components: { Options, List }
 })
 export default class Home extends Vue {
   mounted() {}
@@ -19,7 +21,6 @@ export default class Home extends Vue {
 
 <style lang="scss" scoped>
 .home {
-  overflow: auto;
   padding: 1rem;
 }
 </style>