TEST: Automating Your Gruntwork with Javascript- Part 1 (Get Parts)

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 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;
  margin: 0;
  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;
}

#result-sort {
  display: inline;
  float: left;
}

#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%;
  /*  display: block; */
}

.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

//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 JS function with key:value pairs. The syntax for the function is: 
$.ajax({name:value, name:value, ... })
In the example below, 'url' and 'success' are both options. The value for the option is the item that comes after the colon (:), the URL or call back function we want to execute in the case of success.
*/

//For more on AJAX, see: https://www.w3schools.com/xml/ajax_intro.asp
//For more on the JQuery function that does this for us, see: https://www.w3schools.com/jquery/ajax_ajax.asp

$(document).ready(function() {
  $.ajax({
    url: SHEETSRESPONSE,
    success: function(data) {
      partfeed = prepData(data);
      //console.log(partfeed.table.rows[0].c[1].v);
      loadParts(partfeed);
    }
  });
});

function prepData(data) {
  //response has a junk line at top (/*O_o*/), so we split it on the newline character and get the second row, [1]
  data = data.split("\n");
  //this is a kind of hacky solution to extracting the JSON body from the sheets response, using a regular expression to...