Automating Your Gruntwork with Javascript- Part 2 (Integration)

This supports a software dev. class for businesspeople that you can find here: https://www.alexandercowan.com/making-html-manageable And a case you can find here: https://www.alexandercowan.com/making-html-manageable

by Alex Cowan

HTML

<div class="top-bar">
  <ul class="nav-list">
    <li><a href="#">Home</a></li>
    <li><a href="#">Parts</a></li>
    <li><a href="#">Search</a></li>
    <li><a href="#">Help</a></li>
  </ul>

  <div id="search-box">
    <input type="text" name="parts-search" placeholder="Mfg., Model, or Part Number" size=30>
  </div>
</div>

<div id="search-controls">
  <div id="result-sort">
    Sort By
    <select>
					<option value="None">Popularity</option>
					<option value="Acme">Price</option>
					<option value="Bacme">Manufacturer</option>
				</select>
  </div>
  <div id="filter-parts">
    Search By
    <select id="dd-mfr">
				<option value="All">Manufacturer</option>
				<option value="Acme">Acme</option>
				<option value="Bacme">Bacme</option>
				<option value="Cacme">Cacme</option>
				<option value="Dacme">Dacme</option>
			</select>
    <select id="dd-model">
				<option value="All">Model</option>
				<option value="TooCool">TooCool</option>
				<option value="TooHot">TooHot</option>
				<option value="JustRight">JustRight</option>
				<option value="Coolerator">Coolerator</option>
			</select>
    <select>
				<option value="All">Type</option>
				<option value="Sniggler">Sniggler</option>
				<option value="Wiggler">Wiggler</option>
				<option value="Jiggler">Jiggler</option>
				<option value="Tiggler">Tiggler</option>
			</select>
  </div>
  <button type="button" id='search-btn'>Go</button>
</div>

<div id="parts-content" />

CSS

.top-bar,
#search-box,
.nav-list li,
.nav-list a {
  background-color: #002D45;
  font-family: Proxima Nova, helvetica neue, helvetica, sans-serif;
  font-weight: bold;
  font-size: 110%;
  color: #ffffff;
}

.top-bar {
  color: #FFFFFF;
  height: 40px;
  margin: 0px;
  padding: 10px;
  display: flex;
  align-items: center;
}

.nav-list {
  list-style-type: none;
  padding: 0;
  display: inline;
}

.nav-list li {
  float: left;
}

.nav-list a {
  display: inline;
  padding: 8px;
  text-decoration: none;
}

#search-box {
  margin-left: auto;
  margin-right: 0;
  padding: 10px;
}

#search-controls {
  background-color: #ffffff;
  padding: 15px 15px;
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  font-size: 70%;
  display: flex;
  align-items: center;
}

#filter-parts {
  float: right;
  margin-left: auto;
  margin-right: 0;
  padding-right: 5px;
}

.catalog-part {
  margin: 2px;
  padding: 0px 5px;
  float: left;
  border-style: solid;
  border-color: #808285;
  border-width: 1px;
  width: 150px;
  height: 200px;
  line-height: 200px;
  display: table-cell;
  position: relative;
}

.catalog-part img {
  height: auto;
  vertical-align: middle;
  width: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #f4f4f4;
  display: inline-table;
}

.catalog-part:hover .overlay {
  opacity: .75;
}

p {
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
  line-height: 1;
  overflow: scroll;
}

.catalog-part p {
  vertical-align: middle;
  text-align: center;
  color: black;
  display: table-cell;
  vertical-align: middle;
  font-size: 80%;
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}

JavaScript

$(document).ready(function() {


  //Code to Deal with Parts Search
  $("#search-btn").on("click", function() {
    //On new search, start w/ all parts to start
    $('.catalog-part').show();

    //Code to filter by Manufacturer
    var selmfr = $('#dd-mfr').find(':selected').val(); //JQuery event for drop-down
    console.log("selected mfr " + selmfr); //just for testing

    if (selmfr != "All") {
      $('.catalog-part').each(function() { //.each lets you do something to all items in the selected class
        if ($(this).attr('mfr') != selmfr) {
          $(this).hide();
        } //inner if statement ends here
      });
    } //outer if statement ends here

    //Very similar code to filter by Model
    var selmodel = $('#dd-model').find(':selected').val();
    console.log("selected model " + selmodel);
    if (selmodel != "All") {
      $('.catalog-part').each(function() {
        if ($(this).attr('model') != selmodel) {
          $(this).hide();
        }
      });
    }

  });

});


//This is the URL of the Google sheet with a 'callback function' with a response we'll pare down to JSON. What's JSON? See: https://en.wikipedia.org/wiki/JSON
//If you want to see the URL of the sheet itself, copy this into your browser: https://docs.google.com/spreadsheets/d/1DA6htKy-Z-8QRkifkLbzlzG2r5YWOKE77JXEJNmq45g/. 

sheetIndex = 0;
sheetsFileID = '1DA6htKy-Z-8QRkifkLbzlzG2r5YWOKE77JXEJNmq45g';

var SHEETSRESPONSE = `https://docs.google.com/spreadsheets/d/${sheetsFileID}/gviz/tq?tqx=out:json&tq&gid=${sheetIndex}`

//This waits until the baseline page is loaded and then gets the JSON feed, and as long as it doesn't error, calls the readdata function to start taking that feed and drawing the HVAC parts. The way it does this is through 'AJAX', which stands for 'Asynchronous JavaScript And XML'. This allows you to go and get data from a server/service (like Google Sheets) after the page has loaded. 

/*This is probably your first time seeing options/settings supplied to a...