Merge branch 'new_theme' of bitbucket.org:venbainformationtechnology/ria into new_theme
This commit is contained in:
commit
1068d26e51
@ -232,8 +232,28 @@
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
max-height: 700px;
|
||||
max-height: 500px;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Adjust heights based on screen zoom */
|
||||
@media only screen and (min-height: 1400px) { /* Approximate Zoom < 100% */
|
||||
.table-responsive { max-height: 425px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 1200px) { /* Approximate Zoom ~ 90% */
|
||||
.table-responsive { max-height: 500px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 1000px) { /* Approximate Zoom ~ 80% */
|
||||
.table-responsive { max-height: 600px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 800px) { /* Approximate Zoom ~ 75% */
|
||||
.table-responsive { max-height: 650px; }
|
||||
}
|
||||
|
||||
.fht-table thead th {
|
||||
@ -302,54 +322,72 @@
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card" id="fullscreenDiv">
|
||||
<form id="changeMonthForm" method='post' action="<?= base_url('/coatingMachineDetails'); ?>">
|
||||
<div class="card-body">
|
||||
|
||||
<div class=form-row>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<?php $today = date('M-Y'); ?>
|
||||
<div class="col-2">
|
||||
<input type="text"
|
||||
value="<?= $month; ?>" name="month"
|
||||
class="form-control monthpicker" id="monthpicker" readonly>
|
||||
|
||||
|
||||
</div>
|
||||
<input type="text" name="month" id="month" value="<?php echo "$month" ?>"
|
||||
class="form-control "
|
||||
data-provide="datepicker"
|
||||
data-date-format="M-yyyy"
|
||||
data-date-min-view-mode="1" readonly>
|
||||
|
||||
<div class="col-1 ">
|
||||
<a href="#" >
|
||||
<i class="fa fa-download btn-lg"
|
||||
style="font-size: x-large;"
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-10 text-right d-flex" style="justify-content: end;" >
|
||||
|
||||
<input type="text" id="searchInput" placeholder="Search..."
|
||||
class="mt-2"
|
||||
style="padding: 8px;margin-bottom: 10px;width: 250px;border: 1px solid #ccc;
|
||||
border-radius: 5px;margin-right:15px;">
|
||||
|
||||
|
||||
<i class="fa fa-table btn-lg mt-2"
|
||||
title="Date Range Filter"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
data-toggle="modal"
|
||||
data-target="#filterModalId">
|
||||
|
||||
</i>
|
||||
|
||||
<i class="fa fa-download btn-lg mt-2"
|
||||
title="Excel Download"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
id="coatingMachineDetailsExport">
|
||||
</i>
|
||||
</a>
|
||||
|
||||
|
||||
<i class="fe-maximize noti-icon btn-lg mt-2"
|
||||
title="Full Screen"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
onclick="toggleDivFullscreen()" >
|
||||
</i>
|
||||
|
||||
|
||||
<i class="fa fa-plus-circle btn-lg mt-2"
|
||||
title="Add Entry"
|
||||
data-target="#coatingMachineDetailModal"
|
||||
data-toggle="modal"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
>
|
||||
</i>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-7">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-2">
|
||||
|
||||
<a style="cursor:pointer"
|
||||
class="btn btn-secondary " data-toggle="modal" data-target="#filterModalId">
|
||||
Date Filter
|
||||
</a>
|
||||
|
||||
<button type="button" class="btn btn-success m-0" data-target="#coatingMachineDetailModal"
|
||||
data-toggle="modal">
|
||||
Add Record
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<div class="table-responsive">
|
||||
<div class="table-responsive" id="table-responsive">
|
||||
<table id="coatingMachineDetailTableId" class="fht-table "
|
||||
style="background-color:#fff;">
|
||||
|
||||
@ -1752,3 +1790,45 @@ $(document).ready(function () {
|
||||
</script>
|
||||
|
||||
<!-- onchange of month submit will happen -->
|
||||
|
||||
<script>
|
||||
function toggleDivFullscreen() {
|
||||
let div = document.getElementById("fullscreenDiv");
|
||||
let tableResponsive = document.getElementById("table-responsive"); // Select the table container inside div
|
||||
|
||||
|
||||
|
||||
if (!document.fullscreenElement) {
|
||||
div.requestFullscreen().then(() => {
|
||||
div.style.width = "100vw"; // Full viewport width
|
||||
div.style.height = "100vh"; // Full viewport height
|
||||
|
||||
// If .table-responsive exists, set its height to 90vh
|
||||
if (tableResponsive) {
|
||||
tableResponsive.style.maxHeight = "90vh";
|
||||
tableResponsive.style.overflowY = "auto"; // Allow scrolling if needed
|
||||
}
|
||||
}).catch(err => console.log("Error enabling fullscreen:", err));
|
||||
} else {
|
||||
document.exitFullscreen().then(() => {
|
||||
div.style.width = "100%";
|
||||
div.style.height = "100%";
|
||||
|
||||
// Reset .table-responsive height when exiting fullscreen
|
||||
if (tableResponsive) {
|
||||
tableResponsive.style.height = "auto";
|
||||
}
|
||||
}).catch(err => console.log("Error exiting fullscreen:", err));
|
||||
}
|
||||
}
|
||||
|
||||
$("#searchInput").on("keyup", function () {
|
||||
let value = $(this).val().toLowerCase(); // Convert input to lowercase for case-insensitive search
|
||||
|
||||
$(".table-responsive tbody tr").filter(function () {
|
||||
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
@ -225,11 +225,13 @@
|
||||
/* Table Wrapper for Scrolling */
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
max-height: 700px; /* Adjust as needed */
|
||||
overflow-y: auto;
|
||||
max-height: 450px;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
td{
|
||||
min-width: 100px;
|
||||
max-width: 100px;
|
||||
@ -313,68 +315,121 @@
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card" id="fullscreenDiv">
|
||||
|
||||
<div class="modal fade" id="bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-md" >
|
||||
<div class="modal-content" >
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="myLargeModalLabel">Navigation Options</h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<!-- bag Dropdown -->
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="bagDropdown">Select Bag</label>
|
||||
<select id="bagDropdown" class="form-control select2">
|
||||
<option value="">Select Bag</option>
|
||||
<?php foreach($bagMaterials as $bagMaterial): ?>
|
||||
<option value=" <?= $bagMaterial['MaterialName']?>">
|
||||
<?= $bagMaterial['MaterialName']?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Date Dropdown -->
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="dateDropdown">Select Date</label>
|
||||
<select id="dateDropdown" class="form-control select2">
|
||||
<?php foreach($datesInMonth as $selectDate): ?>
|
||||
<?php $selectDate=DateTime::createFromFormat('Y-m-d', $selectDate)->format('d-m-Y'); ?>
|
||||
<option value="<?=$selectDate?>"><?=$selectDate?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-primary float-right" onclick="navigateToBag()">Navigate</button>
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
<form id="changeMonthForm" action="<?= base_url('bagStockDetails'); ?>" method="post">
|
||||
|
||||
<div class="row">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-2">
|
||||
<input type="text" name="month" id="month" value="<?php echo "$month" ?>"
|
||||
class="form-control mt-2"
|
||||
style="z-index:30;" readonly>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<input type="text" name="month" id="month" value="<?php echo "$month" ?>"
|
||||
class="form-control mt-2"
|
||||
style="z-index:30;" readonly>
|
||||
</div>
|
||||
|
||||
<div class="col-1 ">
|
||||
<a href="#" >
|
||||
<i class="fa fa-download btn-lg mt-2"
|
||||
style="font-size: x-large;"
|
||||
id="bagStockExport">
|
||||
</i>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-10 text-right d-flex" style="justify-content: end;" >
|
||||
|
||||
<input type="text" id="searchInput" placeholder="Search..."
|
||||
class="mt-2"
|
||||
style="padding: 8px;margin-bottom: 10px;width: 250px;border: 1px solid #ccc;
|
||||
border-radius: 5px;margin-right:15px;">
|
||||
|
||||
|
||||
<?php
|
||||
//check it is current month , then only show the custom option
|
||||
if($month == date('M-Y') ){
|
||||
?>
|
||||
|
||||
<div class="col-6">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-3 m-0">
|
||||
<button type="button" class="btn " style="background-color:maroon;color:white" data-target="#customizeModalId"
|
||||
data-toggle="modal">
|
||||
Customize
|
||||
</button>
|
||||
|
||||
<?php
|
||||
} else { ?>
|
||||
<div class="col-7">
|
||||
<!-- right now client is not using this -->
|
||||
<!-- <a class="dropdown-item" data-toggle="modal" data-target="#bs-example-modal-lg">Navigation</a> -->
|
||||
<?php
|
||||
|
||||
if($month == date('M-Y') ){
|
||||
?>
|
||||
<i class="fa fa-cog btn-lg mt-2"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
title = "Customize"
|
||||
data-target="#customizeModalId"
|
||||
data-toggle="modal">
|
||||
|
||||
</i>
|
||||
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<a class="btn btn-secondary" data-toggle="modal" data-target="#bs-example-modal-lg">Navigation</a>
|
||||
<input type="button" class="btn btn-success px-4" id="saveId" value="Save">
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
<i class="fa fa-rocket btn-lg mt-2"
|
||||
title="Navigation"
|
||||
data-toggle="modal"
|
||||
data-target="#bs-example-modal-lg"
|
||||
style="font-size: x-large; cursor:pointer;">
|
||||
</i>
|
||||
|
||||
<i class="fa fa-download btn-lg mt-2"
|
||||
title="Excel Download"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
id="bagStockExport">
|
||||
</i>
|
||||
|
||||
<i class="fe-maximize noti-icon btn-lg mt-2"
|
||||
title="Full Screen"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
onclick="toggleDivFullscreen()" >
|
||||
</i>
|
||||
|
||||
|
||||
</div>
|
||||
<i class="fas fa-save btn-lg mt-2"
|
||||
title="Save"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
id="saveId" >
|
||||
</i>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
@ -463,7 +518,7 @@
|
||||
|
||||
|
||||
|
||||
<div class="table-responsive">
|
||||
<div class="table-responsive" id="table-responsive">
|
||||
<table id="bagStockDetailsTableId" class="fht-table">
|
||||
|
||||
<thead class="celda_encabezado_general bag-table-head" style="padding: 10px;">
|
||||
@ -759,8 +814,8 @@
|
||||
|
||||
|
||||
<div >
|
||||
<div class="modal fade" id="bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg" >
|
||||
<!-- <div class="modal fade" id="bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-md" >
|
||||
<div class="modal-content" >
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="myLargeModalLabel">Navigation Options</h4>
|
||||
@ -771,7 +826,7 @@
|
||||
<!-- bag Dropdown -->
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="bagDropdown">Select Bag</label>
|
||||
<label for="bagDropdown">Select Bag</label>
|
||||
<select id="bagDropdown" class="form-control select2">
|
||||
<option value="">Select Bag</option>
|
||||
<?php foreach($bagMaterials as $bagMaterial): ?>
|
||||
@ -803,7 +858,7 @@
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
</div>/.modal -->
|
||||
</div>
|
||||
|
||||
|
||||
@ -830,7 +885,7 @@
|
||||
|
||||
let targetColumnIndex = -1;
|
||||
headerCells.forEach((header, index) => {
|
||||
if ((header.innerText.trim()) === selectedBag.trim()) {
|
||||
if (header.innerText.replace(/\s+/g, '') === selectedBag.replace(/\s+/g, '')) {
|
||||
targetColumnIndex = index;
|
||||
return;
|
||||
}
|
||||
@ -1341,4 +1396,54 @@ $(document).ready(function () {
|
||||
$('#customizeHeader').select2();
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function toggleDivFullscreen() {
|
||||
let div = document.getElementById("fullscreenDiv");
|
||||
let tableResponsive = document.getElementById("table-responsive"); // Select the table container inside div
|
||||
|
||||
|
||||
|
||||
if (!document.fullscreenElement) {
|
||||
div.requestFullscreen().then(() => {
|
||||
div.style.width = "100vw"; // Full viewport width
|
||||
div.style.height = "100vh"; // Full viewport height
|
||||
|
||||
// If .table-responsive exists, set its height to 90vh
|
||||
if (tableResponsive) {
|
||||
tableResponsive.style.maxHeight = "90vh";
|
||||
tableResponsive.style.overflowY = "auto"; // Allow scrolling if needed
|
||||
}
|
||||
// Delay Select2 reinitialization
|
||||
setTimeout(() => {
|
||||
$('.select2').select2();
|
||||
}, 1000);
|
||||
}).catch(err => console.log("Error enabling fullscreen:", err));
|
||||
} else {
|
||||
document.exitFullscreen().then(() => {
|
||||
div.style.width = "100%";
|
||||
div.style.height = "100%";
|
||||
|
||||
// Reset .table-responsive height when exiting fullscreen
|
||||
if (tableResponsive) {
|
||||
tableResponsive.style.height = "auto";
|
||||
}
|
||||
|
||||
|
||||
}).catch(err => console.log("Error exiting fullscreen:", err));
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
$("#searchInput").on("keyup", function () {
|
||||
let value = $(this).val().toLowerCase(); // Convert input to lowercase for case-insensitive search
|
||||
|
||||
$(".table-responsive tbody tr").filter(function () {
|
||||
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
@ -223,11 +223,13 @@
|
||||
/* Table Wrapper for Scrolling */
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
max-height: 700px; /* Adjust as needed */
|
||||
overflow-y: auto;
|
||||
max-height: 450px;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
td{
|
||||
min-width: 100px;
|
||||
max-width: 100px;
|
||||
@ -307,66 +309,75 @@ foreach ($period as $day) {
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card" id="fullscreenDiv">
|
||||
<div class="card-body">
|
||||
|
||||
<form id="changeMonthForm" action="<?= base_url('dieselMachineDetails'); ?>" method="post">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-2">
|
||||
<input type="text" name="month" id="month" value="<?php echo "$month" ?>"
|
||||
class="form-control mt-2"
|
||||
style="z-index:30;" readonly>
|
||||
</div>
|
||||
|
||||
<div class="col-1 ">
|
||||
<a href="#" >
|
||||
<i class="fa fa-download btn-lg mt-2"
|
||||
style="font-size: x-large;"
|
||||
id="dieselMachineStockDetailsExport">
|
||||
</i>
|
||||
</a>
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-2">
|
||||
<input type="text" name="month" id="month" value="<?php echo "$month" ?>"
|
||||
class="form-control mt-2"
|
||||
style="z-index:30;" readonly>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-10 text-right d-flex" style="justify-content: end;" >
|
||||
|
||||
<input type="text" id="searchInput" placeholder="Search..."
|
||||
class="mt-2"
|
||||
style="padding: 8px;margin-bottom: 10px;width: 250px;border: 1px solid #ccc;
|
||||
border-radius: 5px;margin-right:15px;">
|
||||
|
||||
|
||||
<?php
|
||||
|
||||
if($month == date('M-Y') ){
|
||||
?>
|
||||
<i class="fa fa-cog btn-lg mt-2"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
title = "Customize"
|
||||
data-target="#customizeModalId"
|
||||
data-toggle="modal">
|
||||
|
||||
</i>
|
||||
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
<i class="fa fa-rocket btn-lg mt-2"
|
||||
title="Navigation"
|
||||
data-toggle="modal"
|
||||
data-target="#bs-example-modal-lg"
|
||||
style="font-size: x-large; cursor:pointer;">
|
||||
</i>
|
||||
|
||||
<i class="fa fa-download btn-lg mt-2"
|
||||
title="Excel Download"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
id="dieselMachineStockDetailsExport ">
|
||||
</i>
|
||||
|
||||
<i class="fe-maximize noti-icon btn-lg mt-2"
|
||||
title="Full Screen"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
onclick="toggleDivFullscreen()" >
|
||||
</i>
|
||||
|
||||
|
||||
<i class="fas fa-save btn-lg mt-2"
|
||||
title="Save"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
id="saveId" >
|
||||
</i>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<?php
|
||||
//check it is current month , then only show the custom option
|
||||
if($month == date('M-Y') ){
|
||||
?>
|
||||
|
||||
<div class="col-6">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-3 m-0">
|
||||
|
||||
<button type="button" class="btn " style="background-color:maroon;color:white" data-target="#customizeModalId"
|
||||
data-toggle="modal">
|
||||
Customize
|
||||
</button>
|
||||
|
||||
<?php
|
||||
} else { ?>
|
||||
<div class="col-7">
|
||||
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<a class="btn btn-secondary" data-toggle="modal" data-target="#bs-example-modal-lg">Navigation</a>
|
||||
|
||||
<input type="button" class="btn btn-success px-4" id="saveId" value="Save">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
@ -457,7 +468,7 @@ foreach ($period as $day) {
|
||||
|
||||
|
||||
|
||||
<div class="table-responsive">
|
||||
<div class="table-responsive" id="table-responsive">
|
||||
<table id="dieselStockDetailsTableId" class="fht-table">
|
||||
|
||||
<thead class="celda_encabezado_general" style="padding: 10px;">
|
||||
@ -930,7 +941,7 @@ foreach ($period as $day) {
|
||||
<!-- bag Dropdown -->
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="dieselDropdown">Select Bag</label>
|
||||
<label for="dieselDropdown">Select Machine</label>
|
||||
<select id="dieselDropdown" class="form-control select2">
|
||||
<option value="">Select Diesel</option>
|
||||
<?php foreach ($dieselMachines as $dieselMachine): ?>
|
||||
@ -982,7 +993,7 @@ foreach ($period as $day) {
|
||||
|
||||
let targetColumnIndex = -1;
|
||||
headerCells.forEach((header, index) => {
|
||||
if ((header.innerText.trim()) === selectedDiesel.trim()) {
|
||||
if (header.innerText.replace(/\s+/g, '') === selectedDiesel.replace(/\s+/g, '')) {
|
||||
targetColumnIndex = index;
|
||||
return;
|
||||
}
|
||||
@ -1014,7 +1025,7 @@ foreach ($period as $day) {
|
||||
|
||||
|
||||
|
||||
targetColumnIndex = targetColumnIndex * 7;
|
||||
targetColumnIndex = (targetColumnIndex * 8) - 4;
|
||||
|
||||
targetRow.cells[targetColumnIndex].scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
@ -1023,7 +1034,7 @@ foreach ($period as $day) {
|
||||
});
|
||||
|
||||
const highlightDuration = 10000;
|
||||
for (let i = targetColumnIndex - 4; i <= targetColumnIndex; i++) {
|
||||
for (let i = targetColumnIndex - 5; i <= targetColumnIndex; i++) {
|
||||
const cell = targetRow.cells[i];
|
||||
if (cell) {
|
||||
|
||||
@ -1649,4 +1660,46 @@ foreach ($period as $day) {
|
||||
autoclose: true,
|
||||
orientation: 'bottom'
|
||||
})
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function toggleDivFullscreen() {
|
||||
let div = document.getElementById("fullscreenDiv");
|
||||
let tableResponsive = document.getElementById("table-responsive"); // Select the table container inside div
|
||||
|
||||
|
||||
|
||||
if (!document.fullscreenElement) {
|
||||
div.requestFullscreen().then(() => {
|
||||
div.style.width = "100vw"; // Full viewport width
|
||||
div.style.height = "100vh"; // Full viewport height
|
||||
|
||||
// If .table-responsive exists, set its height to 90vh
|
||||
if (tableResponsive) {
|
||||
tableResponsive.style.maxHeight = "90vh";
|
||||
tableResponsive.style.overflowY = "auto"; // Allow scrolling if needed
|
||||
}
|
||||
}).catch(err => console.log("Error enabling fullscreen:", err));
|
||||
} else {
|
||||
document.exitFullscreen().then(() => {
|
||||
div.style.width = "100%";
|
||||
div.style.height = "100%";
|
||||
|
||||
// Reset .table-responsive height when exiting fullscreen
|
||||
if (tableResponsive) {
|
||||
tableResponsive.style.height = "auto";
|
||||
}
|
||||
}).catch(err => console.log("Error exiting fullscreen:", err));
|
||||
}
|
||||
}
|
||||
|
||||
$("#searchInput").on("keyup", function () {
|
||||
let value = $(this).val().toLowerCase(); // Convert input to lowercase for case-insensitive search
|
||||
|
||||
$(".table-responsive tbody tr").filter(function () {
|
||||
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
@ -235,10 +235,14 @@ $datefordropdown = format_date($datefordropdown, 0, 'M-Y');
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
max-height: 700px;
|
||||
max-height: 500px;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.fht-table thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
@ -300,55 +304,78 @@ $datefordropdown = format_date($datefordropdown, 0, 'M-Y');
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card" id="fullscreenDiv">
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
<form id="changeMonthForm" action="<?= base_url('drierMachineDetails'); ?>" method="post">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-2">
|
||||
<?php $today = date('M-Y'); ?>
|
||||
<input type="text" name="month" id="month" value="<?php echo $datefordropdown; ?>" class="form-control" data-provide="datepicker" data-date-format="M-yyyy" data-date-min-view-mode="1" readonly>
|
||||
<?php $today = date('M-Y'); ?>
|
||||
<div class="col-2">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-1">
|
||||
<a href="#" >
|
||||
<i class="fa fa-download btn-lg"
|
||||
style="font-size: x-large;"
|
||||
id="drierMachineDetailsExport">
|
||||
</i>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-7">
|
||||
<!-- right now client is not using this -->
|
||||
<input type="text" name="month" id="month" value="<?php echo "$datefordropdown" ?>"
|
||||
class="form-control "
|
||||
data-provide="datepicker"
|
||||
data-date-format="M-yyyy"
|
||||
data-date-min-view-mode="1" readonly>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-10 text-right d-flex" style="justify-content: end;" >
|
||||
|
||||
<input type="text" id="searchInput" placeholder="Search..."
|
||||
class="mt-2"
|
||||
style="padding: 8px;margin-bottom: 10px;width: 250px;border: 1px solid #ccc;
|
||||
border-radius: 5px;margin-right:15px;">
|
||||
|
||||
|
||||
<i class="fa fa-table btn-lg mt-2"
|
||||
title="Date Range Filter"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
data-toggle="modal"
|
||||
data-target="#filterModalId">
|
||||
|
||||
</i>
|
||||
|
||||
<i class="fa fa-download btn-lg mt-2"
|
||||
title="Excel Download"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
id="drierMachineDetailsExport">
|
||||
</i>
|
||||
|
||||
<i class="fe-maximize noti-icon btn-lg mt-2"
|
||||
title="Full Screen"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
onclick="toggleDivFullscreen()" >
|
||||
</i>
|
||||
|
||||
|
||||
<i class="fa fa-plus-circle btn-lg mt-2"
|
||||
title="Add Entry"
|
||||
data-target="#additionalEntriesModalId"
|
||||
data-toggle="modal"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
>
|
||||
</i>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-2 ">
|
||||
|
||||
<a style="cursor:pointer"
|
||||
class="btn btn-secondary" data-toggle="modal" data-target="#filterModalId">
|
||||
Date Filter</a>
|
||||
|
||||
|
||||
<button type="button" class="btn btn-success m-0" data-target="#additionalEntriesModalId"
|
||||
data-toggle="modal">
|
||||
Add Entry
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
<!-- Add table-responsive for horizontal scroll -->
|
||||
<div class="table-responsive">
|
||||
<div class="table-responsive" id="table-responsive">
|
||||
<table id="drierTable" class="fht-table " style="background-color:#fff;">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -1412,4 +1439,46 @@ function convertToDate(dateString) {
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function toggleDivFullscreen() {
|
||||
let div = document.getElementById("fullscreenDiv");
|
||||
let tableResponsive = document.getElementById("table-responsive"); // Select the table container inside div
|
||||
|
||||
|
||||
|
||||
if (!document.fullscreenElement) {
|
||||
div.requestFullscreen().then(() => {
|
||||
div.style.width = "100vw"; // Full viewport width
|
||||
div.style.height = "100vh"; // Full viewport height
|
||||
|
||||
// If .table-responsive exists, set its height to 90vh
|
||||
if (tableResponsive) {
|
||||
tableResponsive.style.maxHeight = "90vh";
|
||||
tableResponsive.style.overflowY = "auto"; // Allow scrolling if needed
|
||||
}
|
||||
}).catch(err => console.log("Error enabling fullscreen:", err));
|
||||
} else {
|
||||
document.exitFullscreen().then(() => {
|
||||
div.style.width = "100%";
|
||||
div.style.height = "100%";
|
||||
|
||||
// Reset .table-responsive height when exiting fullscreen
|
||||
if (tableResponsive) {
|
||||
tableResponsive.style.height = "auto";
|
||||
}
|
||||
}).catch(err => console.log("Error exiting fullscreen:", err));
|
||||
}
|
||||
}
|
||||
|
||||
$("#searchInput").on("keyup", function () {
|
||||
let value = $(this).val().toLowerCase(); // Convert input to lowercase for case-insensitive search
|
||||
|
||||
$(".table-responsive tbody tr").filter(function () {
|
||||
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
@ -233,11 +233,28 @@
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
max-height: 700px;
|
||||
/* Adjust as needed */
|
||||
max-height: 500px;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Adjust heights based on screen zoom */
|
||||
@media only screen and (min-height: 1400px) { /* Approximate Zoom < 100% */
|
||||
.table-responsive { max-height: 425px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 1200px) { /* Approximate Zoom ~ 90% */
|
||||
.table-responsive { max-height: 500px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 1000px) { /* Approximate Zoom ~ 80% */
|
||||
.table-responsive { max-height: 600px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 800px) { /* Approximate Zoom ~ 75% */
|
||||
.table-responsive { max-height: 650px; }
|
||||
}
|
||||
|
||||
td {
|
||||
min-width: 100px;
|
||||
max-width: 100px;
|
||||
@ -291,54 +308,85 @@
|
||||
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="row" align="center">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body" style="padding-left:300px;">
|
||||
<div class="card" id="fullscreenDiv">
|
||||
<div class="card-body" >
|
||||
|
||||
|
||||
<form id="changeMonthForm" action="<?= base_url('dustAndRoughStockDetails'); ?>" method="post">
|
||||
|
||||
|
||||
<div class="row mt-2">
|
||||
|
||||
|
||||
<div class="col-2">
|
||||
<input type="text" name="month" id="month" value="<?php echo $month; ?>"
|
||||
class="form-control" data-provide="datepicker"
|
||||
data-date-format="M-yyyy" data-date-min-view-mode="1" readonly>
|
||||
<div class="row">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-1">
|
||||
<a href="#" >
|
||||
<i class="fa fa-download btn-lg"
|
||||
style="font-size: x-large;"
|
||||
id="dustAndRoughStockExport">
|
||||
</i>
|
||||
</a>
|
||||
<?php $today = date('M-Y'); ?>
|
||||
<div class="col-3">
|
||||
</div>
|
||||
|
||||
<div class="col-2 mt-2">
|
||||
|
||||
<input type="text" name="month" id="month" value="<?php echo "$month" ?>"
|
||||
class="form-control "
|
||||
data-provide="datepicker"
|
||||
data-date-format="M-yyyy"
|
||||
data-date-min-view-mode="1" readonly
|
||||
style="max-width: 175px;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-1">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-2">
|
||||
<a style="cursor:pointer"
|
||||
class="btn btn-secondary " data-toggle="modal" data-target="#filterModalId">
|
||||
Date Filter
|
||||
</a>
|
||||
<button class="btn btn-success m-0 px-3" type="button" id="saveId">Save</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-3 text-right d-flex" style="justify-content: end;" >
|
||||
|
||||
<input type="text" id="searchInput" placeholder="Search..."
|
||||
class="mt-2"
|
||||
style="padding: 8px;margin-bottom: 10px;width: 150px;border: 1px solid #ccc;
|
||||
border-radius: 5px;margin-right:15px;">
|
||||
|
||||
|
||||
<i class="fa fa-table btn-lg mt-2"
|
||||
title="Date Range Filter"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
data-toggle="modal"
|
||||
data-target="#filterModalId">
|
||||
|
||||
</i>
|
||||
|
||||
<i class="fa fa-download btn-lg mt-2"
|
||||
title="Excel Download"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
id="dustAndRoughStockExport">
|
||||
</i>
|
||||
|
||||
<i class="fe-maximize noti-icon btn-lg mt-2"
|
||||
title="Full Screen"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
onclick="toggleDivFullscreen()" >
|
||||
</i>
|
||||
|
||||
|
||||
<i class="fa fa-save btn-lg mt-2"
|
||||
title="Save"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
id="saveId"
|
||||
>
|
||||
</i>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-2">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="table-responsive">
|
||||
<div class="table-responsive" id="table-responsive">
|
||||
<table style="width: 700px;" id="dustAndRoughStockDetailsTableId" class="fht-table ">
|
||||
|
||||
<thead class="celda_encabezado_general" style="padding: 10px;">
|
||||
@ -896,3 +944,44 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function toggleDivFullscreen() {
|
||||
let div = document.getElementById("fullscreenDiv");
|
||||
let tableResponsive = document.getElementById("table-responsive"); // Select the table container inside div
|
||||
|
||||
|
||||
|
||||
if (!document.fullscreenElement) {
|
||||
div.requestFullscreen().then(() => {
|
||||
div.style.width = "100vw"; // Full viewport width
|
||||
div.style.height = "100vh"; // Full viewport height
|
||||
|
||||
// If .table-responsive exists, set its height to 90vh
|
||||
if (tableResponsive) {
|
||||
tableResponsive.style.maxHeight = "90vh";
|
||||
tableResponsive.style.overflowY = "auto"; // Allow scrolling if needed
|
||||
}
|
||||
}).catch(err => console.log("Error enabling fullscreen:", err));
|
||||
} else {
|
||||
document.exitFullscreen().then(() => {
|
||||
div.style.width = "100%";
|
||||
div.style.height = "100%";
|
||||
|
||||
// Reset .table-responsive height when exiting fullscreen
|
||||
if (tableResponsive) {
|
||||
tableResponsive.style.height = "auto";
|
||||
}
|
||||
}).catch(err => console.log("Error exiting fullscreen:", err));
|
||||
}
|
||||
}
|
||||
|
||||
$("#searchInput").on("keyup", function () {
|
||||
let value = $(this).val().toLowerCase(); // Convert input to lowercase for case-insensitive search
|
||||
|
||||
$(".table-responsive tbody tr").filter(function () {
|
||||
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
@ -214,11 +214,29 @@
|
||||
/* Table Wrapper for Scrolling */
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
max-height: 700px; /* Adjust as needed */
|
||||
overflow-y: auto;
|
||||
max-height: 500px;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Adjust heights based on screen zoom */
|
||||
@media only screen and (min-height: 1400px) { /* Approximate Zoom < 100% */
|
||||
.table-responsive { max-height: 425px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 1200px) { /* Approximate Zoom ~ 90% */
|
||||
.table-responsive { max-height: 500px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 1000px) { /* Approximate Zoom ~ 80% */
|
||||
.table-responsive { max-height: 600px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 800px) { /* Approximate Zoom ~ 75% */
|
||||
.table-responsive { max-height: 650px; }
|
||||
}
|
||||
|
||||
td{
|
||||
min-width: 100px;
|
||||
max-width: 100px;
|
||||
@ -267,54 +285,74 @@
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card" id="fullscreenDiv">
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
<form id="changeMonthForm" action="<?= base_url('gasStockDetails'); ?>" method="post">
|
||||
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-2">
|
||||
<?php $today = date('M-Y'); ?>
|
||||
<input type="text" name="month" id="month" value="<?php echo $month; ?>" class="form-control" data-provide="datepicker" data-date-format="M-yyyy" data-date-min-view-mode="1" readonly>
|
||||
<?php $today = date('M-Y'); ?>
|
||||
<div class="col-2">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-1 ">
|
||||
<a href="#" >
|
||||
<i class="fa fa-download btn-lg"
|
||||
style="font-size: x-large;"
|
||||
id="gasStockDetailsExport">
|
||||
</i>
|
||||
</a>
|
||||
<input type="text" name="month" id="month" value="<?php echo "$month" ?>"
|
||||
class="form-control "
|
||||
data-provide="datepicker"
|
||||
data-date-format="M-yyyy"
|
||||
data-date-min-view-mode="1" readonly>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-7">
|
||||
<!-- right now client is not using this -->
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-10 text-right d-flex" style="justify-content: end;" >
|
||||
|
||||
<input type="text" id="searchInput" placeholder="Search..."
|
||||
class="mt-2"
|
||||
style="padding: 8px;margin-bottom: 10px;width: 250px;border: 1px solid #ccc;
|
||||
border-radius: 5px;margin-right:15px;">
|
||||
|
||||
|
||||
<i class="fa fa-table btn-lg mt-2"
|
||||
title="Date Range Filter"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
data-toggle="modal"
|
||||
data-target="#filterModalId">
|
||||
|
||||
</i>
|
||||
|
||||
<i class="fa fa-download btn-lg mt-2"
|
||||
title="Excel Download"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
id="gasStockDetailsExport">
|
||||
</i>
|
||||
|
||||
<i class="fe-maximize noti-icon btn-lg mt-2"
|
||||
title="Full Screen"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
onclick="toggleDivFullscreen()" >
|
||||
</i>
|
||||
|
||||
|
||||
<i class="fa fa-save btn-lg mt-2"
|
||||
title="Save"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
id="saveId"
|
||||
>
|
||||
</i>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-2">
|
||||
|
||||
<a style="cursor:pointer"
|
||||
class="btn btn-secondary" data-toggle="modal" data-target="#filterModalId">
|
||||
Date Filter</a>
|
||||
|
||||
<button type="button" class="btn btn-success m-0 px-4" id="saveId" >
|
||||
Save
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
<div class="table-responsive">
|
||||
<div class="table-responsive" id="table-responsive">
|
||||
<table id="gasStockDetailsTableId" class="fht-table">
|
||||
|
||||
<thead class="celda_encabezado_general" style="padding: 10px;">
|
||||
@ -1221,4 +1259,46 @@ function convertToDate(dateString) {
|
||||
$('#changeMonthForm').submit();
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function toggleDivFullscreen() {
|
||||
let div = document.getElementById("fullscreenDiv");
|
||||
let tableResponsive = document.getElementById("table-responsive"); // Select the table container inside div
|
||||
|
||||
|
||||
|
||||
if (!document.fullscreenElement) {
|
||||
div.requestFullscreen().then(() => {
|
||||
div.style.width = "100vw"; // Full viewport width
|
||||
div.style.height = "100vh"; // Full viewport height
|
||||
|
||||
// If .table-responsive exists, set its height to 90vh
|
||||
if (tableResponsive) {
|
||||
tableResponsive.style.maxHeight = "90vh";
|
||||
tableResponsive.style.overflowY = "auto"; // Allow scrolling if needed
|
||||
}
|
||||
}).catch(err => console.log("Error enabling fullscreen:", err));
|
||||
} else {
|
||||
document.exitFullscreen().then(() => {
|
||||
div.style.width = "100%";
|
||||
div.style.height = "100%";
|
||||
|
||||
// Reset .table-responsive height when exiting fullscreen
|
||||
if (tableResponsive) {
|
||||
tableResponsive.style.height = "auto";
|
||||
}
|
||||
}).catch(err => console.log("Error exiting fullscreen:", err));
|
||||
}
|
||||
}
|
||||
|
||||
$("#searchInput").on("keyup", function () {
|
||||
let value = $(this).val().toLowerCase(); // Convert input to lowercase for case-insensitive search
|
||||
|
||||
$(".table-responsive tbody tr").filter(function () {
|
||||
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
@ -221,10 +221,15 @@
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
max-height: 700px;
|
||||
max-height: 450px;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fht-table thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
@ -307,35 +312,56 @@
|
||||
|
||||
<div class="row" style="padding:0 px !important;">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card" id="fullscreenDiv">
|
||||
<div class="card-body" >
|
||||
|
||||
<form id="changeMonthForm" action="<?= base_url('incomingSilicaSandDetails'); ?>" method="post">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-2">
|
||||
<?php $today = date('M-Y'); ?>
|
||||
<input type="text" name="month" id="month" value="<?php echo "$month" ?>" class="form-control " data-provide="datepicker" data-date-format="M-yyyy" data-date-min-view-mode="1" readonly>
|
||||
<input type="hidden" name="remark" id="remark" value="<?php echo $remark ?>">
|
||||
</div>
|
||||
<div class="col-1 ">
|
||||
<a href="#" >
|
||||
<i class="fa fa-download btn-lg"
|
||||
style="font-size: x-large;"
|
||||
<input type="text" name="month" id="month" value="<?php echo "$month" ?>" class="form-control " data-provide="datepicker" data-date-format="M-yyyy" data-date-min-view-mode="1" readonly>
|
||||
<input type="hidden" name="remark" id="remark" value="<?php echo $remark ?>">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-10 text-right d-flex" style="justify-content: end;" >
|
||||
|
||||
<input type="text" id="searchInput" placeholder="Search..."
|
||||
class="mt-2"
|
||||
style="padding: 8px;margin-bottom: 10px;width: 250px;border: 1px solid #ccc;
|
||||
border-radius: 5px;margin-right:15px;">
|
||||
|
||||
|
||||
|
||||
<i class="fa fa-download btn-lg mt-2"
|
||||
title="Excel Download"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
id="incomingSilicaSandDetailsExport">
|
||||
</i>
|
||||
</a>
|
||||
|
||||
|
||||
<i class="fe-maximize noti-icon btn-lg mt-2"
|
||||
title="Full Screen"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
onclick="toggleDivFullscreen()" >
|
||||
</i>
|
||||
|
||||
|
||||
<i class="fas fa-save btn-lg mt-2"
|
||||
title="Save"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
id="saveId" >
|
||||
</i>
|
||||
|
||||
</div>
|
||||
<div class="col-8">
|
||||
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<input type="button" class="btn btn-success px-4 m-0" id="save" value="Save">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Add table-responsive for horizontal scroll -->
|
||||
<div class="table-responsive">
|
||||
<div class="table-responsive" id="table-responsive">
|
||||
<table id="incomingSilicaSandDetailsTable" class="fht-table table " >
|
||||
<thead >
|
||||
<tr>
|
||||
@ -1902,3 +1928,46 @@ $(document).ready(function() {
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
function toggleDivFullscreen() {
|
||||
let div = document.getElementById("fullscreenDiv");
|
||||
let tableResponsive = document.getElementById("table-responsive"); // Select the table container inside div
|
||||
|
||||
|
||||
|
||||
if (!document.fullscreenElement) {
|
||||
div.requestFullscreen().then(() => {
|
||||
div.style.width = "100vw"; // Full viewport width
|
||||
div.style.height = "100vh"; // Full viewport height
|
||||
|
||||
// If .table-responsive exists, set its height to 90vh
|
||||
if (tableResponsive) {
|
||||
tableResponsive.style.maxHeight = "90vh";
|
||||
tableResponsive.style.overflowY = "auto"; // Allow scrolling if needed
|
||||
}
|
||||
}).catch(err => console.log("Error enabling fullscreen:", err));
|
||||
} else {
|
||||
document.exitFullscreen().then(() => {
|
||||
div.style.width = "100%";
|
||||
div.style.height = "100%";
|
||||
|
||||
// Reset .table-responsive height when exiting fullscreen
|
||||
if (tableResponsive) {
|
||||
tableResponsive.style.height = "auto";
|
||||
}
|
||||
}).catch(err => console.log("Error exiting fullscreen:", err));
|
||||
}
|
||||
}
|
||||
|
||||
$("#searchInput").on("keyup", function () {
|
||||
let value = $(this).val().toLowerCase(); // Convert input to lowercase for case-insensitive search
|
||||
|
||||
$(".table-responsive tbody tr").filter(function () {
|
||||
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
@ -18,23 +18,27 @@
|
||||
}
|
||||
|
||||
.grab {
|
||||
cursor: grab; /* Default open-hand cursor */
|
||||
cursor: grab;
|
||||
/* Default open-hand cursor */
|
||||
}
|
||||
|
||||
.grab:active {
|
||||
cursor: grabbing; /* Closed-hand cursor when dragging */
|
||||
cursor: grabbing;
|
||||
/* Closed-hand cursor when dragging */
|
||||
}
|
||||
|
||||
.fht-table td:hover {
|
||||
background-color: rgb(170, 222, 167);
|
||||
color:rgb(2, 2, 2);
|
||||
transform: scale(1.25); /* Increases size by 25% */
|
||||
transition: transform 0.5s ease-in-out; /* Smooth scaling effect */
|
||||
background-color: rgb(170, 222, 167);
|
||||
color: rgb(2, 2, 2);
|
||||
transform: scale(1.25);
|
||||
/* Increases size by 25% */
|
||||
transition: transform 0.5s ease-in-out;
|
||||
/* Smooth scaling effect */
|
||||
}
|
||||
|
||||
.fht-table tr:hover {
|
||||
background-color: rgb(170, 222, 167);
|
||||
color:rgb(2, 2, 2);
|
||||
background-color: rgb(170, 222, 167);
|
||||
color: rgb(2, 2, 2);
|
||||
}
|
||||
|
||||
|
||||
@ -228,27 +232,11 @@
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
max-height: 500px;
|
||||
max-height: 450px;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Adjust heights based on screen zoom */
|
||||
@media only screen and (min-height: 1400px) { /* Approximate Zoom < 100% */
|
||||
.table-responsive { max-height: 425px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 1200px) { /* Approximate Zoom ~ 90% */
|
||||
.table-responsive { max-height: 500px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 1000px) { /* Approximate Zoom ~ 80% */
|
||||
.table-responsive { max-height: 600px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 800px) { /* Approximate Zoom ~ 75% */
|
||||
.table-responsive { max-height: 650px; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -258,19 +246,21 @@
|
||||
}
|
||||
|
||||
tfoot tr {
|
||||
background-color:rgb(235, 236, 203);
|
||||
background-color: rgb(235, 236, 203);
|
||||
}
|
||||
|
||||
body[data-layout-mode = horizontal] .container-fluid{
|
||||
body[data-layout-mode=horizontal] .container-fluid {
|
||||
max-width: 100%;
|
||||
}
|
||||
.card-body{
|
||||
padding-top : 0;
|
||||
|
||||
.card-body {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.card{ margin-bottom: 5px;}
|
||||
|
||||
|
||||
.card {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -328,62 +318,74 @@ foreach ($period as $day) {
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card" id="fullscreenDiv">
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
<form id="changeMonthForm" action="<?= base_url('powerConsumptionDetails'); ?>" method="post">
|
||||
<form id="changeMonthForm" action="<?= base_url('powerConsumptionDetails'); ?>" method="post">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-2">
|
||||
<input type="text" name="month" id="month" value="<?php echo "$month" ?>"
|
||||
class="form-control mt-2"
|
||||
style="z-index:30;" readonly>
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
<div class="col-1 ">
|
||||
<a href="#" >
|
||||
<i class="fa fa-download btn-lg mt-2"
|
||||
style="font-size: x-large;"
|
||||
id="powerConsumptionExport">
|
||||
<div class="col-2">
|
||||
<input type="text" name="month" id="month" value="<?php echo "$month" ?>"
|
||||
class="form-control mt-2"
|
||||
style="z-index:30;" readonly>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-10 text-right d-flex" style="justify-content: end;">
|
||||
|
||||
<input type="text" id="searchInput" placeholder="Search..."
|
||||
class="mt-2"
|
||||
style="padding: 8px;margin-bottom: 10px;width: 250px;border: 1px solid #ccc;
|
||||
border-radius: 5px;margin-right:15px;">
|
||||
|
||||
|
||||
<?php
|
||||
|
||||
if ($month == date('M-Y')) {
|
||||
?>
|
||||
<i class="fa fa-cog btn-lg mt-2"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
title="Customize"
|
||||
data-target="#customizeModalId"
|
||||
data-toggle="modal">
|
||||
|
||||
</i>
|
||||
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
<i class="fa fa-rocket btn-lg mt-2"
|
||||
title="Navigation"
|
||||
data-toggle="modal"
|
||||
data-target="#bs-example-modal-lg"
|
||||
style="font-size: x-large; cursor:pointer;">
|
||||
</i>
|
||||
|
||||
<i class="fa fa-download btn-lg mt-2"
|
||||
title="Excel Download"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
id="powerConsumptionExport ">
|
||||
</i>
|
||||
|
||||
<i class="fe-maximize noti-icon btn-lg mt-2"
|
||||
title="Full Screen"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
onclick="toggleDivFullscreen()">
|
||||
</i>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<i class="fas fa-save btn-lg mt-2"
|
||||
title="Save"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
id="saveId">
|
||||
</i>
|
||||
|
||||
|
||||
<?php
|
||||
//check it is current month , then only show the custom option
|
||||
if($month == date('M-Y') ){
|
||||
?>
|
||||
|
||||
<div class="col-6">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-3 m-0">
|
||||
<button type="button" class="btn " style="background-color:maroon;color:white" data-target="#customizeModalId"
|
||||
data-toggle="modal">
|
||||
Customize
|
||||
</button>
|
||||
|
||||
<?php
|
||||
} else { ?>
|
||||
<div class="col-7">
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<a class="btn btn-secondary" data-toggle="modal" data-target="#bs-example-modal-lg">Navigation</a>
|
||||
<input type="button" class="btn btn-success px-4" id="saveId" value="Save">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -391,91 +393,90 @@ foreach ($period as $day) {
|
||||
|
||||
<form action="<?= base_url('powerConsumptionDetails'); ?>" method="post">
|
||||
|
||||
<!-- modal placed here for submission of form -->
|
||||
<!---------------------------------------
|
||||
<!-- modal placed here for submission of form -->
|
||||
<!---------------------------------------
|
||||
this modal is used to customize table header
|
||||
1)list table header order
|
||||
2)choose which material/machines you want
|
||||
------------------------------------------------------------>
|
||||
|
||||
<div>
|
||||
<div class="modal fade" id="customizeModalId" tabindex="-1" role="dialog" aria-labelledby="customizeModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-md">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="customizeModalLabel">Customize</h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<!-- Dropdown to add back removed items -->
|
||||
<div class="col">
|
||||
<div class="form-group">
|
||||
<label for="customizeHeader"> Add For This Month </label>
|
||||
<select id="customizeHeader" class="form-control" onchange="addBackToList()">
|
||||
<option value="">Select</option>
|
||||
<?php
|
||||
foreach($activeElectricMachines as $index => $activeElectricMachine){ ?>
|
||||
<div>
|
||||
<div class="modal fade" id="customizeModalId" tabindex="-1" role="dialog" aria-labelledby="customizeModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-md">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="customizeModalLabel">Customize</h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<!-- Dropdown to add back removed items -->
|
||||
<div class="col">
|
||||
<div class="form-group">
|
||||
<label for="customizeHeader"> Add For This Month </label>
|
||||
<select id="customizeHeader" class="form-control" onchange="addBackToList()">
|
||||
<option value="">Select</option>
|
||||
<?php
|
||||
foreach ($activeElectricMachines as $index => $activeElectricMachine) { ?>
|
||||
|
||||
<option value="<?=$activeElectricMachine['id']?>">
|
||||
<?=$activeElectricMachine['id']?> - <?=$activeElectricMachine['machine_name']?>
|
||||
</option>
|
||||
<option value="<?= $activeElectricMachine['id'] ?>">
|
||||
<?= $activeElectricMachine['id'] ?> - <?= $activeElectricMachine['machine_name'] ?>
|
||||
</option>
|
||||
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5>List of Selected Items</h5>
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="selectedItemsContainer">
|
||||
<ul id="sortableList">
|
||||
<?php foreach ($electricMachines as $electricMachine): ?>
|
||||
|
||||
<div class="sortable-item" draggable="true" id="<?= $electricMachine['id'] ?>_container">
|
||||
<input type = "checkbox"
|
||||
id = "<?= $electricMachine['id'] ?>_checkboxId"
|
||||
name = "customisedMachineCodes[]"
|
||||
value = "<?= $electricMachine['id'] ?>"
|
||||
onclick = "removeSelectedMaterial(this)"
|
||||
checked>
|
||||
<label class="grab" for="<?= $electricMachine['id'] ?>_checkboxId">
|
||||
<?= $electricMachine['id'] ?> - <?= $electricMachine['machine_name']; ?>
|
||||
</label>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary float-right"> Apply </button>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h5>List of Selected Items</h5>
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="selectedItemsContainer">
|
||||
<ul id="sortableList">
|
||||
<?php foreach ($electricMachines as $electricMachine): ?>
|
||||
|
||||
<div class="sortable-item" draggable="true" id="<?= $electricMachine['id'] ?>_container">
|
||||
<input type="checkbox"
|
||||
id="<?= $electricMachine['id'] ?>_checkboxId"
|
||||
name="customisedMachineCodes[]"
|
||||
value="<?= $electricMachine['id'] ?>"
|
||||
onclick="removeSelectedMaterial(this)"
|
||||
checked>
|
||||
<label class="grab" for="<?= $electricMachine['id'] ?>_checkboxId">
|
||||
<?= $electricMachine['id'] ?> - <?= $electricMachine['machine_name']; ?>
|
||||
</label>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary float-right"> Apply </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- hidden fields -->
|
||||
<input type="hidden" name="month" value="<?php echo "$month" ?>"
|
||||
>
|
||||
<!-- hidden fields -->
|
||||
<input type="hidden" name="month" value="<?php echo "$month" ?>">
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
<div class="table-responsive">
|
||||
<div class="table-responsive" id="table-responsive">
|
||||
<table id="powerStockDetailsTableId" class="fht-table">
|
||||
|
||||
<thead class="celda_encabezado_general" style="padding: 10px;">
|
||||
@ -529,7 +530,7 @@ foreach ($period as $day) {
|
||||
|
||||
<tbody style="background-color: #fff;">
|
||||
|
||||
<?php if (!empty($totalPower)){
|
||||
<?php if (!empty($totalPower)) {
|
||||
|
||||
$summary = [];
|
||||
|
||||
@ -735,195 +736,191 @@ foreach ($period as $day) {
|
||||
}
|
||||
?>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<tfoot>
|
||||
<tr>
|
||||
|
||||
<td style="background-color:rgb(189, 9, 6); color:#ffff;">
|
||||
<b> Total </b>
|
||||
</td>
|
||||
<td style="background-color:rgb(189, 9, 6); color:#ffff;">
|
||||
<b> Total </b>
|
||||
</td>
|
||||
|
||||
<td class="celda_normal "><?= $summary['openingReading'] ?></td>
|
||||
<td class="celda_normal "><?= $summary['finalReading'] ?></td>
|
||||
<td class="celda_normal "><?= $summary['totalReading'] ?></td>
|
||||
<td class="celda_normal "><?= $summary['totalUnits'] ?></td>
|
||||
<td class="celda_normal "><?= $summary['averagePf'] ?></td>
|
||||
<td class="celda_normal "><?= $summary['presentPf'] ?></td>
|
||||
<td class="celda_normal "><?= $summary['md'] ?></td>
|
||||
<td class="celda_normal "><?= $summary['mf'] ?></td>
|
||||
<td class="celda_normal "><?= $summary['openingReading'] ?></td>
|
||||
<td class="celda_normal "><?= $summary['finalReading'] ?></td>
|
||||
<td class="celda_normal "><?= $summary['totalReading'] ?></td>
|
||||
<td class="celda_normal "><?= $summary['totalUnits'] ?></td>
|
||||
<td class="celda_normal "><?= $summary['averagePf'] ?></td>
|
||||
<td class="celda_normal "><?= $summary['presentPf'] ?></td>
|
||||
<td class="celda_normal "><?= $summary['md'] ?></td>
|
||||
<td class="celda_normal "><?= $summary['mf'] ?></td>
|
||||
|
||||
<?php foreach ($summary as $each) {
|
||||
if (is_array($each)) {
|
||||
?>
|
||||
<?php foreach ($summary as $each) {
|
||||
if (is_array($each)) {
|
||||
?>
|
||||
|
||||
<td class="celda_normal "><?= $each['opening_units'] ?> </td>
|
||||
<td class="celda_normal "><?= $each['closing_units'] ?></td>
|
||||
<td class="celda_normal "><?= $each['total_units'] ?></td>
|
||||
<td class="celda_normal "><?= $each['opening_units'] ?> </td>
|
||||
<td class="celda_normal "><?= $each['closing_units'] ?></td>
|
||||
<td class="celda_normal "><?= $each['total_units'] ?></td>
|
||||
|
||||
<?php
|
||||
}
|
||||
}
|
||||
?>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
</tr>
|
||||
</tfoot>
|
||||
</tr>
|
||||
</tfoot>
|
||||
|
||||
<!-- this else condition work if groupedpowerStockDetails is empty and creating new records
|
||||
<!-- this else condition work if groupedpowerStockDetails is empty and creating new records
|
||||
with initial values 0 for entire month -->
|
||||
<?php } else { ?>
|
||||
<?php } else { ?>
|
||||
|
||||
|
||||
<?php foreach ($datesInMonth as $datesInMonthIndex => $dateInMonth) { ?>
|
||||
<tr
|
||||
<?php foreach ($datesInMonth as $datesInMonthIndex => $dateInMonth) { ?>
|
||||
<tr
|
||||
|
||||
<?php
|
||||
<?php
|
||||
|
||||
$currentDate = date('d-m-Y');
|
||||
$dateInMonthDmYFormat = DateTime::createFromFormat('Y-m-d', $dateInMonth)->format('d-m-Y');
|
||||
if ($dateInMonthDmYFormat === $currentDate) {
|
||||
echo 'style="background: rgb(232, 245, 231);"';
|
||||
}
|
||||
?>>
|
||||
$currentDate = date('d-m-Y');
|
||||
$dateInMonthDmYFormat = DateTime::createFromFormat('Y-m-d', $dateInMonth)->format('d-m-Y');
|
||||
if ($dateInMonthDmYFormat === $currentDate) {
|
||||
echo 'style="background: rgb(232, 245, 231);"';
|
||||
}
|
||||
?>>
|
||||
|
||||
<?php
|
||||
$startDate = DateTime::createFromFormat('Y-m-d', $dateInMonth)->format('d-m-Y');
|
||||
<?php
|
||||
$startDate = DateTime::createFromFormat('Y-m-d', $dateInMonth)->format('d-m-Y');
|
||||
|
||||
?>
|
||||
?>
|
||||
|
||||
<td class="celda_normal">
|
||||
<?= $startDate ?>
|
||||
</td>
|
||||
<td class="celda_normal">
|
||||
<?= $startDate ?>
|
||||
</td>
|
||||
|
||||
|
||||
<td class="celda_normal openingTP"
|
||||
data-id="<?= $dateInMonth ?>"
|
||||
<td class="celda_normal openingTP"
|
||||
data-id="<?= $dateInMonth ?>"
|
||||
|
||||
<?php if ($datesInMonthIndex == 0) { ?>
|
||||
<?php if ($datesInMonthIndex == 0) { ?>
|
||||
|
||||
oninput="openingTPStockChange(this)"
|
||||
contenteditable="true"
|
||||
oninput="openingTPStockChange(this)"
|
||||
contenteditable="true"
|
||||
|
||||
<?php } ?>>
|
||||
<?php
|
||||
if (empty($previousMonthTotalPowerMachineStockDetails)) {
|
||||
echo " ";
|
||||
} else {
|
||||
echo $previousMonthTotalPowerMachineStockDetails[0]['final_reading'];
|
||||
}
|
||||
<?php } ?>>
|
||||
<?php
|
||||
if (empty($previousMonthTotalPowerMachineStockDetails)) {
|
||||
echo " ";
|
||||
} else {
|
||||
echo $previousMonthTotalPowerMachineStockDetails[0]['final_reading'];
|
||||
}
|
||||
|
||||
?>
|
||||
?>
|
||||
|
||||
|
||||
</td>
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
<td class="celda_normal finalTP"
|
||||
data-id="<?= $dateInMonth ?>"
|
||||
<td class="celda_normal finalTP"
|
||||
data-id="<?= $dateInMonth ?>"
|
||||
|
||||
oninput="finalTPStockChange(this)"
|
||||
contenteditable="true">
|
||||
oninput="finalTPStockChange(this)"
|
||||
contenteditable="true">
|
||||
|
||||
<?php
|
||||
if (empty($previousMonthTotalPowerMachineStockDetails)) {
|
||||
echo " ";
|
||||
} else {
|
||||
echo $previousMonthTotalPowerMachineStockDetails[0]['final_reading'];
|
||||
}
|
||||
<?php
|
||||
if (empty($previousMonthTotalPowerMachineStockDetails)) {
|
||||
echo " ";
|
||||
} else {
|
||||
echo $previousMonthTotalPowerMachineStockDetails[0]['final_reading'];
|
||||
}
|
||||
|
||||
?>
|
||||
?>
|
||||
|
||||
</td>
|
||||
</td>
|
||||
|
||||
<td class="celda_normal totalReadingTP"
|
||||
data-id="<?= $dateInMonth ?>"> </td>
|
||||
<td class="celda_normal totalReadingTP"
|
||||
data-id="<?= $dateInMonth ?>"> </td>
|
||||
|
||||
<td class="celda_normal totalUnitsTP"
|
||||
data-id="<?= $dateInMonth ?>"> </td>
|
||||
<td class="celda_normal totalUnitsTP"
|
||||
data-id="<?= $dateInMonth ?>"> </td>
|
||||
|
||||
<td class="celda_normal averagePfTP" contenteditable="true"
|
||||
data-id="<?= $dateInMonth ?>"> </td>
|
||||
<td class="celda_normal presentPfTP" contenteditable="true"
|
||||
data-id="<?= $dateInMonth ?>"> </td>
|
||||
<td class="celda_normal averagePfTP" contenteditable="true"
|
||||
data-id="<?= $dateInMonth ?>"> </td>
|
||||
<td class="celda_normal presentPfTP" contenteditable="true"
|
||||
data-id="<?= $dateInMonth ?>"> </td>
|
||||
|
||||
<td class="celda_normal mdTP" contenteditable="true"
|
||||
oninput="mdTPStockChange(this)"
|
||||
data-id="<?= $dateInMonth ?>"> </td>
|
||||
<td class="celda_normal mdTP" contenteditable="true"
|
||||
oninput="mdTPStockChange(this)"
|
||||
data-id="<?= $dateInMonth ?>"> </td>
|
||||
|
||||
<td class="celda_normal mfTP"
|
||||
data-id="<?= $dateInMonth ?>"> </td>
|
||||
<td class="celda_normal mfTP"
|
||||
data-id="<?= $dateInMonth ?>"> </td>
|
||||
|
||||
|
||||
|
||||
<?php
|
||||
foreach ($electricMachines as $powerMachineIndex => $powerMachine) {
|
||||
?>
|
||||
<!-- this will loop till machines present -->
|
||||
<?php
|
||||
foreach ($electricMachines as $powerMachineIndex => $powerMachine) {
|
||||
?>
|
||||
<!-- this will loop till machines present -->
|
||||
|
||||
|
||||
|
||||
<td class="celda_normal" style="display:none">
|
||||
<?= $dateInMonth ?>
|
||||
</td>
|
||||
<td class="celda_normal" style="display:none">
|
||||
<?= $dateInMonth ?>
|
||||
</td>
|
||||
|
||||
<td class="celda_normal" style="display:none"
|
||||
data-id="<?= $dateInMonth ?> <?= $powerMachine['id'] ?>">
|
||||
<?= $powerMachine['id'] ?>
|
||||
</td>
|
||||
<td class="celda_normal" style="display:none"
|
||||
data-id="<?= $dateInMonth ?> <?= $powerMachine['id'] ?>">
|
||||
<?= $powerMachine['id'] ?>
|
||||
</td>
|
||||
|
||||
<td class="celda_normal openingUnits"
|
||||
|
||||
<?php if ($datesInMonthIndex == 0) { ?>
|
||||
oninput="openingUnitsChange(this)"
|
||||
contenteditable="true"
|
||||
<?php } ?>
|
||||
|
||||
data-id="<?= $dateInMonth ?> <?= $powerMachine['id'] ?>">
|
||||
|
||||
|
||||
<?php
|
||||
foreach($previousMonthPowerConsumptionStockDetails as $index => $previousMonthPowerConsumptionStockDetail)
|
||||
{
|
||||
if($previousMonthPowerConsumptionStockDetail['machine_id'] == $powerMachine['id']){
|
||||
echo $previousMonthPowerConsumptionStockDetail['closing_units'] ;
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
?>
|
||||
|
||||
</td>
|
||||
|
||||
<td class="celda_normal closingUnits"
|
||||
data-id="<?= $dateInMonth ?> <?= $powerMachine['id'] ?>"
|
||||
oninput="closingUnitsChange(this)"
|
||||
contenteditable="true">
|
||||
|
||||
<?php
|
||||
foreach($previousMonthPowerConsumptionStockDetails as $index => $previousMonthPowerConsumptionStockDetail)
|
||||
{
|
||||
if($previousMonthPowerConsumptionStockDetail['machine_id'] == $powerMachine['id']){
|
||||
echo $previousMonthPowerConsumptionStockDetail['closing_units'] ;
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
?>
|
||||
|
||||
</td>
|
||||
|
||||
<td class="celda_normal totalUnits"
|
||||
data-id="<?= $dateInMonth ?> <?= $powerMachine['id'] ?>"
|
||||
contenteditable="true"> </td>
|
||||
<td class="celda_normal openingUnits"
|
||||
|
||||
<?php if ($datesInMonthIndex == 0) { ?>
|
||||
oninput="openingUnitsChange(this)"
|
||||
contenteditable="true"
|
||||
<?php } ?>
|
||||
</tr>
|
||||
|
||||
data-id="<?= $dateInMonth ?> <?= $powerMachine['id'] ?>">
|
||||
|
||||
|
||||
<?php
|
||||
foreach ($previousMonthPowerConsumptionStockDetails as $index => $previousMonthPowerConsumptionStockDetail) {
|
||||
if ($previousMonthPowerConsumptionStockDetail['machine_id'] == $powerMachine['id']) {
|
||||
echo $previousMonthPowerConsumptionStockDetail['closing_units'];
|
||||
break;
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
</td>
|
||||
|
||||
<td class="celda_normal closingUnits"
|
||||
data-id="<?= $dateInMonth ?> <?= $powerMachine['id'] ?>"
|
||||
oninput="closingUnitsChange(this)"
|
||||
contenteditable="true">
|
||||
|
||||
<?php
|
||||
foreach ($previousMonthPowerConsumptionStockDetails as $index => $previousMonthPowerConsumptionStockDetail) {
|
||||
if ($previousMonthPowerConsumptionStockDetail['machine_id'] == $powerMachine['id']) {
|
||||
echo $previousMonthPowerConsumptionStockDetail['closing_units'];
|
||||
break;
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
</td>
|
||||
|
||||
<td class="celda_normal totalUnits"
|
||||
data-id="<?= $dateInMonth ?> <?= $powerMachine['id'] ?>"
|
||||
contenteditable="true"> </td>
|
||||
|
||||
<?php } ?>
|
||||
<?php } ?>
|
||||
</tr>
|
||||
<?php } ?>
|
||||
<?php } ?>
|
||||
|
||||
|
||||
</tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -950,7 +947,7 @@ foreach ($period as $day) {
|
||||
<!-- bag Dropdown -->
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="powerDropdown">Select Bag</label>
|
||||
<label for="powerDropdown">Select Machine</label>
|
||||
<select id="powerDropdown" class="form-control select2">
|
||||
<option value="">Select Electric Machines</option>
|
||||
<?php foreach ($electricMachines as $powerMachine): ?>
|
||||
@ -987,7 +984,7 @@ foreach ($period as $day) {
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$(document).ready(function() {
|
||||
$('.select2').select2();
|
||||
})
|
||||
</script>
|
||||
@ -1007,7 +1004,7 @@ foreach ($period as $day) {
|
||||
|
||||
let targetColumnIndex = -1;
|
||||
headerCells.forEach((header, index) => {
|
||||
if ((header.innerText.trim()) === selectedPower.trim()) {
|
||||
if (header.innerText.replace(/\s+/g, '') === selectedPower.replace(/\s+/g, '')) {
|
||||
targetColumnIndex = index;
|
||||
return;
|
||||
}
|
||||
@ -1035,11 +1032,9 @@ foreach ($period as $day) {
|
||||
}
|
||||
|
||||
|
||||
targetColumnIndex = (targetColumnIndex * 5) + 3;
|
||||
|
||||
|
||||
|
||||
targetColumnIndex = targetColumnIndex * 7;
|
||||
|
||||
targetRow.cells[targetColumnIndex].scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
inline: 'center',
|
||||
@ -1406,17 +1401,17 @@ foreach ($period as $day) {
|
||||
$(document).ready(function() {
|
||||
|
||||
function exportTableToExcel(tableID, filename = '') {
|
||||
let table = document.getElementById(tableID);
|
||||
|
||||
let table = document.getElementById(tableID);
|
||||
|
||||
let cloneTable = table.cloneNode(true); // Clone the table to modify
|
||||
|
||||
|
||||
// Remove hidden rows
|
||||
$(cloneTable).find('tr').filter(function () {
|
||||
$(cloneTable).find('tr').filter(function() {
|
||||
return $(this).css('display') === 'none';
|
||||
}).remove();
|
||||
|
||||
|
||||
// Remove hidden columns
|
||||
$(cloneTable).find('th, td').each(function () {
|
||||
$(cloneTable).find('th, td').each(function() {
|
||||
if ($(this).css('display') === 'none') {
|
||||
$(this).remove();
|
||||
}
|
||||
@ -1424,7 +1419,7 @@ foreach ($period as $day) {
|
||||
|
||||
$(cloneTable).find('tbody tr').each(function() {
|
||||
let firstTd = $(this).find('td').eq(0); // Get the first column (Date)
|
||||
|
||||
|
||||
// Convert Date Format (Assuming it's in YYYY-MM-DD format)
|
||||
let originalDate = firstTd.text().trim(); // Get the text value
|
||||
let parts = originalDate.split('-'); // Split into [YYYY, MM, DD]
|
||||
@ -1494,73 +1489,78 @@ foreach ($period as $day) {
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
|
||||
const list = document.getElementById("sortableList");
|
||||
const list = document.getElementById("sortableList");
|
||||
|
||||
let draggedItem = null;
|
||||
let draggedItem = null;
|
||||
|
||||
function attachDragEvents(item) {
|
||||
item.setAttribute("draggable", "true");
|
||||
function attachDragEvents(item) {
|
||||
item.setAttribute("draggable", "true");
|
||||
|
||||
item.addEventListener("dragstart", (event) => {
|
||||
draggedItem = event.target;
|
||||
event.target.classList.add("dragging");
|
||||
});
|
||||
item.addEventListener("dragstart", (event) => {
|
||||
draggedItem = event.target;
|
||||
event.target.classList.add("dragging");
|
||||
});
|
||||
|
||||
item.addEventListener("dragend", (event) => {
|
||||
event.target.classList.remove("dragging");
|
||||
});
|
||||
}
|
||||
|
||||
list.addEventListener("dragover", (event) => {
|
||||
event.preventDefault(); // Allow dropping
|
||||
const dragging = document.querySelector(".dragging");
|
||||
const closestItem = getClosestItem(list, event.clientY);
|
||||
|
||||
if (closestItem) {
|
||||
list.insertBefore(dragging, closestItem);
|
||||
} else {
|
||||
list.appendChild(dragging);
|
||||
item.addEventListener("dragend", (event) => {
|
||||
event.target.classList.remove("dragging");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
function getClosestItem(container, y) {
|
||||
const items = [...container.querySelectorAll(".sortable-item:not(.dragging)")];
|
||||
list.addEventListener("dragover", (event) => {
|
||||
event.preventDefault(); // Allow dropping
|
||||
const dragging = document.querySelector(".dragging");
|
||||
const closestItem = getClosestItem(list, event.clientY);
|
||||
|
||||
return items.reduce((closest, child) => {
|
||||
const box = child.getBoundingClientRect();
|
||||
const offset = y - box.top - box.height / 2;
|
||||
if (closestItem) {
|
||||
list.insertBefore(dragging, closestItem);
|
||||
} else {
|
||||
list.appendChild(dragging);
|
||||
}
|
||||
});
|
||||
|
||||
return offset < 0 && offset > closest.offset
|
||||
? { offset, element: child }
|
||||
: closest;
|
||||
}, { offset: Number.NEGATIVE_INFINITY }).element;
|
||||
}
|
||||
function getClosestItem(container, y) {
|
||||
const items = [...container.querySelectorAll(".sortable-item:not(.dragging)")];
|
||||
|
||||
// Attach drag events to existing items
|
||||
document.querySelectorAll(".sortable-item").forEach(attachDragEvents);
|
||||
return items.reduce((closest, child) => {
|
||||
const box = child.getBoundingClientRect();
|
||||
const offset = y - box.top - box.height / 2;
|
||||
|
||||
window.removeSelectedMaterial = function (checkbox) {
|
||||
let container = checkbox.closest(".sortable-item");
|
||||
let materialCode = checkbox.value;
|
||||
let materialName = container.querySelector("label").innerText;
|
||||
return offset < 0 && offset > closest.offset ?
|
||||
{
|
||||
offset,
|
||||
element: child
|
||||
} :
|
||||
closest;
|
||||
}, {
|
||||
offset: Number.NEGATIVE_INFINITY
|
||||
}).element;
|
||||
}
|
||||
|
||||
container.remove();
|
||||
};
|
||||
// Attach drag events to existing items
|
||||
document.querySelectorAll(".sortable-item").forEach(attachDragEvents);
|
||||
|
||||
window.addBackToList = function () {
|
||||
let dropdown = document.getElementById("customizeHeader");
|
||||
let selectedOption = dropdown.options[dropdown.selectedIndex];
|
||||
window.removeSelectedMaterial = function(checkbox) {
|
||||
let container = checkbox.closest(".sortable-item");
|
||||
let materialCode = checkbox.value;
|
||||
let materialName = container.querySelector("label").innerText;
|
||||
|
||||
if (selectedOption.value !== "") {
|
||||
let materialCode = selectedOption.value;
|
||||
let materialName = selectedOption.text;
|
||||
container.remove();
|
||||
};
|
||||
|
||||
let container = document.createElement("div");
|
||||
container.classList.add("sortable-item");
|
||||
container.id = materialCode + "_container";
|
||||
container.innerHTML = `
|
||||
window.addBackToList = function() {
|
||||
let dropdown = document.getElementById("customizeHeader");
|
||||
let selectedOption = dropdown.options[dropdown.selectedIndex];
|
||||
|
||||
if (selectedOption.value !== "") {
|
||||
let materialCode = selectedOption.value;
|
||||
let materialName = selectedOption.text;
|
||||
|
||||
let container = document.createElement("div");
|
||||
container.classList.add("sortable-item");
|
||||
container.id = materialCode + "_container";
|
||||
container.innerHTML = `
|
||||
<input type="checkbox" id="${materialCode}_checkboxId"
|
||||
name="customisedMachineCodes[]" value="${materialCode}"
|
||||
onclick="removeSelectedMaterial(this)" checked>
|
||||
@ -1568,26 +1568,24 @@ foreach ($period as $day) {
|
||||
<br>
|
||||
`;
|
||||
|
||||
attachDragEvents(container);
|
||||
|
||||
document.getElementById("sortableList").appendChild(container);
|
||||
}
|
||||
};
|
||||
});
|
||||
attachDragEvents(container);
|
||||
|
||||
document.getElementById("sortableList").appendChild(container);
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$(document).ready(function() {
|
||||
$('#customizeHeader').select2();
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$('#month').change(function(){
|
||||
$('#changeMonthForm').submit();
|
||||
})
|
||||
$('#month').change(function() {
|
||||
$('#changeMonthForm').submit();
|
||||
})
|
||||
|
||||
$('#month').datepicker({
|
||||
format: 'M-yyyy',
|
||||
@ -1596,4 +1594,47 @@ foreach ($period as $day) {
|
||||
autoclose: true,
|
||||
orientation: 'bottom'
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
<script>
|
||||
function toggleDivFullscreen() {
|
||||
let div = document.getElementById("fullscreenDiv");
|
||||
let tableResponsive = document.getElementById("table-responsive"); // Select the table container inside div
|
||||
|
||||
|
||||
|
||||
if (!document.fullscreenElement) {
|
||||
div.requestFullscreen().then(() => {
|
||||
div.style.width = "100vw"; // Full viewport width
|
||||
div.style.height = "100vh"; // Full viewport height
|
||||
|
||||
// If .table-responsive exists, set its height to 90vh
|
||||
if (tableResponsive) {
|
||||
tableResponsive.style.maxHeight = "90vh";
|
||||
tableResponsive.style.overflowY = "auto"; // Allow scrolling if needed
|
||||
}
|
||||
}).catch(err => console.log("Error enabling fullscreen:", err));
|
||||
} else {
|
||||
document.exitFullscreen().then(() => {
|
||||
div.style.width = "100%";
|
||||
div.style.height = "100%";
|
||||
|
||||
// Reset .table-responsive height when exiting fullscreen
|
||||
if (tableResponsive) {
|
||||
tableResponsive.style.height = "auto";
|
||||
}
|
||||
}).catch(err => console.log("Error exiting fullscreen:", err));
|
||||
}
|
||||
}
|
||||
|
||||
$("#searchInput").on("keyup", function () {
|
||||
let value = $(this).val().toLowerCase(); // Convert input to lowercase for case-insensitive search
|
||||
|
||||
$(".table-responsive tbody tr").filter(function () {
|
||||
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
@ -233,11 +233,12 @@
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
max-height: 700px;
|
||||
/* Adjust as needed */
|
||||
max-height: 450px;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
td {
|
||||
min-width: 100px;
|
||||
max-width: 100px;
|
||||
@ -316,67 +317,80 @@ foreach ($period as $day) {
|
||||
|
||||
<div class="row ">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card" id="fullscreenDiv">
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
<form id="changeMonthForm" action="<?= base_url('resinStockDetails'); ?>" method="post">
|
||||
|
||||
<div class="row" >
|
||||
|
||||
<div class="col-2">
|
||||
<input type="text" name="month" id="month" value="<?php echo "$month" ?>"
|
||||
class="form-control mt-2"
|
||||
style="z-index:30;" readonly>
|
||||
</div>
|
||||
|
||||
<div class="col-1 ">
|
||||
<a href="#" >
|
||||
<i class="fa fa-download btn-lg mt-2"
|
||||
style="font-size: x-large;"
|
||||
id="resinStockExport">
|
||||
</i>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
|
||||
<div class="col-2">
|
||||
<input type="text" name="month" id="month" value="<?php echo "$month" ?>"
|
||||
class="form-control mt-2"
|
||||
style="z-index:30;" readonly>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-10 text-right d-flex" style="justify-content: end;" >
|
||||
|
||||
<?php
|
||||
//check it is current month , then only show the custom option
|
||||
if($month == date('M-Y') ){
|
||||
?>
|
||||
<input type="text" id="searchInput" placeholder="Search..."
|
||||
class="mt-2"
|
||||
style="padding: 8px;margin-bottom: 10px;width: 250px;border: 1px solid #ccc;
|
||||
border-radius: 5px;margin-right:15px;">
|
||||
|
||||
<div class="col-6">
|
||||
|
||||
|
||||
<?php
|
||||
|
||||
if($month == date('M-Y') ){
|
||||
?>
|
||||
<i class="fa fa-cog btn-lg mt-2"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
title = "Customize"
|
||||
data-target="#customizeModalId"
|
||||
data-toggle="modal">
|
||||
|
||||
</i>
|
||||
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
<i class="fa fa-rocket btn-lg mt-2"
|
||||
title="Navigation"
|
||||
data-toggle="modal"
|
||||
data-target="#bs-example-modal-lg"
|
||||
style="font-size: x-large; cursor:pointer;">
|
||||
</i>
|
||||
|
||||
<i class="fa fa-download btn-lg mt-2"
|
||||
title="Excel Download"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
id="resinStockExport">
|
||||
</i>
|
||||
|
||||
<i class="fe-maximize noti-icon btn-lg mt-2"
|
||||
title="Full Screen"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
onclick="toggleDivFullscreen()" >
|
||||
</i>
|
||||
|
||||
|
||||
<i class="fas fa-save btn-lg mt-2"
|
||||
title="Save"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
id="saveId" >
|
||||
</i>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-3 m-0">
|
||||
<button type="button" class="btn " style="background-color:maroon;color:white" data-target="#customizeModalId"
|
||||
data-toggle="modal">
|
||||
Customize
|
||||
</button>
|
||||
|
||||
<?php
|
||||
} else { ?>
|
||||
<div class="col-7">
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<a class="btn btn-secondary" data-toggle="modal" data-target="#bs-example-modal-lg">Navigation</a>
|
||||
|
||||
<input type="button" class="btn btn-success px-4" id="saveId" value="Save">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</form>
|
||||
|
||||
|
||||
<form action="<?= base_url('resinStockDetails'); ?>" method="post">
|
||||
@ -466,7 +480,7 @@ foreach ($period as $day) {
|
||||
|
||||
|
||||
|
||||
<div class="table-responsive" >
|
||||
<div class="table-responsive" id="table-responsive">
|
||||
<table id="resinStockDetailsTableId" class="fht-table ">
|
||||
|
||||
<thead class="celda_encabezado_general" style="padding: 10px;">
|
||||
@ -757,7 +771,7 @@ foreach ($period as $day) {
|
||||
<!-- bag Dropdown -->
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="resinDropdown">Select Bag</label>
|
||||
<label for="resinDropdown">Select Machine</label>
|
||||
<select id="resinDropdown" class="form-control select2">
|
||||
<option value="">Select Resin</option>
|
||||
<?php foreach ($resinMaterials as $resinMaterial): ?>
|
||||
@ -832,7 +846,7 @@ foreach ($period as $day) {
|
||||
|
||||
let targetColumnIndex = -1;
|
||||
headerCells.forEach((header, index) => {
|
||||
if ((header.innerText.trim()) === selectedResin.trim()) {
|
||||
if (header.innerText.replace(/\s+/g, '') === selectedResin.replace(/\s+/g, '')) {
|
||||
targetColumnIndex = index;
|
||||
return;
|
||||
}
|
||||
@ -867,9 +881,9 @@ foreach ($period as $day) {
|
||||
targetColumnIndex = targetColumnIndex * 7;
|
||||
|
||||
targetRow.cells[targetColumnIndex].scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
inline: 'center',
|
||||
block: 'center'
|
||||
behavior: 'smooth',
|
||||
inline: 'center',
|
||||
block: 'center'
|
||||
});
|
||||
|
||||
const highlightDuration = 10000;
|
||||
@ -1290,4 +1304,46 @@ foreach ($period as $day) {
|
||||
autoclose: true,
|
||||
orientation: 'bottom'
|
||||
})
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function toggleDivFullscreen() {
|
||||
let div = document.getElementById("fullscreenDiv");
|
||||
let tableResponsive = document.getElementById("table-responsive"); // Select the table container inside div
|
||||
|
||||
|
||||
|
||||
if (!document.fullscreenElement) {
|
||||
div.requestFullscreen().then(() => {
|
||||
div.style.width = "100vw"; // Full viewport width
|
||||
div.style.height = "100vh"; // Full viewport height
|
||||
|
||||
// If .table-responsive exists, set its height to 90vh
|
||||
if (tableResponsive) {
|
||||
tableResponsive.style.maxHeight = "90vh";
|
||||
tableResponsive.style.overflowY = "auto"; // Allow scrolling if needed
|
||||
}
|
||||
}).catch(err => console.log("Error enabling fullscreen:", err));
|
||||
} else {
|
||||
document.exitFullscreen().then(() => {
|
||||
div.style.width = "100%";
|
||||
div.style.height = "100%";
|
||||
|
||||
// Reset .table-responsive height when exiting fullscreen
|
||||
if (tableResponsive) {
|
||||
tableResponsive.style.height = "auto";
|
||||
}
|
||||
}).catch(err => console.log("Error exiting fullscreen:", err));
|
||||
}
|
||||
}
|
||||
|
||||
$("#searchInput").on("keyup", function () {
|
||||
let value = $(this).val().toLowerCase(); // Convert input to lowercase for case-insensitive search
|
||||
|
||||
$(".table-responsive tbody tr").filter(function () {
|
||||
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@ -220,11 +220,28 @@
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
max-height: 700px;
|
||||
/* Adjust as needed */
|
||||
max-height: 500px;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Adjust heights based on screen zoom */
|
||||
@media only screen and (min-height: 1400px) { /* Approximate Zoom < 100% */
|
||||
.table-responsive { max-height: 425px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 1200px) { /* Approximate Zoom ~ 90% */
|
||||
.table-responsive { max-height: 500px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 1000px) { /* Approximate Zoom ~ 80% */
|
||||
.table-responsive { max-height: 600px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 800px) { /* Approximate Zoom ~ 75% */
|
||||
.table-responsive { max-height: 650px; }
|
||||
}
|
||||
|
||||
td {
|
||||
min-width: 150px;
|
||||
max-width: 150px;
|
||||
@ -280,54 +297,84 @@
|
||||
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="row" align="center">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body" style="padding-left:300px;">
|
||||
<div class="card" id="fullscreenDiv">
|
||||
<div class="card-body" >
|
||||
|
||||
|
||||
<form id="changeMonthForm" action="<?= base_url('trpSandUseStockDetails'); ?>" method="post">
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="row mt-2">
|
||||
<?php $today = date('M-Y'); ?>
|
||||
<div class="col-3">
|
||||
</div>
|
||||
|
||||
<div class="col-2">
|
||||
<input type="text" name="month" id="month" value="<?php echo $month; ?>"
|
||||
class="form-control" data-provide="datepicker"
|
||||
data-date-format="M-yyyy" data-date-min-view-mode="1" readonly>
|
||||
<div class="col-2 mt-2">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-1">
|
||||
<a href="#" >
|
||||
<i class="fa fa-download btn-lg"
|
||||
style="font-size: x-large;"
|
||||
id="trpSandUseStockExport">
|
||||
</i>
|
||||
</a>
|
||||
<input type="text" name="month" id="month" value="<?php echo "$month" ?>"
|
||||
class="form-control "
|
||||
data-provide="datepicker"
|
||||
data-date-format="M-yyyy"
|
||||
data-date-min-view-mode="1" readonly
|
||||
style="max-width: 175px;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-2">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-2">
|
||||
<a style="cursor:pointer"
|
||||
class="btn btn-secondary " data-toggle="modal" data-target="#filterModalId">
|
||||
Date Filter
|
||||
</a>
|
||||
<button class="btn btn-success m-0 px-3" type="button" id="saveId">Save</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-3 text-right d-flex" style="justify-content: end;" >
|
||||
|
||||
<input type="text" id="searchInput" placeholder="Search..."
|
||||
class="mt-2"
|
||||
style="padding: 8px;margin-bottom: 10px;width: 150px;border: 1px solid #ccc;
|
||||
border-radius: 5px;margin-right:15px;">
|
||||
|
||||
|
||||
<i class="fa fa-table btn-lg mt-2"
|
||||
title="Date Range Filter"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
data-toggle="modal"
|
||||
data-target="#filterModalId">
|
||||
|
||||
</i>
|
||||
|
||||
<i class="fa fa-download btn-lg mt-2"
|
||||
title="Excel Download"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
id="trpSandUseStockExport">
|
||||
</i>
|
||||
|
||||
<i class="fe-maximize noti-icon btn-lg mt-2"
|
||||
title="Full Screen"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
onclick="toggleDivFullscreen()" >
|
||||
</i>
|
||||
|
||||
|
||||
<i class="fa fa-save btn-lg mt-2"
|
||||
title="Save"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
id="saveId"
|
||||
>
|
||||
</i>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-2">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
<div class="table-responsive">
|
||||
<div class="table-responsive" id="table-responsive">
|
||||
<table style="width: 700px;" id="trpSandUseStockDetailsTableId" class="fht-table ">
|
||||
|
||||
<thead class="celda_encabezado_general" >
|
||||
@ -931,3 +978,47 @@
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
function toggleDivFullscreen() {
|
||||
let div = document.getElementById("fullscreenDiv");
|
||||
let tableResponsive = document.getElementById("table-responsive"); // Select the table container inside div
|
||||
|
||||
|
||||
|
||||
if (!document.fullscreenElement) {
|
||||
div.requestFullscreen().then(() => {
|
||||
div.style.width = "100vw"; // Full viewport width
|
||||
div.style.height = "100vh"; // Full viewport height
|
||||
|
||||
// If .table-responsive exists, set its height to 90vh
|
||||
if (tableResponsive) {
|
||||
tableResponsive.style.maxHeight = "90vh";
|
||||
tableResponsive.style.overflowY = "auto"; // Allow scrolling if needed
|
||||
}
|
||||
}).catch(err => console.log("Error enabling fullscreen:", err));
|
||||
} else {
|
||||
document.exitFullscreen().then(() => {
|
||||
div.style.width = "100%";
|
||||
div.style.height = "100%";
|
||||
|
||||
// Reset .table-responsive height when exiting fullscreen
|
||||
if (tableResponsive) {
|
||||
tableResponsive.style.height = "auto";
|
||||
}
|
||||
}).catch(err => console.log("Error exiting fullscreen:", err));
|
||||
}
|
||||
}
|
||||
|
||||
$("#searchInput").on("keyup", function () {
|
||||
let value = $(this).val().toLowerCase(); // Convert input to lowercase for case-insensitive search
|
||||
|
||||
$(".table-responsive tbody tr").filter(function () {
|
||||
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user