Version 1.0.0 - Ajout de WebMetrics et de l'édit utilisateur

public/javascripts/basics.js

@@ -1180,6 +1180,86 @@ class User {
     }
 }
 
+/**
+ * Permet de créer un composant de vue de type "Metrics"
+ */
+class Metric {
+    properties;
+    View;
+    Component;
+    data;
+    constructor(settings) {
+        this.properties = settings.properties
+        this.View = settings.View
+        this.Component = settings.Component
+        this.data = settings.properties.data
+    }
+
+    generateHTML() {
+        return `
+        <div class="metric">
+            <div class="metric-info">
+                <div class="metric-text">
+                    <p class='metric-title'><strong>${this.properties.name}</strong></p>
+                    <p class='metric-id'>${this.properties.id}</p>
+                </div>
+            </div>
+            <div id='${this.properties.id}_content' class="metric-content">
+            </div>
+            <div class="metric-actions">
+
+                <button id='${this.properties.id}_metricpower' class='btn red'><span><i class='fa fa-trash'></i> Supprimer<span></button>
+            </div>
+
+
+        </div>
+        `
+
+    }
+
+    loadScript() {
+
+        const contentDiv = getID(`${this.properties.id}_content`)
+
+        for(const data of this.data) {
+            contentDiv.innerHTML += `<div class='metric-data'><div class='metric-data-div'><p class='metric-data-title'>${data.description}</p><p class='metric-data-id'>${data.name}</p></div><p class='metric-data-value'>Valeur : <span>${data.value}<span></p></div>`
+    
+        }
+
+        const deleteButton = getID(`${this.properties.id}_metricpower`)
+        
+        deleteButton.addEventListener("click", () => {
+            this.View.createPopup({
+                title: `<i class='fa fa-trash'></i> Supprimer la métrique : ${this.properties.name}`,
+                content: `
+                    <p class='us-delete'>Voulez-vous vraiment supprimer la métrique <strong>${this.properties.name}</strong> ?</p>
+            
+                    <button id="${this.properties.id}_deleteconfirm" class="btn red"><span><i class='fa fa-trash'></i> Supprimer</span></button>
+               
+                `
+            })
+      
+            const deleteCButton = getID(`${this.properties.id}_deleteconfirm`)
+           
+            deleteCButton.addEventListener("click", () => {
+                const request = post(`MT_DELETE`, this.properties.id) 
+                request.then((answer) => {
+                    if(answer == "OK") {
+                        this.View.destroyPopup()
+                        this.View.destroy()
+                        this.Component.forceWindow()
+                        
+                    } else {
+                        console.log(answer)
+                    }
+                })
+            })
+        })
+    }
+
+
+
+}
 
 /**
  * Permet de créer un item de la barre des tâches
@@ -1196,7 +1276,6 @@ class ViewItem {
 
     show() {
         const viewItems = getID("views-items")
-
         const item = document.createElement("div")
         item.id = `${this.window.ViewProperties.title}_item`
         item.classList.add("view-item")

public/javascripts/filexplorer.js

@@ -14,7 +14,7 @@ explorer.createWindow(() => {
     })
     
 
-    
+
     
     
 
@@ -58,6 +58,9 @@ explorer.createWindow(() => {
                 </div> 
             </div>
             <div id='${View.getViewTitle()}_explorer' class='fx-explorer'>
+            <div style='font-size: 24px; margin-top: 225px;'  class='t-center'>
+            <p><i class="fa-solid fa-rotate fa-spin"></i> Chargement en cours ...</p>
+            </div>
             </div>
         </div>
         

public/javascripts/indexscript.js

@@ -7,6 +7,7 @@ loadUserInfo()
 
 
 function loadUserInfo() {
+
     
     const infoUsername = getID("infoUsername")
     const infoUserimage = getID("infoUserimage")
@@ -25,7 +26,7 @@ function loadUserInfo() {
         const permissions = ANS_user.permission
     
         const AvailableViews = new Array()
-    
+    // 
         permissions.forEach((permValue) => {
     
             AllComponents.forEach((component) => {
@@ -64,3 +65,4 @@ function loadUserInfo() {
     
 }
 
+

public/javascripts/link.js

@@ -11,7 +11,11 @@ links.createWindow(() => {
         <div class='ln-bar'>
             <button id='${View.getViewTitle()}_add' class='btn blue'><span><i class='fa fa-add'></i> Ajouter un lien</span></button>
         </div>
-        <div class='ln-links' id='${View.getViewTitle()}_links'></div>
+        <div class='ln-links' id='${View.getViewTitle()}_links'>
+        <div style='font-size: 24px; margin-top: 225px;'  class='t-center'>
+            <p><i class="fa-solid fa-rotate fa-spin"></i> Chargement en cours ...</p>
+        </div>
+        </div>
     `)
 
     const addBtn = getID(`${View.getViewTitle()}_add`)
@@ -182,8 +186,6 @@ links.createWindow(() => {
                 </div>
                 `
 
-                
-
             })
 
             links.forEach((link) => {

public/javascripts/metric.js

@@ -0,0 +1,138 @@
+metrics.createWindow(() => {
+    
+    const View = new ViewWindow({
+        title: `<i class="fa-solid fa-square-poll-vertical"></i> Web Metrik`,
+        width: "600px",
+        height: "600px",
+    })
+
+    loadMetrics()
+
+    function loadMetrics() {
+
+        View.setContent(`
+        <div class="metrics">
+        <div class='mt-bar'>
+            <p> <strong>WebMetrik</strong> : <span id='${View.getViewTitle()}_number'><i>Calcul en cours</i></span></p>
+            <div>
+            <button id='${View.getViewTitle()}_refresh' class='btn green'><span><i class='fa fa-rotate-left'></i> Rafraîchir</span></button>
+            <button id='${View.getViewTitle()}_add' class='btn blue'><span><i class='fa fa-add'></i> Ajouter un WebMetrik</span></button>
+        </div>   
+        </div>
+        <div class='mt-metrics' id='${View.getViewTitle()}_metrics'>
+
+            <div style='font-size: 24px; margin-top: 180px;'  class='t-center'>
+            <p><i class="fa-solid fa-rotate fa-spin"></i> Chargement en cours ...</p>
+            </div>
+
+        </div>`)
+
+        const metricsList = new Array()
+        const metricsComponent = new Array()
+        const metricsReq = get("MT_ALL")
+
+        const metricsDiv = document.getElementById(`${View.getViewTitle()}_metrics`)
+        const metricsNumber = document.getElementById(`${View.getViewTitle()}_number`)
+        const addButton = document.getElementById(`${View.getViewTitle()}_add`)
+        const refreshButton = document.getElementById(`${View.getViewTitle()}_refresh`)
+        const metricsView = document.getElementById(`${View.getViewTitle()}_metrics`)
+        
+        refreshButton.addEventListener("click", () => {
+            loadMetrics()
+        })
+
+        metricsReq.then((ANS_metrics) => {
+            if(ANS_metrics != "UNAVAILABLE") {
+                metricsList.length = 0
+                ANS_metrics.forEach((metric) => {
+                    const metricComponent = new Metric({
+                        properties: metric,
+                        Component: metrics,
+                        View: View
+                    })
+                    metricsList.push(metricComponent.generateHTML())
+                  
+                    metricsComponent.push(metricComponent)
+                })
+                metricsDiv.innerHTML = metricsList.join("")
+                metricsNumber.innerHTML = ANS_metrics.length
+
+                for(const metric of metricsComponent) {
+                    metric.loadScript()
+                }
+            } else {
+                metricsDiv.innerHTML = `<div style='font-size: 24px; margin-top: 180px;'  class='t-center'>
+                <p><i class="fa-solid fa-warning"></i> Une erreur est survenue lors du chargement des WebMetrik</p>
+                </div>`
+            }
+        })
+
+        // Generate a pop to add metrics with 3 settings, the adress, the port, the name of the metrics and the key to authentificate
+
+        addButton.addEventListener("click", () => {
+
+            View.createPopup({
+                title: "Ajouter un WebMetrik",
+                content: `
+                <div class='mt-add'>
+                    <p>Adresse</p>
+                    <input class='field' type="text" id="mt-add-address" placeholder="Adresse">
+                    <p>Port</p>
+                    <input class='field' type="number" id="mt-add-port" placeholder="Port">
+                    <p>Nom</p>
+                    <input class='field' type="text" id="mt-add-name" placeholder="Nom">
+                    <p>Clé d'authentification</p>
+                    <input class='field' type="password" id="mt-add-key" placeholder="Clé d'authentification">
+                    <span id='mtaddinfo'></span>
+                    <button id='mt-add-btn' class='btn blue'><span><i class='fa fa-add'></i> Ajouter</span></button>
+                </div>
+                `
+            })
+
+            const addBtn = document.getElementById("mt-add-btn")
+            const address = document.getElementById("mt-add-address")
+            const port = document.getElementById("mt-add-port")
+            const name = document.getElementById("mt-add-name")
+            const key = document.getElementById("mt-add-key")
+            const infoMTAdd = new TextResponse("mtaddinfo")
+
+        
+            addBtn.addEventListener("click", () => {
+
+                // Check if all fields are filled
+
+                if(address.value == "" || port.value == "" || name.value == "" || key.value == "") {
+                    infoMTAdd.err("Veuillez remplir tous les champs")
+                    return
+                }
+
+                post("MT_ADD", {
+                    address: address.value,
+                    port: port.value,
+                    name: name.value,
+                    key: key.value
+                }).then((res) => {
+                    if(res != "ERROR") {
+                        View.destroyPopup()
+                        loadMetrics()
+                    } else {
+                        View.createPopup({
+                            title: "Erreur",
+                            content: `<p class='yellow'><i class='fa fa-warning'></i> Une erreur est survenue lors de l'ajout de la WebMetrik</p>`
+                        })
+                    }
+                })
+            })
+
+         })
+
+
+    }
+})
+
+
+
+        /*
+        <div style='font-size: 24px; margin-top: 180px;'  class='t-center'>
+            <p><i class="fa-solid fa-rotate fa-spin"></i> Chargement en cours ...</p>
+        </div>*/

public/javascripts/middle.js

@@ -7,6 +7,8 @@ const explorer = new ViewComponent({
     icon: "fa-solid fa-folder",
     permission: "FILES_EXPLORER"
   })
+
+  
   
   const services = new ViewComponent({
     name: "Gestion des services",
@@ -27,7 +29,7 @@ const explorer = new ViewComponent({
   })
   
   const metrics = new ViewComponent({
-    name: "Web Metrics",
+    name: "Web Metrik",
     icon: "fa-solid fa-square-poll-vertical",
     permission: "METRICS"
   })

public/javascripts/personal.js

@@ -0,0 +1,119 @@
+
+const menulogo = getID("menu-logo")
+const usersettingsBtn = getID("user-settings-button")
+
+menu.style.display = "none"
+
+menulogo.addEventListener("click", () => {
+
+    const menu = getID("menu")
+
+    if(menu.style.display == "block") {
+        menu.style.display = "none"
+    } else {
+        menu.style.display = "block"
+    }
+
+})
+
+usersettingsBtn.addEventListener("click", () => {
+    const View = new ViewWindow({
+        title: `<i class="fa fa-user"></i> Mon Compte`,
+        width: "600px",
+        height: "650px"
+    })
+
+    View.setContent(`
+    <div class="user-settings">
+    <p>Mes informations</p>
+    <div class="us-settings">
+     
+            <img class='us-settings-image' id="us-settings-image" src="">
+        
+        <div class="us-settings-info">
+            <p>Nom d'utilisateur</p>
+            <input class="field" type="text" id="us-settings-username" placeholder="Nom d'utilisateur">
+            <p>Nom d'affichage</p>
+            <input class="field" type="text" id="us-settings-displayname" placeholder="Nom d'affichage">
+            <p>Mot de passe</p>
+            <input class="field" type="password" id="us-settings-password" placeholder="Mot de passe">
+            <p>Photo de profil</p>
+            <input type="file" id="us-settings-picture" accept="image/png, image/jpeg">
+     
+          
+          
+        </div>
+        <br>
+        <span id='us-settings-return-info'></span>
+        <button id="us-settings-save" class="btn green"><span> Sauvegarder</span></button>
+    </div>
+    <p>Mes permissions</p>
+    <div id="us-settings-permissions">
+    </div>
+
+    </div>
+    `)
+
+    const usSettingsImage = getID("us-settings-image")
+    const usSettingsUsername = getID("us-settings-username")
+    const usSettingsDisplayname = getID("us-settings-displayname")
+    const usSettingsPassword = getID("us-settings-password")
+    const usSettingsPermissions = getID("us-settings-permissions")
+    const usSettingsSave = getID("us-settings-save")
+    const usSettingsPicture = getID("us-settings-picture")
+    const returnInfo = new TextResponse("us-settings-return-info")  
+
+    const REQ_user = get("USERINFO")
+
+    var actualUsername = ""
+
+    REQ_user.then((ANS_user) => {
+        usSettingsImage.src = ANS_user.picture
+        usSettingsUsername.value = ANS_user.username
+        usSettingsDisplayname.value = ANS_user.display_name
+        actualUsername = ANS_user.username
+
+        const permissions = ANS_user.permission
+        const permValid = new Array()
+    
+        permissions.forEach((permValue) => {
+
+            permValid.push("<p>" + permValue + "</p>")
+            
+        })
+
+        usSettingsPermissions.innerHTML = permValid.join("")
+    })
+
+    usSettingsSave.addEventListener("click", () => {
+        const request = post(`US_EDIT_PERSONNAL`, {username: actualUsername, newusername: usSettingsUsername.value, display_name: usSettingsDisplayname.value, password: usSettingsPassword.value, picture: usSettingsPicture.files[0]}) 
+                request.then((answer) => {
+                    if(answer == "ALREADY_EXIST") {
+
+                        returnInfo.err("L'utilisateur existe déjà !")
+
+                    } else if(answer == "USERNAME_MISSING") {
+
+                        returnInfo.err("Le nom d'utilisateur est manquant !")
+                    } else if(answer == "DISPLAY_NAME_MISSING") {
+
+                        returnInfo.err("Le nom d'affichage est manquant !")
+                    } else if(answer == "PASSWORD_MISSING") {
+                            
+                        returnInfo.err("Le mot de passe est manquant !")
+                    } else {
+
+                        View.destroy()
+                        loadUserInfo()
+                    }
+                })
+    })
+
+
+})
+
+document.addEventListener("click", (e) => {
+    if(e.target != menulogo) {
+        menu.style.display = "none"
+    }
+})

public/javascripts/pipeline.js

@@ -36,7 +36,7 @@ pipelines.createWindow(() => {
         
                 View.setContent(`
                 <div class="pipelines">
-                    <div id='reload_Btn_pipeline' class='pl-reload'><i class='fa fa-rotate-left'></i> Recharger les pipelines</div>
+                    <button id='reload_Btn_pipeline' class='btn blue'><span><i class='fa fa-rotate-left'></i> Recharger les pipelines</span></button>
                     ${pipelinesList.join("")}
                 </div>`)
 

public/javascripts/user.js

@@ -18,7 +18,9 @@ users.createWindow(async () => {
             <button id='${View.getViewTitle()}_add' class='btn blue'><span><i class='fa fa-add'></i> Ajouter un utilisateur</span></button>
         </div>
         <div class='us-users' id='${View.getViewTitle()}_users'>
-        
+            <div style='font-size: 24px; margin-top: 180px;'  class='t-center'>
+            <p><i class="fa-solid fa-rotate fa-spin"></i> Chargement en cours ...</p>
+            </div>
         </div>
         </div>`)
     
@@ -87,7 +89,7 @@ users.createWindow(async () => {
             })
 
 
-            const addButton = document.getElementById("us-add-button")
+            const addCButton = document.getElementById("us-add-button")
             const username = document.getElementById("us-add-username")
             const displayname = document.getElementById("us-add-displayname")
             const password = document.getElementById("us-add-password")
@@ -96,7 +98,7 @@ users.createWindow(async () => {
             const returnInfo = new TextResponse("user-addreturn-info")
     
 
-            addButton.addEventListener("click", () => {
+            addCButton.addEventListener("click", () => {
                 var permissionsList = new Array()
                 for(var permission of permissions) {
                     console.log(permission.children[0].checked)
@@ -164,6 +166,7 @@ users.createWindow(async () => {
 
             for(var user of usersList) {
                 usersContent.push(user.generateHTML())
+              
             }
 
             usersDiv.innerHTML = usersContent.join("")