Version 0.4.0 - Ajout des metrics

public/javascripts/basics.js

@@ -1,7 +1,19 @@
 
+var xMousePos = null;
+var yMousePos = null;
 
-// Get Document ID
+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;
+  
+}
 
 /**
  * Récupère depuis le document l'identifiant de l'élément
@@ -13,10 +25,50 @@ function getID(id) {
     return document.getElementById(id)
 }
 
+/**
+ * 
+ * @param {Date} GetDate 
+ * @returns 
+ */
+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
+}
+
+
 /**
  * Permet de faire une pop-up automatique
  */
-class InfoPop {
+class TextResponse {
     constructor(name) {
         this.name = name
         this.element = getID(this.name)
@@ -54,38 +106,30 @@ 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;
-  
-}
-
+const AllViews = new Map()
 var zIndex = 5
 
+
+/**
+ * Permet de créer une fenêtre
+ * @param {object} properties Propriétés de la fenêtre
+ */
 class ViewWindow {
     ViewHTML = null
-    ViewProperties =null
+    ViewWindowDiv
+    ViewProperties = null
     ViewSpanInteger = null
     ViewPopupSpanInteger = null
     ViewPopupHTML = null
     ViewPopupTitle = null
+    ViewItem = new ViewItem(this)
     constructor(properties) {
-        if(!viewsAccessible.has(properties.title)) {
+        if(!AllViews.has(properties.title)) {
 
             this.ViewProperties = properties
-            viewsAccessible.set(properties.title, true)
+            AllViews.set(properties.title, true)
+
+            
             
             this.ViewHTML = `
                 <div draggable="true" id='${properties.title}_window' style='width: ${properties.width}; height: ${properties.height}' class='view-window'>
@@ -93,8 +137,12 @@ class ViewWindow {
                     <div id='${properties.title}_header' class='view-window-header'>
                     <span style='width: 40px'></span>
                     <p>${properties.title}</p>
+                    <div class='view-closediv'>
+                    <span id='${properties.title}_reduce' class='btn-cover'><i class="fa-solid fa-window-minimize"></i></span>
+                    <span id='${properties.title}_minimize' class='btn-cover'><i class="fa-solid fa-window-maximize"></i></span>
                     <span id='${properties.title}_close' class='view-close'><i class='fa fa-xmark'></i></span>
                     </div>
+                    </div>
                     <div id='${properties.title}_content' class='view-window-content'>
                     </div>
                     <div id='${properties.title}_popupDiv'></div>
@@ -105,15 +153,49 @@ class ViewWindow {
             document.body.appendChild(this.ViewSpanInteger);
             this.ViewSpanInteger.outerHTML = this.ViewHTML
 
+            const header = document.getElementById(properties.title + "_header")
+            const windowDiv  = document.getElementById(properties.title + "_window")
+            this.ViewWindowDiv = windowDiv
             const closeWindow = document.getElementById(properties.title + "_close")
+            const minimizeWindow = document.getElementById(properties.title + "_minimize")
+            const reduceWindow = document.getElementById(properties.title + "_reduce")
+
             closeWindow.addEventListener("click", () => {
     
                 this.destroy()
               
             })
+
+            reduceWindow.addEventListener("click", () => {
+                windowDiv.style.display = "none"
+
+            })
+
+            minimizeWindow.addEventListener("click", () => {
+
+                const windowDiv  = document.getElementById(properties.title + "_window")
+                const contentDiv = document.getElementById(properties.title + "_content")
+                const minimizeIcon = document.getElementById(properties.title + "_minimize").children[0]
+              
+            
+                if(windowDiv.classList.contains("minimized")) {
+                    windowDiv.classList.remove("minimized")
+                    contentDiv.style.display = "unset"
+                    windowDiv.style.backgroundColor = "#605e58c1"
+                    minimizeIcon.classList.remove("fa-window-restore")
+                    minimizeIcon.classList.add("fa-window-maximize")
+                } else {
+                    windowDiv.classList.add("minimized")
+                    contentDiv.style.display = "none"
+                    windowDiv.style.backgroundColor = "transparent"
+                    minimizeIcon.classList.remove("fa-window-maximize")
+                    minimizeIcon.classList.add("fa-window-restore")
+                    this.destroyPopup()
+                }
+            })
+                
     
-            const header = document.getElementById(properties.title + "_header")
-            const windowDiv  = document.getElementById(properties.title + "_window")
+            
     
             let isDragging = false;
             let offsetX, offsetY;
@@ -160,12 +242,15 @@ class ViewWindow {
 
         }
 
+        this.ViewItem.show()
+
     }
 
     destroy() {
         const win = getID(`${this.ViewProperties.title}_window`)
         win.outerHTML = " "
-        viewsAccessible.delete(this.ViewProperties.title)
+        AllViews.delete(this.ViewProperties.title)
+        this.ViewItem.hide()
     }
 
     setContent(text) {
@@ -225,49 +310,105 @@ class ViewWindow {
     }
 
     destroyPopup() {
-        
-        const contentDiv = getID(this.ViewProperties.title + "_content")
-        for(var child of contentDiv.children) {
 
-            child.style.pointerEvents = "unset"
-        }
-        contentDiv.classList.remove("blur")
-   
         const popup = getID(this.ViewPopupTitle + "_popup")
-        popup.outerHTML = ""
+
+        if(popup) {
+            const contentDiv = getID(this.ViewProperties.title + "_content")
+            for(var child of contentDiv.children) {
     
+                child.style.pointerEvents = "unset"
+            }
+            contentDiv.classList.remove("blur")
+       
+        
+            popup.outerHTML = ""
+
+        }
+     
     }
 
 }
 
-function createView(viewType) {
-    if(viewType == 'files_explorer') {
-
-        generateFileExplorerView()
 
 
+var AllComponents = new Array()
+
+/**
+ * Permet de créer un composant de vue
+ * @param {object} properties Propriétés du composant de vue
+ */
+class ViewComponent {
+    name;
+    icon;
+    permission;
+    window;
+    constructor (properties) {
+        this.name = properties.name
+        this.icon = properties.icon
+        this.permission = properties.permission
+        
+        AllComponents.push(this)
     }
-    if(viewType == 'service') {
 
-        generateServiceView()
-    }
-    if(viewType == "links") {
+    inject(array) {
 
-        generateLinksView()
+        array.push(`<div id='${this.name}' class='view'>
+        <span class='view-image'><i class='${this.icon}'></i></span>
+        <p class='view-text'>${this.name}</p>
+        </div>`)
+
+       
     }
-   
+
+    createWindow(functionToExecute) {
+            
+        this.window = functionToExecute
+    }
+
+    bindView() {
+
+        const component = getID(this.name)
+        if(component) {
+            component.addEventListener("click", () => {
+                console.log(component)
+                if(this.window) {
+                    this.window()
+                }
+            })
+    
+        }
+        
+    }
+
+    forceWindow() {
+            
+            if(this.window) {
+                this.window()
+            }
+    }
+
+
+    
 }
 
+/**
+ * Permet de créer un menu déroulant
+ * @param {object} properties Propriétés du menu déroulant
+ */
 
+
+var ActualDroppableMenu = null
 class DroppableMenu {
     options = new Array()
     id = null
     DMSpanInteger = null
-    constructor(properties) {
+    #enableHide = false
+    constructor() {
  
-        this.id = properties.id
+        this.id = Math.random().toString(36).substring(7)
         this.options.push(`<div id='dm-${this.id}' class='dm-menu'>`)
-
+        
     }
 
     add(action, string) {
@@ -277,13 +418,18 @@ class DroppableMenu {
     }
 
     show() {
-       
-        
+            console.log("DROPPABLE MENU - " + this.id)
+            if(ActualDroppableMenu) {
+                ActualDroppableMenu.hide()
+            }
+            ActualDroppableMenu = this
+
             this.options.push(`</div>`)
 
             if(xMousePos && yMousePos) {
-
+             
                 this.DMSpanInteger = document.createElement("span")
+          
                 document.body.appendChild(this.DMSpanInteger);
                 this.DMSpanInteger.outerHTML = this.options.join('')
 
@@ -292,22 +438,21 @@ class DroppableMenu {
                 menu.style.zIndex = zIndex + 2
                 zIndex+=1
 
-    
                 menu.style.left = (xMousePos - 40) + "px" 
                 menu.style.top = (yMousePos - 40) + "px"
-    
-                menu.addEventListener('mouseleave', () => {
-    
-                    menu.outerHTML = ""
-                 
-                })
-
-            
+              
             }
             
-           
+            this.#enableHide = false
 
-    
+            document.addEventListener("click", () => {
+  
+                this.hide()
+              
+            })
+           
+          
+         
     }
 
     get(action) {
@@ -316,45 +461,331 @@ class DroppableMenu {
     }
 
     hide() {
-
+       
         const menu = getID(`dm-${this.id}`)
-        menu.outerHTML = ""
-    
+        if(menu) {
+            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()
+/**
+ * Permet de créer un composant de type "Serveur"
+ */
+class Server {
+    constructor(properties) {
+        this.name = properties.name
+        this.description = properties.description
+        this.icon = properties.icon
     }
 
-    if(date.getHours() + 1 <= 10) {
-        gHour = "0" + date.getHours()
+    generateHTML() {
+        return `
+        <div class="servers-box">
+            <div class="servers-box-title">
+                <div class='servers-box-title-info'>
+                    <i class='${this.icon}'></i>
+                    <p>${this.name}</p>
+                   
+                </div>
+                <p style='font-size: 12px;'>${this.description}</p>
+            </div>
+            <div class="servers-box-content">
+                <div class='servers-metrics'>
+                      <div class='servers-metrics-box'>
+                            <div>
+                            <i class='fa-solid fa-memory'></i>
+                            <p>RAM</p>
+                            </div>
+                            <p id='${this.name}_ram'>-- Mo / -- Mo</p>
+                      </div>
+                      <div class='servers-metrics-box'>
+                            <div>
+                            <i class='fa-solid fa-microchip'></i>   
+                            <p>CPU</p>
+                            </div>
+                            <p id='${this.name}_cpu'>---%</p>
+                      </div>
+                      <div class='servers-metrics-box'>
+                            <div>
+                            <i class='fa-solid fa-hdd'></i>
+                            <p>DISK</p>
+                            </div>
+                            <p id='${this.name}_disk'>-- Go / -- Go</p>
+                      </div>
+                 </div>
+            </div>
+        </div>
+        
+        `
     }
 
-    if(date.getMinutes() + 1 <= 10) {
-        gMinute = "0" + date.getMinutes()
+
+    loadScript() {
+            
+        const ramSpan = getID(`${this.name}_ram`)
+        const cpuSpan = getID(`${this.name}_cpu`)
+        const diskSpan = getID(`${this.name}_disk`)
+            
+       
+        setInterval(() => {  
+
+            if(getID(`${this.name}_ram`)) {
+           
+                const request = post(`SERVER_GET_METRICS_` + this.name, this.name ) 
+                console.log(this.name)
+                
+              
+                request.then((answer) => {
+                    console.log(answer)
+                    console.log(this.name)
+                    //Transform all metrics in mb to answer.metrics to Go or %
+                    answer.metrics.usedram = Math.round(answer.metrics.usedram)
+                    answer.metrics.totalram = Math.round(answer.metrics.totalram)
+
+                    //Transform all metrics in blocks to Go
+                    answer.metrics.usedisk = Math.round((answer.metrics.usedisk * 3.814697265625) / 1000000) 
+                    answer.metrics.totaldisk = Math.round((answer.metrics.totaldisk * 3.814697265625) / 1000000) 
+
+                    if(answer.metrics.name == this.name) {
+                        ramSpan.innerHTML = `${answer.metrics.usedram} Mo / ${answer.metrics.totalram} Mo`
+                        cpuSpan.innerHTML = answer.metrics.cpu + "%"
+                        diskSpan.innerHTML = `${answer.metrics.usedisk} Go / ${answer.metrics.totaldisk} Go`
+          
+                    }
+                                
+                }) 
+            } 
+    
+
+  
+        }, 1000)
+            
+
+    }
+}
+
+/**
+ * Créer un composant de vue de type "Service"
+ * @param {object} properties Propriétés du composant de vue
+ */
+class Service {
+    name = null
+    description = null
+    icon = null
+    url = null
+    canAccess = false
+    isOnline  = false
+    constructor(properties) {
+        this.name = properties.name
+        this.description = properties.description
+        this.icon = properties.icon
+        this.url = properties.url
+        this.canAccess = properties.canAccess
     }
 
-    if(date.getSeconds() + 1 <= 10) {
-        gSecondes = "0" + date.getSeconds()
+    generateHTML() {
+        return `
+        <div class="sv">
+            <div class='sv-info'>
+                <img class="sv-icon" src="${this.icon}" alt="${this.name}">
+                <div>
+                    <h1>${this.name}</h1>
+                    <p>${this.description}</p>
+                    <p>Etat : <span id='${this.name}_status' class="sv-status">Vérification en cours ...</span></p>
+                </div>
+            </div>
+            
+            <div class="sv-actions">
+                ${this.canAccess ? `<a href="${this.url}" target="_blank"><button class="btn green"><span>Accéder au service</span></button></a>` : ""}
+                <button id='${this.name}_svpower' class='btn yellow'n><span>Options d'alimentation<span></button>
+            </div>
+        </div>
+        `
+
+        
     }
 
-    return gday + "/" + gmonth + "/" + date.getFullYear()  + " - " + gHour + ":" + gMinute
-}
+    loadScript() {
+
+        return new Promise((resolve, reject) => {
+            const statusSpan = getID(`${this.name}_status`)
+            const request = post(`SV_GET_SERVICE_STATUS`, this.url) 
+        
+
+            request.then((answer) => {
+                if(answer.name == this.url) {
+                    if(answer.answer == "ONLINE") {
+                        statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle green"></i> En ligne</span>'
+                        this.isOnline  = true
+                    } else {
+                        statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle red"></i> Hors ligne</span>'
+              
+                    }
+                    resolve("LOADED")
+                }
+            
+            })
+
+            const powerButton = getID(`${this.name}_svpower`)
+
+            // Make a popup of View to select if you want to start, stop or restart the service by doing a request
+
+            powerButton.addEventListener("click", () => {
+                View.createPopup({
+                    title: `<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`,
+                    content: `
+                    
+                    <p class='sv-power-select'>${this.name}</p>
+                    <p id='sv-power-info'></p>
+                    <div class="sv-power">
+                        <button id="${this.name}_start" class="btn green"><span>Démarrer</span></button>
+                        <button id="${this.name}_restart" class="btn yellow"><span>Redémarrer</span></button>
+                        <button id="${this.name}_stop" class="btn red"><span> Arrêter</span></button>
+                    </div>
+                    `
+                })
+
+                const startButton = getID(`${this.name}_start`)
+                const stopButton = getID(`${this.name}_stop`)
+                const restartButton = getID(`${this.name}_restart`)
+                const info = new InfoPop("sv-power-info")
+                
+                
+
+                if(this.isOnline) {
+                    startButton.style.display = "none"
+                    info.info("Verifiez que le service n'est pas utilisé par quelqu'un d'autre avant de le redémarrer ou de l'arrêter")
+                } else {
+                    stopButton.style.display = "none"
+                    restartButton.style.display = "none"
+                    info.info("Si le service ne démarre pas, vérifiez l'intégrité du service")
+                }
+
+                startButton.addEventListener("click", () => {
+                    const request = post(`SV_START_SERVICE`, this.url) 
+                    
+
+                    request.then((answer) => {
+                        if(answer.answer == "OK") {
+                            statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle green"></i> En ligne</span>'
+                            View.destroyPopup("`<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`")
+                            this.isOnline  = true
+                        } else {
+                            info.err("Impossible de démarrer le service")
+
+                        }
+                    })
+
+                })
+
+                stopButton.addEventListener("click", () => {
+                    const request = post(`SV_STOP_SERVICE`, this.url) 
+
+                    request.then((answer) => {
+                        if(answer.answer == "OK") {
+                            statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle red"></i> Hors ligne</span>'
+                            this.isOnline  = false
+                            View.destroyPopup("`<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`")
+                          
+                        } else {
+                            info.err("Impossible d'arrêter le service")
+
+                        }
+                    
+                    })
+                })
+
+                restartButton.addEventListener("click", () => {
+
+                    console.log("RESTART")
+
+                    const request = post(`SV_RESTART_SERVICE`, this.url) 
+
+                    request.then((answer) => {
+                        if(answer.answer == "OK") {
+                            statusSpan.innerHTML = '<span style="font-size: 12px;"><i class="fa-solid fa-circle green"></i> En ligne</span>'
+                            View.destroyPopup("`<i class='fa-solid fa-power-off'></i> Gestion de l'alimentation du service`")
+                            this.isOnline  = true
+                        } else {
+                            info.err("Impossible de redémarrer le service")
+
+                        }
+                        
+                    })
+                })
+
+
+        })
+        
+     })
+    }
+    
+}
+
+
+/**
+ * Permet de créer un item de la barre des tâches
+ * @param {ViewWindow} window ViewWindow associé à l'item
+ */
+class ViewItem {
+    /**
+     * 
+     * @param {ViewWindow} window 
+     */
+    constructor(window) {
+        this.window = window
+    }
+
+    show() {
+        const viewItems = getID("views-items")
+
+        const item = document.createElement("div")
+        item.id = `${this.window.ViewProperties.title}_item`
+        item.classList.add("view-item")
+        item.innerHTML = this.window.ViewProperties.title
+
+        viewItems.appendChild(item)
+
+        item.addEventListener("click", () => {  
+            zIndex+=1
+            this.window.ViewWindowDiv.style.zIndex = zIndex + 1
+            this.window.ViewWindowDiv.style.display = "unset"
+        })
+
+        item.addEventListener("contextmenu", () => {
+            const dp = new DroppableMenu()
+
+            dp.add("index", `<i class='fa fa-window-restore'></i> Afficher`)
+            dp.add("close", `<span class='menu-signout'><i class='fa fa-xmark'></i> Fermer</span>`)
+            dp.show()
+
+            const index = dp.get("index")
+            const close = dp.get("close")
+
+            index.addEventListener("click", () => {
+                zIndex+=1
+                this.window.ViewWindowDiv.style.display = "unset"
+                this.window.ViewWindowDiv.style.zIndex = zIndex + 1
+                dp.hide()
+            })
+
+            close.addEventListener("click", () => {
+                this.window.destroy()
+                dp.hide()
+            })
+
+        })
+
+    }
+    
+    hide() {
+        const viewItems = getID("views-items")
+        const item = getID(`${this.window.ViewProperties.title}_item`)
+
+        item.outerHTML = ""
+    }
+   
+}
+