Dodano podstawowe filtry

src/App.vue

@@ -9,9 +9,9 @@
         </div>
       </header>
 
-      <div
-        class="app-info"
-      >Scenerie online: {{stations.length}} | Maszyniści online: {{ trainCount }}</div>
+      <div class="app-info">
+        <span>Scenerie online: {{stations.length}} | Maszyniści online: {{ trainCount }}</span>
+      </div>
 
       <main class="app-main">
         <Loading v-if="connectionState == 0" />
@@ -31,6 +31,7 @@ import { mapGetters, mapActions } from "vuex";
 
 import Error from "@/components/states/Error.vue";
 import Loading from "@/components/states/Loading.vue";
+// import ListFilter from "@/components/utils/ListFilter.vue";
 
 export default Vue.extend({
   name: "App",
@@ -143,13 +144,12 @@ a {
 
     background: #222;
 
-    padding: 0.4rem;
+    padding: 0.3rem;
   }
 
   &-main {
     display: flex;
     justify-content: center;
-    align-items: center;
   }
 }
 

src/assets/icon-filter.svg

@@ -0,0 +1,9 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="64" height="64" fill="#898989"/>
+<path d="M8 19H57" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 32H57" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 45H57" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="16" cy="19" r="3" fill="#898989" stroke="white" stroke-width="2"/>
+<circle cx="45" cy="32" r="3" fill="#898989" stroke="white" stroke-width="2"/>
+<circle cx="28" cy="45" r="3" fill="#898989" stroke="white" stroke-width="2"/>
+</svg>

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>

src/main.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store/stations'
+import store from './store'
 
 Vue.config.productionTip = false
 

src/store/index.ts

@@ -1,19 +1,148 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import data from '@/data/stations.json';
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-
-  },
-  mutations: {
-
+    stations: [],
+    filteredStations: [],
+    filters: [],
+    trainCount: 0
   },
   actions: {
+    fetchStations: async ({ commit }) => {
+      let onlineStations, statusList: any, onlineTrains: any
 
+      try {
+        onlineStations = (await (await fetch('https://api.td2.info.pl:9640/?method=getStationsOnline')).json()).message
+        statusList = (await (await fetch('https://api.td2.info.pl:9640/?method=readFromSWDR&value=getDispatcherStatusList%3B1')).json()).message
+        onlineTrains = (await (await fetch('https://api.td2.info.pl:9640/?method=getTrainsOnline')).json()).message
+      } catch (error) {
+        throw Error(error.message);
+      }
+
+      commit('setTrainCount', onlineTrains.filter((train: any) => train.isOnline && train.region === 'eu').length);
+
+      const mappedStations = onlineStations
+        .filter((station: any) => station.region === 'eu')
+        .filter((station: any) => station.isOnline)
+        .map((
+          { stationName = '', stationHash = '', maxUsers = 0, currentUsers = 0, spawnString = '',
+            dispatcherRate = 0, dispatcherName = '', dispatcherExp = 0, dispatcherId = 0 }) => {
+
+          const status = statusList.find((s: any) => s[0] === stationHash && s[1] === 'eu')
+          let occupiedTo: string = "---"
+          let occupiedTimestamp: number = 0
+
+          if (!status)
+            occupiedTo = "NIEZALOGOWANY";
+          else {
+            let occupiedCode: number = status[2];
+
+            occupiedTimestamp = status[3];
+            occupiedTo = "NIEDOSTĘPNY";
+
+            if (occupiedCode === 0) {
+              if (occupiedTimestamp - Date.now() > 21000000)
+                occupiedTo = "BEZ LIMITU";
+              else
+                occupiedTo = new Date(status[3])
+                  .toLocaleTimeString('en-US',
+                    { hour12: false, hour: '2-digit', minute: '2-digit' });
+            }
+
+            if (occupiedCode === 1)
+              occupiedTo = "Z/W";
+
+            if (occupiedCode === 2 && occupiedTimestamp === 0)
+              occupiedTo = "KOŃCZY";
+
+            if (occupiedCode === 3)
+              occupiedTo = "BRAK MIEJSCA";
+          }
+
+          const trains: {} = onlineTrains.filter((train: any) =>
+            train.region === 'eu' && train.isOnline === 1 && train.station.stationName === stationName)
+
+          const stationData: {} = data.find((station: any) => station.stationName === stationName) || { stationName, stationURL: "" }
+
+          return {
+            ...stationData,
+            stationHash,
+            maxUsers,
+            currentUsers,
+            spawnString: spawnString && spawnString.split(';').map(v => v.split(',')[6] ? v.split(',')[6] : v.split(',')[0]),
+            dispatcherName,
+            dispatcherRate,
+            dispatcherId,
+            dispatcherExp: dispatcherExp < 2 ? 'L' : dispatcherExp,
+            occupiedTo,
+            trains
+          }
+        })
+
+      commit('setStations', mappedStations);
+      commit('filterStations');
+    },
+
+    addFilter({ commit }, filterId) {
+      commit('addFilter', filterId);
+      commit('filterStations');
+    },
+
+    removeFilter({ commit }, filterId) {
+      commit('removeFilter', filterId);
+      commit('filterStations');
+    }
   },
-  modules: {
+  mutations: {
+    setStations: (state, stations) => state.stations = stations,
+    setTrainCount: (state, count) => state.trainCount = count,
 
+    addFilter(state: any, filterId: string) {
+      state.filters.push(filterId);
+
+    },
+    removeFilter: (state: { filters: string[] }, filterId: string) => {
+      state.filters = state.filters.filter((id: string) => id !== filterId);
+    },
+
+    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 (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;
+
+        return true;
+      })
+    }
+  },
+  getters: {
+    getStations: state => state.filteredStations,
+    getTrainCount: state => state.trainCount,
+    getFilters: (state: any) => state.filters,
   }
 })

src/store/stations.ts

@@ -1,100 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-import data from '@/data/stations.json';
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-    state: {
-        stations: [],
-        trainCount: 0,
-        connectionState: 0,
-        errorMessage: ""
-    },
-    actions: {
-        fetchStations: async ({ commit }) => {
-            let onlineStations, statusList: any, onlineTrains: any
-
-            try {
-                onlineStations = (await (await fetch('https://api.td2.info.pl:9640/?method=getStationsOnline')).json()).message
-                statusList = (await (await fetch('https://api.td2.info.pl:9640/?method=readFromSWDR&value=getDispatcherStatusList%3B1')).json()).message
-                onlineTrains = (await (await fetch('https://api.td2.info.pl:9640/?method=getTrainsOnline')).json()).message
-            } catch (error) {
-                commit('setConnectionState', 1);
-                commit('setErrorMessage', error.message);
-                throw Error(error.message);
-            }
-
-            commit('setTrainCount', onlineTrains.filter((train: any) => train.isOnline && train.region === 'eu').length);
-
-            const mappedStations = onlineStations
-                .filter((station: any) => station.region === 'eu')
-                .filter((station: any) => station.isOnline)
-                .map((
-                    { stationName = '', stationHash = '', maxUsers = 0, currentUsers = 0, spawnString = '',
-                        dispatcherRate = 0, dispatcherName = '', dispatcherExp = 0, dispatcherId = 0 }) => {
-
-                    const status = statusList.find((s: any) => s[0] === stationHash && s[1] === 'eu')
-                    let occupiedTo: string = "---"
-                    let occupiedTimestamp: number = 0
-
-                    if (!status)
-                        occupiedTo = "NIEZALOGOWANY";
-                    else {
-                        let occupiedCode: number = status[2];
-
-                        occupiedTimestamp = status[3];
-                        occupiedTo = "NIEDOSTĘPNY";
-
-                        if (occupiedCode === 0) {
-                            if (occupiedTimestamp - Date.now() > 21000000)
-                                occupiedTo = "BEZ LIMITU";
-                            else
-                                occupiedTo = new Date(status[3])
-                                    .toLocaleTimeString('en-US',
-                                        { hour12: false, hour: '2-digit', minute: '2-digit' });
-                        }
-
-                        if (occupiedCode === 1)
-                            occupiedTo = "Z/W";
-
-                        if (occupiedCode === 2 && occupiedTimestamp === 0)
-                            occupiedTo = "KOŃCZY";
-                    }
-
-                    const trains: {} = onlineTrains.filter((train: any) =>
-                        train.region === 'eu' && train.isOnline === 1 && train.station.stationName === stationName)
-
-                    const stationData: {} = data.find((station: any) => station.stationName === stationName) || { stationName, stationURL: "" }
-
-                    return {
-                        ...stationData,
-                        stationHash,
-                        maxUsers,
-                        currentUsers,
-                        spawnString: spawnString && spawnString.split(';').map(v => v.split(',')[6] ? v.split(',')[6] : v.split(',')[0]),
-                        dispatcherName,
-                        dispatcherRate,
-                        dispatcherId,
-                        dispatcherExp: dispatcherExp < 2 ? 'L' : dispatcherExp,
-                        occupiedTo,
-                        trains
-                    }
-                })
-
-            commit('setStations', mappedStations);
-            commit('setConnectionState', 2);
-        }
-    },
-    mutations: {
-        setStations: (state, stations) => state.stations = stations,
-        setTrainCount: (state, count) => state.trainCount = count,
-        setConnectionState: (state, connState) => state.connectionState = connState,
-        setErrorMessage: (state, message) => state.errorMessage = message
-    },
-    getters: {
-        getStations: state => state.stations,
-        getTrainCount: state => state.trainCount
-    }
-})