Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Crawler Health</title> | |
| </head> | |
| <style> | |
| html, body { | |
| height: 100%; | |
| } | |
| body { | |
| background-color:rgb(35, 35, 35); | |
| color: azure; | |
| } | |
| table { | |
| width: 100%; | |
| border-radius: 10px 10px 0px 0px; | |
| border-collapse: collapse; | |
| overflow: hidden; | |
| box-shadow: 0 0 20px rgba(0,0,0,0.1); | |
| } | |
| th, | |
| td { | |
| padding: 15px; | |
| background-color: rgba(255,255,255,0.2); | |
| color: #fff; | |
| } | |
| th { | |
| text-align: left; | |
| } | |
| thead { | |
| th { | |
| background-color: #55608f; | |
| } | |
| } | |
| tbody { | |
| tr { | |
| &:hover { | |
| background-color: rgba(255,255,255,0.3); | |
| } | |
| } | |
| td { | |
| position: relative; | |
| &:hover { | |
| &:before { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| top: -9999px; | |
| bottom: -9999px; | |
| background-color: rgba(255,255,255,0.2); | |
| z-index: -1; | |
| } | |
| } | |
| } | |
| } | |
| </style> | |
| <body> | |
| <h1>Crawler Health Check</h1> | |
| <!-- Dropdown for category selection --> | |
| <label for="category-select">Select Category:</label> | |
| <select id="category-select"> | |
| <option value="ALL">ALL</option> | |
| <option value="WORKING">WORKING</option> | |
| <option value="ERROR">ERROR</option> | |
| </select> | |
| <!-- Calendar input for date selection --> | |
| <label for="date-input">Select Date:</label> | |
| <input type="date" id="date-input"> | |
| <button id="fetch-button">Fetch Data</button> | |
| <h2>Crawler Data</h2> | |
| <table id="data-table"> | |
| <thead> | |
| <tr> | |
| <th>ID</th> | |
| <th>Link</th> | |
| <th>Status</th> | |
| <th>Crawled</th> | |
| <th>Authority</th> | |
| <th>Crawl Date</th> | |
| </tr> | |
| </thead> | |
| <tbody></tbody> | |
| </table> | |
| <script> | |
| document.getElementById('fetch-button').onclick = function() { | |
| // Get category and date values from user input | |
| const category = document.getElementById('category-select').value; | |
| let date = document.getElementById('date-input').value; | |
| if (date){ | |
| let yyyy = date.slice(0,4); | |
| let mm = date.slice(5,7); | |
| let dd = date.slice(8,10); | |
| let inter=dd.concat("/",mm); | |
| date=inter.concat("/",yyyy); | |
| } | |
| // Ensure date is in the correct format (DD/MM/YYYY) | |
| fetch(`https://crawlergri.vercel.app/health?category=${category}&date=${date}`) | |
| .then(response => { | |
| if (!response.ok) { | |
| throw new Error('Network response was not ok: ' + response.statusText); | |
| } | |
| return response.json(); | |
| }) | |
| .then(data => { | |
| // Populate structured data table | |
| const tbody = document.querySelector('#data-table tbody'); | |
| tbody.innerHTML = ''; // Clear existing rows | |
| data.crawl_data.forEach(item => { | |
| const row = document.createElement('tr'); | |
| row.innerHTML = ` | |
| <td>${item._id}</td> | |
| <td>${item.link}</td> | |
| <td>${item.status}</td> | |
| <td>${item.crawled}</td> | |
| <td>${item.authority}</td> | |
| <td>${item.crawl_date}</td> | |
| `; | |
| tbody.appendChild(row); | |
| }); | |
| }) | |
| .catch(error => console.error('Error fetching data:', error)); | |
| }; | |
| </script> | |
| </body> | |
| </html> |