From 69bfc652aaf12e7accb4cda69b912ed19dc32d4f Mon Sep 17 00:00:00 2001
From: Modo <yashlaxman@gmail.com>
Date: Sat, 21 Oct 2023 22:22:49 +0530
Subject: [PATCH] Add Form Logic

---
 frontend/html/dashboard.html  | 21 ++++++++--------
 frontend/scripts/dashboard.js | 47 +++++++++++++++++++++++++++++------
 frontend/styles/dashboard.css |  2 +-
 3 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/frontend/html/dashboard.html b/frontend/html/dashboard.html
index da24649..2e6c7c5 100644
--- a/frontend/html/dashboard.html
+++ b/frontend/html/dashboard.html
@@ -44,7 +44,6 @@
             </div>
 
         </div>
-
         <div id="entrycontainer" class="hidden">
             <div class="addentrydiv">
 
@@ -53,29 +52,29 @@
                 </div>
 
                 <div class="fieldcontainer">
-                    <form>
+                    <form id="formdata">
                         <div>
                             <input type="text" name="sitename" placeholder="Site Name">
                             <input type="text" name="url" placeholder="Site URL">
-                            <button type="button"></button>
+                            <button type="button" onclick="submitForm()"></button>
                         </div>
     
                         <div class="inputfieldpanel">
                             <div>
-                                <input type="checkbox" id="checkbox">
-                                <input type="text" name="Username" placeholder="Username"><br>
+                                <input type="checkbox" id="u_checkbox">
+                                <input type="text" name="Username" placeholder="Username" id="u_input" disabled><br>
                             </div>
                             <div>
-                                <input type="checkbox" id="checkbox">
-                                <input type="text" name="Password" placeholder="Password"><br>
+                                <input type="checkbox" id="p_checkbox">
+                                <input type="text" name="Password" placeholder="Password" id="p_input" disabled><br>
                             </div>
                             <div> 
-                                <input type="checkbox" id="checkbox">
-                                <input type="text" name="Email" placeholder="Email Address"><br>
+                                <input type="checkbox" id="e_checkbox">
+                                <input type="text" name="Email" placeholder="Email Address" id="e_input" disabled><br>
                             </div>
                             <div>
-                                <input type="checkbox" id="checkbox">
-                                <input type="text" name="PhNumber" placeholder="Phone Number"><br>
+                                <input type="checkbox" id="n_checkbox">
+                                <input type="text" name="PhNumber" placeholder="Phone Number" id="n_input" disabled><br>
                             </div>
                         </div>
                     </form>
diff --git a/frontend/scripts/dashboard.js b/frontend/scripts/dashboard.js
index 3b4e7bf..1d59083 100644
--- a/frontend/scripts/dashboard.js
+++ b/frontend/scripts/dashboard.js
@@ -54,7 +54,7 @@ function updateListGui(field) {
 }
 
 
-
+//----------------------------------------------------------------------------------------- Search Bar and Content Formatting
 
 
 // const data = {
@@ -100,7 +100,7 @@ function getDisplayList(fieldnames,userdata){
   }
 }
 
-//-----------------------------------------------------------------------------------------
+//----------------------------------------------------------------------------------------- Filter Search
 
 const search = document.getElementById('search');
 
@@ -127,7 +127,7 @@ function getFilterList(keyword,data) {                       //Gets Filtered Fie
     //console.log(filterarray)
   }
 
-//-----------------------------------------------------------------------------------------
+//----------------------------------------------------------------------------------------- "Add Data" Window Logic
 
 const addentry = document.getElementById('addentry')
 const entrywindow = document.querySelector('#entrycontainer')
@@ -135,6 +135,7 @@ const entrywindow = document.querySelector('#entrycontainer')
 addentry.addEventListener('click', function() {
     entrywindow.classList.toggle("hidden");
     entrywindow.style.display = "flex";
+    addFieldLogic()
 })
 
 const exitentrywin = document.getElementById('backbtn')
@@ -143,13 +144,44 @@ exitentrywin.addEventListener('click', function() {
     entrywindow.style.display = "none"
 })
 
-//-----------------------------------------------------------------------------------------
+//----------------------------------------------------------------------------------------- Form Behaviour Logic
 
+function addFieldLogic() {
+    const forminputs = document.querySelectorAll('.inputfieldpanel div input[type="text"]')
+    const formcheckbox = document.querySelectorAll('.inputfieldpanel div input[type="checkbox"]')
+    formcheckbox.forEach((checkbox, index) => {
+        forminputs[index].disabled = true
+        forminputs[index].value = ''
+        checkbox.checked = false;
+    })
+    formcheckbox.forEach((checkbox, index) =>
+        checkbox.addEventListener('change', function(){
+            forminputs[index].disabled = !checkbox.checked;
+            if(forminputs[index].disabled){
+                forminputs[index].value = ''
+            }
+        })
+    )
+}
+
+//----------------------------------------------------------------------------------------- Form Data Logic
+
+function submitForm() {
+    const form = document.getElementById('formdata')
+    const formdata = new FormData(form)
+    console.log(formdata)
+}
+
+
+
+//----------------------------------------------------------------------------------------- Display User Information
 
 function updateInfoGui(call) {
     console.log(call)
 }
 
+//----------------------------------------------------------------------------------------- Welcome Message
+
 const greettext = document.querySelector('#greetname')
 const masterusername = localStorage.getItem("username");
 console.log(masterusername)
@@ -158,7 +190,7 @@ function greet(){
     greettext.textContent = masterusername;
 }
 
-//-----------------------------------------------------------------------------------------
+//----------------------------------------------------------------------------------------- Logout
 
 async function logOut() {
     try{
@@ -193,7 +225,6 @@ logoutbtn.addEventListener('click', () => {
 window.onload = function() {
     getData();
     greet()
-    
-    entrywindow.classList.toggle("hidden");
-    entrywindow.style.display = "flex";
+    // entrywindow.classList.toggle("hidden");
+    // entrywindow.style.display = "flex";
 };
\ No newline at end of file
diff --git a/frontend/styles/dashboard.css b/frontend/styles/dashboard.css
index b5cf69e..ff96024 100644
--- a/frontend/styles/dashboard.css
+++ b/frontend/styles/dashboard.css
@@ -394,7 +394,7 @@ footer p{
   width: 100%;
   height: 100%;
   background-color: hsl(0, 0%, 100%, 10%);
-  display: flex;
+  display: none;
   justify-content: center;
   align-items: center;
   backdrop-filter: blur(20px);