Progress on appraisal UI
This commit is contained in:
@@ -24,6 +24,13 @@
|
|||||||
animation: colorPulse 1s infinite ease-in-out;
|
animation: colorPulse 1s infinite ease-in-out;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
|
.appraise-info {
|
||||||
|
border-radius: 30px;
|
||||||
|
border: 2px solid #777;
|
||||||
|
padding: 4px 8px;
|
||||||
|
background: #222;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
`);
|
`);
|
||||||
|
|
||||||
// Setup Formatter
|
// Setup Formatter
|
||||||
@@ -62,9 +69,7 @@
|
|||||||
);
|
);
|
||||||
var timerContainer = null;
|
var timerContainer = null;
|
||||||
const timeDisplay = document.createElement("div");
|
const timeDisplay = document.createElement("div");
|
||||||
timeDisplay.style.cssText =
|
timeDisplay.style.cssText = "padding: 10px; margin-top: 10px; color: #fff; text-align: center; font-weight: bold; transition: color 0.5s ease; font-weight: bold; font-size: 1.5rem;";
|
||||||
"padding: 10px; margin-top: 10px; color: #fff; text-align: center; font-weight: bold; transition: color 0.5s ease; font-weight: bold; font-size: 1.5rem;";
|
|
||||||
//timerElement.parentNode.insertBefore(timeDisplay, timerElement.nextSibling);
|
|
||||||
parentContainer.insertAdjacentElement("beforebegin", timeDisplay);
|
parentContainer.insertAdjacentElement("beforebegin", timeDisplay);
|
||||||
timeDisplay.innerText = "Calculating landing time...";
|
timeDisplay.innerText = "Calculating landing time...";
|
||||||
timerContainer = timeDisplay;
|
timerContainer = timeDisplay;
|
||||||
@@ -73,7 +78,6 @@
|
|||||||
// Enumerate Inventory items
|
// Enumerate Inventory items
|
||||||
var travelInventory = travelRoot.querySelectorAll('[class^="itemButton"]');
|
var travelInventory = travelRoot.querySelectorAll('[class^="itemButton"]');
|
||||||
var iteminfo = [];
|
var iteminfo = [];
|
||||||
console.log(`${travelInventory.length} items found.`); // TODO: DEBUG: Remove.
|
|
||||||
if (travelInventory.length > 0) {
|
if (travelInventory.length > 0) {
|
||||||
travelInventory.forEach((item) => {
|
travelInventory.forEach((item) => {
|
||||||
let itemImg = item.querySelector("img"); // Use the image URL to get the item ID
|
let itemImg = item.querySelector("img"); // Use the image URL to get the item ID
|
||||||
@@ -93,7 +97,6 @@
|
|||||||
}
|
}
|
||||||
// Function to update the page with price info
|
// Function to update the page with price info
|
||||||
function updatePriceInfo() {
|
function updatePriceInfo() {
|
||||||
var totalValue = 0;
|
|
||||||
var values = {
|
var values = {
|
||||||
market: 0,
|
market: 0,
|
||||||
bazaar_average: 0,
|
bazaar_average: 0,
|
||||||
@@ -102,17 +105,30 @@
|
|||||||
|
|
||||||
const invPanel = travelRoot.querySelector('[class^="inventoryPanel"]');
|
const invPanel = travelRoot.querySelector('[class^="inventoryPanel"]');
|
||||||
const appraisePanel = document.createElement("div");
|
const appraisePanel = document.createElement("div");
|
||||||
appraisePanel.style.cssText = "color: #0c0; font-weight: bold; font-size: 1.2rem;"
|
appraisePanel.style.cssText = "color: #0c0; font-weight: bold; font-size: 1rem; text-align: center; background: #333; padding: 5px;"
|
||||||
invPanel.parentNode.insertBefore(appraisePanel, invPanel.nextSibling);
|
invPanel.parentNode.insertBefore(appraisePanel, invPanel.nextSibling); // Add the new element after the travel inventory panel
|
||||||
appraisePanel.innerText = "Appraising items...";
|
iteminfo.forEach(item => { // Keep track of all totals for display
|
||||||
iteminfo.forEach(item => {
|
|
||||||
console.log(`Market Value of ${item.qty} ${item.item_name}: ${item.market * item.qty}. Bazaar Avg: ${item.bazaar_average * item.qty}. Bazaar Min: ${item.bazaar_min * item.qty}`);
|
console.log(`Market Value of ${item.qty} ${item.item_name}: ${item.market * item.qty}. Bazaar Avg: ${item.bazaar_average * item.qty}. Bazaar Min: ${item.bazaar_min * item.qty}`);
|
||||||
values.bazaar_min = currencyFormatter.format(item.bazaar_min * item.qty);
|
values.bazaar_min = item.bazaar_min * item.qty;
|
||||||
values.bazaar_average = currencyFormatter.format(item.bazaar_average * item.qty);
|
values.bazaar_average = item.bazaar_average * item.qty;
|
||||||
values.market = currencyFormatter.format(item.market * item.qty);
|
values.market = item.market * item.qty;
|
||||||
});
|
});
|
||||||
// TODO: Update UI Elements
|
// Update UI Elements
|
||||||
appraisePanel.innerText = `Quick Sell: ${values.bazaar_min} | Market: ${values.market} | Bazaar Avg: ${values.bazaar_average}`;
|
let bazMin = document.createElement("span");
|
||||||
|
bazMin.classList.add('appraise-info');
|
||||||
|
bazMin.innerText = `Quick Sale: ${currencyFormatter.format(values.bazaar_min)}`;
|
||||||
|
let marketVal = document.createElement("span");
|
||||||
|
marketVal.classList.add('appraise-info');
|
||||||
|
marketVal.innerText = `Market: ${currencyFormatter.format(values.market)}`;
|
||||||
|
let bazAvg = document.createElement("span");
|
||||||
|
bazAvg.classList.add("appraise-info");
|
||||||
|
bazAvg.innerText = `Bazaar Avg: ${currencyFormatter.format(values.bazaar_average)}`;
|
||||||
|
|
||||||
|
appraisePanel.append(marketVal);
|
||||||
|
appraisePanel.append(bazMin);
|
||||||
|
appraisePanel.append(bazAvg);
|
||||||
|
|
||||||
|
//appraisePanel.innerText = `Quick Sell: ${values.bazaar_min} | Market: ${values.market} | Bazaar Avg: ${values.bazaar_average}`;
|
||||||
}
|
}
|
||||||
// Function to get price information
|
// Function to get price information
|
||||||
function getPriceInfo(itemId) {
|
function getPriceInfo(itemId) {
|
||||||
|
|||||||
Reference in New Issue
Block a user