Merge pull request #1018 from apinf/hotfix/dynatable-i18n-text-duplication

Hotfix/dynatable i18n text duplication

Author: Ville Jyrkkä

.meteor/packages

@@ -47,7 +47,6 @@ zimme:active-route
 mfactory:admin-lte
 cfs:filesystem
 mrt:flash-messages
-frenchbread:dynatable
 bevanhunt:leaflet
 brylie:leaflet-heat
 pfafman:filesaver

.meteor/versions

@@ -74,7 +74,6 @@ fastclick@1.0.11
 fortawesome:fontawesome@4.5.0
 forwarder:autoform-wizard@0.9.1
 forwarder:autoform-wizard-iron-router@0.1.4
-frenchbread:dynatable@0.1.0
 geojson-utils@1.0.8
 github@1.1.8
 gwendall:autoform-i18n@0.1.9_1

client/views/dashboard/charts/charts.css

@@ -4,3 +4,9 @@
 #overview-chart-box, #move-chart-box, #data-table-box, #filter-box, #map-box{
     padding:5px;
 }
+
+@media only screen and (max-width: 1551px) {
+    .data-table-container, .map-container {
+        width:100%;
+    }
+}

client/views/dashboard/charts/charts.html

@@ -11,10 +11,10 @@
     </div>
   </div>
   <div class="row">
-    <div class="col-lg-6 col-md-6 col-sm-12">
+    <div class="col-lg-6 data-table-container">
       {{> dataTable}}
     </div>
-    <div class="col-lg-6 col-md-6 col-sm-12">
+    <div class="col-lg-6 map-container">
       {{> map}}
     </div>
   </div>

client/views/dashboard/charts/charts.js

@@ -1,4 +1,5 @@
 import dc from 'dc';
+import dataTeble from 'datatables';
 
 Template.chartsLayout.rendered = function () {
 
@@ -201,23 +202,50 @@ Template.chartsLayout.created = function () {
       .renderVerticalGridLines(true)
       .elasticY(true);
 
-    // Creates Dynatable
-    var dynatable = $('#dc-data-table').dynatable({
-      features: {
-        pushState: false
-      },
-      dataset: {
-        records: setUpDataTable(),
-        perPageDefault: 10,
-        perPageOptions: [10, 20, 50, 100]
-      }
-    }).data('dynatable');
+    // Init datatable
+    initDatatable();
+
+    // Init datatable function
+    function initDatatable () {
+
+      // Get initial or updated table data
+      const tableData = setUpDataTable();
+
+      // Save reference to datatable body element
+      const datatableBody = $('.datatable tbody');
+
+      // Cleanup datatable if it already has any rows
+      datatableBody.empty()
+
+      // Iterate through each data item and append a row with data to datatable
+      _.each(tableData, (tableItem) => {
+        datatableBody.append(`
+          <tr>
+            <td scope="row">${tableItem.time}</td>
+            <td>${tableItem.country}</td>
+            <td>${tableItem.path}</td>
+            <td>${tableItem.ip}</td>
+            <td>${tableItem.response}</td>
+          </tr>
+          `);
+      });
+
+      // Initialize data table
+      $('.datatable').dataTable({
+        pagingType: 'simple'
+      });
+    }
 
     // Listens to filtering event and refreshes the table on a change
     function refreshTable() {
       dc.events.trigger(function () {
-        dynatable.settings.dataset.originalRecords = setUpDataTable();
-        dynatable.process();
+
+        // Destory datatable to drop pagination
+        $('.datatable').dataTable().fnDestroy();
+
+        // Fill datatable with updated data
+        initDatatable();
+
       });
     }
 
@@ -273,7 +301,7 @@ Template.chartsLayout.created = function () {
 
         // Error handling for empty fields
         try{
-          timeStamp = e.fields.request_at[0];
+          timeStamp = moment(e.fields.request_at[0]);
         }catch(e){
           timeStamp = "";
         }
@@ -303,7 +331,7 @@ Template.chartsLayout.created = function () {
         }
 
         dataSet.push({
-          "time"          : timeStamp,
+          "time"          : timeStamp.format("D/MM/YYYY HH:mm:ss"),
           "country"       : country,
           "path"          : path,
           "ip"            : requestIp,

client/views/dashboard/charts/table/table.html

@@ -3,16 +3,29 @@
     <div class="box-header with-border">
       <h3 class="box-title">{{_ "dataTable_Title"}}</h3>
     </div>
-    <table class='table table-hover display' id='dc-data-table'>
+    <table class="datatable table table-bordered">
       <thead>
         <tr>
-          <th data-dynatable-column="time" >{{_ "dataTable_TimeStamp"}}</th>
-          <th data-dynatable-column="country" >{{_ "dataTable_RequestCountry"}}</th>
-          <th data-dynatable-column="ip">{{_ "dataTable_RequestIP"}}</th>
-          <th data-dynatable-column="path">{{_ "dataTable_RequestPath"}}</th>
-          <th data-dynatable-column="response">{{_ "dataTable_ResponseTime"}}</th>
+          <th>
+            {{_ "dataTable_TimeStamp"}}
+          </th>
+          <th>
+            {{_ "dataTable_RequestCountry"}}
+          </th>
+          <th>
+            {{_ "dataTable_RequestPath"}}
+          </th>
+          <th>
+            {{_ "dataTable_RequestIP"}}
+          </th>
+          <th>
+            {{_ "dataTable_ResponseTime"}}
+          </th>
         </tr>
       </thead>
+      <tbody>
+
+      </tbody>
     </table>
   </div>
 </template>

client/views/dashboard/charts/table/table.less

@@ -2,3 +2,7 @@ a.dynatable-sort-header:hover {
   color: darkblue;
   text-decoration: underline;
 }
+
+.box-header.with-border {
+  margin-bottom: 1em;
+}

lib/i18n/en.i18n.json

@@ -118,7 +118,7 @@
   "apiBackend_Usage_Instructions_Note_Text": "You can find your API Key on your profile page.",
   "apiBackend_Usage_Instructions_Profile_Page_Link": "View profile.",
   "apiBackends_Add_API_Title": "Add API",
-  "apiBackends_Edit_API_Title": "Edit API", 
+  "apiBackends_Edit_API_Title": "Edit API",
   "deleteApiBackendConfirmation_header": "Delete API",
   "apiBackends_Title_Help": "API's name",
   "apiBackends_Backend_Title": "Backend",
@@ -186,11 +186,11 @@
   "filterData_Reset": "Reset All",
   "map_Title": "Map",
   "dataTable_Title": "Table",
-  "dataTable_TimeStamp": "Time stamp",
-  "dataTable_RequestCountry": "Request country",
-  "dataTable_RequestIP": "Request IP",
-  "dataTable_RequestPath": "Request path",
-  "dataTable_ResponseTime": "Response time (in milliseconds)",
+  "dataTable_TimeStamp": "Date",
+  "dataTable_RequestCountry": "Country",
+  "dataTable_RequestIP": "IP",
+  "dataTable_RequestPath": "Path",
+  "dataTable_ResponseTime": "Response time (ms)",
   "view_ApiBackend_Details_Title": "Details",
   "view_ApiBackend_Details_editButtonText": "Edit API Settings",
   "viewApiBackendDetails_deleteButton": "Delete",

package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "crossfilter": "^1.3.12",
     "d3": "^3.5.17",
+    "datatables": "^1.10.12",
     "dc": "^2.0.0-beta.30",
     "elasticsearch": "^11.0.1",
     "jquery.rateit": "^1.0.23",