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`
This commit is contained in:
NihadBadalov 2024-02-15 21:18:49 +01:00
parent 091dc06839
commit f38da99c11

View file

@ -204,30 +204,53 @@ export default {
} }
}, },
}, },
mounted() { async mounted() {
window.addEventListener("scroll", this.onScroll); 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, up: 1,
down: 0, down: 0,
pending: 2, pending: 2,
maintenance: 3, 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.updateFilter({
...this.filterState, ...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() { beforeUnmount() {