Difference between revisions of "Widget:RAPIDFilter"

From Open Energy Information

(update clear all function)
(adding hydro project types)
Line 12: Line 12:
 
     <span style="font-weight:bold;font-size:1.1em;">Filter by Technology<hr/></span>
 
     <span style="font-weight:bold;font-size:1.1em;">Filter by Technology<hr/></span>
 
<div id="tech-alert" class="hidden alert alert-danger">Please select at least one<br>technology filter</div>
 
<div id="tech-alert" class="hidden alert alert-danger">Please select at least one<br>technology filter</div>
<span style="font-style:italic;font-size:smaller;color:#555;"><b><span id="tech-count"></span></b> <span id="tech-label"></span> selected<a id="all-tech" class="filterReset hidden"  href="javascript:void(0);">show all</a></span>
+
<span style="font-style:italic;font-size:smaller;color:#555;">showing <b><span id="tech-count"></span></b> <span id="tech-label"></span><a id="all-tech" class="filterReset hidden"  href="javascript:void(0);">show all</a></span>
 
       <div class="" id="technologies">
 
       <div class="" id="technologies">
             <ul id="tech-list" style="list-style:none;padding:5px;margin-left:0;">
+
             <ul id="tech-list" style="padding:5px;margin-left:0;">
 
             <li><input id="tech1" class="tech-filter" type="checkbox" value="Geothermal" checked/><label for="tech1">Geothermal</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
 
             <li><input id="tech1" class="tech-filter" type="checkbox" value="Geothermal" checked/><label for="tech1">Geothermal</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
 
             <li><input id="tech2" class="tech-filter" type="checkbox" value="Solar" checked/><label for="tech2">Solar</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
 
             <li><input id="tech2" class="tech-filter" type="checkbox" value="Solar" checked/><label for="tech2">Solar</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
             <li><input id="tech3" class="tech-filter" type="checkbox" value="Hydropower" checked/><label for="tech3">Hydropower</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
+
             <li class="group-start"><input id="tech3" class="tech-filter" type="checkbox" value="Hydropower" checked/><label for="tech3">Hydropower</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
 +
            <div class="group">
 +
              <p id="hydro-type-toggle" style="margin-left:20px; font-size:x-small; color:#337AB7; cursor:pointer;">narrow by hydropower project type <i class="fa fa-chevron-down"></i></p>
 +
              <div class="hydro-group hidden" style="margin-left:20px;">
 +
                <li><input id="hydro1" class="hydro-filter" type="checkbox" value="conduit"/><label for="hydro1">conduit</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
 +
                <li><input id="hydro2" class="hydro-filter" type="checkbox" value="conventional"/><label for="hydro2">conventional</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
 +
                <li><input id="hydro3" class="hydro-filter" type="checkbox" value="non-powered dam"/><label for="hydro3">non-powered dam</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
 +
                <li><input id="hydro4" class="hydro-filter" type="checkbox" value="pumped storage"/><label for="hydro4">pumped storage</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
 +
              </div>
 +
            </div>
 +
            <div class="group group-end"></div>
 
             <li><input id="tech4" class="tech-filter" type="checkbox" value="Transmission" checked/><label for="tech4">Transmission</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
 
             <li><input id="tech4" class="tech-filter" type="checkbox" value="Transmission" checked/><label for="tech4">Transmission</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
 
             </ul>
 
             </ul>
Line 96: Line 106:
 
<div id="topic-section" style="margin-top:2em;">
 
<div id="topic-section" style="margin-top:2em;">
 
     <span style="font-weight:bold;font-size:1.1em;">View by Topic<hr /></span>
 
     <span style="font-weight:bold;font-size:1.1em;">View by Topic<hr /></span>
<div id="topic-alert" class="hidden alert alert-danger">Please select at least one topic</div>
+
    <div id="topic-alert" class="hidden alert alert-danger">Please select at least one topic</div>
<span style="font-style:italic;font-size:smaller;color:#555;"><b><span id="topic-count"></span></b> <span id="topic-label"></span> selected<a id="all-topics" class="filterReset hidden"  href="javascript:void(0);">show all</a></span>
+
    <span style="font-style:italic;font-size:smaller;color:#555;"><b><span id="topic-count"></span></b> <span id="topic-label"></span> selected<a id="all-topics" class="filterReset hidden"  href="javascript:void(0);">show all</a></span>
 
       <div class="" id="topics">
 
       <div class="" id="topics">
 
             <ul id="topic-list" style="list-style:none;padding:5px;margin-left:0;">
 
             <ul id="topic-list" style="list-style:none;padding:5px;margin-left:0;">
Line 108: Line 118:
 
             <li><input id="topic7" class="topic-filter" type="checkbox" value="7" data-tech="Geothermal, Hydropower, Solar" style="float:left;" checked/><label for="topic7" style="width:75%;display:inline-block;">Power Plant Siting <span style="padding:0 5px; color: #aaa; font-size: xx-small;">- or -</span><br/>Facility Siting</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
 
             <li><input id="topic7" class="topic-filter" type="checkbox" value="7" data-tech="Geothermal, Hydropower, Solar" style="float:left;" checked/><label for="topic7" style="width:75%;display:inline-block;">Power Plant Siting <span style="padding:0 5px; color: #aaa; font-size: xx-small;">- or -</span><br/>Facility Siting</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
 
             <li><input id="topic8" class="topic-filter" type="checkbox" value="8" data-tech="Transmission, Geothermal, Hydropower, Solar" style="float:left;" checked/><label for="topic8" style="width:75%;display:inline-block;">Transmission Siting & Interconnection <span style="padding:0 5px; color: #aaa; font-size: xx-small;">- or -</span><br/>Siting & Regulation</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
 
             <li><input id="topic8" class="topic-filter" type="checkbox" value="8" data-tech="Transmission, Geothermal, Hydropower, Solar" style="float:left;" checked/><label for="topic8" style="width:75%;display:inline-block;">Transmission Siting & Interconnection <span style="padding:0 5px; color: #aaa; font-size: xx-small;">- or -</span><br/>Siting & Regulation</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
             <li id="env-top"><input id="topic9" class="topic-filter" type="checkbox" value="9" data-tech="Transmission, Geothermal, Hydropower, Solar" checked/><label for="topic9">Environmental Review</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
+
             <li class="group-start"><input id="topic9" class="topic-filter" type="checkbox" value="9" data-tech="Transmission, Geothermal, Hydropower, Solar" checked/><label for="topic9">Environmental Review</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
             <li class="env"><input id="topic10" class="topic-filter" type="checkbox" value="10" data-tech="Transmission, Geothermal, Hydropower, Solar" checked/><label for="topic10">On Site Evaluation</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
+
             <li class="group"><input id="topic10" class="topic-filter" type="checkbox" value="10" data-tech="Transmission, Geothermal, Hydropower, Solar" checked/><label for="topic10">On Site Evaluation</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
             <li class="env"><input id="topic11" class="topic-filter" type="checkbox" value="11" data-tech="Transmission, Geothermal, Hydropower, Solar" checked/><label for="topic11">Cultural Resources</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
+
             <li class="group"><input id="topic11" class="topic-filter" type="checkbox" value="11" data-tech="Transmission, Geothermal, Hydropower, Solar" checked/><label for="topic11">Cultural Resources</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
             <li class="env"><input id="topic12" class="topic-filter" type="checkbox" value="12" data-tech="Transmission, Geothermal, Hydropower, Solar" checked/><label for="topic12">Biological Resources</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
+
             <li class="group"><input id="topic12" class="topic-filter" type="checkbox" value="12" data-tech="Transmission, Geothermal, Hydropower, Solar" checked/><label for="topic12">Biological Resources</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
             <li class="env"><input id="topic13" class="topic-filter" type="checkbox" value="13" data-tech="Transmission, Geothermal, Hydropower, Solar" style="float:left;" checked/><label for="topic13" style="width:75%;display:inline-block;">Pre-existing Land Use Assessment</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
+
             <li class="group"><input id="topic13" class="topic-filter" type="checkbox" value="13" data-tech="Transmission, Geothermal, Hydropower, Solar" style="float:left;" checked/><label for="topic13" style="width:75%;display:inline-block;">Pre-existing Land Use Assessment</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
             <li class="env"><input id="topic14" class="topic-filter" type="checkbox" value="14" data-tech="Transmission, Geothermal, Hydropower, Solar" checked/><label for="topic14">Water Quality</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
+
             <li class="group"><input id="topic14" class="topic-filter" type="checkbox" value="14" data-tech="Transmission, Geothermal, Hydropower, Solar" checked/><label for="topic14">Water Quality</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
             <li class="env"><input id="topic15" class="topic-filter" type="checkbox" value="15" data-tech="Transmission, Geothermal, Hydropower, Solar" checked/><label for="topic15">Air Quality</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
+
             <li class="group"><input id="topic15" class="topic-filter" type="checkbox" value="15" data-tech="Transmission, Geothermal, Hydropower, Solar" checked/><label for="topic15">Air Quality</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
             <li class="env"><input id="topic16" class="topic-filter" type="checkbox" value="16" data-tech="Transmission, Geothermal, Hydropower, Solar" checked/><label for="topic16">Geologic Resources</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
+
             <li class="group"><input id="topic16" class="topic-filter" type="checkbox" value="16" data-tech="Transmission, Geothermal, Hydropower, Solar" checked/><label for="topic16">Geologic Resources</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
             <li class="env"><input id="topic17" class="topic-filter" type="checkbox" value="17" data-tech="Transmission, Geothermal, Hydropower, Solar" checked/><label for="topic17">Aesthetic Resources</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
+
             <li class="group"><input id="topic17" class="topic-filter" type="checkbox" value="17" data-tech="Transmission, Geothermal, Hydropower, Solar" checked/><label for="topic17">Aesthetic Resources</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
             <li class="env" id="env-bot"><input id="topic18" class="topic-filter" type="checkbox" value="18" data-tech="Transmission, Geothermal, Hydropower, Solar" checked/><label for="topic18">Waste & Hazardous Material</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
+
             <li class="group group-end"><input id="topic18" class="topic-filter" type="checkbox" value="18" data-tech="Transmission, Geothermal, Hydropower, Solar" checked/><label for="topic18">Waste & Hazardous Material</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
 
             <li><input id="topic19" class="topic-filter" type="checkbox" value="19" data-tech="Transmission, Geothermal, Hydropower, Solar" checked/><label for="topic19">Water Access & Water Rights</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
 
             <li><input id="topic19" class="topic-filter" type="checkbox" value="19" data-tech="Transmission, Geothermal, Hydropower, Solar" checked/><label for="topic19">Water Access & Water Rights</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
 
             <li><input id="topic20" class="topic-filter" type="checkbox" value="20" data-tech="Geothermal, Hydropower, Solar" style="float:left;" checked/><label for="topic20" style="width:75%;display:inline-block;">Facility Decommissioning <span style="padding:0 5px; color: #aaa; font-size: xx-small;">- or -</span><br/>License Surrender</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
 
             <li><input id="topic20" class="topic-filter" type="checkbox" value="20" data-tech="Geothermal, Hydropower, Solar" style="float:left;" checked/><label for="topic20" style="width:75%;display:inline-block;">Facility Decommissioning <span style="padding:0 5px; color: #aaa; font-size: xx-small;">- or -</span><br/>License Surrender</label><a href="javascript:void(0);" class="filterOptionOnly">only</a></li>
Line 173: Line 183:
 
       $('.tech-filter:checked').each(function(){
 
       $('.tech-filter:checked').each(function(){
 
         techValues.push(this.value);
 
         techValues.push(this.value);
 +
      });
 +
 +
      hydroProjectTypeValues = [];
 +
      $('.hydro-filter:checked').each(function(){
 +
        hydroProjectTypeValues.push(this.value);
 
       });
 
       });
  
Line 185: Line 200:
 
         if($('#RRFilter .tech-filter').is(':checked')){
 
         if($('#RRFilter .tech-filter').is(':checked')){
 
           techCategory = $(this).data('tech').split(' ');
 
           techCategory = $(this).data('tech').split(' ');
 +
        }
 +
 +
        if($('#RRFilter .hydro-filter').is(':checked')){
 +
          if($(this).data('hydroType')){
 +
            hydroProjectType = $(this).data('hydroType').split(', ');
 +
          }
 
         }
 
         }
  
Line 209: Line 230:
  
 
   function showHideTopicFilters(techValues) {
 
   function showHideTopicFilters(techValues) {
     $('#topic-list .topic-filter').each(function() {
+
     if(techValues.length>0){
      var topicTechs = $(this).data('tech').split(', ');
+
      $('#topic-list .topic-filter').each(function() {
      var showTopic = false;
+
        var topicTechs = $(this).data('tech').split(', ');
      var parentListItem = $(this).parents('li').first();
+
        var showTopic = false;
      for (var i in techValues) {
+
        var parentListItem = $(this).parents('li').first();
        if (in_array(techValues[i], topicTechs)) {
+
        for (var i in techValues) {
          showTopic = true;
+
          if (in_array(techValues[i], topicTechs)) {
 +
            showTopic = true;
 +
          }
 +
        }
 +
        if (showTopic) {
 +
          parentListItem.show();
 +
        } else {
 +
          parentListItem.hide();
 +
          $(this).prop('checked', false);
 
         }
 
         }
       }
+
       });
      if (showTopic) {
+
     }
        parentListItem.show();
 
      } else {
 
        parentListItem.hide();
 
        $(this).prop('checked', false);
 
      }
 
     });
 
  
 
     var topicCount=$('.topic-filter:checked:visible').length;
 
     var topicCount=$('.topic-filter:checked:visible').length;
Line 235: Line 258:
 
   $(document).ready(function(){
 
   $(document).ready(function(){
  
         $('#RRFilter input:checkbox').prop('checked', true);
+
         $('#RRFilter input:checkbox').prop('checked',true);
 +
        $('#RRFilter .hydro-filter').prop('checked',false);
 
         //clear all function
 
         //clear all function
 
         $('#clearAll').click(function(){$('input:checkbox').attr('checked',false);$('.rapid-results').css('display','none');});
 
         $('#clearAll').click(function(){$('input:checkbox').attr('checked',false);$('.rapid-results').css('display','none');});
Line 282: Line 306:
 
         })
 
         })
  
         //Environmental topic/subtopic
+
         //Grouped topic/subtopic
         $('.env').hover(function() {
+
         $('.group').hover(function() {
           $('#env-top').addClass('hover');
+
           $('.group-start').addClass('hover');
           $('.env').addClass('hover');
+
           $('.group').addClass('hover');
           $('#env-bot').addClass('hover');
+
           $('.group-end').addClass('hover');
 
         },function() {
 
         },function() {
           $('#env-top').removeClass('hover');
+
           $('.group-start').removeClass('hover');
           $('.env').removeClass('hover');
+
           $('.group').removeClass('hover');
           $('#env-bot').removeClass('hover');
+
           $('.group-end').removeClass('hover');
 
         });
 
         });
  
Line 381: Line 405:
 
         }).triggerHandler('load');
 
         }).triggerHandler('load');
  
 +
        //hydropower tech types
 +
        $('#hydro-type-toggle').click(function(){
 +
          $('.hydro-group').toggleClass('hidden');
 +
          if($('.hydro-group').is(':visible')){
 +
            $('#hydro-type-toggle .fa').removeClass('fa-chevron-down');
 +
            $('#hydro-type-toggle .fa').addClass('fa-chevron-up');
 +
          }
 +
          if(!$('.hydro-group').is(':visible')){
 +
            $('#hydro-type-toggle .fa').removeClass('fa-chevron-up');
 +
            $('#hydro-type-toggle .fa').addClass('fa-chevron-down');
 +
          }
 +
        });
 +
        $('.tech-filter[value="Hydropower"]').click(function(){
 +
          if(!$(this).is(':checked')){
 +
            $('.hydro-filter').attr('checked',false).attr('disabled', true);
 +
            $('.hydro-group label').addClass('text-muted');
 +
            $('#RRFilter .hydro-group .filterOptionOnly').addClass('hidden');
 +
          }else{
 +
            $('.hydro-filter').attr('disabled',false);
 +
            $('.hydro-group label').removeClass('text-muted');
 +
            $('#RRFilter .hydro-group .filterOptionOnly').removeClass('hidden');
 +
          }
 +
        });
 +
        $('.hydro-filter').click(assessResults);
  
 
         //Topic checkbox actions
 
         //Topic checkbox actions
Line 388: Line 436:
 
         var topicCheck = $('.topic-filter:checkbox').length;
 
         var topicCheck = $('.topic-filter:checkbox').length;
 
         $('#all-topics,.topic-filter,#topic-section .filterOptionOnly').click(function(){
 
         $('#all-topics,.topic-filter,#topic-section .filterOptionOnly').click(function(){
           //show or hide tech filter reset
+
           //show or hide topic filter reset
 
           if($('.topic-filter:checked').length != topicCheck){
 
           if($('.topic-filter:checked').length != topicCheck){
 
             $('#all-topics').removeClass('hidden');
 
             $('#all-topics').removeClass('hidden');
Line 427: Line 475:
  
 
       //Agency radio actions
 
       //Agency radio actions
 
 
       $('.agency-filter').click(assessResults);
 
       $('.agency-filter').click(assessResults);
  
Line 453: Line 500:
 
function shouldBeShown(el){
 
function shouldBeShown(el){
 
   for(i=0;i<techValues.length;i++)
 
   for(i=0;i<techValues.length;i++)
   if (in_array(techValues[i], techCategory) && in_array($(el).data('topic'),showVals) && in_array($(el).data('sectionCode'),showVals) && in_array(agencyValue, resultAgencies)){
+
   if (
 +
    in_array(techValues[i], techCategory) && in_array($(el).data('topic'),showVals) && in_array($(el).data('sectionCode'),showVals) && in_array(agencyValue, resultAgencies)
 +
  ){
 +
    if(hydroProjectTypeValues.length>=1){
 +
      foo = $(el).data('hydroType').split(', ');
 +
      console.log(foo);
 +
      for(h=0;h<foo.length;h++)
 +
        if(in_array(foo[h], showVals)){
 +
          return true;
 +
        }
 +
      return false;
 +
    }
 +
    /*if(hydroProjectTypeValues.length>=1){
 +
      foo = $(el).data('hydroType').split(', ');
 +
      console.log(foo);
 +
      if(in_array(foo, showVals)){
 +
        return true;
 +
      }
 +
      return false;
 +
    }*/
 
     return true;
 
     return true;
 
   }
 
   }

Revision as of 10:16, 19 July 2019

This widget is used to filter regulatory roadmap sections for the RAPID Regulatory Roadmap page.