terminal: implement add code to user feature

Author: marcushultman

app/api/store.js

@@ -49,6 +49,17 @@ api.route('/codes/:code')
   .catch(err => next(err));
 });
 
+api.route('/users')
+.get((req, res, next) => {
+  Store.populate(req.store, 'accesses.user')
+      .then(store => store.accesses.map(access => access.user))
+      .then(users => {
+        users.sort((lhs, rhs) => lhs.name.localeCompare(rhs.name));
+        res.json({ users });
+      })
+      .catch(err => next(err));
+});
+
 api.route('/users/:id/codes')
 .post((req, res, next) => {
   if (!req.body.code) {

src/terminal/app.js

@@ -27,27 +27,11 @@ angular.module('strecku.terminal', [
         });
 
         // Log entries
-        $scope.updatePurchases = () => {
-          $http.get('/api/v1/purchases?limit=25')
-          .then(function(res){
-            $scope.log = res.data.purchases;
-              // Listen to new in realtime
-              StoreLog.on('purchase', (purchase) => $scope.log.push(purchase));
-          })
-          .catch(err => console.error('err', err));
-        };
-        $scope.updatePurchases();
-
-        // Additional user data
-        $scope.$watch('item.user', function(user){
-            if (user) $q.all([
-                $http.get(`/api/v1/purchases?user=${user._id}&limit=5`),
-                // $http.get(`/api/v1/stores/this/summary?user=${user._id}`)
-            ]).then(function(res) {
-                $scope.item.purchases = res[0].data.purchases;
-                // $scope.item.summary = res[1].data;
-            });
-        });
+        $http.get('/api/v1/purchases?limit=25').then(res => {
+          $scope.log = res.data.purchases;
+          // Listen to new in realtime
+          StoreLog.on('purchase', (purchase) => $scope.log.push(purchase));
+        })
 
         // Code scanner callback
         $scope.onCode = function(code){
@@ -81,7 +65,14 @@ angular.module('strecku.terminal', [
             // Set/reset current
             else {
                 timeout();
-                $scope.item = item;
+                if (item.type === 'user') {
+                  $http.get(`/api/v1/purchases?user=${item.user._id}&limit=5`).then(res => {
+                    item.purchases = res.data.purchases;
+                    $scope.item = item;
+                  });
+                } else {
+                  $scope.item = item;
+                }
             }
         }
         function onNull(code){
@@ -105,8 +96,19 @@ angular.module('strecku.terminal', [
                     timeout();
                 }, timeout);
             }
-            // Reset current
-            else $scope.item = null;
+            // cancel new code
+            else if ($scope.item && $scope.item.pendingCode === code){
+              $scope.item = null;
+            }
+            // new code = show list of users
+            else {
+              $http.get(`/api/v1/users`).then(res => {
+                $scope.item = {
+                  pendingCode: code,
+                  users: res.data.users,
+                };
+              });
+            }
         }
 
         // Helper functions
@@ -118,20 +120,17 @@ angular.module('strecku.terminal', [
             $scope.item.product._id == item.product._id));
         }
         function timeout(){
-            $scope.codeConfirm = null;
             $timeout.cancel($scope.timeout);
-            ($scope.timeout = $timeout(5000)).then(function(){
-                if (!$scope.codeConfirm) $scope.item = null;
+            ($scope.timeout = $timeout(5000)).then(() => {
+              $scope.item = null;
             });
         }
         // Action implementations
         function buyProduct(user, product){
-            return $http.post(`/api/v1/purchases`, {user, product})
-            .then(() => {
-              $scope.updatePurchases();
-            });
+            return $http.post(`/api/v1/purchases`, { user, product });
         };
         function addCode(target, code){
+            $timeout.cancel($scope.timeout);
             $scope.codeConfirm = code;
             return $mdDialog.show({
                 controller: () => {},
@@ -142,4 +141,9 @@ angular.module('strecku.terminal', [
                 controllerAs: 'ctrl'
             }).then(() => code);
         }
+
+        $scope.assignCode = (code, user) => {
+          $http.post(`/api/v1/users/${user._id}/codes`, { code });
+          $scope.item = null;
+        };
     }]);

static/strecku/css/style.css

@@ -1,9 +1,5 @@
 md-sidenav md-list-item.md-2-line:before {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  visibility: initial;
-  background: linear-gradient(45deg, rgba(0, 0, 0, 0.4), transparent);
+  content: none;
 }
 md-sidenav md-list {
     padding: 0;

static/strecku/terminal/css/terminal.css

@@ -6,4 +6,20 @@ md-sidenav.md-sidenav-right {
     height: 128px;
     border-radius: 50%;
     object-fit: cover;
-}
+}
+md-sidenav md-list-item.md-2-line {
+  background: linear-gradient(45deg, rgba(0, 0, 0, 0.2), transparent);
+}
+.user-list {
+  display: flex;
+  max-height: 400px;
+  overflow-y: scroll;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+.user-list .user {
+  flex: 0 0 calc(33% - 8px);
+  height: 64px;
+  margin: 4px;
+  border-radius: 16px;
+}

static/strecku/terminal/index.html

@@ -84,6 +84,21 @@ <h3><b>{{purchase.product.name || purchase.note}}</b></h3>
                 <span ng-if="!item.product.available">(Unavailable)</span>
             </div>
         </div>
+
+
+        <!-- Add code to user -->
+        <div ng-show="item.pendingCode" layout="column" layout-align="start center" layout-padding
+            class="pulse" ng-class="{ animated: item.pendingCode }">
+          <div style="text-align: center;">
+            <div class="md-headline">Assign '{{ item.pendingCode }}' to user:</div>
+            <div class ="user-list">
+              <button ng-repeat="user in item.users" class="user"
+                  ng-click="assignCode(item.pendingCode, user)">
+                {{ user.name }}
+              </button>
+            </div>
+          </div>
+        </div>
     </md-content>
 
     <!-- Log sidenav -->
@@ -93,7 +108,7 @@ <h1 class="md-toolbar-tools">{{store.name}} recent purchases</h1>
         </md-toolbar>
         <md-content>
             <md-list>
-                <md-list-item class="md-table-row md-2-line animated"
+                <md-list-item class="md-table-row md-2-line animated" style="position: relative;"
                     ng-repeat="purchase in log | orderBy:'time':1 | limitTo:25">
                     <div flex="50" class="md-list-item-text">
                         <h3><b>{{purchase.product.name || purchase.note}}</b></h3>