From 01427943028da9a71dc1af028b45ef3cc7bb38c5 Mon Sep 17 00:00:00 2001 From: Modo Date: Mon, 23 Oct 2023 12:47:02 +0530 Subject: [PATCH] Add Data Edit Page UI --- frontend/html/dashboard.html | 6 +- frontend/scripts/dashboard.js | 140 +++++++++++++++++++++++++++++++++- frontend/styles/dashboard.css | 26 ++++++- 3 files changed, 168 insertions(+), 4 deletions(-) diff --git a/frontend/html/dashboard.html b/frontend/html/dashboard.html index bcf01ac..9018e60 100644 --- a/frontend/html/dashboard.html +++ b/frontend/html/dashboard.html @@ -39,6 +39,7 @@ p
+<<<<<<< HEAD
@@ -192,6 +193,8 @@ p
+======= +>>>>>>> 3fbcabc (Add Data Edit Page UI)
@@ -279,7 +282,8 @@ p - + +
diff --git a/frontend/scripts/dashboard.js b/frontend/scripts/dashboard.js index 3a12e0e..fab31a9 100644 --- a/frontend/scripts/dashboard.js +++ b/frontend/scripts/dashboard.js @@ -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") diff --git a/frontend/styles/dashboard.css b/frontend/styles/dashboard.css index 806573f..846602c 100644 --- a/frontend/styles/dashboard.css +++ b/frontend/styles/dashboard.css @@ -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;