921 lines
35 KiB
PHP
921 lines
35 KiB
PHP
|
<?php include('techsyn_header.php');
|
||
|
|
?>
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="css/wizard.css">
|
||
|
|
<script src="js/Chart.min.js"></script>
|
||
|
|
<style type="text/css">
|
||
|
|
.hidden-radio {
|
||
|
|
position: absolute;
|
||
|
|
top: 11px;
|
||
|
|
left: 27px;
|
||
|
|
width: 60px;
|
||
|
|
height: 60px;
|
||
|
|
border-radius: 100%;
|
||
|
|
background: #fff;
|
||
|
|
opacity: 0;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<?php if ($_SESSION['RoleId'] == 7) {
|
||
|
|
echo "<script>window.location.replace('emp_details.php')</script>";
|
||
|
|
} ?>
|
||
|
|
<script src="js/Chart.min.js"></script>
|
||
|
|
|
||
|
|
<!-- Main Content Container for side bar and body-->
|
||
|
|
<div class="main-container ace-save-state" id="main-container">
|
||
|
|
<script type="text/javascript">
|
||
|
|
try {
|
||
|
|
ace.settings.loadState('main-container')
|
||
|
|
} catch (e) {}
|
||
|
|
</script>
|
||
|
|
<?php include('techsyn_sidebar.php'); ?>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!--breadcrumb-->
|
||
|
|
|
||
|
|
<div class="main-content">
|
||
|
|
<div class="main-content-inner">
|
||
|
|
<div class="breadcrumbs ace-save-state" id="breadcrumbs">
|
||
|
|
<ul class="breadcrumb">
|
||
|
|
<li><i class="ace-icon fa fa-home home-icon"></i> <a href="#">Home</a></li>
|
||
|
|
<li class="active">Dashboard</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<!-- End of breadcrumb -->
|
||
|
|
|
||
|
|
|
||
|
|
<div class="content">
|
||
|
|
<!-- Start new dashboard view -->
|
||
|
|
<div class="container-fluid">
|
||
|
|
|
||
|
|
<form id="doctor_form">
|
||
|
|
<div class="row" style="margin-top: 10px;">
|
||
|
|
|
||
|
|
<div class="col-sm-12 wizard-card" style="margin-left: 20px;">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col-sm-3">
|
||
|
|
<div class="choice" data-toggle="wizard-radio" rel="tooltip" title="" data-original-title="progarm">
|
||
|
|
<input type="radio" name="task" value="batches">
|
||
|
|
<div class="icon bg-aqua">
|
||
|
|
<i class="fa fa-group"></i>
|
||
|
|
</div>
|
||
|
|
<h6>
|
||
|
|
<span class="info-box-text">Batch Enrollment</span> <span class="info-box-number">
|
||
|
|
<!-- <?php getPending_program(); ?> -->
|
||
|
|
<?php echo getCountForToday('training_batch_enrollment', 'batch_start_date', 'status', 'VOH'); ?>
|
||
|
|
<small>Approval Pending</small>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-sm-3">
|
||
|
|
<div class="choice" data-toggle="wizard-radio" rel="tooltip" title="" data-original-title="attendance">
|
||
|
|
<input type="radio" name="task" value="attendance">
|
||
|
|
<div class="icon bg-red">
|
||
|
|
<i class="fa fa-calendar"></i>
|
||
|
|
</div>
|
||
|
|
<h6>
|
||
|
|
<span class="info-box-text">Daily Attendance</span> <span class="info-box-number">
|
||
|
|
<?php echo getCountForToday('attendance_batch', 'attendence_date', '', ''); ?>
|
||
|
|
<small>Completed</small>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-sm-3">
|
||
|
|
<div class="choice" data-toggle="wizard-radio" rel="tooltip" title="" data-original-title="fees">
|
||
|
|
<input type="radio" name="task" value="fees">
|
||
|
|
<div class="icon bg-yellow">
|
||
|
|
<i class="fa fa-money"></i>
|
||
|
|
</div>
|
||
|
|
<h6>
|
||
|
|
<span class="info-box-text">Fees</span> <span class="info-box-number">
|
||
|
|
<?php echo getCountForToday('batch_fee_schedule', 'last_modified_by', '', ''); ?>
|
||
|
|
<small>Schedule Created</small>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-sm-3">
|
||
|
|
<div class="choice" data-toggle="wizard-radio" rel="tooltip" title="" data-original-title="indent">
|
||
|
|
<input type="radio" name="task" value="indent">
|
||
|
|
<div class="icon bg-red">
|
||
|
|
<i class="fa fa-shopping-cart"></i>
|
||
|
|
</div>
|
||
|
|
<h6>
|
||
|
|
<span class="info-box-text">Indent</span> <span class="info-box-number">
|
||
|
|
<?php echo getIndentCountvti(); ?>
|
||
|
|
<small>Indent</small>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</form>
|
||
|
|
<p style="margin-top: 17%;"></p>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Charts start here -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End new dashboard view -->
|
||
|
|
|
||
|
|
</div> <!-- /.content -->
|
||
|
|
</div> <!-- /.main-content-inner -->
|
||
|
|
</div> <!-- /.main-content -->
|
||
|
|
</div> <!-- /.main-container ace-save-state -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div class="main-container ace-save-state" id="main-container">
|
||
|
|
<script type="text/javascript">
|
||
|
|
try {
|
||
|
|
ace.settings.loadState('main-container')
|
||
|
|
} catch (e) {}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="main-content" style="margin-left: 65px;">
|
||
|
|
<div class="content">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<form id="filterForm">
|
||
|
|
<div class="row mt-3">
|
||
|
|
<div class="col-md-12 wizard-card">
|
||
|
|
<div class="row g-3">
|
||
|
|
|
||
|
|
<div class="col-md-3">
|
||
|
|
<label for="StartDate" class="form-label">Start Date</label>
|
||
|
|
<input type="date" name="StartDate" class="form-control" id="StartDate">
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3">
|
||
|
|
<label for="EndDate" class="form-label">End Date</label>
|
||
|
|
<input type="date" name="EndDate" class="form-control" id="EndDate">
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3">
|
||
|
|
<label for="location" class="form-label">Location</label>
|
||
|
|
<select name="location" class="form-control select2" id="location">
|
||
|
|
<option disabled selected>Please Select Option</option>
|
||
|
|
<?php echo generateOption('ohc_type', 'ohc_type_name', 'ohc_type_id', '', ''); ?>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3 d-flex align-items-end justify-content-end">
|
||
|
|
<button type="button" id="searchBtn" class="btn btn-primary w-50">Search</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<?php $bene_count = getTrainedBeneficiaryPercentage($conn); ?>
|
||
|
|
|
||
|
|
<div class="main-content">
|
||
|
|
<div class="content">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="row" style="margin-top: 10px; margin-right: 35px;">
|
||
|
|
<div class="col-sm-12 wizard-card" style="margin-left: 65px;">
|
||
|
|
<div id="resultContainer" class="col-sm-3" style="padding: 15px; border-radius: 8px; background: #f9f9f9; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||
|
|
<!-- Result will be loaded here dynamically -->
|
||
|
|
<div style="font-size: 16px; font-weight: bold; margin-bottom: 8px; color: #1E88E5;">
|
||
|
|
TRAINED <?php echo $bene_count['trained_beneficiaries']; ?>
|
||
|
|
</div>
|
||
|
|
<div style="background: #eaeaea; border-radius: 5px; height: 12px; position: relative; width: 100%;">
|
||
|
|
<div style="background: #1E88E5; width: <?php echo $bene_count['percentage']; ?>%; height: 100%; border-radius: 5px;"></div>
|
||
|
|
</div>
|
||
|
|
<div style="font-size: 18px; margin-top: 8px; color: #333;">
|
||
|
|
<?php echo $bene_count['percentage']; ?>%
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<?php $retained_count = getRetainedBeneficiaryPercentage($conn, isset($filters)); ?>
|
||
|
|
<div id="retained_beneficiaries_aa" class="col-sm-3" style="padding: 15px; border-radius: 8px; background: #f9f9f9; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||
|
|
<div style="font-size: 16px; font-weight: bold; margin-bottom: 8px; color: #4CAF50;">
|
||
|
|
RETAINED <?php echo $retained_count['retained_beneficiaries']; ?>
|
||
|
|
</div>
|
||
|
|
<div style="background: #eaeaea; border-radius: 5px; height: 12px; position: relative; width: 100%;">
|
||
|
|
<div style="background: #4CAF50; width: <?php echo $retained_count['percentage']; ?>%; height: 100%; border-radius: 5px;"></div>
|
||
|
|
</div>
|
||
|
|
<div style="font-size: 18px; margin-top: 8px; color: #333;">
|
||
|
|
<?php echo $retained_count['percentage']; ?>%
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<?php $placedResult = getPlacedBeneficiaryPercentage($conn); ?>
|
||
|
|
<div id="placed_beneficiaries" class="col-sm-3" style="padding: 15px; border-radius: 8px; background: #f9f9f9; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||
|
|
<div style="font-size: 16px; font-weight: bold; margin-bottom: 8px; color: #4CAF50;">PLACED <?php echo $placedResult['placed_beneficiaries']; ?></div>
|
||
|
|
<div style="background: #eaeaea; border-radius: 5px; height: 12px; position: relative; width: 100%;">
|
||
|
|
<div style="background: #4CAF50; width: <?php echo $placedResult['percentage']; ?>%; height: 100%; border-radius: 5px;"></div>
|
||
|
|
</div>
|
||
|
|
<div style="font-size: 18px; margin-top: 8px; color: #333;"><?php echo $placedResult['percentage']; ?>%</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<?php $dropout_count = getDropoutBeneficiaryPercentage($conn); ?>
|
||
|
|
<div id="dropout_beneficiaries" class="col-sm-3" style="padding: 15px; border-radius: 8px; background: #f9f9f9; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||
|
|
<div style="font-size: 16px; font-weight: bold; margin-bottom: 8px; color: #E53935;">
|
||
|
|
DROPOUT <?php echo $dropout_count['dropout_beneficiaries']; ?>
|
||
|
|
</div>
|
||
|
|
<div style="background: #eaeaea; border-radius: 5px; height: 12px; position: relative; width: 100%;">
|
||
|
|
<div style="background: #E53935; width: <?php echo $dropout_count['percentage']; ?>%; height: 100%; border-radius: 5px;"></div>
|
||
|
|
</div>
|
||
|
|
<div style="font-size: 18px; margin-top: 8px; color: #333;">
|
||
|
|
<?php echo $dropout_count['percentage']; ?>%
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="row" style="margin-left: 53px; margin-top: 10px;">
|
||
|
|
<!-- Batches Chart -->
|
||
|
|
<div class="col-sm-6" style="text-align: center;">
|
||
|
|
<div class="box box-success" style="display: inline-block; width: 100%;">
|
||
|
|
<!-- Chart container -->
|
||
|
|
<div style="position: relative; height: 200px; width: 100%;">
|
||
|
|
<canvas id="batchChart"></canvas>
|
||
|
|
</div>
|
||
|
|
<!-- Centered Title -->
|
||
|
|
<div style="text-align: center; margin-top: 10px; font-weight: bold; font-size: 15px;">Batches</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Enrollments Chart -->
|
||
|
|
<div class="col-sm-6" style="text-align: center;">
|
||
|
|
<div class="box box-info" style="display: inline-block; width: 100%;">
|
||
|
|
<!-- Chart container -->
|
||
|
|
<div style="position: relative; height: 200px; width: 100%;">
|
||
|
|
<canvas id="enrollmentChart"></canvas>
|
||
|
|
</div>
|
||
|
|
<!-- Centered Title -->
|
||
|
|
<div style="text-align: center; margin-top: 10px; font-weight: bold; font-size: 15px;">Enrollments</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<p style="margin-top: 17%;"></p>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Charts start here -->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<!-- End new dashboard view -->
|
||
|
|
|
||
|
|
</div> <!-- /.content -->
|
||
|
|
</div> <!-- /.main-content-inner -->
|
||
|
|
</div> <!-- /.main-content -->
|
||
|
|
</div> <!-- /.main-container ace-save-state -->
|
||
|
|
|
||
|
|
<?php include('techsyn_footer.php'); ?>
|
||
|
|
<script>
|
||
|
|
$(document).ready(function() {
|
||
|
|
$('.select2').select2();
|
||
|
|
|
||
|
|
$('#searchBtn').click(function() {
|
||
|
|
const formData = $('#filterForm').serialize();
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
url: 'fetch_beneficiary_percentage.php',
|
||
|
|
type: 'POST',
|
||
|
|
data: formData,
|
||
|
|
success: function(response) {
|
||
|
|
$('#resultContainer').html(response);
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
alert('Error fetching data. Please try again.');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
url: 'fetch_retained_beneficiary_percentage.php',
|
||
|
|
type: 'POST',
|
||
|
|
data: formData,
|
||
|
|
success: function(response) {
|
||
|
|
$('#retained_beneficiaries_aa').html(response);
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
alert('Error fetching data. Please try again.');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
url: 'fetch_placed_beneficiary_percentage.php',
|
||
|
|
type: 'POST',
|
||
|
|
data: formData,
|
||
|
|
success: function(response) {
|
||
|
|
$('#placed_beneficiaries').html(response);
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
alert('Error fetching data. Please try again.');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
url: 'fetch_dropout_beneficiary_percentage.php',
|
||
|
|
type: 'POST',
|
||
|
|
data: formData,
|
||
|
|
success: function(response) {
|
||
|
|
$('#dropout_beneficiaries').html(response);
|
||
|
|
},
|
||
|
|
error: function() {
|
||
|
|
alert('Error fetching data. Please try again.');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(document).ready(function() {
|
||
|
|
|
||
|
|
$(".choice").on("click", function() {
|
||
|
|
|
||
|
|
var v = $(this).closest("div").find("input[name='task']").attr("checked", "checked");
|
||
|
|
|
||
|
|
task = $(this).closest("div").find("input[name='task']").val()
|
||
|
|
|
||
|
|
$("#doctor_form").attr('method', 'POST');
|
||
|
|
|
||
|
|
if (task == 'batches') {
|
||
|
|
|
||
|
|
$("#doctor_form").attr('action', 'training_batch_enrollment_hod.php');
|
||
|
|
|
||
|
|
}
|
||
|
|
if (task == 'attendance') {
|
||
|
|
|
||
|
|
$("#doctor_form").attr('action', 'attendence_list.php');
|
||
|
|
|
||
|
|
}
|
||
|
|
if (task == 'fees') {
|
||
|
|
|
||
|
|
$("#doctor_form").attr('action', 'batch_fee_schedule.php');
|
||
|
|
|
||
|
|
}
|
||
|
|
if (task == 'indent1') {
|
||
|
|
|
||
|
|
$("#doctor_form").attr('action', 'approval_indent.php');
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if (task == 'opd') {
|
||
|
|
|
||
|
|
$("#doctor_form").attr('action', 'pending_patient_list.php');
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
if (task == 'injury') {
|
||
|
|
|
||
|
|
$("#doctor_form").attr('action', 'pending_injury_list.php');
|
||
|
|
|
||
|
|
} else if (task == 'visitor_opd') {
|
||
|
|
|
||
|
|
$("#doctor_form").attr('action', 'visitor_details.php');
|
||
|
|
|
||
|
|
} else if (task == 'pme') {
|
||
|
|
|
||
|
|
$("#doctor_form").attr('action', 'medical_examination_list.php');
|
||
|
|
|
||
|
|
} else if (task == 'sickness') {
|
||
|
|
|
||
|
|
$("#doctor_form").attr('action', 'pending_fitness_list.php');
|
||
|
|
|
||
|
|
} else if (task == 'ffi') {
|
||
|
|
|
||
|
|
$("#doctor_form").attr('action', 'pending_infection_list.php');
|
||
|
|
|
||
|
|
} else if (task == 'chs') {
|
||
|
|
|
||
|
|
$("#doctor_form").attr('action', 'pending_chs_list.php');
|
||
|
|
|
||
|
|
} else if (task == 'khs') {
|
||
|
|
|
||
|
|
$("#doctor_form").attr('action', 'pending_chs_list.php');
|
||
|
|
|
||
|
|
} else if (task == 'indent') {
|
||
|
|
$("#doctor_form").attr('action', 'approval_indent.php');
|
||
|
|
|
||
|
|
} else if (task == 'progarm') {
|
||
|
|
|
||
|
|
$("#doctor_form").attr('action', 'csr_pro_list.php');
|
||
|
|
|
||
|
|
|
||
|
|
} else if (task == 'progarm_act') {
|
||
|
|
|
||
|
|
$("#doctor_form").attr('action', 'csr_pro_activity_list.php');
|
||
|
|
|
||
|
|
} else if (task == 'dlf') {
|
||
|
|
|
||
|
|
$("#doctor_form").attr('action', 'pending_dlf_list.php');
|
||
|
|
|
||
|
|
} else if (task == 'course_change') {
|
||
|
|
$("#doctor_form").attr('action', 'course_change.php');
|
||
|
|
}
|
||
|
|
$("#doctor_form").submit();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
<?php $batchCounts = getBatchCounts($conn); ?>
|
||
|
|
const batchCounts = <?php echo json_encode($batchCounts); ?>;
|
||
|
|
|
||
|
|
// Batches Chart Data
|
||
|
|
const batchData = {
|
||
|
|
labels: ['On Going', 'Completed'],
|
||
|
|
datasets: [{
|
||
|
|
data: [batchCounts.ongoing, batchCounts.completed],
|
||
|
|
backgroundColor: ['#1E88E5', '#FFC107'],
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
const batchConfig = {
|
||
|
|
type: 'doughnut',
|
||
|
|
data: batchData,
|
||
|
|
options: {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
plugins: {
|
||
|
|
legend: {
|
||
|
|
display: true,
|
||
|
|
position: 'top',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
const batchChart = new Chart(
|
||
|
|
document.getElementById('batchChart'),
|
||
|
|
batchConfig
|
||
|
|
);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<?php $enrollmentCounts = getEnrollmentCounts($conn); ?>
|
||
|
|
const enrollmentCounts = <?php echo json_encode($enrollmentCounts); ?>;
|
||
|
|
|
||
|
|
|
||
|
|
const enrollmentData = {
|
||
|
|
labels: ['Enrolled', 'On Going'],
|
||
|
|
datasets: [{
|
||
|
|
data: [enrollmentCounts.enrolled, enrollmentCounts.ongoing],
|
||
|
|
backgroundColor: ['#4CAF50', '#FF9800'],
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
const enrollmentConfig = {
|
||
|
|
type: 'doughnut',
|
||
|
|
data: enrollmentData,
|
||
|
|
options: {
|
||
|
|
responsive: true,
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
plugins: {
|
||
|
|
legend: {
|
||
|
|
display: true,
|
||
|
|
position: 'top',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
const enrollmentChart = new Chart(
|
||
|
|
document.getElementById('enrollmentChart'),
|
||
|
|
enrollmentConfig
|
||
|
|
);
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
$(document).ready(function() {
|
||
|
|
$(".choice").on("click", function() {
|
||
|
|
var v = $(this).closest("div").find("input[name='task']").attr("checked", "checked");
|
||
|
|
if (v.val() == 'visitor_opd') {
|
||
|
|
$("#reception_form").attr('action', 'visitor_add_select_patient.php');
|
||
|
|
} else {
|
||
|
|
$("#reception_form").attr('action', 'add_select_patient.php');
|
||
|
|
}
|
||
|
|
$("#reception_form").attr('method', 'POST');
|
||
|
|
|
||
|
|
$("#reception_form").submit();
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
url: 'covid_case_weekly_trends.php',
|
||
|
|
data: $("#reception_form").serialize(),
|
||
|
|
dataType: 'json',
|
||
|
|
success: function(data) {
|
||
|
|
|
||
|
|
if (data != null) {
|
||
|
|
var labels = [];
|
||
|
|
var percentage_bmi_total_array = [];
|
||
|
|
var total_emp = 0;
|
||
|
|
var total_emp_sum = 0;
|
||
|
|
var bmi_total_sum = 0;
|
||
|
|
var percentage_bmi_total = 0.0;
|
||
|
|
// @var confirm_case - get the total confirm case
|
||
|
|
// @var quarantine_case - get the total quarantine case
|
||
|
|
// @var discharge - get the total discharge patient
|
||
|
|
var confirm_case = 0;
|
||
|
|
var quarantine_case = 0;
|
||
|
|
var discharge = 0;
|
||
|
|
|
||
|
|
if (Object.keys(data).length > 0) {
|
||
|
|
for (var i = 0; i < Object.keys(data).length; i++) {
|
||
|
|
total_emp = parseInt(data[i].week);
|
||
|
|
total_emp_sum = total_emp_sum + total_emp;
|
||
|
|
confirm_case += parseInt(data[i].confirm_case);
|
||
|
|
quarantine_case += parseInt(data[i].quarantine_case);
|
||
|
|
discharge += parseInt(data[i].discharge);
|
||
|
|
|
||
|
|
|
||
|
|
var bmi_total = parseInt(data[i].todays_case);
|
||
|
|
bmi_total_sum += bmi_total;
|
||
|
|
var j = 0;
|
||
|
|
|
||
|
|
labels[i] = 'Week:' + data[i].week;
|
||
|
|
if (total_emp != 0 && total_emp != null) {
|
||
|
|
percentage_bmi_total = (bmi_total / data[i].total_active) * 100;
|
||
|
|
|
||
|
|
// if(data[i].confirm_case == ''){
|
||
|
|
// percentage_bmi_total_array.push([0, data[i].quarantine_case, data[i].discharge]);
|
||
|
|
// } else if(data[i].quarantine_case == ''){
|
||
|
|
// percentage_bmi_total_array.push([data[i].confirm_case, 0, data[i].discharge]);
|
||
|
|
// }else {
|
||
|
|
// }
|
||
|
|
percentage_bmi_total_array.push([data[i].confirm_case, data[i]
|
||
|
|
.quarantine_case, data[i].discharge
|
||
|
|
]);
|
||
|
|
|
||
|
|
} else {
|
||
|
|
percentage_bmi_total = "Not Available";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var total_percentage = "";
|
||
|
|
if (total_emp_sum == 0) {
|
||
|
|
total_percentage = "Not Available";
|
||
|
|
} else {
|
||
|
|
total_percentage = (bmi_total_sum / total_emp_sum) * 100;
|
||
|
|
}
|
||
|
|
|
||
|
|
var content1 =
|
||
|
|
"<canvas id=\"chart3\" style=\"display: block; width: 500px; height: 250px;\" class=\"chartjs-render-monitor\"></canvas>";
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
$("#covid_weekly_report").html(content1);
|
||
|
|
var header = "Covid Case Weekly Trends";
|
||
|
|
percentage_bmi_total_array[Object.keys(data).length] = ['Confirmed Case',
|
||
|
|
'Quarantine Case', 'Discharged'
|
||
|
|
]
|
||
|
|
// console.log('array length in weekly trends: '+percentage_bmi_total_array[Object.keys(data).length]+'lenth '+Object.keys(data).length);
|
||
|
|
prepareChart('line', percentage_bmi_total_array, labels, header);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function(data) {}
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
function printDashboard() {
|
||
|
|
html2canvas(document.getElementById("dashboard"), {
|
||
|
|
onrendered: function(canvas) {
|
||
|
|
var img = canvas.toDataURL(); //image data of canvas
|
||
|
|
// var doc = new jsPDF('p','pt','a2');
|
||
|
|
var doc = new jsPDF('l', 'mm', [300, 350]);
|
||
|
|
doc.addImage(img, 10, 10);
|
||
|
|
doc.save('graph.pdf');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function prepareChart(chartType, chartData, labels, header) {
|
||
|
|
|
||
|
|
var color = Chart.helpers.color;
|
||
|
|
Chart.defaults.global.pointHitDetectionRadius = 1;
|
||
|
|
var customTooltips = function(tooltip) {
|
||
|
|
|
||
|
|
// Tooltip Element
|
||
|
|
var tooltipEl = document.getElementById('chartjs-tooltip');
|
||
|
|
|
||
|
|
if (!tooltipEl) {
|
||
|
|
tooltipEl = document.createElement('div');
|
||
|
|
tooltipEl.id = 'chartjs-tooltip';
|
||
|
|
tooltipEl.innerHTML = '<table></table>';
|
||
|
|
this._chart.canvas.parentNode.appendChild(tooltipEl);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Hide if no tooltip
|
||
|
|
if (tooltip.opacity === 0) {
|
||
|
|
tooltipEl.style.opacity = 0;
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Set caret Position
|
||
|
|
tooltipEl.classList.remove('above', 'below', 'no-transform');
|
||
|
|
if (tooltip.yAlign) {
|
||
|
|
tooltipEl.classList.add(tooltip.yAlign);
|
||
|
|
} else {
|
||
|
|
tooltipEl.classList.add('no-transform');
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function getBody(bodyItem) {
|
||
|
|
return bodyItem.lines;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// Set Text
|
||
|
|
if (tooltip.body) {
|
||
|
|
var titleLines = tooltip.title || [];
|
||
|
|
var bodyLines = tooltip.body.map(getBody);
|
||
|
|
var innerHtml = '<thead>';
|
||
|
|
|
||
|
|
titleLines.forEach(function(title) {
|
||
|
|
innerHtml += '<tr><th>' + title + '</th></tr>';
|
||
|
|
});
|
||
|
|
|
||
|
|
innerHtml += '</thead><tbody>';
|
||
|
|
|
||
|
|
bodyLines.forEach(function(body, i) {
|
||
|
|
var colors = tooltip.labelColors[i];
|
||
|
|
var style = 'background:' + colors.backgroundColor;
|
||
|
|
style += '; border-color:' + colors.borderColor;
|
||
|
|
style += '; border-width: 2px';
|
||
|
|
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
|
||
|
|
innerHtml += '<tr><td>' + span + body + '</td></tr>';
|
||
|
|
});
|
||
|
|
|
||
|
|
innerHtml += '</tbody>';
|
||
|
|
var tableRoot = tooltipEl.querySelector('table');
|
||
|
|
tableRoot.innerHTML = innerHtml;
|
||
|
|
}
|
||
|
|
|
||
|
|
var positionY = this._chart.canvas.offsetTop;
|
||
|
|
var positionX = this._chart.canvas.offsetLeft;
|
||
|
|
|
||
|
|
// Display, position, and set styles for font
|
||
|
|
tooltipEl.style.opacity = 1;
|
||
|
|
tooltipEl.style.left = positionX + tooltip.caretX + 'px';
|
||
|
|
tooltipEl.style.top = positionY + tooltip.caretY + 'px';
|
||
|
|
tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
|
||
|
|
tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
|
||
|
|
tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
|
||
|
|
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
|
||
|
|
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
if (chartType == 'bar') {
|
||
|
|
var data = chartData;
|
||
|
|
var barChartData = {
|
||
|
|
labels: labels,
|
||
|
|
datasets: [{
|
||
|
|
label: header,
|
||
|
|
backgroundColor: window.chartColors.green,
|
||
|
|
borderColor: window.chartColors.white,
|
||
|
|
borderWidth: 1,
|
||
|
|
data: chartData,
|
||
|
|
hoverOffset: 4
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
} else if (chartType == 'doughnut') {
|
||
|
|
var data = chartData;
|
||
|
|
var barChartData = {
|
||
|
|
labels: labels,
|
||
|
|
datasets: [{
|
||
|
|
label: header,
|
||
|
|
backgroundColor: [
|
||
|
|
'rgb(255, 99, 132)',
|
||
|
|
'rgb(54, 162, 235)',
|
||
|
|
'rgb(255, 205, 86)',
|
||
|
|
'#003f5c',
|
||
|
|
'58508d',
|
||
|
|
'#2f4b7c',
|
||
|
|
'#665191',
|
||
|
|
'#a05195',
|
||
|
|
'#d45087',
|
||
|
|
'#f95d6a',
|
||
|
|
'#ff7c43',
|
||
|
|
'#ffa600',
|
||
|
|
],
|
||
|
|
borderColor: window.chartColors.white,
|
||
|
|
borderWidth: 1,
|
||
|
|
data: chartData,
|
||
|
|
hoverOffset: 4
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
} else if (chartType == 'line') {
|
||
|
|
var data = chartData;
|
||
|
|
console.log('chart data: ' + chartData[0]);
|
||
|
|
// get the dataset label names count
|
||
|
|
var dataset_labels_count = chartData[(chartData.length) - 1].length;
|
||
|
|
var lc_data = [];
|
||
|
|
var lc_label = [];
|
||
|
|
var j = 0;
|
||
|
|
for (var i = 0; i < chartData.length; i++) {
|
||
|
|
for (var j = 0; j < dataset_labels_count; j++) {
|
||
|
|
lc_label[j] = chartData[i][j];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// for (var i = 0; i < dataset_labels_count; i++) {
|
||
|
|
// for(var j = 0; j < chartData.length; j++){
|
||
|
|
// console.log("chart Data: "+chartData[j][i]);
|
||
|
|
// lc_data[i][j] = chartData[j][i];
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
for (var i = 0; i < data.length - 1; i++) {
|
||
|
|
for (var j = 0; j < i; j++) {
|
||
|
|
const tmp = data[i][j];
|
||
|
|
data[i][j] = data[j][i];
|
||
|
|
data[j][i] = tmp;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
console.log('labels: ' + lc_label);
|
||
|
|
console.log('data: ' + data[1]);
|
||
|
|
|
||
|
|
const background_color = [
|
||
|
|
'rgb(255, 99, 132)',
|
||
|
|
'rgb(54, 162, 235)',
|
||
|
|
'rgb(255, 205, 86)',
|
||
|
|
'#003f5c',
|
||
|
|
'58508d',
|
||
|
|
'#2f4b7c',
|
||
|
|
'#665191',
|
||
|
|
'#a05195',
|
||
|
|
'#d45087',
|
||
|
|
'#f95d6a',
|
||
|
|
'#ff7c43',
|
||
|
|
'#ffa600',
|
||
|
|
];
|
||
|
|
|
||
|
|
var datasets_array = []
|
||
|
|
for (var j = 0; j < dataset_labels_count; j++) {
|
||
|
|
datasets_array.push({
|
||
|
|
label: lc_label[j],
|
||
|
|
data: data[j],
|
||
|
|
borderColor: background_color[j]
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
var barChartData = {
|
||
|
|
labels: labels,
|
||
|
|
datasets: datasets_array
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// if (chartType == 'line') {
|
||
|
|
// var ctx1 = document.getElementById("chart3").getContext("2d");
|
||
|
|
// chart = new Chart(ctx1, {
|
||
|
|
// type: chartType,
|
||
|
|
// data: barChartData,
|
||
|
|
// options: {
|
||
|
|
// title: {
|
||
|
|
// display: true,
|
||
|
|
// text: header,
|
||
|
|
// },
|
||
|
|
// tooltip: {
|
||
|
|
// callbacks: {
|
||
|
|
// label: function(context) {
|
||
|
|
// var label = context.dataset.label || '';
|
||
|
|
|
||
|
|
// if (label) {
|
||
|
|
// label += ': ';
|
||
|
|
// }
|
||
|
|
// if (context.parsed.y !== null) {
|
||
|
|
// label += new Intl.NumberFormat('en-US', {
|
||
|
|
// style: 'percent',
|
||
|
|
// currency: 'USD'
|
||
|
|
// }).format(context.parsed.y);
|
||
|
|
// }
|
||
|
|
// return label;
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// enabled: true,
|
||
|
|
// mode: 'index',
|
||
|
|
// position: 'nearest',
|
||
|
|
// custom: customTooltips
|
||
|
|
// },
|
||
|
|
// legend: {
|
||
|
|
// display: true,
|
||
|
|
// position: 'bottom',
|
||
|
|
// },
|
||
|
|
// scales: {
|
||
|
|
// yAxes: [{
|
||
|
|
// ticks: {
|
||
|
|
// precision: 0,
|
||
|
|
// // Include a dollar sign in the ticks
|
||
|
|
// callback: function(value, index, values) {
|
||
|
|
// return value + '';
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }]
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
// } else {
|
||
|
|
// var ctx1 = document.getElementById("chart3").getContext("2d");
|
||
|
|
// chart = new Chart(ctx1, {
|
||
|
|
// type: chartType,
|
||
|
|
// data: barChartData,
|
||
|
|
// options: {
|
||
|
|
// title: {
|
||
|
|
// display: true,
|
||
|
|
// text: header,
|
||
|
|
// },
|
||
|
|
// tooltip: {
|
||
|
|
// callbacks: {
|
||
|
|
// label: function(context) {
|
||
|
|
// var label = context.dataset.label || '';
|
||
|
|
|
||
|
|
// if (label) {
|
||
|
|
// label += ': ';
|
||
|
|
// }
|
||
|
|
// if (context.parsed.y !== null) {
|
||
|
|
// label += new Intl.NumberFormat('en-US', {
|
||
|
|
// style: 'percent',
|
||
|
|
// currency: 'USD'
|
||
|
|
// }).format(context.parsed.y);
|
||
|
|
// }
|
||
|
|
// return label;
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// enabled: true,
|
||
|
|
// mode: 'index',
|
||
|
|
// position: 'nearest',
|
||
|
|
// custom: customTooltips
|
||
|
|
// },
|
||
|
|
// legend: {
|
||
|
|
// display: true,
|
||
|
|
// position: 'bottom',
|
||
|
|
// },
|
||
|
|
// scales: {
|
||
|
|
// yAxes: [{
|
||
|
|
// ticks: {
|
||
|
|
// precision: 0,
|
||
|
|
// // Include a dollar sign in the ticks
|
||
|
|
// callback: function(value, index, values) {
|
||
|
|
// return value + '%';
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }]
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// });
|
||
|
|
// }
|
||
|
|
// chart.destroy();
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<script src="jspdf.min.js"></script>
|
||
|
|
<script src="html2canvas.min.js"></script>
|