{% extends "base.html" %} {% block content %}
{% csrf_token %}
id Filename Uploaded Date Processed Date Completed Date Actions
{% csrf_token %}
id Filename Uploaded Date Processed Date Completed Date Actions
{% endblock %} {% block js %} let dataTable; // Function to initialize DataTable function initializeDataTable(tableId) { return $(tableId).DataTable({ pageLength: 50, paging: true, columns: [ { data: 'id' }, { data: 'filename' }, { data: 'uploadDate' }, { data: 'processDate' }, { data: 'completeAt' }, { data: null, render: function (data, type, row) { const processedLink = row.processed ? 'Process' : 'Process'; const deleteLink = 'Delete'; const showLink = row.completed ? 'ListView' : 'ListView'; const statsLink = (row.completed && row.processing_status === '') || (row.completed && row.processing_status !== 'In-Progress') ? 'Stats' : 'Stats'; // Combine all the links return processedLink + ' || ' + deleteLink + ' || ' + showLink + ' || ' + statsLink; }, className: 'no-wrap', }, ], }); } // Set up event listeners document.getElementById("confirm_upload_5G-SA").addEventListener("click", () => handleUploadClick("5G-SA")); document.getElementById("confirm_upload_5G-NSA").addEventListener("click", () => handleUploadClick("5G-NSA")); document.getElementById("confirm-yes_5G-SA").addEventListener("click", () => handleFormSubmission("5G-SA")); document.getElementById("confirm-yes_5G-NSA").addEventListener("click", () => handleFormSubmission("5G-NSA")); document.getElementById("confirm-no_5G-SA").addEventListener("click", () => hideConfirmationDialog("5G-SA")); document.getElementById("confirm-no_5G-NSA").addEventListener("click", () => hideConfirmationDialog("5G-NSA")); let table5GSA; let table5GNSA; function getActiveDataTable(network) { return network === "5G-SA" ? table5GSA : table5GNSA; } document.addEventListener("DOMContentLoaded", function () { // Initialize DataTables for 5G-SA and 5G-NSA table5GSA = initializeDataTable("#main-table-5G-SA"); table5GNSA = initializeDataTable("#main-table-5G-NSA"); refreshTable("5G-SA", table5GSA); refreshTable("5G-NSA", table5GNSA); // Set up interval for refreshing tables every 3 seconds setInterval(() => { refreshTable("5G-SA", table5GSA); refreshTable("5G-NSA", table5GNSA); }, 15000); }); // Set up event listeners for links $(document).on("click", ".delete-link", function () { const id = $(this).data("id"); handleDeleteLinkClick(id); }); $(document).on("click", ".process-link", function () { const id = $(this).data("id"); console.log(id) handleProcessLinkClick(id); }); $(document).on("click", ".show-link", function () { const id = $(this).data("id"); const network = getActiveTabNetwork(); handleShowLinkClick(id,network); }); $(document).on("click", ".show-stats", function () { const id = $(this).data("id"); handleShowStatsClick(id); }); document.title = "5G RAN PCAP Analyzer"; // Function to handle upload button click function handleUploadClick(network) { const fileUploadId = `file_upload_${network}`; const confirmUploadId = `confirm_upload_${network}`; const fileName = document.getElementById(fileUploadId).files[0].name; if (fileName) { fetchFileExistence(fileName) .then((data) => { if (data.file_exists) { showConfirmationDialog(network); } else { handleFormSubmission(network); } }) .catch((error) => { console.error("Error checking file existence:", error); }); } } // Function to handle form submission function handleFormSubmission(network) { hideConfirmationDialog(network); const formData = new FormData(document.getElementById(`uploadform-${network}`)); formData.append('network', network); fetch(`upload_file/`, { method: "POST", headers: { "X-CSRFToken": "{{ csrf_token }}", }, body: formData, }) .then((response) => response.json()) .then((data) => { if (data.message_type) { showNotification(data.message_type, data.message_text); const form = document.getElementById(`uploadform-${network}`); form.reset(); } }) .catch((error) => { console.error("Error during form submission:", error); }); } // Function to handle delete link click function handleDeleteLinkClick(id) { const confirmation = confirm("Are you sure you want to delete this item?"); if (confirmation) { fetch(`delete_file/${id}`, { method: "DELETE", headers: { "X-CSRFToken": "{{ csrf_token }}", }, }) .then((response) => response.json()) .then((data) => { if (data.message_type) { showNotification(data.message_type, data.message_text); // After successful deletion, refresh the corresponding table const network = getActiveTabNetwork(); if (network === "5G-SA") { console.log(network) removeTableRow(id, table5GSA); } else if (network === "5G-NSA") { console.log(network) removeTableRow(id, table5GNSA); } } else { console.error("Error deleting item:", response.statusText); } }) .catch((error) => { console.error("Error deleting item:", error); }); } } // Function to handle process link click function handleProcessLinkClick(id) { const confirmation = confirm("Are you sure you want to process this file?"); if (confirmation) { fetch(`process_file/${id}`, { method: "POST", headers: { "X-CSRFToken": "{{ csrf_token }}", }, }) .then((response) => response.json()) .then((data) => { if (data.message_type) { showNotification(data.message_type, data.message_text); } else { console.error("Error processing file:", response.statusText); } }) .catch((error) => { console.error("Error processing file:", error); }); } } // Function to handle show link click function handleShowLinkClick(id,network) { navigateToPage(`display-streaming-table/${network}/${id}`); } // Function to handle show stats link click function handleShowStatsClick(id) { navigateToPage(`show-stats/${id}`); } // Function to handle link click based on class function handleLinkClick(event, className, clickHandler) { if (event.target && event.target.classList.contains(className)) { event.preventDefault(); const id = event.target.getAttribute("data-id"); clickHandler(id); } } // Function to show confirmation dialog function showConfirmationDialog(network) { document.getElementById(`confirmation-dialog-${network}`).style.display = "block"; } // Function to hide confirmation dialog function hideConfirmationDialog(network) { document.getElementById(`confirmation-dialog-${network}`).style.display = "none"; } // Function to show notification function showNotification(icon, text) { Swal.fire({ icon: icon, title: icon === 'success' ? 'Success' : 'Error', text: text, timer: 3000, toast: true, position: 'top-right', showConfirmButton: false }); } // Function to fetch file existence function fetchFileExistence(fileName) { return 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()); } // Function to refresh the table function refreshTable(network, dataTable) { dataTable.clear(); fetch(`get_updated_table_data/`, { method: "GET", }) .then((response) => response.json()) .then((data) => { data.forEach((row) => { if (row.network === network) { dataTable.row.add(row).draw(); } }); }) .catch((error) => { console.error("Error refreshing the table:", error); }); } function removeTableRow(id, dataTable) { const index = dataTable.row(`[data-id="${id}"]`).index(); if (index !== -1) { dataTable.row(index).remove().draw(false); } } // Function to navigate to a new page function navigateToPage(url) { window.location.href = url; } // Function to get the network of the active tab function getActiveTabNetwork() { const activeTab = document.querySelector("#myTabs .nav-link.active"); console.log(activeTab) if (activeTab) { const tabId = activeTab.getAttribute("id"); console.log(tabId) if (tabId) { return tabId.replace("tab-", ""); } } } // Function to save the active tab in localStorage function saveActiveTab() { const activeTab = document.querySelector("#myTabs .nav-link.active"); if (activeTab) { const tabId = activeTab.getAttribute("id"); localStorage.setItem("activeTab", tabId); } } // Function to restore the active tab from localStorage function restoreActiveTab() { const activeTabId = localStorage.getItem("activeTab"); if (activeTabId) { const activeTab = document.getElementById(activeTabId); if (activeTab) { activeTab.click(); // Programmatically click the tab to activate it } } } // Save the active tab when a tab is clicked document.getElementById("myTabs").addEventListener("click", saveActiveTab); // Restore the active tab on page load document.addEventListener("DOMContentLoaded", restoreActiveTab); {% endblock %}