From 0d045e0dcaec1fffbe0077f0857fbb63a01d4e84 Mon Sep 17 00:00:00 2001
From: thebigr <nevoroy@gmail.com>
Date: Fri, 20 Apr 2018 09:42:51 +0300
Subject: [PATCH] added filter by + sort by arrival.

---
 .../index.html                                | 36 +++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/m1.lesson8.flights-server-handlebars-lodash/index.html b/m1.lesson8.flights-server-handlebars-lodash/index.html
index 34c9472..38aa694 100644
--- a/m1.lesson8.flights-server-handlebars-lodash/index.html
+++ b/m1.lesson8.flights-server-handlebars-lodash/index.html
@@ -17,6 +17,16 @@ <h1>handlebars and lodash</h1>
 
     <section>
         <button class="sort-dep">Sort By Departure</button>
+        <button class="sort-arr">Sort By Arrival</button>
+        <select id="actualSelect">
+            <option>nothing to show yet</option>
+        </select>
+        <script id='Airline-dropdown-template' type='text/x-handlebars-template'>
+            {{#each this}}
+            <option>{{by}}</option>
+            {{/each}}
+        </script>
+        <button class="sort-arg">filter by airline</button>
         <table id="flight-table">
                 <caption>flights</caption>
                 <thead>
@@ -54,8 +64,11 @@ <h1>handlebars and lodash</h1>
 
     <script>
         const tBodyTmpl = Handlebars.compile(document.getElementById('table-row-template').innerHTML);
+        const selectOptionTmpl = Handlebars.compile(document.getElementById('Airline-dropdown-template').innerHTML);
 
         let flightsData = [];
+        let selectOptions = [];
+
 
         document.querySelector('button.load').onclick = function() {
             fetch('flights.json')
@@ -63,19 +76,38 @@ <h1>handlebars and lodash</h1>
                 .then(data => {
                     flightsData = data;
                     renderTable(flightsData);
+                    selectOptions =  _.uniqBy(flightsData, 'by');
+                    addOption(selectOptions);
+                    console.log(selectOptions);
                 });
         };
 
-
         // render tbody with handlebars
         function renderTable(data) {
             document.querySelector('#flight-table tbody').innerHTML = tBodyTmpl(data);
         }
 
-        // sorting
+        // add option to dropdown with handlebars
+        function addOption(data) {
+            document.querySelector('#actualSelect').innerHTML = selectOptionTmpl(data);
+        }
+
+        // sorting by departure
         document.querySelector('button.sort-dep').onclick = function() {
             flightsData = _.sortBy(flightsData, flight => new Date(flight.departure));
+            renderTable(flightsData);
+        };
+
+        //sorting by arrival
+        document.querySelector('button.sort-arr').onclick = function() {
+            flightsData = _.orderBy(flightsData,['arrival'],['desc']);
+            renderTable(flightsData);
+        };
 
+        //filter according to selected option in dropdown
+        document.querySelector('button.sort-arg').onclick = function() {
+            let selectedAirline = document.getElementById("actualSelect").value;
+            flightsData = _.filter(flightsData,['by',selectedAirline]);
             renderTable(flightsData);
         };
     </script>