cron_logs_view.mustache 5.91 KB
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>

<div class="container">
	<div class="cardtitle">
          <p class="banner-title mb-0 pb-0 bold" style="font-size: 30px;">Cron logs view</p>
          <p class="dasboard_margin">It shows all cron entries that should be ran today. We can fliter the cron details based on the date filter</p>
    </div>
</div>

<div class="container"> 
	<div class="input-group mb-3">
		<div  class="input-group-prepend" style="display: block;padding: 10px;text-align: justify;width: 25em;">
		  	<label for="date_filter">Date</label>
		    <input type="date" id="date_filter" class="form-control" aria-label="Default" aria-describedby="date_filter">
		    <span id="date_filter_div"></span>
		</div>
		<div class="input-group-prepend" style="display: block;padding: 10px;text-align: justify;width: 25em;margin-top: 30px;">
			<button id="filter_logs" class="btn btn-primary" type="button" title="Filter">Filter
		        	<span class="icon-stack"><i style="line-height: 0.5em;" class="icon-filter icon-stack-base" aria-hidden="true"></i>
		            <i style="line-height: 0.2em;" class="icon-add"></i></span></button>
		    <button id="reset_filter_logs" class="btn btn-primary" type="button" title="Reset">Reset
		        	<span class="icon-stack"><i style="line-height: 0.5em;" class="icon-filter icon-stack-base" aria-hidden="true"></i>
		            <i style="line-height: 0.2em;" class="icon-add"></i></span></button>
		</div>
	</div>
</div>

<div class="container">
	<table id="view_logs_entries_table" class="compact table table-bordered table-striped table-hover">
		<thead><tr><th class="center-class">Sno</th><th class="center-class">Cron file</th><th class="center-class">Cron log</th></tr></thead>
		<tbody>
			  {{#tablecontents}}
		          <tr>
		             <td class="center-class">{{sno}}</td>
		             <td class="center-class">{{{name}}}</td>
		             <td class="center-class">{{log}}</td>
		          </tr>
	          {{/tablecontents}}
	    </tbody>
	</table>
</div>

<script>

function read(obj,sno){
	   if($(obj).hasClass("less")) {
           $(obj).removeClass("less");
           $(obj).html('<font style="color:#33ccff;cursor:pointer;">showmore</font>');
           $("#text_"+sno).css('display','none !important');
           $("#moreellipses_"+sno).css('display','block');
       } else {
           $(obj).addClass("less");
           $(obj).html('<font style="color:#33ccff;cursor:pointer;">showless</font>');
           $("#text_"+sno).css('display','block !important');
           $("#moreellipses_"+sno).css('display','none');           
       }
       $(obj).parent().prev().toggle();
       $(obj).prev().toggle();
       return false;
}

var log_DataTable = "";    
 	log_DataTable = $('#view_logs_entries_table').DataTable({
		    	  dom: 'lBfrtip',
					"pageLength": 30,
					"lengthChange": false,
		            lengthMenu: [[10, 25, 50, 100],[10, 25, 50, 100]],
		            "language": {
		        		"emptyTable":  "No records found."
		    		},
		    	  "columns": [
		              { "data": "sno", 
			             "render": function( data, type, full) {
			    	      	    s_no = data;
			    	      	    return data;
			    	      }
		    	      },
		              { "data": "name" },
		              { "data": "log",
		              	"render": function( data, type, full) {
							 var showChar = 150;
			                 var ellipsestext = "..... ";
			                 var moretext = '<font style="color:#33ccff;cursor:pointer;">showmore</font>';
			                 var lesstext = '<font style="color:#33ccff;cursor:pointer;">showless</font>';
			                 var contentt = JSON.stringify(data);
			                 var content = contentt.replace(/["]+/g, '').substring(0, contentt.length-1);

                 			 if(content.length > showChar) {
								var c = content.substr(0, showChar);
                         		var h = content.substr(showChar, content.length - showChar);
								var html = c + '<span class="moreellipses_'+s_no+'">' + ellipsestext+ "</span><span class='morecontent'><span id='text_"+s_no+"' style='display:none;'>" + h + "</span>&nbsp;&nbsp;<a onclick='read(this,"+s_no+")'"+" class='morelink'>" + moretext + "</a></span>"; //here call the read() function
                                return  html.toString();

                     		 }
                     		 return data;
                          }
                       }
		          ]
	});

$('#filter_logs').click(function() { 
    	var date = $("#date_filter").val(); 
    	if((date == '')) {
	   		var alert_message = '<p style="color: red;">* Date is mandatory.</p>';
	  		if(('#date_filter_div').length != 0 ) {
					 $('#date_filter_div').empty();
			}
			$('#date_filter_div').append(alert_message);
	   
	   }
	   else {
	   		if(('#date_filter_div').length != 0 ) {
					 $('#date_filter_div').empty();
			}
			$.ajax({
		         method: "GET",
		         url: M.cfg.wwwroot + '/blocks/log/ajax.php',
		         data: {"choice" : "get_logs","date" : date}
		     }).done(function(response) {
		    	 var data = JSON.parse(response);
		         var userdata =  JSON.parse(data.userdata);
		         log_DataTable.clear().draw();
		         log_DataTable.rows.add(userdata).draw();
		         
		     });
		}
    
    });
    
    $('#reset_filter_logs').click(function() { 
    	if(('#date_filter_div').length != 0 ) {
			 $('#date_filter_div').empty();
		}
		$.ajax({
	         method: "GET",
	         url: M.cfg.wwwroot + '/blocks/log/ajax.php',
	         data: {"choice" : "get_logs","date" : ''}
	     }).done(function(response) {
	    	 var data = JSON.parse(response);
	         var userdata =  JSON.parse(data.userdata);
	         log_DataTable.clear().draw();
	         log_DataTable.rows.add(userdata).draw();
	         
	     });
    
    });

</script>