add functionality and styles to products list

client/css/products.css

@@ -1,9 +1,15 @@
-
 ul.product-list {
     list-style: none;
     text-align: center;
 }
 
+ul.product-list li {
+    display: inline-block;
+    width: 30%;
+    vertical-align: top;
+    padding: 10px;
+}
+
 li.product-details {
     width: 30%;
     float: left;
@@ -31,37 +37,52 @@ a.product-link:hover {
     width: 80%;
     margin: 0 auto;
 }
+
 .product-description {
     font-size: 12px;
     opacity: 0.5
 }
 
 @media screen and (max-width: 47.2em) {
-	li.product-details {
+    li.product-details {
         width: 100%;
         float: left;
     }
 }
 
-.category-item a{
+.category-item a {
     margin: 15px 15px;
     font-size: 14px;
     letter-spacing: 1px;
     padding: 0px;
 }
 
-.product-short-desc img{
+.product-short-desc img {
     width: 150px;
     height: 150px;
     display: block;
     margin: 0px auto;
-    background-color: #4a4a4a;
+    background-color: #ccc;
 }
 
-ul.product-list {
-    list-style: none;
+.product-short-desc p {
+    font-size: 13px;
+    text-align: justify;
+    margin-bottom: 0px;
+    color: #4a4a4a;
+    padding: 0 40px;
 }
 
-ul.product-list li {
-    display: inline;
+.product-short-desc a {
+    text-transform: uppercase;
+    font-weight: 600;
+    color: #888;
+    opacity: 0.8;
+    transition: ease-in 0.2s;
+    text-decoration: none;
+    padding: 0 40px;
+}
+
+.product-short-desc a:hover {
+    opacity: 1;
 }

client/js/app.js

@@ -1,10 +1,11 @@
 var BASE_URL = 'http://192.168.1.127/api/';
+
 function http(url, params) {
     return new Promise(function(resolve, reject) {
         httpRequest = new XMLHttpRequest();
-        
+
         httpRequest.onreadystatechange = function() {
-            if (httpRequest.readyState == XMLHttpRequest.DONE ) {
+            if (httpRequest.readyState == XMLHttpRequest.DONE) {
                 if (httpRequest.status == 200) {
                     resolve(JSON.parse(httpRequest.responseText));
                 } else {
@@ -12,7 +13,7 @@ function http(url, params) {
                 }
             }
         };
-        
+
         httpRequest.open('GET', url, true);
         httpRequest.setRequestHeader('lang', 'ES')
         var x = params ? params : null;
@@ -21,12 +22,12 @@ function http(url, params) {
 }
 
 http('http://192.168.1.127/api/products/listcategories').then(function(data) {
-    
-}, function(err){
+
+}, function(err) {
     console.log("err", err);
 });
 
-function logError (err) {
+function logError(err) {
     console.log('Error: ', err);
 }
 var sections = [
@@ -34,12 +35,15 @@ var sections = [
     'productos'
 ];
 
-function initProducts(category) {
-    http(BASE_URL + 'products/category/' + category).then(function (products) {
-        products.forEach(function (product) {
-            productsListed_.push(product);
-        })
-    }, logError)
+function getProducts(category) {
+    if (R.isNil(data.allProducts[category]) || R.isEmpty(data.allProducts[category])) {
+        http(BASE_URL + 'products/category/' + category).then(function(xs) {
+            data.allProducts[category] = xs;
+            data.products = xs;
+        }, logError)
+    } else {
+        data.products = data.allProducts[category];
+    }
 }
 
 var selectedSection_ = {
@@ -47,15 +51,16 @@ var selectedSection_ = {
     productos: false
 };
 
-var productsListed_ = [];
+var selectedCategory_ = 'proteccion intensiva';
+
 rivets.configure({
     executeFunctions: true
 })
 
 function getCategories() {
-    if(productCategories_.length === 0) {
-        http(BASE_URL + 'products/listcategories').then(function (data) {
-            data.forEach(function (category) {
+    if (productCategories_.length === 0) {
+        http(BASE_URL + 'products/listcategories').then(function(data) {
+            data.forEach(function(category) {
                 productCategories_.push(category)
             })
         }, logError)
@@ -67,49 +72,68 @@ var productCategories_ = [];
 var app = document.getElementById('app');
 
 rivets.binders['src-strict'] = function(el, value) {
-  var img = new Image()
-
-  img.onload = function() {
-    $(el).attr('src', value)
-  }
+    var img = new Image()
+    img.onload = function() {
+        $(el).attr('src', value)
+    }
+    img.src = value
+}
 
-  img.src = value
+var data = {
+    allProducts: {},
+    products: [],
+    selectedCategory: ''
 }
 
 var view = rivets.bind(app, {
     sections: sections,
     selectedSection: selectedSection_,
     productCategories: productCategories_,
-    productsListed: productsListed_,
-    selectSection: function (event, scope) {
+    data: data,
+    selectedCategory: selectedCategory_,
+    selectSection: function(event, scope) {
         var newValue = event.target.text;
         window.history.pushState({}, newValue, '#' + newValue)
         chooseSection(newValue);
         event.target.className = 'selected';
         scope.getData[newValue]();
     },
-    selectCategory: function (event, scope) {
+    selectCategory: function(event, scope) {
         var category = productCategories_.find(R.propEq('name', event.target.text));
-        initProducts(category._id)
+        var categoryList = getElement('ul#product-category-nav > li > a')
+        data.selectedCategory = category;
+        getProducts(category._id);
+        addSelectedClass(categoryList, category.name);
     },
     getData: {
         productos: getCategories,
-        empresa: function(){}
+        empresa: function() {}
     }
 });
 
+function getElement(selector) {
+    return window.document.querySelectorAll(selector);
+}
+
 function chooseSection(section) {
-    var navbarList = window.document.querySelectorAll('ul.navbar-list > li > a');
-    navbarList.forEach(function (el) {
-        var isSelected = el.text === section;
+    var navbarList = getElement('ul.navbar-list > li > a');
+    addSelectedClass(navbarList, section, selectedSection_)
+}
+var elements = [];
+
+function addSelectedClass(elemList, x, opt) {
+    console.log('elemList: ', elemList);
+    elemList.forEach(function(el) {
+        var isSelected = el.text === x;
         el.className = isSelected ? 'selected' : '';
-        selectedSection_[el.text] = isSelected;
+        if (opt) {
+            opt[el.text] = isSelected;
+        }
     })
 }
-var elements = [];
 
-window.onscroll = function () {
-    elements = elements.reduce(function (acc, e) {
+window.onscroll = function() {
+    elements = elements.reduce(function(acc, e) {
         if (isInViewport(e)) {
             e.className = 'discover-li'
             return acc;
@@ -119,7 +143,7 @@ window.onscroll = function () {
         }
     }, [])
     if (elements.length === 0) {
-        window.onscroll = function () {};
+        window.onscroll = function() {};
     }
 };
 
@@ -127,11 +151,11 @@ function isInViewport(element) {
     var rect = element.getBoundingClientRect();
     var html = document.documentElement;
     return (rect.top >= 0 &&
-    rect.left >= 0 &&
-    rect.bottom <= (window.innerHeight || html.clientHeight) &&
-    rect.right <= (window.innerWidth || html.clientWidth))
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || html.clientHeight) &&
+        rect.right <= (window.innerWidth || html.clientWidth))
 }
 
-window.onload = function () {
+window.onload = function() {
     chooseSection(window.location.hash.substr(1));
 }