feat: avatar sandbox search, sorting, & ordering
This commit is contained in:
parent
6d09433395
commit
a57098b608
2 changed files with 67 additions and 2 deletions
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Reference in a new issue