fix queue execute scraping syncronize simbg add new column to resume

This commit is contained in:
arifal
2025-03-03 22:55:57 +07:00
parent 9ea7e96af1
commit 3bfcaddba4
16 changed files with 503 additions and 150 deletions

View File

@@ -4,13 +4,21 @@ import "gridjs/dist/gridjs.umd.js";
import GlobalConfig from "../../global-config.js";
class SyncronizeTask {
constructor() {
this.toastElement = document.getElementById("toastNotification");
this.toastMessage = document.getElementById("toast-message");
this.toast = new bootstrap.Toast(this.toastElement);
this.table = null;
}
init() {
this.initTableImportDatasources();
this.handleSubmitSync();
this.handleSubmitSnycGoogleSheet();
}
initTableImportDatasources() {
new Grid({
let tableContainer = document.getElementById(
"table-import-datasources"
);
this.table = new gridjs.Grid({
columns: ["ID", "Message", "Response", "Status", "Created"],
search: {
server: {
@@ -45,20 +53,24 @@ class SyncronizeTask {
]),
total: (data) => data.meta.total,
},
}).render(document.getElementById("table-import-datasources"));
}).render(tableContainer);
}
handleSubmitSync() {
const button = document.getElementById("btn-sync-submit");
const spinner = document.getElementById("spinner");
const apiToken = document
.querySelector('meta[name="api-token"]')
.getAttribute("content");
// Show the spinner while checking
spinner.classList.remove("d-none");
// Check if the button should be enabled or disabled based on the status
fetch(
`${GlobalConfig.apiHost}/api/import-datasource/check-datasource`,
{
method: "GET",
headers: {
Authorization: `Bearer ${document
.querySelector('meta[name="api-token"]')
.getAttribute("content")}`,
Authorization: `Bearer ${apiToken}`,
"Content-Type": "application/json",
},
}
@@ -70,49 +82,21 @@ class SyncronizeTask {
return response.json();
})
.then((data) => {
console.log("data check button sync", data.can_execute);
button.disabled = !data.can_execute;
// If the button is enabled, add click event to trigger sync
if (!button.disabled) {
button.addEventListener("click", function (e) {
button.disabled = true; // Disable button to prevent multiple clicks
button.textContent = "Syncing..."; // Change button text to show syncing
if (!data.can_execute) {
// Keep spinner visible if cannot execute
spinner.classList.remove("d-none");
} else {
// Hide spinner when execution is allowed
spinner.classList.add("d-none");
// Trigger the scraping API call
fetch(`${GlobalConfig.apiHost}/api/scraping`, {
method: "GET",
headers: {
Authorization: `Bearer ${document
.querySelector('meta[name="api-token"]')
.getAttribute("content")}`,
"Content-Type": "application/json",
},
})
.then((response) => {
if (!response.ok) {
throw new Error(
"Network response was not ok"
);
}
return response.json();
})
.then((data) => {
console.log("data sync button", data);
alert("Synchronization executed successfully");
window.location.reload();
})
.catch((err) => {
console.error("Fetch error:", err);
alert(
"An error occurred during synchronization"
);
})
.finally(() => {
button.disabled = false; // Re-enable the button after the request is complete
button.textContent = "Sync Data"; // Reset button text
});
});
// Remove previous event listener before adding a new one
button.removeEventListener("click", this.handleSyncClick);
button.addEventListener(
"click",
this.handleSyncClick.bind(this)
);
}
})
.catch((err) => {
@@ -120,42 +104,53 @@ class SyncronizeTask {
alert("An error occurred while checking the datasource");
});
}
handleSubmitSnycGoogleSheet() {
const button = document.getElementById("btn-sync-submit-google-sheet");
button.addEventListener("click", function (e) {
button.disabled = true; // Disable button to prevent multiple clicks
button.textContent = "Syncing..."; // Change button text to show syncing
// Trigger the scraping API call
fetch(`${GlobalConfig.apiHost}/api/sync-pbg-task-google-sheet`, {
method: "GET",
headers: {
Authorization: `Bearer ${document
.querySelector('meta[name="api-token"]')
.getAttribute("content")}`,
"Content-Type": "application/json",
},
handleSyncClick() {
const button = document.getElementById("btn-sync-submit");
const spinner = document.getElementById("spinner");
const apiToken = document
.querySelector('meta[name="api-token"]')
.getAttribute("content");
button.disabled = true; // Prevent multiple clicks
spinner.classList.remove("d-none"); // Show spinner during sync
fetch(`${GlobalConfig.apiHost}/api/scraping`, {
method: "GET",
headers: {
Authorization: `Bearer ${apiToken}`,
"Content-Type": "application/json",
},
})
.then(async (response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
let data;
try {
data = await response.json();
} catch (jsonError) {
throw new Error("Failed to parse JSON response");
}
return data;
})
.then((response) => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then((data) => {
console.log("data sync button", data);
alert("Synchronization executed successfully");
window.location.reload();
})
.catch((err) => {
console.error("Fetch error:", err);
alert("An error occurred during synchronization");
})
.finally(() => {
button.disabled = false; // Re-enable the button after the request is complete
button.textContent = "Sync Google Sheet"; // Reset button text
});
});
.then((data) => {
this.toastMessage.innerText =
data.data.message || "Synchronize successfully!";
this.toast.show();
// Update the table if it exists
if (this.table) {
this.table.updateConfig({}).forceRender();
}
})
.catch((err) => {
console.error("Fetch error:", err);
alert("An error occurred during synchronization" + err.message);
button.disabled = false;
});
}
}
document.addEventListener("DOMContentLoaded", function (e) {