Updated script that can be controled by Nodejs web app

public/script-ori.js

@@ -0,0 +1,175 @@
+let currentPage = 1;
+const rowsPerPage = 10;
+let paginatedData = [];
+
+function paginateData(data) {
+  // Urutkan data berdasarkan yang terbaru (jika data punya timestamp, bisa urutkan dari sana)
+  data = data.slice().reverse(); // Membalik urutan untuk menampilkan data terbaru dulu
+  paginatedData = [];
+
+  for (let i = 0; i < data.length; i += rowsPerPage) {
+    paginatedData.push(data.slice(i, i + rowsPerPage));
+  }
+}
+
+function renderTable(page) {
+  const tbody = document.querySelector('#resultTable tbody');
+  tbody.innerHTML = ''; // Hapus isi tabel sebelumnya
+
+  paginatedData[page - 1].forEach((row) => {
+    const tr = document.createElement('tr');
+
+    const dcuIpCell = document.createElement('td');
+    dcuIpCell.textContent = row['DCU IP'] || 'N/A';
+    tr.appendChild(dcuIpCell);
+
+    const dcuIdCell = document.createElement('td');
+    dcuIdCell.textContent = row['DCU ID'] || 'N/A';
+    tr.appendChild(dcuIdCell);
+
+    const updatedIpCell = document.createElement('td');
+    updatedIpCell.textContent = row['Updated IP'] || 'N/A';
+    tr.appendChild(updatedIpCell);
+
+    const updateStatusCell = document.createElement('td');
+    updateStatusCell.textContent = row['Update Status'] || 'N/A';
+    tr.appendChild(updateStatusCell);
+
+    tbody.appendChild(tr);
+  });
+
+  document.getElementById('resultTable').style.display = 'table';
+}
+
+function updatePaginationControls() {
+  const paginationContainer = document.getElementById('pagination');
+  paginationContainer.innerHTML = '';
+
+  for (let i = 1; i <= paginatedData.length; i++) {
+    const pageButton = document.createElement('button');
+    pageButton.textContent = i;
+    pageButton.className = 'page-button';
+    
+    if (i === currentPage) pageButton.classList.add('active');
+    
+    pageButton.addEventListener('click', () => {
+      currentPage = i;
+      renderTable(currentPage);
+      updatePaginationControls();
+    });
+
+    paginationContainer.appendChild(pageButton);
+  }
+}
+
+// Fungsi untuk menghitung total IP yang diinputkan
+document.getElementById('ipList').addEventListener('input', () => {
+  const ipList = document.getElementById('ipList').value;
+
+  fetch('/count-ips', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ ipList }),
+  })
+    .then(response => response.json())
+    .then(data => {
+      document.getElementById('totalList').textContent = data.total;
+      document.getElementById('totalList').setAttribute('data-total', data.total); // Simpan nilai di atribut data
+    })
+    .catch(err => {
+      console.error('Error:', err);
+    });
+});
+
+document.getElementById('runScriptForm').addEventListener('submit', async (event) => {
+  event.preventDefault();
+
+  // Ambil list IP yang dimasukkan
+  const ipList = document.getElementById('ipList').value;
+  const ipArray = ipList.split(/\n|,/).map(ip => ip.trim()).filter(Boolean);
+
+  // Menampilkan loading indicator dan menyembunyikan tombol Start
+  document.getElementById('loadingIndicator').style.display = 'block';
+  const startButton = document.querySelector('.start-button');
+  startButton.disabled = true;
+
+  // Kirim data IP list ke server
+  const response = await fetch('/run-script', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ ipList: ipArray })
+  });
+
+  if (!response.ok) {
+    document.getElementById('loadingIndicator').style.display = 'none';
+    alert('Script is already running or error occurred.');
+    startButton.disabled = false; // Mengaktifkan kembali tombol Start jika terjadi error
+    return;
+  }
+
+  const result = await response.json();
+
+  // Menyembunyikan loading indicator setelah selesai
+  document.getElementById('loadingIndicator').style.display = 'none';
+
+  // Menampilkan tabel hasil dan total processed
+  const tbody = document.querySelector('#resultTable tbody');
+  //tbody.innerHTML = ''; // Hapus isi tabel sebelumnya
+
+  paginateData(result.processedData); // Membagi data ke dalam halaman
+  renderTable(currentPage); // Menampilkan halaman pertama
+  updatePaginationControls(); // Menampilkan kontrol halaman
+
+  const total = document.getElementById('totalList').getAttribute('data-total');
+  document.getElementById('processStatus').style.display = 'block';
+  document.getElementById('processStatus').textContent = `Finish. Processed IP ${result.processedData.length} of ${total}`;
+
+  // Tampilkan tabel setelah diisi
+  document.getElementById('resultTable').style.display = 'table';
+  document.getElementById('totalProcessed').textContent = `Total Processed: ${result.totalProcessed}`;
+  document.getElementById('totalProcessed').style.display = 'block';
+
+  // Enable tombol Start lagi setelah selesai
+  startButton.disabled = false;
+});
+
+// WebSocket connection for real-time updates
+const socket = io();
+
+// Reference to the log output area
+const logOutput = document.getElementById('logOutput');
+
+// Listen for 'logUpdate' events and append log data
+socket.on('logUpdate', (logData) => {
+  logOutput.value += logData;
+  logOutput.scrollTop = logOutput.scrollHeight; // Scroll to the latest entry
+});
+
+// Listen for 'logComplete' event to notify when logging is done
+socket.on('logComplete', (message) => {
+  logOutput.value += '\n' + message;
+  logOutput.scrollTop = logOutput.scrollHeight;
+});
+
+// Listen for 'tableUpdate' events and update the table in real time
+const resultTableBody = document.querySelector('#resultTable tbody');
+
+socket.on('tableUpdate', (updatedData) => {
+  currentPage = 1; // Reset ke halaman pertama setiap kali data baru diterima
+
+  // Panggil fungsi paginateData untuk memproses pagination dengan data baru
+  paginateData(updatedData);
+
+  // Render tabel pada halaman pertama
+  renderTable(currentPage);
+
+  // Perbarui kontrol pagination agar sesuai dengan data terbaru
+  updatePaginationControls();
+
+  // Update total processed count jika diperlukan
+  const totalProcessed = document.getElementById('totalProcessed');
+  totalProcessed.textContent = `Total Processed: ${updatedData.length}`;
+  totalProcessed.style.display = 'block';
+});