Dynamic: Order Page (HinH)

Order page for HinH

by Alex Cowan

HTML

<script src="https://spreadsheets.google.com/feeds/cells/1hGC-C4dtXXi6hB3BuV0HLerSfZZ7NQDC8oR_Tm6khbs/1/public/values?alt=json-in-script&callback=doData"></script>

<div class="top-bar">
  <ul class="nav-list">
    <li><a href="#" id="home">Home</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="item-list">
</div>
<div id="delivery">
  <h3> Deliver To: Springfield Depot</h3>
</div>
<div id="order-summary">
  <h3> Total: <span id="total">$0.00</span></h3>
  <button type="button" id='final-order'>Finalize Order</button>
</div>

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;
}

#toggle-search {
  position: relative;
  padding: 5px 0px;
  height: 100%;
  width: 100%;
}

#toggle-search img {
  margin-left: 94%;
}

#search-controls {
  background-color: #ffffff;
  padding: 5px 15px 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: 0.5s ease;
  background-color: #f4f4f4;
  display: inline-table;
}

.catalog-part:hover .overlay {
  opacity: 0.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;
}

#part-info {
  margin: 15px;
  padding: 0px 5px;
}

#part-info...

JavaScript

//To test: http://fiddle.jshell.net/acowan/skh9v1nj/show/?pn=BR2048 for URL arg to pass, etc.

//note: doesn't  curently handle duplicates/q>1 

const homeURL = 'https://fiddle.jshell.net/acowan/2bux8zcL/show?';
const partDetailURL = 'https://fiddle.jshell.net/acowan/vom68xwp/show?';
const checkoutURL = 'https://fiddle.jshell.net/acowan/skh9v1nj/show?';

var spData = null;

//This just creates a variable that's prepared for a JSON feed. What's JSON? See: https://en.wikipedia.org/wiki/JSON
function doData(json) {
  spData = json.feed.entry;
}


$(document).ready(function() {
  var pnArgs = getQueryArgs();
  console.log(pnArgs);
  var orderItems = getPNs(pnArgs);
  console.log(orderItems);
  var orderVal = 0;

  readData($("#item-list"));

  function readData($partsDetail) {
    //these statements initialize the variables below, meaning that it puts them in the baseline state we want before we start doing stuff with them
    const startCol = 2;
    const endCol = 11;
    const partNumCol = 2;
    const marginRow = 0;
    const headerRow = 1;

    var data = spData;
    var divData = [];
    var row = 0;

    for (var i = 0; i < data.length; i++) {
      var cell = data[i]["gs$cell"];
      //console.log(cell);
      var val = cell["$t"];
      //console.log(val);
      var partPrice = 0;

      //if we find the part (note: doesn't handle for duplicates)....    
      if ((cell.col == partNumCol) && (orderItems.indexOf(val) !== -1)) {
        console.log("I've got something, and it's " + val);
        //console.log(cell.row);
        targetRow = cell.row;
        console.log("my row is " + targetRow);
        j = i;
        console.log("j is " + j)
        divData = [];
        while ((cell.row == targetRow) && (j % 10 != 9)) {
          console.log("j started as " + j);
          var cell = data[j]["gs$cell"];
          var val = cell["$t"];
          console.log("while loop on " + targetRow + "and value " + val);
          divData.push(val);
          j++;
       ...