Merge pull request #163 from vsimakhin/feature/logbook-table-summary

Feature/logbook table summary
vsimakhin · Oct 7, 2023 · 83a9f36 · 83a9f36
2 parents b5d583e + e2b3a6a
commit 83a9f36
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 246 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## [Unreleased]
+
+- New: Added rows `Total this page` and `Total all pages` for the main logbook table. The values are updated if you filter the search.
+
 ## [2.26.0] - 20.09.2023
 
 - Update: ignore case for filters on the `Map` page

diff --git a/cmd/web/static/css/datatables.min.css b/cmd/web/static/css/datatables.min.css
diff --git a/cmd/web/static/js/datatables.min.js b/cmd/web/static/js/datatables.min.js
diff --git a/cmd/web/templates/common-js.partials.gohtml b/cmd/web/templates/common-js.partials.gohtml
@@ -71,6 +71,37 @@ wlbCommon = function () {
         window.open("{{$api.Export}}/" + format, "_blank");
     }
 
+    // func convertNumberToTime converts time in integer format to string
+    function convertNumberToTime(number) {
+        var hours = Math.floor(number);
+        var minutes = Math.round((number - hours) * 60);
+        if (minutes < 10) {
+            minutes = "0" + minutes;
+        }
+        return hours + ":" + minutes;
+    }
+
+    // func convertTime converts time in string format to nubmber
+    function convertTime(time) {
+        if (typeof time === 'number') {
+            return time
+        }
+
+        if (time === "") {
+            return 0;
+        }
+
+        if (!time.includes(":")) {
+            return parseInt(time.replace(" ","")); // already converted
+        }
+
+        var hoursMinutes = time.split(/[.:]/);
+        var hours = parseInt(hoursMinutes[0], 10);
+        var minutes = hoursMinutes[1] ? parseInt(hoursMinutes[1], 10) : 0;
+
+        return hours + Math.round(minutes / 60 * 100) / 100;
+    }
+
     function escapeHtml(unsafe)
     {
         return unsafe
@@ -87,7 +118,9 @@ wlbCommon = function () {
         getJSON:getJSON,
         formatLandings:formatLandings,
         runExport:runExport,
-        escapeHtml:escapeHtml
+        escapeHtml:escapeHtml,
+        convertNumberToTime:convertNumberToTime,
+        convertTime:convertTime
     }
 }();
 </script>

diff --git a/cmd/web/templates/logbook-js.partials.gohtml b/cmd/web/templates/logbook-js.partials.gohtml
@@ -43,6 +43,53 @@ wlbLogbook = function () {
                 var logbookAPI = "{{$api.Logbook}}";
                 $("td:eq(0)", row).html(`<a href="${logbookAPI}/${data[0]}" class="link-primary">${data[1]}</a>`);
             },
+            footerCallback: function (row, data, start, end, display) {
+                let api = this.api();
+                let offset = 7;
+
+                let getNumbers = function (i) {
+                    return typeof i === 'string'
+                        ? wlbCommon.convertTime(i)
+                        : typeof i === 'number'
+                        ? i
+                        : 0;
+                };
+
+                let calculateTotals = function(id, time = true) {
+                    // Total over all pages
+                    total = api
+                        .column(id, {search: 'applied'})
+                        .data().reduce((a, b) => getNumbers(a) + getNumbers(b), 0);
+
+                    // Total over this page
+                    pageTotal = api
+                        .column(id, {page: 'current'})
+                        .data().reduce((a, b) => getNumbers(a) + getNumbers(b), 0);
+
+                    // Update footer
+                    if (time) {
+                        $('#logbook tfoot tr').eq(0).find('th').eq(id-offset).html(wlbCommon.convertNumberToTime(pageTotal));
+                        $('#logbook tfoot tr').eq(1).find('th').eq(id-offset).html(wlbCommon.convertNumberToTime(total));
+                    } else {
+                        $('#logbook tfoot tr').eq(0).find('th').eq(id-offset).html(pageTotal);
+                        $('#logbook tfoot tr').eq(1).find('th').eq(id-offset).html(total);
+                    }
+                }
+
+                calculateTotals(8); // se time
+                calculateTotals(9); // me time
+                calculateTotals(10); // mcc
+                calculateTotals(11); // total time
+                calculateTotals(13, false); // day landings
+                calculateTotals(14, false); // night landings
+                calculateTotals(15); // night
+                calculateTotals(16); // ifr
+                calculateTotals(17); // pic
+                calculateTotals(18); // cop
+                calculateTotals(19); // dual
+                calculateTotals(20); // instr
+                calculateTotals(22); // sim
+            },
             initComplete: function () {
                 // daterange field
                 $('.dataTables_filter').each(function () {

diff --git a/cmd/web/templates/logbook.page.gohtml b/cmd/web/templates/logbook.page.gohtml
@@ -47,6 +47,46 @@
         </tr>
     </thead>
     <tbody></tbody>
+    <tfoot>
+        <tr>
+            <th colspan=8 class="text-end">Total this page:</th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+        </tr>
+        <tr>
+            <th colspan=8 class="text-end">Total all pages:</th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+            <th class="text-center"></th>
+        </tr>
+    </tfoot>
 </table>
 <br>
 <a id="new-flight-record" href="{{$api.LogbookNew}}" class="btn btn-sm btn-outline-secondary" onclick=""><i class="bi bi-plus-square-fill"></i> Add New Flight Record</a>

diff --git a/cmd/web/templates/map.page.gohtml b/cmd/web/templates/map.page.gohtml
@@ -111,7 +111,7 @@
         </div>
         <hr>
         <div class="alert alert-info row">
-            The Aicraft and Route filters works in the way "string contains substring" or "*filter*". So aircraft type "C172" will include "C172" and "C172RG"
+            The Aircraft and Route filters works in the way "string contains substring" or "*filter*". So aircraft type "C172" will include "C172" and "C172RG"
         </div>
     </div>
     <div class="col-md-10">

diff --git a/cmd/web/templates/stats-js.partials.gohtml b/cmd/web/templates/stats-js.partials.gohtml
@@ -32,7 +32,7 @@ wlbStats = function () {
                                     // format distance value with spaces
                                     label += context.parsed.y.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ") + " nm";
                                 } else {
-                                    label += convertNumberToTime(context.parsed.y);
+                                    label += wlbCommon.convertNumberToTime(context.parsed.y);
                                 }
                             }
                             return label;
@@ -46,33 +46,6 @@ wlbStats = function () {
     // fields
     var range_field = document.getElementById("range_field");
 
-    // func convertNumberToTime converts time in integer format to string
-    function convertNumberToTime(number) {
-        var hours = Math.floor(number);
-        var minutes = Math.round((number - hours) * 60);
-        if (minutes == 0) {
-            minutes = "00";
-        }
-        return hours + ":" + minutes;
-    }
-
-    // func convertTime converts time in string format to integer
-    function convertTime(time) {
-        if (time === "") {
-            return 0;
-        }
-
-        if (!time.includes(":")) {
-            return time.replace(" ",""); // already converted
-        }
-
-        var hoursMinutes = time.split(/[.:]/);
-        var hours = parseInt(hoursMinutes[0], 10);
-        var minutes = hoursMinutes[1] ? parseInt(hoursMinutes[1], 10) : 0;
-
-        return hours + Math.round(minutes / 60 * 100) / 100;
-    }
-
     // func onStatsClick redraw the chart based on the column/stats selection
     function onStatsClick(table_name, cl) {
         var tb = document.getElementById(table_name);
@@ -109,7 +82,7 @@ wlbStats = function () {
         var values = [];
 
         for (var i = 1; i <= rows; i++) {
-            values.push(convertTime(tb.rows[i].cells[cl].innerText));
+            values.push(wlbCommon.convertTime(tb.rows[i].cells[cl].innerText));
         }
 
         chart.data.datasets = [
@@ -141,7 +114,7 @@ wlbStats = function () {
 
     // func drawProgressBar generates html to show in the stats limit cell
     function drawProgressBar(data, max) {
-        var intData = convertTime(data);
+        var intData = wlbCommon.convertTime(data);
         var percentData = parseInt(intData/max*100);
 
         if (data === "") {