<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="img/favicon.png" type="image/x-icon">
<title>Artikelübersicht</title>
<style>
/* Stil für das Bearbeitungsformular */
.edit-form {
display: none;
}
/* Mauszeigeränderung, wenn über das Bild gefahren wird */
.edit-form img:hover,
.edit-form a:hover {
cursor: pointer;
}
/* Stil für den Ist-Bestand, wenn er den Soll-Bestand unterschreitet */
.low-stock {
color: red; /* Schriftfarbe auf Orange ändern */
}
/* Stil für die Zeilen, deren Ablaufdatum innerhalb von 10 Tagen liegt */
.expiring td {
color: red; /* Schriftfarbe auf Rot ändern */
}
</style>
</head>
<body style="background-color: aliceblue;">
<header class="header">
<div class="header-container">
<h1>Materialverwaltung</h1>
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="add_material_form.php">Artikel hinzufügen</a></li>
<li><a href="article_overview.php">Artikel Übersicht</a></li>
<li><a href="Material_chrome.zip">chrome Erweiterung</a></li>
<li><a href="backup_restore.php">Backup</a></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<h2>Artikelübersicht</h2>
<!-- Artikel suchen -->
<form method="GET" action="article_overview.php" style="margin-bottom: 20px;">
<input type="text" name="search" placeholder="Artikel suchen" size="50">
<!-- Hier das size-Attribut geändert -->
<input type="submit" value="Suchen">
</form>
<!-- Artikel anzeigen -->
<table>
<tr>
<th>Name</th>
<th>Hersteller</th>
<th>Lagerort</th>
<th>Anzahl soll</th>
<th>Anzahl ist</th>
<th>Ablaufdatum</th>
<th>Benachrichtigungstage</th>
<th>Barcode</th>
<th>Bild</th>
<th>Aktionen</th>
</tr>
<?php
// Protokollierungsereignis einbinden
include_once 'log_event.php';
// Datenbankverbindung herstellen
include_once 'config/config.php';
// Verbindung zur Datenbank herstellen
$conn = new mysqli($host, $username, $password, $database);
if ($conn->connect_error) {
die("Verbindung zur Datenbank fehlgeschlagen: " . $conn->connect_error);
}
// SQL-Abfrage vorbereiten
$sql = "SELECT * FROM materials";
// Wenn nach einem Artikel gesucht wird
if(isset($_GET['search']) && !empty($_GET['search'])){
$search = $_GET['search'];
$sql .= " WHERE
item_name LIKE '%" . $search . "%' OR
manufacturer LIKE '%" . $search . "%' OR
location LIKE '%" . $search . "%' OR
barcode LIKE '%" . $search . "%'";
}
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// Daten ausgeben
while($row = $result->fetch_assoc()) {
$expiration_date = date("d.m.Y", strtotime($row["expiration_date"]));
$notification_days = intval($row["notification_days"]); // Tage vor dem Ablaufdatum aus der Datenbank lesen
$ten_days_before_expiry = date("d.m.Y", strtotime("-" . $notification_days . " days", strtotime($row["expiration_date"]))); // Tage vor dem Ablaufdatum berechnen
$current_date = date("d.m.Y"); // Aktuelles Datum
echo "<tr";
if (strtotime($current_date) >= strtotime($ten_days_before_expiry) && strtotime($current_date) <= strtotime($expiration_date)) {
echo " class='expiring'"; // Klasse 'expiring' hinzufügen
}
echo ">";
echo "<td";
if (strtotime($current_date) >= strtotime($ten_days_before_expiry) && strtotime($current_date) <= strtotime($expiration_date)) {
echo " style='color: red;'"; // Schriftfarbe auf Rot setzen
}
echo ">" . $row["item_name"] . "</td>";
echo "<td>" . $row["manufacturer"] . "</td>";
echo "<td>" . $row["location"] . "</td>";
echo "<td>" . $row["amount_should"] . "</td>";
echo "<td";
if ($row["amount_is"] < $row["amount_should"]) {
echo " class='low-stock'";
}
echo ">" . $row["amount_is"] . "</td>";
echo "<td>" . $expiration_date . "</td>";
echo "<td>" . $notification_days . "</td>";
echo "<td>" . $row["barcode"] . "</td>";
echo "<td>";
if (!empty($row["image"])) {
echo "<img src='" . $row["image"] . "' alt='Bild' style='width: 50px; height: 50px;' onclick='toggleEditForm(" . $row["id"] . ")'>";
} else {
echo "<img src='img/free.png' alt='Standardbild' style='width: 50px; height: 50px;' onclick='toggleEditForm(" . $row["id"] . ")'>";
}
echo "</td>";
echo "<td><img src='img/bearbeiten.png' alt='Bearbeiten' style='width: 20px; height: 20px;' onclick='toggleEditForm(" . $row["id"] . ")'> | <a href='remove_article.php?id=" . $row["id"] . "' onclick='return confirmDelete();'><img src='img/delete.png' alt='Löschen' style='width: 20px; height: 20px;' ></a></td>";
echo "</tr>";
// Bearbeitungsformular für jedes Element einfügen
echo "<tr class='edit-form' id='edit-form-" . $row["id"] . "'><td colspan='9'>
<form id='form-" . $row["id"] . "' onsubmit='updateItem(event, " . $row["id"] . ")'>
<input type='text' name='name' value='" . $row["item_name"] . "'>
<input type='text' name='manufacturer' value='" . $row["manufacturer"] . "'>
<input type='text' name='location' value='" . $row["location"] . "'>
<input type='number' name='amount_should' value='" . $row["amount_should"] . "'>
<input type='number' name='amount_is' value='" . $row["amount_is"] . "'>
<input type='date' name='expiration_date' value='" . $row["expiration_date"] . "'>
<input type='number' name='notification_days' value='" . $row["notification_days"] . "'>
<input type='text' name='barcode' value='" . $row["barcode"] . "'>
<input type='hidden' name='id' value='" . $row["id"] . "'>
<input type='submit' value='Speichern'>
</form>
</td></tr>";
// Loggen des Löschens eines Artikels
echo "<script>function confirmDelete" . $row["id"] . "() {
if(confirm('Möchten Sie diesen Artikel wirklich löschen?')) {
window.location.href = 'remove_article.php?id=" . $row["id"] . "';
}
}</script>";
}
} else {
echo "<tr><td colspan='9'>Keine Artikel gefunden</td></tr>";
}
$conn->close();
?>
</table>
</div>
<script>
// JavaScript-Funktion, um das Bearbeitungsformular anzuzeigen oder zu verstecken
function toggleEditForm(id) {
var editForm = document.getElementById("edit-form-" + id);
if (editForm.style.display === "none") {
editForm.style.display = "table-row";
} else {
editForm.style.display = "none";
}
}
// JavaScript-Funktion zur Aktualisierung des Elements mit AJAX
function updateItem(event, id) {
event.preventDefault();
var form = document.getElementById("form-" + id);
var formData = new FormData(form);
// Hinzufügen der ID zum FormData-Objekt
formData.append('id', id);
var xhr = new XMLHttpRequest();
xhr.open("POST", "update_article.php", true);
// Hinzufügen des Headers für die XMLHttpRequest
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.onload = function () {
if (xhr.status === 200) {
console.log(xhr.responseText); // Ausgabe der Serverantwort (zum Debuggen)
// Hier können Sie zusätzliche Aktionen nach dem Speichern durchführen, z.B. die Seite aktualisieren
window.location.reload(); // Seite neu laden, um die Änderungen anzuzeigen
}
};
xhr.send(formData);
}
// JavaScript-Funktion, um eine Bestätigungsbox anzuzeigen, bevor der Artikel gelöscht wird
function confirmDelete() {
return confirm("Möchten Sie diesen Artikel wirklich löschen?");
}
// Überprüfen, ob der Browser die Notification API unterstützt
if ("Notification" in window) {
// Überprüfen, ob der Benutzer Berechtigung für Benachrichtigungen erteilt hat
if (Notification.permission === "granted") {
// Funktion zum Erstellen einer Benachrichtigung
function createNotification(title, options) {
new Notification(title, options);
}
} else if (Notification.permission !== "denied") {
// Aufforderung an den Benutzer, um Berechtigung für Benachrichtigungen zu bitten
Notification.requestPermission().then(function (permission) {
if (permission === "granted") {
function createNotification(title, options) {
new Notification(title, options);
}
}
});
}
}
// Überprüfung, ob das Ablaufdatum innerhalb von x Tagen liegt und eine Benachrichtigung senden
function checkExpiryDate(expirationDate, notificationDays, itemName) {
var tenDaysBeforeExpiry = new Date(expirationDate);
tenDaysBeforeExpiry.setDate(tenDaysBeforeExpiry.getDate() - notificationDays);
var currentDate = new Date();
if (currentDate >= tenDaysBeforeExpiry && currentDate <= new Date(expirationDate)) {
var options = {
body: "Das Ablaufdatum von " + itemName + " liegt in " + notificationDays + " Tagen an.",
icon: "icon.png" // Hier das Bild für die Benachrichtigung ändern
};
createNotification("Ablaufdatum nahe", options);
}
}
// Aufrufen der Funktion für jedes Element in der Tabelle
var rows = document.getElementsByClassName("expiring");
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].getElementsByTagName("td");
var expirationDate = cells[5].innerText; // Das 6. td-Element enthält das Ablaufdatum
var notificationDays = parseInt(cells[6].innerText); // Das 7. td-Element enthält die Benachrichtigungstage
var itemName = cells[0].innerText; // Das 1. td-Element enthält den Artikelnamen
checkExpiryDate(expirationDate, notificationDays, itemName);
}
</script>
</body>
<span class="watermark">© copyright 2024 by M_Viper</span>
</html>