BBnepal-Accounts/application/views/student/my-notifications.php
Sampanna Rimal 9cd05ef3cb commitall
2024-07-10 18:28:19 +05:45

168 lines
6.0 KiB
PHP

<style type="text/css">
.w-95 {
width: 95%;
}
</style>
<main class="common_margin" id="main">
<div class="main-inner-content w-95">
<div class="class-head">
<h3 class="common-heading">Notification</h3>
</div>
<div class=" row cal-assinment-new mb-5" style="margin: 0;">
<div class="po-calendar d-inline mt-3 mb-3" style="width: 30%;">
<input type="text" class="form-control" placeholder="Select a date" id="nepali-datepicker">
<i class="fas fa-calendar-alt cal-icon"></i>
</div>
<p class="mb-2">Note : To view different months notification, please select the required month and any day</p>
<hr>
</div>
<div class="noti-wrap-sec">
<div class="noti-wrap-sec-left" id="notifications-container">
<?php if(isset($result)) {?>
<?php foreach ($result as $key => $value) {
$originalDate = $result[$key]['created_at'];
$newDate = date("d-m-Y", strtotime($originalDate));
$newTime = date("h:i", strtotime($originalDate));
if($key == 0) {
echo '<div class="content-exam-box-one notif-active">';
} else {
echo '<div class="content-exam-box-one">';
}
?>
<div class="content-box-one-inner">
<div class="content-right-side">
<h6 class="exs-notif-title"><?php echo $result[$key]['notification_title']?></h6>
</div>
</div>
<div class="content-mid-text">
<p class="exs-notif-desc"><?php echo substr($result[$key]['description'], 0, 90)?></p>
</div>
<div class="content-last-sec">
<li><b>Date : <span class="exs-notif-date"><?php echo $newDate ?></span></b></li>
<li><b>Time : <span class="exs-notif-time"><?php echo $newTime ?></span></b></li>
<li><input type="button" value="View details" onClick="displaySelectedNotification(event, <?php echo $result[$key]['notification_id']?>)" class="view-detail-notify"></li>
</div>
</div>
<?php }
} else {
echo '<p> There are no notifications for this month </p>';
}?>
</div>
<div class="noti-wrap-sec-right">
<div class="notif_content">
<?php if(isset($result)) { ?>
<div class="noti-wrap-sec-right-inner">
<?php
$originalDate = $result[0]['created_at'];
$newDate = date("d-m-Y", strtotime($originalDate));
$newTime = date("h:i", strtotime($originalDate));
?>
<p class="dis-notif-title"><?php echo $result[0]['notification_title']?></p>
<p class="dis-notif-datetime"><?php echo $newDate ?>, <?php echo $newTime ?></p>
</div>
<div class="noti-para-sec">
<p class="dis-notif-desc"><?php echo $result[0]['description']?></p>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
</main>
<script>
// Notification Module
$('#nepali-datepicker').nepaliDatePicker({
language : 'english',
ndpYear: true,
ndpMonth: true,
ndpYearCount: 10,
onChange: function(data) {
console.log(typeof data.object.month)
let month = data.object.month;
let YM = data.object.year + '-' + month;
monthNotification(YM);
}
});
const monthNotification = function(date) {
let nContainer = $('#notifications-container');
let dateArr = JSON.stringify(date.split('-'));
$.ajax({
url : 'ajax_displayNotificationByDate',
data : {dateArr : dateArr},
type : 'POST',
async : false,
success: function(data){
let result = JSON.parse(data);
if(result == 'failed') {
nContainer.empty();
nContainer.append('<p> You have no Notification for this month </p>');
} else {
nContainer.empty();
$.each(result, function(iresultndex, value) {
nContainer.append(value);
});
}
}
});
}
const displaySelectedNotification = function(e, id) {
$('.content-exam-box-one').removeClass('notif-active');
e = e || window.event;
var target = e.srcElement || e.target;
while (target && target.className !== "content-exam-box-one") {
target = target.parentNode;
}
target.classList.add('notif-active');
let notifDesc = '';
$.ajax({
url : 'ajax_getNotificationDescription',
data : {notifid : id},
type : 'POST',
async : false,
success: function(data){
let result = JSON.parse(data);
if(result == 'failed') {
let notifDesc = target.querySelector('.exs-notif-desc').textContent;
} else {
notifDesc = result['description'];
}
}
});
let notifTitle = target.querySelector('.exs-notif-title').textContent;
let notifTime = target.querySelector('.exs-notif-time').textContent;
let notifDate = target.querySelector('.exs-notif-date').textContent;
$('.dis-notif-title').text(notifTitle);
$('.dis-notif-desc').text(notifDesc);
$('.dis-notif-datetime').text(notifDate + ', ' + notifTime);
}
</script>