<div class="link">
<h1>Générateur de lien</button></h1>
</br>
<div class="homepanel">
<div class="row w-100">
<div class="hbox col-lg">
<h1><i class="fa fa-link"></i> Liens raccourcis</h1>
</br>
<div id="lkcontent">
</div>
</br>
<button id="lk_add" class="lk_add"><i class="fa fa-plus"></i> Ajouter</button>
</div>
</div>
</div>
</div>
<dialog class="lk_adduser" id="lk_add_form">
<h1><i class="fa fa-plus"></i> Ajouter un lien raccourci</h1>
<p>Nom du raccourci :</p>
<input class="inp" id="lk_add_name" type="text">
<p>Lien à raccourcir :</p>
<input class="inp" id="lk_add_src" type="text">
<p>Nouveau lien (neutral.raphix.fr/link/<i>votrelien</i>):</p>
<input class="inp" id="lk_add_dest" type="text">
<div style="color: rgb(255, 76, 76);" id="lk_add_info"></div>
</div>
<button onclick="getPage('link.html')" id="lk_add_close" class="lk_add_close">Annuler</button>
<button id="lk_add_confirm" class="lk_add_confirm">Ajouter</button>
</dialog>
<div id="lk_dialog">
</div>
<script>
if(typeof lkaddform == 'undefined'){
const lkcontent = document.getElementById("lkcontent")
const lkdialogs = document.getElementById("lk_dialog")
getLinks()
function getLinks() {
var linksContent = new Array()
var dialogContent = new Array()
fetch('/link', {
method: 'POST',
redirect: 'follow',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({"request":"get", "value": ""})
})
.then(response => response.json())
.then(response => showLink(response))
function showLink(response) {
var links = response.content
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") {
for(var link of links) {
linksContent.push('<div class="row lk_line"> <p class="col-lg"><i class="fas fa-sticky-note"></i> Nom du raccourci : ' + link.name + '</p> <p class="col-lg"><i class="fa-sharp fa-solid fa-link"></i> Lien raccourci : <a href="http://localhost/link/' + link.dest + '">http://localhost/link/' + link.dest + '</a></p> <p class="col-lg"><i class="fa-solid fa-up-right-from-square"></i> Lien réel : <a href="' + link.src + '"><strong>Vers le lien</strong></a></p> <div class="col-lg "> <button id="' + link.name + '_edit_btn" class="lk_edit"><i class="fa fa-pen"></i></button> <button id="' + link.name + '_delete" class="lk_delete"><i class="fa fa-trash"></i></button> </div> </div>')
dialogContent.push('<dialog class="lk_adduser" id="' + link.name + '_dialog"> <h1><i class="fa fa-pen"></i> Editer un lien raccourci</h1> <p>Nom du raccourci :</p> <input class="inp" id="' + link.name + '_edit_name" type="text"> <p>Lien à raccourcir :</p> <input class="inp" id="' + link.name + '_edit_src" type="text"> <p>Nouveau lien (neutral.raphix.fr/link/<i>votrelien</i>):</p> <input class="inp" id="' + link.name + '_edit_dest" type="text"> <div style="color: rgb(255, 76, 76);" id="' + link.name + '_edit_info"></div> </div> <button onclick="getPage(\'link.html\')" id="lk_add_close" class="lk_add_close">Annuler</button> <button id="' + link.name + '_edit_confirm" class="lk_add_confirm">Editer</button> </dialog>')
lkcontent.innerHTML = linksContent.join("")
lkdialogs.innerHTML = dialogContent.join("")
}
for(var link of links) {
makeAction(link)
}
if(links.length == 0) {
lkcontent.innerHTML = '<span style="margin: 2vw;color: rgb(255, 76, 76);">Aucun lien raccourci n\'a été crée.</span>' // lkcontent.innerHTML = linksContent.join("")
}
}
}
}
function makeAction(link) {
const lkdelete = document.getElementById(link.name + "_delete")
const lkedit = document.getElementById(link.name + '_edit_btn')
const lkdialog = document.getElementById(link.name + "_dialog")
const lkname = document.getElementById(link.name + '_edit_name')
const lksrc = document.getElementById(link.name + "_edit_src")
const lkdest = document.getElementById(link.name + "_edit_dest")
const lkinfo = document.getElementById(link.name + "_edit_info")
const lkconfirm = document.getElementById(link.name + "_edit_confirm")
lkdelete.addEventListener("click", () => {
fetch('/link', {
method: 'POST',
redirect: 'follow',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({"request":"del", "value": link.name})
})
getPage("link.html")
})
lkedit.addEventListener("click", () => {
lkname.value = link.name
lksrc.value = link.src
lkdest.value = link.dest
lkdialog.showModal()
})
lkconfirm.addEventListener("click", () => {
lkinfo.innerHTML = ""
if(lkname.value == "" | lkdest.value == "" | lksrc.value == "") {
lkinfo.innerHTML = "Tout les champs doivent être remplis."
} else {
if(lkdest.value.includes(" ") | lksrc.value.includes(" ")) {
lkinfo.innerHTML = "Aucun espace n'est accepté dans les liens"
} else {
const requestData = {
"name":lkname.value,
"src":lksrc.value,
"dest":lkdest.value,
"original":link.name
}
fetch('/link', {
method: 'POST',
redirect: 'follow',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({"request":"edit", "value": requestData})
})
.then(response => response.json())
.then(response => afteredit(response))
function afteredit(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 == "EDI") {
getPage("link.html")
}else if(response.content == "NAME_ALREADY_USED") {
lkinfo.innerHTML = "Le nom du raccourci est déjà utilisé"
} else if(response.content == "DEST_ALREADY_USED") {
lkinfo.innerHTML = "L'URL de raccourci est déjà utilisé"
} else {
lkinfo.innerHTML = "ECHEC - Réessayez plus tard !"
}
}
}
}
}
})
}
const lkaddbtn = document.getElementById("lk_add")
const lkaddform = document.getElementById("lk_add_form")
const lkaddname = document.getElementById("lk_add_name")
const lkaddsrc = document.getElementById("lk_add_src")
const lkadddest = document.getElementById("lk_add_dest")
const lkaddconfirm = document.getElementById("lk_add_confirm")
const lkaddinfo = document.getElementById("lk_add_info")
lkaddbtn.addEventListener("click", () => {
lkaddform.showModal()
})
lkaddconfirm.addEventListener("click", () => {
lkaddinfo.innerHTML = ""
if(lkaddname.value == "" | lkadddest.value == "" | lkaddsrc.value == "") {
lkaddinfo.innerHTML = "Tout les champs doivent être remplis."
} else {
if(lkadddest.value.includes(" ") | lkaddsrc.value.includes(" ")) {
lkaddinfo.innerHTML = "Aucun espace n'est accepté dans les liens"
} else {
const requestData = {
"name":lkaddname.value,
"src":lkaddsrc.value,
"dest":lkadddest.value
}
fetch('/link', {
method: 'POST',
redirect: 'follow',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({"request":"add", "value": requestData})
})
.then(response => response.json())
.then(response => af(response))
function af(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 == "ADDED") {
getPage("link.html")
} else if(response.content == "NAME_ALREADY_USED") {
lkaddinfo.innerHTML = "Le nom du raccourci est déjà utilisé"
} else if(response.content == "DEST_ALREADY_USED") {
lkaddinfo.innerHTML = "L'URL de raccourci est déjà utilisé"
} else {
lkaddinfo.innerHTML = "ECHEC - Réessayez plus tard !"
}
}
}
}
}
})
}
</script>
<!-- Style-->
<style>
.hbox h1 {
font-size: large;
}
table {
color: white;
}
.lk_line {
padding: 0.5vw;
text-align: center;
align-items: center;
vertical-align: center;
}
.lk_line a {
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) ;
}
.lk_add {
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;
padding: 0.5vw;
}
.lk_add:hover {
box-shadow: 1px 1px 10px rgb(0, 174, 255);
background-color: rgb(0, 174, 255);
color: black;
}
.lk_add:active {
box-shadow: none;
}
.lk_edit {
border-radius: 100%;
border-color: rgb(0, 174, 255);
border-width: 1%;
border-style: solid;
color: white;
background-color: transparent;
transition: all 0.2s ease 0s;
width: 2.5vw;
height: 2.5vw;
margin-left: 0.5vw;
margin-right: 0.5vw;
font-size: 1vw;
}
.lk_edit:hover {
box-shadow: 1px 1px 10px rgb(0, 174, 255);
background-color: rgb(0, 174, 255);
color: black;
}
.lk_edit:active {
box-shadow: none;
}
.lk_delete {
border-radius: 100%;
border-color: rgb(255, 48, 48);
border-width: 1%;
border-style: solid;
color: white;
background-color: transparent;
transition: all 0.2s ease 0s;
width: 2.5vw;
height: 2.5vw;
margin-left: 0.5vw;
margin-right: 0.5vw;
font-size: 1vw;
}
.lk_delete:hover {
box-shadow: 1px 1px 10px rgb(255, 48, 48);
background-color: rgb(255, 48, 48);
color: black;
}
.lk_delete:active {
box-shadow: none;
}
.lk_adduser {
border-radius: 1vw;
border-color: transparent;
background-color: rgb(80, 80, 80);
color: white;
text-align: center;
}
.lk_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;
}
.lk_add_close:hover {
box-shadow: 1px 1px 10px rgb(255, 48, 48);
background-color: rgb(255, 48, 48);
color: black;
}
.lk_add_close:active {
box-shadow: none;
}
.lk_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;
}
.lk_add_confirm:hover {
box-shadow: 1px 1px 10px rgb(0, 174, 255);
background-color: rgb(0, 174, 255);
color: black;
}
.lk_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) ;
}
</style>