Added searching for all relevant data types
This commit is contained in:
parent
4df0a804b3
commit
a8cf583569
GPG key ID:
0989A73D8C421174
39 changed files with 1159 additions and 233 deletions
|
|
@ -63,7 +63,7 @@ const commonTemplates = async () => {
|
|||
]);
|
||||
} else {
|
||||
template.apply("navbar-section-right").values([
|
||||
{ item: "login", title: "Login" }
|
||||
{ item: "login", title: "Login / Create Account" }
|
||||
]);
|
||||
}
|
||||
};
|
||||
|
|
@ -96,7 +96,7 @@ const connectNavbar = () => {
|
|||
window.location.href = "/login";
|
||||
});
|
||||
} else if (item.dataset.pageName === "profile") {
|
||||
item.addEventListener("click", (clickEvent) => window.location.href = `/profile/${session.id}`);
|
||||
item.addEventListener("click", (clickEvent) => window.location.href = `/user/${session.id}`);
|
||||
} else {
|
||||
item.addEventListener("click", (clickEvent) => window.location.href = `/${item.dataset.pageName}`);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@ window.addEventListener("load", async (loadEvent) => {
|
|||
const data = response.data;
|
||||
if (response.status === 201) {
|
||||
session = data;
|
||||
window.location.href = "/";
|
||||
window.location.href = `/user/${session.id}`;
|
||||
} else if (response.status === 500) {
|
||||
raiseError([], "Internal server error :(");
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,10 @@ const saveTemplate = () => {
|
|||
const loadAchievementSearch = () => {
|
||||
const loading = document.querySelector("#loading-results");
|
||||
|
||||
const personal = document.querySelector("#personal-filters");
|
||||
if (!session) {
|
||||
personal.style.display = 'none';
|
||||
}
|
||||
|
||||
const searchButton = document.querySelector("#achievement-search-button");
|
||||
const searchField = document.querySelector("#achievement-search-field" );
|
||||
|
|
@ -22,23 +26,26 @@ const loadAchievementSearch = () => {
|
|||
const minQuality = document.querySelector("#min-quality-filter" );
|
||||
const maxQuality = document.querySelector("#max-quality-filter" );
|
||||
|
||||
let ordering = 'name';
|
||||
let direction = true;
|
||||
let canSearch = true;
|
||||
const loadList = async () => {
|
||||
if (canSearch) {
|
||||
canSearch = false;
|
||||
|
||||
const body = {
|
||||
searchTerm: searchField.value,
|
||||
userId: completed.classList.contains('active') ? session.id : null,
|
||||
completed: completed.classList.contains('active'),
|
||||
minCompletion: minCompletion.value === '' ? null : Number(minCompletion.value),
|
||||
maxCompletion: maxCompletion.value === '' ? null : Number(maxCompletion.value),
|
||||
minDifficulty: minDifficulty.value === '' ? null : Number(minDifficulty.value),
|
||||
maxDifficulty: maxDifficulty.value === '' ? null : Number(maxDifficulty.value),
|
||||
minQuality: minQuality.value === '' ? null : Number(minQuality.value ),
|
||||
maxQuality: maxQuality.value === '' ? null : Number(maxQuality.value ),
|
||||
searchTerm: searchField.value,
|
||||
userId: completed.classList.contains('selected') ? session.id : null,
|
||||
completed: completed.classList.contains('selected') ? true : null,
|
||||
minCompletion: minCompletion.value === '' ? null : Number(minCompletion.value),
|
||||
maxCompletion: maxCompletion.value === '' ? null : Number(maxCompletion.value),
|
||||
minDifficulty: minDifficulty.value === '' ? null : Number(minDifficulty.value),
|
||||
maxDifficulty: maxDifficulty.value === '' ? null : Number(maxDifficulty.value),
|
||||
minQuality: minQuality.value === '' ? null : Number(minQuality.value ),
|
||||
maxQuality: maxQuality.value === '' ? null : Number(maxQuality.value ),
|
||||
ordering: ordering,
|
||||
orderDirection: direction ? 'ASC' : 'DESC',
|
||||
};
|
||||
console.log(body);
|
||||
let successful = true;
|
||||
if (Number.isNaN(body.minCompletion)) { successful = false; minCompletion.style.backgroundColor = 'var(--error)'; } else { minCompletion.style.backgroundColor = 'var(--foreground)'; }
|
||||
if (Number.isNaN(body.maxCompletion)) { successful = false; maxCompletion.style.backgroundColor = 'var(--error)'; } else { maxCompletion.style.backgroundColor = 'var(--foreground)'; }
|
||||
|
|
@ -72,9 +79,9 @@ const loadAchievementSearch = () => {
|
|||
achievement_id: item.ID,
|
||||
achievement_name: item.name,
|
||||
game_name: item.game,
|
||||
completion: item.completion == null ? 'N/A' : item.completion + '%',
|
||||
difficulty: item.difficulty == null ? 'N/A' : item.difficulty + ' / 10',
|
||||
quality: item.quality == null ? 'N/A' : item.quality + ' / 10'
|
||||
completion: item.completion == null ? 'N/A' : `${item.completion}%`,
|
||||
difficulty: item.difficulty == null ? 'N/A' : `${item.difficulty} / 10`,
|
||||
quality: item.quality == null ? 'N/A' : `${item.quality} / 10`
|
||||
}))));
|
||||
await template.expand();
|
||||
data.then(data => {
|
||||
|
|
@ -82,6 +89,25 @@ const loadAchievementSearch = () => {
|
|||
canSearch = true;
|
||||
loadLazyImages();
|
||||
});
|
||||
|
||||
const headers = {
|
||||
game: document.querySelector(".list-page-header > .achievement-game-name" ),
|
||||
name: document.querySelector(".list-page-header > .achievement-name" ),
|
||||
completion: document.querySelector(".list-page-header > .achievement-completion"),
|
||||
difficulty: document.querySelector(".list-page-header > .achievement-difficulty"),
|
||||
quality: document.querySelector(".list-page-header > .achievement-quality" ),
|
||||
}
|
||||
for (const header in headers) {
|
||||
headers[header].addEventListener("click", (clickEvent) => {
|
||||
if (ordering === header) {
|
||||
direction = !direction;
|
||||
} else {
|
||||
ordering = header;
|
||||
direction = true;
|
||||
}
|
||||
loadList();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
135
frontend/webpage/static/scripts/search_games.js
Normal file
135
frontend/webpage/static/scripts/search_games.js
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
let templateList = null;
|
||||
let templateText = null;
|
||||
const saveTemplate = () => {
|
||||
const templateElement = document.querySelector("#game-list-template");
|
||||
templateList = templateElement.parentElement;
|
||||
templateText = templateElement.outerHTML;
|
||||
templateElement.remove();
|
||||
};
|
||||
|
||||
const loadGameSearch = () => {
|
||||
const loading = document.querySelector("#loading-results");
|
||||
|
||||
const personal = document.querySelector("#personal-filters");
|
||||
if (!session) {
|
||||
personal.style.display = 'none';
|
||||
}
|
||||
|
||||
const searchButton = document.querySelector("#game-search-button");
|
||||
const searchField = document.querySelector("#game-search-field" );
|
||||
|
||||
const owned = document.querySelector("#owned-filter" );
|
||||
const minAvgCompletion = document.querySelector("#min-avg-completion-filter");
|
||||
const maxAvgCompletion = document.querySelector("#max-avg-completion-filter");
|
||||
const minNumOwners = document.querySelector("#min-num-owners-filter" );
|
||||
const maxNumOwners = document.querySelector("#max-num-owners-filter" );
|
||||
const minNumPerfects = document.querySelector("#min-num-perfects-filter" );
|
||||
const maxNumPerfects = document.querySelector("#max-num-perfects-filter" );
|
||||
|
||||
let ordering = 'name';
|
||||
let direction = true;
|
||||
let canSearch = true;
|
||||
const loadList = async () => {
|
||||
if (canSearch) {
|
||||
canSearch = false;
|
||||
|
||||
const body = {
|
||||
searchTerm: searchField.value,
|
||||
userId: owned.classList.contains('selected') ? session.id : null,
|
||||
owned: owned.classList.contains('selected') ? true : null,
|
||||
minAvgCompletion: minAvgCompletion.value === '' ? null : Number(minAvgCompletion.value),
|
||||
maxAvgCompletion: maxAvgCompletion.value === '' ? null : Number(maxAvgCompletion.value),
|
||||
minNumOwners: minNumOwners.value === '' ? null : Number(minNumOwners.value ),
|
||||
maxNumOwners: maxNumOwners.value === '' ? null : Number(maxNumOwners.value ),
|
||||
minNumPerfects: minNumPerfects.value === '' ? null : Number(minNumPerfects.value ),
|
||||
maxNumPerfects: maxNumPerfects.value === '' ? null : Number(maxNumPerfects.value ),
|
||||
ordering: ordering,
|
||||
orderDirection: direction ? 'ASC' : 'DESC',
|
||||
};
|
||||
let successful = true;
|
||||
if (Number.isNaN(body.minAvgCompletion)) { successful = false; minAvgCompletion.style.backgroundColor = 'var(--error)'; } else { minAvgCompletion.style.backgroundColor = 'var(--foreground)'; }
|
||||
if (Number.isNaN(body.maxAvgCompletion)) { successful = false; maxAvgCompletion.style.backgroundColor = 'var(--error)'; } else { maxAvgCompletion.style.backgroundColor = 'var(--foreground)'; }
|
||||
if (Number.isNaN(body.minNumOwners)) { successful = false; minNumOwners.style.backgroundColor = 'var(--error)'; } else { minNumOwners.style.backgroundColor = 'var(--foreground)'; }
|
||||
if (Number.isNaN(body.maxNumOwners)) { successful = false; maxNumOwners.style.backgroundColor = 'var(--error)'; } else { maxNumOwners.style.backgroundColor = 'var(--foreground)'; }
|
||||
if (Number.isNaN(body.minNumPerfects)) { successful = false; minNumPerfects.style.backgroundColor = 'var(--error)'; } else { minNumPerfects.style.backgroundColor = 'var(--foreground)'; }
|
||||
if (Number.isNaN(body.maxNumPerfects)) { successful = false; maxNumPerfects.style.backgroundColor = 'var(--error)'; } else { maxNumPerfects.style.backgroundColor = 'var(--foreground)'; }
|
||||
|
||||
if (!successful) {
|
||||
canSearch = true;
|
||||
return;
|
||||
}
|
||||
|
||||
for (const entry of templateList.querySelectorAll(".list-page-entry")) {
|
||||
entry.remove();
|
||||
}
|
||||
templateList.innerHTML += templateText;
|
||||
loading.style.display = 'block';
|
||||
|
||||
const data = fetch("/api/games", {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(body)
|
||||
})
|
||||
.then(response => response.json())
|
||||
|
||||
template.clear();
|
||||
template.apply('games-page-list').promise(data.then(data => data.map(item => ({
|
||||
game_id: item.ID,
|
||||
game_name: item.name,
|
||||
achievement_count: item.achievement_count,
|
||||
avg_completion: item.avg_completion == null ? 'N/A' : `${item.avg_completion}%`,
|
||||
num_owners: item.num_owners,
|
||||
num_perfects: item.num_perfects,
|
||||
}))));
|
||||
await template.expand();
|
||||
data.then(data => {
|
||||
console.log(data);
|
||||
loading.style.display = 'none';
|
||||
canSearch = true;
|
||||
loadLazyImages();
|
||||
});
|
||||
|
||||
const headers = {
|
||||
game: document.querySelector(".list-page-header > .game-name" ),
|
||||
achievement_count: document.querySelector(".list-page-header > .game-achievement-count"),
|
||||
avg_completion: document.querySelector(".list-page-header > .game-avg-completion" ),
|
||||
num_owners: document.querySelector(".list-page-header > .game-num-owners" ),
|
||||
num_perfects: document.querySelector(".list-page-header > .game-num-perfects" ),
|
||||
}
|
||||
for (const header in headers) {
|
||||
headers[header].addEventListener("click", (clickEvent) => {
|
||||
if (ordering === header) {
|
||||
direction = !direction;
|
||||
} else {
|
||||
ordering = header;
|
||||
direction = true;
|
||||
}
|
||||
loadList();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
searchButton.addEventListener("click", loadList);
|
||||
searchField.addEventListener("keydown", (keyEvent) => {
|
||||
if (keyEvent.key === 'Enter') {
|
||||
loadList();
|
||||
}
|
||||
});
|
||||
|
||||
loadList();
|
||||
};
|
||||
|
||||
window.addEventListener("load", async (loadEvent) => {
|
||||
await loadCommonSearch();
|
||||
|
||||
saveTemplate();
|
||||
await template.expand();
|
||||
|
||||
connectNavbar();
|
||||
loadFilters();
|
||||
|
||||
await loadGameSearch();
|
||||
});
|
||||
132
frontend/webpage/static/scripts/search_users.js
Normal file
132
frontend/webpage/static/scripts/search_users.js
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
let templateList = null;
|
||||
let templateText = null;
|
||||
const saveTemplate = () => {
|
||||
const templateElement = document.querySelector("#user-list-template");
|
||||
templateList = templateElement.parentElement;
|
||||
templateText = templateElement.outerHTML;
|
||||
templateElement.remove();
|
||||
};
|
||||
|
||||
const loadUserSearch = () => {
|
||||
const loading = document.querySelector("#loading-results");
|
||||
|
||||
|
||||
const searchButton = document.querySelector("#user-search-button");
|
||||
const searchField = document.querySelector("#user-search-field" );
|
||||
|
||||
const minOwned = document.querySelector("#min-owned-filter" );
|
||||
const maxOwned = document.querySelector("#max-owned-filter" );
|
||||
const minCompleted = document.querySelector("#min-completed-filter" );
|
||||
const maxCompleted = document.querySelector("#max-completed-filter" );
|
||||
const minAvgCompletion = document.querySelector("#min-avg-completion-filter");
|
||||
const maxAvgCompletion = document.querySelector("#max-avg-completion-filter");
|
||||
|
||||
let ordering = 'name';
|
||||
let direction = true;
|
||||
let canSearch = true;
|
||||
const loadList = async () => {
|
||||
if (canSearch) {
|
||||
canSearch = false;
|
||||
|
||||
const body = {
|
||||
searchTerm: searchField.value,
|
||||
minOwned: minOwned.value === '' ? null : Number(minOwned.value ),
|
||||
maxOwned: maxOwned.value === '' ? null : Number(maxOwned.value ),
|
||||
minCompleted: minCompleted.value === '' ? null : Number(minCompleted.value ),
|
||||
maxCompleted: maxCompleted.value === '' ? null : Number(maxCompleted.value ),
|
||||
minAvgCompletion: minAvgCompletion.value === '' ? null : Number(minAvgCompletion.value),
|
||||
maxAvgCompletion: maxAvgCompletion.value === '' ? null : Number(maxAvgCompletion.value),
|
||||
};
|
||||
let successful = true;
|
||||
if (Number.isNaN(body.minOwned )) { successful = false; minOwned.style.backgroundColor = 'var(--error)'; } else { minOwned.style.backgroundColor = 'var(--foreground)'; }
|
||||
if (Number.isNaN(body.maxOwned )) { successful = false; maxOwned.style.backgroundColor = 'var(--error)'; } else { maxOwned.style.backgroundColor = 'var(--foreground)'; }
|
||||
if (Number.isNaN(body.minCompleted )) { successful = false; minCompleted.style.backgroundColor = 'var(--error)'; } else { minCompleted.style.backgroundColor = 'var(--foreground)'; }
|
||||
if (Number.isNaN(body.maxCompleted )) { successful = false; maxCompleted.style.backgroundColor = 'var(--error)'; } else { maxCompleted.style.backgroundColor = 'var(--foreground)'; }
|
||||
if (Number.isNaN(body.minAvgCompletion)) { successful = false; minAvgCompletion.style.backgroundColor = 'var(--error)'; } else { minAvgCompletion.style.backgroundColor = 'var(--foreground)'; }
|
||||
if (Number.isNaN(body.maxAvgCompletion)) { successful = false; maxAvgCompletion.style.backgroundColor = 'var(--error)'; } else { maxAvgCompletion.style.backgroundColor = 'var(--foreground)'; }
|
||||
|
||||
if (!successful) {
|
||||
canSearch = true;
|
||||
return;
|
||||
}
|
||||
|
||||
for (const entry of templateList.querySelectorAll(".list-page-entry")) {
|
||||
entry.remove();
|
||||
}
|
||||
templateList.innerHTML += templateText;
|
||||
loading.style.display = 'block';
|
||||
|
||||
const data = fetch("/api/users", {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(body)
|
||||
})
|
||||
.then(response => response.json())
|
||||
|
||||
template.clear();
|
||||
template.apply('user-page-list').promise(data.then(data => data.map(item => ({
|
||||
user_id: item.id,
|
||||
username: item.username,
|
||||
game_count: item.game_count,
|
||||
achievement_count: item.achievement_count,
|
||||
avg_completion: item.avg_completion == null ? 'N/A' : `${item.avg_completion}%`,
|
||||
perfect_games: item.perfect_games
|
||||
}))));
|
||||
await template.expand();
|
||||
data.then(data => {
|
||||
loading.style.display = 'none';
|
||||
canSearch = true;
|
||||
loadLazyImages();
|
||||
|
||||
const entries = document.querySelectorAll(".list-page-entry.user");
|
||||
for (const entry of entries) {
|
||||
entry.addEventListener("click", (clickEvent) => {
|
||||
window.location.href = `/user/${entry.dataset.id}`;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const headers = {
|
||||
username: document.querySelector(".list-page-header > .user-username" ),
|
||||
game_count: document.querySelector(".list-page-header > .user-game-count" ),
|
||||
achievement_count: document.querySelector(".list-page-header > .user-achievement-count"),
|
||||
avg_completion: document.querySelector(".list-page-header > .user-avg-completion" ),
|
||||
perfect_games: document.querySelector(".list-page-header > .user-perfect-games" ),
|
||||
}
|
||||
for (const header in headers) {
|
||||
headers[header].addEventListener("click", (clickEvent) => {
|
||||
if (ordering === header) {
|
||||
direction = !direction;
|
||||
} else {
|
||||
ordering = header;
|
||||
direction = true;
|
||||
}
|
||||
loadList();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
searchButton.addEventListener("click", loadList);
|
||||
searchField.addEventListener("keydown", (keyEvent) => {
|
||||
if (keyEvent.key === 'Enter') {
|
||||
loadList();
|
||||
}
|
||||
});
|
||||
|
||||
loadList();
|
||||
};
|
||||
|
||||
window.addEventListener("load", async (loadEvent) => {
|
||||
await loadCommonSearch();
|
||||
|
||||
saveTemplate();
|
||||
await template.expand();
|
||||
|
||||
connectNavbar();
|
||||
loadFilters();
|
||||
|
||||
await loadUserSearch();
|
||||
});
|
||||
|
|
@ -160,8 +160,11 @@ const loadProfile = () => {
|
|||
document.querySelector("#platform-0"),
|
||||
];
|
||||
|
||||
let allowSteamImport = true;
|
||||
steamButtons[0].addEventListener("click", (clickEvent) => {
|
||||
window.location.href = "/auth/steam";
|
||||
if (allowSteamImport) {
|
||||
window.location.href = "/auth/steam";
|
||||
}
|
||||
});
|
||||
steamButtons[1].addEventListener("click", (clickEvent) => {
|
||||
fetch(`/api/user/${profileId}/platforms/remove`, {
|
||||
|
|
@ -170,7 +173,10 @@ const loadProfile = () => {
|
|||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ sessionKey: session.key, platformId: 0 })
|
||||
}).then(() => {
|
||||
allowSteamImport = true;
|
||||
});
|
||||
allowSteamImport = false;
|
||||
steamButtons[1].parentElement.classList.remove("connected");
|
||||
});
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue