Ignore:
Timestamp:
Jul 17, 2012, 9:04:45 PM (7 years ago)
Author:
tofulm@…
Message:

Changement complet de l'affichage :
-> le calendrier centre automatiquement le jour demandé (il ne commence plus forcement par lundi).
-> Ajout de 3 icônes : jour précédent, suivant, aujourd’hui

File:
1 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/orr/contenu/page-affichage_orr.html

    r63410 r63521  
    11<html>
    2     <div>
    3         <div id = "datepickers"></div>
    4     </div>
    52
    6      <div>
    7          <table border="1">
    8 
    9     <caption> <span id="nommois">[(#ENV{date}|affdate{nom_mois})]</span> </caption>
    10 
    11     <thead>
    12         <th>Ressources</th>
    13         <th><span id="lundi">Lundi_[(#ENV{date}|joursemaine{lundi})]</span></th>
    14         <th><span id="mardi">Mardi_[(#ENV{date}|joursemaine{mardi})]</span></th>
    15         <th><span id="mercredi">Mercredi_[(#ENV{date}|joursemaine{mercredi})]</span></th>
    16         <th><span id="jeudi">Jeudi_[(#ENV{date}|joursemaine{jeudi})]</span></th>
    17         <th><span id="vendredi">Vendredi_[(#ENV{date}|joursemaine{vendredi})]</span></th>
    18         <th><span id="samedi">Samedi_[(#ENV{date}|joursemaine{samedi})]</span></th>
    19         <th><span id="dimanche">Dimanche_[(#ENV{date}|joursemaine{dimanche})]</span></th>
    20     </thead>
    21          <tbody>
    22     <BOUCLE_ressource(spip_orr_ressources)>
    23        <tr class="tr_plus">
    24            <td>#ID_ORR_RESSOURCE. #ORR_RESSOURCE_NOM</td>
    25            <td VALIGN=TOP ALIGN=CENTER id="lundi"><a id="touche_lundi_#ID_ORR_RESSOURCE" href="[(#URL_PAGE{formulaire_reservation}|parametre_url{'id_ressource',#ID_ORR_RESSOURCE}|parametre_url{'ma_date',#ENV{date}|datesemaine{lundi}})]" class="mediabox"><img src="#CHEMIN{img/plus.png}" alt="plus"/></a><INCLURE{fond=lundi,ajax=cellule}{idressource=#ID_ORR_RESSOURCE} /></td>
    26            <td VALIGN=TOP ALIGN=CENTER id="mardi"><a id="touche_mardi_#ID_ORR_RESSOURCE" href="[(#URL_PAGE{formulaire_reservation}|parametre_url{'id_ressource',#ID_ORR_RESSOURCE}|parametre_url{'ma_date',#ENV{date}|datesemaine{mardi}})]" class="mediabox"><img src="#CHEMIN{img/plus.png}" alt="plus"/></a><INCLURE{fond=mardi,ajax=cellule}{idressource=#ID_ORR_RESSOURCE} /></td>
    27            <td VALIGN=TOP ALIGN=CENTER id="mercredi"><a id="touche_mercredi_#ID_ORR_RESSOURCE" href="[(#URL_PAGE{formulaire_reservation}|parametre_url{'id_ressource',#ID_ORR_RESSOURCE}|parametre_url{'ma_date',#ENV{date}|datesemaine{mercredi}})]" class="mediabox"><img src="#CHEMIN{img/plus.png}" alt="plus"/></a><INCLURE{fond=mercredi,ajax=cellule}{idressource=#ID_ORR_RESSOURCE} /></td>
    28            <td VALIGN=TOP ALIGN=CENTER id="jeudi"><a id="touche_jeudi_#ID_ORR_RESSOURCE" href="[(#URL_PAGE{formulaire_reservation}|parametre_url{'id_ressource',#ID_ORR_RESSOURCE}|parametre_url{'ma_date',#ENV{date}|datesemaine{jeudi}})]" class="mediabox"><img src="#CHEMIN{img/plus.png}" alt="plus"/></a><INCLURE{fond=jeudi,ajax=cellule}{idressource=#ID_ORR_RESSOURCE} /></td>
    29            <td VALIGN=TOP ALIGN=CENTER id="vendredi"><a id="touche_vendredi_#ID_ORR_RESSOURCE" href="[(#URL_PAGE{formulaire_reservation}|parametre_url{'id_ressource',#ID_ORR_RESSOURCE}|parametre_url{'ma_date',#ENV{date}|datesemaine{vendredi}})]" class="mediabox"><img src="#CHEMIN{img/plus.png}" alt="plus"/></a><INCLURE{fond=vendredi,ajax=cellule}{idressource=#ID_ORR_RESSOURCE} /></td>
    30            <td VALIGN=TOP ALIGN=CENTER id="samedi"><a id="touche_samedi_#ID_ORR_RESSOURCE" href="[(#URL_PAGE{formulaire_reservation}|parametre_url{'id_ressource',#ID_ORR_RESSOURCE}|parametre_url{'ma_date',#ENV{date}|datesemaine{samedi}})]" class="mediabox"><img src="#CHEMIN{img/plus.png}" alt="plus"/></a><INCLURE{fond=samedi,ajax=cellule}{idressource=#ID_ORR_RESSOURCE} /></td>
    31            <td VALIGN=TOP ALIGN=CENTER id="dimanche"><a id="touche_dimanche_#ID_ORR_RESSOURCE" href="[(#URL_PAGE{formulaire_reservation}|parametre_url{'id_ressource',#ID_ORR_RESSOURCE}|parametre_url{'ma_date',#ENV{date}|datesemaine{dimanche}})]" class="mediabox"><img src="#CHEMIN{img/plus.png}" alt="plus"/></a><INCLURE{fond=dimanche,ajax=cellule}{idressource=#ID_ORR_RESSOURCE} /></td>
    32        </tr>
    33     </BOUCLE_ressource>
    34 </tbody>
    35 </table>
    36 
    37 </div>
     3    <div id="">
     4                <div>
     5                        <div id = "datepickers"></div>
     6                </div>
     7                <br/>
     8                <br/>
     9                <div id="affichageTableau">
     10                        <div id="icones">
     11                                <span id="gauche"><img src="#CHEMIN{img/precedent.png}" alt="haut" /></span>&nbsp;<span id="aujourdhui"><img src="#CHEMIN{img/aujourdhui.png}" alt="haut" /></span>&nbsp;<span id="droite"><img src="#CHEMIN{img/suivant.png}" alt="bas" /></span>
     12                        </div>
     13                        <div>
     14                                <INCLURE{fond=inc-tableau,ajax=tableau}>
     15                        </div>
     16                </div>
     17        </div>
    3818
    3919
    4020
    4121<script>
     22
    4223    jQuery(document).ready(function(){
     24        dateselectionne = new Date();
     25        joursemaine(dateselectionne);
     26             tabAjax();
     27
    4328        jQuery( "#datepickers" ).datepicker({
    4429            dateFormat : 'yy-mm-dd',
    45             onSelect : function (dateText) {
    46                 var data = { date : dateText };
     30            onSelect : function (dateText){
     31                //~ var data = { date : dateText };
    4732                //~ Determination des 5 jours de la semaines
    48                 var dateLundi = Date.parse(dateText);
    49                 if (!dateLundi.is().monday()) {
    50                     dateLundi.last().monday();
    51                     }
    52                 var lundi = dateLundi.toString('yyyy-MM-dd');
    53                 var mardi = dateLundi.addDays(1).toString('yyyy-MM-dd');
    54                 var mercredi = dateLundi.addDays(1).toString('yyyy-MM-dd');
    55                 var jeudi = dateLundi.addDays(1).toString('yyyy-MM-dd');
    56                 var vendredi = dateLundi.addDays(1).toString('yyyy-MM-dd');
    57                 var samedi = dateLundi.addDays(1).toString('yyyy-MM-dd');
    58                 var dimanche = dateLundi.addDays(1).toString('yyyy-MM-dd');
    59                 var dimancheplus = dateLundi.addDays(1).toString('yyyy-MM-dd');
    60                  //~ ecriture de la nouvelle url
    61                 jQuery(".tr_plus a ").each( function() {
    62                     var url = "[(#URL_PAGE{formulaire_reservation})]";
    63                     var idtouche = jQuery(this).attr("id");
    64                     var dateLien = "coucou";
    65                     var contenuId = idtouche.split("_");
    66                      switch (contenuId[1])  {
    67                      case "lundi" :
    68                      var dateLien = lundi;
    69                      break;
    70                      case "mardi" :
    71                      var dateLien = mardi;
    72                      break;
    73                      case "mercredi" :
    74                      var dateLien = mercredi;
    75                      break;
    76                      case "jeudi" :
    77                      var dateLien = jeudi;
    78                      break;
    79                      case "vendredi" :
    80                      var dateLien = vendredi;
    81                      break;
    82                      case "samedi" :
    83                      var dateLien = samedi;
    84                      break;
    85                      case "dimanche" :
    86                      var dateLien = dimanche;
    87                      break;
    88                      }
    89                     url += "&id_ressource=" + contenuId[2];
    90                     url += "&ma_date=" + dateLien;
    91                     jQuery(this).attr("href", url);
    92                 });
    93                 //requete ajax pour récupérer les 7 dates de la semaines
    94                 //correspondantes à la date du datepicker
    95                 jQuery.ajax ({
    96                     url : "http://localhost/spip/plugins/fabrique_auto/orr/action.php",
    97                     data : data,
    98                     complete : function (xhr, result)
    99                     {
    100                         if (result != "success") return;
    101                         var response = xhr.responseText;
    102                         $("#lundi").html($(response).find("p").eq(0));
    103                         $("#mardi").html($(response).find("p").eq(1));
    104                         $("#mercredi").html($(response).find("p").eq(2));
    105                         $("#jeudi").html($(response).find("p").eq(3));
    106                         $("#vendredi").html($(response).find("p").eq(4));
    107                         $("#samedi").html($(response).find("p").eq(5));
    108                         $("#dimanche").html($(response).find("p").eq(6));
    109                         $("#nommois").html($(response).find("p").eq(7));
    110                     }
    111                 });
    112                 console.log(lundi);
    113                 ajaxReload('cellule', {
     33                dateselectionne = Date.parse(dateText);
     34                joursemaine(dateselectionne);
     35                tabAjax();
     36                        },
     37                });
     38                jQuery("#gauche").bind("click",function(event){
     39                        dateselectionne = dateselectionne.addDays(-1);
     40                        joursemaine(dateselectionne);
     41            tabAjax();
     42                });
     43                jQuery("#droite").bind("click",function(event){
     44                        dateselectionne = dateselectionne.addDays(1);
     45                        joursemaine(dateselectionne);
     46            tabAjax();
     47                });
     48                jQuery("#aujourdhui").bind("click",function(event){
     49                        dateselectionne = new Date();
     50                        joursemaine(dateselectionne);
     51            tabAjax();
     52                });
     53
     54
     55
     56        });
     57
     58function joursemaine(dateactive)
     59{
     60                jour1 = dateactive.addDays(-3).toString('yyyy-MM-dd 00:00:00');
     61                jour2 = dateactive.addDays(1).toString('yyyy-MM-dd 00:00:00');
     62                jour3 = dateactive.addDays(1).toString('yyyy-MM-dd 00:00:00');
     63                jour4 = dateactive.addDays(1).toString('yyyy-MM-dd 00:00:00');
     64                jour5 = dateactive.addDays(1).toString('yyyy-MM-dd 00:00:00');
     65                jour6 = dateactive.addDays(1).toString('yyyy-MM-dd 00:00:00');
     66                jour7 = dateactive.addDays(1).toString('yyyy-MM-dd 00:00:00');
     67                jour8 = dateactive.addDays(1).toString('yyyy-MM-dd 00:00:00');
     68                jour9 = dateactive.addDays(-4).toString('yyyy-MM-dd 00:00:00');
     69
     70        }
     71function tabAjax(){
     72       ajaxReload('tableau', {
    11473                    args:{
    115                         lundi:lundi,
    116                         mardi:mardi,
    117                         mercredi:mercredi,
    118                         jeudi:jeudi,
    119                         vendredi:vendredi,
    120                         samedi:samedi,
    121                         dimanche:dimanche,
    122                         dimancheplus:dimancheplus,
     74                        jour1:jour1,
     75                        jour2:jour2,
     76                        jour3:jour3,
     77                        jour4:jour4,
     78                        jour5:jour5,
     79                        jour6:jour6,
     80                        jour7:jour7,
     81                        jour8:jour8,
    12382                        },
    124                    });
    125             }
    12683        });
    127     });
    128         </script>
     84        }
     85
     86</script>
    12987
    13088</html>
     89
Note: See TracChangeset for help on using the changeset viewer.