HES-Selenium/public/script-ori.js

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';
});