675 lines
17 KiB
JavaScript
675 lines
17 KiB
JavaScript
const CONFIG = {
|
|
// API_BASE_URL: "http://localhost:4000/api/v1",
|
|
API_BASE_URL: "https://bids.apactech.io/api/v1",
|
|
};
|
|
|
|
let PREV_DATA = null;
|
|
|
|
function removeFalsyValues(obj, excludeKeys = []) {
|
|
return Object.entries(obj).reduce((acc, [key, value]) => {
|
|
if (value || excludeKeys.includes(key)) {
|
|
acc[key] = value;
|
|
}
|
|
return acc;
|
|
}, {});
|
|
}
|
|
|
|
function extractDomain(url) {
|
|
try {
|
|
const parsedUrl = new URL(url);
|
|
return parsedUrl.origin;
|
|
} catch (error) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
const webs = {
|
|
grays: "https://www.grays.com",
|
|
langtons: "https://www.langtons.com.au",
|
|
lawsons: "https://www.lawsons.com.au",
|
|
pickles: "https://www.pickles.com.au",
|
|
allbids: "https://www.allbids.com.au",
|
|
};
|
|
|
|
function extractModelId(url) {
|
|
switch (extractDomain(url)) {
|
|
case webs.grays: {
|
|
const match = url.match(/\/lot\/([\d-]+)\//);
|
|
return match ? match[1] : null;
|
|
}
|
|
case webs.langtons: {
|
|
const match = url.match(/auc-var-\d+/);
|
|
return match[0];
|
|
}
|
|
case webs.lawsons: {
|
|
const match = url.split("_");
|
|
return match ? match[1] : null;
|
|
}
|
|
case webs.pickles: {
|
|
const model = url.split("/").pop();
|
|
return model ? model : null;
|
|
}
|
|
case webs.allbids: {
|
|
const match = url.match(/-(\d+)(?:[\?#]|$)/);
|
|
return match ? match[1] : null;
|
|
}
|
|
}
|
|
}
|
|
|
|
const isValidUrl = (url) => {
|
|
return !!Object.keys(webs).find((item) => url.includes(webs[item]));
|
|
};
|
|
|
|
const showPage = async (pageLink = "pages/popup/popup.html") => {
|
|
const url = window.location.href; // sửa lỗi ở đây
|
|
|
|
if (!isValidUrl(url)) return;
|
|
try {
|
|
const res = await fetch(chrome.runtime.getURL(pageLink));
|
|
const html = await res.text();
|
|
|
|
const wrapper = document.createElement("div");
|
|
wrapper.innerHTML = html;
|
|
document.body.appendChild(wrapper);
|
|
} catch (err) {
|
|
console.error("Failed to load popup page:", err);
|
|
}
|
|
};
|
|
|
|
const getKey = () => {
|
|
return new Promise((resolve, reject) => {
|
|
chrome.storage.local.get("key", (result) => {
|
|
if (chrome.runtime.lastError) {
|
|
reject(chrome.runtime.lastError);
|
|
} else {
|
|
resolve(result.key || null);
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
async function handleCreate(event, formElements) {
|
|
event.preventDefault();
|
|
|
|
const key = await getKey();
|
|
if (!key) {
|
|
showKey();
|
|
return;
|
|
}
|
|
|
|
const maxPrice = parseFloat(formElements.maxPrice.value);
|
|
const plusPrice = parseFloat(formElements.plusPrice.value);
|
|
const quantity = parseInt(formElements.quantity.value, 10);
|
|
|
|
const payload = {
|
|
url: formElements.url.value.trim(),
|
|
max_price: isNaN(maxPrice) ? null : maxPrice,
|
|
plus_price: isNaN(plusPrice) ? null : plusPrice,
|
|
quantity: isNaN(quantity) ? null : quantity,
|
|
};
|
|
|
|
const keys = Object.values(formElements.form)
|
|
.filter((item) => {
|
|
return [
|
|
"mode_key",
|
|
"early_tracking_seconds",
|
|
"arrival_offset_seconds",
|
|
].includes(item?.id);
|
|
})
|
|
.reduce((prev, cur) => {
|
|
prev[cur.id] = cur.value;
|
|
return prev;
|
|
}, {});
|
|
|
|
const earlyTracking = parseInt(keys.early_tracking_seconds, 10);
|
|
const arrivalOffset = parseInt(keys.arrival_offset_seconds, 10);
|
|
|
|
if (earlyTracking < 600) {
|
|
alert("Early Tracking Seconds must be at least 600 seconds (10 minutes).");
|
|
return;
|
|
}
|
|
|
|
if (arrivalOffset < 60) {
|
|
alert("Arrival Offset Seconds must be at least 60 seconds (1 minute).");
|
|
return;
|
|
}
|
|
|
|
// Validate required fields
|
|
if (!payload.url || payload.max_price === null) {
|
|
alert("Please fill out the URL and Max Price fields correctly.");
|
|
return;
|
|
}
|
|
|
|
const localKeyName = keys["mode_key"];
|
|
|
|
const newKeys = Object.entries(keys).reduce((prev, [key, value]) => {
|
|
if (key === "mode_key") {
|
|
prev[key] = value;
|
|
} else {
|
|
prev[`${key}_${localKeyName}`] = Number(value);
|
|
}
|
|
return prev;
|
|
}, {});
|
|
|
|
let metadata = Object.entries(newKeys).map(([key, value]) => {
|
|
return {
|
|
key_name: key,
|
|
value,
|
|
};
|
|
});
|
|
|
|
console.log({ newKeys, payload, metadata });
|
|
|
|
try {
|
|
const response = await fetch(`${CONFIG.API_BASE_URL}/bids`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: key,
|
|
},
|
|
body: JSON.stringify(removeFalsyValues({ ...payload, metadata })),
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
alert(result.message);
|
|
|
|
// showInfo
|
|
await showInfo(extractModelId(payload.url), formElements);
|
|
// handleChangeTitleButton
|
|
handleChangeTitleButton(true, formElements);
|
|
} catch (error) {
|
|
alert("Error: " + error.message);
|
|
console.error("API Error:", error);
|
|
}
|
|
}
|
|
|
|
async function handleUpdate(event, formElements, id) {
|
|
event.preventDefault();
|
|
|
|
const key = await getKey();
|
|
if (!key) {
|
|
showKey();
|
|
return;
|
|
}
|
|
|
|
const maxPrice = parseFloat(formElements.maxPrice.value);
|
|
const plusPrice = parseFloat(formElements.plusPrice.value);
|
|
const quantity = parseInt(formElements.quantity.value, 10);
|
|
|
|
const payload = {
|
|
max_price: isNaN(maxPrice) ? null : maxPrice,
|
|
plus_price: isNaN(plusPrice) ? null : plusPrice,
|
|
quantity: isNaN(quantity) ? null : quantity,
|
|
};
|
|
|
|
const keys = Object.values(formElements.form)
|
|
.filter((item) => {
|
|
return [
|
|
"mode_key",
|
|
"early_tracking_seconds",
|
|
"arrival_offset_seconds",
|
|
].includes(item?.id);
|
|
})
|
|
.reduce((prev, cur) => {
|
|
prev[cur.id] = cur.value;
|
|
return prev;
|
|
}, {});
|
|
|
|
const earlyTracking = parseInt(keys.early_tracking_seconds, 10);
|
|
const arrivalOffset = parseInt(keys.arrival_offset_seconds, 10);
|
|
|
|
if (earlyTracking < 600) {
|
|
alert("Early Tracking Seconds must be at least 600 seconds (10 minutes).");
|
|
return;
|
|
}
|
|
|
|
if (arrivalOffset < 60) {
|
|
alert("Arrival Offset Seconds must be at least 60 seconds (1 minute).");
|
|
return;
|
|
}
|
|
|
|
// Validate required fields
|
|
if (payload.max_price === null) {
|
|
alert("Please fill out the URL and Max Price fields correctly.");
|
|
return;
|
|
}
|
|
|
|
const localKeyName = keys["mode_key"];
|
|
|
|
const newKeys = Object.entries(keys).reduce((prev, [key, value]) => {
|
|
if (key === "mode_key") {
|
|
prev[key] = value;
|
|
} else {
|
|
prev[`${key}_${localKeyName}`] = Number(value);
|
|
}
|
|
return prev;
|
|
}, {});
|
|
|
|
let metadata = [];
|
|
|
|
if (
|
|
window.__result.metadata.length > 0 &&
|
|
window.__result.metadata.some((item) => item.key_name === "mode_key")
|
|
) {
|
|
metadata = window.__result.metadata.map((item) => {
|
|
if (Object.keys(newKeys).includes(item.key_name)) {
|
|
return {
|
|
...item,
|
|
value: newKeys[item.key_name],
|
|
};
|
|
}
|
|
return { ...item };
|
|
});
|
|
} else {
|
|
metadata = Object.entries(newKeys).map(([key, value]) => {
|
|
return {
|
|
key_name: key,
|
|
value,
|
|
};
|
|
});
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`${CONFIG.API_BASE_URL}/bids/info/${id}`, {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: key,
|
|
},
|
|
body: JSON.stringify(removeFalsyValues({ ...payload, metadata })),
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
alert(result.message);
|
|
} catch (error) {
|
|
alert("Error: " + error.message);
|
|
console.error("API Error:", error);
|
|
} finally {
|
|
await showInfo();
|
|
}
|
|
}
|
|
|
|
const showBid = () => {
|
|
const formKey = document.getElementById("form-key");
|
|
const formBid = document.getElementById("form-bid");
|
|
|
|
formKey.style.display = "none";
|
|
formBid.style.display = "block";
|
|
};
|
|
|
|
const showKey = async () => {
|
|
chrome.storage.local.set({ key: null }, async () => {
|
|
console.log("abc");
|
|
});
|
|
|
|
const key = await getKey();
|
|
|
|
const formKey = document.getElementById("form-key");
|
|
const formBid = document.getElementById("form-bid");
|
|
|
|
const keyEl = document.querySelector("#form-key #key");
|
|
|
|
formBid.style.display = "none";
|
|
formKey.style.display = "block";
|
|
|
|
if (key && keyEl) {
|
|
keyEl.value = key;
|
|
}
|
|
};
|
|
|
|
const handleToogle = async () => {
|
|
const btn = document.getElementById("toggle-bid-extension");
|
|
const panel = document.getElementById("bid-extension");
|
|
|
|
if (btn && panel) {
|
|
btn.addEventListener("click", async () => {
|
|
const isHidden = panel.style.display === "none";
|
|
panel.style.display = isHidden ? "block" : "none";
|
|
|
|
if (isHidden) {
|
|
await handleShowForm();
|
|
}
|
|
});
|
|
} else {
|
|
console.error("Không tìm thấy nút hoặc panel!");
|
|
}
|
|
};
|
|
|
|
const handleShowForm = async () => {
|
|
const formBid = document.getElementById("form-bid");
|
|
const formKey = document.getElementById("form-key");
|
|
const keyBtn = document.getElementById("key-btn");
|
|
|
|
const currentKey = await getKey();
|
|
|
|
if (!currentKey) {
|
|
await showKey();
|
|
} else {
|
|
showBid();
|
|
}
|
|
|
|
keyBtn?.addEventListener("click", () => {
|
|
showKey();
|
|
});
|
|
};
|
|
const handleChangeTitleButton = (result, formElements) => {
|
|
if (result) {
|
|
formElements.createBtn.textContent = "Update";
|
|
} else {
|
|
formElements.createBtn.textContent = "Create";
|
|
}
|
|
};
|
|
|
|
const handleSaveKey = () => {
|
|
const form = document.querySelector("#form-key form");
|
|
if (!form) return;
|
|
|
|
form.addEventListener("submit", async (e) => {
|
|
e.preventDefault();
|
|
|
|
const inputKey = form.querySelector("#key");
|
|
if (!inputKey) return;
|
|
|
|
const keyValue = inputKey.value.trim();
|
|
if (!keyValue) {
|
|
alert("Please enter a key");
|
|
return;
|
|
}
|
|
|
|
// Lưu vào chrome.storage.local
|
|
chrome.storage.local.set({ key: keyValue }, async () => {
|
|
alert("Key saved successfully!");
|
|
showBid();
|
|
|
|
if (!isValidModel()) return;
|
|
|
|
await showInfo();
|
|
});
|
|
});
|
|
};
|
|
|
|
const isValidModel = () => {
|
|
const currentUrl = window.location.href;
|
|
|
|
const model = extractModelId(currentUrl);
|
|
|
|
return !!model;
|
|
};
|
|
|
|
const renderValueModeMetadata = (data, formElements, mode = null) => {
|
|
const early_tracking_seconds = getEarlyTrackingSeconds(data, mode);
|
|
const arrival_offset_seconds = getArrivalOffsetSeconds(data, mode);
|
|
|
|
formElements.metadataMode.arrival_offset_seconds.value =
|
|
arrival_offset_seconds;
|
|
|
|
formElements.metadataMode.early_tracking_seconds.value =
|
|
early_tracking_seconds;
|
|
|
|
return { early_tracking_seconds, arrival_offset_seconds };
|
|
};
|
|
|
|
function formatTimeFromMinutes(minutes) {
|
|
// Tính ngày, giờ, phút từ số phút
|
|
const days = Math.floor(minutes / (60 * 24));
|
|
const hours = Math.floor((minutes % (60 * 24)) / 60);
|
|
const mins = minutes % 60;
|
|
|
|
let result = "";
|
|
|
|
if (days > 0) result += `${days} ${days > 1 ? "days" : "day"} `;
|
|
if (hours > 0) result += `${hours} ${hours > 1 ? "hours" : "hour"} `;
|
|
if (mins > 0 || result === "") result += `${mins} minutes`;
|
|
|
|
return result.trim();
|
|
}
|
|
|
|
function toReadableLabel(input) {
|
|
return input
|
|
.split("_") // Tách chuỗi theo dấu gạch dưới
|
|
.map((word) => word.charAt(0).toUpperCase() + word.slice(1)) // Viết hoa chữ cái đầu
|
|
.join(" "); // Nối lại bằng khoảng trắng
|
|
}
|
|
|
|
const setMinusLabel = (input, minutes = null) => {
|
|
const label = document.querySelector(`[for="${input?.id}"]`);
|
|
|
|
const text = toReadableLabel(input.id);
|
|
|
|
label.textContent = `${text} ${
|
|
Number(input.value)
|
|
? `(${formatTimeFromMinutes(minutes || Number(input.value) || 300 / 60)})`
|
|
: ""
|
|
}`;
|
|
};
|
|
|
|
const renderMetadaMode = (data, formElements, mode = null) => {
|
|
const mode_key = mode ? mode : getMode(data);
|
|
|
|
formElements.metadataModeBox.style.display = "flex";
|
|
|
|
renderValueModeMetadata(data, formElements, mode_key);
|
|
|
|
Object.values(formElements.form).forEach((item) => {
|
|
if (item?.id === "mode_key") {
|
|
item.value = mode_key;
|
|
|
|
item.addEventListener("change", (e) => {
|
|
renderValueModeMetadata(data, formElements, e.target.value);
|
|
|
|
Object.values(formElements.metadataMode).forEach((i) => {
|
|
setMinusLabel(i);
|
|
});
|
|
});
|
|
}
|
|
});
|
|
};
|
|
|
|
const createInfoColumn = (data, formElements) => {
|
|
const inputsContainer = document.querySelector("#bid-extension .inputs");
|
|
const urlCol = document.querySelector("#url-col");
|
|
|
|
if (!inputsContainer || !urlCol) return;
|
|
|
|
// 1. Thêm ID và Name vào đầu inputsContainer
|
|
// const otherEls = `
|
|
// <div class="col">
|
|
// <label>Name</label>
|
|
// <textarea readonly id="maxPrice">${data?.name || "None"}</textarea>
|
|
// </div>
|
|
// `;
|
|
|
|
// inputsContainer.insertAdjacentHTML("afterbegin", otherEls);
|
|
|
|
// 2. Tạo và chèn Current Price ngay sau #url-col
|
|
const currentPriceDiv = document.createElement("div");
|
|
currentPriceDiv.className = "col";
|
|
currentPriceDiv.innerHTML = `
|
|
<label>Current price</label>
|
|
<input readonly type="text" value="${
|
|
data?.current_price || "None"
|
|
}" id="currentPrice" />
|
|
`;
|
|
|
|
urlCol.parentNode.insertBefore(currentPriceDiv, urlCol.nextSibling);
|
|
|
|
formElements.quantity.value = data?.quantity || 1;
|
|
formElements.plusPrice.value = data?.plus_price || 0;
|
|
|
|
[formElements.id, formElements.name].forEach((item) => {
|
|
console.log({ item });
|
|
item.value = data[item.id] || "None";
|
|
item.parentElement.style.display = "block";
|
|
});
|
|
|
|
renderMetadaMode(data, formElements);
|
|
};
|
|
|
|
const showCompetitor = () => {
|
|
const script = document.createElement("script");
|
|
script.src = chrome.runtime.getURL("injected.js");
|
|
script.onload = function () {
|
|
this.remove();
|
|
};
|
|
(document.head || document.documentElement).appendChild(script);
|
|
|
|
// Nghe dữ liệu trả về
|
|
window.addEventListener("message", function (event) {
|
|
if (event.source !== window) return;
|
|
if (event.data && event.data.source === "my-extension") {
|
|
const bidHistory = event.data?.bidHistory || [];
|
|
const maxProxy = bidHistory.reduce((max, curr) => {
|
|
return curr.proxyamount > max.proxyamount ? curr : max;
|
|
}, bidHistory[0]);
|
|
|
|
console.log({ bidHistory });
|
|
|
|
const competitorEl = document.getElementById("competitor-max-bid-col");
|
|
const competitorInput = document.querySelector(
|
|
"#competitor-max-bid-col input"
|
|
);
|
|
|
|
competitorEl.style.display = "block";
|
|
|
|
competitorInput.value = maxProxy?.proxyamount || "None";
|
|
}
|
|
});
|
|
};
|
|
|
|
const getMode = (data) => {
|
|
return (
|
|
data.metadata.find((item) => item.key_name === "mode_key")?.value || "live"
|
|
);
|
|
};
|
|
|
|
const getEarlyTrackingSeconds = (data, outsiteMode = null) => {
|
|
const mode = outsiteMode ? outsiteMode : getMode(data);
|
|
|
|
return (
|
|
data.metadata.find(
|
|
(item) => item.key_name === `early_tracking_seconds_${mode}`
|
|
)?.value || data.web_bid.early_tracking_seconds
|
|
);
|
|
};
|
|
|
|
const getArrivalOffsetSeconds = (data, outsiteMode = null) => {
|
|
const mode = outsiteMode ? outsiteMode : getMode(data);
|
|
|
|
return (
|
|
data.metadata.find(
|
|
(item) => item.key_name === `arrival_offset_seconds_${mode}`
|
|
)?.value || data.web_bid.arrival_offset_seconds
|
|
);
|
|
};
|
|
|
|
const showInfo = async (model, formElements) => {
|
|
const key = await getKey();
|
|
if (!key) {
|
|
showKey();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`${CONFIG.API_BASE_URL}/bids/${model}`, {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: key,
|
|
},
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (!result || result?.status_code !== 200 || !result?.data) {
|
|
if (result.status_code !== 404) {
|
|
alert(result.message);
|
|
}
|
|
|
|
PREV_DATA = null;
|
|
return null;
|
|
}
|
|
|
|
window["__result"] = result.data;
|
|
|
|
formElements.maxPrice.value = result.data.max_price;
|
|
|
|
createInfoColumn(result.data, formElements);
|
|
|
|
PREV_DATA = result;
|
|
return result;
|
|
} catch (error) {
|
|
alert("Error: " + error.message);
|
|
console.error("API Error:", error);
|
|
}
|
|
};
|
|
|
|
const renderLableMetadataMode = (formElements) => {
|
|
Object.values(formElements.metadataMode).forEach((item) => {
|
|
setMinusLabel(item);
|
|
|
|
item.addEventListener("input", (e) => {
|
|
setMinusLabel(item, Number(e.target.value));
|
|
});
|
|
});
|
|
};
|
|
|
|
(async () => {
|
|
await showPage();
|
|
handleToogle();
|
|
const formElements = {
|
|
url: document.querySelector("#form-bid #url"),
|
|
id: document.querySelector("#form-bid #id"),
|
|
name: document.querySelector("#form-bid #name"),
|
|
maxPrice: document.querySelector("#form-bid #maxPrice"),
|
|
plusPrice: document.querySelector("#form-bid #plusPrice"),
|
|
quantity: document.querySelector("#form-bid #quantity"),
|
|
createBtn: document.querySelector("#form-bid #createBtn"),
|
|
modeKey: document.querySelector("#form-bid #mode_key"),
|
|
metadataModeBox: document.querySelector("#form-bid #metadataMode"),
|
|
metadataMode: {
|
|
arrival_offset_seconds: document.querySelector(
|
|
"#form-bid #arrival_offset_seconds"
|
|
),
|
|
early_tracking_seconds: document.querySelector(
|
|
"#form-bid #early_tracking_seconds"
|
|
),
|
|
},
|
|
form: document.querySelector("#form-bid form"),
|
|
};
|
|
|
|
const style = document.createElement("link");
|
|
style.rel = "stylesheet";
|
|
style.href = chrome.runtime.getURL("assets/css/index.css");
|
|
document.head.appendChild(style);
|
|
|
|
handleSaveKey();
|
|
|
|
const currentUrl = window.location.href;
|
|
|
|
const model = extractModelId(currentUrl);
|
|
|
|
renderLableMetadataMode(formElements);
|
|
|
|
if (!model) return;
|
|
|
|
switch (extractDomain(currentUrl)) {
|
|
case webs.allbids: {
|
|
showCompetitor();
|
|
}
|
|
}
|
|
|
|
// set url on form
|
|
formElements.url.value = currentUrl;
|
|
|
|
await showInfo(model, formElements);
|
|
handleChangeTitleButton(!!PREV_DATA, formElements);
|
|
|
|
formElements.form.addEventListener("submit", (e) =>
|
|
PREV_DATA
|
|
? handleUpdate(e, formElements, PREV_DATA.data.id)
|
|
: handleCreate(e, formElements)
|
|
);
|
|
})();
|