Pickadate format based on py format (#242)

* Pickadate format now based on js format.
Closes #237

* Pickadate format conversion: remove additional unsupported formats.

* Pickadate format conversion: fix submit format.

* Pickadate format: rename variable.

* Pickadate format: remove additional hardcoded value.

* Pickadate format: fix unsupported removal order.

* Pickadate format: fix typo.

* Pickadate format: fix typo.

* Pickadate format: remove duplicated formats.

* Pickadate format: improved logic.

Also renamed variables.

* Update NEMO/apps/kiosk/templates/kiosk/tool_reservation.html

* Update NEMO/templates/mobile/new_reservation.html

* fixed wrong format for date

---------

Co-authored-by: Mathieu Rampant <mathieu.rampant@gmail.com>

NEMO/apps/kiosk/templates/kiosk/tool_reservation.html

@@ -56,12 +56,12 @@ <h4>When would you like to reserve the {{ tool }}?</h4>
  {% for item in tool_reservation_times %}
  unavailable_times.push([{{ item.start|date:"U" }},{{ item.end|date:"U" }}]);
  {% endfor %}
- let date_picker = $('#date').pickadate({format: "dddd, mmmm d", formatSubmit: "yyyy-mm-dd", firstDay: 1, hiddenName: true, onSet: refresh_times});
- let start_time_picker = $('#start').pickatime({interval: 15, formatSubmit: "H:i", hiddenName: true, formatLabel: format_label});
- let end_time_picker = $('#end').pickatime({interval: 15, formatSubmit: "H:i", hiddenName: true, formatLabel: format_label});
+ let date_picker = $('#date').pickadate({format: "{{ pickadate_date_format }}", formatSubmit: "yyyy-mm-dd", firstDay: 1, hiddenName: true, onSet: refresh_times});
+ let start_time_picker = $('#start').pickatime({interval: 15, format: "{{ pickadate_time_format }}", formatSubmit: "H:i", hiddenName: true, formatLabel: format_label});
+ let end_time_picker = $('#end').pickatime({interval: 15, format: "{{ pickadate_time_format }}", formatSubmit: "H:i", hiddenName: true, formatLabel: format_label});
  // set initial date
  if ('{{ date|default_if_none:'' }}') {
- date_picker.pickadate('picker').set('select', '{{ date }}', {format: 'yyyy-mm-dd'})
+ date_picker.pickadate('picker').set('select', '{{ date }}', {format: '{{ pickadate_date_format }}'})
  }
  function refresh_times() {
  start_time_picker.pickatime('picker').render();
@@ -77,11 +77,11 @@ <h4>When would you like to reserve the {{ tool }}?</h4>
  let start = times[0];
  let end = times[1];
  if (date_time_selected >= start && date_time_selected < end) {
- return '<sp !an>h:i A</sp !an> <sm !all> !alre!ad!y re!serve!d</sm !all>';
+ return '<sp !an>{{ pickadate_time_format }}</sp !an> <sm !all> !alre!ad!y re!serve!d</sm !all>';
  }
  }
  }
- return "h:i A";
+ return '{{ pickadate_time_format }}';
  }
  revert(120)
 </script>

NEMO/context_processors.py

@@ -1,5 +1,11 @@
 from NEMO.models import Area, Notification, PhysicalAccessLevel, Tool, User
-from NEMO.utilities import date_input_js_format, datetime_input_js_format, time_input_js_format
+from NEMO.utilities import (
+ date_input_js_format,
+ datetime_input_js_format,
+ time_input_js_format,
+ pickadate_date_format,
+ pickadate_time_format,
+)
 from NEMO.views.customization import CustomizationBase
 from NEMO.views.notifications import get_notification_counts
 
@@ -84,6 +90,8 @@ def base_context(request):
  "time_input_js_format": time_input_js_format,
  "date_input_js_format": date_input_js_format,
  "datetime_input_js_format": datetime_input_js_format,
+ "pickadate_date_format": pickadate_date_format,
+ "pickadate_time_format": pickadate_time_format,
  "no_header": request.session.get("no_header", False),
  "safety_menu_item": customization_values.get("safety_main_menu") == "enabled",
  "calendar_page_title": customization_values.get("calendar_page_title"),

NEMO/templates/mobile/new_reservation.html

@@ -69,13 +69,13 @@ <h4>When would you like to reserve the {{ item }}?</h4>
  {% for times in item_reservation_times %}
  unavailable_times.push([{{ times.start|date:"U" }},{{ times.end|date:"U" }}]);
  {% endfor %}
- let date_picker = $('#date').pickadate({format: "dddd, mmmm d", formatSubmit: "yyyy-mm-dd", firstDay: 1, hiddenName: true, onSet: refresh_times});
- let start_time_picker = $('#start').pickatime({interval: 15, formatSubmit: "H:i", hiddenName: true, formatLabel: format_label});
- let end_time_picker = $('#end').pickatime({interval: 15, formatSubmit: "H:i", hiddenName: true, formatLabel: format_label});
+ let date_picker = $('#date').pickadate({format: "{{ pickadate_date_format }}", formatSubmit: "yyyy-mm-dd", firstDay: 1, hiddenName: true, onSet: refresh_times});
+ let start_time_picker = $('#start').pickatime({interval: 15,  format: "{{ pickadate_time_format }}", formatSubmit: "H:i", hiddenName: true, formatLabel: format_label});
+ let end_time_picker = $('#end').pickatime({interval: 15, format: "{{ pickadate_time_format }}", formatSubmit: "H:i", hiddenName: true, formatLabel: format_label});
  // set initial date
  if ('{{ date|default_if_none:'' }}')
  {
- date_picker.pickadate('picker').set('select', '{{ date }}', {format: 'yyyy-mm-dd'})
+ date_picker.pickadate('picker').set('select', '{{ date }}', {format: '{{ pickadate_date_format }}'})
  }
  function refresh_times()
  {
@@ -93,11 +93,11 @@ <h4>When would you like to reserve the {{ item }}?</h4>
  let start = times[0];
  let end = times[1];
  if (date_time_selected >= start && date_time_selected < end) {
- return '<sp !an>h:i A</sp !an> <sm !all> !alre!ad!y re!serve!d</sm !all>';
+ return '<sp !an>{{ pickadate_time_format }}</sp !an> <sm !all> !alre!ad!y re!serve!d</sm !all>';
  }
  }
  }
- return "h:i A";
+ return "{{ pickadate_time_format }}";
  }
 
  </script>

NEMO/utilities.py

@@ -64,6 +64,24 @@
  "%%": "%",
 }
 
+py_to_pick_date_formats = {
+ "%A": "dddd",
+ "%a": "ddd",
+ "%B": "mmmm",
+ "%b": "mmm",
+ "%d": "dd",
+ "%H": "HH",
+ "%I": "hh",
+ "%M": "i",
+ "%m": "mm",
+ "%p": "A",
+ "%X": "HH:i",
+ "%x": "mm/dd/yyyy",
+ "%Y": "yyyy",
+ "%y": "yy",
+ "%%": "%",
+}
+
 
 # Convert a python format string to javascript format string
 def convert_py_format_to_js(string_format: str) -> str:
@@ -72,13 +90,37 @@ def convert_py_format_to_js(string_format: str) -> str:
  return string_format
 
 
+def convert_py_format_to_pickadate(string_format: str) -> str:
+ string_format = (
+ string_format.replace("%w", "")
+ .replace("%s", "")
+ .replace("%f", "")
+ .replace("%:z", "")
+ .replace("%z", "")
+ .replace("%Z", "")
+ .replace("%j", "")
+ .replace(":%S", "")
+ .replace("%S", "")
+ .replace("%U", "")
+ .replace("%W", "")
+ .replace("%c", "")
+ .replace("%G", "")
+ .replace("%u", "")
+ .replace("%V", "")
+ )
+ for py, pick in py_to_pick_date_formats.items():
+ string_format = pick.join(string_format.split(py))
+ return string_format
+
+
 time_input_format = get_format("TIME_INPUT_FORMATS")[0]
 date_input_format = get_format("DATE_INPUT_FORMATS")[0]
 datetime_input_format = get_format("DATETIME_INPUT_FORMATS")[0]
 time_input_js_format = convert_py_format_to_js(time_input_format)
 date_input_js_format = convert_py_format_to_js(date_input_format)
 datetime_input_js_format = convert_py_format_to_js(datetime_input_format)
-
+pickadate_date_format = getattr(settings, "PICKADATE_DATE_FORMAT", convert_py_format_to_pickadate(date_input_format))
+pickadate_time_format = getattr(settings, "PICKADATE_TIME_FORMAT", convert_py_format_to_pickadate(time_input_format))
 
 supported_embedded_video_extensions = [".mp4", ".ogv", ".webm", ".3gp"]
 supported_embedded_pdf_extensions = [".pdf"]

resources/settings.py

@@ -78,6 +78,15 @@
 DATE_INPUT_FORMATS = ["%m/%d/%Y", *global_settings.DATE_INPUT_FORMATS]
 TIME_INPUT_FORMATS = ["%I:%M:%S %p", *global_settings.TIME_INPUT_FORMATS]
 
+# -------------------- Pick date and time formats --------------------
+# Those formats are optional in most cases and only used on kiosk or mobile views, when picking up date/time separately.
+# If not defined, a conversion from DATE_INPUT_FORMATS and TIME_INPUT_FORMATS will be attempted.
+# See allowed date formats at https://amsul.ca/pickadate.js/date/#formatting-rules
+# See allowed time formats at https://amsul.ca/pickadate.js/time/#formatting-rules
+# PICKADATE_DATE_FORMAT = "mm/dd/yyyy"
+# PICKADATE_TIME_FORMAT = "HH:i A"
+
+
 # -------------------- Internationalization and localization --------------------
 # A boolean that specifies whether Django’s translation system should be enabled.
 # This provides an easy way to turn it off, for performance.