index.html

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

<header>
  <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header navbar-left" id="navbar-title">
        <h1><a class="navbar-brand navbar-text" href="">MongoDB Tools</a></h2>
        <i class="navbar-text">a guide to some interesting tools for working with mongodb</i>
    </div>
    <button href="#submit-modal" type="button" class="btn btn-default navbar-btn navbar-right" data-toggle="modal" data-target="#submit-modal" role="button"><span class="glyphicon glyphicon-plus"></span></button>
    <div id="submit-modal" class="modal fade" style="display: none;" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">Have a tool to submit?</h4>
          </div>
          <div class="modal-body">
            <p>MongoDB Tools is open source!</p>
            <p>If you've written a tool (or just know of a really good one) please submit a pull request with a new markdown file containing all of the data needed.</p>
            <p>Seen some data that's out of date?  Do the same!</p>
            <p>You can find the repo here: <a href="http://github.com/IanWhalen/mongodb-tools.com">github.com/IanWhalen/mongodb-tools.com</a></p>
          </div>
        </div>
      </div>
    </div>
  </nav>

  <nav class="controls just">
    {% for attr in site.data.attr %}
     <div class="control drop_down wf">
      <span class="anim150">{{ attr.name }}</span>
       <ul class="anim250">
        <li class="active" data-filter="all">All</li>
        {% for i in attr.values %}
        <li data-filter=".{{ i | languageHandle }}">{{ i }}</li>
        {% endfor %}
       </ul>
     </div>
    {% endfor %}
    <div class="control drop_down wf">
      <span class="anim150">Platforms</span>
      <ul class="anim250">
        <li class="active" data-filter="all">All</li>
        <li data-filter=".linux">Linux</li>
        <li data-filter=".windows">Windows</li>
        <li data-filter=".apple">OS X</li>
      </ul>
    </div>
<!--     <div class="control drop_down wf">
      <span class="anim150">Support</span>
      <ul class="anim250">
        <li class="active" data-filter="all" data-dimension="support">All</li>
        <li data-filter="supported" data-dimension="support">MongoDB, Inc. Supported</li>
        <li data-filter="unsupported" data-dimension="support">Not MongoDB, Inc. Supported</li>
      </ul>
    </div> -->
  </nav>
</header>

<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 ' ' }}">
    <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="/tool/{{ t.slug }}">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'
    }
  });
});
</script>