Filter
unknown
plain_text
2 years ago
9.4 kB
4
Indexable
<%
let input1=" "
let groupInput = " "
let componentHeight = ""
let selectItems = " "
let financialyear=" "
if( page==="holdings" ) {
input1="Demat ID"
groupInput = " "
selectItems = " "
componentHeight = '71%'
financialyear=`<div class="mb-3"><label class="form-label">Financial Year</label><select class="form-select" style="padding: 0.9rem;"><option>Select</option><option>Large select</option><option>Small select</option></select></div>`
}
if(page==="ledger" ){
input1=""
componentHeight = '71%'
groupInput = " "
selectItems = " "
financialyear=``
}
if(page==="bill"){
input1="Wallet"
componentHeight = '78%'
groupInput = ''
selectItems = ""
financialyear=""
}
if(page==="trade" ){
input1="Segment"
componentHeight = '71%'
groupInput = " "
selectItems = '<option>Equity</option> <option>FNO</option> <option>CD</option> <option>Commodity</option>'
financialyear=`<div class="mb-3"><label class="form-label">Financial Year</label><select class="form-select" style="padding: 0.9rem;"><option>Select</option><option>Large select</option><option>Small select</option></select></div>`
}
%>
<style>
.button-block {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #fff;
background-color: #007bff;
border: 1px solid #007bff;
border-radius: 2.25rem;
transition: background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out,
box-shadow 0.15s ease-in-out;
}
.center {
display: flex;
align-items: center;
}
</style>
<div class="col-lg-12">
<!-- <div class="card"> -->
<!-- <div class="card-body"> -->
<!-- <div class="d-flex flex-wrap gap-2">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom"
aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
</div> -->
<!-- bottom offcanvas -->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel"
style="border-radius: 20px 20px 0px 0px; height:90%">
<div class="offcanvas-header">
<h5>Filter </h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body" style="padding: 0px 0px 0px 0px!important; display: flex;flex-direction: column;">
<div class="card-body ">
<div class="row">
<div class="col-lg-6">
<div class="mt-3 mt-lg-0">
<% if(input1 !=""){ %>
<div class="mb-3">
<label class="form-label"><%- input1%></label>
<select class="form-select" style="padding: 0.9rem;">
<%- selectItems %>
</select>
</div>
<% }%>
<%- groupInput %>
<div class="mb-3 row">
<label class="form-label mb-2">Date</label>
<div style="margin-bottom: 1rem;display: flex; gap: 0.5rem;flex-wrap: wrap;">
<button type="button" class="btn btn-outline-secondary" style="border-radius: 20px;" onclick="setLast30Days()">Last 30 days</button>
<button type="button" class="btn btn-outline-secondary" style="border-radius: 20px;" onclick="setLast60Days()">Last 60 days</button>
<button type="button" class="btn btn-outline-secondary" style="border-radius: 20px;" onclick="setLast90Days()">Last 90 days</button>
</div>
<div class="col">
<input class="form-control" type="date" id="start-date" style="padding: 0.9rem;" name="start-date" placeholder="Start date" onchange="validateDate()">
</div>
<div class="col">
<input class="form-control" type="date" id="end-date" style="padding: 0.9rem;" name="end-date" placeholder="End date" onchange="validateDate()">
</div>
</div>
<div class="mb-3" style="display: flex;">
<div class="form-check" style=" padding-bottom: 10px; padding-top: 10px;">
<input type="checkbox" class="form-check-input" style="padding: 0.5rem ;" id="invalidCheck1" name="filter[]" value="M" >
<label class="form-check-label" for="invalidCheck"> Enable Margin</label>
</div>
<div class="form-check " style="margin-left: 10px; padding-bottom: 10px; padding-top: 10px;">
<input type="checkbox" class="form-check-input" style="padding: 0.5rem ;" id="invalidCheck2" name="filter[]" value="L">
<label class="form-check-label" for="invalidCheck"> Enable MTF</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="btnDivFooter" style="margin-top: auto;padding: 0rem 20px;padding-bottom: 1rem;">
<button class="btn btn-primary btn-lg button-block" type="submit" data-bs-dismiss="offcanvas" style="height: 50px;margin-top: auto;display: flex;align-items: center;justify-content: center;" onclick="getLedgerDetailsFilter()">Show Results</button>
</div>
</div>
</div>
<script>
function getLedgerDetailsFilter(){
let client_code = $("#ClientCode").val()
let type_filter = $("#type_filter").val()
let from_date = $("#start-date").val()
let to_date = $("#end-date").val()
var filter = $('input[name="filter[]"]:checked')
.map(function () {
return this.value;
})
.get();
var formData = {
client_code: client_code,
from_date: from_date.replaceAll("-", ""),
to_date: to_date.replaceAll("-", ""),
filter: filter,
type_filter: type_filter,
};
console.log(formData);
$.ajax({
type: "POST",
url: "/get-filter-ledger-detail",
data: JSON.stringify(formData),
contentType: "application/json",
Accept: "application/text",
dataType: "text",
beforeSend: function () {
$("#loader").removeClass("hidden");
},
success: function (data) {
$("#all").html(data);
},
error: function (err) {
console.log("Error ");
console.log(err);
},
complete: function () {
$("#loader").addClass("hidden");
},
});
}
</script>
<script>
function setLast30Days() {
var endDate = new Date();
var startDate = new Date();
startDate.setDate(endDate.getDate() - 30);
document.getElementById("start-date").value = formatDate(startDate);
document.getElementById("end-date").value = formatDate(endDate);
}
function setLast60Days() {
var endDate = new Date();
var startDate = new Date();
startDate.setDate(endDate.getDate() - 60);
document.getElementById("start-date").value = formatDate(startDate);
document.getElementById("end-date").value = formatDate(endDate);
}
function setLast90Days() {
var endDate = new Date();
var startDate = new Date();
startDate.setDate(endDate.getDate() - 90);
document.getElementById("start-date").value = formatDate(startDate);
document.getElementById("end-date").value = formatDate(endDate);
}
function validateDate() {
var startDateStr = document.getElementById("start-date").value;
var endDateStr = document.getElementById("end-date").value;
// Check that both input fields have a value
if (!startDateStr || !endDateStr) {
return;
}
// Convert the date strings to Date objects
var startDate = new Date(startDateStr);
var endDate = new Date(endDateStr);
if (startDate > endDate) {
// Swap the dates
var temp = startDate;
startDate = endDate;
endDate = temp;
document.getElementById("start-date").value = formatDate(startDate);
document.getElementById("end-date").value = formatDate(endDate);
}
}
function formatDate(date) {
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
}
</script>Editor is loading...