From 015826ba3a9e6b4beec03fcb7b75036d5eca1561 Mon Sep 17 00:00:00 2001
From: Krystyna Milian <krystyna.milian@gmail.com>
Date: Sun, 31 Jul 2016 15:18:25 +0200
Subject: [PATCH] Added integration of tabs, list of shelters corresponds to
 filtered shelters (filtered using charts)

---
 src/web/static/js/dashboard.js   | 46 +++++++++++++++++++++++++-------
 src/web/templates/dashboard.html | 35 +-----------------------
 2 files changed, 37 insertions(+), 44 deletions(-)

diff --git a/src/web/static/js/dashboard.js b/src/web/static/js/dashboard.js
index 1db4d03..b12c4ed 100644
--- a/src/web/static/js/dashboard.js
+++ b/src/web/static/js/dashboard.js
@@ -16,7 +16,7 @@ $(document).ready(function () {
 
 
     d3.csv('/static/data/shelters-sample.csv', function (data) {
-        // d3.json("api/v0.1/shelters", function(dataObject) {
+    // d3.json("api/v0.1/shelters", function(dataObject) {
 
          // var data = []
          // for (var key in dataObject) {
@@ -120,7 +120,7 @@ $(document).ready(function () {
             .zoom(2)
             .filterByArea(true)
             .cluster(true)
-            .on("filtered", getFiltersValues);
+            .on("filtered", onFiltered);
 
         addLayersToChart(mapChart)
         mapChart.map().scrollWheelZoom.disable()
@@ -132,7 +132,7 @@ $(document).ready(function () {
             .dimension(zoneDimension)
             .group(zoneCount)
             .innerRadius(20)
-            .on("filtered", getFiltersValues);
+            .on("filtered", onFiltered);
 
         crisisChart
             .width(110)
@@ -140,7 +140,7 @@ $(document).ready(function () {
             .dimension(crisisDimension)
             .group(crisisCount)
             .innerRadius(20)
-            .on("filtered", getFiltersValues);
+            .on("filtered", onFiltered);
 
 
         climateChart
@@ -149,7 +149,7 @@ $(document).ready(function () {
             .dimension(climateDimension)
             .group(climateCount)
             .innerRadius(20)
-            .on("filtered", getFiltersValues);
+            .on("filtered", onFiltered);
         ;
 
         timeChart
@@ -160,7 +160,7 @@ $(document).ready(function () {
             .barPadding(5)
             .x(d3.time.scale().domain([new Date(2003, 01, 01), new Date()]))
             .xUnits(d3.time.year)
-            .on("filtered", getFiltersValues)
+            .on("filtered", onFiltered)
             .yAxis().tickFormat(
             function (v) {
                 return d3.format('f')(v);
@@ -173,7 +173,7 @@ $(document).ready(function () {
             .margins({left: 0, right: 10, top: 10, bottom: 20})
             .dimension(countryDimension)
             .group(countryCount)
-            .on("filtered", getFiltersValues)
+            .on("filtered", onFiltered)
             .xAxis().tickFormat(
             function (v) {
                 return d3.format('f')(v);
@@ -187,7 +187,7 @@ $(document).ready(function () {
             .margins({left: 0, right: 10, top: 10, bottom: 20})
             .dimension(topographyDimension)
             .group(topographyCount)
-            .on("filtered", getFiltersValues)
+            .on("filtered", onFiltered)
             .xAxis().tickFormat(
             function (v) {
                 return d3.format('f')(v);
@@ -290,8 +290,15 @@ $(document).ready(function () {
                 saveAs(blob, 'data.csv');
             });
 
-        initFilters()
 
+
+        function onFiltered() {
+            getFiltersValues();
+            generateShelterList(allDimensions.top(Infinity));
+        }
+
+         generateShelterList(data);
+         initFilters()
     })
 
     d3.selectAll('#all').on('click', function () {
@@ -301,6 +308,8 @@ $(document).ready(function () {
 
 
     // Serializing filters values in URL
+
+
     function getFiltersValues() {
         var filters = [
             {name: 'zone', value: zoneChart.filters()},
@@ -351,6 +360,8 @@ $(document).ready(function () {
         dc.redrawAll();
     });
 
+    loadFilterValues()
+
 })
 
 
@@ -455,4 +466,19 @@ function loadFilterValues() {
 }
 
 
-loadFilterValues()
\ No newline at end of file
+
+
+
+function generateShelterList(data) {
+    $('#shelterList').empty();
+    for (var i = 0; i <data.length; i ++)
+    {
+        var shelter = $('<div class="shelter"/>').appendTo('#shelterList');
+        shelter.append('<div class="image" style="background-image: url(' + '' + ')"></div> ' +
+            '<h4 class="title"><a href="shelter.html">' +data[i].nameofshelter+ '</a></h4>'  +
+            '<div class="country">'+data[i].country+'</div> ' +
+            '<div class="description"><p>' +'' + '</p></div>');
+    }
+
+}
+
diff --git a/src/web/templates/dashboard.html b/src/web/templates/dashboard.html
index 3df4a7a..4a36703 100644
--- a/src/web/templates/dashboard.html
+++ b/src/web/templates/dashboard.html
@@ -128,40 +128,7 @@
                 <li class="tab2" onclick="setTab(2)">Statistics</li>
             </ul>
             <div class="tabcontent tabcontent1">
-                <div class="shelters">
-                    <div class="shelter">
-                        <div class="image" style="background-image: url('img/shelter.jpg')"></div>
-                        <h4 class="title"><a href="shelter.html">Cordaid, TS Urban</a></h4>
-                        <div class="country">Haiti</div>
-                        <div class="description"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-                            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-                            nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
-                            anim id est laborum.</p></div>
-                    </div>
-                    <div class="shelter">
-                        <div class="image" style="background-image: url('img/shelter.jpg')"></div>
-                        <h4 class="title"><a href="shelter.html">Cordaid, TS Urban</a></h4>
-                        <div class="country">Haiti</div>
-                        <div class="description"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-                            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-                            nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
-                            anim id est laborum.</p></div>
-                    </div>
-                    <div class="shelter">
-                        <div class="image" style="background-image: url('img/shelter.jpg')"></div>
-                        <h4 class="title"><a href="shelter.html">Cordaid, TS Urban</a></h4>
-                        <div class="country">Haiti</div>
-                        <div class="description"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
-                            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-                            nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
-                            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-                            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
-                            anim id est laborum.</p></div>
-                    </div>
+                <div class="shelters" id="shelterList">
                 </div>
             </div>
             <div class="tabcontent tabcontent2">
-- 
GitLab