stock module - 27-03-2025
This commit is contained in:
vadivelJ96
parent
483db634a9
commit
a5fa744513
@ -322,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>
|
||||
|
||||
<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-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-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;">
|
||||
|
||||
@ -1772,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>
|
||||
@ -226,27 +226,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; }
|
||||
}
|
||||
|
||||
td{
|
||||
min-width: 100px;
|
||||
@ -331,7 +315,53 @@
|
||||
|
||||
<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">
|
||||
|
||||
|
||||
@ -345,53 +375,60 @@
|
||||
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"
|
||||
<i class="fa fa-cog btn-lg mt-2"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
title = "Customize"
|
||||
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> -->
|
||||
</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">
|
||||
|
||||
<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>
|
||||
|
||||
</form>
|
||||
@ -481,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;">
|
||||
@ -777,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>
|
||||
@ -821,7 +858,7 @@
|
||||
</div>
|
||||
</div><!-- /.modal-content -->
|
||||
</div><!-- /.modal-dialog -->
|
||||
</div><!-- /.modal -->
|
||||
</div>/.modal -->
|
||||
</div>
|
||||
|
||||
|
||||
@ -848,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;
|
||||
}
|
||||
@ -1360,3 +1397,53 @@ $(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
|
||||
}
|
||||
// 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,27 +224,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; }
|
||||
}
|
||||
|
||||
td{
|
||||
min-width: 100px;
|
||||
@ -325,11 +309,12 @@ 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">
|
||||
@ -338,52 +323,60 @@ foreach ($period as $day) {
|
||||
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>
|
||||
|
||||
|
||||
<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"
|
||||
<i class="fa fa-cog btn-lg mt-2"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
title = "Customize"
|
||||
data-target="#customizeModalId"
|
||||
data-toggle="modal">
|
||||
Customize
|
||||
</button>
|
||||
|
||||
<?php
|
||||
} else { ?>
|
||||
<div class="col-7">
|
||||
</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">
|
||||
<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>
|
||||
|
||||
|
||||
@ -475,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;">
|
||||
@ -948,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): ?>
|
||||
@ -1000,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;
|
||||
}
|
||||
@ -1032,7 +1025,7 @@ foreach ($period as $day) {
|
||||
|
||||
|
||||
|
||||
targetColumnIndex = targetColumnIndex * 7;
|
||||
targetColumnIndex = (targetColumnIndex * 8) - 4;
|
||||
|
||||
targetRow.cells[targetColumnIndex].scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
@ -1041,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) {
|
||||
|
||||
@ -1668,3 +1661,45 @@ foreach ($period as $day) {
|
||||
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>
|
||||
@ -242,22 +242,6 @@ $datefordropdown = format_date($datefordropdown, 0, 'M-Y');
|
||||
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 {
|
||||
position: sticky;
|
||||
@ -320,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>
|
||||
<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 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-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>
|
||||
</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 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>
|
||||
@ -1432,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>
|
||||
@ -308,44 +308,75 @@
|
||||
|
||||
|
||||
|
||||
<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="row">
|
||||
|
||||
<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>
|
||||
<?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 class="col-1">
|
||||
<a href="#" >
|
||||
<i class="fa fa-download btn-lg"
|
||||
style="font-size: x-large;"
|
||||
|
||||
|
||||
<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>
|
||||
</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 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>
|
||||
@ -355,7 +386,7 @@
|
||||
|
||||
|
||||
|
||||
<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;">
|
||||
@ -913,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>
|
||||
@ -285,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>
|
||||
<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 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-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>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-7">
|
||||
<!-- right now client is not using this -->
|
||||
<i class="fe-maximize noti-icon btn-lg mt-2"
|
||||
title="Full Screen"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
onclick="toggleDivFullscreen()" >
|
||||
</i>
|
||||
|
||||
|
||||
</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>
|
||||
<i class="fa fa-save btn-lg mt-2"
|
||||
title="Save"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
id="saveId"
|
||||
>
|
||||
</i>
|
||||
|
||||
|
||||
|
||||
</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;">
|
||||
@ -1240,3 +1260,45 @@ 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>
|
||||
@ -223,27 +223,12 @@
|
||||
.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; }
|
||||
}
|
||||
|
||||
.fht-table thead th {
|
||||
position: sticky;
|
||||
@ -327,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;"
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
@ -1922,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,18 +18,22 @@
|
||||
}
|
||||
|
||||
.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 */
|
||||
transform: scale(1.25);
|
||||
/* Increases size by 25% */
|
||||
transition: transform 0.5s ease-in-out;
|
||||
/* Smooth scaling effect */
|
||||
}
|
||||
|
||||
.fht-table tr:hover {
|
||||
@ -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; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -264,13 +252,15 @@
|
||||
body[data-layout-mode=horizontal] .container-fluid {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.card{ margin-bottom: 5px;}
|
||||
|
||||
|
||||
.card {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -328,12 +318,13 @@ 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">
|
||||
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-2">
|
||||
@ -342,49 +333,60 @@ foreach ($period as $day) {
|
||||
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="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
|
||||
//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"
|
||||
<i class="fa fa-cog btn-lg mt-2"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
title="Customize"
|
||||
data-target="#customizeModalId"
|
||||
data-toggle="modal">
|
||||
Customize
|
||||
</button>
|
||||
|
||||
<?php
|
||||
} else { ?>
|
||||
<div class="col-7">
|
||||
</div>
|
||||
<div class="col-2">
|
||||
</i>
|
||||
|
||||
<?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>
|
||||
|
||||
</form>
|
||||
@ -468,14 +470,13 @@ foreach ($period as $day) {
|
||||
</div>
|
||||
|
||||
<!-- hidden fields -->
|
||||
<input type="hidden" name="month" value="<?php echo "$month" ?>"
|
||||
>
|
||||
<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;">
|
||||
@ -881,13 +882,11 @@ foreach ($period as $day) {
|
||||
|
||||
|
||||
<?php
|
||||
foreach($previousMonthPowerConsumptionStockDetails as $index => $previousMonthPowerConsumptionStockDetail)
|
||||
{
|
||||
foreach ($previousMonthPowerConsumptionStockDetails as $index => $previousMonthPowerConsumptionStockDetail) {
|
||||
if ($previousMonthPowerConsumptionStockDetail['machine_id'] == $powerMachine['id']) {
|
||||
echo $previousMonthPowerConsumptionStockDetail['closing_units'];
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
?>
|
||||
|
||||
@ -899,13 +898,11 @@ foreach ($period as $day) {
|
||||
contenteditable="true">
|
||||
|
||||
<?php
|
||||
foreach($previousMonthPowerConsumptionStockDetails as $index => $previousMonthPowerConsumptionStockDetail)
|
||||
{
|
||||
foreach ($previousMonthPowerConsumptionStockDetails as $index => $previousMonthPowerConsumptionStockDetail) {
|
||||
if ($previousMonthPowerConsumptionStockDetail['machine_id'] == $powerMachine['id']) {
|
||||
echo $previousMonthPowerConsumptionStockDetail['closing_units'];
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
?>
|
||||
|
||||
@ -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): ?>
|
||||
@ -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',
|
||||
@ -1532,10 +1527,15 @@ foreach ($period as $day) {
|
||||
const box = child.getBoundingClientRect();
|
||||
const offset = y - box.top - box.height / 2;
|
||||
|
||||
return offset < 0 && offset > closest.offset
|
||||
? { offset, element: child }
|
||||
: closest;
|
||||
}, { offset: Number.NEGATIVE_INFINITY }).element;
|
||||
return offset < 0 && offset > closest.offset ?
|
||||
{
|
||||
offset,
|
||||
element: child
|
||||
} :
|
||||
closest;
|
||||
}, {
|
||||
offset: Number.NEGATIVE_INFINITY
|
||||
}).element;
|
||||
}
|
||||
|
||||
// Attach drag events to existing items
|
||||
@ -1574,14 +1574,12 @@ foreach ($period as $day) {
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#customizeHeader').select2();
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@ -1597,3 +1595,46 @@ foreach ($period as $day) {
|
||||
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,27 +233,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; }
|
||||
}
|
||||
|
||||
td {
|
||||
min-width: 100px;
|
||||
@ -333,12 +317,14 @@ 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">
|
||||
@ -347,52 +333,63 @@ foreach ($period as $day) {
|
||||
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="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"
|
||||
<i class="fa fa-cog btn-lg mt-2"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
title = "Customize"
|
||||
data-target="#customizeModalId"
|
||||
data-toggle="modal">
|
||||
Customize
|
||||
</button>
|
||||
|
||||
<?php
|
||||
} else { ?>
|
||||
<div class="col-7">
|
||||
</div>
|
||||
<div class="col-2">
|
||||
</i>
|
||||
|
||||
<?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>
|
||||
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
@ -483,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;">
|
||||
@ -774,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): ?>
|
||||
@ -849,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;
|
||||
}
|
||||
@ -1308,3 +1305,45 @@ foreach ($period as $day) {
|
||||
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>
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
<style type="text/css">
|
||||
.num {
|
||||
text-align: right;
|
||||
@ -21,8 +20,10 @@
|
||||
.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 */
|
||||
transform: scale(1.25);
|
||||
/* Increases size by 25% */
|
||||
transition: transform 0.5s ease-in-out;
|
||||
/* Smooth scaling effect */
|
||||
}
|
||||
|
||||
.fht-table tr:hover {
|
||||
@ -188,8 +189,10 @@
|
||||
.fht-table thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20; /* Ensure the entire header stays above table rows */
|
||||
background-color: #50bbd9; /* Header background color */
|
||||
z-index: 20;
|
||||
/* Ensure the entire header stays above table rows */
|
||||
background-color: #50bbd9;
|
||||
/* Header background color */
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
@ -202,13 +205,18 @@
|
||||
.fht-table thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 11; /* Higher than table rows but lower than first column */
|
||||
background-color: #50bbd9; /* Green background */
|
||||
z-index: 11;
|
||||
/* Higher than table rows but lower than first column */
|
||||
background-color: #50bbd9;
|
||||
/* Green background */
|
||||
color: #ffffff;
|
||||
border: 1px solid #ddd;
|
||||
white-space: normal; /* Allows text to wrap */
|
||||
word-wrap: break-word; /* Breaks long words if needed */
|
||||
text-align: center; /* Centers text for better alignment */
|
||||
white-space: normal;
|
||||
/* Allows text to wrap */
|
||||
word-wrap: break-word;
|
||||
/* Breaks long words if needed */
|
||||
text-align: center;
|
||||
/* Centers text for better alignment */
|
||||
}
|
||||
|
||||
/* Sticky First Column */
|
||||
@ -217,7 +225,8 @@
|
||||
position: sticky;
|
||||
left: 0;
|
||||
background-color: #50bbd9;
|
||||
z-index: 15; /* Ensures it stays above other cells */
|
||||
z-index: 15;
|
||||
/* Ensures it stays above other cells */
|
||||
border-right: 2px solid #ddd;
|
||||
color: #ffffff;
|
||||
}
|
||||
@ -232,20 +241,36 @@
|
||||
}
|
||||
|
||||
/* 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: 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: 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: 1000px) {
|
||||
|
||||
/* Approximate Zoom ~ 80% */
|
||||
.table-responsive {
|
||||
max-height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 800px) { /* Approximate Zoom ~ 75% */
|
||||
.table-responsive { max-height: 650px; }
|
||||
@media only screen and (min-height: 800px) {
|
||||
|
||||
/* Approximate Zoom ~ 75% */
|
||||
.table-responsive {
|
||||
max-height: 650px;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
@ -277,8 +302,9 @@
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.card{ margin-bottom: 5px;}
|
||||
|
||||
.card {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -360,7 +386,7 @@ $timeOtions[] = "12:00 AM";
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card" id="fullscreenDiv">
|
||||
<div class="card-body">
|
||||
|
||||
|
||||
@ -369,40 +395,69 @@ $timeOtions[] = "12:00 AM";
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-2">
|
||||
<?php $today = date('M-Y'); ?>
|
||||
<div class="col-2 mt-2">
|
||||
|
||||
<input type="text" name="month" id="month" value="<?php echo "$month" ?>"
|
||||
class="form-control mt-2"
|
||||
style="z-index:30;" 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 class="col-1 ">
|
||||
<a href="#" >
|
||||
|
||||
|
||||
<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: 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"
|
||||
style="font-size: x-large;"
|
||||
title="Excel Download"
|
||||
style="font-size: x-large; cursor:pointer;"
|
||||
id="trpProductionDetailsExport">
|
||||
</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 class="col-8">
|
||||
<!-- 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-1">
|
||||
|
||||
<input type="button" class="btn btn-success px-4" id="saveId" value="Save">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
<div class="table-responsive">
|
||||
<div class="table-responsive" id="table-responsive">
|
||||
|
||||
<table id="trpProductionStockDetailsTableId" class="fht-table ">
|
||||
|
||||
@ -1005,7 +1060,6 @@ $timeOtions[] = "12:00 AM";
|
||||
foreach ($wcsSupplierList as $supplier) {
|
||||
$summary[$supplier] = 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Sum values for the material
|
||||
@ -1043,7 +1097,6 @@ $timeOtions[] = "12:00 AM";
|
||||
foreach ($crsClientList as $client) {
|
||||
$summary[$client] += is_numeric($trpProductionDetail[$client]) ? $trpProductionDetail[$client] : 0;
|
||||
$totalCrsReceived += is_numeric($trpProductionDetail[$client]) ? $trpProductionDetail[$client] : 0;
|
||||
|
||||
}
|
||||
|
||||
$summary['waterReceipt'] += is_numeric($trpProductionDetail['waterReceipt']) ? $trpProductionDetail['waterReceipt'] : 0;
|
||||
@ -1347,10 +1400,13 @@ $timeOtions[] = "12:00 AM";
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<hr>
|
||||
|
||||
|
||||
|
||||
|
||||
</div> <!-- End card-body -->
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
@ -1509,8 +1565,7 @@ $timeOtions[] = "12:00 AM";
|
||||
|
||||
?>
|
||||
|
||||
<?php foreach($abstractForCurrentMonth as $abstract)
|
||||
{
|
||||
<?php foreach ($abstractForCurrentMonth as $abstract) {
|
||||
|
||||
$absDate = DateTime::createFromFormat('M-Y', $month)->format('Y-m');
|
||||
$absDate = "$absDate-01";
|
||||
@ -1661,8 +1716,7 @@ $timeOtions[] = "12:00 AM";
|
||||
|
||||
|
||||
?>
|
||||
<?php foreach($abstractForCurrentMonth as $abstract)
|
||||
{
|
||||
<?php foreach ($abstractForCurrentMonth as $abstract) {
|
||||
|
||||
$absDate = DateTime::createFromFormat('M-Y', $month)->format('Y-m');
|
||||
$absDate = "$absDate-01";
|
||||
@ -1727,8 +1781,6 @@ $timeOtions[] = "12:00 AM";
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- End card-body -->
|
||||
</div> <!-- End card -->
|
||||
</div> <!-- End col -->
|
||||
</div> <!-- End row -->
|
||||
@ -2206,7 +2258,6 @@ $timeOtions[] = "12:00 AM";
|
||||
row.find('td.absTotal').text(parseFloat(totalStock).toFixed(2));
|
||||
row.find('td.absClosingStock').text(parseFloat(closingStock).toFixed(2));
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
@ -2417,61 +2468,42 @@ $timeOtions[] = "12:00 AM";
|
||||
|
||||
|
||||
|
||||
<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>
|
||||
@ -297,44 +297,74 @@
|
||||
|
||||
|
||||
|
||||
<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">
|
||||
|
||||
<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 class="col-1">
|
||||
<a href="#" >
|
||||
<i class="fa fa-download btn-lg"
|
||||
style="font-size: x-large;"
|
||||
|
||||
|
||||
<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>
|
||||
</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 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>
|
||||
@ -344,7 +374,7 @@
|
||||
|
||||
|
||||
|
||||
<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" >
|
||||
@ -948,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