[MVC3]Interface Emplacement(s) Disponible(s)

Version imprimable

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:

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

13/03/2012, 18h05
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.
14/03/2012, 09h47
Fra212

Citation:

Envoyé par 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.

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 :(
14/03/2012, 10h53
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).
14/03/2012, 12h00
alexxxx69

Citation:

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 ?

Citation:

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:

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

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

1 pièce(s) jointe(s)

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:

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:

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)

14/03/2012, 14h22
alexxxx69
Citation:

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

Si tu veux afficher un datepicker en haut de ta vue il suffit de mettre un input et de lier ton datepicker à cet input :
Code:

1 2 3 4 5 6 <input id="monDatepicker" type= "text" > <script type='text/javascript'> $(document).ready(function() { $('#monID').datepicker(); }); </script>";
Pour l'input tu peux aussi te servir des helper de MVC :
Code:

1 2 @Html.TextBox("madate", null, new { id = "monDatepicker" })
Après pour tes problèmes de date dans ton modèle, comment gère tu ta base de données (Entity Framework, LinqToSQL, autres ?)
Normalement tu devrais avoir une relation 1-->N entre court et réservation (voir N-->N si une réservation peux concerner plusieurs courts)
Si tu utilise entityframework ou linq tu dois avoir dans ton entité courts une propriété de navigation pour accéder aux réservations et donc aux date...

A voir
14/03/2012, 16h12
Fra212

1 pièce(s) jointe(s)

Merci de ton aide ;) J'ai intégré un datepicker super design et avec l'heure intégré vu que la durée des réservations sont en heure... (Si qqn veut le js n'hésitez pas à demander :ccool: )

Est-il possible de récupérer la valeur du datepicker dans mon contrôleur ? Et si oui comment ? Comme dit plus haut je vais devoir utiliser une fonction "Ajax" pour renvoyer la date dans mon contrôleur...

Si qqn peut juste me donner un exemple d'instruction et je l'adapterais à mon code... Et à partir de là je pourrais me lancer...

PS:En effet j'ai utilisé Entity Framework Code first :ccool:

Citation:

Est-il possible de récupérer la valeur du datepicker dans mon contrôleur ?

Oui c'est possible !! :ccool: Heureusement d'ailleurs :langue2:

Le mieux est d'utiliser de l'ajax ce qui te permet d'envoyer la date à ton contrôleur et récupérer un résultat sans recharger la page et heureusement avec JQuery l'ajax est d'une simplicité enfantine...
Code:

1 2 3 4 5 6 $.ajax({ url: ("../NomControleur/NomFonction?maDate=variableContenantDate"), success: function (data) { //la variable data contiendra ce que ta fonction renverra, reste plus qu'a changer les couleurs de tes labels });
Et dans ton contrôleur
Code:

1 2 3 4 5 public typeRenvoyé NomFonction(Date maDate) { return ... }
Voilà, n'hésite pas à mettre +1 si la réponse te conviens

Merci beaucoup de ta réponse ;) + 1 partout :)

Mais j'ai très difficile, voici la méthode que j'ai créé dans mon contrôleur:

(Je renvoie tous les courts de tennis, et avant ça je vérifie si tous les cours sont libres suivant la date qui est renvoyée)

Code:

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
 
public JsonResult GetTennisCourt(DateTime date)
        {
            var reservations = db.Reservations.Include(c => c.Customer);
 
            foreach (var reservation in reservations)
            {
 
                //Verify that a court is available or not
                if (reservation.Date ==date)
                {
                    if (date.Hour > reservation.FinishTime.Hour || date.Hour < reservation.StartTime.Hour)
                    {
                        var id = reservation.TennisCourtID;
 
                        TennisCourt tennisCourt = (TennisCourt) db.TennisCourts.Where(t => t.ID == id);
                        tennisCourt.Available = true;
                        db.Entry(tennisCourt).State = EntityState.Modified;
                        db.SaveChanges();
                    }
                    else
                    {
                        var id = reservation.TennisCourtID;
                        TennisCourt tennisCourt = (TennisCourt) db.TennisCourts.Where(s => s.ID == id);
                        tennisCourt.Available = false;
                        db.Entry(tennisCourt).State = EntityState.Modified;
                        db.SaveChanges();
                        break;
                    }
                }
            }
 
            var courts = from c in db.TennisCourts
                         select c;
 
            return Json(courts, JsonRequestBehavior.AllowGet );
        }

Maintenant niveau Ajax, C'est la première fois que je l'utilise et je suis un peu perdu :( Voilà ce que j'ai:

View:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
//Mon datePicker
<input id="datePicker" type= "text" />
<script type="text/javascript">
    $('#datePicker').datetimepicker();
 
    $.ajax({
   url: ("../AvailableCourt/getTennisCourt?maDate=variableContenantDate"),
   success: function (data) {
      //la variable data contiendra ce que ta fonction renverra, reste plus qu'a changer les couleurs de tes labels                                    
   });
</script>

Je ne sais pas trop comment disposer l'url :oops:

Essaye de rajouter l'évènement onchange sur ton input qui va lancer une fonction javascript :
Code:

1 2 3 4 5 <input id="datePicker" type= "text" onchange="chargerCourts" /> <script type="text/javascript"> $('#datePicker').datetimepicker(); </script>
Puis en bas de ta vue tu rajoute le script ajax (ou dans un fichier js séparé)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <script type="text/javascript"> function chargerCourts() { var maDate = $('#datePicker').value(); $.ajax({ url: ("../AvailableCourt/getTennisCourt?date=maDate "), success: function (data) { //la variable data contiendra ce que ta fonction renverra, reste plus qu'a changer les couleurs de tes labels }); } </script>
Je ne suis pas sur du $('#datePicker').value() mais debug avec firebug ou autre suivant le navigateur que tu utilise pour mettre la date sélectionnée dans une variable et met un point d'arret sur la ligne $.ajax...
Normalement quand tu change la date si l'évènement est valide tu devrais exécuter cette fonction puis quand tu passes sur la ligne success... il devrait exécuter ta fonction de ton contrôleur (met un point d'arret aussi)

J'ai testé tout ça, apparemment il ne rentre pas dans ma fonction...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<script type="text/javascript">
    $('#datePicker').datetimepicker();
</script>	  		
 
<script type="text/javascript">
    function chargerCourts() {
        var maDate = $('#datePicker').value();
 
        $.ajax({
            url: ("/AvailableCourt/GetTennisCourt?date=maDate "),
            success: function (data) {
                alert('test');
                //la variable data contiendra ce que ta fonction renverra, reste plus qu'a changer les couleurs de tes labels                                    
            }
        });
    }
</script>

Logiquement il devrait me renvoyer "test" mais je n'ai rien... Il ne rentre pas dans ma fonction j'ai l'impression...

15/03/2012, 14h46
alexxxx69

faut voir au niveau de l'évènement sur le datepicker il faut déjà que quand tu change la date il rentre dans la fonction javascript, après pour l'appel ajax tu verras. Faut debugger le javascript dans ton navigateur directement

2 pièce(s) jointe(s)

J'ai un peu avancé... A chaque changement de valeur, il appelle ma méthode chargerCourts() seulement Firebug me dit que cette fonction n'existe pas... + 1 autre erreur:

Erreur 1: (voir pièce jointe ci-dessous)

Erreur 2: (voir pièce jointe ci-dessous)

Voici mon code:

Code:

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
 
<input id="datePicker" type= "text"/>
 
<script type="text/javascript">
    $(document).ready(function () {
        $('#datePicker').datetimepicker();
        $('#datePicker').change(chargerCourts());   
    });
</script>
 
<script type="text/javascript">
function chargerCourts() {
        var maDate = $('#datePicker').val();
 
        $.post({
            type: 'POST',
            url: (@Url.Action("GetTennisCourt", "AvailableCourt")),
            data: "{ 'date' : " + maDate + " }",
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            timeout: 8000,
            success: function(data) {
                alert('test');
                //la variable data contient ce que la fonction renverra, reste plus qu'à changer les couleurs des labels                                    
            },
            error: function(x, t, m) {
                if (t === "timeout") {
                    window.HandleTimeout();
                } else {
                    alert(t);
                }
 
            }
        });
    }
</script>

Remarque: La première erreur je ne la comprends pas trop... Pour la 2ème apparemment il ne reconnaît pas ma fonction "chargerCourts()"... Je ne vois pas trop pourquoi... Je vais essayer de résoudre ça... Mais toute aide serait bien évidemment la bienvenue :oops: