Version 0.2.0 - PREVERSION - Ajout READ de l'explorateur
All checks were successful
Neutral/pipeline/head This commit looks good
All checks were successful
Neutral/pipeline/head This commit looks good
This commit is contained in:
Raphix
232
public/javascripts/filexplorer.js
Normal file
232
public/javascripts/filexplorer.js
Normal file
@ -0,0 +1,232 @@
|
||||
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];
|
||||
}
|
||||
Reference in New Issue
Block a user