{% extends "base.html" %} {% block content %}
{% csrf_token %}
{% for file in uploaded_files %} {% else %} File Processed {% endif %} {% if completed %} {% else %} {% endif %} {% endfor %}
id Filename Uploaded Date Processed Date Completed Date Actions
{{ file.id }} {{ file.filename }} {{ file.uploadDate }} {{ file.processDate }} {{ file.completeAt }} {% if file.processed == false %} Process Delete ShowStatusShowStatsStats
{% endblock %} {% block js %} document.getElementById("confirm_upload").addEventListener("click", function (event) { event.preventDefault(); // Prevent the default form submission const fileInput = document.getElementById("file_upload"); const fileName = fileInput.files[0].name; if (fileInput.files.length > 0) { fetch("check_file_existence/", { method: "POST", headers: { "X-CSRFToken": "{{ csrf_token }}", "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8", }, body: `file_name=${encodeURIComponent(fileName)}`, }) .then((response) => response.json()) .then((data) => { response_data = data; // Assign data to response_data if (data.file_exists) { document.getElementById("confirmation-dialog").style.display = "block"; } else { handleFormSubmission(); } }) .catch((error) => { console.error("Error checking file existence:", error); }); } }); function handleFormSubmission() { document.getElementById("confirmation-dialog").style.display = "none"; const formData = new FormData(document.getElementById("uploadform")); fetch("upload_file/", { method: "POST", headers: { "X-CSRFToken": "{{ csrf_token }}", }, body: formData, }) .then((response) => response.json()) .then((data) => { if (data.message_type) { Swal.fire({ icon: data.message_type, title: data.message_type === 'success' ? 'Success' : 'Error', text: data.message_text, timer: 3000, toast: true, position: 'top-right', showConfirmButton: false }); const form = document.getElementById("uploadform"); form.reset(); setTimeout(function(){ refreshTable(); },2000) } }) .catch((error) => { console.error("Error during form submission:", error); }); } document.getElementById("confirm-yes").addEventListener("click", function () { // Proceed with the file upload handleFormSubmission() }); document.getElementById("confirm-no").addEventListener("click", function () { // User canceled the upload document.getElementById("confirmation-dialog").style.display = "none"; }); refreshTable() // Define a function to refresh the table with updated data function refreshTable() { // Make an GET request to get updated table data from the server fetch("get_updated_table_data/", { method: "GET", headers: { Accept: "application/json", }, }) .then((response) => response.json()) .then((data) => { const tableBody = document.querySelector("#main-table tbody"); // Clear the existing table rows tableBody.innerHTML = ""; // Iterate over the data and add rows to the table data.forEach(function (row) { const thirtySecondsAgo = new Date(); thirtySecondsAgo.setSeconds(thirtySecondsAgo.getSeconds() - 60); if (row.completed && new Date(row.completed_at) > thirtySecondsAgo) { // Show an alert for the completed file Swal.fire({ icon: 'success', title: 'File Processed', text: `${row.filename} has been processed successfully.`, timer: 3000, toast: true, position: 'top-right', showConfirmButton: false, }) }; const newRow = ` ${row.id} ${row.filename} ${row.uploadDate} ${row.processDate} ${row.completeAt} ${row.completed ? `Process` : `Process`} Delete ${row.completed ? `ListView` : `ListView`} ${row.completed ? `Stats` : `Stats`} `; tableBody.innerHTML += newRow; }); }) .catch((error) => { console.error("Error refreshing the table:", error); }); } // Add an event listener to the document (or a parent element) to handle clicks on the "Delete" links document.addEventListener("click", function (event) { if (event.target && event.target.classList.contains("delete-link")) { event.preventDefault(); // Prevent the default link behavior const id = event.target.getAttribute("data-id"); // Confirm the delete action (optional) const confirmation = confirm("Are you sure you want to delete this item?"); if (!confirmation) { return; } // Send an AJAX request to delete the item fetch(`delete_file/${id}`, { method: "DELETE", headers: { "X-CSRFToken": "{{ csrf_token }}", // Include the CSRF token if needed }, }) .then((response) => response.json()) .then((data) => { event.target.closest("tr").remove(); // Remove the table row from the DOM if (data.message_type) { Swal.fire({ icon: data.message_type, title: data.message_type === 'success' ? 'Success' : 'Error', text: data.message_text, // Display the message_text from the server timer: 3000, toast: true, position: 'top-right', showConfirmButton: false }); } else { // Handle errors console.error("Error deleting item:", response.statusText); } }) .catch((error) => { console.error("Error deleting item:", error); }); } }); // Process file document.addEventListener("click", function (event) { if (event.target && event.target.classList.contains("process-link")) { event.preventDefault(); // Prevent the default link behavior console.log("Inside click"); if (event.target.classList.contains("disabled")) { event.preventDefault(); // Prevent the default link behavior for disabled links // Optionally, display a message indicating the link is disabled } else{ const id = event.target.getAttribute("data-id"); // Confirm the delete action (optional) const confirmation = confirm("Are you sure you want to process this file?"); if (!confirmation) { return; } // Send an AJAX request to delete the item fetch(`process_file/${id}`, { method: "POST", headers: { "X-CSRFToken": "{{ csrf_token }}", // Include the CSRF token if needed }, }) .then((response) => response.json()) .then((data) => { if (data.message_type) { Swal.fire({ icon: data.message_type, title: data.message_type === 'success' ? 'Success' : 'Error', text: data.message_text, // Display the message_text from the server timer: 3000, toast: true, position: 'top-right', showConfirmButton: false }); refreshTable(); } else { // Handle errors console.error("Error deleting item:", response.statusText); } }) .catch((error) => { console.error("Error deleting item:", error); }); } } }); setInterval(refreshTable, 5000); document.addEventListener("click", function (event) { if (event.target && event.target.classList.contains("show-link")) { event.preventDefault(); // Prevent the default link behavior // Get the data-id attribute from the clicked link const id = event.target.getAttribute("data-id"); // Construct the URL with the row.id as a query parameter const url = `display-streaming-table/${id}`; // Navigate to the new page window.location.href = url; } }); document.addEventListener("click", function (event) { if (event.target && event.target.classList.contains("show-stats")) { event.preventDefault(); // Prevent the default link behavior // Get the data-id attribute from the clicked link const id = event.target.getAttribute("data-id"); // Construct the URL with the row.id as a query parameter const url = `show-stats/${id}`; //const url = `showCucpWiseStats/${id}`; // Navigate to the new page window.location.href = url; } }); document.title = "5G RAN PCAP Analyzer" {% endblock %}