Sindbad~EG File Manager
{% extends "conferenceapp/layout.html" %}
{% block style %}
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
{% endblock %}
{% block content %}
<!-- <div class="container"> -->
<form id="transaction_api_form">
<div class="card" style="border-color:#a5a7a7;border-radius: 10px;margin: 10px;">
<div class="card-body ">
<div class="row">
<div class="col-lg-10 text-right">
<h2 style="text-align: center;color: darkred;">{{conf_data.conf_id or ''}} Payumoney Transactions</h2>
</div>
<div class="col-lg-2 text-center">
<input type="button" class="btn btn sm btn-danger" value="Back" onClick="javascript:history.go(-1)" />
</div>
</div><br/>
<div class="progress">
<div class="progress-bar bg-success " role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">25%</div>
</div>
<div id="msg_div" style="color:red;text-align: center;font-size: 20px;"></div>
<div class="row">
<div class="col-lg-3"></div >
<div class="alert alert-danger alert-dismissible col-lg-6 text-center" role="alert" id="error_msg_div">
<p class="close close_id" aria-label="close">×</p>
<span aria-hidden="true" id="error_msg" >×</span>
<!-- <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> -->
</div>
<div class="col-lg-3"></div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12 text-center">
<label>Conference</label><br />
<select class="form-control" id="conf_id" name="conf_id" >
<option value="" id="select" selected>-- Select Conference --</option>
{% if conf_data %} {% for row in conf_data %}
<option value="{{row.conf_id}}">{{row.conf_name}} </option>
{% endfor %} {% endif %}
</select>
<div id="error-message_conf" style="color: red;font-size: 18px;"></div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 text-center">
<label>Start Date Time</label><br />
<input class="form-control" type="date" id="from_date" name="from_date" value="{{current_dt }}" placeholder="--- Please Select Date ----" />
<div id="error-message_f_date" style="color: red;font-size: 18px;"></div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 text-center">
<label>End Date Time</label><br />
<input class="form-control" type="date" id="to_date" name="to_date" value="{{current_dt}}"placeholder="--- Please Select Date ----"/>
<div id="error-message_e_date" style="color: red;font-size: 18px;"></div>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 text-center mt-4 ">
<input type="button" class="btn btn-primary" name="get_data" id="get_data" value="Get Data from Payumoney" >
</div>
</div><br/>
</div>
</div>
<!-- Filter block start -->
<div class="card" style="border-color:#a5a7a7;border-radius: 10px;margin: 10px;">
<div class="card-header" id="card_header_div" style="background-color: #072645;color: white;">
<h6>Filter <i class="bi bi-filter"></i></h6>
</div>
<div class="card-body" id="card_body_div" >
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-12">
<label>Select Conference </label>
<select class="form-control" id="conf_id_1"name="conf_id_1">
<option value="" id="select" selected>-- Select Conference --</option>
{% if conf_data %} {% for row in conf_data %}
<option value="{{row.conf_id}}">{{row.conf_name}} </option>
{% endfor %} {% endif %}
</select>
<div id="error_msg_conf" style="color: red;font-size: 18px;"></div>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<label>From Date </label>
<input type="date" name="from_date_1" class="form-control" id="from_date_1">
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<label>To Date </label>
<input type="date" name="to_date_1" class="form-control" id="to_date_1">
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<label>Status</label>
<select class="form-control" id="status" name="status" multiple>
<option value="" id="select">Select Status</option>
<option value="success">success</option>
<option value="failure">failure</option>
</select>
</div>
<div class="col-lg-2 col-md-2 col-sm-12">
<label style="color: transparent;"><br/> . </label>
<input type="button" class="btn btn-success" name="submit_btn" id="submit_btn" value="Submit" style="background-color: #1f2c1f !important;">
</div>
</div>
</div> <!-- card body end-->
</div> <!-- card end -->
<!-- Filter block end -->
<div class="card" id="card_body_div_1" style="background-color:#fff0f0;border-radius: 10px;margin: 10px;">
<div class="card-body" >
<div class="table" id="transaction_table"></div>
</div>
</div>
</form>
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.js"></script>
<script type="text/javascript">
var BaseUrl = document.location.origin;
function dayDiff(firstDate, secondDate) {
firstDate = new Date(firstDate);
secondDate = new Date(secondDate);
if (!isNaN(firstDate) && !isNaN(secondDate)) {
firstDate.setHours(0, 0, 0, 0); //ignore time part
secondDate.setHours(0, 0, 0, 0); //ignore time part
var dayDiff = secondDate - firstDate;
dayDiff = dayDiff / 86400000; // divide by milisec in one day
return dayDiff;
} else {
return 0;
}
};
$(document).ready(function() {
$("#card_body_div").hide();
$("#card_body_div_1").hide();
$(".progress").hide();
$(document).on("click" , "#card_header_div", function(e)
{
e.preventDefault();
$("#card_body_div").toggle();
});
// $(document).on("click","#card_body_div_1",function(e) {
// e.preventDefault();
// $("#card_body_div_1").toggle();
// });
// conf_id selectize start
var selectconf_id = $("#conf_id").selectize();
var selectize = selectconf_id[0].selectize;
var selectconf_id_1 = $("#conf_id_1").selectize();
var selectize = selectconf_id_1[0].selectize;
// conf_id selectize end
// status selectize start
$('#status').selectize({
plugins: ['remove_button'],
delimiter: ',',
persist: false,
create: false,
items:status // for set selected multiple values
});
var select_status = $('#status').selectize({maxItems: 10});
var selectize_status = select_status[0].selectize;
// status selectize end
$("#error_msg_div").hide();
});
$(document).on('click','.close_id',function(e)
{
$("#error_msg_div").hide();
$("#error_msg").empty();
});
$(document).on('click','#get_data',function(e){
e.preventDefault();
var conf_id = $("#conf_id").val();
var from_date = $("#from_date").val();
var to_date = $("#to_date").val();
if (conf_id ==''){
var errorMessage = "Please select conference.";
$("#error-message_conf").html(errorMessage);
return false;
}
else if (from_date.length == 0){
var errorMessage_1 = "Please select conference.";
$("#error-message_f_date").html(errorMessage_1);
$("#error-message_conf").empty();
return false;
}
else if (to_date.length == 0){
var errorMessage_1 = "Please select conference.";
$("#error-message_e_date").html(errorMessage_1);
$("#error-message_f_date").empty();
$("#error-message_conf").empty();
return false;
}
else{
$("#error-message_conf").empty();
$("#error-message_f_date").empty();
$("#error-message_e_date").empty();
}
var daysDifference = dayDiff($('#from_date').val(), $('#to_date').val());
// Check if the difference is exactly 7 days
if (daysDifference < 7 && daysDifference >= 0) {
$("#error_msg_div").hide();
}
else if (daysDifference <= 0) {
var errorMessage = "Please select first start date after select end date.";
$("#error_msg_div").show();
$("#error_msg").html(errorMessage);
return false;
}
else {
var errorMessage = "Please select a date range with a difference of less than or equal to 7 days.";
$("#error_msg_div").show();
$("#error_msg").html(errorMessage);
return false;
}
var formData = $('#transaction_api_form').serialize();
var url_1 = BaseUrl +"/payumoeny_transactions";
var progressBar= $('.progress')
$.ajax({
xhr: function()
{
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener('progress', function(event) {
if (event.lengthComputable) {
var percent = (event.loaded / event.total) * 100;
progressBar.css('width', percent + '%');
// document.querySelector('.progress-${file.name}')..textContent = files[0].name; // Display filename
}
}, false);
return xhr;
},
// xhr: function() {
// var xhr = new window.XMLHttpRequest();
// //Upload progress
// xhr.upload.addEventListener("progress", function(evt){
// if (evt.lengthComputable) {
// var percentComplete = evt.loaded / evt.total;
// //Do something with upload progress
// console.log(percentComplete);
// }
// }, false);
// return xhr;
// },
type: 'POST',
url : url_1,
data: formData,
success: function(response) {
var data_1 = JSON.parse(response);
var status = data_1.status;
var msg = data_1.msg;
var html_data = data_1.html_data;
if (status == 1) {
$(".progress").show();
$('.progress-container-'+status+' .file-status').html('Completed!');
$('.progress-container-'+status+' .file-status').css('color','green');
progressBar.css('background-color','green');
alert(msg);
}
else
{
alert(msg);
}
},
error: function(error) {
$(".progress").show();
$('.progress-container-'+status+' .file-status').html('Error!');
$('.progress-container-'+status+' .file-status').css('color','red');
progressBar.css('background-color','red');
// progressContainer.style.display = 'none'; // Hide the progress container
// progressBar.style.width = '0'; // Reset progress bar width
// fileNameSpan.textContent = ''; // Clear filename
// alert('An error occurred during upload.');
}
});
});
$('#submit_btn').click(function() {
$("#transaction_table").show();
var conf_id = $("#conf_id_1").val();
if( conf_id =$('#conf_id_1').val() == '' )
{
var errorMessage = "Please select conference.";
$("#error_msg_conf").html(errorMessage);
return false;
}
$("#error_msg_conf").empty();
var from_date_1 = $("#from_date_1").val();
var to_date_1 = $("#to_date_1").val();
var status = $("#status").val();
var formData = $('#transaction_api_form').serialize();
var url_1 = BaseUrl +"/view_payumoeny_transactions";
$.ajax({
type: 'POST',
url : url_1,
data: formData,
success: function(response) {
var data_1 = JSON.parse(response);
var status = data_1.status;
var msg = data_1.msg;
var html_data = data_1.html_data;
if (status == 1) {
$("#card_body_div_1").show();
$("#transaction_table").empty();
$("#transaction_table").html(html_data);
return true;
} else {
alert(msg);
return false;
}
},
error: function(error) {
console.log(error);
}
});
});
</script>
{% endblock %}
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists