2023-02-27 16:23:25 +00:00
< div class = "files" >
< h1 > Gestionnnaire de fichiers< / h1 >
< / br >
< div class = "homepanel" >
< div class = "row w-100" >
< div class = "hbox col-lg" >
< div class = "fi_act" >
< h1 > < i class = "fa fa-folder" > < / i > Fichiers< / h1 >
< div >
< button class = "fi_act_btn" > < i class = "fa fa-folder" > < / i > Nouveau dossier< / button >
< button class = "fi_act_btn" > < i class = "fa fa-upload" > < / i > Upload< / button >
< / div >
< / div >
< div class = "fi_current_directory" >
< input id = "fi_current_directory" class = "fi_current_p" value = "C:\Users\picot\OneDrive\Bureau\Developement\Neutral\neutral" type = "text" >
< / div >
< div id = "fileExplorer" class = "fi_container" >
< p style = "text-align: start; color: rgb(255, 48, 48);" > Le répertoire n'existe pas ou est vide.< / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< script >
if(typeof currentDir == "undefined") {
const currentDir = document.getElementById("fi_current_directory")
const fileExplorer = document.getElementById("fileExplorer")
const fileExplorerError = fileExplorer.outerHTML
getDirectory(currentDir.value)
currentDir.addEventListener("change", () => {
getDirectory(currentDir.value)
})
function getDirectory(directory) {
var fileExplorerList = new Array()
fetch('/filemanager', {
method: 'POST',
redirect: 'follow',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({"request":"get", "value": directory})
})
.then(response => response.json())
.then(response => showLink(response))
function showLink(response) {
const files = response.content
console.log(files)
if(response.result == "failed") {
content.innerHTML = ' < h1 style = "color:red;" > < i style = "color:yellow; font-size: 2vw;" class = "fa fa-warning" > < / i > Erreur de chargement des données - Erreur : ' + response.content + '< / h1 > '
console.log("FAILED")
} else if(response.result == "success") {
if(response.content == "ERROR_NOT_EXIST") {
fileExplorer.innerHTML = fileExplorerError
console.log("DENY")
} else if(response.content == "ERROR_NOT_PERMITTED") {
fileExplorer.innerHTML = '< p style = "text-align: start; padding: 1vw; color: rgb(255, 48, 48);" > Vous n\'avez pas la permission de regarder ce dossier.< / p > '
console.log("DENY")
} else {
fileExplorerList.push('< div id = "last_directory" class = "fi_file" > < p style = "margin-left: 1vw;text-align:start;margin-bottom: 1vw !important;" > < i class = "fa fa-arrow-left" > < / i > Revenir au dossier parent< / p > < / div > ')
for(var file of files) {
const date = new Date(file.lastedition)
var gmonth = date.getMonth()
var gday = date.getDate()
var gHour = date.getHours()
var gMinute = date.getMinutes()
var gSecondes = date.getSeconds()
if(date.getMonth() + 1 < = 9) {
gmonth = "0" + (date.getMonth() + 1)
}
if(date.getDate() + 1 < = 9) {
gday = "0" + date.getDate()
}
if(date.getHours() + 1 < = 9) {
gHour = "0" + date.getHours()
}
if(date.getMinutes() + 1 < = 9) {
gMinute = "0" + date.getMinutes()
}
if(date.getSeconds() + 1 < = 9) {
gSecondes = "0" + date.getSeconds()
}
var lastedition = gday + "-" + gmonth + "-" + date.getFullYear() + " - " + gHour + ":" + gMinute
if(file.directory == true) {
fileExplorerList.push('< div id = "' + file.name + '_directory" class = "fi_file row" > < p class = "col-lg" > < i style = "color:yellow;" class = "fa fa-folder" > < / i > ' + file.name + '< / p > < p class = "col-lg" > < i class = "fa fa-calendar" > < / i > Dernière édition : ' + lastedition + '< / p > < p class = "col-lg" > < i class = "fas fa-weight-hanging" > < / i > Taille : ' + file.size + ' octet(s)< / p > < div class = "col-lg fi_file_btn" > < button id = "' + file.name + '_rename" class = "fi_rename" > < i class = "fas fa-terminal" > < / i > < / button > < button id = "' + file.name + '_delete" class = "fi_delete" > < i class = "fa fa-trash" > < / i > < / button > < / div > < / div > ')
}
}
for(var file of files) {
const date = new Date(file.lastedition)
var gmonth = date.getMonth()
var gday = date.getDate()
var gHour = date.getHours()
var gMinute = date.getMinutes()
var gSecondes = date.getSeconds()
if(date.getMonth() + 1 < = 9) {
gmonth = "0" + (date.getMonth() + 1)
}
if(date.getDate() + 1 < = 9) {
gday = "0" + date.getDate()
}
if(date.getHours() + 1 < = 9) {
gHour = "0" + date.getHours()
}
if(date.getMinutes() + 1 < = 9) {
gMinute = "0" + date.getMinutes()
}
if(date.getSeconds() + 1 < = 9) {
gSecondes = "0" + date.getSeconds()
}
var lastedition = gday + "-" + gmonth + "-" + date.getFullYear() + " - " + gHour + ":" + gMinute
if(file.directory == false) {
var icon = '< i class = "fa fa-file" > '
if(file.type == "application/json") {
icon = '< i style = "color:rgb(179, 141, 4);" class = "fa-sharp fa-solid fa-code" > '
}
if(file.type == "application/msword" | file.type == "application/vnd.openxmlformats-officedocument.wordprocessingml.document") {
icon = '< i style = "color:rgb(47, 94, 247);" class = "fa-solid fa-file-word" > < / i > '
}
if(file.type == "application/vnd.ms-powerpoint") {
icon = '< 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") {
icon = '< i style = "color:rgb(51, 255, 61);" class = "fa-solid fa-file-excel" > < / i > '
}
if(file.type == "application/java-archive") {
icon = '< i style = "color:rgb(255, 202, 150);" class = "fa-brands fa-java" > < / i > '
}
if(file.type == "application/x-sh") {
icon = '< 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") {
icon = '< i style = "color:rgb(53, 191, 255);" class = "fa-brands fa-windows" > < / i > '
}
if(file.type == "application/javascript") {
icon = '< i style = "color:rgb(179, 141, 4);" class = "fa-brands fa-js" > '
}
if(file.type == "image/png" | file.type == "image/jpeg") {
icon = '< i style = "color:rgb(189, 104, 189);" class = "fa-solid fa-file-image" > < / i > '
}
if(file.type == "text/html") {
icon = '< i style = "color:tomato;" class = "fa-brands fa-html5" > < / i > '
}
if(file.type == "text/css") {
icon = '< i style = "color:rgb(66, 135, 245);" class = "fa-brands fa-css3-alt" > < / i > '
}
if(file.type == "application/zip") {
icon = '< i style = "color:rgb(255, 139, 38);" class = "fa-solid fa-file-zipper" > < / i > '
}
if(file.type == "audio/mpeg") {
icon = '< i style = "color:rgb(38, 222, 255);" class = "fa-solid fa-file-audio" > < / i > '
}
if(file.type == "application/pdf") {
icon = '< i style = "color:rgb(255, 71, 51);" class = "fa-solid fa-file-pdf" > < / i > '
}
fileExplorerList.push('< div id = "' + file.name + '_directory" class = "fi_file row" > < p class = "col-lg" > ' + icon+ '< / i > ' + file.name + '< / p > < p class = "col-lg" > < i class = "fa fa-calendar" > < / i > Dernière édition : ' + lastedition + '< / p > < p class = "col-lg" > < i class = "fas fa-weight-hanging" > < / i > Taille : ' + file.size + ' octet(s)< / p > < div class = "col-lg fi_file_btn" > < button id = "' + file.name + '_rename" class = "fi_rename" > < i class = "fas fa-terminal" > < / i > < / button > < button id = "' + file + '_download" class = "fi_rename" > < i class = "fas fa-download" > < / i > < / button > < button id = "' + file.name + '_delete" class = "fi_delete" > < i class = "fa fa-trash" > < / i > < / button > < / div > < / div > ')
}
}
fileExplorer.innerHTML = fileExplorerList.join('')
const last_dir = document.getElementById("last_directory")
last_dir.addEventListener("click", () => {
2023-03-18 17:20:17 +00:00
var cdSplit = currentDir.value.split("/")
2023-02-27 16:23:25 +00:00
if(cdSplit.slice(-1) == "") {
cdSplit.pop()
cdSplit.pop()
} else {
cdSplit.pop()
}
2023-03-18 17:20:17 +00:00
currentDir.value = cdSplit.join("/")
2023-02-27 16:23:25 +00:00
getDirectory(currentDir.value)
})
for(var file of files ) {
applyFile(file)
}
function applyFile(file) {
const deleteBtn = document.getElementById(file.name + "_delete")
const renameBtn = document.getElementById(file.name + "_rename")
deleteBtn.addEventListener("click", () => {
console.log(file.name)
})
renameBtn.addEventListener("click", () => {
console.log(file.name)
})
if(file.directory == true) {
const dir = document.getElementById(file.name + '_directory')
dir.addEventListener("click", (event) => {
console.log(event.target.id != file.name + "_delete" & & event.target.id != file.name + "_rename")
if((event.target.id != file.name + "_delete" & event.target.id != file.name + "_rename") == true) {
if(currentDir.value.slice(-1) != "\\" & & currentDir.value.slice(-1) != "/") {
2023-03-18 17:20:17 +00:00
currentDir.value = currentDir.value + "/" + file.name
2023-02-27 16:23:25 +00:00
} else if(currentDir.value.slice(-1) == "/") {
currentDir.value = currentDir.value + file.name
} else {
currentDir.value = currentDir.value + file.name
}
getDirectory(currentDir.value)
}
})
}
}
}
}
}
}
}
/*< div id = "' + file + '_directory" class = "fi_file row" >
< p class = "col-lg" > < i class = "fa fa-folder" > < / i > < span id = "' + file + '_name" > < / span > < / p >
< p class = "col-lg" > < i class = "fa fa-calendar" > < / i > Dernière édition : < span id = "' + file + '_dateofcreate" > < / span > < / p >
< p class = "col-lg" > < i class = "fas fa-weight-hanging" > < / i > Taille : < span id = "' + file + '_dateofcreate" > < / span > < / p >
< div class = "col-lg fi_file_btn" >
< button id = "' + file + '_rename" class = "fi_rename" > < i class = "fas fa-terminal" > < / i > < / button >
< button id = "' + file + '_delete" class = "fi_delete" > < i class = "fa fa-trash" > < / i > < / button >
< / div >
< / div >
< div class = "fi_file row " >
< p class = "col-lg" > < i class = "fa fa-file" > < / i > < span id = "' + file + '_name" > < /span< / p >
< p class = "col-lg" > < i class = "fa fa-calendar" > < / i > Dernière édition : < span id = "' + file + '_dateofcreate" > < / span > < / p >
< p class = "col-lg" > < i class = "fas fa-weight-hanging" > < / i > Taille : < span id = "' + file + '_dateofcreate" > < / span > < / p >
< div class = "col-lg fi_file_btn" >
< button id = "' + file + '_rename" class = "fi_rename" > < i class = "fas fa-terminal" > < / i > < / button >
< button id = "' + file + '_download" class = "fi_rename" > < i class = "fas fa-download" > < / i > < / button >
< button id = "' + file + '_delete" class = "fi_delete" > < i class = "fa fa-trash" > < / i > < / button >
< / div >
< / div > */
< / script >
<!-- Style -->
< style >
.fi_file {
padding-top: 1vw;
border-bottom: 0.2vw solid rgb(80, 80, 80);
transition: all 0.2s ease 0s;
}
.fi_file:hover {
cursor: pointer;
background-color: rgb(80, 80, 80);
}
.fi_current_directory {
margin-top: 1vw;
margin-bottom: 1vw;
padding: 0.7vw;
border-radius: 1vw;
background-color: rgb(32, 32, 32);
transition: all 0.15s ease 0s;
display: flex;
justify-content: space-between;
}
.fi_current_directory:focus-within{
box-shadow: 1px 1px 10px rgb(0, 174, 255);
}
.fi_current_p {
margin-bottom: 0% !important;
background: none;
border: none;
color: white;
width: 100%;
}
.fi_current_p:focus {
outline: none;
}
.fi_file * {
margin-bottom: 0% !important;
}
.fi_container {
margin-top: 1vw ;
background-color: rgb(32, 32, 32) ;
border-radius: 1vw;
padding: 1vw;
text-align: center;
overflow-x: hidden;
overflow-y: auto;
}
.fi_act {
display: flex;
justify-content: space-between;
}
.hbox h1 {
font-size: large;
}
table {
color: white;
}
.hbox {
margin: 1%;
padding: 1%;
background-color: rgb(80, 80, 80);
border-radius: 1vw;
box-shadow: 5px 5px 5px rgba(80, 80, 80, 0.477) ;
}
.fi_act_btn {
border-radius: 1vw;
border-color: rgb(0, 174, 255);
border-width: 1%;
border-style: solid;
color: white;
background-color: transparent;
transition: all 0.2s ease 0s;
margin-left: 0.5vw;
margin-right: 0.5vw;
font-size: 0.7vw;
padding: 0.5vw;
}
.fi_act_btn:hover {
box-shadow: 1px 1px 10px rgb(0, 174, 255);
background-color: rgb(0, 174, 255);
color: black;
}
.fi_act_btn:active {
box-shadow: none;
}
.fi_rename {
border-radius: 100%;
border-color: rgb(0, 174, 255);
border-width: 1%;
border-style: solid;
color: white;
background-color: transparent;
transition: all 0.2s ease 0s;
width: 2vw;
height: 2vw;
margin-left: 0.5vw;
margin-right: 0.5vw;
font-size: 0.7vw;
}
.fi_rename:hover {
box-shadow: 1px 1px 10px rgb(0, 174, 255);
background-color: rgb(0, 174, 255);
color: black;
}
.fi_rename:active {
box-shadow: none;
}
.fi_delete {
border-radius: 100%;
border-color: rgb(255, 48, 48);
border-width: 1%;
border-style: solid;
color: white;
background-color: transparent;
transition: all 0.2s ease 0s;
width: 2vw;
height: 2vw;
margin-left: 0.5vw;
margin-right: 0.5vw;
font-size: 0.7vw;
}
.fi_delete:hover {
box-shadow: 1px 1px 10px rgb(255, 48, 48);
background-color: rgb(255, 48, 48);
color: black;
}
.fi_delete:active {
box-shadow: none;
}
.fi_file_btn {
margin-bottom: 0.5vw !important;
}
< / style >
