Add "Add Entry" Functionality
This commit is contained in:
parent
2dd1c87bb7
commit
42de93efe5
@ -217,9 +217,10 @@ p<!DOCTYPE html>
|
|||||||
<div class="fieldcontainer">
|
<div class="fieldcontainer">
|
||||||
<form id="formdata">
|
<form id="formdata">
|
||||||
<div>
|
<div>
|
||||||
<input type="text" name="sitename" placeholder="Site Name">
|
<input type="text" name="sitename" placeholder="Site Name" id="sitenamefield" >
|
||||||
<input type="text" name="url" placeholder="Site URL">
|
<input type="text" name="url" placeholder="Site URL" id="urlfield" >
|
||||||
<button type="button" onclick="submitForm()"></button>
|
<label></label>
|
||||||
|
<button type="button" onclick="validateData()"></button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="inputfieldpanel">
|
<div class="inputfieldpanel">
|
||||||
|
@ -1,7 +1,5 @@
|
|||||||
|
|
||||||
//-----------------------------------------------------------------------------------------(Getting Data)
|
//-----------------------------------------------------------------------------------------(Getting Data)
|
||||||
let globaldata;
|
|
||||||
|
|
||||||
|
|
||||||
async function getData() {
|
async function getData() {
|
||||||
try {
|
try {
|
||||||
@ -14,8 +12,7 @@ async function getData() {
|
|||||||
|
|
||||||
if(response.ok) {
|
if(response.ok) {
|
||||||
let userdata = await response.json();
|
let userdata = await response.json();
|
||||||
//console.log(userdata)
|
localStorage.setItem("userdata", JSON.stringify(userdata));
|
||||||
globaldata = userdata
|
|
||||||
getFieldName(userdata)
|
getFieldName(userdata)
|
||||||
} else if(!response.ok) {
|
} else if(!response.ok) {
|
||||||
const errorMessage = await response.text();
|
const errorMessage = await response.text();
|
||||||
@ -109,9 +106,7 @@ search.addEventListener('keyup', function() {
|
|||||||
if(result == ""){
|
if(result == ""){
|
||||||
getData()
|
getData()
|
||||||
} else {
|
} else {
|
||||||
getFilterList(result,globaldata)
|
getFilterList(result,JSON.parse(localStorage.getItem("userdata")))
|
||||||
//console.log(result);
|
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -169,7 +164,93 @@ function addFieldLogic() {
|
|||||||
function submitForm() {
|
function submitForm() {
|
||||||
const form = document.getElementById('formdata')
|
const form = document.getElementById('formdata')
|
||||||
const formdata = new FormData(form)
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -521,7 +521,21 @@ footer p{
|
|||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-color: rgb(255, 255, 255, 0.8);
|
background-color: rgb(255, 255, 255, 0.8);
|
||||||
border: none;
|
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*----------------------------------------------------------------------------------------*/
|
/*----------------------------------------------------------------------------------------*/
|
||||||
|
Loading…
x
Reference in New Issue
Block a user