Dodano podstawowe filtry

src/components/ui/List.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="list">
     <Card :stationInfo="focusedStationInfo" :closeCard="closeCard" />
+
+    <Options />
+
     <div class="table-wrapper">
-      <!-- <ListFilter />  -->
       <table class="table">
         <thead>
           <tr>
@@ -113,13 +115,13 @@ import Vue from "vue";
 import { mapGetters } from "vuex";
 
 import Card from "@/components/ui/Card.vue";
-import ListFilter from "@/components/utils/ListFilter.vue";
+import Options from "@/components/ui/Options.vue";
 
 export default Vue.extend({
   name: "List",
   components: {
     Card,
-    ListFilter
+    Options
   },
   data: () => ({
     focusedStationName: ""
@@ -165,6 +167,9 @@ export default Vue.extend({
         case "Z/W":
           className = "brb";
           break;
+        case "BRAK MIEJSCA":
+          className = "no-space";
+          break;
         default:
           break;
       }
@@ -195,6 +200,7 @@ ul {
 .hour {
   padding: 0.4em;
   border-radius: 1rem;
+  font-weight: 500;
 
   &.ending {
     background-color: $accentCol;
@@ -222,6 +228,12 @@ ul {
     color: black;
     font-size: 0.95em;
   }
+
+  &.no-space {
+    background-color: #222;
+    color: white;
+    font-size: 0.85em;
+  }
 }
 
 .list {
@@ -234,12 +246,6 @@ ul {
 }
 
 .table {
-  &-wrapper {
-    overflow-x: auto;
-
-    position: relative;
-  }
-
   display: block;
   overflow-y: hidden;
 

src/components/ui/Options.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="options">
+    <div class="option-buttons">
+      <button class="button-filters" @click="filtersOpen = !filtersOpen">FILTRY</button>
+    </div>
+
+    <div class="option-wrapper">
+      <keep-alive>
+        <ListFilter v-if="filtersOpen" />
+      </keep-alive>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import ListFilter from "@/components/utils/ListFilter.vue";
+
+export default Vue.extend({
+  components: {
+    ListFilter
+  },
+  data: () => ({
+    filtersOpen: false,
+    sortingsOpen: false
+  })
+});
+</script>
+
+
+<style lang="scss" scoped>
+.options {
+  font-size: calc(0.7rem + 0.5vw);
+}
+
+button.button-filters {
+  color: #e0e0e0;
+  font-size: 0.9em;
+
+  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;
+
+  &:hover {
+    color: #ffffff;
+    background: rgba(#e0e0e0, 0.4);
+  }
+
+  img {
+    width: 45px;
+  }
+}
+</style>

src/components/utils/ListFilter.vue

@@ -1,21 +1,125 @@
 <template>
   <div class="list-filter">
-    <button class="filter-swtich">Rozwiń filtry</button>
+    <div class="filter-content">
+      <div class="content-row">
+        <div class="content-column">
+          <div class="column-title">Dostępność:</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>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
-export default Vue.extend({});
+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
+      // });
+
+      if (e.target.checked) this.removeFilter(e.target.id);
+      else this.addFilter(e.target.id);
+    }
+  }
+});
 </script>
 
 <style lang="scss" scoped>
+@import "../../styles/responsive";
+
 .list-filter {
+  display: flex;
+
+  font-size: calc(0.6rem + 0.4vw);
 }
 
-button.filter-swtich {
-  border: none;
-  background: none;
-  outline: none;
+.filter-content {
+  background: #333;
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+  padding: 0.3rem;
+
+  @include smallScreen() {
+    width: 100%;
+  }
+}
+
+.content {
+  &-row {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+  }
+
+  &-column {
+    margin: 0.3rem;
+    padding: 0.2rem;
+  }
+}
+
+.column-title {
+  text-align: center;
+  margin-bottom: 0.3rem;
+  font-weight: bold;
 }
 </style>