Dodano opcję lokalnego zapamiętywania filtrów

functions/src/index.ts

@@ -7,7 +7,7 @@ const db = admin.firestore();
 import axios from "axios";
 
 exports.scheduledUpdate = functions.pubsub
-  .schedule("*/20 * * * *")
+  .schedule("0 * * * *")
   .onRun(async (context) => {
     let stationData: {
       stationName: string;
@@ -37,13 +37,6 @@ exports.scheduledUpdate = functions.pubsub
           occupiedFrom: Date.now(),
           currentDispatcherName: station.dispatcherName,
         });
-
-        // docRef.collection("dispatcherHistory").add({
-        //   dispatcherName: station.dispatcherName,
-        //   occupiedFrom: Date.now(),
-        //   occupiedTo: 0,
-        // });
-
         return;
       }
     });

src/components/StationsView/OptionCard.vue

@@ -23,10 +23,6 @@
       </div>
     </div>
 
-    <div class="card-sorts">
-      <!-- <div class="sort" v-for="(sort, i) in inputs.sorts" :key="i">{{ sort.content }}</div> -->
-    </div>
-
     <div class="card-sliders">
       <div class="slider" v-for="(slider, i) in inputs.sliders" :key="i">
         <input
@@ -46,6 +42,20 @@
       </div>
     </div>
 
+    <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>
+        </label>
+      </div>
+    </div>
+
     <div class="card-actions flex">
       <button class="button" @click="reset">RESET FILTRÓW</button>
       <button class="button" @click="exit">ZAMKNIJ FILTRY</button>
@@ -62,14 +72,22 @@ import inputData from "@/data/options.json";
 @Component
 export default class OptionCard extends Vue {
   inputs = { ...inputData };
+  saveOptions: boolean = false;
 
-  mounted() {}
+  STORAGE_KEY: string = "options_saved";
 
   @Prop() exit!: () => void;
 
   @Action("setFilter") setFilter;
   @Action("resetFilters") resetFilters;
 
+  mounted() {
+    const storage = window.localStorage;
+
+    if (storage.getItem(this.STORAGE_KEY) === "true") this.saveOptions = true;
+    else this.saveOptions = false;
+  }
+
   handleChange(e: Event): void {
     const target = <HTMLInputElement>e.target;
 
@@ -77,6 +95,9 @@ export default class OptionCard extends Vue {
       filterName: target.name,
       value: !target.checked,
     });
+
+    if (this.saveOptions)
+      window.localStorage.setItem(target.name, target.checked + "");
   }
 
   handleInput(e: Event): void {
@@ -86,15 +107,36 @@ export default class OptionCard extends Vue {
       filterName: target.name,
       value: parseInt(target.value),
     });
+
+    if (this.saveOptions)
+      window.localStorage.setItem(target.name, target.value + "");
+  }
+
+  changeSaveState(): void {
+    const storage = window.localStorage;
+
+    if (this.saveOptions) {
+      this.inputs.options.forEach((option) =>
+        storage.setItem(option.name, option.value + "")
+      );
+
+      this.inputs.sliders.forEach((slider) =>
+        storage.setItem(slider.name, slider.value + "")
+      );
+
+      storage.setItem(this.STORAGE_KEY, "true");
+    } else storage.setItem(this.STORAGE_KEY, "false");
   }
 
   reset(): void {
     this.inputs.options.forEach((option) => {
       option.value = option.defaultValue;
+      window.localStorage.setItem(option.name, option.value + "");
     });
 
     this.inputs.sliders.forEach((slider) => {
       slider.value = slider.defaultValue;
+      window.localStorage.setItem(slider.name, slider.value + "");
     });
 
     this.resetFilters();
@@ -176,6 +218,16 @@ export default class OptionCard extends Vue {
       margin: 0 0.3em;
     }
   }
+
+  &-save {
+    display: flex;
+    justify-content: center;
+
+    .option {
+      width: 30%;
+      font-size: 0.9em;
+    }
+  }
 }
 
 .option {
@@ -247,6 +299,14 @@ export default class OptionCard extends Vue {
       }
     }
 
+    &.save {
+      background-color: #05b702;
+
+      &::before {
+        box-shadow: 0 0 6px 1px #05b702;
+      }
+    }
+
     &::before {
       position: absolute;
       content: "";

src/components/StationsView/Options.vue

@@ -145,7 +145,7 @@ export default class Options extends Vue {
   }
 
   .action-btn {
-    font-size: 1rem;
+    font-size: 0.8rem;
   }
 }
 </style>

src/components/StationsView/StationCard.vue

@@ -10,7 +10,7 @@
       <ul class="history-list">
         <div
           class="history-info"
-        >Wersja eksperymentalna! Dziennik aktualizowany co 20 minut od 23:00 14 sierpnia 2020r.</div>
+        >Wersja eksperymentalna! Dziennik aktualizuje się automatycznie co godzinę.</div>
         <li class="history-log" v-for="(log, i) in computedHistory" :key="i">
           <div class="log-time">
             <div class="from">

src/data/options.json

@@ -159,28 +159,5 @@
       "defaultValue": 0,
       "content": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
     }
-    ],
-    "sorts": [
-        {
-            "id": "scenery-asc",
-            "name": "sceneryAsc",
-            "value": true,
-            "defaultValue": true,
-            "content": "SCENERIE (ROSNĄCO)"
-        },
-        {
-            "id": "status-asc",
-            "name": "statusAsc",
-            "value": false,
-            "defaultValue": false,
-            "content": "STATUS (ROSNĄCO)"
-        },
-        {
-            "id": "status-desc",
-            "name": "statusDesc",
-            "value": false,
-            "defaultValue": false,
-            "content": "STATUS (MALEJĄCO)"
-        }
   ]
 }

src/store/modules/dist/store.js

@@ -0,0 +1,405 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+exports.__esModule = true;
+var vuex_module_decorators_1 = require("vuex-module-decorators");
+var axios_1 = require("axios");
+var stations_json_1 = require("@/data/stations.json");
+var ConnState;
+(function (ConnState) {
+    ConnState[ConnState["Loading"] = 0] = "Loading";
+    ConnState[ConnState["Error"] = 1] = "Error";
+    ConnState[ConnState["Connected"] = 2] = "Connected";
+})(ConnState || (ConnState = {}));
+var Store = /** @class */ (function (_super) {
+    __extends(Store, _super);
+    function Store() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.trainCount = 0;
+        _this.stationCount = 0;
+        _this.connectionState = ConnState.Loading;
+        _this.apiURLS = {
+            stationDataURL: "https://api.td2.info.pl:9640/?method=getStationsOnline",
+            trainDataURL: "https://api.td2.info.pl:9640/?method=getTrainsOnline",
+            dispatcherDataURL: "https://api.td2.info.pl:9640/?method=readFromSWDR&value=getDispatcherStatusList%3B1"
+        };
+        _this.stations = [];
+        _this.filteredStations = [];
+        _this.filterInitStates = {
+            "default": false,
+            notDefault: false,
+            nonPublic: false,
+            SPK: false,
+            SCS: false,
+            ręczne: false,
+            mechaniczne: false,
+            współczesna: false,
+            kształtowa: false,
+            historyczna: false,
+            mieszana: false,
+            minLevel: 0,
+            minOneWayCatenary: 0,
+            minOneWay: 0,
+            minTwoWayCatenary: 0,
+            minTwoWay: 0,
+            "no-1track": false,
+            "no-2track": false,
+            free: true,
+            occupied: false,
+            ending: false
+        };
+        _this.filters = __assign({}, _this.filterInitStates);
+        return _this;
+    }
+    Object.defineProperty(Store.prototype, "getStationCount", {
+        get: function () {
+            return this.stationCount;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Store.prototype, "getTrainCount", {
+        get: function () {
+            return this.trainCount;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Store.prototype, "getStations", {
+        get: function () {
+            return this.filteredStations;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Store.prototype, "getAllStations", {
+        get: function () {
+            return this.stations;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Store.prototype, "getFilters", {
+        get: function () {
+            return this.filters;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Store.prototype, "getConnectionState", {
+        get: function () {
+            return this.connectionState;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Store.prototype.setFilter = function (payload) {
+        this.context.commit("mutateFilter", payload);
+        this.context.commit("filterStations");
+    };
+    Store.prototype.resetFilters = function () {
+        this.context.commit("resetFilterList");
+        this.context.commit("filterStations");
+    };
+    Store.prototype.initStations = function () {
+        var _this = this;
+        this.context.commit("loadAllStations");
+        this.context.dispatch("fetchStations");
+        setInterval(function () { return _this.context.dispatch("fetchStations"); }, 15000);
+    };
+    Store.prototype.fetchStations = function () {
+        var _this = this;
+        var onlineStationsData;
+        var onlineDispatchersData;
+        var onlineTrainsData;
+        var queryStations = (function () { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, axios_1["default"].get(this.apiURLS.stationDataURL)];
+                    case 1: return [2 /*return*/, (_a.sent()).data.message];
+                }
+            });
+        }); })();
+        var queryTrains = (function () { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, axios_1["default"].get(this.apiURLS.trainDataURL)];
+                    case 1: return [4 /*yield*/, (_a.sent()).data.message];
+                    case 2: return [2 /*return*/, _a.sent()];
+                }
+            });
+        }); })();
+        var queryDisptachers = (function () { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, axios_1["default"].get(this.apiURLS.dispatcherDataURL)];
+                    case 1: return [4 /*yield*/, (_a.sent()).data
+                            .message];
+                    case 2: return [2 /*return*/, _a.sent()];
+                }
+            });
+        }); })();
+        Promise.all([queryStations, queryTrains, queryDisptachers])
+            .then(function (response) {
+            onlineStationsData = response[0];
+            onlineTrainsData = response[1];
+            onlineDispatchersData = response[2];
+            var updatedStations = onlineStationsData
+                .filter(function (station) { return station.region === "eu" && station.isOnline; })
+                .map(function (station) {
+                var stationStatus = onlineDispatchersData.find(function (status) { return status[0] == station.stationHash && status[1] == "eu"; });
+                var statusLabel = "";
+                var statusTimestamp = -1;
+                if (!stationStatus)
+                    statusLabel = "NIEZALOGOWANY";
+                else {
+                    var statusCode = stationStatus[2];
+                    statusTimestamp = stationStatus[3];
+                    statusLabel = "NIEDOSTĘPNY";
+                    switch (statusCode) {
+                        case 0:
+                            if (statusTimestamp - Date.now() > 21000000)
+                                statusLabel = "BEZ LIMITU";
+                            else
+                                statusLabel =
+                                    "DO " +
+                                        new Date(statusTimestamp).toLocaleTimeString("en-US", {
+                                            hour12: false,
+                                            hour: "2-digit",
+                                            minute: "2-digit"
+                                        });
+                            break;
+                        case 1:
+                            statusLabel = "Z/W";
+                            break;
+                        case 2:
+                            if (statusTimestamp == 0)
+                                statusLabel = "KOŃCZY";
+                            break;
+                        case 3:
+                            statusLabel = "BRAK MIEJSCA";
+                            break;
+                        default:
+                            break;
+                    }
+                }
+                var trains = onlineTrainsData.filter(function (train) {
+                    return train.region === "eu" &&
+                        train.isOnline &&
+                        train.station.stationName === station.stationName;
+                });
+                var stationData = stations_json_1["default"].find(function (s) { return s.stationName === station.stationName; }) || { stationName: station.stationName, stationURL: "" };
+                return __assign(__assign({}, stationData), { stationHash: station.stationHash, maxUsers: station.maxUsers, currentUsers: station.currentUsers, spawnString: station.spawnString &&
+                        station.spawnString
+                            .split(";")
+                            .map(function (v) {
+                            return v.split(",")[6] ? v.split(",")[6] : v.split(",")[0];
+                        }), dispatcherName: station.dispatcherName, dispatcherRate: station.dispatcherRate, dispatcherId: station.dispatcherId, dispatcherExp: station.dispatcherExp, occupiedTo: statusLabel, statusTimestamp: statusTimestamp,
+                    trains: trains });
+            });
+            _this.context.commit("updateStations", {
+                updatedStations: updatedStations,
+                trainCount: onlineTrainsData.filter(function (train) { return train.isOnline && train.region === "eu"; }).length
+            });
+            _this.context.commit("filterStations");
+            _this.context.commit("setConnState", ConnState.Connected);
+        })["catch"](function (err) {
+            _this.context.commit("setConnState", ConnState.Error);
+        });
+    };
+    Store.prototype.filterStations = function () {
+        var _this = this;
+        this.filteredStations = this.stations.filter(function (station) {
+            if ((station.nonPublic || !station.reqLevel) && _this.filters["nonPublic"])
+                return false;
+            if (!station.reqLevel || station.reqLevel == "-1")
+                return true;
+            if (station.online &&
+                station.occupiedTo == "KOŃCZY" &&
+                _this.filters["ending"])
+                return false;
+            if (station.online && _this.filters["occupied"])
+                return false;
+            if (!station.online && _this.filters["free"])
+                return false;
+            if (station["default"] && _this.filters["default"])
+                return false;
+            if (!station["default"] && _this.filters["notDefault"])
+                return false;
+            if (station.reqLevel < _this.filters["minLevel"])
+                return false;
+            if (_this.filters["no-1track"] &&
+                (station.routes.oneWay.catenary != 0 ||
+                    station.routes.oneWay.noCatenary != 0))
+                return false;
+            if (_this.filters["no-2track"] &&
+                (station.routes.twoWay.catenary != 0 ||
+                    station.routes.twoWay.noCatenary != 0))
+                return false;
+            if (station.routes.oneWay.catenary < _this.filters["minOneWayCatenary"])
+                return false;
+            if (station.routes.oneWay.noCatenary < _this.filters["minOneWay"])
+                return false;
+            if (station.routes.twoWay.catenary < _this.filters["minTwoWayCatenary"])
+                return false;
+            if (station.routes.twoWay.noCatenary < _this.filters["minTwoWay"])
+                return false;
+            if (_this.filters[station.controlType])
+                return false;
+            if (_this.filters[station.signalType])
+                return false;
+            if (_this.filters["SPK"] && station.controlType.includes("SPK"))
+                return false;
+            if (_this.filters["SCS"] && station.controlType.includes("SCS"))
+                return false;
+            if (_this.filters["mechaniczne"] &&
+                station.controlType.includes("mechaniczne"))
+                return false;
+            if (_this.filters["ręczne"] && station.controlType.includes("ręczne"))
+                return false;
+            return true;
+        });
+    };
+    Store.prototype.loadAllStations = function () {
+        this.stations = stations_json_1["default"].map(function (stationData) { return (__assign({ stationProject: "", spawnString: "", stationHash: "", maxUsers: 0, currentUsers: 0, dispatcherName: "", dispatcherRate: 0, dispatcherExp: -1, dispatcherId: 0, online: false, occupiedTo: "WOLNA", statusTimestamp: 0 }, stationData)); });
+    };
+    Store.prototype.updateStations = function (_a) {
+        var _this = this;
+        var updatedStations = _a.updatedStations, trainCount = _a.trainCount;
+        var _loop_1 = function (i) {
+            var toUpdate = updatedStations.find(function (updated) { return updated.stationName === _this.stations[i].stationName; });
+            if (!toUpdate) {
+                this_1.stations[i].online = false;
+                this_1.stations[i].occupiedTo = "WOLNA";
+                this_1.stations[i].statusTimestamp = -1;
+                this_1.stations[i].dispatcherExp = -1;
+                return "continue";
+            }
+            this_1.stations[i] = __assign(__assign({}, this_1.stations[i]), toUpdate);
+            this_1.stations[i].online = true;
+            updatedStations = updatedStations.filter(function (updated) { return updated.stationName !== _this.stations[i].stationName; });
+        };
+        var this_1 = this;
+        for (var i = 0; i < this.stations.length; i++) {
+            _loop_1(i);
+        }
+        // Dodawanie do listy online potencjalnych scenerii niewpisanych do bazy
+        updatedStations.forEach(function (updated) {
+            var toUpdate = _this.stations.find(function (station) { return station.stationName === updated.stationName; });
+            if (!toUpdate) {
+                _this.stations.push(__assign(__assign({}, updated), { online: true, reqLevel: "-1" }));
+            }
+        });
+        // Aktualizacja liczników
+        this.stationCount = this.stations.filter(function (station) { return station.online; }).length;
+        this.trainCount = trainCount;
+    };
+    Store.prototype.mutateFilter = function (payload) {
+        this.filters[payload.filterName] = payload.value;
+    };
+    Store.prototype.resetFilterList = function () {
+        this.filters = __assign({}, this.filterInitStates);
+    };
+    Store.prototype.setConnState = function (state) {
+        this.connectionState = state;
+    };
+    __decorate([
+        vuex_module_decorators_1.Action
+    ], Store.prototype, "setFilter");
+    __decorate([
+        vuex_module_decorators_1.Action
+    ], Store.prototype, "resetFilters");
+    __decorate([
+        vuex_module_decorators_1.Action
+    ], Store.prototype, "initStations");
+    __decorate([
+        vuex_module_decorators_1.Action
+    ], Store.prototype, "fetchStations");
+    __decorate([
+        vuex_module_decorators_1.Mutation
+    ], Store.prototype, "filterStations");
+    __decorate([
+        vuex_module_decorators_1.Mutation
+    ], Store.prototype, "loadAllStations");
+    __decorate([
+        vuex_module_decorators_1.Mutation
+    ], Store.prototype, "updateStations");
+    __decorate([
+        vuex_module_decorators_1.Mutation
+    ], Store.prototype, "mutateFilter");
+    __decorate([
+        vuex_module_decorators_1.Mutation
+    ], Store.prototype, "resetFilterList");
+    __decorate([
+        vuex_module_decorators_1.Mutation
+    ], Store.prototype, "setConnState");
+    Store = __decorate([
+        vuex_module_decorators_1.Module
+    ], Store);
+    return Store;
+}(vuex_module_decorators_1.VuexModule));
+exports["default"] = Store;

src/store/modules/store.ts

@@ -1,13 +1,13 @@
-import { VuexModule, Module, Mutation, Action } from 'vuex-module-decorators';
+import { VuexModule, Module, Mutation, Action } from "vuex-module-decorators";
-import axios from 'axios';
+import axios from "axios";
-import data from '@/data/stations.json';
+import data from "@/data/stations.json";
 
 import Station from "@/scripts/interfaces/Station";
 
 enum ConnState {
   Loading = 0,
   Error = 1,
-    Connected = 2
+  Connected = 2,
 }
 
 @Module
@@ -20,35 +20,36 @@ class Store extends VuexModule {
   private apiURLS = {
     stationDataURL: "https://api.td2.info.pl:9640/?method=getStationsOnline",
     trainDataURL: "https://api.td2.info.pl:9640/?method=getTrainsOnline",
-        dispatcherDataURL: "https://api.td2.info.pl:9640/?method=readFromSWDR&value=getDispatcherStatusList%3B1"
+    dispatcherDataURL:
-    }
+      "https://api.td2.info.pl:9640/?method=readFromSWDR&value=getDispatcherStatusList%3B1",
+  };
 
   private stations: Station[] = [];
 
   private filteredStations: {}[] = [];
 
   private filterInitStates = {
-        "default": false,
+    default: false,
-        "notDefault": false,
+    notDefault: false,
-        "nonPublic": false,
+    nonPublic: false,
-        "SPK": false,
+    SPK: false,
-        "SCS": false,
+    SCS: false,
-        "ręczne": false,
+    ręczne: false,
-        "mechaniczne": false,
+    mechaniczne: false,
-        "współczesna": false,
+    współczesna: false,
-        "kształtowa": false,
+    kształtowa: false,
-        "historyczna": false,
+    historyczna: false,
-        "mieszana": false,
+    mieszana: false,
-        "minLevel": 0,
+    minLevel: 0,
-        "minOneWayCatenary": 0,
+    minOneWayCatenary: 0,
-        "minOneWay": 0,
+    minOneWay: 0,
-        "minTwoWayCatenary": 0,
+    minTwoWayCatenary: 0,
-        "minTwoWay": 0,
+    minTwoWay: 0,
     "no-1track": false,
     "no-2track": false,
-        "free": true,
+    free: true,
-        "occupied": false,
+    occupied: false,
-        "ending": false
+    ending: false,
   } as const;
 
   private filters: any = { ...this.filterInitStates };
@@ -78,44 +79,48 @@ class Store extends VuexModule {
   }
 
   @Action
-    public setFilter(payload: { filterName: string, value: number | boolean }) {
+  public setFilter(payload: { filterName: string; value: number | boolean }) {
-        this.context.commit('mutateFilter', payload);
+    this.context.commit("mutateFilter", payload);
-        this.context.commit('filterStations');
+    this.context.commit("filterStations");
   }
 
   @Action
   public resetFilters() {
-        this.context.commit('resetFilterList');
+    this.context.commit("resetFilterList");
-        this.context.commit('filterStations');
+    this.context.commit("filterStations");
   }
 
   @Action
   public initStations() {
-        this.context.commit('loadAllStations');
+    this.context.commit("loadAllStations");
-        this.context.dispatch('fetchStations');
+    this.context.dispatch("fetchStations");
 
-        setInterval(() => this.context.dispatch('fetchStations'), 15000);
+    setInterval(() => this.context.dispatch("fetchStations"), 15000);
   }
 
   @Action
   private fetchStations() {
     let onlineStationsData: {
-            stationName: string,
+      stationName: string;
-            stationHash: string,
+      stationHash: string;
-            maxUsers: number,
+      maxUsers: number;
-            currentUsers: number,
+      currentUsers: number;
-            spawnString: string,
+      spawnString: string;
-            dispatcherRate: number,
+      dispatcherRate: number;
-            dispatcherName: string,
+      dispatcherName: string;
-            dispatcherExp: number,
+      dispatcherExp: number;
-            dispatcherId: number,
+      dispatcherId: number;
-            region: string,
+      region: string;
-            isOnline: number
+      isOnline: number;
     }[];
 
     let onlineDispatchersData: [string, string, number, number][];
 
-        let onlineTrainsData: { isOnline: number, region: string, station: { stationName: string } }[];
+    let onlineTrainsData: {
+      isOnline: number;
+      region: string;
+      station: { stationName: string };
+    }[];
 
     const queryStations = (async () => {
       return (await axios.get(this.apiURLS.stationDataURL)).data.message;
@@ -126,23 +131,27 @@ class Store extends VuexModule {
     })();
 
     const queryDisptachers = (async () => {
-            return await (await axios.get(this.apiURLS.dispatcherDataURL)).data.message;
+      return await (await axios.get(this.apiURLS.dispatcherDataURL)).data
+        .message;
     })();
 
     Promise.all([queryStations, queryTrains, queryDisptachers])
-            .then(response => {
+      .then((response) => {
         onlineStationsData = response[0];
         onlineTrainsData = response[1];
         onlineDispatchersData = response[2];
 
-                const updatedStations = onlineStationsData.filter(station => station.region === "eu" && station.isOnline).map(station => {
+        const updatedStations = onlineStationsData
-                    const stationStatus = onlineDispatchersData.find(status => status[0] == station.stationHash && status[1] == "eu");
+          .filter((station) => station.region === "eu" && station.isOnline)
+          .map((station) => {
+            const stationStatus = onlineDispatchersData.find(
+              (status) => status[0] == station.stationHash && status[1] == "eu"
+            );
 
             let statusLabel = "";
             let statusTimestamp = -1;
 
-                    if (!stationStatus)
+            if (!stationStatus) statusLabel = "NIEZALOGOWANY";
-                        statusLabel = "NIEZALOGOWANY";
             else {
               let statusCode = stationStatus[2];
               statusTimestamp = stationStatus[3];
@@ -154,9 +163,13 @@ class Store extends VuexModule {
                   if (statusTimestamp - Date.now() > 21000000)
                     statusLabel = "BEZ LIMITU";
                   else
-                                    statusLabel = "DO " + new Date(statusTimestamp)
+                    statusLabel =
-                                        .toLocaleTimeString('en-US',
+                      "DO " +
-                                            { hour12: false, hour: '2-digit', minute: '2-digit' });
+                      new Date(statusTimestamp).toLocaleTimeString("en-US", {
+                        hour12: false,
+                        hour: "2-digit",
+                        minute: "2-digit",
+                      });
                   break;
 
                 case 1:
@@ -164,12 +177,11 @@ class Store extends VuexModule {
                   break;
 
                 case 2:
-                                if (statusTimestamp == 0)
+                  if (statusTimestamp == 0) statusLabel = "KOŃCZY";
-                                    statusLabel = "KOŃCZY";
                   break;
 
                 case 3:
-                                statusLabel = "BRAK MIEJSCA"
+                  statusLabel = "BRAK MIEJSCA";
                   break;
 
                 default:
@@ -177,81 +189,120 @@ class Store extends VuexModule {
               }
             }
 
-                    const trains = onlineTrainsData.filter((train) =>
+            const trains = onlineTrainsData.filter(
-                        train.region === 'eu' && train.isOnline && train.station.stationName === station.stationName)
+              (train) =>
+                train.region === "eu" &&
+                train.isOnline &&
+                train.station.stationName === station.stationName
+            );
 
-                    const stationData = data.find(s => s.stationName === station.stationName) || { stationName: station.stationName, stationURL: "" }
+            const stationData = data.find(
+              (s) => s.stationName === station.stationName
+            ) || { stationName: station.stationName, stationURL: "" };
 
             return {
               ...stationData,
               stationHash: station.stationHash,
               maxUsers: station.maxUsers,
               currentUsers: station.currentUsers,
-                        spawnString: station.spawnString && station.spawnString.split(';')
+              spawnString:
-                            .map(v => v.split(',')[6] ? v.split(',')[6] : v.split(',')[0]),
+                station.spawnString &&
+                station.spawnString
+                  .split(";")
+                  .map((v) =>
+                    v.split(",")[6] ? v.split(",")[6] : v.split(",")[0]
+                  ),
               dispatcherName: station.dispatcherName,
               dispatcherRate: station.dispatcherRate,
               dispatcherId: station.dispatcherId,
               dispatcherExp: station.dispatcherExp,
               occupiedTo: statusLabel,
               statusTimestamp,
-                        trains
+              trains,
-                    }
+            };
           });
 
-                this.context.commit('updateStations', {
+        this.context.commit("updateStations", {
           updatedStations,
-                    trainCount: onlineTrainsData.filter((train) => train.isOnline && train.region === 'eu').length
+          trainCount: onlineTrainsData.filter(
+            (train) => train.isOnline && train.region === "eu"
+          ).length,
         });
 
-                this.context.commit('filterStations');
+        this.context.commit("filterStations");
-                this.context.commit('setConnState', ConnState.Connected);
+        this.context.commit("setConnState", ConnState.Connected);
       })
-            .catch(err => {
+      .catch((err) => {
-                this.context.commit('setConnState', ConnState.Error);
+        this.context.commit("setConnState", ConnState.Error);
       });
   }
 
   @Mutation
   private filterStations() {
-        this.filteredStations = this.stations.filter(station => {
+    this.filteredStations = this.stations.filter((station) => {
-            if ((station.nonPublic || !station.reqLevel) && this.filters['nonPublic']) return false;
+      if ((station.nonPublic || !station.reqLevel) && this.filters["nonPublic"])
+        return false;
       if (!station.reqLevel || station.reqLevel == "-1") return true;
 
-            if (station.online && station.occupiedTo == "KOŃCZY" && this.filters['ending']) return false;
+      if (
-            if (station.online && this.filters['occupied']) return false;
+        station.online &&
-            if (!station.online && this.filters['free']) return false;
+        station.occupiedTo == "KOŃCZY" &&
+        this.filters["ending"]
+      )
+        return false;
+      if (station.online && this.filters["occupied"]) return false;
+      if (!station.online && this.filters["free"]) return false;
 
-            if (station.default && this.filters['default']) return false;
+      if (station.default && this.filters["default"]) return false;
-            if (!station.default && this.filters['notDefault']) return false;
+      if (!station.default && this.filters["notDefault"]) return false;
 
-            if (station.reqLevel < this.filters['minLevel']) return false;
+      if (station.reqLevel < this.filters["minLevel"]) return false;
 
-            if (this.filters["no-1track"] && (station.routes.oneWay.catenary != 0 || station.routes.oneWay.noCatenary != 0)) return false;
+      if (
-            if (this.filters["no-2track"] && (station.routes.twoWay.catenary != 0 || station.routes.twoWay.noCatenary != 0)) return false;
+        this.filters["no-1track"] &&
+        (station.routes.oneWay.catenary != 0 ||
+          station.routes.oneWay.noCatenary != 0)
+      )
+        return false;
+      if (
+        this.filters["no-2track"] &&
+        (station.routes.twoWay.catenary != 0 ||
+          station.routes.twoWay.noCatenary != 0)
+      )
+        return false;
 
-            if (station.routes.oneWay.catenary < this.filters['minOneWayCatenary']) return false;
+      if (station.routes.oneWay.catenary < this.filters["minOneWayCatenary"])
-            if (station.routes.oneWay.noCatenary < this.filters['minOneWay']) return false;
+        return false;
+      if (station.routes.oneWay.noCatenary < this.filters["minOneWay"])
+        return false;
 
-            if (station.routes.twoWay.catenary < this.filters['minTwoWayCatenary']) return false;
+      if (station.routes.twoWay.catenary < this.filters["minTwoWayCatenary"])
-            if (station.routes.twoWay.noCatenary < this.filters['minTwoWay']) return false;
+        return false;
+      if (station.routes.twoWay.noCatenary < this.filters["minTwoWay"])
+        return false;
 
       if (this.filters[station.controlType]) return false;
       if (this.filters[station.signalType]) return false;
 
-
+      if (this.filters["SPK"] && station.controlType.includes("SPK"))
-            if (this.filters["SPK"] && station.controlType.includes("SPK")) return false;
+        return false;
-            if (this.filters["SCS"] && station.controlType.includes("SCS")) return false;
+      if (this.filters["SCS"] && station.controlType.includes("SCS"))
-            if (this.filters["mechaniczne"] && station.controlType.includes("mechaniczne")) return false;
+        return false;
-            if (this.filters["ręczne"] && station.controlType.includes("ręczne")) return false;
+      if (
+        this.filters["mechaniczne"] &&
+        station.controlType.includes("mechaniczne")
+      )
+        return false;
+      if (this.filters["ręczne"] && station.controlType.includes("ręczne"))
+        return false;
 
       return true;
-        })
+    });
   }
 
   @Mutation
   private loadAllStations() {
-        this.stations = data.map(stationData => ({
+    this.stations = data.map((stationData) => ({
       stationProject: "",
       spawnString: "",
       stationHash: "",
@@ -265,13 +316,15 @@ class Store extends VuexModule {
       occupiedTo: "WOLNA",
       statusTimestamp: 0,
       ...stationData,
-        }))
+    }));
   }
 
   @Mutation
   private updateStations({ updatedStations, trainCount }) {
     for (let i = 0; i < this.stations.length; i++) {
-            const toUpdate: any = updatedStations.find((updated: any) => updated.stationName === this.stations[i].stationName);
+      const toUpdate: any = updatedStations.find(
+        (updated: any) => updated.stationName === this.stations[i].stationName
+      );
 
       if (!toUpdate) {
         this.stations[i].online = false;
@@ -281,28 +334,37 @@ class Store extends VuexModule {
         continue;
       }
 
-            this.stations[i] = { ...this.stations[i], ...toUpdate }
+      this.stations[i] = { ...this.stations[i], ...toUpdate };
       this.stations[i].online = true;
 
-            updatedStations = updatedStations.filter((updated: any) => updated.stationName !== this.stations[i].stationName);
+      updatedStations = updatedStations.filter(
+        (updated: any) => updated.stationName !== this.stations[i].stationName
+      );
     }
 
     // Dodawanie do listy online potencjalnych scenerii niewpisanych do bazy
     updatedStations.forEach((updated: any) => {
-            const toUpdate: any = this.stations.find(station => station.stationName === updated.stationName);
+      const toUpdate: any = this.stations.find(
+        (station) => station.stationName === updated.stationName
+      );
 
       if (!toUpdate) {
         this.stations.push({ ...updated, online: true, reqLevel: "-1" });
       }
-        })
+    });
 
     // Aktualizacja liczników
-        this.stationCount = this.stations.filter(station => station.online).length;
+    this.stationCount = this.stations.filter(
+      (station) => station.online
+    ).length;
     this.trainCount = trainCount;
   }
 
   @Mutation
-    private mutateFilter(payload: { filterName: string, value: number | boolean }) {
+  private mutateFilter(payload: {
+    filterName: string;
+    value: number | boolean;
+  }) {
     this.filters[payload.filterName] = payload.value;
   }
 

src/views/StationsView.vue

@@ -24,7 +24,7 @@
 
 <script lang="ts">
 import { Vue, Component } from "vue-property-decorator";
-import { Getter } from "vuex-class";
+import { Getter, Action } from "vuex-class";
 
 import Station from "@/scripts/interfaces/Station";
 
@@ -36,6 +36,7 @@ import StationCard from "@/components/StationsView/StationCard.vue";
 import Options from "@/components/StationsView/Options.vue";
 
 import db from "@/scripts/firebase/firebaseInit";
+import inputData from "@/data/options.json";
 
 enum ConnState {
   Loading = 0,
@@ -54,10 +55,51 @@ enum ConnState {
 })
 export default class StationsView extends Vue {
   focusedStationName: string = "";
+  inputs = { ...inputData };
+  STORAGE_KEY: string = "options_saved";
 
   @Getter("getStations") stations!: Station[];
   @Getter("getConnectionState") connectionState!: ConnState;
 
+  @Action("setFilter") setFilter;
+
+  mounted() {
+    const storage = window.localStorage;
+
+    if (storage.getItem(this.STORAGE_KEY) !== "true") return;
+
+    this.inputs.options.forEach((input) => {
+      if (storage.getItem(input.name) === "true") {
+        this.setFilter({
+          filterName: input.name,
+          value: false,
+        });
+
+        input.value = true;
+      } else if (storage.getItem(input.name) === "false") {
+        this.setFilter({
+          filterName: input.name,
+          value: true,
+        });
+
+        input.value = false;
+      }
+    });
+
+    this.inputs.sliders.forEach((slider) => {
+      const value = parseInt(
+        window.localStorage.getItem(slider.name) as string
+      );
+
+      this.setFilter({
+        filterName: slider.name,
+        value,
+      });
+
+      slider.value = value;
+    });
+  }
+
   closeCard() {
     this.focusedStationName = "";
   }