253 lines
9.0 KiB
HTML
253 lines
9.0 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</title>
|
|
|
|
<!-- CSRF-Token für JavaScript bereitstellen -->
|
|
<meta name="csrf-token" content="{{ session.get('_csrf_token', '') }}">
|
|
|
|
<style>
|
|
body { font-family: sans-serif; padding: 20px; background: #f4f7f6; }
|
|
.upload-container { background: white; padding: 20px; border-radius: 8px; max-width: 500px; margin: 0 auto; }
|
|
.form-group { margin-bottom: 15px; }
|
|
label { display: block; font-weight: bold; margin-bottom: 5px; }
|
|
input[type="file"] { width: 100%; padding: 8px; box-sizing: border-box; }
|
|
.btn-submit { width: 100%; padding: 10px; background: #4a90e2; color: white; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; }
|
|
.btn-submit:disabled { background: #ccc; }
|
|
#uploadProgress { margin-top: 20px; display: none; }
|
|
progress { width: 100%; height: 20px; }
|
|
#logList { background: #fafafa; border: 1px solid #eee; padding: 10px; max-height: 150px; overflow-y: auto; font-size: 0.85em; list-style: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="upload-container">
|
|
<h2>Inventar Batch Upload</h2>
|
|
|
|
<form id="batchUploadForm">
|
|
<div class="form-group">
|
|
<label for="csv_file">1. items.csv 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>
|
|
</div>
|
|
|
|
<button type="submit" id="uploadBtn" class="btn-submit">Daten hochladen</button>
|
|
</form>
|
|
|
|
<div id="uploadProgress">
|
|
<div id="progressText">Bereite Upload vor...</div>
|
|
<progress id="progressBar" value="0" max="100"></progress>
|
|
<ul id="logList"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 1. Ein echter CSV-Parser, der Zeilenumbrüche und Kommas in Texten korrekt ignoriert
|
|
function parseCSV(csvString) {
|
|
const rows = [];
|
|
let currentRow = [];
|
|
let currentCell = '';
|
|
let insideQuotes = false;
|
|
|
|
for (let i = 0; i < csvString.length; i++) {
|
|
const char = csvString[i];
|
|
const nextChar = csvString[i + 1];
|
|
|
|
if (char === '"' && insideQuotes && nextChar === '"') {
|
|
currentCell += '"';
|
|
i++; // Escaped Quotes ("") überspringen
|
|
} else if (char === '"') {
|
|
insideQuotes = !insideQuotes;
|
|
} else if (char === ',' && !insideQuotes) {
|
|
currentRow.push(currentCell);
|
|
currentCell = '';
|
|
} else if ((char === '\n' || char === '\r') && !insideQuotes) {
|
|
if (char === '\r' && nextChar === '\n') i++; // Windows Umbrüche überspringen
|
|
currentRow.push(currentCell);
|
|
// Leere Zeilen ignorieren
|
|
if (currentRow.length > 1 || currentRow[0] !== '') {
|
|
rows.push(currentRow);
|
|
}
|
|
currentRow = [];
|
|
currentCell = '';
|
|
} else {
|
|
currentCell += char;
|
|
}
|
|
}
|
|
if (currentCell !== '' || currentRow.length > 0) {
|
|
currentRow.push(currentCell);
|
|
if (currentRow.length > 1 || currentRow[0] !== '') {
|
|
rows.push(currentRow);
|
|
}
|
|
}
|
|
return rows;
|
|
}
|
|
|
|
// 2. Baut das Array wieder sicher zu einer sauberen CSV-Zeile für das Backend zusammen
|
|
function rowToCSV(rowArray) {
|
|
return rowArray.map(cell => {
|
|
if (cell === null || cell === undefined) return '';
|
|
let cellStr = String(cell);
|
|
// Wenn kritische Zeichen drin sind, sauber in Anführungszeichen verpacken
|
|
if (cellStr.includes(',') || cellStr.includes('"') || cellStr.includes('\n') || cellStr.includes('\r')) {
|
|
return '"' + cellStr.replace(/"/g, '""') + '"';
|
|
}
|
|
return cellStr;
|
|
}).join(',');
|
|
}
|
|
|
|
// 3. Bildnamen extrahieren (bleibt wie es war)
|
|
function extractImageNames(cellValue) {
|
|
if (!cellValue) return [];
|
|
let raw = String(cellValue).replace(/^["']|["']$/g, '').trim();
|
|
if (raw.startsWith('[') && raw.endsWith(']')) {
|
|
try {
|
|
const jsonValid = raw.replace(/'/g, '"');
|
|
return JSON.parse(jsonValid);
|
|
} catch (e) {
|
|
const matches = raw.match(/['"]([^'"]+)['"]/g);
|
|
if (matches) return matches.map(m => m.replace(/['"]/g, ''));
|
|
}
|
|
}
|
|
return raw ? [raw] : [];
|
|
}
|
|
|
|
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');
|
|
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
|
|
|
|
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;
|
|
};
|
|
|
|
const csvFile = csvInput.files[0];
|
|
const allImages = Array.from(imageInput.files);
|
|
|
|
const imageMap = new Map();
|
|
allImages.forEach(file => {
|
|
imageMap.set(file.name.toLowerCase(), file);
|
|
});
|
|
|
|
const BATCH_SIZE = 50;
|
|
|
|
try {
|
|
const csvText = await csvFile.text();
|
|
// Hier rufen wir jetzt unseren sicheren Parser auf!
|
|
const allRows = parseCSV(csvText);
|
|
|
|
if (allRows.length <= 1) {
|
|
throw new Error("CSV-Datei ist leer oder enthält nur Kopfzeilen.");
|
|
}
|
|
|
|
const headerRow = allRows[0];
|
|
const dataRows = allRows.slice(1);
|
|
|
|
log(`${dataRows.length} Einträge gefunden. Bereite Batches vor...`);
|
|
|
|
// Spalten-Index von "Images" sicher ermitteln
|
|
const imagesColIndex = headerRow.findIndex(h => h.toLowerCase().trim() === 'images');
|
|
|
|
// In Batches aufteilen
|
|
const batches = [];
|
|
for (let i = 0; i < dataRows.length; i += BATCH_SIZE) {
|
|
batches.push(dataRows.slice(i, i + BATCH_SIZE));
|
|
}
|
|
|
|
progressBar.max = batches.length;
|
|
progressBar.value = 0;
|
|
|
|
for (let b = 0; b < batches.length; b++) {
|
|
const batchRows = batches[b];
|
|
progressText.textContent = `Lade Batch ${b + 1} von ${batches.length} hoch...`;
|
|
|
|
const requiredImagesForBatch = new Set();
|
|
|
|
if (imagesColIndex !== -1) {
|
|
batchRows.forEach(rowCols => {
|
|
if (rowCols[imagesColIndex]) {
|
|
const imgNames = extractImageNames(rowCols[imagesColIndex]);
|
|
imgNames.forEach(name => {
|
|
const fileMatch = imageMap.get(name.toLowerCase());
|
|
if (fileMatch) {
|
|
requiredImagesForBatch.add(fileMatch);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Sicherer Zusammenbau des CSV-Batches
|
|
const batchCsvArray = [headerRow, ...batchRows];
|
|
const batchCsvText = batchCsvArray.map(rowToCSV).join('\n');
|
|
const batchCsvBlob = new Blob([batchCsvText], { type: 'text/csv' });
|
|
|
|
const formData = new FormData();
|
|
formData.append('csv_file', batchCsvBlob, `batch_${b + 1}.csv`);
|
|
|
|
if (csrfToken) {
|
|
formData.append('csrf_token', csrfToken);
|
|
}
|
|
|
|
requiredImagesForBatch.forEach(imgFile => {
|
|
formData.append('images', imgFile);
|
|
});
|
|
|
|
log(`Batch ${b + 1}: ${batchRows.length} Items & ${requiredImagesForBatch.size} zugehörige Bilder.`);
|
|
|
|
const response = await fetch('/upload_csv_batch', {
|
|
method: 'POST',
|
|
body: formData,
|
|
headers: {
|
|
'X-CSRFToken': csrfToken || ''
|
|
}
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (!response.ok || !result.success) {
|
|
throw new Error(result.message || `Server-Fehler ${response.status}`);
|
|
}
|
|
|
|
log(`Batch ${b + 1} abgeschlossen.`);
|
|
progressBar.value = b + 1;
|
|
}
|
|
|
|
progressText.textContent = "Upload erfolgreich beendet! Keine verschobenen Spalten mehr.";
|
|
uploadBtn.disabled = false;
|
|
|
|
} catch (err) {
|
|
alert("Upload abgebrochen: " + err.message);
|
|
log("Fehler: " + err.message);
|
|
uploadBtn.disabled = false;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |