feat: avatar sandbox search, sorting, & ordering

js/account/avatar-sandbox-rewrite.js

@@ -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'

resources/avatar-sandbox.html

@@ -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;">
-			<input id="item-search" type="text" class="form-control mb-2" placeholder="Search for an item..." />
+			<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>