232 lines
7.2 KiB
JavaScript
232 lines
7.2 KiB
JavaScript
|
document.addEventListener("contextmenu", (e) => {
|
||
|
|
||
|
e.preventDefault()
|
||
|
})
|
||
|
|
||
|
function generateFileExplorer() {
|
||
|
|
||
|
const View = new ViewWindow({
|
||
|
title: `<i class="fa fa-folder"></i> Gestionnaire de fichiers`,
|
||
|
width: "1000px",
|
||
|
height: "600px"
|
||
|
})
|
||
|
|
||
|
goHomePath()
|
||
|
function goHomePath() {
|
||
|
const rFiles = post("FX_GET", "homepath")
|
||
|
|
||
|
rFiles.then((result) => {
|
||
|
loadFiles(result)
|
||
|
})
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
View.setContent(`
|
||
|
<div class="fx-window">
|
||
|
<div class='fx-bar'>
|
||
|
<span id='fx-home' class='btn-cover'><i class='fa fa-home'></i></span>
|
||
|
<input class='fx-root-input' type="text" id='${View.getViewTitle()}_rootInput'>
|
||
|
<div class='fx-bar-actions'>
|
||
|
<button class='btn blue'><span><i class='fa fa-folder'></i> Nouv. dossier</span></button>
|
||
|
<button class='btn blue'><span><i class="fa-solid fa-file-arrow-up"></i> Upload</span></button>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div id='${View.getViewTitle()}_explorer' class='fx-explorer'>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
`)
|
||
|
|
||
|
const rootInput = getID(View.getViewTitle() + '_rootInput')
|
||
|
const explorer = getID(View.getViewTitle() + '_explorer')
|
||
|
|
||
|
rootInput.addEventListener("change", () => {
|
||
|
|
||
|
const reqFiles = post("FX_GET", rootInput.value)
|
||
|
reqFiles.then((result) => {
|
||
|
loadFiles(result)
|
||
|
|
||
|
})
|
||
|
})
|
||
|
|
||
|
function loadFiles(files) {
|
||
|
|
||
|
rootInput.value = files.root
|
||
|
var fileElements = new Array()
|
||
|
|
||
|
if(files.content == "NOT_PERMITTED") {
|
||
|
fileElements.unshift(`<div id='fx-parent' class='fx-element'><p><i class="fa-solid fa-rotate-left"></i> Revenir au dossier parent </p></div>`)
|
||
|
fileElements.push("<p class='yellow' style='text-align: center;'><i class='fa fa-warning'></i> Vous n'avez pas les permissions pour accéder à ce dossier.</p>")
|
||
|
|
||
|
} else if(files.content == "NOT_EXIST") {
|
||
|
fileElements.unshift(`<div id='fx-parent' class='fx-element'><p><i class="fa-solid fa-rotate-left"></i> Revenir au dossier parent </p></div>`)
|
||
|
explorer.innerHTML = "<p class='yellow' style='text-align: center;'><i class='fa fa-warning'></i> Ce dossier n'existe pas.</p>"
|
||
|
} else {
|
||
|
|
||
|
fileElements.unshift(`<div id='fx-parent' class='fx-element'><p><i class="fa-solid fa-rotate-left"></i> Revenir au dossier parent </p></div>`)
|
||
|
for(const file of files.content) {
|
||
|
|
||
|
// Convert all file.size to a human readable format with units
|
||
|
|
||
|
file.size = bytesToSize(file.size)
|
||
|
|
||
|
//Tell if the file is a directory or not
|
||
|
|
||
|
if(file.directory) {
|
||
|
file.size = "Dossier"
|
||
|
}
|
||
|
|
||
|
fileElements.push(`<div id='${file.id}' oncontextmenu='createFileMenu("${file.id}")' class='fx-element'>
|
||
|
<div>
|
||
|
${getIcon(file)}
|
||
|
<p>${file.name}</p>
|
||
|
</div>
|
||
|
<p>Taille : ${file.size}</p>
|
||
|
<p>Date de modification : ${getFormattedDate(file.lastedition)}</p>
|
||
|
</div>`)
|
||
|
}
|
||
|
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
explorer.innerHTML = fileElements.join("")
|
||
|
|
||
|
const parent = document.getElementById("fx-parent")
|
||
|
const home = document.getElementById("fx-home")
|
||
|
|
||
|
home.addEventListener("click", () => {
|
||
|
|
||
|
goHomePath()
|
||
|
|
||
|
})
|
||
|
|
||
|
parent.addEventListener("click", () => {
|
||
|
|
||
|
const reqFiles = post("FX_GET", files.parent)
|
||
|
reqFiles.then((result) => {
|
||
|
loadFiles(result)
|
||
|
})
|
||
|
|
||
|
})
|
||
|
|
||
|
if(files.content != "NOT_PERMITTED" && files.content != "NOT_EXIST") {
|
||
|
|
||
|
// If it's a directory, get the file directory and make the request to get the files in it and loadIt
|
||
|
|
||
|
for(const file of files.content) {
|
||
|
|
||
|
if(file.directory) {
|
||
|
|
||
|
const element = document.getElementById(file.id)
|
||
|
element.addEventListener("click", () => {
|
||
|
|
||
|
const reqFiles = post("FX_GET", file.fileDirectory)
|
||
|
reqFiles.then((result) => {
|
||
|
loadFiles(result)
|
||
|
})
|
||
|
})
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
|
||
|
|
||
|
}
|
||
|
|
||
|
function createFileMenu(idCreated) {
|
||
|
|
||
|
const dropMenu = new DroppableMenu({
|
||
|
"id": idCreated
|
||
|
})
|
||
|
|
||
|
dropMenu.add("rename", "<i class='fa-solid fa-file-signature'></i> Renommer")
|
||
|
dropMenu.add("share", "<i class='fa fa-share'></i> Partager")
|
||
|
dropMenu.add("delete", "<i class='fa fa-trash'></i> Supprimer")
|
||
|
|
||
|
|
||
|
dropMenu.show()
|
||
|
}
|
||
|
|
||
|
function getIcon(file) {
|
||
|
if(file.type == "application/json") {
|
||
|
|
||
|
return '<i style="color:rgb(179, 141, 4);" class="fa-sharp fa-code"></i>'
|
||
|
}
|
||
|
if(file.type == "application/msword" | file.type == "application/vnd.openxmlformats-officedocument.wordprocessingml.document") {
|
||
|
|
||
|
return '<i style="color:rgb(47, 94, 247);" class="fa-solid fa-file-word"></i>'
|
||
|
}
|
||
|
if(file.type == "application/vnd.ms-powerpoint") {
|
||
|
|
||
|
return '<i style="color:rgb(255, 112, 51);" class="fa-solid fa-file-powerpoint"></i>'
|
||
|
}
|
||
|
if(file.type == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" | file.type == "application/vnd.ms-excel") {
|
||
|
|
||
|
return '<i style="color:rgb(51, 255, 61);" class="fa-solid fa-file-excel"></i>'
|
||
|
}
|
||
|
|
||
|
if(file.type == "application/java-archive") {
|
||
|
|
||
|
return '<i style="color:rgb(255, 202, 150);" class="fa-brands fa-java"></i>'
|
||
|
}
|
||
|
|
||
|
if(file.type == "application/x-sh") {
|
||
|
|
||
|
return '<i style="color:rgb(171, 226, 255);" class="fa-solid fa-file-code"></i>'
|
||
|
}
|
||
|
|
||
|
if(file.type == "application/x-msdos-program" | file.type == "application/x-msdownload") {
|
||
|
|
||
|
return'<i style="color:rgb(53, 191, 255);" class="fa-brands fa-windows"></i>'
|
||
|
}
|
||
|
if(file.type == "application/javascript") {
|
||
|
|
||
|
return '<i style="color:rgb(179, 141, 4);" class="fa-brands fa-js">'
|
||
|
}
|
||
|
if(file.type == "image/png" | file.type == "image/jpeg") {
|
||
|
|
||
|
return '<i style="color:rgb(189, 104, 189);" class="fa-solid fa-file-image"></i>'
|
||
|
}
|
||
|
if(file.type == "text/html") {
|
||
|
|
||
|
return '<i style="color:tomato;" class="fa-brands fa-html5"></i>'
|
||
|
}
|
||
|
if(file.type == "text/css") {
|
||
|
|
||
|
return '<i style="color:rgb(66, 135, 245);" class="fa-brands fa-css3-alt"></i>'
|
||
|
}
|
||
|
if(file.type == "application/zip") {
|
||
|
|
||
|
return '<i style="color:rgb(255, 139, 38);" class="fa-solid fa-file-zipper"></i>'
|
||
|
}
|
||
|
if(file.type == "audio/mpeg") {
|
||
|
|
||
|
return '<i style="color:rgb(38, 222, 255);" class="fa-solid fa-file-audio"></i>'
|
||
|
}
|
||
|
if(file.type == "application/pdf") {
|
||
|
|
||
|
return '<i style="color:rgb(255, 71, 51);" class="fa-solid fa-file-pdf"></i>'
|
||
|
}
|
||
|
if(file.directory) {
|
||
|
|
||
|
return '<i style="color:yellow;" class="fa fa-folder"></i>'
|
||
|
} else {
|
||
|
|
||
|
return '<i class="fa fa-file"></i>'
|
||
|
}
|
||
|
|
||
|
}
|
||
|
|
||
|
function bytesToSize(bytes) {
|
||
|
var sizes = ['o', 'Ko', 'Mo', 'Go', 'To'];
|
||
|
if (bytes == 0) return '0 o';
|
||
|
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
|
||
|
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
|
||
|
}
|