Version 0.2.0 - PREVERSION - Ajout READ de l'explorateur

public/javascripts/basics.js

@@ -1,5 +1,8 @@
+
+
 // Get Document ID
 
+
 /**
  * Récupère depuis le document l'identifiant de l'élément
  * @param {string} id Identifiant de l'élément `id='identifiant'`
@@ -43,3 +46,223 @@ class InfoPop {
 
 }
 
+
+const viewsAccessible = new Map()
+
+var xMousePos = null;
+var yMousePos = null;
+
+document.onmousemove = function(e) {
+  xMousePos = e.clientX + window.scrollX;
+  yMousePos = e.clientY + window.scrollY;
+
+}
+
+document.oncontextmenu = function(e) {
+
+    xMousePos = e.clientX + window.scrollX;
+    yMousePos = e.clientY + window.scrollY;
+  
+}
+
+
+class ViewWindow {
+    ViewHTML = null
+    ViewProperties =null
+    ViewSpanInteger = null
+    constructor(properties) {
+        if(!viewsAccessible.has(properties.title)) {
+
+            this.ViewProperties = properties
+            viewsAccessible.set(properties.title, true)
+            
+            this.ViewHTML = `
+                <div draggable="true" id='${properties.title}_window' style='width: ${properties.width}; height: ${properties.height}' class='view-window'>
+                    <div id='${properties.title}_header' class='view-window-header'>
+                    <span style='width: 40px'></span>
+                    <p>${properties.title}</p>
+                    <button id='${properties.title}_close' class='btn min red'><span><i class='fa fa-xmark'></i></span></button>
+                    </div>
+                    <div id='${properties.title}_content' class='view-window-content'>
+                    </div>
+                </div>
+            `
+            this.ViewSpanInteger = document.createElement("div")
+            document.body.appendChild(this.ViewSpanInteger);
+            this.ViewSpanInteger.outerHTML = this.ViewHTML
+
+            const closeWindow = document.getElementById(properties.title + "_close")
+            closeWindow.addEventListener("click", () => {
+    
+                this.destroy()
+              
+            })
+    
+            const header = document.getElementById(properties.title + "_header")
+            const windowDiv  = document.getElementById(properties.title + "_window")
+    
+            let isDragging = false;
+            let offsetX, offsetY;
+    
+            header.addEventListener('mousedown', (e) => {
+                isDragging = true;
+            
+                // Enregistrez la position de la souris par rapport à la fenêtre
+                offsetX = e.clientX - windowDiv.getBoundingClientRect().left;
+                offsetY = e.clientY - windowDiv.getBoundingClientRect().top;
+              });
+            
+              // Gérer le déplacement
+              document.addEventListener('mousemove', (e) => {
+                if (isDragging) {
+                    
+                  header.style.cursor = "grab"
+                  
+                  // Calculez la nouvelle position de la fenêtre en fonction de la position de la souris
+                  const newLeft = e.clientX - offsetX;
+                  const newTop = e.clientY - offsetY;
+            
+                  // Limitation de la position pour éviter un débordement
+                  const maxX = window.innerWidth - windowDiv.offsetWidth;
+                  const maxY = window.innerHeight - windowDiv.offsetHeight;
+                  
+                  windowDiv.style.left = Math.min(Math.max(newLeft, 0), maxX) + 'px';
+                  windowDiv.style.top = Math.min(Math.max(newTop, 0), maxY) + 'px';
+                }
+              });
+            
+              // Gérer la fin du glisser-déposer
+              document.addEventListener('mouseup', () => {
+                header.style.cursor = "unset"
+                isDragging = false;
+              });
+
+
+
+        }
+
+    }
+
+    destroy() {
+        const win = getID(`${this.ViewProperties.title}_window`)
+        win.outerHTML = ""
+        viewsAccessible.delete(this.ViewProperties.title)
+    }
+
+    setContent(text) {
+        const contentDiv = document.getElementById(this.ViewProperties.title + "_content")
+        contentDiv.innerHTML = text
+    }
+
+    getViewTitle() {
+
+        return this.ViewProperties.title
+    }
+
+}
+
+createView("files_explorer")
+
+function createView(viewType) {
+    if(viewType == 'files_explorer') {
+
+        generateFileExplorer()
+
+
+    }
+    if(viewType == 'service') {
+
+        const View = new ViewWindow({
+            title: "Gestionnaire des services",
+            width: "1000px",
+            height: "600px"
+        })
+    }
+   
+}
+
+
+class DroppableMenu {
+    options = new Array()
+    id = null
+    DMSpanInteger = null
+    constructor(properties) {
+ 
+        this.id = properties.id
+        this.options.push(`<div id='dm-${this.id}' class='dm-menu'>`)
+
+    }
+
+    add(action, string) {
+      
+        this.options.push("<div id='" + this.id + "_" + action + "' class='dm-element'>" + string + "</div>")
+        
+    }
+
+    show() {
+       
+        
+            this.options.push(`</div>`)
+
+            if(xMousePos && yMousePos) {
+
+                this.DMSpanInteger = document.createElement("span")
+                document.body.appendChild(this.DMSpanInteger);
+                this.DMSpanInteger.outerHTML = this.options.join('')
+
+                const menu = getID(`dm-${this.id}`)
+    
+                menu.style.left = (xMousePos - 40) + "px" 
+                menu.style.top = (yMousePos - 40) + "px"
+    
+                menu.addEventListener('mouseleave', () => {
+    
+                    menu.outerHTML = ""
+                 
+                })
+
+            
+            }
+            
+           
+
+    
+    }
+
+}
+
+
+
+function getFormattedDate(GetDate) {
+
+    const date = new Date(GetDate)
+
+    var gmonth = date.getMonth() + 1
+    var gday = date.getDate()
+    var gHour = date.getHours()
+    var gMinute = date.getMinutes()
+    var gSecondes = date.getSeconds()
+
+
+    if(date.getMonth() + 1 < 10) {
+        gmonth = "0" + (date.getMonth() + 1)
+    } 
+
+    if(date.getDate() + 1 <= 10) {
+        gday = "0" + date.getDate()
+    }
+
+    if(date.getHours() + 1 <= 10) {
+        gHour = "0" + date.getHours()
+    }
+
+    if(date.getMinutes() + 1 <= 10) {
+        gMinute = "0" + date.getMinutes()
+    }
+
+    if(date.getSeconds() + 1 <= 10) {
+        gSecondes = "0" + date.getSeconds()
+    }
+
+    return gday + "/" + gmonth + "/" + date.getFullYear()  + " - " + gHour + ":" + gMinute
+}

public/javascripts/filexplorer.js

@@ -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];
+}

public/javascripts/indexscript.js

@@ -19,13 +19,13 @@ REQ_user.then((ANS_user) => {
     permissions.forEach((permValue) => {
         
          if(permValue == "FILES_EXPLORER") {
-            AvailableViews.push(`<div class="view">
+            AvailableViews.push(`<div onclick="createView('files_explorer')" class="view">
             <span class="view-image"><i class="fa-solid fa-folder"></i></span>
             <p class="view-text">Gestionnaire de fichiers</p>
         </div>`)
          }
          if(permValue == "SERVICES") {
-            AvailableViews.push(`<div class="view">
+            AvailableViews.push(`<div onclick="createView('service')" class="view">
             <span class="view-image"><i class="fa-solid fa-layer-group"></i></span>
             <p class="view-text">Gestion des services</p>
         </div>`)

public/javascripts/io.js

@@ -36,6 +36,27 @@ function get(request) {
     
 }
 
+function post(request, value) {
+
+    return new Promise((resolve, reject) => {
+
+        socket.emit("POST/" + request, value)
+        console.log("Envoi de la requête POST : " + request)
+        
+        socket.once("ANSWER/POST/" + request, (answer) => {
+            
+            console.log("Réponse pour la requête : " + request)
+       
+            resolve(answer)
+                    
+        })
+        
+    })
+    
+}
+
+
+
 function getSocket() {
 
     return socket