A file with the same name already exists. Do you want to replace it and Associated data
removed?
id |
Filename |
Uploaded Time |
ProcessStart Time |
Completed Time |
Actions |
A file with the same name already exists. Do you want to replace it and Associated data
removed?
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,
stateSave: 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);
}, 5000);
});
// 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");
const network = getActiveTabNetwork();
handleShowStatsClick(id,network);
});
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);
});
}
}
// Import the JSZip library
// Function to handle form submission
function handleFormSubmission(network) {
hideConfirmationDialog(network);
const formData = new FormData(document.getElementById(`uploadform-${network}`));
const fileInput = document.getElementById(`file_upload_${network}`);
const selectedFile = fileInput.files[0];
if (selectedFile) {
// Create a new JSZip instance
const zip = new JSZip();
// Read the file data and add it to the ZIP archive with the original filename
zip.file(selectedFile.name, selectedFile);
// Example: Use Deflate compression
zip.generateAsync({ type: 'blob', compression: 'DEFLATE' })
.then((zipBlob) => {
// Create a new File object with the ZIP blob and the original filename
const zipFilename = selectedFile.name.replace(/\.[^/.]+$/, "") + '.zip';
const zipFile = new File([zipBlob], zipFilename, { type: 'application/zip' });
// Replace the original file in the FormData with the ZIP file
formData.set('file_upload', zipFile);
formData.append('network', network);
// Perform the fetch request
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);
});
})
.catch((zipError) => {
console.error("Error creating ZIP file:", zipError);
});
}
}
// 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);
refreshTable("5G-SA", table5GSA);
} 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,network) {
navigateToPage(`show-stats/${network}/${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 %}