Trade-listing
unknown
plain_text
2 years ago
7.0 kB
2
Indexable
<%- include('../include/header.ejs') %>
<style>
.hide{
display: none !important;
transition: all 0.2s ease-in;
}
.trade-listing-filter {
display: flex;
gap: 1rem;
padding: 1rem;
/* align-items: center; */
}
/* .trade-listing-filter button {
background-color: #6691e7;
padding: 0.8rem 1.5rem !important;
outline: none;
border: none;
border-radius: 8px;
color: white;
transition: all 0.2s ease-in;
}
.trade-listing-filter button:hover {
background-color: #4d71b9;
}
.trade-listing-filter input[type="text"],.trade-listing-filter input[type="date"],.trade-listing-filter select {
padding: 0.8rem 1.5rem !important;
outline: none;
border: none;
border-radius: 8px;
font-size: 15px;
border: 1px solid rgba(0, 0, 0, 0.377);
cursor: pointer;
} */
.rad-label {
display: flex;
align-items: center;
border-radius: 100px;
padding: 14px 16px;
margin: 10px 0;
cursor: pointer;
transition: .3s;
border: 1px solid transparent !important;
}
.rad-label p {
margin: 0;
margin-left: 1rem;
}
.rad-label:hover {
background: hsla(0, 0%, 63%, 0.14);
}
.rad-label-background {
background-color: #00000028;
}
.rad-input {
position: absolute;
left: 0;
top: 0;
width: 1px;
height: 1px;
opacity: 0;
z-index: -1;
}
.rad-design {
width: 22px;
height: 22px;
border-radius: 100px;
background: linear-gradient(to right bottom, #7088d6, #405189);
position: relative;
}
.rad-design::before {
content: '';
display: inline-block;
width: inherit;
height: inherit;
border-radius: inherit;
background: hsl(0, 0%, 90%);
transform: scale(1.1);
transition: .3s;
}
.rad-input:checked+.rad-design::before {
transform: scale(0);
}
.rad-text {
/* color: hsl(0, 0%, 44%); */
margin-left: 14px;
font-size: 15px;
font-weight: 500;
transition: .3s;
}
/* .rad-input:checked~.rad-text {
color: red;
} */
</style>
</head>
<body>
<%- include('../include/navbar.ejs') %>
<div class="main-content">
<div class="page-content">
<div class="container-fluid">
<!-- start page title -->
<div class="row">
<div class="col-12">
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
<h4 class="mb-sm-0">Trading Reports</h4>
<div class="page-title-right">
<ol class="breadcrumb m-0">
<li class="breadcrumb-item"><a href="javascript: void(0);">Reports</a></li>
<li class="breadcrumb-item active">Trading Reports</a></li>
</ol>
</div>
</div>
</div>
</div>
<!-- end page title -->
<div class="row">
<form action="#" method="post" class="card trade-listing-filter">
<div class="row d-flex flex-column flex-lg-row">
<div class="col-auto d-flex">
<label class="rad-label rad-label-background">
<input type="radio" class="rad-input" name="rad" value="all" checked>
<div class="rad-design"></div>
<p class="rad-text">All</p>
</label>
<label class="rad-label">
<input type="radio" class="rad-input" name="rad" value="client">
<div class="rad-design"></div>
<p class="rad-text">NSE</p>
</label>
<label class="rad-label">
<input type="radio" class="rad-input" name="rad" value="client">
<div class="rad-design"></div>
<p class="rad-text">BSE</p>
</label>
</div>
<div class="col-auto d-flex flex-column flex-lg-row gap-3">
<div style="display: flex; flex-direction: column;">
<label for="" class="form-label fw-semibold">Select Client code</label>
<input type="text" placeholder="Enter client code" onkeyup="this.value = this.value.charAt(0).toUpperCase() + this.value.slice(1);" class="clientCodeText">
</div>
<div style="display: flex; flex-direction: column;">
<label for="" class="form-label fw-semibold">Date range</label>
<input type="text" name="daterange" value="" id="datepicker" />
</div>
<div style="display: flex; flex-direction: column;">
<label for="" class="form-label fw-semibold">Select</label>
<select name="trade-listing-selector" id="trade-listing-selector">
<option value="Equity">Equity</option>
<option value="nsefo">NSE F&O</option>
<option value="nsecurder">NSE Currency Derivatives</option>
<option value="nsecom">NSE Commodity</option>
</select>
</div>
<div style="display: flex; flex-direction: column;" class="ScritpwiseDiv">
<label for="" class="form-label fw-semibold">Select</label>
<select name="trade-listing-selector" id="">
<option value="Equity">Scritpwise</option>
<option value="nsefo">Clientwise</option>
</select>
</div>
</div>
<div class="col-auto d-flex justify-content-center">
<button class="custom-primary-btn mt-4">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
<script>
const selectElement = document.getElementById("trade-listing-selector");
let ScritpwiseDiv = document.querySelector(".ScritpwiseDiv");
console.log(ScritpwiseDiv);
selectElement.addEventListener("change", function() {
if (selectElement.value != 'Equity') {
ScritpwiseDiv.classList.add('hide')
} else {
ScritpwiseDiv.classList.remove('hide')
}
});
</script>
<script>
const labels = document.querySelectorAll('.rad-label');
labels.forEach(function(item) {
item.addEventListener('click', () => {
labels.forEach(label => {
label.classList.remove('rad-label-background');
});
item.checked = true
item.classList.add('rad-label-background')
});
})
</script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
</script>
<%- include('../include/scripts.ejs') %>