Add Data Edit Page UI
This commit is contained in:
parent
2a108141cd
commit
3fbcabcc86
@ -32,7 +32,7 @@
|
||||
<div class="infopanel">
|
||||
<div>
|
||||
<label id="displayname">Display</label>
|
||||
<button></button>
|
||||
<button id="linkbutton"></button>
|
||||
</div>
|
||||
|
||||
<div class="div_u">
|
||||
@ -113,7 +113,8 @@
|
||||
<input type="text" name="sitename" placeholder="Site Name" id="sitenamefield" >
|
||||
<input type="text" name="url" placeholder="Site URL" id="urlfield" value="https://">
|
||||
<label></label>
|
||||
<button type="button" onclick="validateData()"></button>
|
||||
<button type="button" onclick="validateData()" id="submitdatabtn"></button>
|
||||
<button type="button" onclick="validateDataEdit()" id="submiteditdatabtn">Save</button>
|
||||
</div>
|
||||
|
||||
<div class="inputfieldpanel">
|
||||
|
||||
@ -52,7 +52,7 @@ function updateListGui(field) {
|
||||
});
|
||||
editbtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
updateInfoGui(btn.id);
|
||||
showEditPage(btn.id);
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -137,6 +137,10 @@ const entrywindow = document.querySelector('#entrycontainer')
|
||||
addentry.addEventListener('click', function() {
|
||||
entrywindow.classList.toggle("hidden");
|
||||
entrywindow.style.display = "flex";
|
||||
const otherbutton = document.getElementById('submitdatabtn')
|
||||
const editbutton = document.getElementById('submiteditdatabtn')
|
||||
otherbutton.style.display = "block";
|
||||
editbutton.style.display = "none";
|
||||
const inputbox = document.getElementById("sitenamefield")
|
||||
const urlfield = document.getElementById("urlfield")
|
||||
inputbox.value = ''
|
||||
@ -264,10 +268,129 @@ function validateUrl(){
|
||||
}
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------------- Edit Page Logic
|
||||
|
||||
function showEditPage(field) {
|
||||
entrywindow.classList.toggle("hidden");
|
||||
entrywindow.style.display = "flex";
|
||||
const otherbutton = document.getElementById('submitdatabtn')
|
||||
const editbutton = document.getElementById('submiteditdatabtn')
|
||||
otherbutton.style.display = "none";
|
||||
editbutton.style.display = "block";
|
||||
const inputbox = document.getElementById("sitenamefield")
|
||||
const urlfield = document.getElementById("urlfield")
|
||||
inputbox.value = ''
|
||||
urlfield.value = ""
|
||||
addFieldEditLogic(field)
|
||||
}
|
||||
|
||||
function addFieldEditLogic(field){
|
||||
const forminputs = document.querySelectorAll('.inputfieldpanel div input[type="text"]')
|
||||
const formcheckbox = document.querySelectorAll('.inputfieldpanel div input[type="checkbox"]')
|
||||
const url = document.getElementById('urlfield')
|
||||
const sitename = document.getElementById('sitenamefield')
|
||||
const userdata = JSON.parse(localStorage.getItem("userdata"))
|
||||
|
||||
sitename.value = field
|
||||
url.value = userdata[field]["url"]
|
||||
|
||||
formcheckbox.forEach((checkbox, index) => {
|
||||
forminputs[index].disabled = true
|
||||
|
||||
switch (forminputs[index].id) {
|
||||
case "u_input":
|
||||
forminputs[index].value = userdata[field]["Username"] ?? "";
|
||||
break;
|
||||
case "p_input":
|
||||
forminputs[index].value = userdata[field]["Password"] ?? "";
|
||||
break;
|
||||
case "e_input":
|
||||
forminputs[index].value = userdata[field]["Email"] ?? "";
|
||||
break;
|
||||
case "n_input":
|
||||
forminputs[index].value = userdata[field]["PhNumber"] ?? "";
|
||||
break;
|
||||
}
|
||||
|
||||
if(forminputs[index].value == ""){
|
||||
checkbox.checked = false;
|
||||
} else {
|
||||
checkbox.checked = true;
|
||||
}
|
||||
|
||||
forminputs[index].disabled = !checkbox.checked;
|
||||
checkbox.addEventListener('change', function(){
|
||||
forminputs[index].disabled = !checkbox.checked;
|
||||
if(forminputs[index].disabled){
|
||||
forminputs[index].value = ''
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------------- Edit Data Validation
|
||||
|
||||
function validateEditData() {
|
||||
if(validateEditSitename() && validateEditUrl())
|
||||
editData();
|
||||
return;
|
||||
}
|
||||
|
||||
function validateEditSitename(){
|
||||
const sitename = document.getElementById('sitenamefield').value
|
||||
if(sitename =='' || sitename == null){
|
||||
errorlabel.textContent = "Enter Sitename!"
|
||||
setTimeout(()=>{
|
||||
errorlabel.textContent = ''
|
||||
},3000)
|
||||
return false;
|
||||
} else{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function validateEditUrl(){
|
||||
const url = document.getElementById('urlfield').value
|
||||
const urlPattern = /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i;
|
||||
if(url == '' || url ==null){
|
||||
errorlabel.textContent = "Enter URL!"
|
||||
setTimeout(()=>{
|
||||
errorlabel.textContent = ''
|
||||
},3000)
|
||||
return false;
|
||||
}else if(!urlPattern.test(url)){
|
||||
errorlabel.textContent = "Enter Valid URL!"
|
||||
setTimeout(()=>{
|
||||
errorlabel.textContent = ''
|
||||
},3000)
|
||||
return false;
|
||||
}else{
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
//----------------------------------------------------------------------------------------- Edit Data Submission Logic
|
||||
|
||||
function editData() {
|
||||
const form = document.getElementById('formdata')
|
||||
const formeditdata = new FormData(form)
|
||||
formatEditData(formeditdata)
|
||||
}
|
||||
|
||||
function formatEditData(editdata) {
|
||||
|
||||
}
|
||||
|
||||
|
||||
//----------------------------------------------------------------------------------------- Edit Data API Logic
|
||||
|
||||
|
||||
|
||||
//----------------------------------------------------------------------------------------- Display User Information
|
||||
|
||||
let previousClickListener = null
|
||||
function updateInfoGui(field) {
|
||||
const title = document.getElementById('displayname')
|
||||
title.textContent = field
|
||||
@ -275,6 +398,21 @@ function updateInfoGui(field) {
|
||||
|
||||
const data = JSON.parse(localStorage.getItem("userdata"))
|
||||
|
||||
const linkButton = document.getElementById('linkbutton')
|
||||
|
||||
function link() {
|
||||
const url = data[field]["url"]
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
|
||||
if(previousClickListener) {
|
||||
linkButton.removeEventListener('click', previousClickListener);
|
||||
}
|
||||
linkButton.addEventListener('click', link)
|
||||
|
||||
previousClickListener = link;
|
||||
|
||||
|
||||
const inputmap = new Map();
|
||||
inputmap.set("dusername","div_u")
|
||||
inputmap.set("demail","div_e")
|
||||
|
||||
@ -755,7 +755,7 @@ footer p{
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.fieldcontainer form > div:first-child button{
|
||||
.fieldcontainer form > div:first-child button:first-of-type{
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
border-radius: 10px;
|
||||
@ -770,7 +770,29 @@ footer p{
|
||||
box-shadow: 0 0 10px;
|
||||
}
|
||||
|
||||
.fieldcontainer form > div:first-child button:hover{
|
||||
.fieldcontainer form > div:first-child button:first-of-type:hover{
|
||||
background-color: rgb(255, 255, 255, 0.9);
|
||||
width: 65px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.fieldcontainer form > div:first-child button:last-child{
|
||||
display: none;
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
border-radius: 10px;
|
||||
background-color: rgba(0, 255, 81, 0.8);
|
||||
border: none;
|
||||
margin-top: 5px;
|
||||
transition: height 0.1s ease, width 0.1s ease;
|
||||
box-shadow: black 0 0 10px;
|
||||
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fieldcontainer form > div:first-child button:last-child:hover{
|
||||
color: black;
|
||||
background-color: rgb(255, 255, 255, 0.9);
|
||||
width: 65px;
|
||||
height: 35px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user