Discussion :

[Fra212]

Bonjour à tous,

Je suis actuellement en train de développer une application Online de gestion de club de tennis, et j'aimerais créer une interface où il serait possible et surtout "agréable" de consulter les terrains disponibles...

Pour cela j'ai capturer une image sur "Google Maps" (vue aérienne du club de tennis), et j'ai dessiné sur chaque terrain un rectangle(label) avec un numéro qui indique le numéro du terrain...

Liste des "Rectangles" dans ma "View":

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<div class="AvailableCourt">
    <div class="label1" align="center"> 
        @Html.Label("1")
    </div>
    <div class="label2" align="center">
        @Html.Label("2")
    </div>
    <div class="label2" align="center">
        @Html.Label("3")
    </div>
    <div class="label2" align="center">
        @Html.Label("4")
    </div>
    <div class="label3" align="center">
        @Html.Label("5")
    </div>
    <div class="label4" align="center">
        @Html.Label("6")
    </div>
 
    <div class="label5" align="center">
        @Html.Label("7")
    </div>
    <div class="label6" align="center">
        @Html.Label("8")
    </div>
    <div class="label7" align="center">
        @Html.Label("9")
    </div>
    <div class="label8" align="center">
        @Html.Label("10")
    </div>
    <div class="label9" align="center">
        @Html.Label("11")
    </div>
    <div class="label10" align="center">
        @Html.Label("12")
    </div>
    <div class="label11" align="center">
        @Html.Label("13")
    </div>
</div>

Alors maintenant ce que je voudrais faire c'est, tout en appuyant sur une date du datepicker qui se trouve au dessus, colorier les rectangles en rouge si ils sont occupé ce jour là ou en vert si ils sont libres !


Mais la question que je me pose c'est: Est-ce possible de changer la couleur d'un label ? Et si oui, où et comment SVP ? Surement dans le contrôleur mais je n'ai aucune idée de l'instruction permettant de le faire...

Bonne journée

[alexxxx69]

Déjà pour commencer comment récupères-tu les infos des terrains quand tu clique sur ton datepicker et sous quelle forme (array, string...) ?
Ajax ? en passant par le contrôleur et en rafraichissant la page ?

Tout dépendra de cette méthode.

[Fra212]

Déjà pour commencer comment récupères-tu les infos des terrains quand tu clique sur ton datepicker et sous quelle forme (array, string...) ?
Ajax ? en passant par le contrôleur et en rafraichissant la page ?

Tout dépendra de cette méthode.

En fait j'avoue n'avoir aucune idée de comment faire... J'ai mon DatePicker mais je n'arrive déjà pas à récupérer la valeur sélectionnée... En fait j'aimerais tout faire à partir de mon contrôleur si c'est possible (si le court est pris à tel date, mettre le label en rouge,etc...).

Dans mon contrôleur pour commencer, j'arrivais à renvoyer dans ma vue tous les courts libres sous forme de tableau (CRUD) mais ici avec mon interface je galère

[Crooby]

Bonjour,
au vue de tes besoins je te conseillerai de regarder du côté du javascript pour obtenir un niveau d’interaction poussé (jQuery + AJAX).

Regarde aussi ça http://knockoutjs.com/ qui permet d'appliquer un modèle MVVM en js (DataBinding bien pratique).

[alexxxx69]

J'ai mon DatePicker mais je n'arrive déjà pas à récupérer la valeur sélectionnée...

C'est quoi comme DatePicker ? JQuery ?

En fait j'aimerais tout faire à partir de mon contrôleur si c'est possible

Tout est possible mais le mieux serait dans l'ordre :
- Sélection de la date sur la vue
- Fonction ajax qui te permettra d'envoyer la date à une fonction de ton contrôleur qui renverra sous la forme que tu veux (array, string...) la liste des cours non dispo (Le plus simple serait que cette liste correspondent avec les id de tes labels)
- En fonction de la liste récupérée tu change le mise en forme du label

Pour les ID de tes labels ce qui serait bien c'est de les nommer comme tu les as dans ta base.

Si tu as par exemple cours1, cours2... tu fais des labels avec id='cours1'... comme ça quand tu vas récupérer la liste de tes cours non dispo tu n'auras plus qu'à changer le style avec jquery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#idlabel').css('background-color', '#A0A4A8');

Le mieux serait que tu nous mettent un peu de ton code pour mieux t'aider

[Fra212]

Tout d'abord merci de vos réponses

Maintenant voici un peu de code:

Contrôleur "AvailableCourtController" (C'est un contrôleur créé spécialement pour mon interface)

Méthode "Index" (dans laquelle je renvoie dans la "View" tous les courts disponibles) Je pense bien que je vais devoir faire ça autrement...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
public ViewResult Index()
        {
            var reservations = db.Reservations.Include(c => c.Customer);
 
            foreach (var reservation in reservations)
            {
 
                //Verify that a court is available or not
                if(reservation.Date==DateTime.Now.Date)
                {
                    if(DateTime.Now.Hour>reservation.FinishTime.Hour || DateTime.Now.Hour<reservation.StartTime.Hour)
                    {
                        var id=reservation.TennisCourtID;
                        var courtsInter = from c in db.TennisCourts
                                     select c;
                        courtsInter = courtsInter.Where(s => s.ID == id);
 
                        foreach (var courtInter in courtsInter)
                        {
                            courtInter.Available = true;
                        }
                        db.SaveChanges();
 
                    }
                    else
                    {
                        var id = reservation.TennisCourtID;
                        var courtsInter = from c in db.TennisCourts
                                          select c;
                        courtsInter = courtsInter.Where(s => s.ID == id);
 
                        foreach (var courtInter in courtsInter)
                        {
                            courtInter.Available = false;
                        }
                        db.SaveChanges();
                        break;
                    }
                }
            }
 
            var courts = from c in db.TennisCourts
                         select c;
            courts = courts.Where(s => s.Available  == true);  
 
            return View(courts.ToList());
        }

Ma View "Index" Où j'affiche la photo "Google Maps" avec tous les labels disposés

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
@model IEnumerable<TennisOnline.Models.TennisCourt>       
 
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
<h2>Emplacement(s) disponible(s)</h2>
 
 
<div class="AvailableCourt">
 
 
        <div class="label1" align="center"> 
            @Html.Label("1")
        </div>
        <div class="label2" align="center">
            @Html.Label("2")
        </div>
        <div class="label2" align="center">
            @Html.Label("3")
        </div>
        <div class="label2" align="center">
            @Html.Label("4")
        </div>
        <div class="label3" align="center">
            @Html.Label("5")
        </div>
        <div class="label4" align="center">
            @Html.Label("6")
        </div>
        <div class="label5" align="center">
            @Html.Label("7")
        </div>
        <div class="label6" align="center">
            @Html.Label("8")
        </div>
        <div class="label7" align="center">
            @Html.Label("9")
        </div>
        <div class="label8" align="center">
            @Html.Label("10")
        </div>
        <div class="label9" align="center">
            @Html.Label("11")
        </div>
        <div class="label10" align="center">
            @Html.Label("12")
        </div>
        <div class="label11" align="center">
            @Html.Label("13")
        </div>
    }
</div>

PS: Dans mon modèle "Court" je n'ai pas d'attribut date... Donc je ne sais pas comment je pourrais afficher mon date picker... Je sais seulement l'afficher si un datetime est présent dans le modèle.

Voilà à quoi ça ressemble pour l'instant (je mets l'image en pièce jointe car je ne sais pas comment l'afficher)