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-08-03 16:00:02 +02:00
parent 7d8daeb14c
commit 17aa46a4bc
22 changed files with 6855 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
webseite-ts-claude/frontend/assets/js/build.js
View File

@@ -1,3 +1,4 @@
"use strict";
(() => {
var __create = Object.create;
var __defProp = Object.defineProperty;
@@ -5499,7 +5500,7 @@
enableDismissTrigger(Toast);
defineJQueryPlugin(Toast);
// dev/scripts/modules/Toast.js
// dev/scripts/modules/Toast.ts
var import_toastify_js = __toESM(require_toastify(), 1);
var Toast2 = (text = "", variant = "primary") => {
const getColorByName = (variant2 = "") => {
@@ -5532,7 +5533,7 @@
break;
default:
console.warn("variant not found");
color: "white";
color = "white";
}
return color;
};
@@ -5558,34 +5559,42 @@
};
var Toast_default = Toast2;
// dev/scripts/modules/ProductManager.js
// dev/scripts/modules/ProductManager.ts
var ProductManager = (el = null) => {
const BASE_URL = "http://127.0.0.1:8000";
const module = el || document.querySelector(".product-manager") || console.error("Product Manager not found");
if (!module) return;
const module = el ?? document.querySelector(".product-manager");
if (!module) {
console.error("Product Manager not found");
return null;
}
const query2 = (root, selector) => {
const found = root.querySelector(selector);
if (!found) throw new Error(`ProductManager: Element "${selector}" nicht gefunden.`);
return found;
};
const DOM = {
module,
table: module.querySelector(".table-products"),
tBody: module.querySelector("tbody"),
inputName: module.querySelector(".input-product-name"),
inputPrice: module.querySelector(".input-product-price"),
btnAdd: module.querySelector(".button-product-add"),
templateRow: module.querySelector(".template-row"),
table: query2(module, ".table-products"),
tBody: query2(module, "tbody"),
inputName: query2(module, ".input-product-name"),
inputPrice: query2(module, ".input-product-price"),
btnAdd: query2(module, ".button-product-add"),
templateRow: query2(module, ".template-row"),
// Nav Actions
btnSave: module.querySelector(".button-products-save"),
btnReset: module.querySelector(".button-products-reset"),
btnSave: query2(module, ".button-products-save"),
btnReset: query2(module, ".button-products-reset"),
// Modal Edit
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"),
inputEditPosition: module.querySelector(".input-edit-position"),
btnUpdate: module.querySelector(".button-product-update"),
modalEdit: query2(module, ".modal-edit"),
formEdit: query2(module, ".form-product-edit"),
inputEditName: query2(module, ".input-edit-name"),
inputEditPrice: query2(module, ".input-edit-price"),
inputEditId: query2(module, ".input-edit-id"),
inputEditPosition: query2(module, ".input-edit-position"),
btnUpdate: query2(module, ".button-product-update"),
// Modal Delete
modalDelete: module.querySelector(".modal-delete"),
productName: module.querySelector("strong.product-name"),
btnConfirmDelete: module.querySelector(".button-confirm-delete")
modalDelete: query2(module, ".modal-delete"),
productName: query2(module, "strong.product-name"),
btnConfirmDelete: query2(module, ".button-confirm-delete")
};
console.log(DOM);
const bsModalEdit = new Modal(DOM.modalEdit, {
@@ -5609,11 +5618,10 @@
DOM.formEdit.addEventListener("submit", onSubmitEdit);
window.addEventListener("keyup", onKeyUp);
};
const onKeyUp = (e) => {
const onKeyUp = () => {
DOM.btnAdd.disabled = DOM.inputName.value === "" || DOM.inputPrice.value === "";
};
const onClickReset = (e) => {
const btnEl = e.currentTarget;
const onClickReset = () => {
resetProducts().then((data) => {
if (data.success) {
Toast_default(data.msg, "success").show();
@@ -5623,7 +5631,7 @@
};
const onClickSave = (e) => {
const btnEl = e.currentTarget;
const icon = btnEl.querySelector("i");
const icon = query2(btnEl, "i");
icon.classList.add("fa-jello");
saveProducts().then((data) => {
if (data.success) {
@@ -5640,14 +5648,15 @@
name: DOM.inputEditName.value,
price: Number(DOM.inputEditPrice.value),
_id: DOM.inputEditId.value,
position: DOM.inputEditPosition.value
position: Number(DOM.inputEditPosition.value)
};
DOM.btnUpdate.querySelector("i").classList.add("fa-spin");
const icon = query2(DOM.btnUpdate, "i");
icon.classList.add("fa-spin");
updateProduct(product).then((data) => {
console.log(data);
if (data.success) {
Toast_default(data.msg, "success").show();
DOM.btnUpdate.querySelector("i").classList.remove("fa-spin");
icon.classList.remove("fa-spin");
loadProducts();
resetFields();
bsModalEdit.hide();
@@ -5676,22 +5685,22 @@
const onClickEdit = (e) => {
const btnEl = e.currentTarget;
const currentRow = parents(btnEl, "tr")[0];
const id = currentRow.dataset.id;
getProduct(id).then((data) => {
showModalEdit(data);
const id = currentRow.dataset.id ?? "";
getProduct(id).then((product) => {
if (product) showModalEdit(product);
});
};
const onClickRemove = (e) => {
const btnEl = e.currentTarget;
const currentRow = parents(btnEl, "tr")[0];
const id = currentRow.dataset.id;
const productName = currentRow.querySelector(".td-name").textContent.trim();
const id = currentRow.dataset.id ?? "";
const productName = query2(currentRow, ".td-name").textContent?.trim() ?? "";
DOM.btnConfirmDelete.dataset.id = id;
DOM.productName.textContent = productName;
};
const onClickConfirmDelete = (e) => {
const btnEl = e.currentTarget;
const id = btnEl.dataset.id;
const id = btnEl.dataset.id ?? "";
deleteProduct(id).then((data) => {
if (data.success) {
Toast_default(data.msg, "success").show();
@@ -5706,14 +5715,14 @@
const onClickMoveUp = (e) => {
const btnEl = e.currentTarget;
const currentRowEl = parents(btnEl, "tr")[0];
currentRowEl.previousElementSibling.before(currentRowEl);
currentRowEl.previousElementSibling?.before(currentRowEl);
console.log("move up");
disableNonFunctionalButtons();
};
const onClickMoveDown = (e) => {
const btnEl = e.currentTarget;
const currentRowEl = parents(btnEl, "tr")[0];
currentRowEl.nextElementSibling.after(currentRowEl);
currentRowEl.nextElementSibling?.after(currentRowEl);
console.log("move down");
disableNonFunctionalButtons();
};
@@ -5730,8 +5739,8 @@
const onDragStart = (e) => {
console.log("DragEvent: ", e);
const currentRowEl = e.currentTarget;
const idx = [...currentRowEl.parentNode.children].indexOf(currentRowEl);
e.dataTransfer.setData("text/plain", idx);
const idx = indexOfRow(currentRowEl);
e.dataTransfer?.setData("text/plain", String(idx));
console.log("tr index:", idx);
};
const onDragOver = (e) => {
@@ -5739,13 +5748,14 @@
};
const onDrop = (e) => {
const currentRowEl = e.currentTarget;
const targetIdx = [...currentRowEl.parentNode.children].indexOf(currentRowEl);
const sourceIdx = parseInt(e.dataTransfer.getData("text/plain"));
const targetIdx = indexOfRow(currentRowEl);
const sourceIdx = parseInt(e.dataTransfer?.getData("text/plain") ?? "");
console.log({ targetIdx, sourceIdx });
if (sourceIdx === targetIdx) {
if (Number.isNaN(sourceIdx) || sourceIdx === targetIdx) {
return;
}
const draggedEl = DOM.tBody.querySelector(`tr:nth-child(${sourceIdx + 1})`);
if (!draggedEl) return;
if (sourceIdx > targetIdx) {
currentRowEl.before(draggedEl);
} else {
@@ -5753,6 +5763,11 @@
}
disableNonFunctionalButtons();
};
const toErrorResponse = (error) => ({
msg: error instanceof Error ? error.message : String(error),
status: 0,
success: false
});
const resetProducts = async () => {
try {
const response = await fetch(`${BASE_URL}/api/products/reset`, {
@@ -5768,9 +5783,10 @@
const data = await response.json();
return data;
} catch (error) {
Toast_default(error, "error").show();
const result = toErrorResponse(error);
Toast_default(result.msg, "error").show();
console.error(error);
return error;
return result;
}
};
const saveProducts = async () => {
@@ -5788,9 +5804,10 @@
const data = await response.json();
return data;
} catch (error) {
Toast_default(error, "error").show();
const result = toErrorResponse(error);
Toast_default(result.msg, "error").show();
console.error(error);
return error;
return result;
}
};
const createProduct = async (product) => {
@@ -5808,9 +5825,10 @@
const data = await response.json();
return data;
} catch (error) {
Toast_default(error, "error").show();
const result = toErrorResponse(error);
Toast_default(result.msg, "error").show();
console.error(error);
return error;
return result;
}
};
const getProducts = async () => {
@@ -5823,7 +5841,7 @@
return data;
} catch (error) {
console.error(error);
return error;
return [];
}
};
const getProduct = async (id) => {
@@ -5836,7 +5854,7 @@
return data;
} catch (error) {
console.error(error);
return error;
return null;
}
};
const updateProduct = async (product) => {
@@ -5855,7 +5873,7 @@
return data;
} catch (error) {
console.error(error);
return error;
return toErrorResponse(error);
}
};
const deleteProduct = async (id) => {
@@ -5873,7 +5891,7 @@
return data;
} catch (error) {
console.error(error);
return error;
return toErrorResponse(error);
}
};
const initProducts = () => {
@@ -5896,16 +5914,18 @@
};
const addProduct = (product) => {
const { name, price, _id: id, position } = product;
const trEl = DOM.templateRow.content.firstElementChild.cloneNode(true);
const tdNameEl = trEl.querySelector(".td-name");
const tdPriceEl = trEl.querySelector(".td-price");
const btnRemoveEl = trEl.querySelector(".button-product-remove");
const btnMoveUpEl = trEl.querySelector(".button-product-move-up");
const btnMoveDownEl = trEl.querySelector(".button-product-move-down");
const btnDragEl = trEl.querySelector(".button-drag");
const btnEditEl = trEl.querySelector(".button-product-edit");
const templateEl = DOM.templateRow.content.firstElementChild;
if (!templateEl) throw new Error('ProductManager: <template class="template-row"> ist leer.');
const trEl = templateEl.cloneNode(true);
const tdNameEl = query2(trEl, ".td-name");
const tdPriceEl = query2(trEl, ".td-price");
const btnRemoveEl = query2(trEl, ".button-product-remove");
const btnMoveUpEl = query2(trEl, ".button-product-move-up");
const btnMoveDownEl = query2(trEl, ".button-product-move-down");
const btnDragEl = query2(trEl, ".button-drag");
const btnEditEl = query2(trEl, ".button-product-edit");
tdNameEl.textContent = name;
tdPriceEl.textContent = price;
tdPriceEl.textContent = String(price);
btnEditEl.addEventListener("click", onClickEdit);
btnRemoveEl.addEventListener("click", onClickRemove);
btnMoveUpEl.addEventListener("click", onClickMoveUp);
@@ -5916,15 +5936,15 @@
trEl.addEventListener("dragover", onDragOver);
trEl.addEventListener("drop", onDrop);
trEl.dataset.id = id;
trEl.dataset.position = position;
trEl.dataset.position = String(position);
DOM.tBody.appendChild(trEl);
};
const showModalEdit = (product) => {
const { name = "", price = 0, _id: id, position } = product;
DOM.inputEditName.value = name;
DOM.inputEditPrice.value = price;
DOM.inputEditPrice.value = String(price);
DOM.inputEditId.value = id;
DOM.inputEditPosition.value = position;
DOM.inputEditPosition.value = String(position);
};
const resetFields = () => {
DOM.btnAdd.disabled = true;
@@ -5934,18 +5954,26 @@
};
const disableNonFunctionalButtons = () => {
Array.from(DOM.tBody.querySelectorAll("tr")).forEach((tr) => {
const btnMoveUp = tr.querySelector(".button-product-move-up");
const btnMoveDown = tr.querySelector(".button-product-move-down");
const btnMoveUp = query2(tr, ".button-product-move-up");
const btnMoveDown = query2(tr, ".button-product-move-down");
btnMoveUp.disabled = !tr.previousElementSibling;
btnMoveDown.disabled = !tr.nextElementSibling;
});
};
const indexOfRow = (rowEl) => {
const siblings = rowEl.parentElement ? Array.from(rowEl.parentElement.children) : [];
return siblings.indexOf(rowEl);
};
const parents = (el2, selector) => {
const parents2 = [];
while ((el2 = el2.parentNode) && el2 !== document) {
if (!selector || el2.matches(selector)) parents2.push(el2);
const result = [];
let current = el2.parentNode;
while (current && current !== document) {
if (current instanceof Element && (!selector || current.matches(selector))) {
result.push(current);
}
current = current.parentNode;
}
return parents2;
return result;
};
init();
return {
@@ -8525,7 +8553,7 @@
Splide.defaults = {};
Splide.STATES = STATES;
// dev/scripts/main.js
// dev/scripts/main.ts
(() => {
const DOM = {};
const init = () => {
@@ -8537,7 +8565,7 @@
console.log(path);
switch (path) {
case "/":
case "/index.html":
case "/index.html": {
console.log("HOME");
const splider = new Splide(".splide", {
type: "loop",
@@ -8546,10 +8574,12 @@
autoHeight: true
}).mount();
break;
case "/projects/product-manager.html":
}
case "/projects/product-manager.html": {
console.log("PRODUCT_MANAGER");
const pm = ProductManager_default();
break;
}
default:
console.warn("Page not found");
}

8
webseite-ts-claude/frontend/assets/js/build.js.map
View File

File diff suppressed because one or more lines are too long