2024-02-25 10:45:14 +00:00
<! 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 ;
}
2024-02-25 15:28:05 +00:00
/* Stil für den Ist-Bestand, wenn er den Soll-Bestand unterschreitet */
. low - stock {
color : red ; /* Schriftfarbe auf Orange ändern */
}
2024-02-27 20:54:58 +00:00
2024-02-25 15:28:05 +00:00
/* Stil für die Zeilen, deren Ablaufdatum innerhalb von 10 Tagen liegt */
. expiring td {
color : red ; /* Schriftfarbe auf Rot ändern */
}
2024-02-25 10:45:14 +00:00
</ 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 >
2024-02-28 19:02:06 +00:00
< li >< a href = " Material_chrome.zip " > chrome Erweiterung </ a ></ li >
2024-02-27 20:54:58 +00:00
< li >< a href = " backup_restore.php " > Backup </ a ></ li >
2024-02-25 10:45:14 +00:00
</ 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 >
2024-02-28 19:02:06 +00:00
< th > Benachrichtigungstage </ th >
2024-02-25 10:45:14 +00:00
< th > Barcode </ th >
< th > Bild </ th >
< th > Aktionen </ th >
</ tr >
< ? php
2024-02-27 20:54:58 +00:00
// 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
2024-02-25 17:42:29 +00:00
item_name LIKE '%" . $search . "%' OR
manufacturer LIKE '%" . $search . "%' OR
location LIKE '%" . $search . "%' OR
barcode LIKE '%" . $search . "%' " ;
2024-02-27 20:54:58 +00:00
}
2024-02-25 10:45:14 +00:00
2024-02-27 20:54:58 +00:00
$result = $conn -> query ( $sql );
2024-02-25 10:45:14 +00:00
2024-02-27 20:54:58 +00:00
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
2024-02-25 15:28:05 +00:00
2024-02-27 20:54:58 +00:00
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 " > " ;
2024-02-25 10:45:14 +00:00
2024-02-27 20:54:58 +00:00
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> " ;
2024-02-28 19:02:06 +00:00
echo " <td> " . $notification_days . " </td> " ;
2024-02-27 20:54:58 +00:00
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"] . "' >
2024-02-28 19:02:06 +00:00
< input type = 'number' name = 'notification_days' value = '" . $row["notification_days"] . "' >
2024-02-27 20:54:58 +00:00
< 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 > " ;
}
2024-02-25 10:45:14 +00:00
} else {
2024-02-27 20:54:58 +00:00
echo " <tr><td colspan='9'>Keine Artikel gefunden</td></tr> " ;
2024-02-25 10:45:14 +00:00
}
2024-02-27 20:54:58 +00:00
$conn -> close ();
?>
2024-02-25 10:45:14 +00:00
</ 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 );
}
2024-02-25 13:31:42 +00:00
// 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? " );
}
2024-02-25 17:25:50 +00:00
2024-02-28 19:02:06 +00:00
// Ü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 );
}
2024-02-25 10:45:14 +00:00
</ script >
</ body >
2024-02-25 10:59:11 +00:00
< span class = " watermark " > © copyright 2024 by M_Viper </ span >
2024-02-25 10:45:14 +00:00
</ html >
