From f186b683d13ae633e130cac183ecd5a837c3664f Mon Sep 17 00:00:00 2001 From: Alexander Elchlepp Date: Fri, 4 Apr 2025 13:28:36 +0200 Subject: [PATCH] #113 show month in table and make visibility configurable --- public/resources/js/reservations_1.2.0.js | 53 ++++++++++ templates/Reservations/index.html.twig | 7 +- .../Reservations/reservation_table.html.twig | 39 ++++++- ...tion_table_settings_input_fields.html.twig | 100 ++++++++++++------ translations/Reservations/messages.de.xlf | 8 ++ translations/Reservations/messages.en.yaml | 2 + 6 files changed, 172 insertions(+), 37 deletions(-) diff --git a/public/resources/js/reservations_1.2.0.js b/public/resources/js/reservations_1.2.0.js index 7637d53..d6ece40 100644 --- a/public/resources/js/reservations_1.2.0.js +++ b/public/resources/js/reservations_1.2.0.js @@ -30,6 +30,7 @@ function loadTableSettings(url, initial) { getLocalTableSetting('holidaySubdivision', 'reservations-table-holidaysubdivision'); getNewTable(); } + updateDisplaySettingsOnChange(); }); } @@ -133,4 +134,56 @@ function selectableDeselect(item, c) { item.node.classList.remove(c.selected); } +/** + * Stores the display settings in localstorate and add event listener to checkbox + * @param {string} name + * @returns {void} + */ +function updateDisplaySettingsOnChange() { + updateDisplaySettings('show-week'); + updateDisplaySettings('show-month'); +} + +/** + * See above + * @param {string} name + * @returns {void} + */ +function updateDisplaySettings(name) { + let target = document.getElementById(name); + let checked = getLocalStorageItem('reservation-settings-' + name) + + if(checked !== null) { + target.checked = checked == 'true' ? true : false; + } + target.addEventListener('click', event => { + let checked = target.checked; + setLocalStorageItemIfNotExists('reservation-settings-' + name, checked, true); + toggleDisplayTableRows(); + }); +} + +/** + * Toggles the display of the table rows based on localstorage settings + * @returns {void} + */ +function toggleDisplayTableRows() { + let displayMonth = getLocalStorageItem('reservation-settings-show-month'); + let displayWeek = getLocalStorageItem('reservation-settings-show-week'); + toggleRow('reservation-table-header-month', displayMonth); + toggleRow('reservation-table-header-week', displayWeek); + +} + +/** + * See above + * @param {string} name + * @param {string} show + */ +function toggleRow(name, show) { + console.log(show); + let row = document.getElementById(name); + row.style.display = show == 'true' ? '' : 'none'; +} + var selectable, lastSelectedMonthDay, startSlectedDay, endSelectedDay; \ No newline at end of file diff --git a/templates/Reservations/index.html.twig b/templates/Reservations/index.html.twig index 5c24194..cb7f4e6 100644 --- a/templates/Reservations/index.html.twig +++ b/templates/Reservations/index.html.twig @@ -66,7 +66,10 @@ var lastClickedReservationId = 0; var tableSettingsUrl = "{{ path('reservations.table.settings') }}"; - $(document).ready(function () { + $(document).ready(function () { + + setLocalStorageItemIfNotExists('reservation-settings-show-month', 'true'); + setLocalStorageItemIfNotExists('reservation-settings-show-week', 'true'); // add dynamic onchage listener for table settings fields delegate(document.getElementById("table-filter"), 'change', '#table-filter #start, #table-filter #year, #table-filter select[name="intervall"], #table-filter select[name="apartment"], #objects, #holidayCountry, #holidaySubdivision', (event) => { @@ -103,6 +106,7 @@ }, success: function (data) { $("#modal-content-ajax").html(data); + toggleDisplayTableRows(); } }); @@ -159,6 +163,7 @@ }, success: function (data) { $("#table-ajax").html(data); + toggleDisplayTableRows(); } }); diff --git a/templates/Reservations/reservation_table.html.twig b/templates/Reservations/reservation_table.html.twig index 55a85dd..a81be50 100644 --- a/templates/Reservations/reservation_table.html.twig +++ b/templates/Reservations/reservation_table.html.twig @@ -1,10 +1,46 @@ {% set periodStartDate = timestamp2UTC(today) %} {% set displayEndDate = today|date_modify("+" ~ intervall ~ "day")|date('U') %} {% set periodEndDate = timestamp2UTC(displayEndDate) %} +{% set displayMonth = true %} +{% set displayWeek = true %} + {% use 'Reservations/_reservation_table_day.html.twig' %} - + {% if displayMonth %} + + + {% set firstWasSummer = today|date('I') %} + {% set lastMonth = today|date('m') %} + {% set colCount = 0 %} + {% for i in 0..intervall %} + {% set addToDate = "+" ~ i ~ "day" %} + {% set tmpDate = today|date_modify(addToDate) %} + {# if there is a change from summer to winter time #} + {% if firstWasSummer == 1 and tmpDate|date('I') == 0 %} + {% set tmpDate = tmpDate|date_modify("+1 hour") %} + {% endif %} + {% set curMonth = tmpDate|date('m') %} + {# add 2 to colcount since we are at the end of the displayed period + but add it only if the last day is not the first of the next month (last month was already printed #} + {% if i == intervall and tmpDate|date('j') != 1 %}{% set colCount = colCount + 2 %}{% endif %} + {# be aware that when the last month is printed while we are on the first day of the next month already #} + {% if lastMonth != curMonth or i == intervall %} + + {% set colCount = 2 %} + {% set lastMonth = curMonth %} + {# if we reached the end of the period and last day is the first of the next month we need to print the last td #} + {% if tmpDate|date('j') == 1 and i == intervall %} + + {% endif %} + {% else %} + {% set colCount = colCount + 2 %} + {% endif %} + {% endfor %} + + {% endif %} + {% if displayWeek %} + {% set firstWasSummer = today|date('I') %} {% set lastWeek = today|date('W') %} @@ -34,6 +70,7 @@ {% endif %} {% endfor %} + {% endif %} {% set firstWasSummer = today|date('I') %} diff --git a/templates/Reservations/reservation_table_settings_input_fields.html.twig b/templates/Reservations/reservation_table_settings_input_fields.html.twig index 776d09d..ad12fb0 100644 --- a/templates/Reservations/reservation_table_settings_input_fields.html.twig +++ b/templates/Reservations/reservation_table_settings_input_fields.html.twig @@ -1,40 +1,70 @@
-
{{ 'reservation.table.settings.general'|trans }}
-
- -
- -
-
+
+ +
+ -
{{ 'reservation.table.settings.holidays'|trans }}
-
- -
- -
-
- {% if holidayCountries[selectedCountry] is defined and holidayCountries[selectedCountry].subdivisions|length > 0 %} -
- -
- +
-
- {% endif %} +
diff --git a/translations/Reservations/messages.de.xlf b/translations/Reservations/messages.de.xlf index f9821d4..9e802d1 100644 --- a/translations/Reservations/messages.de.xlf +++ b/translations/Reservations/messages.de.xlf @@ -254,6 +254,14 @@ reservation.table.settings.holidays Anzeige der Feiertage + + reservation.table.settings.displayMonth + Monatsnamen anzeigen + + + reservation.table.settings.displayWeek + Kalenderwoche anzeigen + reservation.table.view.yearly Jahresansicht diff --git a/translations/Reservations/messages.en.yaml b/translations/Reservations/messages.en.yaml index de3d38b..92ee1d4 100644 --- a/translations/Reservations/messages.en.yaml +++ b/translations/Reservations/messages.en.yaml @@ -62,6 +62,8 @@ reservation.table.calendarweek: CW reservation.table.reload: Update reservation.table.settings.all: all reservation.table.settings.country: Country +reservation.table.settings.displayMonth: Display month names +reservation.table.settings.displayWeek: Display calendar week reservation.table.settings.general: General reservation.table.settings.holidays: Display settings for holidays reservation.table.settings.subdivision: Subdivision
{{ getLocalizedMonth(lastMonth, 'MMM', app.request.locale) }}{{ getLocalizedMonth(curMonth, 'MMM', app.request.locale) }}
{{ 'reservation.appartment.name'|trans }}