Made changes to alignment

catchspider2002 · Apr 16, 2020 · 8244639 · 8244639
1 parent ac60eef
commit 8244639
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -44,17 +44,17 @@
             </button>
             <br />
 
-            <label id="dateSelect" class="block"> </label>
-            <label id="languageSelect" class="block"> </label>
+            <label id="dateSelect" class="block text-left"> </label>
+            <label id="languageSelect" class="block text-left"> </label>
             <div>
               <label class="inline-flex items-center text-left">
                 <input type="checkbox" class="form-checkbox" checked />
-                <span class="ml-2">Capitalize labels</span>
+                <span class="ml-2 text-left">Capitalize labels</span>
               </label>
             </div>
-            <div class="block">
-              <span class="text-gray-200">Paper Size</span>
-              <div class="mt-2 flex">
+            <div class="block text-left">
+              <span class="text-gray-200 ">Paper Size</span>
+              <div class="mt-2 flex ">
                 <label class="inline-flex items-center mr-8">
                   <input type="radio" class="form-radio" name="radio" value="1" checked />
                   <span class="ml-2">A4</span>
@@ -65,7 +65,7 @@
                 </label>
               </div>
             </div>
-            <div class="form-group">
+            <div class="form-group text-left">
               <label for="color">Choose Color:</label>
               <div class="pickr"></div>
             </div>
@@ -101,7 +101,7 @@
               </div>
               <div class="flex w-full">
                 <button class="px-3 py-2 mx-auto my-4 text-black font-semibold bg-gray-300 rounded hover:bg-gray-600">
-                  <span>+ New Line</span>
+                  <span id="newLine">+ New Line</span>
                 </button>
               </div>
             </div>

diff --git a/src/index.js b/src/index.js
@@ -530,7 +530,7 @@ const assignValues = () => {
   render(companyDetailsTemplate(), document.getElementById("optionalCompanyDetails"));
   render(customerDetailsTemplate(), document.getElementById("optionalCustomerDetails"));
 
-  render(itemTable(), document.getElementById("itemDetailCard"));
+  render(itemTable(), id("itemDetailCard"));
 
   optional2ColumnFields.forEach((item) => {
     // remove2Fields(item);
@@ -749,6 +749,22 @@ const companyDetailsTemplate = () => html`
 const customerDetailsTemplate = () =>
   html` ${addButton("phone", "phone")} ${addButton("email", "email")} ${addButton("customField", "phone")} ${addButton("customField", "phone")}`;
 
+let itemDetails = ["companyName", "companyName", "companyName", "0.0", "0.0", "0.0", "0.0"];
+let itemDetailsTemplate = [];
+
+for (const i of itemDetails) {
+  itemDetailsTemplate.push(html`<td>${i}</td>`);
+}
+
+function createNewLine() {
+  render(itemLine(), id("id_of_table"));
+}
+
+const itemLine = () =>
+  html` <tr>
+    ${itemDetailsTemplate}
+  </tr>`;
+
 const itemTable = () =>
   html`
     <div class="overflow-x-auto">
@@ -762,24 +778,7 @@ const itemTable = () =>
           <th class="px-2">${inputLabel("discount")}</th>
           <th class="px-2">${inputLabel("total")}</th>
         </tr>
-        <tr>
-          <td>${inputOutput("clientCony", lang["companyName"])}</td>
-          <td>${inputOutput("clientCny", lang["companyName"])}</td>
-          <td>${inputOutput("clientCoany", lang["companyName"])}</td>
-          <td>34.99</td>
-          <td>1.99</td>
-          <td>3.99</td>
-          <td>32.99</td>
-        </tr>
-        <tr>
-          <td>3</td>
-          <td class="whitespace-no-wrap">three three three three</td>
-          <td class="whitespace-no-wrap">trois troistrois trois trois trois</td>
-          <td class="whitespace-no-wrap">drei drei drei drei drei</td>
-          <td>1.99</td>
-          <td>3.99</td>
-          <td>32.99</td>
-        </tr>
+        ${itemLine()} ${itemLine()}
       </table>
     </div>
   `;
@@ -831,6 +830,7 @@ if (lang) assignValues();
 if (id("downloadButton")) id("downloadButton").addEventListener("click", download, false);
 if (id("layout1")) id("layout1").addEventListener("click", renderLayout1, false);
 if (id("layout2")) id("layout2").addEventListener("click", renderLayout2, false);
+if (id("newLine")) id("newLine").addEventListener("click", createNewLine, false);
 
 (function () {
   // Get relevant elements and collections