diff --git a/frontend/html/dashboard.html b/frontend/html/dashboard.html index 4c69518..5d6eb56 100644 --- a/frontend/html/dashboard.html +++ b/frontend/html/dashboard.html @@ -217,9 +217,10 @@ p
- - - + + + +
diff --git a/frontend/scripts/dashboard.js b/frontend/scripts/dashboard.js index 1d59083..5d6fbde 100644 --- a/frontend/scripts/dashboard.js +++ b/frontend/scripts/dashboard.js @@ -1,7 +1,5 @@ //-----------------------------------------------------------------------------------------(Getting Data) -let globaldata; - async function getData() { try { @@ -14,8 +12,7 @@ async function getData() { if(response.ok) { let userdata = await response.json(); - //console.log(userdata) - globaldata = userdata + localStorage.setItem("userdata", JSON.stringify(userdata)); getFieldName(userdata) } else if(!response.ok) { const errorMessage = await response.text(); @@ -109,9 +106,7 @@ search.addEventListener('keyup', function() { if(result == ""){ getData() } else { - getFilterList(result,globaldata) - //console.log(result); - + getFilterList(result,JSON.parse(localStorage.getItem("userdata"))) } }); @@ -169,7 +164,93 @@ function addFieldLogic() { function submitForm() { const form = document.getElementById('formdata') const formdata = new FormData(form) - console.log(formdata) + formatData(formdata) +} + +function formatData(userdata) { + const formData = new FormData() + const objData = {} + let sitename; + userdata.forEach((value, key)=>{ + if(key == 'sitename'){ + sitename = value; + }else { + objData[key] = value; + } + }) + formData.append("entry_name", sitename) + formData.append("fields", JSON.stringify(objData)) + // jsondata[sitename] = jsonuserdata + // sendData(JSON.stringify(jsondata)) + console.log(sitename) + sendData(formData) +} + +//----------------------------------------------------------------------------------------- Post Entry Data to API + +const errorlabel = document.querySelector('.fieldcontainer label') + +async function sendData(formData){ + try { + const response = await fetch('/add_entry', { + method: "POST", + body: formData + }); + if(response.ok){ + getData() + } + if(!response.ok){ + const errorMessage = await response.text(); + errorlabel.textContent = errorMessage + setTimeout(()=>{ + errorlabel.textContent = '' + },3000) + throw new Error(errorMessage); + } + } catch(error){ + console.error(error) + } +} + +//----------------------------------------------------------------------------------------- Form Data Validation Logic + +function validateData() { + if(validateSitename() && validateUrl()) + submitForm(); + return; +} + +function validateSitename(){ + const sitename = document.getElementById('sitenamefield').value + if(sitename =='' || sitename == null){ + errorlabel.textContent = "Enter Sitename!" + setTimeout(()=>{ + errorlabel.textContent = '' + },3000) + return false; + } else{ + return true; + } +} + +function validateUrl(){ + 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; + } } diff --git a/frontend/styles/dashboard.css b/frontend/styles/dashboard.css index ff96024..d86385f 100644 --- a/frontend/styles/dashboard.css +++ b/frontend/styles/dashboard.css @@ -521,7 +521,21 @@ footer p{ border-radius: 10px; background-color: rgb(255, 255, 255, 0.8); border: none; - margin-top: 30px; + margin-top: 5px; + transition: height 0.1s ease, width 0.1s ease; +} + +.fieldcontainer form > div:first-child button:hover{ + background-color: rgb(255, 255, 255, 0.9); + width: 65px; + height: 35px; +} + +.fieldcontainer label{ + font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + font-size: 15px; + font-weight: bold; + color: white; } /*----------------------------------------------------------------------------------------*/