dennis.heinrich/DurstRechner
1
0
Fork 0
mirror of https://github.com/cloudmaker97/DurstRechner.git synced 2025-12-05 23:48:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Bearbeiten von Produkten ermöglichen

Browse source
This commit is contained in:
Dennis Heinrich 2025-04-10 21:07:27 +02:00
parent 10ffcf9509
commit 2dfe3543fc
3 changed files with 54 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
assets/script/all.js
View file

@ -235,12 +235,47 @@ class Product {
getSettingsProductElement() {
const productElement = TemplateElement.getSettingsProductTemplate();
productElement.setAttribute('data-id', this.id);
productElement.textContent = this.name;
productElement.addEventListener('click', () => {
productElement.querySelector('[data-attr=name]').textContent = this.name;
productElement.querySelector('[data-action=delete]').addEventListener('click', () => {
productManager.removeProduct(this);
productManager.setExportFieldJsonValue();
productElement.remove();
})
productElement.querySelector('[data-action=edit]').addEventListener('click', () => {
const nameInputField = document.querySelector('#product-name');
const priceInputField = document.querySelector('#product-price');
const depositInputField = document.querySelector('#product-deposit');
const imageInputField = document.querySelector('#product-image');
const editProductId = document.querySelector("[name=edit-product-id]");
nameInputField.value = this.name;
priceInputField.value = this.price;
depositInputField.value = this.deposit;
editProductId.value = this.id;
// Set the image input field, create a new file object and set it to the input field by base64
const base64Image = this.image.split(',')[1];
const byteCharacters = atob(base64Image);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray], { type: 'image/png' });
const file = new File([blob], 'image.png', { type: 'image/png' });
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
imageInputField.files = dataTransfer.files;
imageInputField.dispatchEvent(new Event('change'));
// Remove the product element from the settings list if the product has been saved
Element.getCreateNewProductButton().addEventListener('click', (e) => {
console.log(document.querySelector("[name=edit-product-id]"), this.id.toString());
if(document.querySelector("[name=edit-product-id]").value === this.id.toString()) {
productManager.removeProduct(this);
productElement.remove();
}
});
})
return productElement;
}
}
@ -472,7 +507,7 @@ class ProductManager {
* Reset the product settings form by clearing all input fields.
*/
static resetProductSettingsForm() {
document.querySelectorAll('form input:not([type=submit])').forEach(inputField => inputField.value = '');
document.querySelectorAll('form input:not([type=submit], [type=reset])').forEach(inputField => inputField.value = '');
}
/**

2
assets/style/stylesheet.css
View file

@ -20,7 +20,7 @@
* Make product boxes, cart items and settings product list clickable
* This is generally used for product list and cart items
*/
.product-box, .cart-items, .settings-product-list, .navbar-brand {
.product-box, .cart-items, .navbar-brand {
cursor: pointer;
}
/**

18
index.html
View file

@ -101,7 +101,9 @@
<label for="product-image" class="form-label">Bild auswählen</label>
<input type="file" class="form-control" placeholder="Tolles Produkt" id="product-image">
</div>
<input type="hidden" name="edit-product-id">
<input type="submit" class="btn btn-success" value="Speichern" id="create-product">
<input type="reset" class="btn btn-secondary" value="Zurücksetzen" onclick="document.querySelector('[name=edit-product-id]').value = ''">
</div>
</form>
@ -177,10 +179,20 @@
</aside>
<div class="col-12 col-md-6 mt-2 mt-md-0">
<div class="card">
<h5 class="card-header">Produkte entfernen</h5>
<h5 class="card-header">Produkte</h5>
<div class="card-body">
<p class="mb-2">Hier können Produkte entfernt werden, die nicht mehr benötigt werden.</p>
<li class="list-group-item" data-template="settings-product">Test</li>
<p class="mb-2">Hier können Produkte entfernt oder werden.</p>
<li class="list-group-item" data-template="settings-product">
<span class="d-flex justify-content-between">
<span data-attr="name"></span>
<span>
<button class="mx-auto btn btn-secondary btn-sm" data-action="edit">Bearbeiten</button>
<button class="mx-auto btn btn-warning btn-sm" data-action="delete">Entfernen</button>
</span>
</span>
</li>
<ul class="list-group settings-product-list">
</ul>
</div>