Add "Add Entry" Functionality

This commit is contained in:
Modo 2023-10-22 00:54:32 +05:30
parent 2dd1c87bb7
commit 42de93efe5
3 changed files with 108 additions and 12 deletions

View File

@ -217,9 +217,10 @@ p<!DOCTYPE html>
<div class="fieldcontainer">
<form id="formdata">
<div>
<input type="text" name="sitename" placeholder="Site Name">
<input type="text" name="url" placeholder="Site URL">
<button type="button" onclick="submitForm()"></button>
<input type="text" name="sitename" placeholder="Site Name" id="sitenamefield" >
<input type="text" name="url" placeholder="Site URL" id="urlfield" >
<label></label>
<button type="button" onclick="validateData()"></button>
</div>
<div class="inputfieldpanel">

View File

@ -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;
}
}

View File

@ -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;
}
/*----------------------------------------------------------------------------------------*/