<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/png" href="../img/logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Artikel hinzufügen</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/article_form.css">
<script>
function validateForm() {
var articleFields = document.querySelectorAll('.article-field');
var excelFile = document.getElementById('excel_file').files[0];
// Überprüfe, ob eine Excel-Datei hochgeladen wurde
if (excelFile) {
return true; // Erlaube das Hochladen der Excel-Datei ohne weitere Überprüfung
}
// Überprüfe, ob mindestens ein Artikel-Feld ausgefüllt ist
for (var i = 0; i < articleFields.length; i++) {
if (articleFields[i].value.trim() !== '') {
return true; // Erlaube das Absenden des Formulars
}
}
// Wenn weder eine Excel-Datei hochgeladen wurde noch Artikel-Felder ausgefüllt sind, zeige eine Warnung an
alert('Bitte füllen Sie entweder die Felder aus oder laden Sie eine Excel-Datei hoch.');
return false; // Verhindere das Absenden des Formulars
}
</script>
</head>
<body>
<div class="container">
<h2>Neuen Artikel hinzufügen</h2>
<form action="../includes/add_article.php" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<div class="form-group">
<label for="manufacturer">Hersteller:</label>
<input type="text" class="article-field" id="manufacturer" name="manufacturer">
</div>
<div class="form-group">
<label for="set_name">Set Bezeichnung:</label>
<input type="text" class="article-field" id="set_name" name="set_name">
</div>
<div class="form-group">
<label for="article_number">Artikelnummer:</label>
<input type="text" class="article-field" id="article_number" name="article_number">
</div>
<div class="form-group">
<label for="ean_barcode">Set EAN:</label>
<input type="text" class="article-field" id="ean_barcode" name="ean_barcode">
</div>
<!-- Separate Box für die restlichen Felder -->
<div class="form-group">
<h3>Einzelteile</h3>
<div class="form-group">
<label for="part1">Backofen:</label>
<input type="text" class="article-field" id="part1" name="part1">
</div>
<div class="form-group">
<label for="part1_ean">Backofen EAN:</label>
<input type="text" class="article-field" id="part1_ean" name="part1_ean">
</div>
<div class="form-group">
<label for="part2">Ceranfeld:</label>
<input type="text" class="article-field" id="part2" name="part2">
</div>
<div class="form-group">
<label for="part2_ean">Ceranfeld EAN:</label>
<input type="text" class="article-field" id="part2_ean" name="part2_ean">
</div>
<div class="form-group">
<label for="part3">Auszug:</label>
<input type="text" class="article-field" id="part3" name="part3">
</div>
<div class="form-group">
<label for="part3_ean">Auszug EAN:</label>
<input type="text" class="article-field" id="part3_ean" name="part3_ean">
</div>
<div class="form-group">
<label for="part4">Backblech:</label>
<input type="text" class="article-field" id="part4" name="part4">
</div>
<div class="form-group">
<label for="part4_ean">Backblech EAN:</label>
<input type="text" class="article-field" id="part4_ean" name="part4_ean">
</div>
<!-- Anzeige des gezählten Pakets -->
<div class="form-group">
<label for="quantity">Pakete:</label>
<input type="text" class="article-field" id="quantity" name="quantity" readonly>
</div>
</div>
<!-- Upload-Button für Excel-Datei -->
<div class="form-group">
<label for="excel_file">Import Excel-Datei:</label>
<input type="file" id="excel_file" name="excel_file" accept=".xls,.xlsx">
</div>
<div class="button-group">
<input type="submit" value="Add Article">
</div>
</form>
</div>
<script>
// Zähle die Anzahl der Teile und aktualisiere das Feld "Pakete"
function countPackages() {
var part1 = document.getElementById('part1').value.trim();
var part2 = document.getElementById('part2').value.trim();
var part3 = document.getElementById('part3').value.trim();
var part4 = document.getElementById('part4').value.trim();
var quantityField = document.getElementById('quantity');
var packageCount = 0;
if (part1 !== '') packageCount++;
if (part2 !== '') packageCount++;
if (part3 !== '') packageCount++;
if (part4 !== '') packageCount++;
quantityField.value = packageCount;
}
// Rufe die Funktion zur Paketzählung auf, wenn sich der Wert in einem der Teilfelder ändert
document.querySelectorAll('.article-field').forEach(item => {
item.addEventListener('change', countPackages);
});
</script>
</body>
</html>