Skip to content

show month in table and make visibility configurable #118

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

show month in table and make visibility configurable #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions public/resources/js/reservations_1.2.0.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ function loadTableSettings(url, initial) {
getLocalTableSetting('holidaySubdivision', 'reservations-table-holidaysubdivision');
getNewTable();
}
updateDisplaySettingsOnChange();
});
}

Expand Down Expand Up @@ -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;
7 changes: 6 additions & 1 deletion templates/Reservations/index.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -103,6 +106,7 @@
},
success: function (data) {
$("#modal-content-ajax").html(data);
toggleDisplayTableRows();
}
});

Expand Down Expand Up @@ -159,6 +163,7 @@
},
success: function (data) {
$("#table-ajax").html(data);
toggleDisplayTableRows();
}
});

Expand Down
39 changes: 38 additions & 1 deletion templates/Reservations/reservation_table.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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' %}
<table class="table table-hover table-bordered table-reservation" id="reservation-table">
<thead>
<tr>
{% if displayMonth %}
<tr id="reservation-table-header-month">
<td class="text-center"></td>
{% 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 %}
<td class="text-center p-1" colspan="{{ colCount }}">{{ getLocalizedMonth(lastMonth, 'MMM', app.request.locale) }}</td>
{% 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 %}
<td class="text-center p-1" colspan="2">{{ getLocalizedMonth(curMonth, 'MMM', app.request.locale) }}</td>
{% endif %}
{% else %}
{% set colCount = colCount + 2 %}
{% endif %}
{% endfor %}
</tr>
{% endif %}
{% if displayWeek %}
<tr id="reservation-table-header-week">
<td class="text-center"></td>
{% set firstWasSummer = today|date('I') %}
{% set lastWeek = today|date('W') %}
Expand Down Expand Up @@ -34,6 +70,7 @@
{% endif %}
{% endfor %}
</tr>
{% endif %}
<tr class="table-days">
<th class="text-center">{{ 'reservation.appartment.name'|trans }}</th>
{% set firstWasSummer = today|date('I') %}
Expand Down
100 changes: 65 additions & 35 deletions templates/Reservations/reservation_table_settings_input_fields.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,70 @@

<div class="modal-body">
<h6 class="text-start mt-3">{{ 'reservation.table.settings.general'|trans }}</h6>
<div class="row">
<label for="object" class="col-sm-4 col-form-label text-end">{{ 'object.name'|trans }}</label>
<div class="col-sm">
<select id="objects" name="object" class="form-select">
<option value="all">{{ 'reservation.objects.all'|trans }}</option>
{% for object in objects %}
<option value="{{ object.id }}"{% if object.id == objectId %} selected{% endif %}>{{ object.name }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="ps-3 pe-3">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-link active" id="nav-general-tab" data-bs-toggle="tab" data-bs-target="#nav-general" type="button" role="tab" aria-controls="nav-general" aria-selected="true">{{ 'reservation.table.settings.general'|trans }}</button>
<button class="nav-link" id="nav-holidays-tab" data-bs-toggle="tab" data-bs-target="#nav-holidays" type="button" role="tab" aria-controls="nav-holidays" aria-selected="false">{{ 'reservation.table.settings.holidays'|trans }}</button>
</div>
</nav>
<div class="tab-content p-4" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-general" role="tabpanel" aria-labelledby="nav-general-tab" tabindex="0">
<div class="row">
<label for="object" class="col-sm-4 col-form-label text-end">{{ 'object.name'|trans }}</label>
<div class="col-sm">
<select id="objects" name="object" class="form-select">
<option value="all">{{ 'reservation.objects.all'|trans }}</option>
{% for object in objects %}
<option value="{{ object.id }}"{% if object.id == objectId %} selected{% endif %}>{{ object.name }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="row mt-3">
<div class="col-sm-4"></div>
<div class="col-sm text-start">
<div class="form-check form-check-inline form-switch">
<input type="checkbox" name="show-month" id="show-month" class="form-check-input" value="1">
<label class="checkbox-inline checkbox-switch form-check-label" for="show-month">{{ 'reservation.table.settings.displayMonth'|trans }}</label>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-sm-4"></div>
<div class="col-sm text-start">
<div class="form-check form-check-inline form-switch">
<input type="checkbox" name="show-week" id="show-week" class="form-check-input" value="1">
<label class="checkbox-inline checkbox-switch form-check-label" for="show-month">{{ 'reservation.table.settings.displayWeek'|trans }}</label>
</div>
</div>
</div>
</div>

<h6 class="text-start mt-4">{{ 'reservation.table.settings.holidays'|trans }}</h6>
<div class="row">
<label for="holidayCountry" class="col-sm-4 col-form-label text-end">{{ 'reservation.table.settings.country'|trans }}</label>
<div class="col-sm">
<select id="holidayCountry" name="holidayCountry" class="form-select">
{% for code, country in holidayCountries %}
<option value="{{ code }}"{% if code == selectedCountry %} selected{% endif %}>{{ country.name }}</option>
{% endfor %}
</select>
</div>
</div>
{% if holidayCountries[selectedCountry] is defined and holidayCountries[selectedCountry].subdivisions|length > 0 %}
<div class="row">
<label for="holidaySubdivision" class="col-sm-4 col-form-label text-end">{{ 'reservation.table.settings.subdivision'|trans }}</label>
<div class="col-sm">
<select id="holidaySubdivision" name="holidaySubdivision" class="form-select">
<option value="all"{% if selectedSubdivision == 'all' %} selected{% endif %}>-- {{ 'reservation.table.settings.all'|trans }} --</option>
{% for code, division in holidayCountries[selectedCountry].subdivisions %}
<option value="{{ code }}"{% if code == selectedSubdivision %} selected{% endif %}>{{ division.name }}</option>
{% endfor %}
</select>
<div class="tab-pane fade" id="nav-holidays" role="tabpanel" aria-labelledby="nav-holidays-tab" tabindex="1">
<div class="row">
<label for="holidayCountry" class="col-sm-4 col-form-label text-end">{{ 'reservation.table.settings.country'|trans }}</label>
<div class="col-sm">
<select id="holidayCountry" name="holidayCountry" class="form-select">
{% for code, country in holidayCountries %}
<option value="{{ code }}"{% if code == selectedCountry %} selected{% endif %}>{{ country.name }}</option>
{% endfor %}
</select>
</div>
</div>
{% if holidayCountries[selectedCountry] is defined and holidayCountries[selectedCountry].subdivisions|length > 0 %}
<div class="row">
<label for="holidaySubdivision" class="col-sm-4 col-form-label text-end">{{ 'reservation.table.settings.subdivision'|trans }}</label>
<div class="col-sm">
<select id="holidaySubdivision" name="holidaySubdivision" class="form-select">
<option value="all"{% if selectedSubdivision == 'all' %} selected{% endif %}>-- {{ 'reservation.table.settings.all'|trans }} --</option>
{% for code, division in holidayCountries[selectedCountry].subdivisions %}
<option value="{{ code }}"{% if code == selectedSubdivision %} selected{% endif %}>{{ division.name }}</option>
{% endfor %}
</select>
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% endif %}
</div>
</div>
8 changes: 8 additions & 0 deletions translations/Reservations/messages.de.xlf
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,6 +254,14 @@
<source>reservation.table.settings.holidays</source>
<target>Anzeige der Feiertage</target>
</trans-unit>
<trans-unit id="reservation.table.settings.displayMonth">
<source>reservation.table.settings.displayMonth</source>
<target>Monatsnamen anzeigen</target>
</trans-unit>
<trans-unit id="reservation.table.settings.displayWeek">
<source>reservation.table.settings.displayWeek</source>
<target>Kalenderwoche anzeigen</target>
</trans-unit>
<trans-unit id="reservation.table.view.yearly">
<source>reservation.table.view.yearly</source>
<target>Jahresansicht</target>
Expand Down
2 changes: 2 additions & 0 deletions translations/Reservations/messages.en.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down