Ajout tags dans recherche #4

static/recherche.js

@@ -1,13 +1,44 @@
+var listCategories = [];
+var listTags = [];
+
+function getListTags(element) {
+  let arrayTags = [];
+  let listLi = element.getElementsByTagName("li");
+  for (let i = 0; i < listLi.length; i++) {
+    arrayTags.push(listLi[i].textContent.toLowerCase());
+  }
+  return arrayTags;
+}
+
 function recherche() {
-  let categorie = document.getElementById("categorie").value;
   let listElem = document.getElementsByClassName("elem");
-  if (categorie == "tout") {
+
+  if (!listCategories.length && !listTags.length) {
     for (let element of listElem) {
       element.classList.remove("hide");
     }
-  } else {
+  } else if (listCategories.length && listTags.length) {
     for (let element of listElem) {
-      if (element.classList.contains(categorie)) {
+      let arrayTags = getListTags(element);
+      if (listTags.some(r => arrayTags.includes(r)) &&
+        listCategories.some(r => element.classList.contains(r))) {
+        element.classList.remove("hide");
+      } else {
+        element.classList.add("hide");
+      }
+    }
+  } else if (listCategories.length) {
+    for (let element of listElem) {
+      if (listCategories.some(r => element.classList.contains(r))) {
+        element.classList.remove("hide");
+      } else {
+        element.classList.add("hide");
+      }
+    }
+  } else if (listTags.length) {
+    for (let element of listElem) {
+      let arrayTags = getListTags(element);
+      if (listTags.some(r => arrayTags.includes(r))) {
         element.classList.remove("hide");
       } else {
         element.classList.add("hide");
@@ -15,3 +46,59 @@ function recherche() {
     }   
   }
 }
+
+function addCat() {
+  let categorie = document.getElementById("categorie").value;
+  if (!listCategories.includes(categorie)) {
+    listCategories.push(categorie);
+    let divListCat = document.getElementById("listCategorie");
+    let newElem = document.createElement('p');
+    newElem.innerHTML = categorie;
+    newElem.id = categorie;
+    newElem.onclick = function() {removeCat(this)};
+    divListCat.appendChild(newElem);
+
+    recherche();
+  }
+}
+
+function removeCat(elem) {
+  let categorie = elem.id;
+  if (listCategories.includes(categorie)) {
+    let idCat = listCategories.indexOf(categorie);
+    listCategories.splice(idCat, 1);
+
+    let divListCat = document.getElementById("listCategorie");
+    divListCat.removeChild(elem);
+
+    recherche();
+  }
+}
+
+function addTag() {
+  let tag = document.getElementById("tag").value;
+  if (!listTags.includes(tag.toLowerCase())) {
+    listTags.push(tag.toLowerCase());
+    let divListTag = document.getElementById("listTags");
+    let newElem = document.createElement('p');
+    newElem.innerHTML = tag;
+    newElem.id = tag;
+    newElem.onclick = function() {removeTag(this)};
+    divListTag.appendChild(newElem);
+
+    recherche();
+  }
+}
+
+function removeTag(elem) {
+  let tag = elem.id;
+  if (listTags.includes(tag)) {
+    let idTag = listTags.indexOf(tag);
+    listTags.splice(idTag, 1);
+
+    let divListTag = document.getElementById("listTags");
+    divListTag.removeChild(elem);
+
+    recherche();
+  }
+}

templates/index.html

@@ -15,7 +15,25 @@
             <a href="/apropos">A propos</a>
         </header>
     </div>
-    {% if not recherche %}
+    {% if recherche %}
+    <div>
+    <p>Recherche</p>
+    <div id="listCategorie">
+    </div>
+    <div id="listTags">
+    </div>
+    <form>
+        <select id="categorie" name="categorie">
+            <option value="informatique">Informatique</option>
+            <option value="musique">Musique</option>
+            <option value="autres">Autre</option>
+        </select>
+        <input type="button" value="Ajouter" onClick="addCat()">
+        <input id="tag" type="text" value="tags">
+        <input type="button" value="Ajouter" onClick="addTag()">
+    </form>
+    </div>
+    {% else %}
     <div id="categories">
         <ul>
             <li><a href="/">Toutes catégories</a></li>