Move and rename button [Issue #24]

web/eccs.css

@@ -226,3 +226,8 @@ input[type=checkbox] {
     display: none;
     background-size: 100px 100px;
 }
+
+.top .inline {
+  display: flex;
+  justify-content: space-between;
+}

web/eccs.js

@@ -300,7 +300,7 @@ $(document).ready(function() {
         },
         "lengthMenu": [[10, 30, 50, 100, -1], [10, 30, 50, 100, "All"]],
         "autoWidth": false,
-        "dom": '<"top"lip>rt<"bottom"><"clear">',
+        "dom": '<"top"<"inline"l<"statistics">>ip>rt<"bottom"><"clear">',
         "columns": [
             {
               "className":      'details-control',
@@ -350,7 +350,11 @@ $(document).ready(function() {
           }
 
         },
-        "order": [[1, 'asc']]
+        "order": [[1, 'asc']],
+        "fnDrawCallback": function() {
+            let r= $('<input type="button" id="statisticsButton" value="ECCS demand"/>');
+            $(".top .statistics").empty().append(r)
+         }
     } );
      
     // Add event listener for opening and closing details

web/index.php

@@ -118,7 +118,7 @@ $data[ 'check_result' ] = htmlspecialchars($_GET[ "check_result" ] ?? null);
               var check_result = "<?php echo $data[ 'check_result' ] ?>";
            </script>
            <script type="text/javascript" src="eccs.js"></script>
-           <script type="text/javascript" src="statistics.js" /></script>
+           <script type="text/javascript" src="statistics.js"></script>
          </div> <!-- END eccs-central -->
          <div id="statisticsModal" class="modal">
             <div class="modal-content">

web/statistics.js

@@ -6,7 +6,7 @@ $(document).ready(function() {
 		$("#statisticsModal").hide()
 	});
 	
-	$("#statisticsButton").on("click", function() {
+	$(document).on("click", "#statisticsButton", function() {
 		$("#statisticsModal").show()
 		getStatistics();
 	})