neutral-old/public/templates/cv.html

<div class="home">
    <h1>Mon CV</h1>
    
</br>
<div class="homepanel">
    <div class="row w-100">
        <div class="hbox col-lg">
            <h1><i class="fas fa-puzzle-piece"></i> Sections</h1>
            <div class="cv-sections">

            <div class="row w-100">
            <select id="cv-section-selector" class="cv-selector">
                <option>Qui suis-je ?</option>
                <option>Contact</option>
                <option>Formations</option>
                <option>Diplomes & Certifications</option>
                <option>Passions et activités</option>
                <option>Ma recherche de stage</option>
            </select>
            </div>
            <div class="row w-100">
            <textarea id="cv-section-textarea" class="cv-textarea">

            </textarea>
            </div>

            <div class="row w-100">
                <button id="cv-section-save" class="cv-save col-lg-2"><i class="fa fa-save"></i> Sauvegarder</button>
            </div>
            <div class="row w-100">
                
                <p id="cv-section-info" class="cv-info" style="color:rgb(255, 48, 48)"></p>
            </div>
            
            </div>
        </div>
        <div class="hbox col-lg">
          
              
            <h1><i class="fa fa-gear"></i> Projets</h1>
            <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>
                <button class="col-lg-1 cv-plus"><i class="fa fa-plus"></i></button>
                </div>
                
                <div class="row w-100">
                <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>
                </div>
                
                <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>
                    
                </div>
                
            </div>
            
        </div>
        
         
    </div>
    <div class="row w-100">
        <div class="hbox col-lg">
          
              
            <h1><i class="fa fa-signal"></i> Statistiques</h1>
            <p>Coming soon ...</p>
            
         </div>
    </div>
   

</div>

</div>


<script>
    if(typeof checkDelare == "undefined") {
        const checkDelare = true;

        const sectionTextArea = document.getElementById("cv-section-textarea")
        const sectionSelector = document.getElementById("cv-section-selector")
        const sectionSave = document.getElementById("cv-section-save")
        const sectionInfo = document.getElementById("cv-section-info")

        var sectionSelectedMD = null;
        loadText(sectionTextArea, "WHOAMI")

        sectionSelector.addEventListener("change", () => {
            const opt = sectionSelector.value

            if(opt == "Qui suis-je ?") {
                loadText(sectionTextArea, "WHOAMI")
                
            } else if(opt == "Contact") {
                loadText(sectionTextArea, "CONTACT")
         
            } else if(opt == "Formations") {
                loadText(sectionTextArea, "FORMATION")
               
            } else if(opt == "Diplomes & Certifications") {
                loadText(sectionTextArea, "DIPLOME")
             
            } else if(opt == "Passions et activités") {
                loadText(sectionTextArea, "LOBBIES")
               
            } else if(opt == "Ma recherche de stage") {
                loadText(sectionTextArea, "FIND")
              
            }

        })

        sectionSave.addEventListener("click", () => {

            sectionInfo.innerHTML = ""

       

            fetch('/cv', {
                method: 'POST',
                redirect: 'follow',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({"request":"set", "value": sectionTextArea.value, "type": sectionSelectedMD})
                })
                .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") {
                            sectionInfo.innerHTML = "Erreur, le fichier n'a pas été sauvegardé correctement !"

                        } else {
                            sectionInfo.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

            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))

                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") {

                        textArea.value = response.content
                        
                    }

                }
            


        }


    }
</script>


<!-- Style-->
<style>

.cv-info {

    margin-top: 5%;
}

.cv-upload-section {

    align-items: center;
    margin-top: 3%;

}

.cv-selector {

    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;
    font-size: 0.7vw;
    padding: 0.5vw;
    margin-bottom: 3%;
    



}

.cv-selector:hover {
    box-shadow: 1px 1px 10px rgb(0, 174, 255);
    background-color: rgb(0, 174, 255);
    color: black;
}

.cv-selector:active {
    box-shadow: none;

}

.cv-selector option {

    background-color: rgb(80, 80, 80);
    color: white;
}

.cv-upload {

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;
font-size: 0.7vw;
padding: 0.5vw;

}

.cv-upload:hover {
box-shadow: 1px 1px 10px rgb(0, 174, 255);
background-color: rgb(0, 174, 255);
color: black;
}

.cv-upload:active {
box-shadow: none;

}

.cv-save{

    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;
    font-size: 0.7vw;
    padding: 0.5vw;
    margin-top: 3%;
    margin-right: 3%;



}

.cv-save:hover {
    box-shadow: 1px 1px 10px rgb(0, 174, 255);
    background-color: rgb(0, 174, 255);
    color: black;
}

.cv-save:active {
    box-shadow: none;

}

.cv-plus {

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;
font-size: 0.7vw;
padding: 0.5vw;
margin-bottom: 3%;
margin-left: 2%;

}

.cv-plus:hover {
box-shadow: 1px 1px 10px rgb(0, 174, 255);
background-color: rgb(0, 174, 255);
color: black;
}

.cv-plus:active {
box-shadow: none;

}


.cv-del {

    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;
    font-size: 0.7vw;
    padding: 0.5vw;
    margin-top: 3%;
    margin-right: 3%;



}

.cv-del:hover {
    box-shadow: 1px 1px 10px rgb(255, 48, 48);
    background-color: rgb(255, 48, 48);
    color: black;
}

.cv-del:active {
    box-shadow: none;

}

.cv-textarea {

    border-radius: 1vw;
    padding: 3%;
    color: black;
    height: 15vw;
    
}


.cv-sections {

    padding: 2% !important;
}


.hbox h1 {

    font-size: large;

}

table  {
    color: white;
    
}



.hbox {
    
    margin: 1%;
    padding: 1%;
    background-color: rgb(80, 80, 80);
    border-radius: 1vw;
    box-shadow: 5px 5px 5px rgba(80, 80, 80, 0.477) ;

  }

</style>