Synchronizacja danych z API przez websockety

package-lock.json

@@ -1,16 +1,17 @@
 {
   "name": "stacjownik",
-  "version": "1.4.8",
+  "version": "1.5.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "1.4.8",
+      "version": "1.5.8",
       "dependencies": {
         "core-js": "^3.12.1",
         "dotenv": "^8.6.0",
         "firestore": "^1.1.6",
         "howler": "^2.2.1",
+        "socket.io-client": "^4.4.1",
         "vue": "^3.1.2",
         "vue-class-component": "^7.2.6",
         "vue-i18n": "^9.1.6",
@@ -1405,6 +1406,19 @@
         "node": ">= 6"
       }
     },
+    "node_modules/@socket.io/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.0.0.tgz",
+      "integrity": "sha512-2pTGuibAXJswAPJjaKisthqS/NOK5ypG4LYT6tEAV0S/mxW0zOIvYvGK0V8w8+SHxAm6vRMSjqSalFXeBAqs+Q=="
+    },
     "node_modules/@soda/friendly-errors-webpack-plugin": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.0.tgz",
@@ -3156,6 +3170,11 @@
         "object.assign": "^4.1.0"
       }
     },
+    "node_modules/backo2": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
+      "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
+    },
     "node_modules/balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -5109,13 +5128,19 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.1.1",
+      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "deprecated": "Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)",
-      "dev": true,
       "dependencies": {
-        "ms": "^2.1.1"
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
       }
     },
     "node_modules/decamelize": {
@@ -5746,6 +5771,53 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/engine.io-client": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.1.1.tgz",
+      "integrity": "sha512-V05mmDo4gjimYW+FGujoGmmmxRaDsrVr7AXA3ZIfa04MWM1jOfZfUwou0oNqhNwy/votUDvGDt4JA4QF4e0b4g==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.0.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.0",
+        "has-cors": "1.1.0",
+        "parseqs": "0.0.6",
+        "parseuri": "0.0.6",
+        "ws": "~8.2.3",
+        "xmlhttprequest-ssl": "~2.0.0",
+        "yeast": "0.1.2"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/ws": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+      "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.3.tgz",
+      "integrity": "sha512-BtQxwF27XUNnSafQLvDi0dQ8s3i6VgzSoQMJacpIcGNrlUdfHSKbgm3jmjCVvQluGzqwujQMPAoMai3oYSTurg==",
+      "dependencies": {
+        "@socket.io/base64-arraybuffer": "~1.0.2"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.2.0.tgz",
@@ -6925,6 +6997,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/has-cors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
+      "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
+    },
     "node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -8872,8 +8949,7 @@
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-      "dev": true
     },
     "node_modules/multicast-dns": {
       "version": "6.2.3",
@@ -9532,6 +9608,16 @@
       "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==",
       "dev": true
     },
+    "node_modules/parseqs": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz",
+      "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w=="
+    },
+    "node_modules/parseuri": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz",
+      "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow=="
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -11669,6 +11755,34 @@
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
       "dev": true
     },
+    "node_modules/socket.io-client": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.4.1.tgz",
+      "integrity": "sha512-N5C/L5fLNha5Ojd7Yeb/puKcPWWcoB/A09fEjjNsg91EDVr5twk/OEyO6VT9dlLSUNY85NpW6KBhVMvaLKQ3vQ==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.0.0",
+        "backo2": "~1.0.2",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.1.1",
+        "parseuri": "0.0.6",
+        "socket.io-parser": "~4.1.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.1.2.tgz",
+      "integrity": "sha512-j3kk71QLJuyQ/hh5F/L2t1goqzdTL0gvDzuhTuNSwihfuFUrcSji0qFZmJJPtG6Rmug153eOPsUizeirf1IIog==",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.0.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/sockjs": {
       "version": "0.3.21",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.21.tgz",
@@ -14129,6 +14243,14 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -14229,6 +14351,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/yeast": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
+      "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
+    },
     "node_modules/yorkie": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/yorkie/-/yorkie-2.0.0.tgz",
@@ -15445,6 +15572,16 @@
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
+    "@socket.io/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ=="
+    },
+    "@socket.io/component-emitter": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.0.0.tgz",
+      "integrity": "sha512-2pTGuibAXJswAPJjaKisthqS/NOK5ypG4LYT6tEAV0S/mxW0zOIvYvGK0V8w8+SHxAm6vRMSjqSalFXeBAqs+Q=="
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.0.tgz",
@@ -16915,6 +17052,11 @@
         "object.assign": "^4.1.0"
       }
     },
+    "backo2": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
+      "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -18532,12 +18674,11 @@
       }
     },
     "debug": {
-      "version": "4.1.1",
+      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-      "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "dev": true,
       "requires": {
-        "ms": "^2.1.1"
+        "ms": "2.1.2"
       }
     },
     "decamelize": {
@@ -19057,6 +19198,38 @@
         "once": "^1.4.0"
       }
     },
+    "engine.io-client": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.1.1.tgz",
+      "integrity": "sha512-V05mmDo4gjimYW+FGujoGmmmxRaDsrVr7AXA3ZIfa04MWM1jOfZfUwou0oNqhNwy/votUDvGDt4JA4QF4e0b4g==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.0.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.0.0",
+        "has-cors": "1.1.0",
+        "parseqs": "0.0.6",
+        "parseuri": "0.0.6",
+        "ws": "~8.2.3",
+        "xmlhttprequest-ssl": "~2.0.0",
+        "yeast": "0.1.2"
+      },
+      "dependencies": {
+        "ws": {
+          "version": "8.2.3",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+          "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
+          "requires": {}
+        }
+      }
+    },
+    "engine.io-parser": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.3.tgz",
+      "integrity": "sha512-BtQxwF27XUNnSafQLvDi0dQ8s3i6VgzSoQMJacpIcGNrlUdfHSKbgm3jmjCVvQluGzqwujQMPAoMai3oYSTurg==",
+      "requires": {
+        "@socket.io/base64-arraybuffer": "~1.0.2"
+      }
+    },
     "enhanced-resolve": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.2.0.tgz",
@@ -20012,6 +20185,11 @@
       "integrity": "sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==",
       "dev": true
     },
+    "has-cors": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
+      "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
+    },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -21559,8 +21737,7 @@
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-      "dev": true
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -22098,6 +22275,16 @@
         }
       }
     },
+    "parseqs": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz",
+      "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w=="
+    },
+    "parseuri": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz",
+      "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow=="
+    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -23882,6 +24069,28 @@
         }
       }
     },
+    "socket.io-client": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.4.1.tgz",
+      "integrity": "sha512-N5C/L5fLNha5Ojd7Yeb/puKcPWWcoB/A09fEjjNsg91EDVr5twk/OEyO6VT9dlLSUNY85NpW6KBhVMvaLKQ3vQ==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.0.0",
+        "backo2": "~1.0.2",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.1.1",
+        "parseuri": "0.0.6",
+        "socket.io-parser": "~4.1.1"
+      }
+    },
+    "socket.io-parser": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.1.2.tgz",
+      "integrity": "sha512-j3kk71QLJuyQ/hh5F/L2t1goqzdTL0gvDzuhTuNSwihfuFUrcSji0qFZmJJPtG6Rmug153eOPsUizeirf1IIog==",
+      "requires": {
+        "@socket.io/component-emitter": "~3.0.0",
+        "debug": "~4.3.1"
+      }
+    },
     "sockjs": {
       "version": "0.3.21",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.21.tgz",
@@ -25884,6 +26093,11 @@
         "async-limiter": "~1.0.0"
       }
     },
+    "xmlhttprequest-ssl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+      "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -25965,6 +26179,11 @@
       "integrity": "sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==",
       "dev": true
     },
+    "yeast": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
+      "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
+    },
     "yorkie": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/yorkie/-/yorkie-2.0.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "dotenv": "^8.6.0",
     "firestore": "^1.1.6",
     "howler": "^2.2.1",
+    "socket.io-client": "^4.4.1",
     "vue": "^3.1.2",
     "vue-class-component": "^7.2.6",
     "vue-i18n": "^9.1.6",
@@ -25,11 +26,11 @@
     "@vue/cli-plugin-typescript": "~4.4.0",
     "@vue/cli-plugin-vuex": "~4.4.0",
     "@vue/cli-service": "^4.5.13",
+    "@vue/compiler-sfc": "^3.1.0",
     "axios": "^0.21.1",
     "sass": "^1.32.13",
     "sass-loader": "^8.0.2",
     "typescript": "~4.1.5",
-    "@vue/compiler-sfc": "^3.1.0",
     "vuex-class": "^0.3.2",
     "vuex-module-decorators": "^0.17.0"
   },
@@ -38,4 +39,4 @@
     "last 2 versions",
     "not dead"
   ]
-}
+}

src/components/TrainsView/TrainFilters.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="train-filters">
+      <span v-for="category in availableCategories" :key="category">
+          {{ category }}
+      </span>
+  </div>
+</template>
+
+<script lang="ts">
+import Train from '@/scripts/interfaces/Train';
+import { computed, defineComponent, inject, TrainFilter } from 'vue';
+
+const defaultFilters: TrainFilter[] = [
+    {
+        id: "comments",
+        isActive: true
+    },
+    {
+        id: "twr",
+        isActive: true
+    },
+    {
+        id: "skr",
+        isActive: true
+    }
+] 
+
+export default defineComponent({
+  props: {
+      trainList: {
+          type: Object as () => Train[],
+          required: true
+      }
+  },
+  
+  setup(props) {
+    const filters = inject('filtersActive') as TrainFilter[];
+    const trainList = props.trainList;
+    
+
+    // Setup default train filters
+    filters.push(...defaultFilters);
+
+    const availableCategories = computed(() => trainList.reduce((acc, train) => {
+        if(!train.timetableData) return acc;
+        if(acc.includes(train.timetableData.category)) return acc;
+
+        acc.push(train.timetableData.category);
+        return acc;
+    }, [] as string[]));
+    
+    
+    // Remove unavailable train categories
+    for(let filter of filters) {
+        if(availableCategories.value.includes(filter.id)) continue;
+        
+        filters.slice(filters.indexOf(filter), -1);
+    }
+
+    return {
+        availableCategories
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>

src/main.ts

@@ -1,13 +1,13 @@
-import { createApp, Directive, ref } from 'vue'
+import { createApp, Directive } from 'vue'
 import App from './App.vue'
 import router from './router'
-import { store, key } from './store'
 
 import enLang from '@/locales/en.json';
 import plLang from '@/locales/pl.json';
 
 import { createI18n } from 'vue-i18n'
 
+
 const i18n = createI18n({
   locale: 'pl',
   fallbackLocale: 'pl',
@@ -18,6 +18,7 @@ const i18n = createI18n({
   enableLegacy: false,
 })
 
+
 const clickOutsideDirective: Directive = {
   mounted(el, binding) {
 
@@ -32,9 +33,7 @@ const clickOutsideDirective: Directive = {
 }
 
 createApp(App)
-  .use(store, key)
   .use(router)
   .use(i18n)
-  .provide('isFilterCardVisible', ref(false))
   .directive('click-outside', clickOutsideDirective)
   .mount('#app')

src/scripts/managers/trainFilterManager.ts

@@ -0,0 +1,112 @@
+import { TrainFilter } from "vue";
+import Train from "../interfaces/Train";
+import TrainStop from "../interfaces/TrainStop";
+
+function confirmedPercentage(stops: TrainStop[] | undefined) {
+    if (!stops) return -1;
+
+    return Number(((stops.filter((stop) => stop.confirmed).length / stops.length) * 100).toFixed(0));
+};
+
+function currentDelay(stops: TrainStop[] | undefined) {
+    if (!stops) return -Infinity;
+
+    const delay =
+        stops.find((stop, i) => (i == 0 && !stop.confirmed) || (i > 0 && stops[i - 1].confirmed && !stop.confirmed))
+            ?.departureDelay || 0;
+
+    return delay;
+};
+
+function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriver: string, filters: TrainFilter[]) {
+    console.log(filters);
+    
+    return trainList.filter(
+        (train) =>
+            (searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
+            (searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true)
+    );
+}
+
+function sortTrainList(trainList: Train[], sorterActive: { id: string; dir: number }) {
+    return trainList.sort((a: Train, b: Train) => {
+        switch (sorterActive.id) {
+            case 'mass':
+                if (a.mass > b.mass) return sorterActive.dir;
+                return -sorterActive.dir;
+
+            case 'distance':
+                if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
+
+                return -sorterActive.dir;
+
+            case 'progress':
+                if (confirmedPercentage(a.timetableData?.followingStops) > confirmedPercentage(b.timetableData?.followingStops))
+                    return sorterActive.dir;
+
+                return -sorterActive.dir;
+
+            case 'delay':
+                if (currentDelay(a.timetableData?.followingStops) > currentDelay(b.timetableData?.followingStops))
+                    return sorterActive.dir;
+
+                return -sorterActive.dir;
+
+            case 'speed':
+                if (a.speed > b.speed) return sorterActive.dir;
+                return -sorterActive.dir;
+
+            case 'timetable':
+                if (a.trainNo > b.trainNo) return sorterActive.dir;
+                return -sorterActive.dir;
+
+            case 'length':
+                if (a.length > b.length) return sorterActive.dir;
+                return -sorterActive.dir;
+
+            default:
+                break;
+        }
+
+        return 0;
+    });
+}
+
+export function filteredTrainList(
+    trainList: Train[],
+    searchedTrain: string,
+    searchedDriver: string,
+    sorterActive: { id: string; dir: number },
+    filters: TrainFilter[]
+) {
+    let finalTrainList: Train[] = [];
+
+    const filtered = filterTrainList(trainList, searchedTrain, searchedDriver, filters);
+
+    switch (sorterActive.id) {
+        case 'comments':
+            const trainsSortedByComments = filtered
+                .sort((a, b) => {
+                    const commentsA = a.timetableData?.followingStops.some((s) => s.comments) ? 1 : 0;
+                    const commentsB = b.timetableData?.followingStops.some((s) => s.comments) ? 1 : 0;
+
+                    return commentsB - commentsA;
+                });
+
+            const trainsWithComments = trainsSortedByComments.filter((train) =>
+                train.timetableData?.followingStops.some((s) => s.comments)
+            );
+
+            const trainsWithoutComments = trainsSortedByComments.slice(trainsWithComments.length);
+
+            finalTrainList.push(...trainsWithComments);
+            finalTrainList.push(...sortTrainList(trainsWithoutComments, sorterActive));
+            break;
+
+        default:
+            finalTrainList.push(...sortTrainList(filtered, sorterActive));
+            break;
+    }
+
+    return finalTrainList;
+};

src/store/index.ts

@@ -20,14 +20,17 @@ import { getLocoURL, getScheduledTrain, getStatusID, getStatusTimestamp, parseSp
 import { URLs } from '@/scripts/utils/apiURLs';
 import ScheduledTrain from '@/scripts/interfaces/ScheduledTrain';
 import StationRoutes from '@/scripts/interfaces/StationRoutes';
-import StorageManager from '@/scripts/managers/storageManager';
+import { connect } from 'socket.io-client';
+
+// Websocket config
+const socket = connect(process.env.NODE_ENV === 'production' ? URLs.stacjownikAPI : URLs.stacjownikAPIDev)
+socket.emit('connection');
 
 export interface State {
   stationList: Station[],
   trainList: Train[],
 
   lastDispatcherStatuses: { hash: string; statusTimestamp: number; statusID: string; }[],
-  // timetableList: Timetable[],
 
   sceneryData: any[][],
 
@@ -119,9 +122,12 @@ export const store = createStore<State>({
       if (state.listenerLaunched) return;
 
       await dispatch(ACTIONS.loadStaticStationData);
-      dispatch(ACTIONS.fetchOnlineData);
 
-      setInterval(() => dispatch(ACTIONS.fetchOnlineData), Math.floor(Math.random() * 5000) + 25000);
+      socket.on('DATA_UPDATE', () => {        
+        dispatch(ACTIONS.fetchOnlineData);
+      });
+
+      // setInterval(() => dispatch(ACTIONS.fetchOnlineData), Math.floor(Math.random() * 5000) + 25000);
     },
 
     async loadStaticStationData({ commit }) {

src/views/TrainsView.vue

@@ -13,9 +13,9 @@
 </template>
 
 <script lang="ts">
-import { computed, ComputedRef, defineComponent, provide, reactive, ref } from 'vue';
+import { computed, ComputedRef, defineComponent, provide, reactive, ref, TrainFilter } from 'vue';
+import { filteredTrainList } from "@/scripts/managers/trainFilterManager";
 
-import { DataStatus } from '@/scripts/enums/DataStatus';
 import Train from '@/scripts/interfaces/Train';
 
 import TrainTable from '@/components/TrainsView/TrainTable.vue';
@@ -24,114 +24,7 @@ import TrainOptions from '@/components/TrainsView/TrainOptions.vue';
 
 import { useStore } from '@/store';
 import { GETTERS } from '@/constants/storeConstants';
-import TrainStop from '@/scripts/interfaces/TrainStop';
 
-const confirmedPercentage = (stops: TrainStop[] | undefined) => {
-  if (!stops) return -1;
-
-  return Number(((stops.filter((stop) => stop.confirmed).length / stops.length) * 100).toFixed(0));
-};
-
-const currentDelay = (stops: TrainStop[] | undefined) => {
-  if (!stops) return -Infinity;
-
-  const delay =
-    stops.find((stop, i) => (i == 0 && !stop.confirmed) || (i > 0 && stops[i - 1].confirmed && !stop.confirmed))
-      ?.departureDelay || 0;
-
-  return delay;
-};
-
-function filterTrainList(trainList: Train[], searchedTrain: string, searchedDriver: string) {
-  return trainList.filter(
-    (train) =>
-      (searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
-      (searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true)
-  );
-}
-
-function sortTrainList(trainList: Train[], sorterActive: { id: string; dir: number }) {
-  return trainList.sort((a: Train, b: Train) => {
-    switch (sorterActive.id) {
-      case 'mass':
-        if (a.mass > b.mass) return sorterActive.dir;
-        return -sorterActive.dir;
-
-      case 'distance':
-        if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
-
-        return -sorterActive.dir;
-
-      case 'progress':
-        if (confirmedPercentage(a.timetableData?.followingStops) > confirmedPercentage(b.timetableData?.followingStops))
-          return sorterActive.dir;
-
-        return -sorterActive.dir;
-
-      case 'delay':
-        if (currentDelay(a.timetableData?.followingStops) > currentDelay(b.timetableData?.followingStops))
-          return sorterActive.dir;
-
-        return -sorterActive.dir;
-
-      case 'speed':
-        if (a.speed > b.speed) return sorterActive.dir;
-        return -sorterActive.dir;
-
-      case 'timetable':
-        if (a.trainNo > b.trainNo) return sorterActive.dir;
-        return -sorterActive.dir;
-
-      case 'length':
-        if (a.length > b.length) return sorterActive.dir;
-        return -sorterActive.dir;
-
-      default:
-        break;
-    }
-
-    return 0;
-  });
-}
-
-const filteredTrainList = (
-  trainList: Train[],
-  searchedTrain: string,
-  searchedDriver: string,
-  sorterActive: { id: string; dir: number },
-  priorityProp: string
-) => {
-  let finalTrainList: Train[] = [];
-
-  const filtered = filterTrainList(trainList, searchedTrain, searchedDriver);
-
-  switch (sorterActive.id) {
-    case 'comments':
-      const trainsSortedByComments = filtered
-        .sort((a, b) => {
-          const commentsA = a.timetableData?.followingStops.some((s) => s.comments) ? 1 : 0;
-          const commentsB = b.timetableData?.followingStops.some((s) => s.comments) ? 1 : 0;
-
-          return commentsB - commentsA;
-        });
-
-      const trainsWithComments = trainsSortedByComments.filter((train) =>
-        train.timetableData?.followingStops.some((s) => s.comments)
-      );
-
-      const trainsWithoutComments = trainsSortedByComments.slice(trainsWithComments.length);
-
-      finalTrainList.push(...trainsWithComments);
-      finalTrainList.push(...sortTrainList(trainsWithoutComments, sorterActive));
-      break;
-
-    default:
-      finalTrainList.push(...sortTrainList(filtered, sorterActive));
-      break;
-  }
-
-  return finalTrainList;
-};
 
 export default defineComponent({
   components: {
@@ -155,13 +48,15 @@ export default defineComponent({
     // const timetableDataStatus: ComputedRef<DataStatus> = computed(() => store.getters[GETTERS.timetableDataStatus]);
 
     const sorterActive = ref({ id: 'distance', dir: -1 });
+    const filtersActive = reactive([]) as TrainFilter[];
+
     const searchedDriver = ref('');
     const searchedTrain = ref('');
-    const priorityProp = ref('');
 
     provide('searchedTrain', searchedTrain);
     provide('searchedDriver', searchedDriver);
     provide('sorterActive', sorterActive);
+    provide('filtersActive', filtersActive);
 
     const computedTrains: ComputedRef<Train[]> = computed(() => {
       return filteredTrainList(
@@ -169,7 +64,7 @@ export default defineComponent({
         searchedTrain.value,
         searchedDriver.value,
         sorterActive.value,
-        priorityProp.value
+        filtersActive
       );
     });
 

src/vuex.d.ts

@@ -11,4 +11,10 @@ declare module '@vue/runtime-core' {
   interface ComponentCustomProperties {
     $store: Store<State>
   }
+
+  // Train filter for TrainView
+  interface TrainFilter {
+    id: string;
+    isActive: boolean;
+  }
 }