index.html

---
layout: default
title: MongoDB Tools - Admin GUIs, Monitoring and Other Good Stuff
---

{% include header.html homenav = "true" %}

<div class="main outer">
  <div id="Grid" class="inner">
  {% for t in site.tools %}
  <div class="mix tool {{ t.purpose | handle }} {{ t.language | languageHandle }} {{ t.license | handle }} {{ t.support | handle }} {{ t.environments | join: ' ' }} {{ t.mongodb_versions | join: ' ' | replace: '.', '_' }} {{ t.mongodb_enterprise_support | handle }} {{ t.maintained | maintenanceHandle }}">
    <div class="tile">
      {% if t.img %}
      <div class="tool-image">
        <img src="/img/{{ t.img }}">
      </div>
      {% else %}
      <div class="tool-image no-image">
        <i class="fa fa-cogs"></i>
      </div>      
      {% endif %}
      <div class="summary">
        <h4>{{ t.name }}</h4>
        <p>{{ t.maintained }}</p>
        <ul class="unstyled platforms">
          {% for env in t.environments %}
          <li><i class="fa fa-{{ env }}"></i></li>
          {% endfor %}
        </ul>
      </div>
      <div class="description">
        <h3>{{ t.name }}</h3>
        <p>{{ t.description }}</p>
        <a href="{{ t.url }}">More Info <i class="fa fa-chevron-right"></i></a>
      </div>
    </div>
  </div>
  {% endfor %}
  <div class="clearboth"></div>
  </div>
</div><!-- /row -->


<script>  
$('.tool-container').hover(
  function () {
    $(this).children("div.tool-details").fadeTo(1,1);
  }, 
  function () {
    $(this).children("div.tool-details").fadeTo(1,0);
    $(this).children("h1").show();
  }
);
</script>

<script>
$(document).ready(function(){
  var checkboxActivate = {
    // The "init" method will run on document ready and cache any jQuery objects we will need.
    init: function(){
      $('.controls').find('li').on('click',function(){
        var $t = $(this), filter = $t.attr('data-filter')

        if(filter == 'all'){
          // If "all"
          if(!$t.hasClass('active')){
            // if unchecked, check "all" and uncheck all other active filters
            $t.addClass('active').siblings().removeClass('active');
          }
        } else {
          _gaq.push(['_trackEvent', 'clickEvent', 'click', filter]);
          // Else, uncheck "all"
          $t.siblings('[data-filter="all"]').removeClass('active');
          if(!$t.hasClass('active')){
            // Check checkbox
            $t.addClass('active');
          } else {
            // Uncheck
            $t.removeClass('active');
            // // Remove filter and preceeding space from string with RegEx
            // var re = new RegExp('(\\s|^)'+filter);
            // filterString = filterString.replace(re,'');
            // if (filterString == '') {
            //   $t.siblings('[data-filter="all"]').addClass('active');
            // }
          };
        }
        if (!$t.siblings().andSelf().hasClass('active')) {
          $t.siblings('[data-filter="all"]').addClass('active');
        }
      });
    }
  }

  var checkboxFilter = {
    // Declare any variables we will need as properties of the object 
    $filters: null,
    $reset: null,
    groups: [],
    outputArray: [],
    outputString: '',
    
    // The "init" method will run on document ready and cache any jQuery objects we will need.
    init: function(){
      var self = this; // As a best practice, in each method we will asign "this" to the variable "self" so that it remains scope-agnostic. We will use it to refer to the parent "checkboxFilter" object so that we can share methods and properties between all parts of the object.
      
      self.$filters = $('nav.controls');
      self.$container = $('#Grid');
      
      self.$filters.find('div.drop_down').each(function(){
        self.groups.push({
          $inputs: $(this).find('li'),
          active: [],
          tracker: false
        });
      });
      
      self.bindHandlers();
    },
    
    // The "bindHandlers" method will listen for whenever a form value changes. 
    bindHandlers: function(){
      var self = this;
      
      self.$filters.on('click', function(){
        self.parseFilters();
      });
    },

    // The parseFilters method checks which filters are active in each group:
    parseFilters: function(){
      var self = this;
   
      // loop through each filter group and add active filters to arrays
      for(var i = 0, group; group = self.groups[i]; i++){
        group.active = []; // reset arrays
        group.$inputs.each(function(){ 
          $(this).hasClass('active') && group.active.push($(this).attr('data-filter'));
        });
        group.active.length && (group.tracker = 0);
      }
      
      self.concatenate();
    },
    
    // The "concatenate" method will crawl through each group, concatenating filters as desired:
    concatenate: function(){
      var self = this,
        cache = '',
        crawled = false,
        checkTrackers = function(){
          var done = 0;
          
          for(var i = 0, group; group = self.groups[i]; i++){
            (group.tracker === false) && done++;
          }

          return (done < self.groups.length);
        },
        crawl = function(){
          for(var i = 0, group; group = self.groups[i]; i++){
            if (group.active[group.tracker] != "all") {
              group.active[group.tracker] && (cache += group.active[group.tracker]);
            }

            if(i === self.groups.length - 1){
              self.outputArray.push(cache);
              cache = '';
              updateTrackers();
            }
          }
        },
        updateTrackers = function(){
          for(var i = self.groups.length - 1; i > -1; i--){
            var group = self.groups[i];

            if(group.active[group.tracker + 1]){
              group.tracker++; 
              break;
            } else if(i > 0){
              group.tracker && (group.tracker = 0);
            } else {
              crawled = true;
            }
          }
        };
      
      self.outputArray = []; // reset output array

      do{
        crawl();
      }
      while(!crawled && checkTrackers());

      self.outputString = self.outputArray.join();
      
      // If the output string is empty, show all rather than none:
      !self.outputString.length && (self.outputString = 'all'); 

      // we can check the console here to take a look at the filter string that is produced      
      console.log(self.outputString);
      
      // Send the output string to MixItUp via the 'filter' method:
      if(self.$container.mixItUp('isLoaded')){
        self.$container.mixItUp('filter', self.outputString);
      }
    }
  };

  checkboxActivate.init();
  checkboxFilter.init();

  $('#Grid').mixItUp({
    controls: {
      enable: false
    },
    load: {
      sort: 'random',
      filter: '.maint_active'
    }
  });
});
</script>