INGInious icon indicating copy to clipboard operation
INGInious copied to clipboard

[frontend] Timezone and date format for date display and datetime pickers

Open AlexandreDoneux opened this issue 1 year ago • 8 comments

This pull request aims to adapt displayed dates and form date inputs to the users timezone (see #526). This would allow better comprehension over courses accessibility and task deadlines for any users abroad/ in another timezone. Currently the displayed dates are based on the timezone of the machine where the INGInious is deployed.

Thanks to this PR the dates would be stored as UTC without offset and would be adapted on the frontend to whichever timezone the user has selected in their account preferences. Or, if none is selected, to the default timezone of their browser.

TO DO :

  • [x] Allow timezone selection for user
  • [x] Adapt datetime pickers to timezone
    • [x] settings.html : course accessibility and registration
    • [x] accessibility.html : task accessibility
    • [x] submission_query.html : submission filter
    • [x] contests/admin.html
  • [x] Select browser timezone if none given
  • [x] Display dates adapted to timezone
  • [x] Display countdowns adapted to timezone (contest, scoreboard plugins)
  • [x] Adding date format choice
  • [x] Adapt datetime pickers to date format
  • [x] Display dates adapted to date format

This PR is based on PR #985. It will be rebased over time as changes on the base PR appear.

AlexandreDoneux avatar Jan 11 '24 15:01 AlexandreDoneux

We currently use Tempus Dominus Bootstrap4 v5.0.1 for the datetime pickers. However while adapting it's use to take into account the user's timezone I encountered what seems to be a bug of some sort : Modifying the picker's input a second time does not affect the value retrieved with .datetimepicker.('date').

The more recent versions of Tempus Dominus might fix this but does not support the integrated timezone option anymore. Because of this the date must be transformed before being passed to the picker. This raises the question of updating Tempus Dominus or using anoter picker. I have found this picker that contains date and time selection. It has a better documentation than Tempus Dominus and seems decent.

AlexandreDoneux avatar Jan 19 '24 10:01 AlexandreDoneux

We currently use Tempus Dominus Bootstrap4 v5.0.1 for the datetime pickers. However while adapting it's use to take into account the user's timezone I encountered what seems to be a bug of some sort : Modifying the picker's input a second time does not affect the value retrieved with .datetimepicker.('date').

The more recent versions of Tempus Dominus might fix this but does not support the integrated timezone option anymore. Because of this the date must be transformed before being passed to the picker. This raises the question of updating Tempus Dominus or using anoter picker. I have found this picker that contains date and time selection. It has a better documentation than Tempus Dominus and seems decent.

AlexandreDoneux avatar Jan 26 '24 13:01 AlexandreDoneux

Rebase on 69317b14.

AlexandreDoneux avatar Jan 26 '24 13:01 AlexandreDoneux

Rebase on 4de3a172.

AlexandreDoneux avatar Feb 27 '24 15:02 AlexandreDoneux

I will wait for #985 to be done before reviewing this one.

anthonygego avatar Apr 02 '24 12:04 anthonygego

Rebase on 42811b07.

AlexandreDoneux avatar May 16 '24 13:05 AlexandreDoneux

Rebase on fed730d1.

AlexandreDoneux avatar May 16 '24 13:05 AlexandreDoneux

Rebase on 05daaf2e.

AlexandreDoneux avatar May 17 '24 13:05 AlexandreDoneux