Improve CV Editor + Fixe

public/templates/cv.html

@@ -41,31 +41,24 @@
             <div class="cv-sections">
 
                 <div class="row w-100">
-                <select class="col-lg-10 cv-selector">
-                    <option>NONE</option>
-                    <option>NONE</option>
-                    <option>NONE</option>
-                    <option>NONE</option>
-                    <option>NONE</option>
+                <select id="cv-project-selector" class="col-lg-10 cv-selector">
                 </select>
-                <button class="col-lg-1 cv-plus"><i class="fa fa-plus"></i></button>
+                <button id="cv-project-add" class="col-lg-1 cv-plus"><i class="fa fa-plus"></i></button>
                 </div>
                 
                 <div class="row w-100">
-                <textarea class="cv-textarea">
+                <textarea id="cv-project-textarea" class="cv-textarea">
     
                 </textarea>
                 </div>
     
                 <div class="row w-100">
-                    <button class="cv-save col-lg-2"><i class="fa fa-save"></i> Sauvegarder</button>
-                    <button class="cv-del col-lg-2"><i class="fa fa-trash"></i> Effacer</button>
+                    <button id="cv-project-save" class="cv-save col-lg-2"><i class="fa fa-save"></i> Sauvegarder</button>
+                    <button id="cv-project-del" class="cv-del col-lg-2"><i class="fa fa-trash"></i> Effacer</button>
                 </div>
+                <div class="row w-100">
                 
-                <div class="row cv-upload-section">
-                    <p class="col-lg">Uploader une image : <span>NAMTEST.png</span> </p>
-                    <button class=" col-lg-2 cv-upload"><i class="fa fa-upload"></i> Upload</button>
-                    
+                    <p id="cv-project-info" class="cv-info" style="color:rgb(255, 48, 48)"></p>
                 </div>
                 
             </div>
@@ -89,6 +82,23 @@
 
 </div>
 
+<dialog class="cv_addproject" id="cv-project-dialog">
+    <h1><i class="fa fa-project-diagram"></i> Créer un projet</h1>
+        <p>Nom du projet :</p>
+        <input class="inp" id="cv-project-add-input" type="text">
+        <div style="color: rgb(255, 76, 76);" id="cv-project-add-info"></div>
+    </div>
+    <div class="cv-upload-section">
+        <p style="font-size: 14px;">Image : <span>NAMTEST.png</span> <button style="margin-left: 10%;" class="cv-upload"><i class="fa fa-upload"></i> Upload</button></p>
+        
+        
+    </div>
+    <button onclick="getPage('cv.html')" id="cv-project-add-close" class="cv_add_close">Annuler</button>
+    <button id="cv-project-add-confirm" class="cv_add_confirm">Ajouter</button>
+
+</dialog>
+
+
 
 <script>
     if(typeof checkDelare == "undefined") {
@@ -99,8 +109,96 @@
         const sectionSave = document.getElementById("cv-section-save")
         const sectionInfo = document.getElementById("cv-section-info")
 
+        const projectTextArea = document.getElementById("cv-project-textarea")
+        const projectSelector = document.getElementById("cv-project-selector")
+        const projectSave = document.getElementById("cv-project-save")
+        const projectInfo = document.getElementById("cv-project-info")
+        const projectDelete = document.getElementById("cv-project-del")
+        const projectAdd = document.getElementById("cv-project-add")
+        const projectDialog = document.getElementById("cv-project-dialog") 
+        const projectAddInput = document.getElementById("cv-project-add-input")
+        const projectAddConfirm = document.getElementById("cv-project-add-confirm")
+        const projectAddInfo = document.getElementById("cv-project-add-info")
+
         var sectionSelectedMD = null;
+        var projectSelectedMD = null;
+
         loadText(sectionTextArea, "WHOAMI")
+        getProjects(projectSelector)
+
+        projectAddConfirm.addEventListener("click", () => {
+
+            projectAddInfo.innerHTML = ""
+
+            const refusedChar = ['\\','/' ,':' ,'*','?' ,'"','<','>','|']
+            var wrongName = true;
+
+            for(var char of refusedChar) {
+
+                console.log(wrongName)
+
+                if(projectAddInput.value.includes(char)) {
+                    wrongName = false;
+
+                } 
+            }
+
+            if(wrongName == true && projectAddInput.value != "" && projectAddInput.value != "WHOAMI" && projectAddInput.value != "CONTACT" && projectAddInput.value != "FORMATION" && projectAddInput.value != "DIPLOME" && projectAddInput.value != "LOBBIES" && projectAddInput.value != "FIND") {
+
+                fetch('/cv', {
+                method: 'POST',
+                redirect: 'follow',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({"request":"add", "value": projectAddInput.value})
+                })
+                .then(response => response.json())
+                .then(response => res(response))
+
+                function res(response) {
+                    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_PERMITTED") {
+                            projectAddInfo.innerHTML = "Erreur, le fichier n'a pas été ajouté correctement !"
+
+                        } else {
+                            projectDialog.close()
+                            getProjects(projectSelector)
+                            loadText(projectTextArea, projectAddInput.value)
+                        }
+                        
+                    }
+
+                }
+
+
+
+
+            } else {
+
+                projectAddInfo.innerHTML = "Ce nom n'est pas autorisé !"
+            }
+        })
+
+        projectAdd.addEventListener("click", () => {
+
+            projectDialog.showModal()
+
+        })
+
+        projectDelete.addEventListener("click", () => {
+
+            const opt = projectSelector.value
+
+            deleteProject(opt)
+
+        })
 
         sectionSelector.addEventListener("change", () => {
             const opt = sectionSelector.value
@@ -127,6 +225,16 @@
 
         })
 
+        
+
+
+        projectSelector.addEventListener("change", () => {
+            const opt = projectSelector.value
+
+            loadText(projectTextArea, opt)
+
+        })
+
         sectionSave.addEventListener("click", () => {
 
             sectionInfo.innerHTML = ""
@@ -166,21 +274,62 @@
 
         })
 
+        projectSave.addEventListener("click", () => {
+
+        projectInfo.innerHTML = ""
+
+
+
+        fetch('/cv', {
+            method: 'POST',
+            redirect: 'follow',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({"request":"set", "value": projectTextArea.value, "type": projectSelectedMD})
+            })
+            .then(response => response.json())
+            .then(response => res(response))
+
+            function res(response) {
+                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_PERMITTED") {
+                        projectInfo.innerHTML = "Erreur, le fichier n'a pas été sauvegardé correctement !"
+
+                    } else {
+                        projectInfo.innerHTML = "<span style='color:rgb(130, 255, 163); '>Le fichier a été sauvegardé avec succès !</span>"
+
+                    }
+                    
+                }
+
+            }
+
+        })
+
 
         loadText(sectionTextArea, "WHOAMI")
         
         function loadText(textArea, requestElement) {
 
             sectionSelectedMD = requestElement
+            projectSelectedMD = projectSelector.value
+            
 
-            fetch('/cv', {
-                method: 'POST',
-                redirect: 'follow',
-                headers: {
-                    'Accept': 'application/json',
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({"request":"get", "value": requestElement})
+                fetch('/cv', {
+                    method: 'POST',
+                    redirect: 'follow',
+                    headers: {
+                        'Accept': 'application/json',
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({"request":"get", "value": requestElement})
                 })
                 .then(response => response.json())
                 .then(response => res(response))
@@ -202,7 +351,89 @@
 
         }
 
+        function getProjects(selector) {
 
+            fetch('/cv', {
+                    method: 'POST',
+                    redirect: 'follow',
+                    headers: {
+                        'Accept': 'application/json',
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({"request":"get-projects"})
+                })
+                .then(response => response.json())
+                .then(response => res(response))
+
+                function res(response) {
+                    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") {
+
+                        const projectList = response.content
+                        var projectSelectorInner = new Array();
+
+                        for(var projet of projectList) {
+
+                            projectSelectorInner.push("<option>" + projet + "</option>")
+                         
+                        }
+
+                        if(projectList.length == 0) {
+
+                            projectInfo.innerHTML = "<span style='color: white;'>Aucun projet</span>"
+                            projectTextArea.innerHTML = 'Aucun projet n\'est disponible'
+                        }
+                        
+
+                        selector.innerHTML = projectSelectorInner.join("")
+                        loadText(projectTextArea, selector.value)
+                    }
+
+                }
+            
+                        
+
+        }
+
+        function deleteProject(opt) {
+
+                fetch('/cv', {
+                    method: 'POST',
+                    redirect: 'follow',
+                    headers: {
+                        'Accept': 'application/json',
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({"request":"del", "value": opt})
+                })
+                .then(response => response.json())
+                .then(response => res(response))
+
+                function res(response) {
+                    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_PERMITTED") {
+                            projectInfo.innerHTML = "Erreur, le fichier n'a pas été supprimé correctement !"
+
+                        } else {
+                            projectInfo.innerHTML = "<span style='color:rgb(130, 255, 163); '>Le fichier a été supprimé avec succès !</span>"
+
+                        }
+
+                        getProjects(projectSelector)
+                        
+                    }
+
+                }
+
+        }
     }
 </script>
 
@@ -210,6 +441,96 @@
 <!-- Style-->
 <style>
 
+.cv_addproject {
+
+border-radius: 1vw;
+border-color: transparent;
+background-color: rgb(80, 80, 80);
+color: white;
+text-align: center;
+
+}
+
+.cv_add_close {
+
+border-radius: 1vw;
+border-color: rgb(255, 48, 48);
+border-width: 1%;
+border-style: solid;
+color: white;
+background-color: transparent;
+transition: all 0.2s ease 0s;
+margin: 0.5vw;
+padding: 0.5vw;
+font-size: 1vw;
+}
+
+.cv_add_close:hover {
+box-shadow: 1px 1px 10px rgb(255, 48, 48);
+background-color: rgb(255, 48, 48);
+color: black;
+}
+
+.cv_add_close:active {
+box-shadow: none;
+
+}
+
+.cv_add_confirm {
+
+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: 0.5vw;
+padding: 0.5vw;
+font-size: 1vw;
+
+}
+
+.cv_add_confirm:hover {
+box-shadow: 1px 1px 10px rgb(0, 174, 255);
+background-color: rgb(0, 174, 255);
+color: black;
+}
+
+.cv_add_confirm:active {
+box-shadow: none;
+
+}
+
+.inp {
+
+border-style: hidden;
+border-radius: 1vw;
+padding: 0.2vw;
+padding-left: 1vw;
+transition: all 0.2s ease 0s;
+margin-bottom: 0.5vw;
+width: 100%;
+
+
+}
+
+
+
+.inp:hover {
+
+box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.477) ;
+
+}
+
+
+.inp:focus {
+
+box-shadow: 5px 5px 5px rgba(0, 174, 255, 0.477) ;
+
+}
+
+
 .cv-info {
 
     margin-top: 5%;