Merge pull request #479 from LironRS/478-search-string-interactive

478: Added colors and clickability to filter string
data-for-change · Nov 12, 2015 · 2ed9ea6 · 2ed9ea6
2 parents daae423 + 6c724be
commit 2ed9ea6
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 9 deletions.
diff --git a/static/css/style.css b/static/css/style.css
@@ -689,4 +689,37 @@ input[type='date']{
 
 input[type='checkbox']{
     display: none;
-}
+}
+
+#filter-description{
+    height: 100%;
+}
+
+#filter-string{
+    text-align: center;
+    vertical-align: middle;
+    padding-top: 10%; !important;
+}
+
+#filter-string > p{
+    font-weight: bold;
+    text-align: center;
+    line-height: 30px !important;
+    font-size: 30px !important;
+}
+
+#filter-string > span {
+    font-size: 20px !important;
+    font-weight: bold;
+}
+
+#filter-string > span > a{
+    display: inline;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+#filter-string > span > a:hover{
+    color: grey !important;
+}
+
diff --git a/static/js/app.js b/static/js/app.js
@@ -957,13 +957,25 @@ $(function () {
                     accuracyText = ""
                 }
 
-                $("#filter-string").text(
-                    "" + "מציג " + markerCount + " תאונות בין התאריכים " + moment(this.dateRanges[0]).format('LL')
-                    + " עד " + moment(this.dateRanges[1]).format('LL') + severityText + fatal + severe + light
-                    + accuracyText + accurate + approx
-                );
+                $("#filter-string").empty()
+                    .append("<span>מציג </span>")
+                    .append("<span><a onclick='showFilter(FILTER_MARKERS)'>"+markerCount+"</a></span>")
+                    .append("<span> תאונות</span>")
+                    .append("<span> בין התאריכים </span><br>")
+                    .append("<span><a onclick='showFilter(FILTER_DATE)'>"+
+                                moment(this.dateRanges[0]).format('LL') + " עד " +
+                                moment(this.dateRanges[1]).format('LL') +"</a></span><br>")
+                    .append("<span>" + severityText + "</span>")
+                    .append("<span><a onclick='showFilter(FILTER_INFO)' style='color: #d81c32;'>" + fatal + "</a></span>")
+                    .append("<span><a onclick='showFilter(FILTER_INFO)' style='color: #ff9f1c;'>" + severe + "</a></span>")
+                    .append("<span><a onclick='showFilter(FILTER_INFO)' style='color: #ffd82b;'>" + light + "</a></span><br>")
+                    .append("<span>" + accuracyText + "</span>")
+                    .append("<span><a onclick='showFilter(FILTER_INFO)'>" + accurate + "</a></span>")
+                    .append("<span><a onclick='showFilter(FILTER_INFO)'>" + approx + "</a></span>")
+                ;
             } else {
-                $("#filter-string").text(" התקרב על מנת לקבל נתוני סינון ");
+                $("#filter-string").empty()
+                    .append("<p>התקרב על מנת לקבל נתוני סינון</p>");
             }
         }
     });

diff --git a/static/js/constants.js b/static/js/constants.js
@@ -162,3 +162,8 @@ var SUBTYPE_STRING = [
     "התנגשות עם בעל חיים",
     "פגיעה ממטען של רכב"
 ];
+
+
+var FILTER_MARKERS = 0;
+var FILTER_INFO = 1;
+var FILTER_DATE = 2;
diff --git a/static/js/localization.js b/static/js/localization.js
@@ -260,4 +260,6 @@ var localization =
         "MISHKAL_KOLEL_LMS": "משקל כולל",
         "ACC_ID": "מספר סידורי",
         "PROVIDER_CODE": "סוג תיק"
+
+
         }
diff --git a/templates/index.html b/templates/index.html
@@ -403,8 +403,7 @@ <h5> אנו מפתחים תכונות חדשות לאתר. הנך מוזמנ/ת
 
 <div id="sidebar-template" style="display: none">
     <div class="filter-description">
-        <div style="width:80%; padding:5%; font-size: 20px; font-weight: bold;">
-            <p id="filter-string"></p>
+        <div id="filter-string">
         </div>
     </div>
     <div class="filter-menu">
@@ -1034,6 +1033,24 @@ <h5> אנו מפתחים תכונות חדשות לאתר. הנך מוזמנ/ת
         inGooglePlay: 'בGoogle play'
     });
 </script>
+
+<script>
+    // show filter panel on search string click
+    function showFilter(number){
+        switch (number){
+            case FILTER_MARKERS:
+                $('#filter-markers').click();
+                break;
+            case FILTER_INFO:
+                $('#filter-info').click();
+                break;
+            case FILTER_DATE:
+                $('#filter-date').click();
+                break;
+        }
+    }
+</script>
+
 </body>
 </html>