TOC

Affichage des dates dans le fuseau horaire de l’utilisateur

Affichage des dates dans le fuseau horaire de l'utilisateur

1. Vue d'ensemble

Dans cette tranche dethe Reddit app case study, nous allons ajouter les bescheduling post’s according to the user’s timezone.

Il est notoirement difficile de gérer les fuseaux horaires et les options techniques sont grandes ouvertes. Notre première préoccupation est que nous devons afficher les dates à l'utilisateur en fonction de son propre fuseau horaire (configurable). Nous devons également décider dewhat format the date will be saved as, in the database.

2. Une nouvelle préférence utilisateur -timezone

Tout d'abord, nous allons ajouter un nouveau champ -timezone - à nos préférences déjà existantes: 

@Entity
public class Preference {
    ...
    private String timezone;
}

Nous avons alors simplementmake the timezone configurable in the user Preferences Page - tirant parti d'un JQueryplugin simple mais très utile:

Notez que le fuseau horaire par défaut est le fuseau horaire du serveur -which runs on UTC.

3. Le controlle

Maintenant, pour la partie amusante. Nous devons convertir les dates desuser’s timezone enserver’s timezone: 

@Controller
@RequestMapping(value = "/api/scheduledPosts")
public class ScheduledPostRestController {
    private static final SimpleDateFormat dateFormat =
      new SimpleDateFormat("yyyy-MM-dd HH:mm");

    @RequestMapping(method = RequestMethod.POST)
    @ResponseStatus(HttpStatus.OK)
    public void schedule(
      @RequestBody Post post,
      @RequestParam(value = "date") String date) throws ParseException
    {
        post.setSubmissionDate(
          calculateSubmissionDate(date, getCurrentUser().getPreference().getTimezone()));
        ...
    }

    @RequestMapping(value = "/{id}", method = RequestMethod.PUT)
    @ResponseStatus(HttpStatus.OK)
    public void updatePost(
      @RequestBody Post post,
      @RequestParam(value = "date") String date) throws ParseException
    {
        post.setSubmissionDate(
          calculateSubmissionDate(date, getCurrentUser().getPreference().getTimezone()));
        ...
    }

    private synchronized Date calculateSubmissionDate(String dateString, String userTimeZone)
      throws ParseException {
        dateFormat.setTimeZone(TimeZone.getTimeZone(userTimeZone));
        return dateFormat.parse(dateString);
    }
}

La conversion est assez simple, mais notez qu'elle ne se produit que sur les opérations d'écriture - le serveur renvoie toujours UTC pour les lectures.

C'est parfaitement bien pour notre client, car nous allons faire la conversion dans JS - mais cela vaut la peine de comprendre que,for read operations, the server still returns UTC dates.

4. Le Front-End

Voyons maintenant comment utiliser le fuseau horaire de l'utilisateur dans le front-end:

4.1. Afficher les messages

Nous devrons afficher lessubmissionDate de l'article en utilisant le fuseau horaire de l'utilisateur: 


Post title
Submission Date
  (UTC)

Et voici notre fonctionloadPage(): 

function loadPage(page){
    ...
    $('.table').append(''+post.title+''+
      convertDate(post.submissionDate)+'');
    ...
}
function convertDate(date){
    var serverTimezone = [[dates.format(#calendars.createToday(), 'z')}]];
    var serverDate = moment.tz(date, serverTimezone);
    var clientDate = serverDate.clone().tz($("#timezone").html());
    var myformat = "YYYY-MM-DD HH:mm";
    return clientDate.format(myformat);
}

Moment.js aide ici avec la conversion du fuseau horaire.

4.2. Planifier un nouveau message

Nous devons également modifier nosschedulePostForm.html: 

Submission Date (UTC)

Enfin, nous devons également modifier noseditPostForm.html pour localiser l'ancienne valeur desubmissonDate: 

$(function() {
    var serverTimezone = [[dates.format(#calendars.createToday(), 'z')}]];
    var serverDate = moment.tz($("#date").val(), serverTimezone);
    var clientDate = serverDate.clone().tz($("#timezone").html());
    var myformat = "YYYY-MM-DD HH:mm";
    $("#date").val(clientDate.format(myformat));
});

5. Conclusion

Dans cet article simple, nous avons introduit une fonctionnalité simple mais très utile dans l'application Reddit: la possibilité de tout voir en fonction de votre fuseau horaire.

C'étaitone of the main pain points as I was using the app - le fait que tout était en UTC. Maintenant, toutes les dates sont correctement affichées dans le fuseau horaire de l'utilisateur, comme il se doit.

Related