Added full logic of notifications.

This commit is contained in:
2024-10-28 01:17:00 +04:00
parent 7bd845b152
commit d2295a6328
7 changed files with 576 additions and 41 deletions
@@ -0,0 +1,35 @@
<?php
header('Content-Type: application/json');
include '../../Connections/repnew.php';
$conn = new mysqli($servername, $username, $password, $database);
if ($conn->connect_error) {
die("Connessione fallita: " . $conn->connect_error);
}
$method = $_POST['method'];
if ($method == 'show_notification') {
$sql = "SELECT r.idreports, p.products_refnumber, r.reportsNumberLab, r.reportsRating
FROM reports AS r
JOIN products p ON r.idproducts = p.idproducts
WHERE r.seen = 0
ORDER BY r.idreports DESC
LIMIT 1";
$result = $conn->query($sql);
$notifications = [];
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$notifications[] = $row;
}
}
$conn->close();
die(json_encode($notifications));
}else if($method == 'update_notification'){
$idreports = $_POST['idreports'];
$sql = "UPDATE reports SET seen = 1 WHERE seen = 0 AND idreports = $idreports";
$conn->query($sql);
$conn->close();
die(json_encode('success'));
}
@@ -0,0 +1,92 @@
<?php
include('../include/headscript.php');
include("../class/company.php");
header('Content-Type: application/json');
include '../../Connections/repnew.php';
$conn = new mysqli($servername, $username, $password, $database);
if ($conn->connect_error) {
die(json_encode(["code" => "error", "message" => "Connection failed: " . $conn->connect_error]));
}
$method = $_POST['method'];
$user_id = $_SESSION['iduserlogin'];
if ($method == 'getNotifications') {
$sql = "SELECT * FROM notifications";
$all_notifications = [];
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$all_notifications[] = $row;
}
}
// If there are no notifications, return an empty response
if (empty($all_notifications)) {
die(json_encode(
[
'code' => 'success',
'message' => 'No notifications found'
]
));
} else {
$all_notification_ids = array_column($all_notifications, 'id');
$all_notification_ids_str = implode(',', $all_notification_ids);
$sql = "SELECT notification_id
FROM seen_notifications
WHERE notification_id IN ($all_notification_ids_str)
AND user_id = $user_id";
$result = $conn->query($sql);
$seen_notification_ids = [];
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$seen_notification_ids[] = $row['notification_id'];
}
}
$seen_notifications = [];
foreach ($all_notifications as $notification) {
if (in_array($notification['id'], $seen_notification_ids)) {
$seen_notifications[] = $notification;
}
}
$unseen_notifications = array_udiff($all_notifications, $seen_notifications, function ($a, $b) {
return $a['id'] <=> $b['id'];
});
$new_unseen_notifications = [];
foreach ($unseen_notifications as $notification) {
array_push($new_unseen_notifications, $notification);
}
$new_seen_notifications = [];
foreach ($seen_notifications as $notification) {
array_push($new_seen_notifications, $notification);
}
$conn->close();
// Send JSON response without further encoding the arrays
die(json_encode(
[
'code' => 'success',
'all_notifications' => $all_notifications,
'seen_notifications' => $new_seen_notifications,
'unseen_notifications' => $new_unseen_notifications
]
));
}
}
if ($method == 'markAsSeen') {
$notification_id = $_POST['notification_id'];
$sql = "INSERT INTO seen_notifications (notification_id, user_id) VALUES ($notification_id, $user_id)";
$conn->query($sql);
$conn->close();
die(json_encode(['code' => 'success', 'message' => 'Notification marked as seen']));
}
+7 -1
View File
@@ -7,7 +7,7 @@
<!-- LOGO -->
<div class="topbar-left">
<div class="text-center bg-logo">
<a href="index.php" class="logo"><i class="mdi mdi-bowling text-success"></i> Reportify</a>
<a href="<?php echo USERAREA_PATH;?>index.php" class="logo"><i class="mdi mdi-bowling text-success"></i> Reportify</a>
<!-- <a href="index.html" class="logo"><img src="assets/images/logo.png" height="24" alt="logo"></a> -->
</div>
</div>
@@ -40,6 +40,12 @@
<span> Dashboard </span>
</a>
</li>
<li>
<a href="<?php echo USERAREA_PATH;?>notifications/notifications.php">
<i class="mdi mdi-bell icon nav-icon"></i>
<span> Notifications </span>
</a>
</li>
<li class="has_sub">
<a href="javascript:void(0);" class="waves-effect"><i class="far fa-building"></i> <span> <?php echo $mycompany; ?> </span> <span class="float-right"><i class="mdi mdi-chevron-right"></i></span></a>
<ul class="list-unstyled">
+233 -39
View File
@@ -1,32 +1,135 @@
<?php
/*
// Crea la connessione
$conn = new mysqli($servername, $username, $password, $database);
// Controlla la connessione
if ($conn->connect_error) {
die("Connessione fallita: " . $conn->connect_error);
}
// // Crea la connessione
// $conn = new mysqli($servername, $username, $password, $database);
// Query SQL per estrarre le lingue
$sql = "SELECT languagename, languageflag, languageacronym FROM languagesdrop";
$result = $conn->query($sql);
// // Controlla la connessione
// if ($conn->connect_error) {
// die("Connessione fallita: " . $conn->connect_error);
// }
$languages = [];
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$languages[] = $row;
}
}
// // Query SQL per estrarre le lingue
// $sql = "SELECT languagename, languageflag, languageacronym FROM languagesdrop";
// $result = $conn->query($sql);
// Chiudi la connessione
$conn->close();
*/ ?>
// $languages = [];
// if ($result->num_rows > 0) {
// while($row = $result->fetch_assoc()) {
// $languages[] = $row;
// }
// }
?>
<!-- Top Bar Start -->
<div class="topbar">
<style>
/* Basic reset for styling */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Notification card container */
.notification-card {
display: flex;
align-items: center;
padding: 15px;
border-radius: 8px;
margin: 10px 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
color: #fff;
font-family: Arial, sans-serif;
}
/* Icon styling */
.notification-icon {
font-size: 24px;
margin-right: 15px;
}
/* Content styling */
.notification-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
}
.notification-title {
font-weight: bold;
font-size: 16px;
}
.notification-details,
.notification-rating {
font-size: 14px;
opacity: 0.9;
}
/* Green (Success) Notification */
.notification-green {
background-color: #4CAF50;
border-left: 5px solid #388E3C;
}
/* Red (Fail) Notification */
.notification-red {
background-color: #f44336;
border-left: 5px solid #d32f2f;
}
/* Yellow (Warning) Notification */
.notification-yellow {
background-color: #ff9800;
border-left: 5px solid #f57c00;
}
/* Notification hover effect */
.notification-card:hover {
transform: scale(1.02);
transition: transform 0.2s;
}
.notification-show {
animation: slideIn 0.5s ease-out forwards;
/* Entry animation */
}
.notification-hide {
animation: fadeOut 0.5s ease-out forwards;
/* Exit animation */
}
/* Animation keyframes */
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(30px);
}
}
</style>
<nav class="navbar-custom">
<ul class="list-inline float-right mb-0">
<!-- language-->
<!-- <li class="list-inline-item dropdown notification-list hide-phone">
@@ -70,7 +173,7 @@ $conn->close();
</a>
<!-- All-->
<a href="javascript:void(0);" class="dropdown-item notify-item border-top">
<a href="javascript:void(0);" class="dropdown-item notify-item notify-all">
View All
</a>
@@ -80,34 +183,25 @@ $conn->close();
<li class="list-inline-item dropdown notification-list">
<a class="nav-link dropdown-toggle arrow-none waves-effect" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
<i class="dripicons-bell noti-icon"></i>
<span class="badge badge-success noti-icon-badge">2</span>
<span class="badge badge-success noti-icon-badge" id="notificationQuantity"></span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-menu-lg">
<!-- item-->
<div class="dropdown-item noti-title">
<h5><span class="badge badge-danger float-right">87</span>Notification</h5>
<h5><span class="badge badge-danger float-right" id="notificationQuantityDropDown"></span>Notification</h5>
</div>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div id="notificationItemDiv">
</div>
<!-- <a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-primary"><i class="mdi mdi-cart-outline"></i></div>
<p class="notify-details"><b>Your order is placed</b><small class="text-muted">Dummy text of the printing and typesetting industry.</small></p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-success"><i class="mdi mdi-message"></i></div>
<p class="notify-details"><b>New Message received</b><small class="text-muted">You have 87 unread messages</small></p>
</a>
<!-- item-->
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-warning"><i class="mdi mdi-glass-cocktail"></i></div>
<p class="notify-details"><b>Your item is shipped</b><small class="text-muted">It is a long established fact that a reader will</small></p>
</a>
</a> -->
<!-- All-->
<a href="javascript:void(0);" class="dropdown-item notify-item border-top">
<a href="<?php echo USERAREA_PATH; ?>notifications/notifications.php" class="dropdown-item notify-item notify-all">
View All
</a>
@@ -142,6 +236,106 @@ $conn->close();
</ul>
<div class="clearfix"></div>
</nav>
</div>
<!-- Top Bar End -->
<script>
setInterval(() => {
$.post("<?php echo USERAREA_PATH; ?>include/checkNotifications.php", {
method: 'show_notification'
}, function(data) {
// Clear any previous notifications
$('#mainNotificationDiv').empty();
data.forEach(notification => {
// Define variables for the color and icon based on reportsRating
let notificationColor, notificationIcon;
if (notification.reportsRating === "Pass") {
notificationColor = "green";
notificationIcon = ""; // success icon
} else if (notification.reportsRating === "Fail") {
notificationColor = "red";
notificationIcon = ""; // error icon
} else {
notificationColor = "orange";
notificationIcon = "⚠️"; // warning icon
}
// Create the notification element with styling and content
const notificationElement = $(`
<div class="notification" style="background-color: ${notificationColor}; color: white; padding: 10px; margin-top: 5px; border-radius: 5px; display: none;">
<span class="icon">${notificationIcon}</span>
<span class="text">Report ${notification.idreports}: ${notification.products_refnumber} - ${notification.reportsRating}</span>
</div>
`);
// Append the notification to the main div
$('#mainNotificationDiv').append(notificationElement);
// Show notification with animation
notificationElement.fadeIn();
// Remove the notification after 10 seconds with animation
setTimeout(() => {
notificationElement.fadeOut(function() {
$(this).remove();
});
// Update the notification as seen
$.post("<?php echo USERAREA_PATH; ?>include/checkNotifications.php", {
method: 'update_notification',
idreports: notification.idreports
}, function(data) {
console.log(data);
});
}, 10000);
});
});
}, 11000);
setInterval(() => {
getNotifications();
}, 10000);
function getNotifications() {
$.post("<?php echo USERAREA_PATH; ?>include/getNotifications.php", {
method: 'getNotifications'
}, function(data) {
unseen_notifications =data.unseen_notifications;
$("#notificationQuantity").text(unseen_notifications.length);
$("#notificationQuantityDropDown").text(unseen_notifications.length);
$("#notificationItemDiv").empty();
for(var i=0; i<data.unseen_notifications.length; i++){
$("#notificationItemDiv").append(`
<a href="javascript:void(0);" class="dropdown-item notify-item">
<div class="notify-icon bg-primary"><i class="mdi mdi-cart-outline"></i></div>
<p class="notify-details"><b>${unseen_notifications[i]['title']}</b><small class="text-muted">${unseen_notifications[i]['description']}</small></p>
</a>
`);
}
});
}
</script>
<div class="notification-space" id="mainNotificationDiv">
<!-- Notifications will be displayed here -->
</div>
<script src="<?php echo USERAREA_PATH;?>assets/js/popper.min.js"></script>
<script src="<?php echo USERAREA_PATH;?>assets/js/bootstrap.min.js"></script>
<script src="../assets/js/jquery.slimscroll.js"></script>
<!-- App js -->
<script src="<?php echo USERAREA_PATH;?>assets/js/app.js"></script>
<script src="<?php echo USERAREA_PATH;?>assets/plugins/alertify/js/alertify.js"></script>
<!-- Top Bar End -->