ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-07-23 14:56:15 +02:00
parent 702443e90e
commit c118892017
7 changed files with 199 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
webseite/backend/model/ProductModel.js
View File

@@ -53,6 +53,7 @@ const ProductModel = () => {
};
const update = (product) => {
console.log(product);
const foundIdx = products.findIndex((obj) => {
return obj._id === product._id;
});

10
webseite/backend/server.js
View File

@@ -61,7 +61,7 @@ app.post('/api/products', (req, res) => {
return res.status(400).send({ msg: 'Could not add product', status: 400, success: false });
}
res.send({ msg: 'Product added', status: 200, success: true, data: product });
return res.send({ msg: 'Product added', status: 200, success: true, data: product });
});
// HTTP - Methode - GET
@@ -69,7 +69,7 @@ app.post('/api/products', (req, res) => {
// (B)READ - browse
app.get('/api/products', (req, res) => {
const data = products.getAll();
res.send(data);
return res.send(data);
});
// HTTP - Methode - GET
@@ -83,7 +83,7 @@ app.get('/api/products/:id', (req, res) => {
return res.status(400).send({ msg: 'Could not get product', status: 400, success: false });
}
res.send(product);
return res.send(product);
});
// HTTP - Methode - PUT/PATCH
@@ -98,7 +98,7 @@ app.put('/api/products', (req, res) => {
return res.status(400).send({ msg: 'Could not update product', status: 400, success: false });
}
res.send({ msg: 'Product updated', status: 200, success: true, data: product });
return res.send({ msg: 'Product updated', status: 200, success: true, data: product });
});
// HTTP - Methode - DELETE
@@ -111,7 +111,7 @@ app.delete('/api/products/:id', (req, res) => {
return res.status(400).send({ msg: 'Could not delete product', status: 400, success: false });
}
res.send({ msg: 'Product deleted', status: 200, success: true, data: id });
return res.send({ msg: 'Product deleted', status: 200, success: true, data: id });
});
// =========

77
webseite/frontend/assets/js/build.js
View File

@@ -5179,6 +5179,7 @@
templateRow: module.querySelector(".template-row"),
// Modal
modalEdit: module.querySelector(".modal-edit"),
formEdit: module.querySelector(".form-product-edit"),
inputEditName: module.querySelector(".input-edit-name"),
inputEditPrice: module.querySelector(".input-edit-price"),
inputEditId: module.querySelector(".input-edit-id"),
@@ -5194,6 +5195,23 @@
console.log("init");
initProducts();
DOM.btnAdd.addEventListener("click", onClickAdd);
DOM.formEdit.addEventListener("submit", onSubmitEdit);
};
const onSubmitEdit = (e) => {
e.preventDefault();
const product = {
name: DOM.inputEditName.value,
price: Number(DOM.inputEditPrice.value),
_id: DOM.inputEditId.value,
position: DOM.inputEditPosition.value
};
updateProduct(product).then((data) => {
console.log(data);
if (data.success) {
loadProducts();
bsModalEdit.hide();
}
});
};
const onClickAdd = (e) => {
console.log("click");
@@ -5201,7 +5219,13 @@
name: DOM.inputName.value,
price: Number(DOM.inputPrice.value)
};
addProduct(product);
createProduct(product).then((data) => {
console.log(data);
if (data.success) {
console.log("add");
loadProducts();
}
});
disableNonFunctionalButtons();
};
const onClickEdit = (e) => {
@@ -5268,7 +5292,26 @@
}
disableNonFunctionalButtons();
};
const fetchProducts = async () => {
const createProduct = async (product) => {
try {
const response = await fetch(`${BASE_URL}/api/products`, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(product)
});
if (!response.ok) {
throw new Error("Fetch went wrong.");
}
const data = await response.json();
return data;
} catch (error) {
console.error(error);
return error;
}
};
const getProducts = async () => {
try {
const response = await fetch(`${BASE_URL}/api/products`);
if (!response.ok) {
@@ -5294,14 +5337,42 @@
return error;
}
};
const updateProduct = async (product) => {
try {
const response = await fetch(`${BASE_URL}/api/products`, {
method: "PUT",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(product)
});
if (!response.ok) {
throw new Error("Fetch went wrong.");
}
const data = await response.json();
return data;
} catch (error) {
console.error(error);
return error;
}
};
const initProducts = () => {
fetchProducts().then((products) => {
getProducts().then((products) => {
products.forEach((product) => {
addProduct(product);
});
disableNonFunctionalButtons();
});
};
const loadProducts = () => {
DOM.tBody.innerHTML = "";
getProducts().then((data) => {
data.forEach((product) => {
addProduct(product);
});
disableNonFunctionalButtons();
});
};
const addProduct = (product) => {
const { name, price, _id: id, position } = product;
const trEl = DOM.templateRow.content.firstElementChild.cloneNode(true);

4
webseite/frontend/assets/js/build.js.map
View File

File diff suppressed because one or more lines are too long

94
webseite/frontend/dev/scripts/modules/ProductManager.js
View File

@@ -24,6 +24,7 @@ const ProductManager = (el = null) => {
// Modal
modalEdit: module.querySelector('.modal-edit'),
formEdit: module.querySelector('.form-product-edit'),
inputEditName: module.querySelector('.input-edit-name'),
inputEditPrice: module.querySelector('.input-edit-price'),
inputEditId: module.querySelector('.input-edit-id'),
@@ -45,9 +46,30 @@ const ProductManager = (el = null) => {
// Event-Lauscher zu beginn der Anwendung
DOM.btnAdd.addEventListener('click', onClickAdd);
DOM.formEdit.addEventListener('submit', onSubmitEdit);
};
// === EVENTHANDLER =====
const onSubmitEdit = (e) => {
e.preventDefault(); // Standardverhalten unterbinden (Formular nicht an action versenden)
const product = {
name: DOM.inputEditName.value,
price: Number(DOM.inputEditPrice.value),
_id: DOM.inputEditId.value,
position: DOM.inputEditPosition.value,
};
// update async process
updateProduct(product).then((data) => {
console.log(data);
if (data.success) {
loadProducts(); // All Produkte auslesen
bsModalEdit.hide();
}
});
};
const onClickAdd = (e) => {
console.log('click');
@@ -56,7 +78,15 @@ const ProductManager = (el = null) => {
price: Number(DOM.inputPrice.value),
};
addProduct(product);
createProduct(product).then((data) => {
console.log(data);
if (data.success) {
console.log('add');
loadProducts();
}
});
// addProduct(product);
disableNonFunctionalButtons();
};
@@ -171,10 +201,34 @@ const ProductManager = (el = null) => {
// === XHR/FETCH ========
// HTTP - Methode - POST
// (C)RUD - create
// BRE(A)D - add - neues Produkt hinzufügen
const createProduct = async (product) => {
try {
const response = await fetch(`${BASE_URL}/api/products`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(product),
}); // HTTP Request URL
if (!response.ok) {
throw new Error('Fetch went wrong.');
}
const data = await response.json(); // HTTP-Response
return data;
} catch (error) {
console.error(error);
return error;
}
};
// HTTP - Methode - GET
// C(R)UD - Read
// (B)READ - Browse - auslesen aller Produkte
const fetchProducts = async () => {
const getProducts = async () => {
try {
const response = await fetch(`${BASE_URL}/api/products`); // HTTP Request URL
if (!response.ok) {
@@ -207,10 +261,34 @@ const ProductManager = (el = null) => {
}
};
// HTTP - Methode - PUT
// CR(U)D - update
// BR(E)AD - edit - Produkt aktualisieren
const updateProduct = async (product) => {
try {
const response = await fetch(`${BASE_URL}/api/products`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(product),
}); // HTTP Request URL
if (!response.ok) {
throw new Error('Fetch went wrong.');
}
const data = await response.json(); // HTTP-Response
return data;
} catch (error) {
console.error(error);
return error;
}
};
// === FUNCTIONS ========
const initProducts = () => {
fetchProducts().then((products) => {
getProducts().then((products) => {
products.forEach((product) => {
addProduct(product);
});
@@ -224,6 +302,16 @@ const ProductManager = (el = null) => {
// PRODUCTS.forEach(addProduct);
};
const loadProducts = () => {
DOM.tBody.innerHTML = '';
getProducts().then((data) => {
data.forEach((product) => {
addProduct(product);
});
disableNonFunctionalButtons();
});
};
const addProduct = (product) => {
const { name, price, _id: id, position } = product;

2
webseite/frontend/projects/product-manager.html
View File

@@ -165,6 +165,8 @@
type="number"
name="price"
id="input-edit-price"
min="0"
step="0.01"
class="form-control input-edit-price" />
<span class="input-group-text">&euro;</span>
</div>