Calendrier de disponibilité

[Nowwis]

Bonjour à tous !

J'ai un soucis depuis deux jours pour la création d'un calendrier de disponibilité
Il faut que l'utilisateur puisse cliquer dans des cases et selon un select (Disponible, Réversé, Fermé) cela place des couleurs dans les cases (bien entedu, il faut que je récupère ces valeurs. (cf calendrier 1)

J'ai donc décidé d'avoir une structure pour mon calendrier : chaque case est un span qui contient un input de type hidden.
Lors d'un clic sur un span, je mets la valeur de l'input au choix du select (Disponible -> 1, Réversé -> 2, Fermé -> 3) qui vient de ma base de donnée bien sur et je lui affecte une class (etat_1_pm) et egalement à son voisin (etat_1_am) (cf calendrier 2).

Le soucis c'est que c'est vite le bordel, ça crée plein de class et du coup j'suis perdu et je n'arrive plus à m'organiser.

Comme je code ceci depuis deux jours j'ai décidé de me tourner vers vous pour vous demander comment VOUS feriez !

Merci d'avance !

[Loceka]

Ben je trouve que ton approche est pas mal, j'aurais juste utilisé une table au lieu de span vu que c'est un tableau.

Et puis si on compte ça fait pas tant de classes que ça : 3 états possibles x 2 demies-journées = 6 classes.

[Nowwis]

Ah les tableaux... J'y suis vraiment phobique on m'a formaté... Même quand c'est utile j'aime pas les utilisés. Mais ça serait surement plus simple effectivement, surtout pour naviguer dans les arbres du DOM avec JQuery.

Bon si c'est un peu plan je vais me lancer dedans... A moins que quelqu'un à une autre solution beaucoup plus efficace !

[Loceka]

C'est mal d'utiliser les tableaux pour la présentation parce que ça n'a aucun sens sémantique.

Sauf que là justement ça a un sens sémantique. Donc ce serait aussi mal de ne pas les utiliser dans ce contexte que d'en utiliser alors qu'ils n'ont pas lieu d'être.

[Nowwis]

D'un point de vue logique je te suis tout à fait ! Sauf que mon cerveau lui... xD

Allez, pour une fois, je vais les utiliser à bon escient !

[Bovino]

Envoyé par Loceka

C'est mal d'utiliser les tableaux pour la présentation parce que ça n'a aucun sens sémantique.

Certes, mais ce n'est pas la seule raison...
Les tableaux sont les éléments les plus lourds à gérer pour un navigateur (surtout qu'il est très rare qu'ils soient utilisés de façon optimale) et chaque modification sur le tableau oblige le navigateur à effectuer des reflows. Bref, ils alourdissent bien souvent les performances de la page.
Mais je te rejoins pour considérer que dans ce cas précis, leur utilisation est justifiée

[Nowwis]

Ok.

Et toi Bovino tu en penses quoi de ma méthode ?
Est-elle, pour toi, lourd ou adapté ?

Je cherche à faire le plus évolutif possible (imaginons qu'il y ai 10 états...).

[Bovino]

Envoyé par Bovino

Mais je te rejoins pour considérer que dans ce cas précis, leur utilisation est justifiée

[Nowwis]

Donc quand tu dis ça tu es d'accord à la fois pour l'utilisation du tableau mais également de class que j'ajoute/supprime au clique sur le <td> ???

Le soucis c'est que ça devient embettant quand j'arrive au 31ème jour pour passé au 1er... ou encore pire pour passer du 31/12 au 01/01 de l'année suivant sachant qu'elle est dans une autre div...

Je trouve que le code javascript (JQuery dans mon cas) devient vite lourd et difficile à mettre en place selon les cas...

[Loceka]

En quoi est-ce embêtant ?

Le problème ne vient-il pas plutôt de comment tu ajoutes ces classes (code ?) plutôt que du fait d'en utiliser ?

[Nowwis]

Le soucis c'est qu'il faut toujours j'aille vérifier la case voisine pour savoir de quelles classe elle appartient pour lui en ajouter une autre... Cela m’embête grandement. (.next(), .children(), .parent()... Vite perdu...)

Et pour diviser les cases en deux, je n'ai pas trouvé de solutions adéquat si les états évoluaient...

Donc voilà les vrais raison à dire que mon code ne va pas...

[Loceka]

Un solution très simple pour trouver la case suivante : mettre un ID sur chaque case, en fonction de la date (id="d20110826", ...).

L'ID est facile à générer à partir de l'objet Date() et de l'élément courant.

Pour le coup des états j'ai pas trop compris. Si tu veux dire plus (+) de divisions par case, il suffit de mettre autant de <div> que de divisions dans la case, si tu veux dire plus (+) d'états comme "Disponible", ben il suffit de rajouter 2 classes par état.

D'ailleurs si seules les couleurs changent dans les classes, c'est communalisable donc il est relativement aisé de rajouter un état.