rec.html 9.89 KB
<link href="js/datatables/css/jquery.dataTables.css" rel="stylesheet">
                 <link rel="stylesheet" type="text/css" href="css/select.dataTables.min.css" rel="stylesheet">
                    <style type="text/css">
                        
                        .btn{
                            border-radius:4px;
                            text-align:center;
                        }
                        .selection{
                            text-align:center;
                        }
                        table.dataTable tr th.select-checkbox.selected::after {
                         content: "✔";
                         margin-top: -11px;
                         margin-left: -4px;
                         text-align: center;
                         text-shadow: rgb(176, 190, 217) 1px 1px, rgb(176, 190, 217) -1px -1px, rgb(176, 190, 217) 1px -1px, rgb(176, 190, 217) -1px 1px;
                     }
                      table.dataTable tr th.select-checkbox.selected::before {
                         content: " ";
                         margin-top: -11px;
                         margin-left: -4px;
                         text-align: center;
                         text-shadow: rgb(176, 190, 217) 1px 1px, rgb(176, 190, 217) -1px -1px, rgb(176, 190, 217) 1px -1px, rgb(176, 190, 217) -1px 1px;
                     }
                    .not-active {
                        pointer-events: none;
                        cursor: default;
                        text-decoration:none;
                        color:black;
                        }
                    </style>					
                    <?php
                     $dir='/home/pi/Desktop/vAlert/rec/';
                     $files=scandir($dir,1);
                     
                    

                     ?>
                    <main class="mn-inner">
						<div class="row">
                        <div class="col s12" style="text-align:center;">
                            <div class="page-title">
                                 
                            </div>
                         </div>
                      <div>	
						<div class="card">
                            <div class="card-content" style="    height:100%;">
                               <!-- <iframe src="fileManager/ft2_rec.php" width="100%" height="100%" frameborder="0" scrolling="0"></iframe>-->
                               <div class="selection">
								<?php if($_SESSION['account'] == 'admin'){ ?>
								<button id="deletesallfiles" class="btn btn-primary">delete all Files</button>
                                <button id="deleteselectedRows" class="btn btn-primary">delete all selected </button>
								<?php } ?>
                             </div>
                               <table class="display" id="example" cellspacing="20" width="100%" >

                                <thead>
                                    
                                    <tr>
                                        <th> select all  </th>
                                        <th>Date</th>
                                        <th style="text-align:center;">File Name</th>
                                        <th> File Size</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tfoot>
                                   <tr>
                                        <th> select all  </th>
                                        <th>Date</th>
                                       <th style="text-align:center;">File Name</th>
                                        <th> File Size</th>
                                        <th></th>
                                    </tr>  

                                </tfoot>

                                <tbody>
                                <?php 
                                   foreach($files as $key=>$value){
                                   if(is_file($dir.$value)){
                                   ?>
                                    <tr>
                                        <td><input type="hidden" name="filename[]" value="<?= $value ?>"/></td>
                                        <th><?=  date ("Y-m-d H:i:s", filemtime($dir.$value))?></th>
                                        <td style="text-align:center;"><?php echo '<a href="'.$dir.$value.'" class="not-active">';?><?= $value ?></a></td>
                                        <td> <?= filesize($dir.'/'.$value)/1000?> KB</td>
                                        <td><a href="view/downloadFile.php?path=<?=$dir.$value?>">Dowload</a></td>
                                    </tr>

                                 <?php 
                                    }
                                   }?>

                                </tbody>
                                   


                               </table>
                           
 
                            </div>
                        </div>
                        </div>
						</div>
					</main>
				</div>
        <div class="left-sidebar-hover"></div>
        
        <!-- Javascripts -->
        <script src="js/dataTables.bootstrap.min.js"></script>
        <script src="assets/plugins/jquery/jquery-2.2.0.min.js"></script>
        <script src="assets/plugins/materialize/js/materialize.min.js"></script>
        <script src="assets/plugins/material-preloader/js/materialPreloader.min.js"></script>
        <script src="assets/plugins/jquery-blockui/jquery.blockui.js"></script>
        <script src="assets/plugins/select2/js/select2.min.js"></script>
        <script src="assets/js/alpha.min.js"></script>
        <script src="assets/js/pages/form-select2.js"></script>
        <script src="js/datatables/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="js/dataTables.select.min.js"></script>

        <script type="text/javascript">
            
        
 $(document).ready(function() {
     var content=new Array();
   var table=$('#example').DataTable( {
        colReorder: true,
        dom: 'Blfrtip',
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0,
            checkboxes: {
               selectRow: true
            },
           
        } ],

        select: {
            style:    'multi',
            selector: 'th:first-child'
        },
        language: {
                    searchPlaceholder: '<?=KEY_WORD;?>',
                    sInfo: "<?=STARTTOEND;?>",
                    sSearch: '',
                    sLengthMenu: '<?=Display_record;?>',
                    sLength: 'dataTables_length',
                     oPaginate: {
                            sFirst: '<i class="material-icons">chevron_left</i>',
                            sPrevious: '<i class="material-icons">chevron_left</i>',
                            sNext: '<i class="material-icons">chevron_right</i>',
                            sLast: '<i class="material-icons">chevron_right</i>' 
                        }
                    },
        order: [[ 1, 'asc' ]]
    } );
   $('.dataTables_length select').addClass('browser-default');

    $('#example tbody').on('click', 'tr', function () {
        if($(this).hasClass('selected'))
        {
            table.row(this).deselect();
            if($("table tr").hasClass("selected")){
              $("th.select-checkbox").addClass("selected");
              $("th.select-checkbox").html("Deselect All");
			  var filestr=table.row(this).data()[0].split("value=");
			  content.push(filestr[1]);
            }
            else{
                 $("th.select-checkbox").removeClass("selected");
                 $("th.select-checkbox").html("Select All");
				 var filestr=table.row(this).data()[0].split("value=");
				 content.splice( content.indexOf(filestr[1]), 1 );
            }
        }
        else{
            table.row(this).select();
            $("th.select-checkbox").addClass("selected");
             $("th.select-checkbox").html("Deselect All");
			 var filestr=table.row(this).data()[0].split("value=");
			  content.push(filestr[1]);
        }
        
    } );


   $("#deleteselectedRows").click(function(){
       
		$.post('view/deletefile.php',{content:content},function(data,status){
              alert(status);
              window.location.reload();
			  //console.log(data);
      });
   });
   $("#deletesallfiles").click(function(){
    var hold=new Array();
     content=JSON.stringify(table
        .columns( 1 )
        .data()).split("\"");
		if(confirm("Do you want to delete all files?")){
			$.post('view/deletefile.php',{content:'deleteall'},function(data,status){
				alert(status);
				window.location.reload();
			});
		}
         
   });

   table.on("click", "th.select-checkbox", function() {
    if ($("th.select-checkbox").hasClass("selected")) {
        table.rows({page:'current'}).deselect();
        $("th.select-checkbox").removeClass("selected");
         $("th.select-checkbox").html("Select All");
		console.log(111);
    } else {
        table.rows({page:'current'}).select();
        $("th.select-checkbox").addClass("selected");
        $("th.select-checkbox").html("Deselect All");
		table.column(0,{page:'current'}).data().each(function(value, index) {
			//console.log(value, index);
			content.push(value);
		});
		
    }
}).on("select deselect", function() {
    ("Some selection or deselection going on")
    if (table.rows({
            selected: true
        }).count() !== table.rows().count()) {
        $("th.select-checkbox").removeClass("selected");
    } else {
        $("th.select-checkbox").addClass("selected");
    }
});



} );

        </script>
    </body>
</html>