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,23 +18,27 @@
|
||||
}
|
||||
|
||||
.grab {
|
||||
cursor: grab; /* Default open-hand cursor */
|
||||
cursor: grab;
|
||||
/* Default open-hand cursor */
|
||||
}
|
||||
|
||||
.grab:active {
|
||||
cursor: grabbing; /* Closed-hand cursor when dragging */
|
||||
cursor: grabbing;
|
||||
/* Closed-hand cursor when dragging */
|
||||
}
|
||||
|
||||
.fht-table td:hover {
|
||||
background-color: rgb(170, 222, 167);
|
||||
color:rgb(2, 2, 2);
|
||||
transform: scale(1.25); /* Increases size by 25% */
|
||||
transition: transform 0.5s ease-in-out; /* Smooth scaling effect */
|
||||
color: rgb(2, 2, 2);
|
||||
transform: scale(1.25);
|
||||
/* Increases size by 25% */
|
||||
transition: transform 0.5s ease-in-out;
|
||||
/* Smooth scaling effect */
|
||||
}
|
||||
|
||||
.fht-table tr:hover {
|
||||
background-color: rgb(170, 222, 167);
|
||||
color:rgb(2, 2, 2);
|
||||
color: rgb(2, 2, 2);
|
||||
}
|
||||
|
||||
|
||||
@ -228,27 +232,11 @@
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
max-height: 500px;
|
||||
max-height: 450px;
|
||||
max-width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Adjust heights based on screen zoom */
|
||||
@media only screen and (min-height: 1400px) { /* Approximate Zoom < 100% */
|
||||
.table-responsive { max-height: 425px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 1200px) { /* Approximate Zoom ~ 90% */
|
||||
.table-responsive { max-height: 500px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 1000px) { /* Approximate Zoom ~ 80% */
|
||||
.table-responsive { max-height: 600px; }
|
||||
}
|
||||
|
||||
@media only screen and (min-height: 800px) { /* Approximate Zoom ~ 75% */
|
||||
.table-responsive { max-height: 650px; }
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -258,19 +246,21 @@
|
||||
}
|
||||
|
||||
tfoot tr {
|
||||
background-color:rgb(235, 236, 203);
|
||||
background-color: rgb(235, 236, 203);
|
||||
}
|
||||
|
||||
body[data-layout-mode = horizontal] .container-fluid{
|
||||
body[data-layout-mode=horizontal] .container-fluid {
|
||||
max-width: 100%;
|
||||
}
|
||||
.card-body{
|
||||
padding-top : 0;
|
||||
|
||||
.card-body {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.card{ margin-bottom: 5px;}
|
||||
|
||||
|
||||
.card {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@ -328,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') ){
|
||||
|
||||
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>
|
||||
@ -415,10 +417,10 @@ foreach ($period as $day) {
|
||||
<select id="customizeHeader" class="form-control" onchange="addBackToList()">
|
||||
<option value="">Select</option>
|
||||
<?php
|
||||
foreach($activeElectricMachines as $index => $activeElectricMachine){ ?>
|
||||
foreach ($activeElectricMachines as $index => $activeElectricMachine) { ?>
|
||||
|
||||
<option value="<?=$activeElectricMachine['id']?>">
|
||||
<?=$activeElectricMachine['id']?> - <?=$activeElectricMachine['machine_name']?>
|
||||
<option value="<?= $activeElectricMachine['id'] ?>">
|
||||
<?= $activeElectricMachine['id'] ?> - <?= $activeElectricMachine['machine_name'] ?>
|
||||
</option>
|
||||
|
||||
<?php
|
||||
@ -442,11 +444,11 @@ foreach ($period as $day) {
|
||||
<?php foreach ($electricMachines as $electricMachine): ?>
|
||||
|
||||
<div class="sortable-item" draggable="true" id="<?= $electricMachine['id'] ?>_container">
|
||||
<input type = "checkbox"
|
||||
id = "<?= $electricMachine['id'] ?>_checkboxId"
|
||||
name = "customisedMachineCodes[]"
|
||||
value = "<?= $electricMachine['id'] ?>"
|
||||
onclick = "removeSelectedMaterial(this)"
|
||||
<input type="checkbox"
|
||||
id="<?= $electricMachine['id'] ?>_checkboxId"
|
||||
name="customisedMachineCodes[]"
|
||||
value="<?= $electricMachine['id'] ?>"
|
||||
onclick="removeSelectedMaterial(this)"
|
||||
checked>
|
||||
<label class="grab" for="<?= $electricMachine['id'] ?>_checkboxId">
|
||||
<?= $electricMachine['id'] ?> - <?= $electricMachine['machine_name']; ?>
|
||||
@ -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;">
|
||||
@ -529,7 +530,7 @@ foreach ($period as $day) {
|
||||
|
||||
<tbody style="background-color: #fff;">
|
||||
|
||||
<?php if (!empty($totalPower)){
|
||||
<?php if (!empty($totalPower)) {
|
||||
|
||||
$summary = [];
|
||||
|
||||
@ -881,13 +882,11 @@ foreach ($period as $day) {
|
||||
|
||||
|
||||
<?php
|
||||
foreach($previousMonthPowerConsumptionStockDetails as $index => $previousMonthPowerConsumptionStockDetail)
|
||||
{
|
||||
if($previousMonthPowerConsumptionStockDetail['machine_id'] == $powerMachine['id']){
|
||||
echo $previousMonthPowerConsumptionStockDetail['closing_units'] ;
|
||||
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)
|
||||
{
|
||||
if($previousMonthPowerConsumptionStockDetail['machine_id'] == $powerMachine['id']){
|
||||
echo $previousMonthPowerConsumptionStockDetail['closing_units'] ;
|
||||
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): ?>
|
||||
@ -987,7 +984,7 @@ foreach ($period as $day) {
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$(document).ready(function() {
|
||||
$('.select2').select2();
|
||||
})
|
||||
</script>
|
||||
@ -1007,7 +1004,7 @@ foreach ($period as $day) {
|
||||
|
||||
let targetColumnIndex = -1;
|
||||
headerCells.forEach((header, index) => {
|
||||
if ((header.innerText.trim()) === selectedPower.trim()) {
|
||||
if (header.innerText.replace(/\s+/g, '') === selectedPower.replace(/\s+/g, '')) {
|
||||
targetColumnIndex = index;
|
||||
return;
|
||||
}
|
||||
@ -1035,11 +1032,9 @@ foreach ($period as $day) {
|
||||
}
|
||||
|
||||
|
||||
targetColumnIndex = (targetColumnIndex * 5) + 3;
|
||||
|
||||
|
||||
|
||||
targetColumnIndex = targetColumnIndex * 7;
|
||||
|
||||
targetRow.cells[targetColumnIndex].scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
inline: 'center',
|
||||
@ -1411,12 +1406,12 @@ foreach ($period as $day) {
|
||||
let cloneTable = table.cloneNode(true); // Clone the table to modify
|
||||
|
||||
// Remove hidden rows
|
||||
$(cloneTable).find('tr').filter(function () {
|
||||
$(cloneTable).find('tr').filter(function() {
|
||||
return $(this).css('display') === 'none';
|
||||
}).remove();
|
||||
|
||||
// Remove hidden columns
|
||||
$(cloneTable).find('th, td').each(function () {
|
||||
$(cloneTable).find('th, td').each(function() {
|
||||
if ($(this).css('display') === 'none') {
|
||||
$(this).remove();
|
||||
}
|
||||
@ -1494,7 +1489,7 @@ foreach ($period as $day) {
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
|
||||
const list = document.getElementById("sortableList");
|
||||
|
||||
@ -1532,16 +1527,21 @@ 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
|
||||
document.querySelectorAll(".sortable-item").forEach(attachDragEvents);
|
||||
|
||||
window.removeSelectedMaterial = function (checkbox) {
|
||||
window.removeSelectedMaterial = function(checkbox) {
|
||||
let container = checkbox.closest(".sortable-item");
|
||||
let materialCode = checkbox.value;
|
||||
let materialName = container.querySelector("label").innerText;
|
||||
@ -1549,7 +1549,7 @@ foreach ($period as $day) {
|
||||
container.remove();
|
||||
};
|
||||
|
||||
window.addBackToList = function () {
|
||||
window.addBackToList = function() {
|
||||
let dropdown = document.getElementById("customizeHeader");
|
||||
let selectedOption = dropdown.options[dropdown.selectedIndex];
|
||||
|
||||
@ -1573,19 +1573,17 @@ foreach ($period as $day) {
|
||||
document.getElementById("sortableList").appendChild(container);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$(document).ready(function() {
|
||||
$('#customizeHeader').select2();
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$('#month').change(function(){
|
||||
$('#month').change(function() {
|
||||
$('#changeMonthForm').submit();
|
||||
})
|
||||
|
||||
@ -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,13 +317,15 @@ 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="row">
|
||||
|
||||
<div class="col-2">
|
||||
<input type="text" name="month" id="month" value="<?php echo "$month" ?>"
|
||||
@ -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>
|
||||
File diff suppressed because it is too large
Load Diff
@ -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