update view

content.js

@@ -108,12 +108,58 @@ async function handleCreate(event, formElements) {
     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",
@@ -121,7 +167,7 @@ async function handleCreate(event, formElements) {
         "Content-Type": "application/json",
         Authorization: key,
       },
-      body: JSON.stringify(removeFalsyValues(payload)),
+      body: JSON.stringify(removeFalsyValues({ ...payload, metadata })),
     });
 
     const result = await response.json();
@@ -392,9 +438,11 @@ const setMinusLabel = (input, minutes = null) => {
 
   const text = toReadableLabel(input.id);
 
-  label.textContent = `${text} (${formatTimeFromMinutes(
+  label.textContent = `${text} ${
-    minutes || Number(input.value) || 300 / 60
+    Number(input.value)
-  )})`;
+      ? `(${formatTimeFromMinutes(minutes || Number(input.value) || 300 / 60)})`
+      : ""
+  }`;
 };
 
 const renderMetadaMode = (data, formElements, mode = null) => {
@@ -417,14 +465,6 @@ const renderMetadaMode = (data, formElements, mode = null) => {
       });
     }
   });
-
-  Object.values(formElements.metadataMode).forEach((item) => {
-    setMinusLabel(item);
-
-    item.addEventListener("input", (e) => {
-      setMinusLabel(item, Number(e.target.value));
-    });
-  });
 };
 
 const createInfoColumn = (data, formElements) => {
@@ -434,29 +474,14 @@ const createInfoColumn = (data, formElements) => {
   if (!inputsContainer || !urlCol) return;
 
   // 1. Thêm ID và Name vào đầu inputsContainer
-  const otherEls = `
+  // const otherEls = `
-    <div class="sub-col">
+  //   <div class="col">
-      <div class="col">
+  //     <label>Name</label>
-        <label>ID</label>
+  //     <textarea readonly id="maxPrice">${data?.name || "None"}</textarea>
-        <input readonly value="${data?.id || "None"}" type="text" id="id" />
+  //   </div>
-      </div>
+  // `;
 
-      <div class="col">
+  // inputsContainer.insertAdjacentHTML("afterbegin", otherEls);
-        <label for="mode_key">Mode</label>
-        <select id="mode_key" name="mode_key">
-          <option value="live">Live</option>
-          <option value="sandbox">Sandbox</option>
-        </select>
-      </div>
-    </div>
-
-    <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");
@@ -473,6 +498,12 @@ const createInfoColumn = (data, formElements) => {
   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);
 };
 
@@ -574,11 +605,23 @@ const showInfo = async (model, formElements) => {
   }
 };
 
+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"),
@@ -607,6 +650,8 @@ const showInfo = async (model, formElements) => {
 
   const model = extractModelId(currentUrl);
 
+  renderLableMetadataMode(formElements);
+
   if (!model) return;
 
   switch (extractDomain(currentUrl)) {

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Bid Extension",
-  "version": "2.0",
+  "version": "2.1",
   "description": "Bid Extension",
   "action": {
     "default_popup": "pages/popup/popup.html",

pages/popup/popup.html

@@ -104,7 +104,27 @@
   <div style="display: none" id="form-bid">
     <form class="container">
       <h2>Bid</h2>
-      <div class="inputs">
+      <div style="max-height: 560px; overflow: auto" class="inputs">
+        <div class="sub-col">
+          <div style="display: none" class="col">
+            <label>ID</label>
+            <input readonly type="text" id="id" />
+          </div>
+
+          <div class="col">
+            <label for="mode_key">Mode</label>
+            <select id="mode_key" name="mode_key">
+              <option value="live">Live</option>
+              <option value="sandbox">Sandbox</option>
+            </select>
+          </div>
+        </div>
+
+        <div style="display: none" class="col">
+          <label>Name</label>
+          <textarea rows="2" readonly id="name"></textarea>
+        </div>
+
         <div style="display: none" id="competitor-max-bid-col" class="col">
           <label>Competior max bid</label>
           <input readonly type="text" id="competitor-max-bid" />
@@ -132,7 +152,7 @@
           </div>
         </div>
 
-        <div style="display: none" id="metadataMode" class="sub-col">
+        <div id="metadataMode" class="sub-col">
           <div class="col">
             <label for="arrival_offset_seconds">Arrival offset seconds</label>
             <input
@@ -151,26 +171,6 @@
             />
           </div>
         </div>
-
-        <!-- <div style="display: none" id="metadata-mode-sandbox" class="sub-col">
-          <div class="col">
-            <label>Arrival offset seconds</label>
-            <input
-              type="number"
-              id="arrival_offset_seconds_sandbox"
-              name="arrival_offset_seconds_sandbox"
-            />
-          </div>
-
-          <div class="col">
-            <label>Early tracking seconds</label>
-            <input
-              type="number"
-              id="early_tracking_seconds_sandbox"
-              name="early_tracking_seconds_sandbox"
-            />
-          </div>
-        </div> -->
       </div>
       <button type="submit" id="createBtn">Create</button>
     </form>