Merge pull request #232 from vsimakhin/feature/logbook-horizontal-scr…

…olling Added new option to the Settings page - `Do not adjust logbook column…
vsimakhin · Jun 1, 2024 · b0138a8 · b0138a8
2 parents 2fa6c51 + 5ffeb98
commit b0138a8
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 72 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## [Unreleased]
 
+- New: Added new option to the Settings page - `Do not adjust logbook columns for small screens`. In this case the full logbook table will be shown without hiding any columns for mobile devices.
 - New: New stats page - Totals by Month
 
 ## [2.35.2] - 20.05.2024

diff --git a/README.md b/README.md
@@ -17,6 +17,7 @@ You also can easily export all flight records into EASA style pdf format, print
 
 ## [Unreleased]
 
+- New: Added new option to the Settings page - `Do not adjust logbook columns for small screens`. In this case the full logbook table will be shown without hiding any columns for mobile devices.
 - New: New stats page - Totals by Month
 
 ## [2.35.2] - 20.05.2024

diff --git a/app/static/js/wlb-logbook.js b/app/static/js/wlb-logbook.js
@@ -11,6 +11,7 @@ const logbookUtils = function () {
         const url = await commonUtils.getApi("LogbookData");
         const logbookAPI = await commonUtils.getApi("Logbook");
         const firstDay = await commonUtils.getPreferences("daterange_picker_first_day");
+        const logbook_no_columns_change = await commonUtils.getPreferences("logbook_no_columns_change");
 
         const table = $('#logbook').DataTable({
             responsive: {
@@ -42,8 +43,10 @@ const logbookUtils = function () {
                 { targets: [12], width: "9%" }, //pic
                 {
                     targets: [23], render: function (data, type, row) {
-                        if (data.length > remarksL) {
-                            var txt = data.substr(0, remarksL) + '…'
+                        if (data.length !== 0 && data.length > remarksL) {
+                            let txt = "";
+                            if (remarksL < 0) { txt = data.substr(0, 5) + '…'; }
+                            else { txt = data.substr(0, remarksL) + '…'; }
                             return `<span data-bs-toggle="tooltip" data-bs-placement="bottom" title="${commonUtils.escapeHtml(data)}">${commonUtils.escapeHtml(txt)}</span>`;
                         } else {
                             return data;
@@ -155,7 +158,11 @@ const logbookUtils = function () {
         /**
          * Adjusts the visibility of columns in a table based on the width of a card element.
          */
-        const adjustColumnVisibility = () => {
+        const adjustColumnVisibility = async () => {
+            if (!logbook_no_columns_change) {
+                return;
+            }
+
             const cardWidth = document.getElementById('logbook_card').clientWidth;
 
             if (cardWidth >= 1500) {
@@ -176,7 +183,7 @@ const logbookUtils = function () {
         }
 
         $(window).resize(adjustColumnVisibility);
-        adjustColumnVisibility();
+        await adjustColumnVisibility();
 
         // Custom filtering function for datatables
         $.fn.dataTable.ext.search.push(

diff --git a/app/static/js/wlb-settings.js b/app/static/js/wlb-settings.js
@@ -264,6 +264,7 @@ const settingsUtils = function () {
             stats_font_size: document.getElementById("stats_font").value,
             logbook_font_size: document.getElementById("logbook_font").value,
             logbook_rows: document.getElementById("logbook_rows").value,
+            logbook_no_columns_change: document.getElementById("logbook_no_columns_change").checked,
             licensing_rows: document.getElementById("licensing_rows").value,
             datepicker_week: document.getElementById("datepicker_week").value,
             time_fields_auto_format: time_fields_auto_format,