Bootstrap + DataTables cleanup

front/appEventsCore.php

@@ -17,7 +17,7 @@
 $(document).ready(function() {
 
     // Load JSON data from the provided URL
-    $.getJSON('api/table_appevents.json', function(data) {
+    $.getJSON('/php/server/query_json.php?file=table_appevents.json', function(data) {
         // Process the JSON data and generate UI dynamically        
         processData(data)
 
@@ -89,7 +89,3 @@ function processData(data) {
 
 </script>
 
-<!-- Datatable -->
-<link rel="stylesheet" href="lib/datatables.net-bs/css/dataTables.bootstrap.min.css"/>
-<script src="lib/datatables.net/js/jquery.dataTables.min.js"></script>
-<script src="lib/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

front/css/app.css

@@ -1375,6 +1375,12 @@ input[readonly] {
     text-align: left;
 }
 
+#devicePageInfoPlc
+{
+    display: none;
+    padding-top: 2em;
+}
+
 /* ----------------------------------------------------------------- */
 /* MODAL popups */
 /* ----------------------------------------------------------------- */

front/deviceDetails.php

@@ -28,6 +28,14 @@
         &nbsp<small>Quering device info...</small>
       </h1>
 
+      <div id="devicePageInfoPlc" class="card-body bg-light">
+          <div class="small-box panel  rounded">
+              <div class="inner text-center">
+
+              </div>                    
+          </div>
+      </div>
+
       <!-- period selector -->
       <span class="breadcrumb" style="top: 0px;">
         <select class="form-control" id="period" onchange="javascript: periodChanged();">
@@ -180,15 +188,6 @@
 ?>
 
 
-<!-- ----------------------------------------------------------------------- -->
-<!-- iCkeck -->
-  <link rel="stylesheet" href="lib/iCheck/all.css">
-  <script src="lib/iCheck/icheck.min.js"></script>
-
-<!-- Datatable -->
-  <link rel="stylesheet" href="lib/datatables.net-bs/css/dataTables.bootstrap.min.css">
-  <script src="lib/datatables.net/js/jquery.dataTables.min.js"></script>
-  <script src="lib/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
 
 <!-- fullCalendar -->
   <link rel="stylesheet" href="lib/fullcalendar/fullcalendar.min.css">

front/deviceDetailsEdit.php

@@ -223,11 +223,15 @@ class="fa fa-circle-info pointer helpIconSmallTopRight"
             // Page title - Name
             if (mac == "new") {
                 $('#pageTitle').html(`<i title="${getString("Gen_create_new_device")}" class="fa fa-square-plus"></i> ` +  getString("Gen_create_new_device"));
+                $('#devicePageInfoPlc .inner').html(`<i class="fa fa-circle-info"></i> ` +  getString("Gen_create_new_device_info"));
+                $('#devicePageInfoPlc').show();
             } else if (deviceData['devOwner'] == null || deviceData['devOwner'] == '' ||
                 (deviceData['devName'].toString()).indexOf(deviceData['devOwner']) != -1) {
                 $('#pageTitle').html(deviceData['devName']);
+                $('#devicePageInfoPlc').hide();
             } else {
                 $('#pageTitle').html(deviceData['devName'] + ' (' + deviceData['devOwner'] + ')');
+                $('#devicePageInfoPlc').hide();
             }
         };
 

front/devices.php

@@ -115,14 +115,6 @@
 ?>
 
 
-<!-- ----------------------------------------------------------------------- -->
-<!-- Datatable -->
-  <link rel="stylesheet" href="lib/datatables.net-bs/css/dataTables.bootstrap.min.css">
-  <link rel="stylesheet" href="lib/datatables.net/css/select.dataTables.min.css">
-  <script src="lib/datatables.net/js/jquery.dataTables.min.js"></script>
-  <script src="lib/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
-  <script src="lib/datatables.net/js/dataTables.select.min.js"></script>
-
 <!-- page script ----------------------------------------------------------- -->
 <script>
   var deviceStatus    = 'all';
@@ -568,6 +560,12 @@ function initializeDatatable (status) {
     'order'        : tableOrder,   
     'select'       : true, // Enable selection   
 
+    'fixedHeader': true,
+    'fixedHeader': {
+        'header': true,
+        'footer': true
+    },
+
     'columnDefs'   : [
       {visible:   false,         targets: tableColumnHide },      
       {className: 'text-center', targets: [mapIndx(4), mapIndx(9), mapIndx(10), mapIndx(15), mapIndx(18)] },      
@@ -811,41 +809,15 @@ function handleLoadingDialog(needsReload = false)
 // the Miantenance section with a 'macs' query string identifying selected devices 
 function multiEditDevices()
 {
-  rows  = $('#tableDevices')[0].rows
-
-  // Initialize an empty array to store selected rows
-  var selectedRows = [];
-
-  // console.log($('#tableDevices')[0].rows);
-
-  // Loop through each row in the HTML collection
-  for (var i = 0; i < rows.length; i++) {
-      var row = rows[i];
-      // Check if the row has the 'selected' class
-      if (row.classList.contains('selected')) {
-          // If selected, push the row's data to the selectedRows array
-          selectedRows.push(row);
-      }
-  }
-
-  // Now, selectedRows contains all selected rows
-  console.log(selectedRows);
-
-  var devicesDataTableData = $('#tableDevices').dataTable().fnGetData();
-
-  var selectedDevices = [];
-
-  for (var i = 0; i < selectedRows.length; i++) {
-    selectedDevices.push(devicesDataTableData[selectedRows[i]._DT_RowIndex]);    
-  }
-
-  // Now, selectedDevices contains all selected devices
-  // console.log(selectedDevices);
+  // get selected devices
+  var selectedDevicesDataTableData = $('#tableDevices').DataTable().rows({ selected: true, page: 'current' }).data().toArray();
 
+  console.log(selectedDevicesDataTableData);
+
   macs = ""
 
-  for (var i = 0; i < selectedDevices.length; i++) {
-    macs += selectedDevices[i][mapIndx(11)] + ",";  // [11] == MAC    
+  for (var j = 0; j < selectedDevicesDataTableData.length; j++) {
+    macs += selectedDevicesDataTableData[j][mapIndx(11)] + ",";  // [11] == MAC    
   }
 
   // redirect to the Maintenance section
@@ -860,12 +832,19 @@ function getMacsOfShownDevices() {
   rows  = $('#tableDevices')[0].rows
   macs = []
 
-  var devicesDataTableData = $('#tableDevices').dataTable().fnGetData();
+  // var devicesDataTableData = $('#tableDevices').dataTable().fnGetData();
+  var devicesDataTableData = $('#tableDevices').DataTable().rows({ selected: false, page: 'current' }).data().toArray();
+
+  console.log(devicesDataTableData);
+
 
   var selectedDevices = [];
 
   // first row is the heading, skip
   for (var i = 1; i < rows.length; i++) {
+
+    // console.log(rows[i]._DT_RowIndex);
+
     selectedDevices.push(devicesDataTableData[rows[i]._DT_RowIndex]);    
   }  
 

front/events.php

@@ -173,14 +173,6 @@
   require 'php/templates/footer.php';
 ?>
 
-
-<!-- ----------------------------------------------------------------------- -->
-<!-- Datatable -->
-  <link rel="stylesheet" href="lib/datatables.net-bs/css/dataTables.bootstrap.min.css">
-  <script src="lib/datatables.net/js/jquery.dataTables.min.js"></script>
-  <script src="lib/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
-
-
 <!-- page script ----------------------------------------------------------- -->
 <script>
   var parPeriod       = 'nax_parPeriod';

front/index.php

@@ -166,8 +166,7 @@
 
 <!-- jQuery 3 -->
 <script src="lib/jquery/jquery.min.js"></script>
-<!-- Bootstrap 3.3.7 -->
-<script src="lib/bootstrap/bootstrap.min.js"></script>
+
 <!-- iCheck -->
 <script src="lib/iCheck/icheck.min.js"></script>
 <script>

front/js/ui_components.js

@@ -528,7 +528,7 @@ window.addEventListener("load", function() {
   // try to initialize 
   setTimeout(() => {
     initSelect2()
-    initializeiCheck();
+    // initializeiCheck();
   }, 1000);
 });