From 0b9e09b600268b9bb762e78589d0f8a0e628cdcf Mon Sep 17 00:00:00 2001
From: Meutel <meutel@meutel.net>
Date: Sat, 14 Jan 2017 18:48:08 +0100
Subject: [PATCH] Search form

---
 search.html | 41 +++++++++++++++++++++++++++++++++++++----
 search.js   | 15 +++++++++++++--
 2 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/search.html b/search.html
index 0e0d6d8..17d26a1 100644
--- a/search.html
+++ b/search.html
@@ -26,17 +26,50 @@
       </div>
     </nav>
     <div class="container" id="app">
-      <div class="jumbotron">
-        <h1>Recherche</h1>
+      <div class="panel panel-primary">
+        <div class="panel-heading">
+          <h3>Recherche</h3>
+        </div>
+        <div class="panel-body">
+          <form>
+            <div class="form-group">
+              <input id="q" type="text" class="form-control" placeholder="Recherche">
+            </div>
+            <div class="form-group">
+              <label>Parmi</label><br/>
+              <label class="radio-inline">
+                <input type="radio" name="which" value="books" checked> livres
+              </label>
+              <label class="radio-inline">
+                <input type="radio" name="which" value="authors" disabled> auteurs
+              </label>
+              <label class="radio-inline">
+                <input type="radio" name="which" value="series" disabled> series
+              </label>
+              <label class="radio-inline">
+                <input type="radio" name="which" value="all" disabled> tous
+              </label>
+            </div>
+            <div class="form-group">
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="all" disabled> Tous les mots
+                </label>
+                <p class="help-block">Cocher pour rechercher les élements contenant tous les mots saisis</p>
+              </div>
+            </div>
+            <button type="button" class="btn btn-primary" @click="searchFull">Rechercher</button>
+          </form>
+        </div>
       </div>
       <div v-if="books.length > 0">
         <h2>{{ booksCount }} <template v-if="booksCount>1">livres</template><template v-else>livre</template></h2>
         <ul>
-          <li v-for="book in books">
+          <li v-for="book in books" class="list-unstyled">
             <span class="glyphicon glyphicon-book"></span>
             <a :href="'book.html?id='+book.id">{{ book.title }}</a>
           </li>
-          <li v-if="books.length < booksCount">...</li>
+          <li v-if="books.length < booksCount" class="list-unstyled">...</li>
         </ul>
       </div>
     </div>
diff --git a/search.js b/search.js
index 2547ebb..7fac97a 100644
--- a/search.js
+++ b/search.js
@@ -69,17 +69,28 @@ var app = new Vue({
       this.sendQuery(this.searchParams('cgi-bin/bouquins/books'), this.stdError, this.searchBooksSuccess);
     },
     searchAll: function() {
+      this.clear();
+      this.searchBooks();
+    },
+    clear: function() {
       this.authors = [];
       this.books = [];
       this.series = [];
       this.booksCount = 0;
-      this.searchBooks();
+    },
+    searchFull: function() {
+      if (document.getElementById("q").value) {
+        this.clear();
+        this.terms = document.getElementById("q").value.split(' ');
+        // TODO criteria
+        this.searchBooks();
+      }
     },
     searchUrl: function() {
       if (this.urlParams.q) {
         this.terms = this.urlParams.q.split(' ');
         this.searchAll();
-      // TODO copy in form
+        document.getElementById("q").value = this.urlParams.q;
       }
     }
   },