feat: finalized project
This commit is contained in:
Philippe Torrel
@@ -141,8 +141,8 @@
|
||||
// classes: ['btn-primary', 'button-login'],
|
||||
// label: 'login',
|
||||
// iconName: 'right-to-bracket',
|
||||
// clickHandler: () => {
|
||||
// console.log('login');
|
||||
// clickHandler() {
|
||||
// console.log(`${this.type} process...`);
|
||||
// },
|
||||
// }),
|
||||
// );
|
||||
@@ -182,6 +182,9 @@
|
||||
// classes: ['btn-primary', 'button-login-user'],
|
||||
// iconName: 'right-to-bracket',
|
||||
// label: 'Login',
|
||||
// // clickHandler() {
|
||||
// // console.log(`${this.label} process...`);
|
||||
// // },
|
||||
// clickHandler: () => {
|
||||
// console.log('login process...');
|
||||
// },
|
||||
@@ -264,7 +267,7 @@
|
||||
const btnMoveUp = tr.querySelector('.button-product-move-up');
|
||||
const btnMoveDown = tr.querySelector('.button-product-move-down');
|
||||
|
||||
btnMoveUp.disabled = !tr.previousElementSibling;
|
||||
btnMoveUp.disabled = !tr.previousElementSibling; // !(false) -> true | !(true) -> false
|
||||
btnMoveDown.disabled = !tr.nextElementSibling;
|
||||
});
|
||||
};
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
@@ -39,6 +39,8 @@
|
||||
// Node.cloneNode(true)
|
||||
const liCloneEl = $('ul.list li').cloneNode(true);
|
||||
|
||||
// const img = new Image(); // document.createElement('img');
|
||||
|
||||
// DOM Manipulation ==========
|
||||
$('ul.list').appendChild(liEl);
|
||||
$('ul.list').appendChild(liCloneEl);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
@@ -54,7 +54,7 @@
|
||||
|
||||
//
|
||||
$('ul.list').classList.add('list-group');
|
||||
$('ul.list').dataset.id = 'list';
|
||||
$('ul.list').dataset.id = 'list'; // <ul data-id="list">...</ul>
|
||||
$('.container').id = 'main-container';
|
||||
$('h1').style.backgroundColor = 'tomato';
|
||||
$('h1').setAttribute('title', 'headline');
|
||||
|
||||
@@ -10,7 +10,7 @@ import ProductManager from './modules/ProductManager.js';
|
||||
const init = () => {
|
||||
DOM.productManagers.forEach((el) => {
|
||||
const pm = ProductManager(el);
|
||||
// pm.init()
|
||||
// pm.initProducts()
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -121,7 +121,7 @@ const ProductManager = (el = null) => {
|
||||
const addProduct = (product) => {
|
||||
const { name, price } = product;
|
||||
|
||||
//
|
||||
// https://developer.mozilla.org/de/docs/Web/API/HTMLTemplateElement/content
|
||||
const trEl = DOM.templateRow.content.firstElementChild.cloneNode(true);
|
||||
|
||||
const tdNameEl = trEl.querySelector('.td-name');
|
||||
@@ -163,7 +163,9 @@ const ProductManager = (el = null) => {
|
||||
|
||||
return {
|
||||
init,
|
||||
initProducts,
|
||||
};
|
||||
};
|
||||
|
||||
// Freigabe für import
|
||||
export default ProductManager;
|
||||
|
||||
@@ -12,6 +12,159 @@
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<!-- ▼ product-manager ▼ -->
|
||||
<div class="product-manager my-5">
|
||||
<div class="container">
|
||||
<!-- table.table.table-striped.table-products>(thead.table-dark>tr>th{Name}+th{Price in €})+tbody>tr>td*2 -->
|
||||
<table class="table table-striped table-products">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th class="th-name">Name</th>
|
||||
<th class="th-price">Price in €</th>
|
||||
<th class="th-actions">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control input-product-name"
|
||||
name="product-name"
|
||||
placeholder="Insert product name"
|
||||
aria-label="Product Name" />
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="number"
|
||||
name="product-price"
|
||||
class="form-control input-product-price"
|
||||
placeholder="00.00"
|
||||
aria-label="Product Price"
|
||||
step="0.01"
|
||||
min="0" />
|
||||
<span class="input-group-text">€</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-lg">
|
||||
<button class="btn btn-dark button-product-add">
|
||||
<i class="fas fa-plus"></i>
|
||||
Add product
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /row ▲ -->
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<template class="template-row">
|
||||
<tr>
|
||||
<td class="td-name">[PRODUCT_NAME]</td>
|
||||
<td class="td-price">[PRODUCT_PRICE]</td>
|
||||
<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>
|
||||
</template>
|
||||
</div>
|
||||
<!-- ▲ /product-manager ▲ -->
|
||||
<!-- ▼ product-manager ▼ -->
|
||||
<div class="product-manager my-5">
|
||||
<div class="container">
|
||||
<!-- table.table.table-striped.table-products>(thead.table-dark>tr>th{Name}+th{Price in €})+tbody>tr>td*2 -->
|
||||
<table class="table table-striped table-products">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th class="th-name">Name</th>
|
||||
<th class="th-price">Price in €</th>
|
||||
<th class="th-actions">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-6">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control input-product-name"
|
||||
name="product-name"
|
||||
placeholder="Insert product name"
|
||||
aria-label="Product Name" />
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="number"
|
||||
name="product-price"
|
||||
class="form-control input-product-price"
|
||||
placeholder="00.00"
|
||||
aria-label="Product Price"
|
||||
step="0.01"
|
||||
min="0" />
|
||||
<span class="input-group-text">€</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-lg">
|
||||
<button class="btn btn-dark button-product-add">
|
||||
<i class="fas fa-plus"></i>
|
||||
Add product
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /row ▲ -->
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<template class="template-row">
|
||||
<tr>
|
||||
<td class="td-name">[PRODUCT_NAME]</td>
|
||||
<td class="td-price">[PRODUCT_PRICE]</td>
|
||||
<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>
|
||||
</template>
|
||||
</div>
|
||||
<!-- ▲ /product-manager ▲ -->
|
||||
<!-- ▼ product-manager ▼ -->
|
||||
<div class="product-manager my-5">
|
||||
<div class="container">
|
||||
<!-- table.table.table-striped.table-products>(thead.table-dark>tr>th{Name}+th{Price in €})+tbody>tr>td*2 -->
|
||||
|
||||
Reference in New Issue
Block a user