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...