style: add Inventory Cache to debug page

This commit is contained in:
Index 2024-07-01 19:42:26 -05:00
parent 7e8e8d4b84
commit 5167016103

View file

@ -241,7 +241,8 @@ if (window.location.pathname.split('/')[3] === 'polyplus' && window.location.has
});
} else if (window.location.pathname.split('/')[3] === 'polyplus' && window.location.hash === '#debug') {
document.addEventListener('DOMContentLoaded', function () {
chrome.storage.sync.get(['PolyPlus_Settings', 'PolyPlus_PinnedGames', 'PolyPlus_BestFriends', 'PolyPlus_ItemWishlist'], function(result) {
chrome.storage.sync.get(['PolyPlus_Settings', 'PolyPlus_PinnedGames', 'PolyPlus_BestFriends', 'PolyPlus_ItemWishlist'], function(sync) {
chrome.storage.local.get(['PolyPlus_InventoryCache'], function(local){
document.querySelector('#main-content .container').innerHTML = `
<style>
#main-content .container label {
@ -260,20 +261,33 @@ if (window.location.pathname.split('/')[3] === 'polyplus' && window.location.has
<p class="w-75 d-block mx-auto">This page is used by developers for debugging most data related things. It is unrecommended you modify any data on this page, but if you ever want to go ahead.</p>
</div>
<div class="row">
<div class="col-md-5" style="padding-left: 0px;">
<div class="col" style="padding-left: 0px;">
<div class="card mb-3">
<div class="card-body">
<h2>Settings</h2>
<div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;">
${JSON.stringify((result.PolyPlus_Settings || {}), null, 2)
${JSON.stringify((sync.PolyPlus_Settings || {}), null, 2)
.replaceAll('\n','<br>')
.replaceAll(' ', '&nbsp;')
.replaceAll('\t', '&nbsp;&nbsp;&nbsp;&nbsp;')}
<!--<button class="btn btn-warning btn-sm" style="position: absolute; top: 0; right: 0; margin: 10px;" onclick="navigator.clipboard.writeText('${JSON.stringify((result.PolyPlus_Settings || [])).replaceAll('"', "\'")}') .then(() => {alert('copied')}) .catch(() => {});">copy</button>-->
<!--<button class="btn btn-warning btn-sm" style="position: absolute; top: 0; right: 0; margin: 10px;" onclick="navigator.clipboard.writeText('${JSON.stringify((sync.PolyPlus_Settings || [])).replaceAll('"', "\'")}') .then(() => {alert('copied')}) .catch(() => {});">copy</button>-->
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h3>Inventory Cache</h3>
<div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;">
${JSON.stringify((local.PolyPlus_InventoryCache || {data: [], requested: "never"}), null, 2)
.replaceAll('\n','<br>')
.replaceAll(' ', '&nbsp;')
.replaceAll('\t', '&nbsp;&nbsp;&nbsp;&nbsp;')}
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-3">
<div class="card-body">
<p class="text-muted mb-1">Version: v${Version}</p>
<p class="text-muted mb-3">Data Size: <span id="data-size">Loading</span> byte(s)</p>
@ -281,43 +295,27 @@ if (window.location.pathname.split('/')[3] === 'polyplus' && window.location.has
<a href="https://github.com/IndexingGitHub/PolyPlus" class="btn btn-dark btn-sm w-100 mt-2" target="_blank">Open GitHub</a>
</div>
</div>
<hr>
Created by <a href="/u/Index" target="_blank">Index</a>
</div>
<div class="col">
<div class="card mb-3">
<div class="card-body">
<h3>Pinned Games (${(result.PolyPlus_PinnedGames || []).length})</h3>
<h3>Pinned Games (${(sync.PolyPlus_PinnedGames || []).length})</h3>
<div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;">
${JSON.stringify((result.PolyPlus_PinnedGames || []), null, 2)
${JSON.stringify((sync.PolyPlus_PinnedGames || []), null, 2)
.replaceAll('\n','<br>')
.replaceAll(' ', '&nbsp;')
.replaceAll('\t', '&nbsp;&nbsp;&nbsp;&nbsp;')}
<button class="btn btn-warning btn-sm" style="position: absolute; top: 0; right: 0; margin: 10px;" onclick="navigator.clipboard.writeText('${JSON.stringify((result.PolyPlus_PinnedGames || []))}') .then(() => {alert('copied')}) .catch(() => {});">copy</button>
<button class="btn btn-warning btn-sm" style="position: absolute; top: 0; right: 0; margin: 10px;" onclick="navigator.clipboard.writeText('${JSON.stringify((sync.PolyPlus_PinnedGames || []))}') .then(() => {alert('copied')}) .catch(() => {});">copy</button>
</div>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h3>Best Friends (${(result.PolyPlus_BestFriends || []).length})</h3>
<h3>Item Wishlist (${(sync.PolyPlus_ItemWishlist || []).length})</h3>
<div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;">
${JSON.stringify((result.PolyPlus_BestFriends || []), null, 2)
${JSON.stringify((sync.PolyPlus_ItemWishlist || []), null, 2)
.replaceAll('\n','<br>')
.replaceAll(' ', '&nbsp;')
.replaceAll('\t', '&nbsp;&nbsp;&nbsp;&nbsp;')}
<button class="btn btn-warning btn-sm" style="position: absolute; top: 0; right: 0; margin: 10px;" onclick="navigator.clipboard.writeText('${JSON.stringify((result.PolyPlus_BestFriends || []))}') .then(() => {alert('copied')}) .catch(() => {});">copy</button>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<h3>Item Wishlist (${(result.PolyPlus_ItemWishlist || []).length})</h3>
<div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;">
${JSON.stringify((result.PolyPlus_ItemWishlist || []), null, 2)
.replaceAll('\n','<br>')
.replaceAll(' ', '&nbsp;')
.replaceAll('\t', '&nbsp;&nbsp;&nbsp;&nbsp;')}
<button class="btn btn-warning btn-sm" style="position: absolute; top: 0; right: 0; margin: 10px;" onclick="navigator.clipboard.writeText('${JSON.stringify((result.PolyPlus_ItemWishlist || []))}') .then(() => {alert('copied')}) .catch(() => {});">copy</button>
<button class="btn btn-warning btn-sm" style="position: absolute; top: 0; right: 0; margin: 10px;" onclick="navigator.clipboard.writeText('${JSON.stringify((sync.PolyPlus_ItemWishlist || []))}') .then(() => {alert('copied')}) .catch(() => {});">copy</button>
</div>
</div>
</div>
@ -325,5 +323,6 @@ if (window.location.pathname.split('/')[3] === 'polyplus' && window.location.has
</div>
`;
})
})
});
}