Link Api to Edit Data Fields + Animations

frontend/html/dashboard.html

@@ -101,6 +101,7 @@
 
         </div>
         <div id="entrycontainer" class="hidden">
+
             <div class="addentrydiv">
 
                 <div>
@@ -138,6 +139,18 @@
                     </form>
                 </div>
 
+                <!-- <div class="confirmdivparent">
+                    <div class="confirmdiv">
+                        <img src="../assets/tick.svg">
+                    </div>
+                </div> -->
+
+            </div>
+        </div>
+
+        <div class="confirmdivparent">
+            <div class="confirmdiv">
+                <img src="../assets/tick.svg">
             </div>
         </div>
 

frontend/scripts/dashboard.js

@@ -1,4 +1,17 @@
 
+// const data = {
+//     Amazon: {
+//         url: "https://www.amazon.com",
+//         Name: "Yash",
+//         Password: "123"
+//     },
+//     Google: {
+//         url: "https://www.google.com",
+//         Name: "XYZ",
+//         Password: "Secret"
+//     }
+// }
+
 //-----------------------------------------------------------------------------------------(Getting Data)
 
 async function getData() {
@@ -60,20 +73,6 @@ function updateListGui(field) {
 
 //----------------------------------------------------------------------------------------- Search Bar and Content Formatting
 
-
-// const data = {
-//     Amazon: {
-//         url: "https://www.amazon.com",
-//         Name: "Yash",
-//         Password: "123"
-//     },
-//     Google: {
-//         url: "https://www.google.com",
-//         Name: "XYZ",
-//         Password: "Secret"
-//     }
-// }
-
 function getFieldName(data) {                       //Gets All Field Values
   let fieldnamearray = []
   for(let field in data){
@@ -213,6 +212,11 @@ async function sendData(formData){
             body: formData 
         });
         if(response.ok){
+            confirmation()
+            setTimeout(() => {
+                entrywindow.style.display = "none"
+                localStorage.removeItem("editVal")
+            }, 1000);
             getData()
         }
         if(!response.ok){
@@ -381,7 +385,9 @@ function editData() {
     editDataHandler(formeditdata)
 }
 
-function editDataHandler(editdata) {
+let isError;
+
+async function editDataHandler(editdata) {
     const objData = {}
     const userdata = JSON.parse(localStorage.getItem("userdata"))
     const entryname = localStorage.getItem("editVal")
@@ -394,37 +400,158 @@ function editDataHandler(editdata) {
         }
     })
 
+    const properties = ["Username", "Email", "PhNumber", "Password"]
+    for(let property of properties){
+        if(!(property in objData)){
+            objData[property] = ""
+        }
+    }
+
+    console.log(objData)
+    isError = false
+
     for(let field in objData){
+        if (objData.hasOwnProperty(field)) {
+
             let value = objData[field]
 
             if(!(field in userdata[entryname])){
                 addNewField(entryname, field, value)
-        } else if(value != userdata[entryname][field]){
+                await delay(500)
+            } 
+            else if(value != userdata[entryname][field]){
                 editFieldValue(entryname, field, value )
+                await delay(500)
+            } 
+
         }
     }
 
     if(sitename != entryname){
         changeEntryName(entryname, sitename)
+        await delay(500)
     }
+    getData()
+    await delay(100)
+    if(!isError){
+        updateInfoGui(localStorage.getItem("editVal"))
+        confirmation()
+        setTimeout(() => {
+            entrywindow.style.display = "none"
+            localStorage.removeItem("editVal")
+        }, 1000);
+    }
+}
+
+function delay(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
 }
 
 
 //----------------------------------------------------------------------------------------- Edit Data API Logic
 
-function addNewField(sitename, field, value) {
+async function addNewField(sitename, field, value) {
-    console.log(sitename, field, value)
+    const formData = new FormData()
+    formData.append("entry_name", sitename)
+    formData.append("field_name", field)
+    formData.append("field_value", value)
+
+    try {
+        const response = await fetch('/add_field', {
+            method: "POST",
+            body: formData 
+        });
+        if(response.ok){
+            console.log(`Added Field: ${field}, with Value "${value}"`)
+        }
+        if(!response.ok){
+            isError = true
+            const errorMessage = await response.text();
+                errorlabel.textContent = errorMessage
+                setTimeout(()=>{
+                    errorlabel.textContent = ''
+                },3000)
+                throw new Error(errorMessage);
+        }
+    } catch(error){
+        console.error(error)
     }     
     
-function editFieldValue(sitename, field, value) {
-    console.log(sitename, field, value)
 }
 
-function changeEntryName(entryname, sitename) {
+async function editFieldValue(sitename, field, value) {
-    console.log(entryname, sitename)
+    const formData = new FormData()
+    formData.append("entry_name", sitename)
+    formData.append("field_name", field)
+    formData.append("field_value", value)
+
+    try {
+        const response = await fetch('/edit_field_value', {
+            method: "POST",
+            body: formData 
+        });
+        if(response.ok){
+            console.log(`Changed Value of Field: ${field} to "${value}"`)
+        }
+        if(!response.ok){
+            isError = true
+            const errorMessage = await response.text();
+                errorlabel.textContent = errorMessage
+                setTimeout(()=>{
+                    errorlabel.textContent = ''
+                },3000)
+                throw new Error(errorMessage);
+        }
+    } catch(error){
+        console.error(error)
+    }  
 }
 
+async function changeEntryName(entryname, sitename) {
+    const formData = new FormData()
+    formData.append("old_entry_name", entryname)
+    formData.append("new_entry_name", sitename)
 
+    try {
+        const response = await fetch('/edit_entry_name', {
+            method: "POST",
+            body: formData 
+        });
+        if(response.ok){
+            console.log(`Changed EntryName from ${entryname} to "${sitename}"`)
+            localStorage.setItem("editVal", sitename)
+        }
+        if(!response.ok){
+            isError = true
+            const errorMessage = await response.text();
+                errorlabel.textContent = errorMessage
+                setTimeout(()=>{
+                    errorlabel.textContent = ''
+                },3000)
+                throw new Error(errorMessage);
+        }
+    } catch(error){
+        console.error(error)
+    }  
+}
+//----------------------------------------------------------------------------------------- Confirmation Box
+
+function confirmation() {
+    console.log('Confirmed')
+    const confirm = document.querySelector('.confirmdivparent')
+    const tick = document.querySelector('.confirmdiv img')
+    const confirmbox = document.querySelector('.confirmdiv')
+    confirm.style.display = "flex"
+    tick.classList.add('confirmfade')
+    confirmbox.classList.add('confirmdivanimate')
+    confirm.classList.add('confirmdivanimate')
+    setTimeout(() => {
+        confirm.style.display = "none"
+        tick.classList.remove('confirmfade')
+        confirmbox.classList.add('confirmdivanimate')
+        confirm.classList.remove('confirmdivanimate')
+    }, 1000);
+}
 
 //----------------------------------------------------------------------------------------- Display User Information
 
@@ -542,14 +669,9 @@ logoutbtn.addEventListener('click', () => {
 
 //-----------------------------------------------------------------------------------------
 
-// window.addEventListener('unload', function() {
-//     logOut()
-// });
 
 
 window.onload = function() {
     getData();
     greet()
-    // entrywindow.classList.toggle("hidden");
-    // entrywindow.style.display = "flex";
 };

frontend/styles/dashboard.css

@@ -694,6 +694,80 @@ footer p{
   background-color: rgb(255, 0, 0, 0.8);
 }
 
+/*----------------------------------------------------------------------------------------*/
+
+.confirmdivparent {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: hsl(0, 0%, 100%, 10%);
+  display: none;
+  justify-content: center;
+  align-items: center;
+  backdrop-filter: blur(20px);
+  border-radius: 40px;
+}
+
+.confirmdiv {
+  position: relative;
+  width: 400px;
+  height: 200px;
+  background-color: rgb(255, 255, 255, 0.8);
+  backdrop-filter: blur(5px);
+  border-radius: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 0.3s ease;
+  opacity: 0;
+} 
+
+.confirmdivanimate {
+  animation-name: cdani;
+  animation-duration: 1s;
+  animation-timing-function: ease;
+}
+
+@keyframes cdani {
+  0% {
+    opacity: 0;
+  }
+  25%, 75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.confirmdiv img {
+  opacity: 0;
+  width: 40%;
+  height: 40%;
+  transition: opacity 1s ease;
+  transition: transform 0.8s ease;
+}
+
+.confirmfade {
+  animation-name: fade;
+  animation-duration: 1s;
+  animation-timing-function: ease;
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.5);
+  } 
+  100% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
 
 /*----------------------------------------------------------------------------------------*/