feat: avatar sandbox search, sorting, & ordering

This commit is contained in:
Index 2024-06-27 18:52:25 -05:00
parent 6d09433395
commit a57098b608
2 changed files with 67 additions and 2 deletions

View file

@ -53,6 +53,9 @@ let Avatar = {
/* Discovery */
let Page = 1
let Search = ""
let Sort = "createdAt"
let Order = "desc"
let ShowOffsale = true
let TabSelected = "hat"
!(async () => {
@ -101,6 +104,38 @@ async function PageLoad() {
});
});
const ItemSearch = document.getElementById('search-btn')
ItemSearch.addEventListener('click', function(){
Search = ItemSearch.previousElementSibling.value
Page = 1
LoadItems()
})
const ItemSort = document.getElementById('item-sort')
ItemSort.addEventListener('change', function(){
Sort = ItemSort.options[ItemSort.selectedIndex].value
Page = 1
LoadItems()
})
const ItemOrder = document.getElementById('item-order')
ItemOrder.addEventListener('change', function(){
Order = ItemOrder.options[ItemOrder.selectedIndex].value
Page = 1
LoadItems()
})
/*
Public API does not have an offsale parameter
document.getElementById('show-offsale').addEventListener('change', function(){
ShowOffsale = !ShowOffsale
console.log(ShowOffsale)
Page = 1
LoadItems()
})
*/
const ClearButton = document.getElementById('clear');
ClearButton.addEventListener('click', function () {
Avatar = {
@ -336,7 +371,7 @@ function LoadUser(id) {
async function LoadItems() {
document.getElementById('inventory').innerHTML = ''
const Items = (await (await fetch('https://api.polytoria.com/v1/store?limit=12&order=desc&sort=createdAt&showOffsale=true&types[]='+ TabSelected +'&search=' + Search + '&page=' + Page)).json()).assets
const Items = (await (await fetch('https://api.polytoria.com/v1/store?limit=12&order=' + Order + '&sort=' + Sort + '&showOffsale=' + ShowOffsale + '&types[]='+ TabSelected +'&search=' + Search + '&page=' + Page)).json()).assets
Items.forEach(item => {
const ItemColumn = document.createElement('div')
ItemColumn.classList = 'col-auto'

View file

@ -124,6 +124,14 @@
</div>
</div>
<small class="text-muted text-center" style="font-size: 0.7rem;">feature of Poly+</small>
<!--
Public API does not have an offsale parameter
<span class="form-check form-switch" style="font-size: 0.7rem;">
<input class="form-check-input" type="checkbox" role="switch" id="show-offsale" checked />
<label class="form-check-label" for="hide-user-ads-banner">Show Offsale Items</label>
</span>
-->
</div>
<div class="col-12 col-lg-9">
<ul class="nav nav-pills nav-justified mb-3" id="tabs">
@ -159,7 +167,28 @@
</li>
</ul>
<div class="card px-2 pt-2 pb-2 mb-4" style="background: rgba(0, 0, 0, 0.23); border-color: rgba(0, 0, 0, 0.23); border-top-left-radius: 20px; border-top-right-radius: 20px;">
<div class="row mb-2">
<div class="col-md-4">
<div class="input-group">
<select id="item-sort" class="form-select">
<option value="name">Name</option>
<option value="price">Price</option>
<option value="createdAt" selected>Creation Date</option>
<option value="updatedAt">Updated Date</option>
</select>
<select id="item-order" class="form-select">
<option value="asc">Ascending</option>
<option value="desc">Descending</option>
</select>
</div>
</div>
<div class="col">
<div class="input-group">
<input id="item-search" type="text" class="form-control mb-2" placeholder="Search for an item..." />
<button id="search-btn" class="btn btn-primary h-100">Search</button>
</div>
</div>
</div>
<div class="row alignleft itemgrid mb-4" id="inventory"></div>
<nav id="pagination" style="margin: auto;">
<ul class="pagination">
@ -189,3 +218,4 @@
<div class="row alignleft itemgrid" id="wearing"></div>
</div>
</div>
</div>