diff --git a/app/controller/IndexController.php b/app/controller/IndexController.php index d921451640e49e2f6a4d8a62507956c9a5ec3859..b9d59a20defeed5495671f5392ca02558acafc1f 100644 --- a/app/controller/IndexController.php +++ b/app/controller/IndexController.php @@ -4,8 +4,9 @@ class IndexController extends Controller { // contrôleur pour la page d'index, public function display() { // là on peut faire un tas de trucs cool, genre déclarer et initialiser les variables d'affichage par exemple ! - $this->view->list = Jeu::getList(); - $this->view->listprofils = Profil::getList(); + $this->view->last_member = Profil::getLastMember(); + $this->view->nb_members = Profil::getNbMembers(); + $this->view->most_played = Jeu::getMostPlayed(); $this->view->display(); // et on appelle la méthode display() qui va afficher la page } } diff --git a/app/controller/JeuController.php b/app/controller/JeuController.php index b502d0172cf427ced07aa7e59d2f1f3b74f2ec86..84da026d732f7b9e551b238734f6981e35b2e29f 100644 --- a/app/controller/JeuController.php +++ b/app/controller/JeuController.php @@ -4,9 +4,15 @@ include(ROOT."/Image.php"); class JeuController extends Controller { public function display() { $slug = $this->route["params"]["slug"]; //cf. le commentaire dans ProfilController.php - $this->view->jeu = Jeu::getFromSlug($slug); $this->view->classement = Classement::getFromSlug($slug); - $this->view->display(); + + if(in_array($slug, Jeu::getSlugList())) { // si le nom du jeu cherché est dans notre BDD, on peut l'afficher + $this->view->jeu = Jeu::getFromSlug($slug); + $this->view->display(); + } + else { + header('Location:'.BASE_URL.'/404'); + } } public function displayListe() { @@ -14,6 +20,17 @@ class JeuController extends Controller { $this->view->display(); } + public function listeJson() { + $this->view->liste = Jeu::getList(); + $this->view->display(); + } + + public function redirect() { + $slug = $this->route["params"]["slug"]; + $slugjeu = self::slugify($slug); + header('Location:jeu/'.$slugjeu); + } + public function displayFormAdd() { $this->view->display(); } diff --git a/app/kernel/Router.php b/app/kernel/Router.php index c624faf931692f198e3cae908a8ecc6a255ba5b7..334611bbc2b74ae3aa743d6776b2e15bd7d54217 100644 --- a/app/kernel/Router.php +++ b/app/kernel/Router.php @@ -23,11 +23,21 @@ class Router { // classe PHP permettant l'analyse de l'URL des requêtes $result["action"] = "display"; // on veut afficher les informations d'un jeu, donc on donne l'action "display" $result["params"]["slug"] = $parts[1]; //on a des paramètres dans l'URL (normalement le nom/id du jeu), on le stocke aussi } + else if($parts[0] == "jeu" && count($parts) == 1 && isset($_POST['rechercheJeu'])) { // on veut consulter la fiche d'un jeu via la barre de recherche du header + $result["controller"] = "Jeu"; // le contrôleur à instancier sera "JeuController", on met donc "Jeu" dans la variable de résultat + $result["action"] = "redirect"; // on veut rediriger vers la page d'un jeu, donc on donne l'action "redirect" + $result["params"]["slug"] = $_POST['rechercheJeu']; //on a un paramètre (le nom du jeu), on le stocke aussi + } else if($parts[0] == "listejeux") { // on veut consulter la liste des jeux (listejeux/, avec n'importe quoi derrière) $result["controller"] = "Jeu"; // le contrôleur à instancier sera "JeuController", on met donc "Jeu" dans la variable de résultat $result["action"] = "displayListe"; // on veut afficher la liste des jeux, donc on donne l'action "displayListe" // il n'y a pas de paramètres attendus, on n'affecte pas $result["params"] } + else if($parts[0] == "jeux") { // on veut récupérer la liste des jeux au format JSON + $result["controller"] = "Jeu"; // le contrôleur à instancier sera "JeuController", on met donc "Jeu" dans la variable de résultat + $result["action"] = "listeJson"; // on veut générer une sortie au format json, on donne donc l'action "listeJson" + // il n'y a pas de paramètres attendus, on n'affecte pas $result["params"] + } else if($parts[0] == "addjeu" && count($parts) == 1) { // on veut afficher le formulaire d'ajout(url/addjeu) $result["controller"] = "Jeu"; $result["action"] = "displayFormAdd"; // on veut afficher le formulaire diff --git a/app/model/Jeu.php b/app/model/Jeu.php index 40f8af576e0c09b68db600963235cb1193ab181b..66b4bb54c35169d1cfc2994d35a768799a683b4e 100644 --- a/app/model/Jeu.php +++ b/app/model/Jeu.php @@ -21,6 +21,22 @@ class Jeu extends Model { } + + public static function getMostPlayed() { + $db = Database::getInstance(); + $sql = 'SELECT nom, COUNT(*) as "parties" FROM R_partie JOIN R_jeu ON slug = jeu GROUP BY nom ORDER BY parties DESC'; + $stmt = $db->query($sql); + $ret = array(); + $k = 0; + while($k<3 && ($elt = $stmt->fetch())) { + echo $elt['nom'].'<br>'; + $k++; + array_push($ret, $elt); + } + return $ret; + + } + public static function getSlugList() { $db = Database::getInstance(); $sql = "SELECT slug FROM R_jeu"; diff --git a/app/model/Profil.php b/app/model/Profil.php index e3b1beeaf0895e444c1efcac72e076af37868303..4c1501ec43c2b981057601fcc8392b85b6c801d3 100644 --- a/app/model/Profil.php +++ b/app/model/Profil.php @@ -27,15 +27,35 @@ class Profil extends Model { // classe de modèle pour l'affichage de profils $req->execute(array(':password' => $password, ':slug' => $slug)); } - public static function setAutre($slug, $data) { + public static function setAutre($slug, $data) + { $db = Database::getInstance(); // idem à au-dessus $sql = "UPDATE R_joueur SET nom = :nom, prenom = :prenom, email = :email, avatar = :avatar WHERE slug = :slug"; $req = $db->prepare($sql); $req->execute(array(':nom' => $data['nom'], - ':prenom' => $data['prenom'], - ':email' => $data['email'], - ':avatar' => $data['avatar'], - ':slug' => $slug)); + ':prenom' => $data['prenom'], + ':email' => $data['email'], + ':avatar' => $data['avatar'], + ':slug' => $slug)); + } + + public static function getLastMember() { // méthode permettant de récupérer les informations relatives au dernier membre inscrit en BDD + $db = Database::getInstance(); // on récupère la connexion à la BDD + $sql = "SELECT * FROM R_joueur"; // on définit la requête qu'on enverra + $req = $db->query($sql); // on exécute la requête + $req->setFetchMode(PDO::FETCH_CLASS, "Profil"); // règle le type dans lequel on doit mettre les données (PDO va chercher les attributs de la classe de même nom que ses colonnes de BDD et mettre dedans les valeurs correspondantes) + $ret = null; + while ($elt = $req->fetch()) { // on parcourt tous les résultats et on les stocke au fur et à mesure dans la même variable, jusqu'au dernier. C'est lui qui restera à la fin + $ret = $elt; + } + return $ret; // on retourne les données du membre + } + + public static function getNbMembers() { // méthode permettant de récupérer les informations relatives au dernier membre inscrit en BDD + $db = Database::getInstance(); // on récupère la connexion à la BDD + $sql = "SELECT COUNT(*) FROM R_joueur"; // on définit la requête qu'on enverra + $req = $db->query($sql); // on exécute la requête + return $req->fetch()[0]; // on retourne le nombre } } diff --git a/app/view/Classement/display.html b/app/view/Classement/display.html index be911641f85dd565e5dcb270e60c9503c2661d49..76d40da206ccd60f2e18527477e48232f02e4be5 100644 --- a/app/view/Classement/display.html +++ b/app/view/Classement/display.html @@ -1,5 +1,5 @@ <?php - $page_title = "Classement"; + $page_title = "Classement ".$this->lejeu; include(ROOT."/app/view/Includes/header.include.html"); ?> diff --git a/app/view/Includes/header.include.html b/app/view/Includes/header.include.html index ecf38f00d622c2b5775d9054ec0042b4d5df12f7..7aacafa77cabdfa7417418c51f9e1511958995a9 100644 --- a/app/view/Includes/header.include.html +++ b/app/view/Includes/header.include.html @@ -10,49 +10,57 @@ if(!isset($_SESSION)) { // si <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><?php echo $page_title; ?></title> <link rel="stylesheet" href="<?php echo BASE_URL; ?>/css/style.css"> + <link rel="stylesheet" href="<?php echo BASE_URL; ?>/css/jquery.auto-complete.css"> + <link rel="stylesheet" href="<?php echo BASE_URL; ?>/css/pure.min.css"> <link href='https://fonts.googleapis.com/css?family=Work+Sans' rel='stylesheet' type='text/css'> + + + <script>var BASE_URL = 'http://localhost/projet-web-2016/www';</script> + <script src="<?php echo BASE_URL; ?>/js/jquery.min.js"></script> + <script src="<?php echo BASE_URL; ?>/js/jquery.auto-complete.min.js"></script> + <script src="<?php echo BASE_URL; ?>/js/autocompletion_form_jeux.js"></script> </head> -<body> +<body onload="loadJsonJeux();"> <div class="wrapper"> <header class="row"> - <div class="col-2 col-m-2"> - <a href="<?php echo BASE_URL; ?>"> - <img class="logo-image" src="<?php echo BASE_URL; ?>/images/logo.png" alt="logo du site web"/> - </a> - </div> - - <div class="search-bar-conteneur col-3 col-m-3"> - <!-- <form method="post" name="truc" class="search-bar-form"> - <div class="search-bar-input-conteneur"> - <input class="search-bar" type="text" name="machin" title="machin" /> - </div> + <div class="header row"> + <div class="col-2 col-m-2"> + <a href="<?php echo BASE_URL; ?>"> + <img class="logo-image" src="<?php echo BASE_URL; ?>/images/logo.png" alt="logo du site web"/> + </a> + </div> - <button type="submit" class="glass"><img src="<?php echo BASE_URL; ?>/images/find.png" alt="icône de recherche" height="30px"/> </button> - </form> - --> - </div> + <div class="search-bar-conteneur col-3 col-m-3"> + <form method="post" action="<?php echo BASE_URL; ?>/jeu" name="nomJeu" class="pure-form"> + <input type="text" class="search-bar" id="rechercheJeu" name="rechercheJeu" placeholder="Rechercher un jeu..." /><input type="submit" class="search-button" value=""/> + </form> + + </div> - <div class="col-4 space col-m-1"> - - </div> - <?php - if(isset($_SESSION['connected']) && $_SESSION['connected'] == true) { - ?> - <div class="connexion col-3 col-m-6"> - <?php echo $_SESSION['user']->prenom.' '.$_SESSION['user']->nom; ?> - </div> - <?php - } - else { - ?> - <div class="connexion col-3 col-m-6"> - <div class="signin"><a class="connexion-link" href="<?php echo BASE_URL; ?>/inscription">Inscription</a></div> - <div class="login"><a class="connexion-link" href="<?php echo BASE_URL; ?>/connexion">Connexion</a></div> - </div> - <?php - } - ?> + <div class="col-4 space col-m-1"> + </div> + <?php + if(isset($_SESSION['connected']) && $_SESSION['connected'] == true) { + ?> + <div class="connexion col-3 col-m-6"> + <?php echo $_SESSION['user']->prenom.' '.$_SESSION['user']->nom; ?> + </div> + <?php + } + else { + ?> + <div class="connexion col-3 col-m-6"> + <div class="signin"><a class="connexion-link" href="<?php echo BASE_URL; ?>/inscription">Inscription</a></div> + <div class="login"><a class="connexion-link" href="<?php echo BASE_URL; ?>/connexion">Connexion</a></div> + </div> + <?php + } + ?> + </div> + + <?php include(ROOT."/app/view/Includes/menu.include.html"); ?> </header> + <div class="main" id="top"> diff --git a/app/view/Includes/menu.include.html b/app/view/Includes/menu.include.html new file mode 100644 index 0000000000000000000000000000000000000000..24239666bc44d0fa1c8538acce022018dd0c0c3b --- /dev/null +++ b/app/view/Includes/menu.include.html @@ -0,0 +1,15 @@ + <nav class="row"> + <ul class="row"> + <div class="space col-1 col-m-1"></div> + <a href="<?php echo BASE_URL."/listejeux";?>"> + <li class="<?php if($page_title == "Liste des jeux") echo "actif "; ?>col-3 col-m-3">La liste de nos jeux</li> + </a> + <a href="<?php echo BASE_URL."/classement/global";?>"> + <li class="<?php if($page_title == "Classement général") echo "actif "; ?>col-3 col-m-3">Le classement général</li> + </a> + <a href="<?php echo BASE_URL."/contact";?>"> + <li class="<?php if($page_title == "Contact") echo "actif "; ?>col-3 col-m-3">Nous contacter</li> + </a> + <div class="space col-1 col-m-1"></div> + </ul> + </nav> diff --git a/app/view/Index/display.html b/app/view/Index/display.html index 99dc981b272fc5fc32c2bf013e6c861ae8d23e68..346437427d14a4207f7d8b5ae333c84516c424ee 100644 --- a/app/view/Index/display.html +++ b/app/view/Index/display.html @@ -3,31 +3,63 @@ include(ROOT."/app/view/Includes/header.include.html"); ?> - <article> - <h1>Exemple de page d'accueil</h1> - - <h3 style="margin-bottom:-2px;">Liste de jeux</h3> - <ul> - <?php foreach($this->list as $jeu) : ?> - <li><a href="jeu/<?php echo $jeu->slug;?>"><?php echo $jeu->nom;?></a></li> - <?php endforeach;?> - </ul> - - <h3 style="margin-bottom:-4px;">Liste de profils</h3> - <ul> - <?php foreach($this->listprofils as $profil) : ?> - <li><a href="profil/<?php echo $profil->slug;?>">Voir le profil de <?php echo $profil->pseudo;?></a></li> - <?php endforeach;?> - </ul> - - <h3 style="margin-bottom:-4px;">Classements</h3> - <ul> - <li><a href="classement/global/">Classement global</a></li> - <li><a href="classement/jeu/random">Classement pour un jeu spécifique</a></li> - </ul> - - <a href="deconnexion">Se déconnecter</a> - + + <article class="surtitre"><h2><em>Classements ludiques</em>, pour vous affronter sur vos jeux préférés !</h2></article> + <article> + <div class="col-6 stat-block"> + <h3 class="stat-title">Jeux les plus joués sur <em>Classements ludiques</em></h3> + <table class="jeux-preferes"> + <?php + foreach($this->most_played as $jeu) { + ?> + <tr><td><img src="<?php echo BASE_URL; ?>/images/Cosmic_Encounter_(FFG).jpg" alt="logo jeu <?php echo $jeu['nom']; ?>" /></td><td><?php echo $jeu['nom']; ?></td><td><?php echo $jeu['parties']; ?>x</td></tr> + <?php + } + ?> + <tr><td colspan=3><a href="<?php echo BASE_URL; ?>/listejeux">Voir plus de jeux</a></td></tr> + </table> + </div> + + <div class="col-6"> + <h3 class="stat-title">Dernier inscrit :</h3> + <aside class="profil-image"> + <img src="<?php echo BASE_URL; ?>/images/profil_42.jpg" alt="Photo de profil de phoenix" /> + </aside> + <ul class="col-4 pref"> + <li><?php echo $this->last_member->prenom.' '.$this->last_member->nom; ?></li> + </ul> + + </div> + + <div class="col-6"> + <h3 class="stat-title">Nombre d'inscrit sur <em>Classements ludiques</em></h3> + <blockquote class="stat-title"><?php echo $this->nb_members; ?></blockquote> + </div> + + + + <div class="row"> + <?php + if(isset($_SESSION['connected']) && $_SESSION['connected'] == true) { + ?> + <h2 class="stat-title">Vous êtes connecté</h2> + <div class="inscription-btn-container"> + <a class="inscription-btn" href="<?php echo BASE_URL; ?>/add_partie">Ajouter une partie !</a> + </div> + <?php + } + else { + ?> + <h2 class="stat-title">Pas encore inscrit ?</h2> + <div class="inscription-btn-container"> + <a class="inscription-btn" href="<?php echo BASE_URL; ?>/inscription">Inscrivez-vous !</a> + </div> + <?php + } + ?> + </div> + </article> + <?php include(ROOT."/app/view/Includes/footer.include.html"); ?> diff --git a/app/view/Jeu/listeJson.html b/app/view/Jeu/listeJson.html new file mode 100644 index 0000000000000000000000000000000000000000..7977fda2af8934d05d5592111a5bd854f0060f7a --- /dev/null +++ b/app/view/Jeu/listeJson.html @@ -0,0 +1,12 @@ +[ +<?php +$cpt = 1; +foreach($this->liste as $jeu) { + echo '{"value": "'.htmlspecialchars($jeu->nom).'"}'; + if($cpt != count($this->liste)) { + echo ','; + } + $cpt++; +} +?> +] \ No newline at end of file diff --git a/www/css/jquery.auto-complete.css b/www/css/jquery.auto-complete.css new file mode 100644 index 0000000000000000000000000000000000000000..4261b1d033e28b55dfc43df39f5410a11823a15c --- /dev/null +++ b/www/css/jquery.auto-complete.css @@ -0,0 +1,9 @@ +.autocomplete-suggestions { + text-align: left; cursor: default; border: 1px solid #ccc; border-top: 0; background: #fff; box-shadow: -1px 1px 3px rgba(0,0,0,.1); + + /* core styles should not be changed */ + position: absolute; display: none; z-index: 9999; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box; +} +.autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; } +.autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; } +.autocomplete-suggestion.selected { background: #f0f0f0; } diff --git a/www/css/pure.min.css b/www/css/pure.min.css new file mode 100644 index 0000000000000000000000000000000000000000..29eae96a708643cd327d7f96700d6802d9cfc53d --- /dev/null +++ b/www/css/pure.min.css @@ -0,0 +1,75 @@ +.pure-form input[type="text"], +.pure-form textarea { + padding:.5em .6em; + display:inline-block; + border:1px solid #ccc; + box-shadow:inset 0 1px 3px #ddd; + border-radius:4px 0 0 4px; + -webkit-box-sizing:border-box; + -moz-box-sizing:border-box; + box-sizing:border-box; + border-right:0; + margin:0; +} + +.pure-form input[type="submit"] { + display:inline-block; + border:1px solid #ccc; + box-shadow:inset 0 1px 3px #ddd; + border-radius:0 4px 4px 0; + -webkit-box-sizing:border-box; + -moz-box-sizing:border-box; + box-sizing:border-box; + border-left:0; + margin:0; +} + +.pure-form input:focus, +.pure-form textarea:focus { + outline:0; +} + +.pure-form input[disabled], +.pure-form textarea[disabled] { + cursor:not-allowed; + background-color:#eaeded; + color:#cad2d3; +} + +.pure-form input[readonly], +.pure-form textarea[readonly] { + background-color:#eee; + color:#777; + border-color:#ccc; +} + +.pure-form input:focus:invalid, +.pure-form select:focus:invalid { + color:#b94a48; + border-color:#e9322d; +} + +.pure-form select { + height:2.25em; + border:1px solid #ccc; + background-color:#fff; +} + +.pure-form select[multiple] { + height:auto; +} + +.pure-form label { + margin:.5em 0 .2em; +} + +@media only screen and (max-width :480px) { + .pure-form button[type=submit] { + margin:.7em 0 0; + } + + .pure-form label { + margin-bottom:.3em; + display:block; + } +} \ No newline at end of file diff --git a/www/css/style.css b/www/css/style.css index 388ddaa39b91f2542c10db317f3c80f3e257def6..043379c681a498e72f5d63e66d7a66c013a83b97 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -12,14 +12,29 @@ body { header { - padding:5px; + padding:0; position: fixed; top: 0; right: 0; left: 0; - background:#26346D; height: 120px; z-index:100; + margin-bottom: 15px; +} + +.header { + padding:5px; + min-height:44px; + background:#26346D; +} + +nav +{ + padding:5px; + background:#26346D; + min-height: 40px; + z-index:100; + margin:0; } footer{ @@ -35,7 +50,7 @@ footer{ } .main{ - margin-top:140px; + margin-top:235px; padding-bottom:100px; } @@ -49,12 +64,12 @@ article{ -header a, footer a{ +header a, footer a { color:navajowhite; text-decoration: none; } -header a:hover, footer a:hover{ +header a:hover, footer a:hover { color:cadetblue; text-decoration: none; } @@ -72,17 +87,28 @@ header a:hover, footer a:hover{ margin-left:20px; } -.search-bar-conteneur{ +.search-bar-conteneur { vertical-align: middle; margin-top:5px; - background-color:white; height: 32px; border-radius: 2px; position: static; +} +.search-bar { + margin-right:32px; + width: calc(100% - 32px); } -.connexion -{ + +.search-button { + width:32px; + height: 32px; + float:right; + background-image:url(../images/find.png); + background-size: 31px; +} + +.connexion { text-align: center; border-radius: 2px; background: #02071E; @@ -93,7 +119,7 @@ header a:hover, footer a:hover{ } -.signin{ +.signin { width:48%; text-align: center; padding: 2px; @@ -106,12 +132,12 @@ header a:hover, footer a:hover{ margin-right:-4px; } -.signin:hover{ +.signin:hover { background: red linear-gradient(to bottom, #02071E, #02071E, rgba(255, 255, 255, 0)); } -.login{ +.login { width:48%; text-align: center; padding: 2px; @@ -130,6 +156,67 @@ header a:hover, footer a:hover{ +.inscription-btn-container { + text-align: center; + background: #02071E; + line-height: 30px; + height:34px; + border-radius:10px; +} + + +.inscription-btn { + color:blanchedalmond; + font-weight : bold; + text-decoration:none; + width:100%; + padding: 2px; + border-radius:10px; + background: #02071E linear-gradient(to bottom, #02071E, #02071E, rgba(255, 255, 255, 0)); + -webkit-transition: background 500ms; /* Safari */ + transition: background 500ms ; + display: inline-block; + height:30px; +} + +.inscription-btn:hover { + background: red linear-gradient(to bottom, #02071E, #02071E, rgba(255, 255, 255, 0)); + +} + + +nav ul { + text-align:center; + margin:0; + padding:0; +} + +nav ul li { + display: inline-block; + text-align: center; + line-height: 28px; + height:28px; + margin-bottom:2px; + border-radius: 2px; + color:blanchedalmond; + background: #02071E linear-gradient(to bottom, #02071E, #02071E, rgba(255, 255, 255, 0)); + -webkit-transition: background 500ms; /* Safari */ + transition: background 500ms ; +} + +nav ul li.actif { + color:blanchedalmond; + background: #0f0 linear-gradient(to bottom, #02071E, #02071E, rgba(255, 255, 255, 0)); +} + +nav ul li:hover{ + background: magenta linear-gradient(to bottom, #02071E, #02071E, rgba(255, 255, 255, 0)); +} + + + + + .logo-image{ height:40px; @@ -242,7 +329,7 @@ div.submit input[type=submit], div.submit input[type=reset] { } -.inscription-form textarea { +.inscription-form textarea, .addjeu-form textarea { width: 160px; } @@ -345,6 +432,11 @@ article h2{ background-color: green; } +.surtitre { + color: white; + background-color: #4A588F; +} + .classement-card{ width:100%; background:white; @@ -405,13 +497,17 @@ article h2{ float: left; } + nav ul li{ + margin:0 5px 2px 5px; + padding: 2px 8px 0 8px; + } header{ - height: 40px; + min-height: 40px; } .main{ - margin-top:60px; + margin-top:120px; } .space{ @@ -440,6 +536,9 @@ article h2{ margin-bottom:0; } + .stat-block{ + min-height: 200px; + } article{ margin:auto; width:768px; diff --git a/www/js/autocompletion_form_jeux.js b/www/js/autocompletion_form_jeux.js new file mode 100644 index 0000000000000000000000000000000000000000..b51f6a7238f10c56bd53ceff191b409bd74b5599 --- /dev/null +++ b/www/js/autocompletion_form_jeux.js @@ -0,0 +1,37 @@ +var choices = []; + +function loadJsonJeux(value) { + var params = {}; + + $.ajax({ + dataType: 'json', + type: 'POST', + url: BASE_URL+'/jeux', + data: params, + success: function(resp) { + for (var x = 0; x < resp.length; x++) { + choices.push(resp[x].value); + } + }, + error: function() { + choices = []; + console.log('there was a problem checking the fields'); + } + }); +} + +$(function(){ + $('#rechercheJeu').autoComplete({ + minChars: 1, + source: function(term, suggest){ + term = term.toLowerCase(); + var suggestions = []; + for (i=0;i<choices.length;i++) { + if(~choices[i].toLowerCase().indexOf(term)) { + suggestions.push(choices[i]); + } + } + suggest(suggestions); + } + }); +}); \ No newline at end of file diff --git a/www/js/jquery.auto-complete.min.js b/www/js/jquery.auto-complete.min.js new file mode 100644 index 0000000000000000000000000000000000000000..c6deb2f25b5ecacffef3451315b2016e4f440956 --- /dev/null +++ b/www/js/jquery.auto-complete.min.js @@ -0,0 +1,3 @@ +// jQuery autoComplete v1.0.7 +// https://github.com/Pixabay/jQuery-autoComplete +!function(e){e.fn.autoComplete=function(t){var o=e.extend({},e.fn.autoComplete.defaults,t);return"string"==typeof t?(this.each(function(){var o=e(this);"destroy"==t&&(e(window).off("resize.autocomplete",o.updateSC),o.off("blur.autocomplete focus.autocomplete keydown.autocomplete keyup.autocomplete"),o.data("autocomplete")?o.attr("autocomplete",o.data("autocomplete")):o.removeAttr("autocomplete"),e(o.data("sc")).remove(),o.removeData("sc").removeData("autocomplete"))}),this):this.each(function(){function t(e){var t=s.val();if(s.cache[t]=e,e.length&&t.length>=o.minChars){for(var a="",c=0;c<e.length;c++)a+=o.renderItem(e[c],t);s.sc.html(a),s.updateSC(0)}else s.sc.hide()}var s=e(this);s.sc=e('<div class="autocomplete-suggestions '+o.menuClass+'"></div>'),s.data("sc",s.sc).data("autocomplete",s.attr("autocomplete")),s.attr("autocomplete","off"),s.cache={},s.last_val="",s.updateSC=function(t,o){if(s.sc.css({top:s.offset().top+s.outerHeight(),left:s.offset().left,width:s.outerWidth()}),!t&&(s.sc.show(),s.sc.maxHeight||(s.sc.maxHeight=parseInt(s.sc.css("max-height"))),s.sc.suggestionHeight||(s.sc.suggestionHeight=e(".autocomplete-suggestion",s.sc).first().outerHeight()),s.sc.suggestionHeight))if(o){var a=s.sc.scrollTop(),c=o.offset().top-s.sc.offset().top;c+s.sc.suggestionHeight-s.sc.maxHeight>0?s.sc.scrollTop(c+s.sc.suggestionHeight+a-s.sc.maxHeight):0>c&&s.sc.scrollTop(c+a)}else s.sc.scrollTop(0)},e(window).on("resize.autocomplete",s.updateSC),s.sc.appendTo("body"),s.sc.on("mouseleave",".autocomplete-suggestion",function(){e(".autocomplete-suggestion.selected").removeClass("selected")}),s.sc.on("mouseenter",".autocomplete-suggestion",function(){e(".autocomplete-suggestion.selected").removeClass("selected"),e(this).addClass("selected")}),s.sc.on("mousedown click",".autocomplete-suggestion",function(t){var a=e(this),c=a.data("val");return(c||a.hasClass("autocomplete-suggestion"))&&(s.val(c),o.onSelect(t,c,a),s.sc.hide()),!1}),s.on("blur.autocomplete",function(){try{over_sb=e(".autocomplete-suggestions:hover").length}catch(t){over_sb=0}over_sb?s.is(":focus")||setTimeout(function(){s.focus()},20):(s.last_val=s.val(),s.sc.hide(),setTimeout(function(){s.sc.hide()},350))}),o.minChars||s.on("focus.autocomplete",function(){s.last_val="\n",s.trigger("keyup.autocomplete")}),s.on("keydown.autocomplete",function(t){if((40==t.which||38==t.which)&&s.sc.html()){var a,c=e(".autocomplete-suggestion.selected",s.sc);return c.length?(a=40==t.which?c.next(".autocomplete-suggestion"):c.prev(".autocomplete-suggestion"),a.length?(c.removeClass("selected"),s.val(a.addClass("selected").data("val"))):(c.removeClass("selected"),s.val(s.last_val),a=0)):(a=40==t.which?e(".autocomplete-suggestion",s.sc).first():e(".autocomplete-suggestion",s.sc).last(),s.val(a.addClass("selected").data("val"))),s.updateSC(0,a),!1}if(27==t.which)s.val(s.last_val).sc.hide();else if(13==t.which||9==t.which){var c=e(".autocomplete-suggestion.selected",s.sc);c.length&&s.sc.is(":visible")&&(o.onSelect(t,c.data("val"),c),setTimeout(function(){s.sc.hide()},20))}}),s.on("keyup.autocomplete",function(a){if(!~e.inArray(a.which,[13,27,35,36,37,38,39,40])){var c=s.val();if(c.length>=o.minChars){if(c!=s.last_val){if(s.last_val=c,clearTimeout(s.timer),o.cache){if(c in s.cache)return void t(s.cache[c]);for(var l=1;l<c.length-o.minChars;l++){var i=c.slice(0,c.length-l);if(i in s.cache&&!s.cache[i].length)return void t([])}}s.timer=setTimeout(function(){o.source(c,t)},o.delay)}}else s.last_val=c,s.sc.hide()}})})},e.fn.autoComplete.defaults={source:0,minChars:3,delay:150,cache:1,menuClass:"",renderItem:function(e,t){t=t.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&");var o=new RegExp("("+t.split(" ").join("|")+")","gi");return'<div class="autocomplete-suggestion" data-val="'+e+'">'+e.replace(o,"<b>$1</b>")+"</div>"},onSelect:function(e,t,o){}}}(jQuery);