ESH/hazard_risk_assesment_form.php
2024-10-23 18:28:06 +05:30

701 lines
33 KiB
PHP

<?php include('techsyn_header.php'); ?>
<!-- Main Content Container for sidebar 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">HIRA Form</li>
</ul>
</div>
<!-- End of breadcrumb -->
<div class="page-content">
<style>
.custom-header {
background: linear-gradient(to right, #4685BB); /* Gradient background color */
color: #fff; /* Text color */
padding: 0.3px;
margin-bottom: 10px;
border-top-left-radius: 5px; /* Top left border radius */
border-bottom-left-radius: 5px; /* Bottom left border radius */
border-top-right-radius: 5px; /* Top left border radius */
border-bottom-right-radius: 5px; /* Bottom left border radius */
}
</style>
<div class="container-fluid">
<div class="card flex-grow-1">
<div class="custom-header">
<h5 class="header blue bolder smaller" style=" margin-bottom: 3px; font-size: 20px;">
Hazard Observation Entry</h5>
</div>
<div class="card-body">
<form id="hazard_form" method="post">
<!-- box-body-->
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="ref_id" style="font-size: 14px; ">Reference ID</label>
<input class="form-control form-control-lg" name="ref_id" id="ref_id" placeholder="Enter Reference ID" style="font: size 15px;" required />
</div>
<div class="form-group">
<label for="activity_situation" style="font-size: 14px;">Activity/Situation</label>
<input class="form-control form-control-lg" name="activity_situation" id="activity_situation" placeholder="Enter Activity/Situation" style="font: size 15px;" required />
</div>
<div class="form-group">
<label for="hazard_category" style="font-size: 14px;">Hazard Category</label>
<select class="form-control form-control-lg" name="hazard_category" id="hazard_category" required>
<option value="">Select Hazard Category</option>
<?php
// Fetch hazard categories from database
$sql = "SELECT id, category_name FROM hazard_category";
$result = mysqli_query($conn, $sql);
if ($result && mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo "<option value='" . $row['category_name'] . "'>" . $row['category_name'] . "</option>";
}
}
?>
</select>
</div>
<div class="form-group">
<label for="identified_by" style="font-size: 14px;">Identified By</label>
<select class="form-control form-control-lg " name="identified_by" id="identified_by" required>
<option value="">Select Identified By</option>
<?php
// Fetch employees from database
$sql = "SELECT id, name FROM employees";
$result = mysqli_query($conn, $sql);
if ($result && mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo "<option value='" . $row['name'] . "'>" . $row['name'] . "</option>";
}
}
?>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="activity_type" style="font-size: 14px;">Activity Type</label>
<select class="form-control form-control-lg" name="activity_type" id="activity_type" required>
<option value="">Select Activity Type</option>
<?php
// Fetch activity types from database
$sql = "SELECT id, Name FROM activity_type";
$result = mysqli_query($conn, $sql);
if ($result && mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo "<option value='" . $row['Name'] . "'>" . $row['Name'] . "</option>";
}
}
?>
</select>
</div>
<div class="form-group">
<label for="hazard_identified" style="font-size: 14px;margin-top:5px;">Hazard Identified</label>
<select class="chosen-select form-control" multiple="" name="hazard_identified" id="hazard_identified" rows="3" data-placeholder="choose Hazard Indentified">
<option value=""> </option>
<?php echo generateOption('hazard_identified', 'hazard_description', 'hazard_description', '', '') ?>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="hazard_condition" style="font-size: 14px;">Hazard Condition</label>
<select class="form-control form-control-lg" name="hazard_condition" id="hazard_condition" required>
<option value="">Select Hazard Condition</option>
<?php
// Fetch hazard conditions from database
$sql = "SELECT id, Name FROM hazard_condition";
$result = mysqli_query($conn, $sql);
if ($result && mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo "<option value='" . $row['Name'] . "'>" . $row['Name'] . "</option>";
}
}
?>
</select>
</div>
<div class="form-group">
<label for="risk_exposure" style="font-size: 14px;margin-top:8px;">Risk Exposure</label>
<select class="chosen-select form-control" multiple="" name="risk_exposure" id="risk_exposure" rows="3" data-placeholder="choose Hazard Indentified">
<option value=""> </option>
<?php echo generateOption('risk_exposure', 'risk_description', 'risk_description', '', '') ?>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="date_time" style="font-size: 14px;margin-top:8px;">Date and Time</label>
<input type="datetime-local" style="font: size 15px;" class="form-control form-control-lg" name="date_time" id="date_time" required>
</div>
<div class="form-group">
<label for="department" style="font-size: 14px;margin-top:6px;">Department</label>
<select class="form-control form-control-lg" name="department" id="department" required>
<option value="">Select Department</option>
<?php
// Fetch departments from database
$sql = "SELECT id, name FROM departments";
$result = mysqli_query($conn, $sql);
if ($result && mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo "<option value='" . $row['name'] . "'>" . $row['name'] . "</option>";
}
}
?>
</select>
</div>
</div>
<div class="col-md-6 align">
<div class="form-group">
<label for="location" style="font-size: 14px;background-color: #f2f2f2; padding: 5px 10px; border-radius: 5px;">Location</label>
<input type="text" class="form-control form-control-lg " name="location" id="location" style="font: size 15px;" placeholder="Enter Location">
</div>
<div class="form-group">
<label for="hazard_identified" style="font-size: 14px;">Status</label>
<select class="form-control" name="status" id="status" readonly>
<option value="Pending" <?= $row['status'] == 'Pending' ? 'selected' : '' ?>>Pending</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="remarks" style="font-size: 14px;">Remarks</label>
<textarea class="form-control form-control-lg" name="remarks" style="font: size 15px;" id="remarks" rows="3" placeholder="Enter Remarks"></textarea>
</div>
</div>
</div>
<!-- End box-body-->
<!--box-footer-->
<div class="box-footer" style="text-align: center; margin-top: -10px">
<button class="btn btn-success new_button" id="new_button" type="reset" onclick="show_save_button();">
<i class="ace-icon fa fa-plus-square-o bigger-110"></i>
New
</button>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
<button class="btn btn-info save_button" id="save_button" type="button" onclick="validate();">
<i class="ace-icon fa fa-floppy-o bigger-110"></i>
Save
</button>
&nbsp; &nbsp; &nbsp;
<button class="btn btn-warning" type="reset">
<i class="ace-icon fa fa-undo bigger-110"></i>
Reset
</button>
</div>
<!--End box-footer-->
</form>
</div>
<div class="main-container ace-save-state" id="main-container">
<script type="text/javascript">
try {
ace.settings.loadState('main-container')
} catch (e) {}
</script>
</div><!-- /.main-content -->
<script type="text/javascript">
$(function() {
var w = screen.width * .90;
var h = 0;
h = (window.innerHeight - ($("#navbar").height() + $(".breadcrumbs").height())) * .75;
$("#flex1").flexigrid({
url: 'update_pending_hazard_form_script\.php?status=pending',
dataType: 'json',
colModel: [{
display: '',
name: '',
width: w * .1,
sortable: true,
align: 'left'
},
{
display: 'Sr',
name: 'id',
width: w * .04,
sortable: false,
align: 'left'
},
{
display: 'Reference ID',
name: 'ref_id',
width: w * .1,
sortable: false,
align: 'left'
},
{
display: 'Activity/Situation',
name: 'activity_situation',
width: w * .1,
sortable: true,
align: 'left'
},
{
display: 'Hazard Category',
name: 'hazard_category',
width: w * .1,
sortable: true,
align: 'left'
},
{
display: 'Hazard Identified',
name: 'hazard_identified',
width: w * .2,
sortable: true,
align: 'left'
},
{
display: 'Activity Type',
name: 'activity_type',
width: w * .1,
sortable: true,
align: 'left'
},
{
display: 'Hazard Condition',
name: 'hazard_condition',
width: w * .1,
sortable: true,
align: 'left'
},
{
display: 'Risk Exposure',
name: 'risk_exposure',
width: w * .2,
sortable: true,
align: 'left'
},
{
display: 'Date and Time',
name: 'date_time',
width: w * .1,
sortable: true,
align: 'left'
},
{
display: 'Department',
name: 'department',
width: w * .1,
sortable: true,
align: 'left'
},
{
display: 'Location',
name: 'location',
width: w * .1,
sortable: true,
align: 'left'
},
{
display: 'Identified By',
name: 'identified_by',
width: w * .1,
sortable: true,
align: 'left'
},
{
display: 'Remarks',
name: 'remarks',
width: w * .1,
sortable: true,
align: 'left'
},
{
display: 'Status',
name: 'status',
width: w * .1,
sortable: true,
align: 'left',
},
{
display: 'Reviewed by',
name: 'reviewed_by',
width: w * .1,
sortable: true,
align: 'left',
},
{
display: 'Reviewed Date Time',
name: 'reviewed_date_time',
width: w * .1,
sortable: true,
align: 'left',
},
{
display: 'Reviewed remarks',
name: 'review_remarks',
width: w * .1,
sortable: true,
align: 'left',
},
],
buttons: [
{
name: 'PDF',
bclass: 'print',
onpress: pdf
},
{
separator: true
},
{
name: 'Excel',
bclass: 'print_excel',
onpress: excel
},
{
separator: true
}
],
searchitems: [{
display: 'Hazard Category',
name: 'hazard_category',
isdefault: true
},
{
display: 'Identified By',
name: 'identified_by'
},
{
display: 'Location',
name: 'location'
},
],
sortname: "id",
sortorder: "asc",
usepager: true, //pagination
useRp: true,
rp: 50, //records per page
showTableToggleBtn: false, //toggle button for the whole table
resizable: true,
height: h,
singleSelect: true
});
});
function addDirect() {
hazard_identified.href = "add_hira.php";
}
function add() {
hazard_identified.href = "add_hira.php";
}
function delete_hazard(id) {
$("#flex_hira_id").val(id);
BootstrapDialog.confirm('Are you sure to delete the Hazard?', function(result) {
if (result) {
$.ajax({
url: 'delete_hazard_form.php',
type: "POST",
data: {
id: id
}, // Directly sending the id as POST data
success: function(data) {
if (data.indexOf("SUCCESS") != -1) {
BootstrapDialog.alert('Hazard Deleted Successfully.');
$("#flex1").flexReload();
} else {
BootstrapDialog.alert('Error Deleting Hazard');
}
},
error: function(data) {
BootstrapDialog.alert('Error Deleting Hazard');
}
});
}
});
}
function open_hazard(id, action) {
if (action == "V") {
$("#save_button").hide();
} else {
$("#save_button").show();
}
$.ajax({
url: 'select_hazard_form.php?id=' + id,
type: 'POST',
success: function(data) {
var data = $.parseJSON(data);
$("#id").val(data.id);
$("#ref_id").val(data.ref_id);
$("#activity_situation").val(data.activity_situation);
$("#hazard_category").val(data.hazard_category);
if (data.hazard_identified != null) {
var hazard_identified = data.hazard_identified
dataarray = hazard_identified.split(",");
$("#hazard_identified").val(dataarray);
$('#hazard_identified').trigger('chosen:updated');
}
$("#activity_type").val(data.activity_type);
$("#hazard_condition").val(data.hazard_condition);
if (data.risk_exposure != null) {
var risk_exposure = data.risk_exposure
dataarray = risk_exposure.split(",");
$("#risk_exposure").val(dataarray);
$('#risk_exposure').trigger('chosen:updated');
}
$("#date_time").val(data.date_time);
$("#department").val(data.department);
$("#location").val(data.location);
$("#identified_by").val(data.identified_by);
$("#remarks").val(data.remarks);
$("#status").val(data.status);
$("#reviewed_by").val(data.reviewed_by);
$("#reviewed_date_time").val(data.reviewed_date_time);
$("#reviewed_remarks").val(data.reviewed_remarks);
$('#modal-add-hazard').modal("show");
},
error: function(data) {
BootstrapDialog.alert('Error Populating Hazard');
return;
}
});
}
function pdf() {
window.open('hira_pdf.php', 'Report List');
}
function excel() {
window.open('hira_excel.php', 'Report List');
}
$("#new_button").on("click", function() {
$("id").val("");
});
</script>
<?php include('techsyn_footer.php'); ?>
</div>
<!-- End of page-content -->
</div>
</div>
</div>
<script>
// Function to generate a random alphanumeric reference ID
function generateReferenceId() {
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
let result = '';
for (let i = 0; i < 8; i++) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
return result;
}
// Set the generated reference ID into the input field
document.getElementById('ref_id').value = generateReferenceId();
</script>
<script>
// Get the current date and time
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
// Format the date and time as required by the datetime-local input
const currentDateTime = `${year}-${month}-${day}T${hours}:${minutes}`;
// Set the value of the input field to the current date and time
document.getElementById('date_time').value = currentDateTime;
</script>
<script>
$("#new_button").on("click", function() {
$("id").val("");
});
function validate() {
var ref_id = $('#ref_id').val();
if (ref_id == '') {
BootstrapDialog.alert('Please Enter Reference id');
return false;
}
var activity_situation = $('#activity_situation').val();
if (activity_situation == '') {
BootstrapDialog.alert('Please Enter Activity/Situation.');
return false;
}
var hazard_identified = $('#hazard_identified').val();
if (hazard_identified == '') {
BootstrapDialog.alert('Please Enter Hazard Identified.');
return false;
}
var activity_situation = $('#activity_situation').val();
if (activity_situation == '') {
BootstrapDialog.alert('Please Select Hazard Category.');
return false;
}
var activity_type = $('#activity_type').val();
if (activity_type == '') {
BootstrapDialog.alert('Please Select Activity Type.');
return false;
}
var hazard_condition = $('#hazard_condition').val();
if (hazard_condition == '') {
BootstrapDialog.alert('Please Select Hazard Condition.');
return false;
}
var date_time = $('#date_time').val();
if (date_time == '') {
BootstrapDialog.alert('Please Enter Date and Time.');
return false;
}
var department = $('#department').val();
if (department == '') {
BootstrapDialog.alert('Please Select Department.');
return false;
}
var hazard_identified = $('#hazard_identified').val();
if (hazard_identified == '') {
BootstrapDialog.alert('Please Enter Location.');
return false;
}
var identified_by = $('#identified_by').val();
if (identified_by == '') {
BootstrapDialog.alert('Please Select Identified By.');
return false;
}
save_hazard();
}
</script>
<style>
#modal-add-hazard {
overflow-y: scroll;
}
</style>
<?php include('techsyn_footer.php'); ?>
<script type="text/javascript">
function save_hazard() {
$.ajax({
url: 'save_hazard_form.php',
type: 'POST',
data: $("#hazard_form").serialize(),
success: function(data) {
BootstrapDialog.alert('Hazard Saved Successfully');
$("#flex1").flexReload(); // Reload data in flex grid, if applicable
window.location.href = 'hazard_report_form.php';
return;
},
error: function(data) {
BootstrapDialog.alert('Error Saving Hazard');
return;
}
});
$('.close').click();
}
</script>
<!-- bootstrap & fontawesome -->
<link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" />
<!-- page specific plugin styles -->
<link rel="stylesheet" href="assets/css/jquery-ui.custom.min.css" />
<link rel="stylesheet" href="assets/css/chosen.min.css" />
<link rel="stylesheet" href="assets/css/bootstrap-datepicker3.min.css" />
<link rel="stylesheet" href="assets/css/bootstrap-timepicker.min.css" />
<link rel="stylesheet" href="assets/css/daterangepicker.min.css" />
<link rel="stylesheet" href="assets/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="assets/css/bootstrap-colorpicker.min.css" />
<script type="text/javascript" src="js/typeahead.bundale.js"></script>
<script src="assets/js/jquery-ui.custom.min.js"></script>
<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="assets/js/chosen.jquery.min.js"></script>
<script src="assets/js/spinbox.min.js"></script>
<script src="assets/js/bootstrap-datepicker.min.js"></script>
<script src="assets/js/bootstrap-timepicker.min.js"></script>
<script src="assets/js/jquery.dataTables.min.js"></script>
<script src="assets/js/jquery.dataTables.bootstrap.min.js"></script>
<script src="assets/js/dataTables.buttons.min.js"></script>
<script src="assets/js/buttons.flash.min.js"></script>
<script src="assets/js/buttons.html5.min.js"></script>
<script src="assets/js/buttons.print.min.js"></script>
<script src="assets/js/buttons.colVis.min.js"></script>
<script src="assets/js/dataTables.select.min.js"></script>
<script src="assets/js/moment.min.js"></script>
<script src="assets/js/daterangepicker.min.js"></script>
<script src="assets/js/bootstrap-datetimepicker.min.js"></script>
<script src="assets/js/bootstrap-colorpicker.min.js"></script>
<script src="assets/js/jquery.knob.min.js"></script>
<script src="assets/js/autosize.min.js"></script>
<script src="assets/js/jquery.inputlimiter.min.js"></script>
<script src="assets/js/jquery.maskedinput.min.js"></script>
<script src="assets/js/bootstrap-tag.min.js"></script>
<script src="assets/js/ace-elements.min.js"></script>