DOM Creation
++
-
+
- Listenpunkt 01 +
- Listenpunkt 02 +
- Listenpunkt 03 +
- Listenpunkt 04 +
diff --git a/03_dom/unterricht/tag25/01_product-manager/assets/css/main.css b/03_dom/unterricht/tag25/01_product-manager/assets/css/main.css index dfe022b..1a93676 100644 --- a/03_dom/unterricht/tag25/01_product-manager/assets/css/main.css +++ b/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; +} diff --git a/03_dom/unterricht/tag25/01_product-manager/assets/js/main.js b/03_dom/unterricht/tag25/01_product-manager/assets/js/main.js index 8d05eb2..c47c74c 100644 --- a/03_dom/unterricht/tag25/01_product-manager/assets/js/main.js +++ b/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); diff --git a/03_dom/unterricht/tag25/01_product-manager/index.html b/03_dom/unterricht/tag25/01_product-manager/index.html index 567662c..a10c3ad 100644 --- a/03_dom/unterricht/tag25/01_product-manager/index.html +++ b/03_dom/unterricht/tag25/01_product-manager/index.html @@ -18,21 +18,34 @@
| Name | -Price in € | +Name | +Price in € | +Actions | + + + + | + -->
|---|---|---|---|---|
| + |
+
+
+
+
+
+
+ DOM Creation++
| |||