235 lines
10 KiB
JavaScript
235 lines
10 KiB
JavaScript
let fileData = []; // Store file data globally
|
|
let sortOrder = { column: "uploaded", ascending: false }; // Default sorting by uploaded date (newest first)
|
|
|
|
// Load and display the file list
|
|
window.loadFileList = function () {
|
|
fetch("checkAuth.php")
|
|
.then(response => response.json())
|
|
.then(authData => {
|
|
if (!authData.authenticated) {
|
|
console.warn("User not authenticated, hiding file list.");
|
|
document.getElementById("fileListContainer").style.display = "none";
|
|
return;
|
|
}
|
|
document.getElementById("fileListContainer").style.display = "block";
|
|
fetch("getFileList.php")
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.error) {
|
|
document.getElementById("fileList").innerHTML = `<p style="color:red;">Error: ${data.error}</p>`;
|
|
return;
|
|
}
|
|
if (!Array.isArray(data.files)) {
|
|
console.error("Unexpected response format:", data);
|
|
return;
|
|
}
|
|
fileData = data.files; // Store file data globally
|
|
sortFiles("uploaded", false); // Sort by upload date (newest first) on load
|
|
})
|
|
.catch(error => console.error("Error fetching file list:", error));
|
|
})
|
|
.catch(error => console.error("Error checking authentication:", error));
|
|
};
|
|
|
|
// Sort files when clicking headers
|
|
function sortFiles(column, forceAscending = null) {
|
|
if (sortOrder.column === column) {
|
|
sortOrder.ascending = forceAscending !== null ? forceAscending : !sortOrder.ascending; // Toggle order
|
|
} else {
|
|
sortOrder.column = column;
|
|
sortOrder.ascending = forceAscending !== null ? forceAscending : true; // Default to ascending when switching column
|
|
}
|
|
fileData.sort((a, b) => {
|
|
let valA = a[column] || "";
|
|
let valB = b[column] || "";
|
|
if (typeof valA === "string") valA = valA.toLowerCase();
|
|
if (typeof valB === "string") valB = valB.toLowerCase();
|
|
if (valA < valB) return sortOrder.ascending ? -1 : 1;
|
|
if (valA > valB) return sortOrder.ascending ? 1 : -1;
|
|
return 0;
|
|
});
|
|
renderFileTable(); // Re-render table after sorting
|
|
}
|
|
|
|
// Function to render file table
|
|
function renderFileTable() {
|
|
const fileListContainer = document.getElementById("fileList");
|
|
let tableHTML = `<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th><input type="checkbox" id="selectAll" onclick="toggleAllCheckboxes(this)"></th>
|
|
<th onclick="sortFiles('name')" style="cursor:pointer; text-decoration: underline; white-space: nowrap;">
|
|
<span>File Name</span> <span>${sortOrder.column === "name" ? (sortOrder.ascending ? "▲" : "▼") : ""}</span>
|
|
</th>
|
|
<th onclick="sortFiles('modified')" style="cursor:pointer; text-decoration: underline; white-space: nowrap;">
|
|
<span>Date Modified</span> <span>${sortOrder.column === "modified" ? (sortOrder.ascending ? "▲" : "▼") : ""}</span>
|
|
</th>
|
|
<th onclick="sortFiles('uploaded')" style="cursor:pointer; text-decoration: underline; white-space: nowrap;">
|
|
<span>Upload Date</span> <span>${sortOrder.column === "uploaded" ? (sortOrder.ascending ? "▲" : "▼") : ""}</span>
|
|
</th>
|
|
<th onclick="sortFiles('sizeBytes')" style="cursor:pointer; text-decoration: underline; white-space: nowrap;">
|
|
<span>File Size</span> <span>${sortOrder.column === "sizeBytes" ? (sortOrder.ascending ? "▲" : "▼") : ""}</span>
|
|
</th>
|
|
<th onclick="sortFiles('uploader')" style="cursor:pointer; text-decoration: underline; white-space: nowrap;">
|
|
<span>Uploader</span> <span>${sortOrder.column === "uploader" ? (sortOrder.ascending ? "▲" : "▼") : ""}</span>
|
|
</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>`;
|
|
|
|
fileData.forEach(file => {
|
|
const isEditable = file.name.endsWith(".txt") || file.name.endsWith(".json") ||
|
|
file.name.endsWith(".ini") || file.name.endsWith(".css") ||
|
|
file.name.endsWith(".js") || file.name.endsWith(".csv") ||
|
|
file.name.endsWith(".md") || file.name.endsWith(".xml") ||
|
|
file.name.endsWith(".html") || file.name.endsWith(".py") ||
|
|
file.name.endsWith(".log") || file.name.endsWith(".conf") ||
|
|
file.name.endsWith(".config") || file.name.endsWith(".bat") ||
|
|
file.name.endsWith(".rtf") || file.name.endsWith(".doc") ||
|
|
file.name.endsWith(".docx");
|
|
tableHTML += `<tr>
|
|
<td><input type="checkbox" class="file-checkbox" value="${file.name}" onclick="toggleDeleteButton()"></td>
|
|
<td>${file.name}</td>
|
|
<td style="white-space: nowrap;">${file.modified}</td>
|
|
<td style="white-space: nowrap;">${file.uploaded}</td>
|
|
<td style="white-space: nowrap;">${file.size}</td>
|
|
<td style="white-space: nowrap;">${file.uploader || "Unknown"}</td>
|
|
<td>
|
|
<div style="display: inline-flex; align-items: center; gap: 5px; flex-wrap: nowrap;">
|
|
<a href="uploads/${file.name}" download>Download</a>
|
|
${isEditable ? `<button onclick="editFile('${file.name}')">Edit</button>` : ""}
|
|
</div>
|
|
</td>
|
|
</tr>`;
|
|
});
|
|
|
|
tableHTML += `</tbody></table>`;
|
|
fileListContainer.innerHTML = tableHTML;
|
|
|
|
// Always display the batch delete button if there are files; disable it if no file is selected.
|
|
const deleteBtn = document.getElementById("deleteSelectedBtn");
|
|
if (fileData.length > 0) {
|
|
deleteBtn.style.display = "block";
|
|
// Check if any checkboxes are selected to enable the button; if none, disable it.
|
|
const selectedFiles = document.querySelectorAll(".file-checkbox:checked");
|
|
deleteBtn.disabled = selectedFiles.length === 0;
|
|
} else {
|
|
deleteBtn.style.display = "none";
|
|
}
|
|
}
|
|
|
|
// Function to toggle delete button enabled state
|
|
function toggleDeleteButton() {
|
|
const selectedFiles = document.querySelectorAll(".file-checkbox:checked");
|
|
const deleteBtn = document.getElementById("deleteSelectedBtn");
|
|
deleteBtn.disabled = selectedFiles.length === 0;
|
|
}
|
|
|
|
// Select/Deselect All Checkboxes
|
|
window.toggleAllCheckboxes = function (source) {
|
|
const checkboxes = document.querySelectorAll(".file-checkbox");
|
|
checkboxes.forEach(checkbox => checkbox.checked = source.checked);
|
|
toggleDeleteButton();
|
|
};
|
|
|
|
// Batch delete function
|
|
window.deleteSelectedFiles = function () {
|
|
const selectedFiles = Array.from(document.querySelectorAll(".file-checkbox:checked"))
|
|
.map(checkbox => checkbox.value);
|
|
if (selectedFiles.length === 0) {
|
|
alert("No files selected for deletion.");
|
|
return;
|
|
}
|
|
if (!confirm(`Are you sure you want to delete the selected files?`)) {
|
|
return;
|
|
}
|
|
fetch("deleteFile.php", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ files: selectedFiles })
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
alert(result.success || result.error);
|
|
loadFileList();
|
|
})
|
|
.catch(error => console.error("Error deleting files:", error));
|
|
};
|
|
|
|
// Attach event listener to batch delete button
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const deleteBtn = document.getElementById("deleteSelectedBtn");
|
|
if (deleteBtn) {
|
|
deleteBtn.addEventListener("click", deleteSelectedFiles);
|
|
}
|
|
});
|
|
|
|
window.editFile = function(fileName) {
|
|
console.log("Edit button clicked for:", fileName);
|
|
let existingEditor = document.getElementById("editorContainer");
|
|
if (existingEditor) {
|
|
existingEditor.remove();
|
|
}
|
|
fetch(`uploads/${fileName}?t=${new Date().getTime()}`)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! Status: ${response.status}`);
|
|
}
|
|
return response.text();
|
|
})
|
|
.then(content => {
|
|
const editorContainer = document.createElement("div");
|
|
editorContainer.id = "editorContainer";
|
|
editorContainer.style.position = "fixed";
|
|
editorContainer.style.top = "50%";
|
|
editorContainer.style.left = "50%";
|
|
editorContainer.style.transform = "translate(-50%, -50%)";
|
|
editorContainer.style.background = "white";
|
|
editorContainer.style.padding = "15px";
|
|
editorContainer.style.border = "1px solid black";
|
|
editorContainer.style.boxShadow = "0px 4px 6px rgba(0,0,0,0.1)";
|
|
editorContainer.style.zIndex = "1000";
|
|
editorContainer.style.width = "80vw";
|
|
editorContainer.style.maxWidth = "90vw";
|
|
editorContainer.style.minWidth = "400px";
|
|
editorContainer.style.height = "400px";
|
|
editorContainer.style.maxHeight = "80vh";
|
|
editorContainer.style.overflow = "auto";
|
|
editorContainer.style.resize = "both";
|
|
editorContainer.innerHTML = `
|
|
<h3>Editing: ${fileName}</h3>
|
|
<textarea id="fileEditor" style="width: 100%; height: 80%; resize: none;">${content}</textarea>
|
|
<br>
|
|
<button onclick="saveFile('${fileName}')">Save</button>
|
|
<button onclick="document.getElementById('editorContainer').remove()">Close</button>
|
|
`;
|
|
document.body.appendChild(editorContainer);
|
|
})
|
|
.catch(error => console.error("Error loading file:", error));
|
|
};
|
|
|
|
window.saveFile = function(fileName) {
|
|
const editor = document.getElementById("fileEditor");
|
|
if (!editor) {
|
|
console.error("Editor not found!");
|
|
return;
|
|
}
|
|
const fileData = {
|
|
fileName: fileName,
|
|
content: editor.value
|
|
};
|
|
fetch("saveFile.php", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(fileData)
|
|
})
|
|
.then(response => response.json())
|
|
.then(result => {
|
|
alert(result.success || result.error);
|
|
document.getElementById("editorContainer")?.remove();
|
|
loadFileList();
|
|
})
|
|
.catch(error => console.error("Error saving file:", error));
|
|
};
|