Conversion_Kitchen_Code/kitchen_counter/lpp/templates/lpp/minortable.html

221 lines
8.8 KiB
HTML
Executable File

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Next Film | LPP List</title>
<style>
#popup{
background-color: grey;
border: solid black 1px;
border-radius: 5px;
text-align: center;
padding: 1cm;
z-index: 99999;
}
#popup h3{
color :white;
margin: 1em;
}
#popup button{
padding: 4px 7px 4px 7px;
color: white;
border:solid white 1px;
margin-right:1cm ;
}
#delete-button{
background-color: red;
}
#delete-button a{
color:white;
text-decoration:none;
}
#cancelit{
background-color: green;
}
</style>
</head>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
<body>
<div id="multilingual">
<div id="example_wrapper" class="dataTables_wrapper" style="padding: 5%;">
<table id="example" class="display" style="width:100%;">
<thead>
<tr>
<th>LPP ID</th>
<th>Full Name</th>
<th>Registered on</th>
<th>Language Pair</th>
<th>Status</th>
<th>Level</th>
<th>Score</th>
<th>Availability</th>
<th>Withdrawal Request</th>
<th>LPP Current Balance</th>
<!-- <th>Transfer Amount</th>-->
<th>Actions</th>
</tr>
</thead>
<tbody>
{%if data%}
{%for i in data%}
<tr>
<td>{{i.lpp_id}}</td>
<td>{{i.first_name}} {{i.last_name}}</td>
<td>{{i.date_at}}</td>
<td>{{i.firstLanguage}}-{{i.secondLanguage}}</td>
<td>{{i.status}}</td>
<td>{{i.level}}</td>
<td>{{i.score}}</td>
<td>{% if i.availabity == True %}
Available
{% else %}
Unavailable
{% endif %}
</td>
{% if i.lpp_withdraw_request %}
<td>
<form action="{% url 'lpp_task_earning' %}" method="POST" enctype="multipart/form-data" onsubmit="return verify_amount('{{i.lpp_id}}','{{i.lpp_task_balance}}')">
{% csrf_token %}
<input type="hidden" id="amount-{{i.lpp_id}}" value="{{i.lpp_withdraw_amount}}" name="transfer_amount" />
<label style="color:green;">Rs. {{i.lpp_withdraw_amount}}</label>
<button style="background-color:blue;color:white;cursor:pointer;" type="submit" name="id" value="{{i.lpp_id}}">Transfer</button>
</form>
</td>
{% else %}
<td>No Request</td>
{% endif %}
{% if i.lpp_task_balance %}
<td><b style="color:red">Rs. {{i.lpp_task_balance}}</b></td>
{% else %}
<td>N/A</td>
{% endif %}
<!-- {% if i.lpp_task_balance %}-->
<!-- <td>-->
<!-- <form action="{% url 'lpp_task_earning' %}" method="post" enctype="multipart/form-data" onsubmit="return verify_amount('{{i.lpp_id}}','{{i.lpp_task_balance}}')">-->
<!-- {% csrf_token %}-->
<!-- <input type="number" id="amount-{{i.lpp_id}}" name="transfer_amount" step="any" min="0" required>-->
<!-- <center><button type="submit" name="id" value="{{i.lpp_id}}">Transfer</button></center>-->
<!-- </form>-->
<!-- </td>-->
<!-- {% else %}-->
<!-- <td><b>No Funds to Transfer</b></td>-->
<!-- {% endif %}-->
<td style="display:flex">
<button style="margin-left:5px"><a style=" text-decoration : none; color:black;" href="/lpp/majortable/{{i.lpp_id}}/view">More</a> </button>
<button onclick="popup('{{i.first_name}} {{i.last_name}}', '{{i.lpp_id}}')" style="margin-left:5px">Delete</button>
</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
</div>
</div>
<div id="popup" style="position: fixed; transform: translate(-50%, -50%);top:50%; left:50%; display: none;">
<h3 id="popup-title" style="text-align: center;"></h3>
<div style="display: flex;justify-content: center;">
<button id='cancelit' onclick="document.getElementById('popup').style.display = 'none'">Cancel</button>
<button id="delete-button"></button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script>
function popup(lpp_name, id){
document.getElementById('popup').style.display = 'block';
document.getElementById('popup-title').innerHTML = 'Are you sure you want to Delete LPP : <b>' + lpp_name + '</b>?';
document.getElementById('delete-button').innerHTML = '<a style=" text-decoration : none;" href="/lpp/lppdelete/'+id+'">Confirm</a>';
}
</script>
<script>
function verify_amount(id1, amt2){
console.log("Checking Transfer Amount");
amt1 = document.getElementById('amount-'+id1).value;
var arry = amt1.split(".")
if (arry[0] == ''){
alert("Enter the Decimal or add it appropriately or add a digit before the decimal if you haven't");
return false
}
deducted_amount = parseFloat(amt1);
wallet_amount = parseFloat(amt2);
console.log(deducted_amount,wallet_amount);
console.log(typeof(deducted_amount),typeof(wallet_amount))
if (deducted_amount <= wallet_amount){
return true
}else{
alert("This amount is more than the LPP has been assigned")
return false
}
}
</script>
<script>
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $('#example thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example').DataTable( {
stateSave: true
} );
// Restore state
var state = table.state.loaded();
if ( state ) {
table.columns().eq( 0 ).each( function ( colIdx ) {
var colSearch = state.columns[colIdx].search;
if ( colSearch.search ) {
$( 'input', table.column( colIdx ).footer() ).val( colSearch.search );
}
} );
table.draw();
}
// Apply the search
<!-- table.columns().eq( 0 ).each( function ( colIdx ) {-->
<!-- $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {-->
<!-- table-->
<!-- .column( colIdx )-->
<!-- .search( this.value )-->
<!-- .draw();-->
<!-- });-->
<!-- });-->
});
</script>
<!--Commented Code for initialising DataTables Plugin-->
<!-- <script>-->
<!-- $(document).ready(function() {-->
<!-- $('#example').DataTable({-->
<!-- "pagingType": "full_numbers"-->
<!-- });-->
<!-- });-->
<!-- function deleteRow(btn) {-->
<!-- var row = btn.parentNode.parentNode;-->
<!-- row.parentNode.removeChild(row);-->
<!-- }-->
<!-- // ///////////////-->
<!-- $(".button").on("click", function() {-->
<!-- $('input:checked').not('.all').parents("tr").remove();-->
<!-- });-->
<!-- $('.all').on('click', function() {-->
<!-- var $inputs = $('table').find('input');-->
<!-- $inputs.prop('checked', 'checked');-->
<!-- });-->
<!-- </script>-->
</body>
</html>