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 {
|
.table-responsive {
|
||||||
|
overflow-x: auto;
|
||||||
overflow-y: 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 {
|
.fht-table thead th {
|
||||||
@ -302,54 +322,72 @@
|
|||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="card">
|
<div class="card" id="fullscreenDiv">
|
||||||
<form id="changeMonthForm" method='post' action="<?= base_url('/coatingMachineDetails'); ?>">
|
<form id="changeMonthForm" method='post' action="<?= base_url('/coatingMachineDetails'); ?>">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
|
|
||||||
<div class=form-row>
|
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
|
<?php $today = date('M-Y'); ?>
|
||||||
<div class="col-2">
|
<div class="col-2">
|
||||||
<input type="text"
|
|
||||||
value="<?= $month; ?>" name="month"
|
|
||||||
class="form-control monthpicker" id="monthpicker" readonly>
|
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
<div class="col-1 ">
|
|
||||||
<a href="#" >
|
|
||||||
<i class="fa fa-download btn-lg"
|
<div class="col-10 text-right d-flex" style="justify-content: end;" >
|
||||||
style="font-size: x-large;"
|
|
||||||
|
<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">
|
id="coatingMachineDetailsExport">
|
||||||
</i>
|
</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>
|
||||||
|
|
||||||
|
|
||||||
<div class="col-7">
|
|
||||||
|
|
||||||
</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="#coatingMachineDetailModal"
|
|
||||||
data-toggle="modal">
|
|
||||||
Add Record
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<div class="table-responsive">
|
<div class="table-responsive" id="table-responsive">
|
||||||
<table id="coatingMachineDetailTableId" class="fht-table "
|
<table id="coatingMachineDetailTableId" class="fht-table "
|
||||||
style="background-color:#fff;">
|
style="background-color:#fff;">
|
||||||
|
|
||||||
@ -1752,3 +1790,45 @@ $(document).ready(function () {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- onchange of month submit will happen -->
|
<!-- 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>
|
||||||
@ -226,10 +226,12 @@
|
|||||||
.table-responsive {
|
.table-responsive {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
max-height: 700px; /* Adjust as needed */
|
max-height: 450px;
|
||||||
|
max-width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
td{
|
td{
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
max-width: 100px;
|
max-width: 100px;
|
||||||
@ -313,7 +315,53 @@
|
|||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12">
|
<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">
|
<div class="card-body">
|
||||||
|
|
||||||
|
|
||||||
@ -327,53 +375,60 @@
|
|||||||
style="z-index:30;" readonly>
|
style="z-index:30;" readonly>
|
||||||
</div>
|
</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
|
<?php
|
||||||
//check it is current month , then only show the custom option
|
|
||||||
if($month == date('M-Y') ){
|
if($month == date('M-Y') ){
|
||||||
?>
|
?>
|
||||||
|
<i class="fa fa-cog btn-lg mt-2"
|
||||||
<div class="col-6">
|
style="font-size: x-large; cursor:pointer;"
|
||||||
|
title = "Customize"
|
||||||
|
data-target="#customizeModalId"
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-3 m-0">
|
|
||||||
<button type="button" class="btn " style="background-color:maroon;color:white" data-target="#customizeModalId"
|
|
||||||
data-toggle="modal">
|
data-toggle="modal">
|
||||||
Customize
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<?php
|
</i>
|
||||||
} 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> -->
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="col-2">
|
|
||||||
<?php
|
<?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">
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<i class="fas fa-save btn-lg mt-2"
|
||||||
|
title="Save"
|
||||||
|
style="font-size: x-large; cursor:pointer;"
|
||||||
|
id="saveId" >
|
||||||
|
</i>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
@ -463,7 +518,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="table-responsive">
|
<div class="table-responsive" id="table-responsive">
|
||||||
<table id="bagStockDetailsTableId" class="fht-table">
|
<table id="bagStockDetailsTableId" class="fht-table">
|
||||||
|
|
||||||
<thead class="celda_encabezado_general bag-table-head" style="padding: 10px;">
|
<thead class="celda_encabezado_general bag-table-head" style="padding: 10px;">
|
||||||
@ -759,8 +814,8 @@
|
|||||||
|
|
||||||
|
|
||||||
<div >
|
<div >
|
||||||
<div class="modal fade" id="bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
|
<!-- <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-dialog modal-md" >
|
||||||
<div class="modal-content" >
|
<div class="modal-content" >
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h4 class="modal-title" id="myLargeModalLabel">Navigation Options</h4>
|
<h4 class="modal-title" id="myLargeModalLabel">Navigation Options</h4>
|
||||||
@ -803,7 +858,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div><!-- /.modal-content -->
|
</div><!-- /.modal-content -->
|
||||||
</div><!-- /.modal-dialog -->
|
</div><!-- /.modal-dialog -->
|
||||||
</div><!-- /.modal -->
|
</div>/.modal -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@ -830,7 +885,7 @@
|
|||||||
|
|
||||||
let targetColumnIndex = -1;
|
let targetColumnIndex = -1;
|
||||||
headerCells.forEach((header, index) => {
|
headerCells.forEach((header, index) => {
|
||||||
if ((header.innerText.trim()) === selectedBag.trim()) {
|
if (header.innerText.replace(/\s+/g, '') === selectedBag.replace(/\s+/g, '')) {
|
||||||
targetColumnIndex = index;
|
targetColumnIndex = index;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -1342,3 +1397,53 @@ $(document).ready(function () {
|
|||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</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>
|
||||||
@ -224,10 +224,12 @@
|
|||||||
.table-responsive {
|
.table-responsive {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
max-height: 700px; /* Adjust as needed */
|
max-height: 450px;
|
||||||
|
max-width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
td{
|
td{
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
max-width: 100px;
|
max-width: 100px;
|
||||||
@ -307,11 +309,12 @@ foreach ($period as $day) {
|
|||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="card">
|
<div class="card" id="fullscreenDiv">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
|
|
||||||
<form id="changeMonthForm" action="<?= base_url('dieselMachineDetails'); ?>" method="post">
|
<form id="changeMonthForm" action="<?= base_url('dieselMachineDetails'); ?>" method="post">
|
||||||
|
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<div class="col-2">
|
<div class="col-2">
|
||||||
@ -320,52 +323,60 @@ foreach ($period as $day) {
|
|||||||
style="z-index:30;" readonly>
|
style="z-index:30;" readonly>
|
||||||
</div>
|
</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>
|
|
||||||
|
|
||||||
|
|
||||||
|
<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
|
<?php
|
||||||
//check it is current month , then only show the custom option
|
|
||||||
if($month == date('M-Y') ){
|
if($month == date('M-Y') ){
|
||||||
?>
|
?>
|
||||||
|
<i class="fa fa-cog btn-lg mt-2"
|
||||||
<div class="col-6">
|
style="font-size: x-large; cursor:pointer;"
|
||||||
|
title = "Customize"
|
||||||
</div>
|
data-target="#customizeModalId"
|
||||||
|
|
||||||
<div class="col-3 m-0">
|
|
||||||
|
|
||||||
<button type="button" class="btn " style="background-color:maroon;color:white" data-target="#customizeModalId"
|
|
||||||
data-toggle="modal">
|
data-toggle="modal">
|
||||||
Customize
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<?php
|
</i>
|
||||||
} else { ?>
|
|
||||||
<div class="col-7">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="col-2">
|
|
||||||
<?php
|
<?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">
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@ -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">
|
<table id="dieselStockDetailsTableId" class="fht-table">
|
||||||
|
|
||||||
<thead class="celda_encabezado_general" style="padding: 10px;">
|
<thead class="celda_encabezado_general" style="padding: 10px;">
|
||||||
@ -930,7 +941,7 @@ foreach ($period as $day) {
|
|||||||
<!-- bag Dropdown -->
|
<!-- bag Dropdown -->
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="dieselDropdown">Select Bag</label>
|
<label for="dieselDropdown">Select Machine</label>
|
||||||
<select id="dieselDropdown" class="form-control select2">
|
<select id="dieselDropdown" class="form-control select2">
|
||||||
<option value="">Select Diesel</option>
|
<option value="">Select Diesel</option>
|
||||||
<?php foreach ($dieselMachines as $dieselMachine): ?>
|
<?php foreach ($dieselMachines as $dieselMachine): ?>
|
||||||
@ -982,7 +993,7 @@ foreach ($period as $day) {
|
|||||||
|
|
||||||
let targetColumnIndex = -1;
|
let targetColumnIndex = -1;
|
||||||
headerCells.forEach((header, index) => {
|
headerCells.forEach((header, index) => {
|
||||||
if ((header.innerText.trim()) === selectedDiesel.trim()) {
|
if (header.innerText.replace(/\s+/g, '') === selectedDiesel.replace(/\s+/g, '')) {
|
||||||
targetColumnIndex = index;
|
targetColumnIndex = index;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -1014,7 +1025,7 @@ foreach ($period as $day) {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
targetColumnIndex = targetColumnIndex * 7;
|
targetColumnIndex = (targetColumnIndex * 8) - 4;
|
||||||
|
|
||||||
targetRow.cells[targetColumnIndex].scrollIntoView({
|
targetRow.cells[targetColumnIndex].scrollIntoView({
|
||||||
behavior: 'smooth',
|
behavior: 'smooth',
|
||||||
@ -1023,7 +1034,7 @@ foreach ($period as $day) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const highlightDuration = 10000;
|
const highlightDuration = 10000;
|
||||||
for (let i = targetColumnIndex - 4; i <= targetColumnIndex; i++) {
|
for (let i = targetColumnIndex - 5; i <= targetColumnIndex; i++) {
|
||||||
const cell = targetRow.cells[i];
|
const cell = targetRow.cells[i];
|
||||||
if (cell) {
|
if (cell) {
|
||||||
|
|
||||||
@ -1650,3 +1661,45 @@ foreach ($period as $day) {
|
|||||||
orientation: 'bottom'
|
orientation: 'bottom'
|
||||||
})
|
})
|
||||||
</script>
|
</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 {
|
.table-responsive {
|
||||||
|
overflow-x: auto;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
max-height: 700px;
|
max-height: 500px;
|
||||||
|
max-width: 100%;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.fht-table thead th {
|
.fht-table thead th {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -300,55 +304,78 @@ $datefordropdown = format_date($datefordropdown, 0, 'M-Y');
|
|||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="card">
|
<div class="card" id="fullscreenDiv">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
|
|
||||||
|
|
||||||
<form id="changeMonthForm" action="<?= base_url('drierMachineDetails'); ?>" method="post">
|
<form id="changeMonthForm" action="<?= base_url('drierMachineDetails'); ?>" method="post">
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<div class="col-2">
|
|
||||||
<?php $today = date('M-Y'); ?>
|
<?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>
|
<div class="col-2">
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
<div class="col-1">
|
|
||||||
<a href="#" >
|
|
||||||
<i class="fa fa-download btn-lg"
|
<div class="col-10 text-right d-flex" style="justify-content: end;" >
|
||||||
style="font-size: x-large;"
|
|
||||||
|
<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">
|
id="drierMachineDetailsExport">
|
||||||
</i>
|
</i>
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
<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 class="col-7">
|
|
||||||
<!-- right now client is not using this -->
|
|
||||||
|
|
||||||
|
|
||||||
</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>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Add table-responsive for horizontal scroll -->
|
<!-- 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;">
|
<table id="drierTable" class="fht-table " style="background-color:#fff;">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<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>
|
</script>
|
||||||
@ -233,11 +233,28 @@
|
|||||||
.table-responsive {
|
.table-responsive {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
max-height: 700px;
|
max-height: 500px;
|
||||||
/* Adjust as needed */
|
max-width: 100%;
|
||||||
position: relative;
|
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 {
|
td {
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
max-width: 100px;
|
max-width: 100px;
|
||||||
@ -291,44 +308,75 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="row">
|
<div class="row" align="center">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="card">
|
<div class="card" id="fullscreenDiv">
|
||||||
<div class="card-body" style="padding-left:300px;">
|
<div class="card-body" >
|
||||||
|
|
||||||
|
|
||||||
<form id="changeMonthForm" action="<?= base_url('dustAndRoughStockDetails'); ?>" method="post">
|
<form id="changeMonthForm" action="<?= base_url('dustAndRoughStockDetails'); ?>" method="post">
|
||||||
|
|
||||||
|
|
||||||
<div class="row mt-2">
|
<div class="row">
|
||||||
|
|
||||||
<div class="col-2">
|
<?php $today = date('M-Y'); ?>
|
||||||
<input type="text" name="month" id="month" value="<?php echo $month; ?>"
|
<div class="col-3">
|
||||||
class="form-control" data-provide="datepicker"
|
</div>
|
||||||
data-date-format="M-yyyy" data-date-min-view-mode="1" readonly>
|
|
||||||
|
<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">
|
|
||||||
<a href="#" >
|
|
||||||
<i class="fa fa-download btn-lg"
|
<div class="col-3 text-right d-flex" style="justify-content: end;" >
|
||||||
style="font-size: x-large;"
|
|
||||||
|
<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">
|
id="dustAndRoughStockExport">
|
||||||
</i>
|
</i>
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
<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 class="col-1">
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-2">
|
<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>
|
</div>
|
||||||
@ -338,7 +386,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="table-responsive">
|
<div class="table-responsive" id="table-responsive">
|
||||||
<table style="width: 700px;" id="dustAndRoughStockDetailsTableId" class="fht-table ">
|
<table style="width: 700px;" id="dustAndRoughStockDetailsTableId" class="fht-table ">
|
||||||
|
|
||||||
<thead class="celda_encabezado_general" style="padding: 10px;">
|
<thead class="celda_encabezado_general" style="padding: 10px;">
|
||||||
@ -896,3 +944,44 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</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>
|
||||||
@ -215,10 +215,28 @@
|
|||||||
.table-responsive {
|
.table-responsive {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
max-height: 700px; /* Adjust as needed */
|
max-height: 500px;
|
||||||
|
max-width: 100%;
|
||||||
position: relative;
|
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{
|
td{
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
max-width: 100px;
|
max-width: 100px;
|
||||||
@ -267,54 +285,74 @@
|
|||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="card">
|
<div class="card" id="fullscreenDiv">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
|
|
||||||
|
|
||||||
<form id="changeMonthForm" action="<?= base_url('gasStockDetails'); ?>" method="post">
|
<form id="changeMonthForm" action="<?= base_url('gasStockDetails'); ?>" method="post">
|
||||||
|
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<div class="col-2">
|
|
||||||
<?php $today = date('M-Y'); ?>
|
<?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>
|
<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>
|
</div>
|
||||||
|
|
||||||
<div class="col-1 ">
|
|
||||||
<a href="#" >
|
|
||||||
<i class="fa fa-download btn-lg"
|
<div class="col-10 text-right d-flex" style="justify-content: end;" >
|
||||||
style="font-size: x-large;"
|
|
||||||
|
<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">
|
id="gasStockDetailsExport">
|
||||||
</i>
|
</i>
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
<i class="fe-maximize noti-icon btn-lg mt-2"
|
||||||
|
title="Full Screen"
|
||||||
<div class="col-7">
|
style="font-size: x-large; cursor:pointer;"
|
||||||
<!-- right now client is not using this -->
|
onclick="toggleDivFullscreen()" >
|
||||||
|
</i>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
<i class="fa fa-save btn-lg mt-2"
|
||||||
|
title="Save"
|
||||||
<div class="col-2">
|
style="font-size: x-large; cursor:pointer;"
|
||||||
|
id="saveId"
|
||||||
<a style="cursor:pointer"
|
>
|
||||||
class="btn btn-secondary" data-toggle="modal" data-target="#filterModalId">
|
</i>
|
||||||
Date Filter</a>
|
|
||||||
|
|
||||||
<button type="button" class="btn btn-success m-0 px-4" id="saveId" >
|
|
||||||
Save
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|
||||||
<div class="table-responsive">
|
<div class="table-responsive" id="table-responsive">
|
||||||
<table id="gasStockDetailsTableId" class="fht-table">
|
<table id="gasStockDetailsTableId" class="fht-table">
|
||||||
|
|
||||||
<thead class="celda_encabezado_general" style="padding: 10px;">
|
<thead class="celda_encabezado_general" style="padding: 10px;">
|
||||||
@ -1222,3 +1260,45 @@ function convertToDate(dateString) {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
</script>
|
</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 {
|
.table-responsive {
|
||||||
|
overflow-x: auto;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
max-height: 700px;
|
max-height: 450px;
|
||||||
|
max-width: 100%;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.fht-table thead th {
|
.fht-table thead th {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -307,35 +312,56 @@
|
|||||||
|
|
||||||
<div class="row" style="padding:0 px !important;">
|
<div class="row" style="padding:0 px !important;">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="card">
|
<div class="card" id="fullscreenDiv">
|
||||||
<div class="card-body" >
|
<div class="card-body" >
|
||||||
|
|
||||||
<form id="changeMonthForm" action="<?= base_url('incomingSilicaSandDetails'); ?>" method="post">
|
<form id="changeMonthForm" action="<?= base_url('incomingSilicaSandDetails'); ?>" method="post">
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
||||||
<div class="col-2">
|
<div class="col-2">
|
||||||
<?php $today = date('M-Y'); ?>
|
<?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="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 ?>">
|
<input type="hidden" name="remark" id="remark" value="<?php echo $remark ?>">
|
||||||
</div>
|
</div>
|
||||||
<div class="col-1 ">
|
|
||||||
<a href="#" >
|
|
||||||
<i class="fa fa-download btn-lg"
|
|
||||||
style="font-size: x-large;"
|
<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">
|
id="incomingSilicaSandDetailsExport">
|
||||||
</i>
|
</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>
|
||||||
<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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<!-- Add table-responsive for horizontal scroll -->
|
<!-- Add table-responsive for horizontal scroll -->
|
||||||
<div class="table-responsive">
|
<div class="table-responsive" id="table-responsive">
|
||||||
<table id="incomingSilicaSandDetailsTable" class="fht-table table " >
|
<table id="incomingSilicaSandDetailsTable" class="fht-table table " >
|
||||||
<thead >
|
<thead >
|
||||||
<tr>
|
<tr>
|
||||||
@ -1902,3 +1928,46 @@ $(document).ready(function() {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
</script>
|
</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 {
|
.grab {
|
||||||
cursor: grab; /* Default open-hand cursor */
|
cursor: grab;
|
||||||
|
/* Default open-hand cursor */
|
||||||
}
|
}
|
||||||
|
|
||||||
.grab:active {
|
.grab:active {
|
||||||
cursor: grabbing; /* Closed-hand cursor when dragging */
|
cursor: grabbing;
|
||||||
|
/* Closed-hand cursor when dragging */
|
||||||
}
|
}
|
||||||
|
|
||||||
.fht-table td:hover {
|
.fht-table td:hover {
|
||||||
background-color: rgb(170, 222, 167);
|
background-color: rgb(170, 222, 167);
|
||||||
color:rgb(2, 2, 2);
|
color: rgb(2, 2, 2);
|
||||||
transform: scale(1.25); /* Increases size by 25% */
|
transform: scale(1.25);
|
||||||
transition: transform 0.5s ease-in-out; /* Smooth scaling effect */
|
/* Increases size by 25% */
|
||||||
|
transition: transform 0.5s ease-in-out;
|
||||||
|
/* Smooth scaling effect */
|
||||||
}
|
}
|
||||||
|
|
||||||
.fht-table tr:hover {
|
.fht-table tr:hover {
|
||||||
background-color: rgb(170, 222, 167);
|
background-color: rgb(170, 222, 167);
|
||||||
color:rgb(2, 2, 2);
|
color: rgb(2, 2, 2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -228,27 +232,11 @@
|
|||||||
.table-responsive {
|
.table-responsive {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
max-height: 500px;
|
max-height: 450px;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
position: relative;
|
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 {
|
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%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
.card-body{
|
|
||||||
padding-top : 0;
|
.card-body {
|
||||||
|
padding-top: 0;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
.card{ margin-bottom: 5px;}
|
|
||||||
|
|
||||||
|
|
||||||
|
.card {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
@ -328,12 +318,13 @@ foreach ($period as $day) {
|
|||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="card">
|
<div class="card" id="fullscreenDiv">
|
||||||
<div class="card-body">
|
<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="row">
|
||||||
|
|
||||||
<div class="col-2">
|
<div class="col-2">
|
||||||
@ -342,49 +333,60 @@ foreach ($period as $day) {
|
|||||||
style="z-index:30;" readonly>
|
style="z-index:30;" readonly>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-1 ">
|
|
||||||
<a href="#" >
|
|
||||||
<i class="fa fa-download btn-lg mt-2"
|
|
||||||
style="font-size: x-large;"
|
|
||||||
id="powerConsumptionExport">
|
|
||||||
</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
|
<?php
|
||||||
//check it is current month , then only show the custom option
|
|
||||||
if($month == date('M-Y') ){
|
if ($month == date('M-Y')) {
|
||||||
?>
|
?>
|
||||||
|
<i class="fa fa-cog btn-lg mt-2"
|
||||||
<div class="col-6">
|
style="font-size: x-large; cursor:pointer;"
|
||||||
|
title="Customize"
|
||||||
</div>
|
data-target="#customizeModalId"
|
||||||
|
|
||||||
<div class="col-3 m-0">
|
|
||||||
<button type="button" class="btn " style="background-color:maroon;color:white" data-target="#customizeModalId"
|
|
||||||
data-toggle="modal">
|
data-toggle="modal">
|
||||||
Customize
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<?php
|
</i>
|
||||||
} else { ?>
|
|
||||||
<div class="col-7">
|
|
||||||
</div>
|
|
||||||
<div class="col-2">
|
|
||||||
<?php
|
<?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">
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
<i class="fas fa-save btn-lg mt-2"
|
||||||
|
title="Save"
|
||||||
|
style="font-size: x-large; cursor:pointer;"
|
||||||
|
id="saveId">
|
||||||
|
</i>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
@ -415,10 +417,10 @@ foreach ($period as $day) {
|
|||||||
<select id="customizeHeader" class="form-control" onchange="addBackToList()">
|
<select id="customizeHeader" class="form-control" onchange="addBackToList()">
|
||||||
<option value="">Select</option>
|
<option value="">Select</option>
|
||||||
<?php
|
<?php
|
||||||
foreach($activeElectricMachines as $index => $activeElectricMachine){ ?>
|
foreach ($activeElectricMachines as $index => $activeElectricMachine) { ?>
|
||||||
|
|
||||||
<option value="<?=$activeElectricMachine['id']?>">
|
<option value="<?= $activeElectricMachine['id'] ?>">
|
||||||
<?=$activeElectricMachine['id']?> - <?=$activeElectricMachine['machine_name']?>
|
<?= $activeElectricMachine['id'] ?> - <?= $activeElectricMachine['machine_name'] ?>
|
||||||
</option>
|
</option>
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
@ -442,11 +444,11 @@ foreach ($period as $day) {
|
|||||||
<?php foreach ($electricMachines as $electricMachine): ?>
|
<?php foreach ($electricMachines as $electricMachine): ?>
|
||||||
|
|
||||||
<div class="sortable-item" draggable="true" id="<?= $electricMachine['id'] ?>_container">
|
<div class="sortable-item" draggable="true" id="<?= $electricMachine['id'] ?>_container">
|
||||||
<input type = "checkbox"
|
<input type="checkbox"
|
||||||
id = "<?= $electricMachine['id'] ?>_checkboxId"
|
id="<?= $electricMachine['id'] ?>_checkboxId"
|
||||||
name = "customisedMachineCodes[]"
|
name="customisedMachineCodes[]"
|
||||||
value = "<?= $electricMachine['id'] ?>"
|
value="<?= $electricMachine['id'] ?>"
|
||||||
onclick = "removeSelectedMaterial(this)"
|
onclick="removeSelectedMaterial(this)"
|
||||||
checked>
|
checked>
|
||||||
<label class="grab" for="<?= $electricMachine['id'] ?>_checkboxId">
|
<label class="grab" for="<?= $electricMachine['id'] ?>_checkboxId">
|
||||||
<?= $electricMachine['id'] ?> - <?= $electricMachine['machine_name']; ?>
|
<?= $electricMachine['id'] ?> - <?= $electricMachine['machine_name']; ?>
|
||||||
@ -468,14 +470,13 @@ foreach ($period as $day) {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- hidden fields -->
|
<!-- hidden fields -->
|
||||||
<input type="hidden" name="month" value="<?php echo "$month" ?>"
|
<input type="hidden" name="month" value="<?php echo "$month" ?>">
|
||||||
>
|
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="table-responsive">
|
<div class="table-responsive" id="table-responsive">
|
||||||
<table id="powerStockDetailsTableId" class="fht-table">
|
<table id="powerStockDetailsTableId" class="fht-table">
|
||||||
|
|
||||||
<thead class="celda_encabezado_general" style="padding: 10px;">
|
<thead class="celda_encabezado_general" style="padding: 10px;">
|
||||||
@ -529,7 +530,7 @@ foreach ($period as $day) {
|
|||||||
|
|
||||||
<tbody style="background-color: #fff;">
|
<tbody style="background-color: #fff;">
|
||||||
|
|
||||||
<?php if (!empty($totalPower)){
|
<?php if (!empty($totalPower)) {
|
||||||
|
|
||||||
$summary = [];
|
$summary = [];
|
||||||
|
|
||||||
@ -881,13 +882,11 @@ foreach ($period as $day) {
|
|||||||
|
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
foreach($previousMonthPowerConsumptionStockDetails as $index => $previousMonthPowerConsumptionStockDetail)
|
foreach ($previousMonthPowerConsumptionStockDetails as $index => $previousMonthPowerConsumptionStockDetail) {
|
||||||
{
|
if ($previousMonthPowerConsumptionStockDetail['machine_id'] == $powerMachine['id']) {
|
||||||
if($previousMonthPowerConsumptionStockDetail['machine_id'] == $powerMachine['id']){
|
echo $previousMonthPowerConsumptionStockDetail['closing_units'];
|
||||||
echo $previousMonthPowerConsumptionStockDetail['closing_units'] ;
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
@ -899,13 +898,11 @@ foreach ($period as $day) {
|
|||||||
contenteditable="true">
|
contenteditable="true">
|
||||||
|
|
||||||
<?php
|
<?php
|
||||||
foreach($previousMonthPowerConsumptionStockDetails as $index => $previousMonthPowerConsumptionStockDetail)
|
foreach ($previousMonthPowerConsumptionStockDetails as $index => $previousMonthPowerConsumptionStockDetail) {
|
||||||
{
|
if ($previousMonthPowerConsumptionStockDetail['machine_id'] == $powerMachine['id']) {
|
||||||
if($previousMonthPowerConsumptionStockDetail['machine_id'] == $powerMachine['id']){
|
echo $previousMonthPowerConsumptionStockDetail['closing_units'];
|
||||||
echo $previousMonthPowerConsumptionStockDetail['closing_units'] ;
|
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
|
|
||||||
@ -950,7 +947,7 @@ foreach ($period as $day) {
|
|||||||
<!-- bag Dropdown -->
|
<!-- bag Dropdown -->
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="powerDropdown">Select Bag</label>
|
<label for="powerDropdown">Select Machine</label>
|
||||||
<select id="powerDropdown" class="form-control select2">
|
<select id="powerDropdown" class="form-control select2">
|
||||||
<option value="">Select Electric Machines</option>
|
<option value="">Select Electric Machines</option>
|
||||||
<?php foreach ($electricMachines as $powerMachine): ?>
|
<?php foreach ($electricMachines as $powerMachine): ?>
|
||||||
@ -987,7 +984,7 @@ foreach ($period as $day) {
|
|||||||
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function(){
|
$(document).ready(function() {
|
||||||
$('.select2').select2();
|
$('.select2').select2();
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
@ -1007,7 +1004,7 @@ foreach ($period as $day) {
|
|||||||
|
|
||||||
let targetColumnIndex = -1;
|
let targetColumnIndex = -1;
|
||||||
headerCells.forEach((header, index) => {
|
headerCells.forEach((header, index) => {
|
||||||
if ((header.innerText.trim()) === selectedPower.trim()) {
|
if (header.innerText.replace(/\s+/g, '') === selectedPower.replace(/\s+/g, '')) {
|
||||||
targetColumnIndex = index;
|
targetColumnIndex = index;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -1035,11 +1032,9 @@ foreach ($period as $day) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
targetColumnIndex = (targetColumnIndex * 5) + 3;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
targetColumnIndex = targetColumnIndex * 7;
|
|
||||||
|
|
||||||
targetRow.cells[targetColumnIndex].scrollIntoView({
|
targetRow.cells[targetColumnIndex].scrollIntoView({
|
||||||
behavior: 'smooth',
|
behavior: 'smooth',
|
||||||
inline: 'center',
|
inline: 'center',
|
||||||
@ -1411,12 +1406,12 @@ foreach ($period as $day) {
|
|||||||
let cloneTable = table.cloneNode(true); // Clone the table to modify
|
let cloneTable = table.cloneNode(true); // Clone the table to modify
|
||||||
|
|
||||||
// Remove hidden rows
|
// Remove hidden rows
|
||||||
$(cloneTable).find('tr').filter(function () {
|
$(cloneTable).find('tr').filter(function() {
|
||||||
return $(this).css('display') === 'none';
|
return $(this).css('display') === 'none';
|
||||||
}).remove();
|
}).remove();
|
||||||
|
|
||||||
// Remove hidden columns
|
// Remove hidden columns
|
||||||
$(cloneTable).find('th, td').each(function () {
|
$(cloneTable).find('th, td').each(function() {
|
||||||
if ($(this).css('display') === 'none') {
|
if ($(this).css('display') === 'none') {
|
||||||
$(this).remove();
|
$(this).remove();
|
||||||
}
|
}
|
||||||
@ -1494,7 +1489,7 @@ foreach ($period as $day) {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
|
||||||
const list = document.getElementById("sortableList");
|
const list = document.getElementById("sortableList");
|
||||||
|
|
||||||
@ -1532,16 +1527,21 @@ foreach ($period as $day) {
|
|||||||
const box = child.getBoundingClientRect();
|
const box = child.getBoundingClientRect();
|
||||||
const offset = y - box.top - box.height / 2;
|
const offset = y - box.top - box.height / 2;
|
||||||
|
|
||||||
return offset < 0 && offset > closest.offset
|
return offset < 0 && offset > closest.offset ?
|
||||||
? { offset, element: child }
|
{
|
||||||
: closest;
|
offset,
|
||||||
}, { offset: Number.NEGATIVE_INFINITY }).element;
|
element: child
|
||||||
|
} :
|
||||||
|
closest;
|
||||||
|
}, {
|
||||||
|
offset: Number.NEGATIVE_INFINITY
|
||||||
|
}).element;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Attach drag events to existing items
|
// Attach drag events to existing items
|
||||||
document.querySelectorAll(".sortable-item").forEach(attachDragEvents);
|
document.querySelectorAll(".sortable-item").forEach(attachDragEvents);
|
||||||
|
|
||||||
window.removeSelectedMaterial = function (checkbox) {
|
window.removeSelectedMaterial = function(checkbox) {
|
||||||
let container = checkbox.closest(".sortable-item");
|
let container = checkbox.closest(".sortable-item");
|
||||||
let materialCode = checkbox.value;
|
let materialCode = checkbox.value;
|
||||||
let materialName = container.querySelector("label").innerText;
|
let materialName = container.querySelector("label").innerText;
|
||||||
@ -1549,7 +1549,7 @@ foreach ($period as $day) {
|
|||||||
container.remove();
|
container.remove();
|
||||||
};
|
};
|
||||||
|
|
||||||
window.addBackToList = function () {
|
window.addBackToList = function() {
|
||||||
let dropdown = document.getElementById("customizeHeader");
|
let dropdown = document.getElementById("customizeHeader");
|
||||||
let selectedOption = dropdown.options[dropdown.selectedIndex];
|
let selectedOption = dropdown.options[dropdown.selectedIndex];
|
||||||
|
|
||||||
@ -1573,19 +1573,17 @@ foreach ($period as $day) {
|
|||||||
document.getElementById("sortableList").appendChild(container);
|
document.getElementById("sortableList").appendChild(container);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function(){
|
$(document).ready(function() {
|
||||||
$('#customizeHeader').select2();
|
$('#customizeHeader').select2();
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
$('#month').change(function(){
|
$('#month').change(function() {
|
||||||
$('#changeMonthForm').submit();
|
$('#changeMonthForm').submit();
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -1597,3 +1595,46 @@ foreach ($period as $day) {
|
|||||||
orientation: 'bottom'
|
orientation: 'bottom'
|
||||||
})
|
})
|
||||||
</script>
|
</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 {
|
.table-responsive {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
max-height: 700px;
|
max-height: 450px;
|
||||||
/* Adjust as needed */
|
max-width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
td {
|
td {
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
max-width: 100px;
|
max-width: 100px;
|
||||||
@ -316,13 +317,15 @@ foreach ($period as $day) {
|
|||||||
|
|
||||||
<div class="row ">
|
<div class="row ">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="card">
|
<div class="card" id="fullscreenDiv">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
|
|
||||||
|
|
||||||
<form id="changeMonthForm" action="<?= base_url('resinStockDetails'); ?>" method="post">
|
<form id="changeMonthForm" action="<?= base_url('resinStockDetails'); ?>" method="post">
|
||||||
|
|
||||||
<div class="row" >
|
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
|
||||||
<div class="col-2">
|
<div class="col-2">
|
||||||
<input type="text" name="month" id="month" value="<?php echo "$month" ?>"
|
<input type="text" name="month" id="month" value="<?php echo "$month" ?>"
|
||||||
@ -330,52 +333,63 @@ foreach ($period as $day) {
|
|||||||
style="z-index:30;" readonly>
|
style="z-index:30;" readonly>
|
||||||
</div>
|
</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="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
|
<?php
|
||||||
//check it is current month , then only show the custom option
|
|
||||||
if($month == date('M-Y') ){
|
if($month == date('M-Y') ){
|
||||||
?>
|
?>
|
||||||
|
<i class="fa fa-cog btn-lg mt-2"
|
||||||
<div class="col-6">
|
style="font-size: x-large; cursor:pointer;"
|
||||||
|
title = "Customize"
|
||||||
</div>
|
data-target="#customizeModalId"
|
||||||
|
|
||||||
<div class="col-3 m-0">
|
|
||||||
<button type="button" class="btn " style="background-color:maroon;color:white" data-target="#customizeModalId"
|
|
||||||
data-toggle="modal">
|
data-toggle="modal">
|
||||||
Customize
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<?php
|
</i>
|
||||||
} else { ?>
|
|
||||||
<div class="col-7">
|
|
||||||
</div>
|
|
||||||
<div class="col-2">
|
|
||||||
<?php
|
<?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">
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
|
|
||||||
@ -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 ">
|
<table id="resinStockDetailsTableId" class="fht-table ">
|
||||||
|
|
||||||
<thead class="celda_encabezado_general" style="padding: 10px;">
|
<thead class="celda_encabezado_general" style="padding: 10px;">
|
||||||
@ -757,7 +771,7 @@ foreach ($period as $day) {
|
|||||||
<!-- bag Dropdown -->
|
<!-- bag Dropdown -->
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="resinDropdown">Select Bag</label>
|
<label for="resinDropdown">Select Machine</label>
|
||||||
<select id="resinDropdown" class="form-control select2">
|
<select id="resinDropdown" class="form-control select2">
|
||||||
<option value="">Select Resin</option>
|
<option value="">Select Resin</option>
|
||||||
<?php foreach ($resinMaterials as $resinMaterial): ?>
|
<?php foreach ($resinMaterials as $resinMaterial): ?>
|
||||||
@ -832,7 +846,7 @@ foreach ($period as $day) {
|
|||||||
|
|
||||||
let targetColumnIndex = -1;
|
let targetColumnIndex = -1;
|
||||||
headerCells.forEach((header, index) => {
|
headerCells.forEach((header, index) => {
|
||||||
if ((header.innerText.trim()) === selectedResin.trim()) {
|
if (header.innerText.replace(/\s+/g, '') === selectedResin.replace(/\s+/g, '')) {
|
||||||
targetColumnIndex = index;
|
targetColumnIndex = index;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -1291,3 +1305,45 @@ foreach ($period as $day) {
|
|||||||
orientation: 'bottom'
|
orientation: 'bottom'
|
||||||
})
|
})
|
||||||
</script>
|
</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 {
|
.table-responsive {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
max-height: 700px;
|
max-height: 500px;
|
||||||
/* Adjust as needed */
|
max-width: 100%;
|
||||||
position: relative;
|
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 {
|
td {
|
||||||
min-width: 150px;
|
min-width: 150px;
|
||||||
max-width: 150px;
|
max-width: 150px;
|
||||||
@ -280,44 +297,74 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="row">
|
<div class="row" align="center">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="card">
|
<div class="card" id="fullscreenDiv">
|
||||||
<div class="card-body" style="padding-left:300px;">
|
<div class="card-body" >
|
||||||
|
|
||||||
|
|
||||||
<form id="changeMonthForm" action="<?= base_url('trpSandUseStockDetails'); ?>" method="post">
|
<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">
|
<div class="col-2 mt-2">
|
||||||
<input type="text" name="month" id="month" value="<?php echo $month; ?>"
|
|
||||||
class="form-control" data-provide="datepicker"
|
<input type="text" name="month" id="month" value="<?php echo "$month" ?>"
|
||||||
data-date-format="M-yyyy" data-date-min-view-mode="1" readonly>
|
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">
|
|
||||||
<a href="#" >
|
|
||||||
<i class="fa fa-download btn-lg"
|
<div class="col-3 text-right d-flex" style="justify-content: end;" >
|
||||||
style="font-size: x-large;"
|
|
||||||
|
<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">
|
id="trpSandUseStockExport">
|
||||||
</i>
|
</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-save btn-lg mt-2"
|
||||||
|
title="Save"
|
||||||
|
style="font-size: x-large; cursor:pointer;"
|
||||||
|
id="saveId"
|
||||||
|
>
|
||||||
|
</i>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-2">
|
<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>
|
</div>
|
||||||
@ -327,7 +374,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="table-responsive">
|
<div class="table-responsive" id="table-responsive">
|
||||||
<table style="width: 700px;" id="trpSandUseStockDetailsTableId" class="fht-table ">
|
<table style="width: 700px;" id="trpSandUseStockDetailsTableId" class="fht-table ">
|
||||||
|
|
||||||
<thead class="celda_encabezado_general" >
|
<thead class="celda_encabezado_general" >
|
||||||
@ -931,3 +978,47 @@
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</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