Add input to search stations in list

piRstone · Aug 21, 2020 · df5c78e · df5c78e
1 parent 69a25b7
commit df5c78e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 6 deletions.
diff --git a/css/stations.css b/css/stations.css
@@ -63,6 +63,16 @@ span.number {
     font-weight: bold;
 }
 
+#stations-list #search {
+    border: none;
+    background-color: #e2e2e2;
+    border-radius: 5px;
+    width: 100%;
+    padding: 7px 10px;
+    margin-bottom: 10px;
+    box-sizing: border-box;
+}
+
 #stations-list .station-to-add {
     padding: 5px 0;
     font-weight: bold;
@@ -78,15 +88,15 @@ span.number {
     border-top-right-radius: 3px;
 }
 
-#stations-list .station-to-add:first-child:hover {
-    border-bottom: 1px solid #ef5800;
-}
-
 #stations-list .station-to-add:last-child {
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
 }
 
+#stations-list .station-to-add:first-child:hover {
+    border-bottom: 1px solid #ef5800;
+}
+
 #stations-list .station-to-add:hover {
     background-color: #ef5800;
     border-bottom: 1px solid #ef5800;

diff --git a/js/popup.js b/js/popup.js
@@ -115,11 +115,17 @@ function showStationsList(e) {
         $('#main').removeClass('hide');
         $('#stations-list').addClass('hide');
         $('#add-station').removeClass('open');
+
+        // Remove search input listener
+        $('#search').off('keyup');
     } else {
         // Display list of stations
         $('#main').addClass('hide');
         $('#stations-list').removeClass('hide');
         $('#add-station').addClass('open');
+
+        // Handle search input changes
+        $('#search').on('keyup', searchStation);
     }
 
     // Add stations to list
@@ -134,8 +140,16 @@ function showStationsList(e) {
     }
 }
 
+function searchStation() {
+    var value = $(this).val().toLowerCase();
+    console.log(value);
+    $('.station-to-add').filter(function() {
+        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
+    });
+}
+
 function addStation(event) {
-    // Track station adding
+    // Track station add
     _gaq.push(['_trackEvent', event.target.id, 'Adding station']);
 
     // Close stations list

diff --git a/popup.html b/popup.html
@@ -30,7 +30,13 @@ <h5 class="fav-j-title">Mon trajet préféré</h5>
             </div>
             <div id="stations"></div>
         </div>
-        <div id="stations-list" class="hide"></div>
+        <div id="stations-list" class="hide">
+            <input
+                type="text"
+                id="search"
+                placeholder="Rechercher"
+            />
+        </div>
         <footer>
             <p>Bicloo Quick Look v1.2.1</p>
         </footer>