Final Hinh

by Alex Cowan

HTML

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.5/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.5/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.5/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "AIzaSyCOPgDQ4PAwNtOxZQtkkRpy0LV37VVEzJg",
    authDomain: "hinh-78995.firebaseapp.com",
    projectId: "hinh-78995",
    storageBucket: "hinh-78995.appspot.com",
    messagingSenderId: "389014950808",
    appId: "1:389014950808:web:5599635662f42697b091ed",
    measurementId: "G-XL6BSRZLQE"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();

</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="top-bar">
  <ul class="nav-list">
    <li><a href="#">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 id="auth-control">
    <img src="https://www.alexandercowan.com/wp-content/uploads/2018/04/login-icon.png" alt="auth" style="width:30px;float: left;">
    <ul class="nav-list">
      <li id="login-trigger"><a href="#" id="auth-text">Log In</a></li>
    </ul>

    <div id="login-content">
      <!-- On Forms: -->
      <!-- onsubmit="return false" will stop the form submission but allow us to pick up the submission in JQuery with $('#login-form').submit(), 		otherwise JSFiddle can break. -->

      <!-- allows...

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;
}
#Header {
	font-family: Proxima Nova,helvetica neue,helvetica,sans-serif;
	font-weight: bold;
	font-size: 200%;
	color: rgb(0, 0, 0);
}

.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;
 }
 
 #login-content {
  display: none;
  position: absolute;
	margin-right: 10px;
  top: 60px;
  right: 0;
	left: 1000;
  z-index: 999;
  background: #ffffff;
  padding: 15px;
	border: 1px solid #CCC;
  width: 200px;
}

/* Keeps this in sync w/ the login-content div */
#login-form {
  display: none;
}

 #login-content input {
  margin-bottom: 3px;
  padding: 10px;
  width: 90%;
  border: 1px solid #CCC;
}

 #login-content label {
  cursor: pointer;
  font-family: Proxima Nova,helvetica neue,helvetica,sans-serif;
	color: #002D45;
}

 #login-content #register-form {
  display: none;
}

 #login-content #forgotten-form {
  display: none;
}

 #login-content, #after-reset, #if-error, #if-reg-error {
  display: none;
}

 #login-content .auth-link {
  cursor: pointer;
  font-family: Proxima Nova,helvetica neue,helvetica, sans-serif;
	color: #002D45;
}

#forgotten-link, #reset-response, #after-reset, #login-link-modal, #if-error, #if-reg-error {
  cursor: pointer;
  font-family: Proxima Nova,helvetica neue,helvetica,sans-serif;
	color: #002D45;
	font-size: 80%;
}

#login-link-modal {
	font-size: 120%;
}

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

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

#search-controls...

JavaScript

//Create a database object by connecting to the firestore using credentials defined in HTML
var db = firebase.firestore();


//Query the parts database and take a snapshot, which is what's in the Firebase collection at this moment in time. For more on collections vs. documents vs. fields, see the Exhibits in case 'Managing App & User Data with Google Firebase'.
db.collection("parts")
  .get().then((querySnapshot) => {
    // loop through all part documents in the parts collection
    querySnapshot.forEach((doc) => {
      //call the drawDiv function to add the parts to each page
      drawDiv(doc.data(), doc.id, '#parts-content');
    })
    //This block has jQuery bind to the part-ref ID so that it's clickable/brings the user over to that part's detail page. 
    $(".part-ref").on("click", function() {
      pn = $(this).text();
      localStorage.setItem("part-index", pn);
      console.log(localStorage.getItem("pn"));
      window.open('https://jsfiddle.net/phalsey/jq8e6sh5/show', '_newtab');
    });
  })


function drawDiv(divData, divID, parent) {
    if (divData == null) return null;

    partNum = divID;
    imgURL = divData.imageURL;
    mfr = divData.Manufacturer;
    model = divData.Model;
    type = divData.Type;
    price = Number(divData.Price).toFixed(2);
    avail = divData.Availability;
    orders = divData.Orders;

    var $partsDiv = $("<div/>"); 
    $partsDiv.addClass('catalog-part');
    $partsDiv.attr({ 
        'mfr': mfr, 
        'model': model, 
        'id': partNum,
        'type': type,  // Added type attribute for searchability
        'data-part-number': partNum  // Added explicit part number attribute
    });

    var img = $('<img />').attr({ 'src': ('https://' + imgURL) })
    $partsDiv.prepend(img);

    var $overlayDiv = $("<div/>"); 
    $overlayDiv.addClass('overlay');
    
    var overlaycontents = $("<p></p>").html('<br>' + orders + " Orders <br>" + '$' + price + "<br> " + avail + '<br>');
    
    var $link = $('<a/>');
  ...