Changes

Fridge Modal Add Item works now
PlatePilot · Feb 9, 2024 · 97491d4 · 97491d4
1 parent c6c2ace
commit 97491d4
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 14 deletions.
diff --git a/deno.lock b/deno.lock
diff --git a/src/client/_styles/index.scss b/src/client/_styles/index.scss
@@ -70,21 +70,20 @@ body {
 }
 
 .view-button {
-    background-color: var(--secondary);
-    padding: 5px 15px;
-    // color: var(--text);
     font-weight: bold;
     border-radius: var(--border-radius);
     cursor: pointer;
+    color: var(--text-opposite);
+    background-color: var(--primary);
+    padding: 5px 15px;
 }
 
 .add-button {
     font-weight: bold;
     border-radius: var(--border-radius);
     cursor: pointer;
-    color: var(--text);
-    background-color: var(--dark-secondary);
-    border: 2px solid var(--primary);
+    color: var(--text-opposite);
+    background-color: var(--primary);
     padding: 5px 15px;
 }
 

diff --git a/src/client/fridge/_src/index.ts b/src/client/fridge/_src/index.ts
@@ -97,15 +97,18 @@ dropdownAmountButton?.addEventListener('click', () => {
   }
 });
 
+
 const dropdownItems = amountDropdown?.getElementsByClassName("dropdown-item");
 
+let selectedItemText: string | null = null;
+
 if (dropdownItems) {
   for (const item of dropdownItems) {
     item.addEventListener("click", (event) => {
-      const selectedItemText = item.textContent;
+      selectedItemText = item.textContent || "";
       const newSpan = document.createElement("span");
       newSpan.textContent = selectedItemText;
-      newSpan.classList.add('dropdown-text')
+      newSpan.classList.add('dropdown-text');
 
       dropdownAmountButton.innerHTML = '';
       dropdownAmountButton.appendChild(newSpan);
@@ -145,4 +148,93 @@ categoryCards.forEach((card) => {
       card.classList.add("selected");
     }
   });
-});
+});
+
+
+
+
+
+
+
+
+
+const saveButtonModal = document.getElementById("savebuttonmodal")!;
+const nameInput = document.getElementById("name-fridge-modal") as HTMLInputElement;
+const amountInput = document.getElementById("amount-fridge-modal") as HTMLInputElement;
+const modalExpirationInput = document.getElementById("modal-expiration") as HTMLInputElement;
+
+saveButtonModal.addEventListener('click', () => {
+  const nameValue = nameInput.value.trim();
+
+  if (nameValue !== "") {
+    const amountValue = amountInput.value.trim();
+    const expirationValue = modalExpirationInput.value;
+
+    const displaySelectedItemText = (selectedItemText && selectedItemText !== "items") ? selectedItemText : "";
+
+    const newItemDiv = document.createElement("div");
+    newItemDiv.classList.add("fridge-item")
+
+    if (amountValue !== "") {
+      const newAmountSpan = document.createElement("span");
+      newAmountSpan.innerHTML = amountValue;
+      newItemDiv.appendChild(newAmountSpan);
+    }
+
+    if (displaySelectedItemText !== "") {
+      const newItemText = document.createElement("span");
+      newItemText.innerHTML = displaySelectedItemText;
+      newItemDiv.appendChild(newItemText);
+    }
+
+    const newNameSpan = document.createElement("span");
+    newNameSpan.innerHTML = nameValue;
+
+    newItemDiv.appendChild(newNameSpan);
+
+    if (expirationValue !== "") {
+      const newExpirationText = document.createElement("span");
+      newExpirationText.classList.add("expiration-wrapper");
+      newExpirationText.innerHTML = "<i class='bx bx-info-circle'></i>";
+      newItemDiv.appendChild(newExpirationText);
+
+      const newExpirationContent = document.createElement("span");
+      newExpirationContent.classList.add("expiration-content");
+      newExpirationContent.innerHTML = expirationValue;
+      newExpirationText.appendChild(newExpirationContent);
+    }
+
+    const selectedCategoryCard = document.querySelector(".category-card.selected");
+
+    if (selectedCategoryCard) {
+      const selectedCategory = selectedCategoryCard.getAttribute("data-category");
+
+      const categoryContainer = document.querySelector(`.fridge-content-container[data-category='${selectedCategory}']`);
+
+      if (categoryContainer) {
+        const categoryContent = categoryContainer.querySelector(".fridge-content");
+
+        if (categoryContent) {
+          const newItemDivClone = newItemDiv.cloneNode(true);
+          categoryContent.appendChild(newItemDivClone);
+        }
+      }
+    }
+
+    const allCategoryContainer = document.querySelector(".fridge-content-container[data-category='all']");
+
+    if (allCategoryContainer) {
+      const allCategoryContent = allCategoryContainer.querySelector(".fridge-content");
+
+      if (allCategoryContent) {
+        allCategoryContent.appendChild(newItemDiv);
+      }
+    }
+  }
+
+  nameInput.value = "";
+  amountInput.value = "";
+  modalExpirationInput.value = "";
+});
+
+
diff --git a/src/client/fridge/_styles/index.scss b/src/client/fridge/_styles/index.scss
@@ -78,7 +78,7 @@
 
 .fridge-modal {
     position: fixed;
-    display: flex; //change back to none
+    display: none; //change back to none
     justify-content: center;
     width: 100%;
     height: 100%;
@@ -422,6 +422,38 @@
 
                 border-radius: 0 var(--border-radius) var(--border-radius) var(--border-radius);
                 border: 2px solid var(--dark-2);
+
+                display: flex;
+                flex-wrap: wrap;
+
+                .fridge-item {
+                    padding: 2px var(--small-gap);
+                    border: 2px solid var(--dark-3);
+                    border-radius: var(--border-radius);
+                    height: fit-content;
+                    display: flex;
+                    gap: var(--small-gap);
+
+                    .expiration-wrapper {
+                        display: flex;
+                        align-items: center;
+                        gap: var(--small-gap);
+                        cursor: pointer;
+
+                        .bx {
+                            color: var(--primary);
+                        }
+
+                        &:hover .expiration-content{
+                            display: block;
+                        }
+
+                        .expiration-content {
+                            color: var(--dark-text);
+                            display: none;
+                        }
+                    }
+                }
             }
 
         }

diff --git a/src/client/fridge/index.html b/src/client/fridge/index.html
@@ -30,12 +30,12 @@
                         <div class="modal-content-item-group">
                             <div class="modal-content-item">
                                 <span class="modal-item-header">Name</span>
-                                <input type="text" class="modal-input name">
+                                <input id="name-fridge-modal" type="text" class="modal-input name">
                             </div>
                             <div class="modal-content-item">
                                 <span class="modal-item-header">Amount</span>
                                 <div class="amount-input-wrapper">
-                                    <input type="number" class="amount">
+                                    <input id="amount-fridge-modal" type="number" class="amount">
                                     <div id="dropdown-amount-button" class="dropdown-button"><i class="bx bx-chevron-down"></i></div>
                                 </div>
                                 <div id="amount-dropdown-menu" class="amount-dropdown">
@@ -67,7 +67,7 @@
                                 <span class="modal-item-header">Expiration Date</span>
                                 <div class="expiration-wrapper">
                                     <div class="expiration-content">
-                                        <input type="date">
+                                        <input id="modal-expiration" type="date">
                                     </div>
                                     <!-- <div class="expiration-content">
                                         <span class="expiration-text">Day</span>