Update app/script.js

2026-10-04 04:41:12 +00:00
parent 2d585b4c31
commit 90fa165f5b
1 changed files with 0 additions and 0 deletions
@@ -0,0 +1,66 @@
+const container = document.getElementById('backup-container');
+
+fetch('http://localhost:3000/api/backups')
+  .then((response) => response.json())
+  .then((data) => {
+    let currentCompany = '';
+    let currentProduct = '';
+
+    data.forEach((item) => {
+      // Group by company
+      if (item.company_name !== currentCompany) {
+        currentCompany = item.company_name;
+        const companySection = document.createElement('div');
+        companySection.className = 'company-section';
+        const header = document.createElement('h2');
+        header.className = 'company-header';
+        header.textContent = currentCompany;
+        companySection.appendChild(header);
+        container.appendChild(companySection);
+      }
+
+      // Group by backup product
+      if (item.backup_product !== currentProduct) {
+        currentProduct = item.backup_product;
+        const productSection = document.createElement('div');
+        productSection.className = 'backup-product';
+        const productHeader = document.createElement('h3');
+        productHeader.textContent = currentProduct;
+        productSection.appendChild(productHeader);
+        container.appendChild(productSection);
+      }
+
+      const jobItem = document.createElement('div');
+      jobItem.className = 'job-item';
+      jobItem.innerHTML = `
+        <span class="job-name">${item.job_name}</span>
+        <span class="last-backup">Last Backup: ${new Date(item.last_backup_time).toLocaleString()}</span>
+        <span class="status-pill status-${item.status}" data-detail="${item.error_details}">${item.status}</span>
+      `;
+
+      // Click to show error details
+      const statusPill = jobItem.querySelector('.status-pill');
+      statusPill.addEventListener('click', () => {
+        const detailModal = document.createElement('div');
+        detailModal.className = 'detail-modal';
+        detailModal.innerHTML = `
+          <span class="modal-close">&times;</span>
+          <h4>Error Details</h4>
+          <p>${item.error_details}</p>
+        `;
+        document.body.appendChild(detailModal);
+
+        const closeModal = detailModal.querySelector('.modal-close');
+        closeModal.addEventListener('click', () => {
+          document.body.removeChild(detailModal);
+        });
+      });
+
+      const productSection = container.lastElementChild;
+      productSection.appendChild(jobItem);
+    });
+  })
+  .catch((error) => {
+    console.error('Error fetching data:', error);
+    container.innerHTML = '<p>Error loading backup data. Check backend logs.</p>';
+  });