Aufräumen der neuen Export und Importfunktion (Dateien)

This commit is contained in:
Dennis Heinrich 2025-04-10 20:21:22 +02:00
parent deef49a560
commit 66a244f37a
2 changed files with 83 additions and 56 deletions

View file

@ -21,14 +21,26 @@ class Element {
return document.querySelector('#input-export-import');
}
/**
* Get the file export button element
* @returns {Element}
*/
static getFileExportButton() {
return document.querySelector('#export-file');
}
/**
* Get the file import button element
* @returns {Element}
*/
static getFileImportButton() {
return document.querySelector('#import-file-button');
}
/**
* Get the file import input element
* @returns {Element}
*/
static getFileImportFileInput() {
return document.querySelector('#import-file');
}
@ -91,7 +103,7 @@ class Element {
/**
* Get the buttons for importing test data
* @returns {Element}
* @returns {Element[]}
*/
static getButtonsImportTestdata() {
return document.querySelectorAll('[data-action=import-testdata]');
@ -358,6 +370,34 @@ class ProductManager {
console.error(e);
}
});
Element.getFileExportButton().addEventListener('click', () => {
const blob = new Blob([Element.getImportExportTextarea().value], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'products.json';
document.body.appendChild(a);
a.click();
setTimeout(() => {
URL.revokeObjectURL(url);
a.remove();
}, 0);
});
Element.getFileImportButton().addEventListener('click', () => {
let inputJsonFile = Element.getFileImportFileInput();
let fileContent = inputJsonFile.files[0];
if (fileContent) {
const reader = new FileReader();
reader.onload = async (e) => {
const json = JSON.parse(e.target.result);
await productManager.convertAndSaveProductImages(json);
location.reload();
};
reader.readAsText(fileContent);
}
})
}
/**
@ -694,14 +734,26 @@ class ThemeManager {
* Define the CartHistoryManager class to manage the cart history.
*/
class CartHistoryManager {
/**
* Get the cart history from local storage.
* @returns {string|number}
*/
static getTotal() {
return localStorage.getItem('cart-total-value') || 0;
}
/**
* Set the cart history value in local storage.
* @param value
*/
static setTotal(value) {
localStorage.setItem('cart-total-value', value);
}
/**
* Add to the cart history value in local storage.
* @param value
*/
static addToTotal(value) {
const total = parseFloat(CartHistoryManager.getTotal()) + value;
CartHistoryManager.setTotal(total);
@ -716,39 +768,3 @@ const productManager = new ProductManager();
const tabManager = new TabManager();
const themeManager = new ThemeManager();
const cartHistoryManager = new CartHistoryManager();
Element.getFileExportButton().addEventListener('click', () => {
const blob = new Blob([Element.getImportExportTextarea().value], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'products.json';
document.body.appendChild(a);
a.click();
setTimeout(() => {
URL.revokeObjectURL(url);
a.remove();
}, 0);
});
Element.getFileImportButton().addEventListener('click', () => {
let inputJsonFile = Element.getFileImportFileInput();
let fileContent = inputJsonFile.files[0];
if (fileContent) {
const reader = new FileReader();
reader.onload = async (e) => {
const json = JSON.parse(e.target.result);
await productManager.convertAndSaveProductImages(json);
location.reload();
};
reader.readAsText(fileContent);
}
})
document.addEventListener('touchstart', function (e) {
if (window.scrollY === 0) {
e.preventDefault();
}
});

View file

@ -110,6 +110,35 @@
<div class="card-body">
<details class="mb-2">
<summary>Exportieren und Importieren</summary>
<div class="row">
<div class="col-12 mb-2 mt-2">
<p>
Hier kann die JSON-Datei exportiert werden. Dafür auf "Produkte herunterladen" klicken.
Die Datei wird dann im Download-Ordner gespeichert. Die Daten können nach eigenen
Belieben bearbeitet werden. Die Daten können auch wieder importiert werden.
</p>
<button class="btn btn-primary" id="export-file">
Produkte herunterladen
</button>
<hr>
</div>
<div class="col-12">
<p>
Hier kann die JSON-Datei importiert werden. Dafür die Datei
auswählen und auf "Hochladen" klicken. Die Daten werden dann in die Software
importiert.
</p>
<div class="input-group">
<input class="form-control" type="file" id="import-file">
<button class="btn btn-primary ms-2" data-action="import" id="import-file-button">
Hochladen
</button>
</div>
</div>
</div>
</details>
<details class="mb-2">
<summary>Testdaten einspielen</summary>
<p>
Die Daten können im JSON-Format exportiert und importiert werden.
Um Speicherplatz zu sparen, sollte das Bild im Format 1:1 vorliegen.
@ -117,24 +146,6 @@
lädt die Software das Bild herunter und speichert es in der JSON-Datei als Base64-kodierte
Version. Die ursprüngliche URL wird dabei nicht mehr gespeichert.
</p>
<div class="">
<button class="btn btn-primary" id="export-file">
Datei exportieren
</button>
<span>|</span>
<input class="form-control" type="file" id="import-file">
<button class="btn btn-primary ms-2" data-action="import" id="import-file-button">
Datei importieren
</button>
</div>
<label class="w-100 form-label">
<b>Text zum Kopieren und Einfügen:</b>
<textarea class="form-control mt-1" id="input-export-import" spellcheck="false"></textarea>