<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 id="cv-project-selector" class="col-lg-10 cv-selector">
</select>
<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 id="cv-project-textarea" class="cv-textarea">
</textarea>
</div>
<div class="row cv-upload-section">
<p class="col-lg-8" style="font-size: 14px;">Image : <span id="cv-m-upload-name">Aucune image !</span></p>
<button id="cv-m-upload-btn" style="margin-left: 10%;" class="col-lg-2 cv-upload"><i class="fa fa-upload"></i> Upload</button>
<input id='cv-m-upload-file' type='file' hidden/>
</div>
<div class="row w-100">
<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">
<p id="cv-project-info" class="cv-info" style="color:rgb(255, 48, 48)"></p>
</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>
<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 id="cv-upload-name">NULL_NAME</span> <button id="cv-upload-btn" style="margin-left: 10%;" class="cv-upload"><i class="fa fa-upload"></i> Upload</button></p>
<input id='cv-upload-file' type='file' hidden/>
</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") {
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")
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")
const projectUploadFile = document.getElementById("cv-upload-file")
const projectUploadBtn = document.getElementById("cv-upload-btn")
const projectUploadName = document.getElementById("cv-upload-name")
const eprojectUploadFile = document.getElementById("cv-m-upload-file")
const eprojectUploadBtn = document.getElementById("cv-m-upload-btn")
const eprojectUploadName = document.getElementById("cv-m-upload-name")
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)
projectSelector.value = projectAddInput.value
}
}
}
if(projectUploadFile.files.length > 0) {
const file_acc = new FormData();
file_acc.append("apic", projectUploadFile.files[0])
fetch('/upload', {
method: 'POST',
mode:"cors",
cache:"no-cache",
credentials:"same-origin",
headers: {
"uploadforproject": projectAddInput.value
},
referrerPolicy:"no-referrer",
redirect: 'follow',
body: file_acc
}).then(response => response.json())
.then(response => resupload(response))
function resupload(response) {
if(response.result == "ERROR") {
projectInfo.innerHTML = "L'image n'a pas été upload !"
}
}
}
} else {
projectAddInfo.innerHTML = "Ce nom n'est pas autorisé !"
}
})
projectAdd.addEventListener("click", () => {
projectDialog.showModal()
projectAddInput.value = ""
projectUploadName.innerHTML = "Aucune image."
projectUploadFile.value = null;
})
projectUploadFile.addEventListener("change", () => {
projectUploadName.innerHTML = projectUploadFile.files[0].name
})
projectUploadBtn.addEventListener("click", () => {
projectUploadFile.click()
})
eprojectUploadBtn.addEventListener("click", () => {
eprojectUploadFile.click()
})
eprojectUploadFile.addEventListener("change", () => {
eprojectUploadName.innerHTML = eprojectUploadFile.files[0].name
if(eprojectUploadFile.files.length > 0) {
const file_acc = new FormData();
file_acc.append("apic", eprojectUploadFile.files[0])
fetch('/upload', {
method: 'POST',
mode:"cors",
cache:"no-cache",
credentials:"same-origin",
headers: {
"uploadforproject": projectSelector.value
},
referrerPolicy:"no-referrer",
redirect: 'follow',
body: file_acc
}).then(response => response.json())
.then(response => resupload(response))
function resupload(response) {
if(response.result == "ERROR") {
projectInfo.innerHTML = "L'image n'a pas été upload !"
} else {
projectInfo.innerHTML = "<span style='color:rgb(130, 255, 163); '>L'image a été correctement upload !</span>"
}
}
}
})
projectDelete.addEventListener("click", () => {
const opt = projectSelector.value
deleteProject(opt)
})
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")
}
})
projectSelector.addEventListener("change", () => {
const opt = projectSelector.value
loadText(projectTextArea, opt)
})
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>"
}
}
}
})
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})
})
.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
}
}
}
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>
<!-- 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%;
}
.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>