Add rep,se and rest coluns per varience to tables

StarOne01 · May 5, 2024 · 00eb8b7 · 00eb8b7
1 parent f017d1e
commit 00eb8b7
Show file tree

Hide file tree

Showing 5 changed files with 297 additions and 209 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -4,7 +4,7 @@
   display: none;
 }
 .varient {
-  width: 30px;
+  width: 50px;
   margin: 5px;
 }
 
@@ -78,11 +78,19 @@ table {
   border-collapse: collapse;
   border: 1px solid black;
 }
+
+td input {
+  display: block;
+  width: 90px;
+}
+
 th,
 td {
   text-align: left;
   border: 1px solid white;
   padding: 8px;
+  color: white;
+  background-color: black;
 }
 
 #SevereThinness,

diff --git a/assets/js/ExScript.js b/assets/js/ExScript.js
@@ -47,6 +47,80 @@ const showSuggestionsEx = (i) => {
   }
 };
 
+const addInput = (e) => {
+
+  for(const Selecteday of Exdays) {
+    if (ExDb[Selecteday][`${e.target.id.substring(0, e.target.id.length - 3)}`].length >
+  Number(
+    e.target.value
+  )
+) {
+  toastBody.textContent = "The existing number of exercises is greater than the variance set, Please delete some exercises";
+  toastBootstrap.show();
+  return;
+}
+    document.querySelector(
+      `#${Selecteday}Tbl #${e.target.id.substring(0, e.target.id.length - 3)}Tr`
+    ).innerHTML = "";
+
+  };
+
+  Exdays.forEach((Selecteday) => {
+
+      const newTd = document.createElement("td");
+      const newTdTime = document.createElement("td"); 
+      newTdTime.innerHTML = `${e.target.id.substring(0, e.target.id.length - 3)}`
+      let htm = "";
+      htm = `<table id="${e.target.id.substring(0, e.target.id.length - 3)}TblR" width='100%'>`;
+      console.log(`id="${e.target.id.substring(0, e.target.id.length - 3)}TblR"`);
+      /*
+     for(let g = 0;  ;g++) {
+            
+     htm += "<tr><td>Cell</td></tr>"
+     
+     }*/
+
+      htm += "</table>";
+      newTd.innerHTML = htm;
+      document
+      .querySelector(
+        `#${Selecteday}Tbl #${e.target.id.substring(0, e.target.id.length - 3)}Tr`
+      )
+      .appendChild(newTdTime);
+      document
+        .querySelector(
+          `#${Selecteday}Tbl #${e.target.id.substring(0, e.target.id.length - 3)}Tr`
+        )
+        .appendChild(newTd);
+        ExDb[Selecteday][`${e.target.id.substring(0, e.target.id.length - 3)}`].forEach((fo) => {
+          const newTr = document.createElement("tr");
+          newTr.innerHTML = `<td>${fo}</td>`;
+
+          document
+            .querySelector(
+              `#${Selecteday}Tbl #${e.target.id.substring(0, e.target.id.length - 3)}TblR`
+            ).appendChild(newTr);
+          });
+    for (let lea = 0; lea < 3; lea++) {
+      let htm1 = "";
+      htm1 = `<table width='100%'>`;
+      for (let j = 0; j < e.target.value; j++) {
+        htm1 += `<input class='In${j}' style='margin:10px;' type='text'/>`;
+      }
+
+      htm1 += "</table>";
+      const newTd1 = document.createElement("td");
+      newTd1.innerHTML = htm1;
+      document
+        .querySelector(
+          `#${Selecteday}Tbl #${e.target.id.substring(0, e.target.id.length - 3)}Tr`
+        )
+        .appendChild(newTd1);
+    }
+
+  });
+};
+
 const addSelectedEx = (e) => {
   e.preventDefault();
   if (`${e.target.id.substring(0, e.target.id.length - 3)}` === "HIIT") {
@@ -59,9 +133,6 @@ const addSelectedEx = (e) => {
     `${e.target.id.substring(0, e.target.id.length - 3)}`
   ).value = "";
   for (const da of setDays) {
-    console.log(
-      ExDb[da][`${e.target.id.substring(0, e.target.id.length - 3)}`].length
-    );
     if (
       document.getElementById(
         `${e.target.id.substring(0, e.target.id.length - 3)}Var`

diff --git a/assets/js/domGet.js b/assets/js/domGet.js
@@ -41,7 +41,7 @@ const calorieRow = document.querySelectorAll("#calorieRow td");
 const days = document.querySelectorAll("input[name='day']");
 const userInput = document.querySelectorAll("[list='itemList']");
 const userInputEx = document.querySelectorAll("[list='itemListEx']");
-
+let order = document.getElementsByClassName("selected");
 const detailedInfo = document.querySelectorAll("input[name='detailedInfo']");
 const detailedForm = document.getElementById("detailedForm");
 let dataList = document.getElementById("itemList");

diff --git a/assets/js/eventListeners.js b/assets/js/eventListeners.js
@@ -38,7 +38,7 @@ orderLi.forEach((i) => {
       orderLi.forEach((j) => {
         j.classList.remove("selected");
       });
-      e.target.classList.push("selected");
+      e.target.classList.add("selected");
       WorkOfTheDay = [];
       WorkOfTheDay.push(e.target.textContent);
     }
@@ -211,13 +211,14 @@ setOrderBtn.addEventListener("click", (e) => {
     const newDiv = document.createElement("div");
     newDiv.innerHTML = `<label for="${order[i].textContent
       .split(" ")
-      .join("")}">${order[i].textContent}</label><br />
+      .join("")}" onchange='addInput(e)'>${order[i].textContent}</label><br />
   <label>Varience:</label>
   <input id="${order[i].textContent
     .split(" ")
     .join("")}Var" type="number" class="varient"> <br>
         <input
           type="search"
+          onchange='addInput(this)'
           list="itemListEx"
           id='${order[i].textContent.split(" ").join("")}'
           placeholder="Search items..."
@@ -241,6 +242,7 @@ setOrderBtn.addEventListener("click", (e) => {
       .addEventListener("click", addSelectedEx);
     const userInputEx = document.querySelectorAll("[list='itemListEx']");
     console.log(userInputEx);
+    document.getElementById(`${order[i].textContent.split(" ").join("")}Var`).addEventListener("change", addInput);
     userInputEx.forEach((j) => {
       j.addEventListener("keyup", (k) => {
         showSuggestionsEx(k.target);
@@ -256,33 +258,14 @@ setOrderBtn.addEventListener("click", (e) => {
         .split(" ")
         .join("")}TblR" width='100%'>`;
       console.log(`id="${order[i].textContent.split(" ").join("")}TblR"`);
-      /*
-     for(let g = 0;  ;g++) {
-            
-     htm += "<tr><td>Cell</td></tr>"
-     
-     }*/
-
       htm += "</table>";
       newTd.innerHTML = htm;
       document
         .querySelector(
           `#${Selecteday}Tbl #${order[i].textContent.split(" ").join("")}Tr`
         )
         .appendChild(newTd);
-      for (let lea = 0; lea < 3; lea++) {
-        const newTd1 = document.createElement("td");
-        let htm1 = "";
-        htm1 = `<table width='100%'>`;
-        htm1 += "</table>";
-        newTd1.innerHTML = htm1;
-        document
-          .querySelector(
-            `#${Selecteday}Tbl #${order[i].textContent.split(" ").join("")}Tr`
-          )
-          .appendChild(newTd1);
-        newTd1.setAttribute("contenteditable", "true");
-      }
+
     });
 
     Exdays.forEach((da) => {