JSFiddle - React, Tailwind, and code Playground

by nveron

HTML

<div id="mainSemaine">
  <div data-bind="foreach: semaineComputed">
    <div>
      <span data-bind="text: dateJour"></span>      
      <!-- ko if: (creneauxAM.length + creneauxPM.length ) === 0 -->
      <span>Aucun créneau disponible</span>
      <!-- /ko -->
      <!-- ko foreach: creneauxAM -->
      <span data-bind="text: heureDebut"></span>
      <!-- /ko -->
      <!-- ko foreach: creneauxPM -->
      <span data-bind="text: heureDebut"></span>
      <!-- /ko -->      
    </div>
  </div>
</div>

JavaScript

var dataCreneaux = [{  dateJour: 20160222,  horaire: 'AM',  heureDebut: '08:00'}, 
										{  dateJour: 20160222,  horaire: 'AM',  heureDebut: '08:30'}, 
                    {  dateJour: 20160222,  horaire: 'AM',  heureDebut: '09:00'}, 
                    {  dateJour: 20160222,  horaire: 'PM',  heureDebut: '14:00'}, 
                    {  dateJour: 20160225,  horaire: 'AM',  heureDebut: '10:30'}, 
                    {  dateJour: 20160226,  horaire: 'PM',  heureDebut: '17:30'}];

var jourSemaine = function(dateJour) {
  this.dateJour = dateJour || 0;
  this.creneauxAM = [],
  this.creneauxPM = []          
}

var VM = function() {

  this.semaineData = ko.observable(dataCreneaux);
  this.dateDebutSemaine = ko.observable(20160222);
  
  this.semaineComputed = ko.computed(() => {
    var _ret = {};
    
    //on peuple la semaine
    for (var i = 0; i < 7; i++) {
    	var _date = this.dateDebutSemaine() + i;
      _ret[_date] = new jourSemaine(_date);
    }
    
    //on peuple les créneaux
    this.semaineData().forEach((creneau) => {
      if (creneau.horaire == 'AM') {
        _ret[creneau.dateJour].creneauxAM.push(creneau);
      } else {
				_ret[creneau.dateJour].creneauxPM.push(creneau);
      }      
    });

		//on remappe les créneaux sur les jours dans un tableau
    return Object.keys(_ret).map((key) => { return _ret[key] });
  });
}

ko.applyBindings(new VM(), document.getElementById('mainSemaine'));