129 lines
6.1 KiB
PHP
129 lines
6.1 KiB
PHP
|
<!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>
|