309 lines
9.9 KiB
HTML
309 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Batch Upload - CSV & Bilder</title>
|
|
<style>
|
|
:root {
|
|
--primary-color: #4a90e2;
|
|
--background-color: #f4f7f6;
|
|
--text-color: #333;
|
|
--border-radius: 8px;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: var(--background-color);
|
|
color: var(--text-color);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.upload-container {
|
|
background: white;
|
|
padding: 2rem;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
width: 100%;
|
|
max-width: 500px;
|
|
}
|
|
|
|
h2 {
|
|
margin-top: 0;
|
|
color: var(--primary-color);
|
|
text-align: center;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
font-weight: 600;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
input[type="file"] {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
border: 1px dashed #ccc;
|
|
border-radius: var(--border-radius);
|
|
background: #fafafa;
|
|
cursor: pointer;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.btn-submit {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
border: none;
|
|
border-radius: var(--border-radius);
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
|
|
.btn-submit:hover {
|
|
background-color: #357abd;
|
|
}
|
|
|
|
.btn-submit:disabled {
|
|
background-color: #a0c4e8;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Fortschritts- und Log-Bereich */
|
|
#uploadProgress {
|
|
margin-top: 2rem;
|
|
display: none;
|
|
}
|
|
|
|
#progressText {
|
|
font-size: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--primary-color);
|
|
text-align: center;
|
|
}
|
|
|
|
progress {
|
|
width: 100%;
|
|
height: 20px;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
#logList {
|
|
margin-top: 1rem;
|
|
padding: 10px;
|
|
font-size: 0.85rem;
|
|
color: #555;
|
|
max-height: 150px;
|
|
overflow-y: auto;
|
|
background: #fafafa;
|
|
border: 1px solid #ddd;
|
|
border-radius: var(--border-radius);
|
|
list-style-type: none;
|
|
}
|
|
|
|
#logList li {
|
|
margin-bottom: 5px;
|
|
padding-bottom: 5px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
#logList li:last-child {
|
|
border-bottom: none;
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="upload-container">
|
|
<h2>Inventar Batch Upload</h2>
|
|
|
|
<!-- ID auf "batchUploadForm" geändert, damit das JS es findet -->
|
|
<form id="batchUploadForm">
|
|
<div class="form-group">
|
|
<label for="csv_file">1. items.csv Datei auswählen</label>
|
|
<input type="file" id="csv_file" name="csv_file" accept=".csv" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="images">2. Bilder auswählen</label>
|
|
<input type="file" id="images" name="images" accept="image/*" multiple required>
|
|
<small style="color: #666; display: block; margin-top: 5px;">Du kannst mehrere Bilder markieren (Strg/Cmd gedrückt halten).</small>
|
|
</div>
|
|
|
|
<!-- ID auf "uploadBtn" geändert -->
|
|
<button type="submit" id="uploadBtn" class="btn-submit">Daten hochladen</button>
|
|
</form>
|
|
|
|
<!-- Fehlender Container für den Fortschrittsbalken und Logs hinzugefügt -->
|
|
<div id="uploadProgress">
|
|
<div id="progressText">Starte Upload...</div>
|
|
<progress id="progressBar" value="0" max="100"></progress>
|
|
<ul id="logList"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('batchUploadForm').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const csvInput = document.getElementById('csv_file');
|
|
const imageInput = document.getElementById('images');
|
|
const uploadBtn = document.getElementById('uploadBtn');
|
|
const progressContainer = document.getElementById('uploadProgress');
|
|
const progressBar = document.getElementById('progressBar');
|
|
const progressText = document.getElementById('progressText');
|
|
const logList = document.getElementById('logList');
|
|
|
|
if (!csvInput.files.length) {
|
|
alert("Bitte wähle eine CSV-Datei aus.");
|
|
return;
|
|
}
|
|
|
|
uploadBtn.disabled = true;
|
|
progressContainer.style.display = 'block';
|
|
logList.innerHTML = '';
|
|
|
|
const log = (msg) => {
|
|
const li = document.createElement('li');
|
|
li.textContent = msg;
|
|
logList.appendChild(li);
|
|
logList.scrollTop = logList.scrollHeight; // Auto-scroll
|
|
};
|
|
|
|
const csvFile = csvInput.files[0];
|
|
const allImages = Array.from(imageInput.files);
|
|
const BATCH_SIZE = 50;
|
|
|
|
try {
|
|
// 1. CSV-Datei lesen
|
|
const csvText = await csvFile.text();
|
|
|
|
// 2. CSV in Zeilen aufteilen
|
|
let rows = csvText.split(/\r?\n/).filter(row => row.trim().length > 0);
|
|
|
|
if (rows.length <= 1) {
|
|
throw new Error("CSV-Datei ist leer oder enthält nur Kopfzeilen.");
|
|
}
|
|
|
|
const header = rows[0];
|
|
let dataRows = rows.slice(1);
|
|
|
|
// 3. Client-seitige Deduplizierung (Entfernt exakte Duplikat-Zeilen)
|
|
const uniqueRowsSet = new Set();
|
|
const uniqueDataRows = [];
|
|
let duplicateCount = 0;
|
|
|
|
for (const row of dataRows) {
|
|
if (uniqueRowsSet.has(row)) {
|
|
duplicateCount++;
|
|
} else {
|
|
uniqueRowsSet.add(row);
|
|
uniqueDataRows.push(row);
|
|
}
|
|
}
|
|
|
|
log(`${uniqueDataRows.length} einzigartige Einträge gefunden. ${duplicateCount} Duplikate entfernt.`);
|
|
|
|
// Den Index der "Images" Spalte finden
|
|
const headers = header.split(',');
|
|
const imagesColIndex = headers.findIndex(h => h.trim().replace(/['"]/g, '') === 'Images');
|
|
|
|
// 4. In Batches (Häppchen) aufteilen
|
|
const batches = [];
|
|
for (let i = 0; i < uniqueDataRows.length; i += BATCH_SIZE) {
|
|
batches.push(uniqueDataRows.slice(i, i + BATCH_SIZE));
|
|
}
|
|
|
|
progressBar.max = batches.length;
|
|
progressBar.value = 0;
|
|
|
|
// 5. Batches nacheinander hochladen
|
|
for (let b = 0; b < batches.length; b++) {
|
|
const batchRows = batches[b];
|
|
progressText.textContent = `Lade Batch ${b + 1} von ${batches.length} hoch...`;
|
|
log(`Bereite Batch ${b + 1} vor (${batchRows.length} Artikel)...`);
|
|
|
|
// CSV für diesen Batch neu zusammensetzen
|
|
const batchCsvText = [header, ...batchRows].join('\n');
|
|
const batchCsvBlob = new Blob([batchCsvText], { type: 'text/csv' });
|
|
|
|
// Benötigte Bilder für diesen Batch extrahieren
|
|
const requiredImageNames = new Set();
|
|
if (imagesColIndex !== -1) {
|
|
batchRows.forEach(row => {
|
|
const cols = row.split(',');
|
|
if (cols[imagesColIndex]) {
|
|
try {
|
|
let imgStr = cols[imagesColIndex].trim().replace(/^"|"$/g, '').replace(/'/g, '"');
|
|
if (imgStr.startsWith('[') && imgStr.endsWith(']')) {
|
|
const parsedImages = JSON.parse(imgStr);
|
|
parsedImages.forEach(img => requiredImageNames.add(img));
|
|
}
|
|
} catch (err) {
|
|
console.warn("Konnte Bild-Array nicht parsen in Zeile:", row);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Bilder auf die für diesen Batch benötigten filtern
|
|
const batchImages = allImages.filter(img => requiredImageNames.has(img.name));
|
|
|
|
// FormData zusammenbauen
|
|
const formData = new FormData();
|
|
formData.append('csv_file', batchCsvBlob, `batch_${b+1}.csv`);
|
|
batchImages.forEach(img => {
|
|
formData.append('images', img);
|
|
});
|
|
|
|
// An Server senden
|
|
try {
|
|
const response = await fetch('/upload_csv_batch', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (!response.ok || !result.success) {
|
|
throw new Error(result.message || `Server antwortete mit Status ${response.status}`);
|
|
}
|
|
|
|
log(`Batch ${b + 1} erfolgreich: ${result.message}`);
|
|
} catch (batchErr) {
|
|
log(`Fehler in Batch ${b + 1}: ${batchErr.message}`);
|
|
alert(`Upload wurde bei Batch ${b + 1} aufgrund eines Fehlers abgebrochen. Prüfe die Logs.`);
|
|
break; // Stoppt weitere Uploads, wenn einer fehlschlägt
|
|
}
|
|
|
|
progressBar.value = b + 1;
|
|
}
|
|
|
|
progressText.textContent = "Upload-Vorgang abgeschlossen!";
|
|
uploadBtn.disabled = false;
|
|
|
|
} catch (error) {
|
|
alert("Fehler bei der Verarbeitung des Uploads: " + error.message);
|
|
log("Fehler: " + error.message);
|
|
uploadBtn.disabled = false;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |