feat: added Actions

03_dom/unterricht/tag25/01_product-manager/assets/css/main.css

@@ -24,3 +24,11 @@ body {
     margin-bottom: 0;
   }
 }
+
+.product-manager table .th-actions {
+  width: 150px;
+}
+
+.product-manager table tbody td button {
+  margin: 3px;
+}

03_dom/unterricht/tag25/01_product-manager/assets/js/main.js

@@ -35,6 +35,33 @@
     addProduct(product);
   };
 
+  const onClickRemove = (e) => {
+    const btnEl = e.currentTarget;
+    const currentRowEl = btnEl.parentNode.parentNode;
+
+    currentRowEl.remove(); // kein IE11 support
+    // DOM.tBody.removeChild(currentRowEl);
+  };
+
+  const onClickMoveUp = (e) => {
+    const btnEl = e.currentTarget;
+    const currentRowEl = btnEl.parentNode.parentNode; // aktuelle Zeile (tr) mit dem Button
+
+    // ParentNode.insertBefore(referenceElement, targetElement)
+    DOM.tBody.insertBefore(currentRowEl, currentRowEl.previousElementSibling);
+
+    console.log('move up');
+  };
+
+  const onClickMoveDown = (e) => {
+    const btnEl = e.currentTarget;
+    const currentRowEl = btnEl.parentNode.parentNode; // aktuelle Zeile (tr) mit dem Button
+
+    // ParentNode.insertBefore(referenceElement, targetElement)
+    DOM.tBody.insertBefore(currentRowEl, currentRowEl.nextElementSibling.nextElementSibling);
+    console.log('move down');
+  };
+
   // === XHR/FETCH ========
 
   // === FUNCTIONS ========
@@ -51,11 +78,83 @@
 
     const tdName = createTd(name, 'td-name');
     const tdPrice = createTd(price, 'td-price');
-    const trEl = createTr(tdName, tdPrice);
+    const tdActions = createTdWithActions();
+
+    const trEl = createTr(tdName, tdPrice, tdActions);
 
     DOM.tBody.appendChild(trEl); // Im DOM hinzufügen
   };
 
+  const createTdWithActions = () => {
+    const td = document.createElement('td');
+    td.classList.add('td-actions');
+
+    const btnRemove = createButtonRemove();
+    const btnMoveUp = createButtonMoveUp();
+    const btnMoveDown = createButtonMoveDown();
+
+    // td.append(btnRemove, btnMoveUp, btnMoveDown)
+    td.appendChild(btnRemove);
+    td.appendChild(btnMoveUp);
+    td.appendChild(btnMoveDown);
+
+    return td;
+  };
+
+  const createButtonRemove = () => {
+    const btn = document.createElement('button');
+    const icon = document.createElement('i');
+    const span = document.createElement('span');
+
+    btn.classList.add('btn', 'btn-sm', 'btn-danger', 'button-product-remove');
+    icon.classList.add('fas', 'fa-trash-can');
+    span.classList.add('visually-hidden');
+    span.textContent = 'Remove Product';
+
+    btn.addEventListener('click', onClickRemove);
+    // btn.append(icon,span)
+    btn.appendChild(icon);
+    btn.appendChild(span);
+
+    return btn;
+  };
+
+  const createButtonMoveUp = () => {
+    const btn = document.createElement('button');
+    const icon = document.createElement('i');
+    const span = document.createElement('span');
+
+    btn.classList.add('btn', 'btn-sm', 'btn-secondary', 'button-product-move-up');
+    icon.classList.add('fas', 'fa-caret-up');
+    span.classList.add('visually-hidden');
+    span.textContent = 'Move Up';
+
+    btn.addEventListener('click', onClickMoveUp);
+    // btn.append(icon,span)
+    btn.appendChild(icon);
+    btn.appendChild(span);
+
+    return btn;
+  };
+
+  const createButtonMoveDown = () => {
+    const btn = document.createElement('button');
+    const icon = document.createElement('i');
+    const span = document.createElement('span');
+
+    btn.classList.add('btn', 'btn-sm', 'btn-secondary', 'button-product-move-down');
+    icon.classList.add('fas', 'fa-caret-down');
+    span.classList.add('visually-hidden');
+    span.textContent = 'Move Down';
+
+    btn.addEventListener('click', onClickMoveDown);
+    // btn.append(icon,span)
+    btn.appendChild(icon);
+    btn.appendChild(span);
+
+    return btn;
+  };
+
   const createTd = (text, className = '') => {
     const td = document.createElement('td');
     td.classList.add(className);

03_dom/unterricht/tag25/01_product-manager/index.html

@@ -18,21 +18,34 @@
           <table class="table table-striped table-products">
             <thead class="table-dark">
               <tr>
-                <th>Name</th>
+                <th class="th-name">Name</th>
-                <th>Price in &euro;</th>
+                <th class="th-price">Price in &euro;</th>
+                <th class="th-actions">Actions</th>
               </tr>
             </thead>
             <tbody>
-              <!-- 
+              <!-- <tr>
-              <tr>
                 <td class="td-name">[PRODUCT_NAME]</td>
                 <td class="td-price">[PRODUCT_PRICE]</td>
-              </tr> 
+                <td class="td-actions">
-              -->
+                  <button class="btn btn-sm btn-danger button-product-remove">
+                    <i class="fas fa-trash-can"></i>
+                    <span class="visually-hidden">Remove Product</span>
+                  </button>
+                  <button class="btn btn-sm btn-secondary button-product-move-up">
+                    <i class="fas fa-caret-up"></i>
+                    <span class="visually-hidden">Move Up</span>
+                  </button>
+                  <button class="btn btn-sm btn-secondary button-product-move-down">
+                    <i class="fas fa-caret-down"></i>
+                    <span class="visually-hidden">Move Down</span>
+                  </button>
+                </td>
+              </tr> -->
             </tbody>
             <tfoot>
               <tr>
-                <td colspan="2">
+                <td colspan="3">
                   <div class="row">
                     <div class="col-12 col-md-6 col-lg-6">
                       <input

03_dom/unterricht/tag25/02_dom-creation/index.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DOM Creation</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/4.0.0/jquery.min.js"></script>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>DOM Creation</h1>
+        <hr />
+        <ul class="list">
+          <li>Listenpunkt 01</li>
+          <li>Listenpunkt 02</li>
+          <li>Listenpunkt 03</li>
+          <li>Listenpunkt 04</li>
+        </ul>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const $ = (qs) => document.querySelector(qs);
+      const $$ = (qs) => Array.from(document.querySelectorAll(qs));
+
+      // Node.innerHTML
+      $('ul.list').innerHTML += '<li>Listenpunkt 05</li>';
+
+      // Node.innerText & Node.textContent
+      $('ul.list li').textContent = 'Listenpunkt 001';
+      $('ul.list li:nth-child(2)').innerText = 'Listenpunkt 002';
+
+      // document.createElement('HTML_ELEMENT')
+      const liEl = document.createElement('li');
+      liEl.textContent = 'Listenpunkt 06';
+
+      // Node.cloneNode(true)
+      const liCloneEl = $('ul.list li').cloneNode(true);
+
+      // DOM Manipulation ==========
+      $('ul.list').appendChild(liEl);
+      $('ul.list').appendChild(liCloneEl);
+
+      // jQuery ====================
+      // jQuery('<p>test</p>').insertAfter(document.body);
+      // jQuery('<p></p>', { text: 'ich bin der Inhalt' }).insertAfter(document.body);
+      // jQuery('<p></p>', { text: 'ich bin der Inhalt' }).insertBefore(document.body);
+    </script>
+  </body>
+</html>