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

ts migration package.json

Browse Source
This commit is contained in:
Philippe Torrel
2026-08-03 09:04:28 +02:00
parent 56295802c0
commit 831644667e
11 changed files with 5976 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
webseite-ts/frontend/dev/scripts/modules/ProductManager.js → webseite-ts/frontend/dev/scripts/modules/ProductManager.ts
View File

@@ -1,5 +1,6 @@
import { Modal } from 'bootstrap'; // ohne Pfadangabe (Modul auslesen aus node_modules) funktioniert nur mit JS-Bundler (esbuild, rollup & co.)
import Toast from './Toast';
import { querySelectorTyped } from '../utils/helpers';
// import * as bootstrap from 'bootstrap';
// import 'bootstrap';
@@ -7,42 +8,64 @@ import Toast from './Toast';
// import 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js'; // würde auch ohne Bundler funktionieren
// import '../../../node_modules/bootstrap/dist/js/bootstrap.esm.js'; // würde auch ohne Bundler funktionieren
interface DOM {
module: HTMLElement;
table: HTMLTableElement;
tBody: HTMLTableSectionElement;
inputName: HTMLInputElement;
inputPrice: HTMLInputElement;
btnAdd: HTMLButtonElement;
templateRow: HTMLTableRowElement;
btnSave: HTMLButtonElement;
btnReset: HTMLButtonElement;
modalEdit: HTMLElement;
formEdit: HTMLFormElement;
inputEditName: HTMLInputElement;
inputEditPrice: HTMLInputElement;
inputEditId: HTMLInputElement;
inputEditPosition: HTMLInputElement;
btnUpdate: HTMLButtonElement;
modalDelete: HTMLElement;
productName: HTMLElement;
btnConfirmDelete: HTMLButtonElement;
}
// Factory Function
const ProductManager = (el = null) => {
const ProductManager = (el?: HTMLElement) => {
// === DOM & VARS =======
const BASE_URL = 'http://127.0.0.1:8000';
const module = el || document.querySelector('.product-manager') || console.error('Product Manager not found');
const module = el || querySelectorTyped('.product-manager');
if (!module) return;
const DOM = {
const DOM: 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: querySelectorTyped<HTMLTableElement>('.table-products', module),
tBody: querySelectorTyped<HTMLTableSectionElement>('tbody', module),
inputName: querySelectorTyped<HTMLInputElement>('.input-product-name', module),
inputPrice: querySelectorTyped<HTMLInputElement>('.input-product-price', module),
btnAdd: querySelectorTyped<HTMLButtonElement>('.button-product-add', module),
templateRow: querySelectorTyped<HTMLTableRowElement>('.template-row', module),
// Nav Actions
btnSave: module.querySelector('.button-products-save'),
btnReset: module.querySelector('.button-products-reset'),
btnSave: querySelectorTyped<HTMLButtonElement>('.button-products-save', module),
btnReset: querySelectorTyped<HTMLButtonElement>('.button-products-reset', module),
// 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: querySelectorTyped<HTMLElement>('.modal-edit', module),
formEdit: querySelectorTyped<HTMLFormElement>('.form-product-edit', module),
inputEditName: querySelectorTyped<HTMLInputElement>('.input-edit-name', module),
inputEditPrice: querySelectorTyped<HTMLInputElement>('.input-edit-price', module),
inputEditId: querySelectorTyped<HTMLInputElement>('.input-edit-id', module),
inputEditPosition: querySelectorTyped<HTMLInputElement>('.input-edit-position', module),
btnUpdate: querySelectorTyped<HTMLButtonElement>('.button-product-update', module),
// Modal Delete
modalDelete: module.querySelector('.modal-delete'),
productName: module.querySelector('strong.product-name'),
btnConfirmDelete: module.querySelector('.button-confirm-delete'),
modalDelete: querySelectorTyped<HTMLElement>('.modal-delete', module),
productName: querySelectorTyped<HTMLElement>('strong.product-name', module),
btnConfirmDelete: querySelectorTyped<HTMLButtonElement>('.button-confirm-delete', module),
};
console.log(DOM);
@@ -74,7 +97,7 @@ const ProductManager = (el = null) => {
};
// === EVENTHANDLER =====
const onKeyUp = (e) => {
const onKeyUp = () => {
// if (DOM.inputName.value === '' && DOM.inputPrice.value === '') {
// DOM.btnAdd.disabled = true;
// } else {
@@ -83,7 +106,7 @@ const ProductManager = (el = null) => {
DOM.btnAdd.disabled = (DOM.inputName.value === '' || DOM.inputPrice.value === ''); // prettier-ignore
};
const onClickReset = (e) => {
const onClickReset = (e: PointerEvent) => {
const btnEl = e.currentTarget;
// async process
@@ -95,9 +118,9 @@ const ProductManager = (el = null) => {
});
};
const onClickSave = (e) => {
const btnEl = e.currentTarget;
const icon = btnEl.querySelector('i');
const onClickSave = (e: PointerEvent) => {
const btnEl = e.currentTarget as HTMLButtonElement;
const icon = btnEl.querySelector('i') as HTMLElement;
icon.classList.add('fa-jello');
@@ -112,7 +135,7 @@ const ProductManager = (el = null) => {
});
};
const onSubmitEdit = (e) => {
const onSubmitEdit = (e: SubmitEvent) => {
e.preventDefault(); // Standardverhalten unterbinden (Formular nicht an action versenden)
// console.log(Object.entries(new FormData(DOM.formEdit)));
@@ -125,12 +148,12 @@ const ProductManager = (el = null) => {
};
// update async process
DOM.btnUpdate.querySelector('i').classList.add('fa-spin');
querySelectorTyped('i', DOM.btnUpdate).classList.add('fa-spin');
updateProduct(product).then((data) => {
console.log(data);
if (data.success) {
Toast(data.msg, 'success').show();
DOM.btnUpdate.querySelector('i').classList.remove('fa-spin');
querySelectorTyped('i', DOM.btnUpdate).classList.remove('fa-spin');
loadProducts(); // All Produkte auslesen
resetFields();
bsModalEdit.hide();
@@ -140,7 +163,7 @@ const ProductManager = (el = null) => {
});
};
const onClickAdd = (e) => {
const onClickAdd = () => {
console.log('click');
const product = {
@@ -163,7 +186,7 @@ const ProductManager = (el = null) => {
disableNonFunctionalButtons();
};
const onClickEdit = (e) => {
const onClickEdit = (e: PointerEvent) => {
const btnEl = e.currentTarget;
const currentRow = parents(btnEl, 'tr')[0];
const id = currentRow.dataset.id;
@@ -175,7 +198,7 @@ const ProductManager = (el = null) => {
});
};
const onClickRemove = (e) => {
const onClickRemove = (e: PointerEvent) => {
const btnEl = e.currentTarget;
const currentRow = parents(btnEl, 'tr')[0];
const id = currentRow.dataset.id;
@@ -198,8 +221,8 @@ const ProductManager = (el = null) => {
// });
};
const onClickConfirmDelete = (e) => {
const btnEl = e.currentTarget;
const onClickConfirmDelete = (e: PointerEvent) => {
const btnEl = e.currentTarget as HTMLButtonElement;
const id = btnEl.dataset.id;
// async fetch
@@ -215,7 +238,7 @@ const ProductManager = (el = null) => {
});
};
const onClickMoveUp = (e) => {
const onClickMoveUp = (e: PointerEvent) => {
const btnEl = e.currentTarget;
// const currentRowEl = btnEl.parentNode.parentNode; // aktuelle Zeile (tr) mit dem Button
const currentRowEl = parents(btnEl, 'tr')[0];
@@ -230,7 +253,7 @@ const ProductManager = (el = null) => {
disableNonFunctionalButtons();
};
const onClickMoveDown = (e) => {
const onClickMoveDown = (e: PointerEvent) => {
const btnEl = e.currentTarget;
// const currentRowEl = btnEl.parentNode.parentNode; // aktuelle Zeile (tr) mit dem Button
const currentRowEl = parents(btnEl, 'tr')[0];
@@ -246,36 +269,36 @@ const ProductManager = (el = null) => {
};
// Drag 'n Drop EventHandler
const onMouseDownDrag = (e) => {
const onMouseDownDrag = (e: MouseEvent) => {
const btnEl = e.currentTarget;
const currentRowEl = parents(btnEl, 'tr')[0];
currentRowEl.draggable = true;
};
const onMouseUpDrag = (e) => {
const onMouseUpDrag = (e: MouseEvent) => {
const btnEl = e.currentTarget;
const currentRowEl = parents(btnEl, 'tr')[0];
currentRowEl.draggable = false;
};
const onDragStart = (e) => {
const onDragStart = (e: DragEvent) => {
console.log('DragEvent: ', e);
const currentRowEl = e.currentTarget; // tr <- aktuelle Zeie, die bewegt wird
const idx = [...currentRowEl.parentNode.children].indexOf(currentRowEl);
const currentRowEl = e.currentTarget as HTMLTableRowElement; // tr <- aktuelle Zeie, die bewegt wird
const idx: number = [...currentRowEl.parentNode!.children].indexOf(currentRowEl);
e.dataTransfer.setData('text/plain', idx);
e.dataTransfer?.setData('text/plain', String(idx));
// e.dataTransfer.setData('application/json', JSON.stringify({idx, name: sourceElement}));
console.log('tr index:', idx);
};
const onDragOver = (e) => {
const onDragOver = (e: DragEvent) => {
e.preventDefault(); // WICHTIG! Sonst funktioniert drop EventHandler nicht.
};
const onDrop = (e) => {
const currentRowEl = e.currentTarget; // tr <- Zielzeile, auf die gedroppt wird.
const targetIdx = [...currentRowEl.parentNode.children].indexOf(currentRowEl);
const sourceIdx = parseInt(e.dataTransfer.getData('text/plain'));
const onDrop = (e: DragEvent) => {
const currentRowEl = e.currentTarget as HTMLTableRowElement; // tr <- Zielzeile, auf die gedroppt wird.
const targetIdx = [...currentRowEl.parentNode!.children].indexOf(currentRowEl);
const sourceIdx: number = parseInt(e.dataTransfer?.getData('text/plain') || '0');
// const { sourceIdx } = JSON.parse(e.dataTransfer.getData('application/json'));
console.log({ targetIdx, sourceIdx });
@@ -285,7 +308,7 @@ const ProductManager = (el = null) => {
return;
}
const draggedEl = DOM.tBody.querySelector(`tr:nth-child(${sourceIdx + 1})`);
const draggedEl = DOM.tBody.querySelector(`tr:nth-child(${sourceIdx + 1})`) as HTMLTableRowElement;
// const draggedEl = DOM.tBody.children[sourceIdx]
// Verschiebe das Element im DOM
@@ -317,8 +340,12 @@ const ProductManager = (el = null) => {
const data = await response.json(); // HTTP-Response
return data;
} catch (error) {
Toast(error, 'error').show();
} catch (error: unknown) {
if (error instanceof Error) {
Toast(error.message, 'error').show();
} else {
Toast('An unknown error occurred.', 'error').show();
}
console.error(error);
return error;
@@ -368,9 +395,12 @@ const ProductManager = (el = null) => {
const data = await response.json(); // HTTP-Response
return data;
} catch (error) {
Toast(error, 'error').show();
} catch (error: unknown) {
if (error instanceof Error) {
Toast(error.message, 'error').show();
} else {
Toast('An unknown error occurred.', 'error').show();
}
console.error(error);
return error;
}
@@ -397,7 +427,7 @@ const ProductManager = (el = null) => {
// HTTP - Methode - GET
// C(R)UD - Read
// B(R)EAD - Read - auslesen eines Produkts
const getProduct = async (id) => {
const getProduct = async (id: string) => {
try {
const response = await fetch(`${BASE_URL}/api/products/${id}`); // HTTP Request URL
if (!response.ok) {
@@ -406,8 +436,12 @@ const ProductManager = (el = null) => {
const data = await response.json(); // HTTP-Response
return data;
} catch (error) {
console.error(error);
} catch (error: unknown) {
if (error instanceof Error) {
console.error(error.message);
} else {
console.error('An unknown error occurred.');
}
return error;
}
};
@@ -415,7 +449,8 @@ const ProductManager = (el = null) => {
// HTTP - Methode - PUT
// CR(U)D - update
// BR(E)AD - edit - Produkt aktualisieren
const updateProduct = async (product) => {
const updateProduct = async (product: any) => {
// TODO: Typisierung verbessern
try {
const response = await fetch(`${BASE_URL}/api/products`, {
method: 'PUT',
@@ -439,7 +474,7 @@ const ProductManager = (el = null) => {
// HTTP - Methode - DELETE
// CRU(D) - delete
// BREA(D) - delete - Produkt löschen
const deleteProduct = async (id) => {
const deleteProduct = async (id: string) => {
try {
const response = await fetch(`${BASE_URL}/api/products/${id}`, {
method: 'DELETE',

8
webseite-ts/frontend/dev/scripts/modules/Toast.js → webseite-ts/frontend/dev/scripts/modules/Toast.ts
View File

@@ -1,7 +1,7 @@
import Toastify from 'toastify-js'; // das Modul wird von node_modules ausgelesen und gebundlet. Funktioniert nur mit JS-Bundler
const Toast = (text = '', variant = 'primary') => {
const getColorByName = (variant = '') => {
const Toast = (text: string = '', variant: string = 'primary') => {
const getColorByName = (variant: string = ''): string => {
let color;
switch (variant.trim().toLowerCase()) {
case 'primary':
@@ -32,12 +32,12 @@ const Toast = (text = '', variant = 'primary') => {
default:
console.warn('variant not found');
color: 'white';
color = 'white';
}
return color;
};
const show = () => {
const show = (): void => {
Toastify({
text: text,
duration: 2000,