STL MM Search Demo

index.html

<center>
  <h1>Movement Match</h1></center>

<!-- Wrapping Form and Progres Bar in Continer TOP -->
<div class="container">

  <!-- Progress Bar -->
  <div class="progress">
    <div id="progcomplete" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%">Filtered

    </div>
    <div id="progremain" class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:100%">
      Remaining
    </div>
  </div>
  <!-- /End of Progress Bar -->

  <!-- Form Start  -->
  <form class="form form-horizontal">


    <!-- Limited Multiple Select -->
    <div class="form-group">
      <label class="control-label col-sm-2" for="location">Location:</label>
      <select id="locationSelect" class="question selectpicker">
  <option>New York</option>
  <option>St Louis</option>
  
</select>
    </div>
    <!-- /Limited Multiple Select -->


    <!-- Limited Multiple Select -->
    <div class="form-group">
      <label class="control-label col-sm-2" for="flower">Flowers:</label>
      <select id="flowerSelect" class="selectpicker" multiple data-max-options="2" multiple>
  <option>Rose</option>
  <option>Violet</option>
  <option>Lilly</option>
</select>
    </div>
    <!-- /Limited Multiple Select -->


    <button id="toggle" type="submit" class="btn btn-default">Just Show Me</button>


  </form>
  <!-- /End of Form  -->
</div>
<!-- /Container TOP -->

<hr/>

<!-- Results -->
<div id="results" class="container hidden">
  <h2>Your Match</h2>
  <p>We believe that these organizations are the best match for your interests.</p>
  <table data-toggle="table" id="table_results" class="table">
    <thead>
      <tr>
        <th data-field="rank">Rank</th>
        <th data-field="organization">Organization</th>
        <th data-field="location">Location</th>
        <th data-field="url">Website</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Walk a Dog</td>
        <td>St Louis</td>
        <td>http://walkadog.gov</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Not the NSA</td>
        <td>New York</td>
        <td>http://nsa.gov</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Meals on Wheels</td>
        <td>Everywhere</td>
        <td>http://mealsonwheels.com</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /Results Table -->

script.js

// MM Configuration Object
// http://javascript.crockford.com/code.html
var config = {
  debug: true,
  thresh: 4
};

var logger = function(e) {
  if (config.debug && console.log) {
    console.log(e);
  }
};

var organizations = {
  data: [
    {
      rank: 0,
      organization: "Org0 loves Lillies",
      location: "St Louis",
      flower: "Lilly",
      url: "http://localhost"
    },
    {
      rank: 1,
      organization: "Org1 loves Roses",
      location: "New York",
      flower: "Rose",
      url: "http://localhost1"
    },
    {
      rank: 2,
      organization: "Org2 loves Lillies",
      location: "St Louis",
      flower: "Lilly",
      url: "http://localhost"
    },
    {
      rank: 3,
      organization: "Org3 loves Lillies",
      location: "New York",
      flower: "Lilly",
      url: "http://localhost"
    },
    {
      rank: 4,
      organization: "Org4 loves Violets",
      location: "St Louis",
      flower: "Violet",
      url: "http://localhost"
    },
    {
      rank: 5,
      organization: "Org5 loves Lillies",
      location: "St Louis",
      flower: "Lilly",
      url: "http://localhost"
    },
    {
      rank: 6,
      organization: "Org6 loves Violets",
      location: "New York",
      flower: "Violet",
      url: "http://localhost1"
    },
    {
      rank: 7,
      organization: "Org7 loves Violets",
      location: "St Louis",
      flower: "Violet",
      url: "http://localhost"
    },
    {
      rank: 8,
      organization: "Org8 loves Roses",
      location: "New York",
      flower: "Rose",
      url: "http://localhost"
    },
    {
      rank: 9,
      organization: "Org9 loves Lillies",
      location: "St Louis",
      flower: "Lilly",
      url: "http://localhost"
    }
  ]
}; // JSON representation of the orgs

var mm = {
  resultsVisible: false,
  complete: 0,
  amihere: function() {
    logger("amihere was called");
  },
  toggle: function() {
    mm.resultsVisible = ! mm.resultsVisible;
  },
  displayResults: function() {
        if (mm.resultsVisible) {
              $("#table_results").bootstrapTable(
      "load",
      organizations.data.filter(mm.filterResults)
    );
      $("#results").removeClass("hidden").addClass("visible");
    } else {
      $("#results").removeClass("visible").addClass("hidden");
    }
  },
  filterResults: function(x) {
    // Location is an example of a single selection
    var location_filter = x.location == $("#locationSelect").val();
    // Flowers is an example of a multiple selection.  Returns an array
    var selected_flowers = $("#flowerSelect").val();
    // If nothing is selected, assume ALL
    var flower_filter =
      selected_flowers.length === 0 || selected_flowers.includes(x.flower);
    mm.amihere();

    return location_filter && flower_filter;
  },
  updateProgress: function() {
    var selected = organizations.data.filter(mm.filterResults).length;
    var total = organizations.data.length;
    if (selected <=config.thresh && selected !== 0) { mm.resultsVisible = true; mm.displayResults();} else { mm.resultsVisible = false; mm.displayResults();}
    

    mm.complete = Math.floor(100 * ((total - selected) / total));

    logger(
      "Evaluate Filter selected, total, complete = [" +
        selected +
        "," +
        total +
        "," +
        mm.complete +
        "]"
    );
    $("#progcomplete")
      .css("width", mm.complete + "%")
      .attr("aria-valuenow", mm.complete);
    $("#progremain")
      .css("width", 100 - mm.complete + "%")
      .attr("aria-valuenow", 100 - mm.complete);

    
  }
};

$(function() {
  // Bind a show all function to the 'Just Show Me' button
  $("#toggle").click(function(e) {
    $("#table_results").bootstrapTable(
      "load",
      organizations.data.filter(mm.filterResults)
    );
    e.preventDefault(); // prevent the default anchor functionality
    mm.toggle();
    mm.displayResults();
  }); // end Show Me function binding
  
  // Update the progress bar on page load
  mm.updateProgress();
  // Change this to selectpicker and we break the UI
  // Any change in the UI and we update the progress bar
  $(".selectpicker").change(function(e) {
    //e.preventDefault(); // prevent the default anchor functionality
    //e.default();

    mm.updateProgress();
  });
}); // onReady

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>

stl-mm-search-demo.markdown

STL MM Search Demo

Mockup page for question/result selection for Movement Match - Development Page

A Pen by Kurt Schwind on CodePen.

License.

style.css

/*
Nothing to see here from a CSS perspective.

Developer Guidelines and assumptions
- Tech Stack agnostic
- - Assuming an ajax call to get the organizations data in JSON
- - Using bootstrap "Twitter API" for UI look/feel
- - Minimal js library (jquery only)
- Can be served up from any static web server
- Uses only HTML and Javascript
- Minimal Viable Product defined as
- - Dynamic table
- - Single selection drop down
- - Multiple selection drop down
- - config object
*/

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://blackrockdigital.github.io/startbootstrap-landing-page/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.css" rel="stylesheet" />