410 lines
9.5 KiB
HTML
410 lines
9.5 KiB
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 == "LOBBIES") {
|
||
|
|
loadText(sectionTextArea, "Passions et activités")
|
||
|
|
|
||
|
|
} 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>
|