Feat: Add URL filtering to the remaining filters

- Add URL filtering to the remaining filters
- Remove the required `filter=true` parameter
- Use vue-router instead of `URL`

src/components/MonitorList.vue

@@ -204,30 +204,53 @@ export default {
             }
         },
     },
-    mounted() {
+    async mounted() {
         window.addEventListener("scroll", this.onScroll);
 
-        const url = new URL(location.href);
+        const statusParams = this.$router.currentRoute.value.query["status"];
-        const params = url.searchParams;
+        const activeParams = this.$router.currentRoute.value.query["active"];
-        const filterParam = params.get("filter");
+        const tagParams = this.$router.currentRoute.value.query["tags"];
-        const statusParams = params.getAll("status");
 
-        if (filterParam !== "true") {
+        const statusStates = {
-            return;
-        }
-
-        const states = {
             up: 1,
             down: 0,
             pending: 2,
             maintenance: 3,
         };
 
+        const activeStates = {
+            running: true,
+            paused: false,
+        };
+
+        const tags = await (() => {
+            return new Promise((resolve) => {
+                this.$root.getSocket().emit("getTags", (res) => {
+                    if (res.ok) {
+                        resolve(res.tags);
+                    }
+                });
+            });
+        })();
+
+        const fetchedTagIDs = tagParams
+            .split(",")
+            .map(identifier => {
+                const tagID = parseInt(identifier, 10);
+                return tags
+                    .find(t => t.name === identifier || t.id === tagID)
+                    ?.id ?? 0;
+            });
+
         this.updateFilter({
             ...this.filterState,
-            status: statusParams.map(
+            status: statusParams ? statusParams.split(",").map(
-                status => states[status]
+                status => statusStates[status.trim()]
-            ),
+            ) : this.filterState["status"],
+            active: activeParams ? activeParams.split(",").map(
+                active => activeStates[active.trim()]
+            ) : this.filterState["active"],
+            tags: tagParams ? fetchedTagIDs : this.filterState["tags"],
         });
     },
     beforeUnmount() {