532 lines
15 KiB
HTML
532 lines
15 KiB
HTML
<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> |