Version 0.3.3 - Add of links

public/javascripts/basics.js

@@ -249,7 +249,11 @@ function createView(viewType) {
     }
     if(viewType == 'service') {
 
-       generateServiceView()
+        generateServiceView()
+    }
+    if(viewType == "links") {
+
+        generateLinksView()
     }
    
 }

public/javascripts/indexscript.js

@@ -55,7 +55,7 @@ REQ_user.then((ANS_user) => {
           </div>`)
          }
          if(permValue == "LINKS") {
-            AvailableViews.push(` <div class="view">
+            AvailableViews.push(` <div onclick="createView('links')" class="view">
             <span class="view-image"><i class="fa-solid fa-link"></i></span>
             <p class="view-text">Générateur de lien</p>
           </div>`)

public/javascripts/link.js

@@ -0,0 +1,295 @@
+function generateLinksView() {
+
+    const View = new ViewWindow({
+        title: `<i class="fa-solid fa-link"></i> Générateur de liens`,
+        width: "600px",
+        height: "600px",
+    })
+
+    View.setContent(`
+        
+        <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>
+    `)
+
+    const addBtn = getID(`${View.getViewTitle()}_add`)
+    const linksDiv = getID(`${View.getViewTitle()}_links`)
+    var links = new Array()
+
+    addBtn.addEventListener("click", () => {
+            
+            View.createPopup({
+                title: `<i class='fa fa-add'></i> Ajouter un lien`,
+                content: `
+                <div class='ln-create'>
+                    <input id='${View.getViewTitle()}_title' class='field' type='text' placeholder='Titre du lien'>
+                    <input id='${View.getViewTitle()}_url' class='field' type='text' placeholder='URL du lien'>
+                    <div class='ln-abstract-div'>
+                        <p class='ln-abstract-label'>Abstraire le lien :</p>
+                        <input id='${View.getViewTitle()}_ablink' type='checkbox'>
+                    </div>
+                    <span id='${View.getViewTitle()}_newlink_span'></span>
+                    <p id='${View.getViewTitle()}_info'></p>
+                    <button id='${View.getViewTitle()}_confirm' class='btn blue'><span><i class='fa fa-add'></i> Ajouter</span></button>
+                </div>
+            `
+            })
+    
+            const titleInput = getID(`${View.getViewTitle()}_title`)
+            const urlInput = getID(`${View.getViewTitle()}_url`)
+            const addBtn = getID(`${View.getViewTitle()}_confirm`)
+            const info = new InfoPop(`${View.getViewTitle()}_info`)
+            const ablink = getID(`${View.getViewTitle()}_ablink`)
+            const newlinkSpan = getID(`${View.getViewTitle()}_newlink_span`)
+
+            ablink.checked = true
+
+            ablink.addEventListener("click", () => {
+
+                if(!ablink.checked) {
+                        
+                    newlinkSpan.innerHTML = `
+                        <input id='${View.getViewTitle()}_newlink' class='field' type='text' placeholder='URL du nouveau lien'>
+                        `
+                    
+                          
+
+                } else {
+        
+                    newlinkSpan.innerHTML = ""
+        
+                }
+
+            })
+
+
+        
+            addBtn.addEventListener("click", () => {
+                info.clear()
+                console.log(ablink.checked)
+    
+                if(!titleInput.value) {
+    
+                    info.err("Un titre est nécéssaire")
+    
+                } else if(!urlInput.value) {
+    
+                    info.err("Une URL est nécéssaire")
+    
+                } else {
+
+                    var newlink = getID(`${View.getViewTitle()}_newlink`)
+
+                    if(!newlink) {
+
+                        newlink = { value: "" }
+
+                        
+                    } else {
+
+                        if(!newlink.value) {
+
+                            info.err("Un nouveau lien est nécéssaire")
+                            return false
+                        }
+                    }
+
+                    if(!newlink.value.match(/^[a-zA-Z0-9-_]+$/)) {
+                        info.err("L'URL n'est pas valide")
+                        return false
+                    
+                    }
+
+                     
+    
+
+
+                    const request = post(`LINKS_ADD`, {
+                        title: titleInput.value,
+                        url: urlInput.value,
+                        abstractLink: ablink.checked,
+                        dest: newlink.value
+                    })
+    
+                    request.then((answer) => {
+    
+                        if(answer.answer == "OK") {
+    
+                            info.info("Le lien a bien été ajouté")
+                            View.destroyPopup()
+                            getLinks()
+                            
+    
+                        } else if(answer.answer == "ALREADY_EXISTS") {
+    
+                            info.err("Ce lien existe déjà")
+                        
+                        } else {
+    
+                            info.err("Impossible d'ajouter le lien")
+    
+                        }
+    
+                    })
+    
+                }
+    
+            })
+    
+        })
+
+        getLinks()
+
+    function getLinks() {
+
+        
+        linksDiv.innerHTML = ""
+        links = new Array()
+        
+        const request = post(`LINKS_GET_ALL`)
+        request.then((answer) => {
+
+        if(answer.answer == "OK") {
+
+            if(answer.links.length == 0) {
+                    
+                linksDiv.innerHTML = `<p  class='lightred' style='text-align: center;'>Aucun lien disponible</p>`
+            }
+
+            answer.links.forEach((link) => {
+
+                links.push(link)
+
+            })
+
+            links.forEach((link) => {
+
+                linksDiv.innerHTML += `
+                <div class='ln-link'>
+                    <p class='ln-link-title'>${link.title}</p>
+                    <div>
+                    <p class='ln-link-url'><i class="fa-solid fa-bookmark"></i> Lien original : <a href='${link.url}'>${link.url}</a></p>
+                    <p class='ln-link-url'><i class="fa-solid fa-paperclip"></i> Lien modifié : <a href='https://neutral.raphix.fr/link/${link.dest}'> https://neutral.raphix.fr/link/${link.dest}</a></p>
+                    </div>
+                    <div class='ln-link-actions'>
+                    <button id='${link.id}_edit' class='btn blue'><span><i class='fa fa-edit'></i> Modifier</span></button>
+                    <button id='${link.id}_remove' class='btn red'><span><i class='fa fa-trash'></i> Supprimer</span></button>
+                    </div>
+                </div>
+                `
+
+                
+
+            })
+
+            links.forEach((link) => {
+                const editBtn = getID(`${link.id}_edit`)
+               
+                editBtn.addEventListener("click", () => {
+                        
+                        View.createPopup({
+                            title: `<i class='fa fa-edit'></i> Modifier un lien`,
+                            content: `
+                            <div class='ln-create'>
+                                <input id='${View.getViewTitle()}_edittitle' class='field' type='text' placeholder='Titre du lien' value='${link.title}'>
+                                <input id='${View.getViewTitle()}_editurl' class='field' type='text' placeholder='URL du lien' value='${link.url}'>
+                                <p id='${View.getViewTitle()}_editinfo'></p>
+                                <button id='${View.getViewTitle()}_editconfirm' class='btn blue'><span><i class='fa fa-edit'></i> Modifier</span></button>
+                            </div>
+                        `
+                        })
+                
+                        const titleInput = getID(`${View.getViewTitle()}_edittitle`)
+                        const urlInput = getID(`${View.getViewTitle()}_editurl`)
+                        const editBtnConfirm = getID(`${View.getViewTitle()}_editconfirm`)
+                        const info = new InfoPop(`${View.getViewTitle()}_editinfo`)
+
+                        titleInput.value = link.title
+                        urlInput.value = link.url
+
+                        editBtnConfirm.addEventListener("click", () => {
+                                
+                                if(!titleInput.value) {
+                        
+                                    info.err("Un titre est nécéssaire")
+                        
+                                } else if(!urlInput.value) {
+                        
+                                    info.err("Une URL est nécéssaire")
+                        
+                                } else {
+                        
+                                    const request = post(`LINKS_EDIT`, {
+                                        id: link.id,
+                                        title: titleInput.value,
+                                        url: urlInput.value
+                                    })
+                        
+                                    request.then((answer) => {
+                        
+                                        if(answer == "OK") {
+                        
+                                            info.info("Le lien a bien été modifié")
+                                            View.destroyPopup()
+                                            getLinks()
+                                            
+                        
+                                        } else {
+                        
+                                            info.err("Impossible de modifier le lien")
+                        
+                                        }
+                        
+                                    })
+                        
+                                }
+                        
+                        })
+
+                        
+                     
+                    
+                })
+
+
+                const delBtn = getID(`${link.id}_remove`)
+                delBtn.addEventListener("click", () => {
+
+                    const request = post(`LINKS_DELETE`, link.id)
+                    request.then((answer) => {
+
+                       if(answer != "OK") {
+                            
+                        View.createPopup({
+                            title: `<i class='fa fa-warning'></i> Erreur`,
+                            content: `
+                            <p>Impossible de supprimer le lien</p>
+                            `   
+                        })
+
+
+                       } else {
+
+                            getLinks()
+                       }
+
+                    })
+
+                })
+            })
+
+        } else {
+
+            info.err("Impossible de récupérer les liens")
+
+        }
+
+       
+
+    }) 
+    }
+
+ 
+}

public/javascripts/service.js

@@ -23,7 +23,7 @@ async function generateServiceView() {
                     <div>
                         <h1>${this.name}</h1>
                         <p>${this.description}</p>
-                        <p>Etat : <span id='${this.name}_status' class="sv-status"></span></p>
+                        <p>Etat : <span id='${this.name}_status' class="sv-status">Vérification en cours ...</span></p>
                     </div>
                 </div>
                 

public/stylesheets/style.css

@@ -593,10 +593,10 @@ a {
 }
 
 .fx-editor-content {
-
+  border: none;
+  border-top: 1px solid rgb(70, 67, 67);
   background-color: transparent;
   color: white;
-  border: none;
   padding: 15px;
   height: 100%;
 
@@ -722,4 +722,74 @@ a {
   display: flex;
   flex-direction: column;
   gap: 10px;
+}
+
+/* Links */
+
+.ln-bar {
+
+    display: flex;
+    justify-content: right;
+    padding: 10px;
+    gap: 10px;
+}
+
+.ln-create {
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.ln-abstract-label {
+
+  text-align: center;
+  font-size: 12px;
+}
+
+.ln-abstract-div {
+
+  display: flex;
+  flex-direction: row;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+}
+
+.ln-link-actions {
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: flex-end;
+
+}
+
+.ln-link {
+
+  display: grid;
+  grid-template-columns: 1fr 3fr 1fr;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  border-radius: 10px;
+  background-color: #1b1b1bc1;
+  transition: 0.1s;
+
+
+}
+
+.ln-links {
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  height: 75%;
+  padding: 10px;
+  overflow-y: auto;
+}
+
+.ln-link-url {
+
+  font-size: 12px;
 }