Merge pull request #1 from evanshortiss/main

[WIP] feat: ui polls products on an interval now

Author: blues-man

.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+Dockerfile*
+devfile.yaml

Dockerfile

@@ -2,7 +2,9 @@ FROM node:14
 ENV COOLSTORE_GW_ENDPOINT=http://localhost:8090
 WORKDIR /usr/src/app
 COPY package*.json ./
-RUN npm install
+RUN npm ci --omit=dev
 COPY . .
+RUN chmod -R a+rw /usr/src/app
+USER 1001
 EXPOSE 8080
 CMD [ "npm", "start" ]

README.md

@@ -33,6 +33,8 @@ Example:
 SECURE_COOLSTORE_GW_ENDPOINT=https://gateway-vertx.somewhere.tld
 ```
 
+The UI fetches products every 5 seconds by default. This can be changed by setting the `PRODUCT_REFRESH_INTERVAL` to a value represented in milliseconds, e.g `PRODUCT_REFRESH_INTERVAL=3000` for a 3 second refresh interval.
+
 The outcome is an online store with a catalog of product items and an inventory of stock:
 
 <img src="coolstore-web.png" width="600" alt="Coolstore Shop">

app/controllers/controllers.js

@@ -3,8 +3,8 @@
 angular.module('app')
 
     .controller("HomeController",
-        ['$scope', '$http', '$filter', /*'Notifications',*/ 'catalog', 'Auth',
-            function ($scope, $http, $filter, /*Notifications,*/ catalog, $auth) {
+        ['$scope', '$http', '$filter', '$timeout', 'COOLSTORE_CONFIG', /*'Notifications',*/ 'catalog', 'Auth',
+            function ($scope, $http, $filter, $timeout, COOLSTORE_CONFIG, /*Notifications,*/ catalog, $auth) {
 
                 $scope.products = [];
 
@@ -19,24 +19,35 @@ angular.module('app')
                     $auth.login();
                 };
 
-
-                // initialize products
-                catalog.getProducts().then(function (data) {
-                    if (data.error != undefined && data.error != "") {
-                        // Notifications.error("Error retrieving products: " + data.error);
-                        return;
-                    }
-                    $scope.products = data.map(function (el) {
-                        return {
-                            quantity: "1",
-                            product: el
+                function refreshProducts () {
+                    // initialize products
+                    catalog.getProducts().then(function (data) {
+                        if (data.error != undefined && data.error != "") {
+                            // Notifications.error("Error retrieving products: " + data.error);
+                            return;
                         }
+                        $scope.products = data
+                            .sort(function (p1, p2) {
+                                return parseInt(p1.itemId) > parseInt(p2.itemId) ? 1 : -1
+                            })
+                            .map(function (el) {
+                                return {
+                                    quantity: "1",
+                                    product: el
+                                }
+                            })
+                        
+                    }, function (err) {
+                        // Notifications.error("Error retrieving products: " + err.statusText);
                     })
-                }, function (err) {
-                    // Notifications.error("Error retrieving products: " + err.statusText);
-                });
-
+                    .finally(function () {
+                        $timeout(function () {
+                            refreshProducts()
+                        }, COOLSTORE_CONFIG.PRODUCT_REFRESH_INTERVAL)
+                    });
+                }
 
+                refreshProducts()
             }])
 
     .controller("HeaderController",

app/coolstore.config.js

@@ -1,2 +1,2 @@
 angular.module("app")
-.constant("COOLSTORE_CONFIG", {"API_ENDPOINT":"http://localhost:8090","SECURE_API_ENDPOINT":"secure-gateway-coolstore-undefined","SSO_ENABLED":false});
+.constant("COOLSTORE_CONFIG", {"API_ENDPOINT":"gateway-vertx-undefined","SECURE_API_ENDPOINT":"gateway-vertx-undefined","SSO_ENABLED":false,"PRODUCT_REFRESH_INTERVAL":5000});

app/services/catalog.js

@@ -3,7 +3,7 @@
 angular.module("app")
 
 .factory('catalog', ['$http', '$q', 'COOLSTORE_CONFIG', 'Auth', '$location', function($http, $q, COOLSTORE_CONFIG, $auth, $location) {
-	var factory = {}, products, baseUrl;
+	var factory = {}, baseUrl;
 
 	if ($location.protocol() === 'https') {
 		baseUrl = (COOLSTORE_CONFIG.SECURE_API_ENDPOINT.startsWith("https://") ? COOLSTORE_CONFIG.SECURE_API_ENDPOINT : "https://" + COOLSTORE_CONFIG.SECURE_API_ENDPOINT + '.' + $location.host().replace(/^.*?\.(.*)/g,"$1")) + '/api/products';
@@ -13,19 +13,14 @@ angular.module("app")
 
 	factory.getProducts = function() {
 		var deferred = $q.defer();
-        if (products) {
-            deferred.resolve(products);
-        } else {
-            $http({
-                method: 'GET',
-								url: baseUrl
-            }).then(function(resp) {
-                products = resp.data;
-                deferred.resolve(resp.data);
-            }, function(err) {
-                deferred.reject(err);
-            });
-        }
+        $http({
+            method: 'GET',
+            url: baseUrl
+        }).then(function(resp) {
+            deferred.resolve(resp.data);
+        }, function(err) {
+            deferred.reject(err);
+        });
 	   return deferred.promise;
 	};
 

config/coolstore.config.js

@@ -1,3 +1,5 @@
+const { get } = require('env-var')
+
 var config = {
     API_ENDPOINT: 'gateway-vertx-' + process.env.OPENSHIFT_BUILD_NAMESPACE,
     SECURE_API_ENDPOINT: 'gateway-vertx-' + process.env.OPENSHIFT_BUILD_NAMESPACE,
@@ -17,4 +19,6 @@ if (process.env.SECURE_COOLSTORE_GW_ENDPOINT != null) {
     config.SECURE_API_ENDPOINT = process.env.SECURE_COOLSTORE_GW_SERVICE + '-' + process.env.OPENSHIFT_BUILD_NAMESPACE;
 }
 
+config.PRODUCT_REFRESH_INTERVAL = get('PRODUCT_REFRESH_INTERVAL').default(5000).asIntPositive()
+
 module.exports = config;

config/coolstore.config.json

@@ -2,6 +2,7 @@
     "COOLSTORE_CONFIG": {
         "API_ENDPOINT": "localhost:8090",
         "SECURE_API_ENDPOINT": "localhost:8443",
-        "SSO_ENABLED": "false"
+        "SSO_ENABLED": "false",
+        "PRODUCT_REFRESH_INTERVAL": 5000
     }
 }

licenses/ENV-VAR_MIT.TXT

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016, 2020 Evan Shortiss
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

licenses/licenses.html

@@ -4,7 +4,7 @@
 <link rel="stylesheet" type="text/css" href="licenses.css">
 </head>
 <body>
-<h2>web</h2>
+<h2>web-nodejs</h2>
 <table>
 <tr>
 <th>Package Group</th>
@@ -36,6 +36,13 @@ <h2>web</h2>
 </tr>
 <tr>
 <td>N/A</td>
+<td>env-var</td>
+<td>7.3.0</td>
+<td>http:&#x2F;&#x2F;www.opensource.org&#x2F;licenses&#x2F;MIT</td>
+<td><a href=ENV-VAR_MIT.TXT>ENV-VAR_MIT.TXT</a></td>
+</tr>
+<tr>
+<td>N/A</td>
 <td>express</td>
 <td>4.16.4</td>
 <td>http:&#x2F;&#x2F;www.opensource.org&#x2F;licenses&#x2F;MIT</td>

licenses/licenses.xml

@@ -1,6 +1,6 @@
 <?xml version='1.0'?>
 <licenseSummary>
-    <project>web</project>
+    <project>web-nodejs</project>
     <version>1.0.0</version>
     <license>Apache-2.0</license>
     <dependencies>
@@ -34,6 +34,16 @@
                 </license>
             </licenses>
         </dependency>
+        <dependency>
+            <packageName>env-var</packageName>
+            <version>7.3.0</version>
+            <licenses>
+                <license>
+                    <name>MIT License</name>
+                    <url>http://www.opensource.org/licenses/MIT</url>
+                </license>
+            </licenses>
+        </dependency>
         <dependency>
             <packageName>express</packageName>
             <version>4.16.4</version>