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,89 +241,88 @@ if (window.location.pathname.split('/')[3] === 'polyplus' && window.location.has
}); });
} else if (window.location.pathname.split('/')[3] === 'polyplus' && window.location.hash === '#debug') { } else if (window.location.pathname.split('/')[3] === 'polyplus' && window.location.hash === '#debug') {
document.addEventListener('DOMContentLoaded', function () { 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) {
document.querySelector('#main-content .container').innerHTML = ` chrome.storage.local.get(['PolyPlus_InventoryCache'], function(local){
<style> document.querySelector('#main-content .container').innerHTML = `
#main-content .container label { <style>
font-size: 0.8rem; #main-content .container label {
color: darkgray; font-size: 0.8rem;
} color: darkgray;
}
#main-content .container label + p { #main-content .container label + p {
margin-bottom: 4px; margin-bottom: 4px;
font-size: 0.9rem; font-size: 0.9rem;
margin-top: -4px; margin-top: -4px;
} }
</style> </style>
<div class="text-center mb-3"> <div class="text-center mb-3">
<h1 class="text-center" style="font-size: 4.6rem;">Poly+ Debug</h1> <h1 class="text-center" style="font-size: 4.6rem;">Poly+ Debug</h1>
<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> <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="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)
.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>-->
</div>
</div>
</div>
<div class="card">
<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>
<button class="btn btn-primary btn-sm w-100" id="check-for-updates">Check for Updates</button>
<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>
<div class="col"> <div class="row">
<div class="card mb-3"> <div class="col" style="padding-left: 0px;">
<div class="card-body"> <div class="card mb-3">
<h3>Pinned Games (${(result.PolyPlus_PinnedGames || []).length})</h3> <div class="card-body">
<div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;"> <h2>Settings</h2>
${JSON.stringify((result.PolyPlus_PinnedGames || []), null, 2) <div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;">
.replaceAll('\n','<br>') ${JSON.stringify((sync.PolyPlus_Settings || {}), null, 2)
.replaceAll(' ', '&nbsp;') .replaceAll('\n','<br>')
.replaceAll('\t', '&nbsp;&nbsp;&nbsp;&nbsp;')} .replaceAll(' ', '&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> .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((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>
</div> </div>
<div class="card mb-3"> <div class="col-md-4">
<div class="card-body"> <div class="card mb-3">
<h3>Best Friends (${(result.PolyPlus_BestFriends || []).length})</h3> <div class="card-body">
<div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;"> <p class="text-muted mb-1">Version: v${Version}</p>
${JSON.stringify((result.PolyPlus_BestFriends || []), null, 2) <p class="text-muted mb-3">Data Size: <span id="data-size">Loading</span> byte(s)</p>
.replaceAll('\n','<br>') <button class="btn btn-primary btn-sm w-100" id="check-for-updates">Check for Updates</button>
.replaceAll(' ', '&nbsp;') <a href="https://github.com/IndexingGitHub/PolyPlus" class="btn btn-dark btn-sm w-100 mt-2" target="_blank">Open GitHub</a>
.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>
</div> <div class="card mb-3">
<div class="card"> <div class="card-body">
<div class="card-body"> <h3>Pinned Games (${(sync.PolyPlus_PinnedGames || []).length})</h3>
<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;">
<div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;"> ${JSON.stringify((sync.PolyPlus_PinnedGames || []), null, 2)
${JSON.stringify((result.PolyPlus_ItemWishlist || []), null, 2) .replaceAll('\n','<br>')
.replaceAll('\n','<br>') .replaceAll(' ', '&nbsp;')
.replaceAll(' ', '&nbsp;') .replaceAll('\t', '&nbsp;&nbsp;&nbsp;&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((sync.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((result.PolyPlus_ItemWishlist || []))}') .then(() => {alert('copied')}) .catch(() => {});">copy</button> </div>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<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((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((sync.PolyPlus_ItemWishlist || []))}') .then(() => {alert('copied')}) .catch(() => {});">copy</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> `;
`; })
}) })
}); });
} }