django-fy opportunity loading and simplify list.js

forecast-admin/forecast/opportunities/templates/includes/filters.html

@@ -26,12 +26,16 @@
 
   <div class="form-group-dropdown">
   <label for="award_amount-dropdown">Award Amount</label>
-  <select name="award-amount-dropdown" id="award-amount-dropdown" ></select>
+  <select name="award_amount-dropdown" id="award_amount-dropdown" >
+    <option default value="all">All</option>
+  </select>
   </div>
 
   <div class="form-group-dropdown">
   <label for="estimated_fiscal_year_quarter-dropdown">Projected Solicitation Quarter</label>
-  <select name="estimated_fiscal_year_quarter-dropdown" id="estimated_fiscal_year_quarter-dropdown" ></select>
+  <select name="estimated_fiscal_year_quarter-dropdown" id="estimated_fiscal_year_quarter-dropdown" >
+    <option default value="all">All</option>
+  </select>
   </div>
 
 <!-- The following link allows for showing additional filters -->

forecast-admin/forecast/opportunities/templates/includes/opportunity.html

@@ -1,17 +1,17 @@
 {% for o in o %}
 <li class="opportunity-row" id="opportunity-row">
-  <div>{{ o.fields.office.0 }}, {{ o.fields.office.1 }}</div>
-  <div>{{ o.fields.description }}</div>
+  <div class="office">{{ o.fields.office.0 }}, {{ o.fields.office.1 }}</div>
+  <div class="description">{{ o.fields.description }}</div>
   <div class="details">
     <div class="row">
       <div class="usa-width-one-half">
-        <p><span class="detail-label">Award Status: </span>{{ o.fields.award_status }}</p>
-        <p><span class="detail-label">Place of Performance: </span>{{ o.fields.place_of_performance_city }},  {{ o.fields.place_of_performance_state }}</p>
-        <p><span class="detail-label">NAICS Code: </span>{{ o.fields.naics }}</p>
+        <p><span class="detail-label">Award Status: </span><span class="award_status">{{ o.fields.award_status }}</span></p>
+        <p><span class="detail-label">Place of Performance: </span>{{ o.fields.place_of_performance_city }}, <span class="place_of_performance_state">{{ o.fields.place_of_performance_state }}</span></p>
+        <p><span class="detail-label">NAICS Code: </span><span class="naics">{{ o.fields.naics }}</span></p>
       </div>
       <div class="usa-width-one-half">
-        <p><span class="detail-label">Estimated Award Date: </span>FY {{ o.fields.estimated_fiscal_year }} - Quarter  {{ o.fields.estimated_fiscal_year_quarter }} </p>
-        <p><span class="detail-label">Category: </span> {{ o.fields.socioeconomic }} </p>
+        <p><span class="detail-label">Estimated Award Date: </span>FY {{ o.fields.estimated_fiscal_year }} - Quarter  <span class="estimated_fiscal_year_quarter">{{ o.fields.estimated_fiscal_year_quarter }}</span></p>
+        <p><span class="detail-label">Category: </span> <span class="award_amount">{{ o.fields.socioeconomic }}</span></p>
         <p><a href="/details/{{ o.pk }}" target="_blank">View Details </a></p>
       </div>
     </div>

forecast-admin/forecast/opportunities/templates/main.html

@@ -58,9 +58,60 @@
 <script src="{% static 'assets/js/vendor/underscore-min.js' %}"></script>
 <script src="{% static 'assets/js/vendor/list.min.js' %}"></script>
 <script type="text/javascript">
-
-
+  /**
+   *Initializes list.js
+   **/
+  var listOptions = {
+    valueNames: ['award_status', 'place_of_performance_state', 'naics', 'award_amount', 'estimated_fiscal_year_quarter']
+  };
+  var opportunitiesList = new List('opportunities', listOptions)
+  var data = {}
+
+  /**
+   *Initializes the More/Fewer Filters
+   **/
+  $("#award_amount-dropdown").parent().toggle();
+  $("#estimated_fiscal_year_quarter-dropdown").parent().toggle();
+  $("#more-filters").on('click', function(e){
+    $("#more-filters").text("Fewer Filters");
+    $("#award_amount-dropdown").parent().toggle();
+    $("#estimated_fiscal_year_quarter-dropdown").parent().toggle();
+  });
+
+  /**
+   * Load the Data into the Filters
+   **/
+  _.each(listOptions.valueNames, function (name) {
+
+    // Create an array for each filterable element
+    data[name] = [];
+    $('.'+name).each( function (index) {
+      data[name].push($(this).text());
+    })
+
+    // Find unique values and add them as options in dropdowns
+    var opt = _.uniq(data[name]);
+    $.each(opt, function(key, value) {
+      $('#' + name + '-dropdown')
+        .append($("<option></option>")
+        .attr("value",value)
+        .text(value));
+    });
+
+    // Add the filtering action to each dropdown
+    var dropdown = "#" + name + "-dropdown";
+    $(dropdown).change(function (){
+      opportunitiesList.filter(function(item) {
+        var value = $(dropdown).val();
+        if (value === "all") {
+          return true;
+        }
+        else {
+          return (item.values()[name] === value ? true : false);
+        }
+      })
+    })
+  })
 </script>
-<!-- <script src="{% static 'assets/js/main.js' %}"></script> -->
 
 {% endblock %}