From 633dd25df30da5e72959e7f4f1966bcd2ccfa0fb Mon Sep 17 00:00:00 2001
From: Pierre-Gilles Leymarie <pierregilles.leymarie@gmail.com>
Date: Tue, 14 Nov 2017 08:10:30 +0100
Subject: [PATCH] Fix #226 : Add infinite scrolling in My Devices view

---
 assets/js/app/device/device.controller.js | 26 ++++++++++++++++++-----
 assets/js/app/device/device.service.js    |  6 +++---
 views/device/index.ejs                    |  2 +-
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/assets/js/app/device/device.controller.js b/assets/js/app/device/device.controller.js
index cbe5c690c1..56152cf340 100644
--- a/assets/js/app/device/device.controller.js
+++ b/assets/js/app/device/device.controller.js
@@ -29,6 +29,11 @@
     vm.deleteDevice = deleteDevice;
     vm.createDeviceType = createDeviceType;
     vm.deleteDeviceType = deleteDeviceType;
+    vm.loadMore = loadMore;
+    vm.startValue = 0;
+    vm.nbElementToGet = 50;
+    vm.remoteIsBusy = false;
+    vm.noMoreElements = false;
 
     vm.saving = false;
     vm.ready = false;
@@ -49,19 +54,30 @@
       getDeviceTypesByRoom()
         .then(function(){
             vm.ready = true;
-            getDevices();
             getRooms();
             getUsers();
+            loadMore();
         });
       waitForNewValue();
       return ;
     }
+
+    function loadMore(){
+        if(!vm.remoteIsBusy && !vm.noMoreElements){
+            getDevices(vm.nbElementToGet, vm.startValue);
+            vm.startValue += vm.nbElementToGet; 
+        }
+    }
     
-    
-    function getDevices() {
-      return deviceService.get()
+    function getDevices(take, skip) {
+      vm.remoteIsBusy = true;
+      return deviceService.get(take, skip)
         .then(function(data){
-          vm.devices = data.data;
+            if(data.data.length === 0){
+                vm.noMoreElements = true;
+            }
+            vm.devices = vm.devices.concat(data.data);
+            vm.remoteIsBusy = false;
         });
     }
     
diff --git a/assets/js/app/device/device.service.js b/assets/js/app/device/device.service.js
index f510aa6eb7..38d7b58555 100644
--- a/assets/js/app/device/device.service.js
+++ b/assets/js/app/device/device.service.js
@@ -36,9 +36,9 @@
         return service;
         
         // all about devices 
-        
-        function get() {
-            return $http({method: 'GET', url: '/device'});
+
+        function get(take, skip) {
+            return $http({method: 'GET', url: '/device', params: {take: take, skip: skip}});
         }
 
         function create(device, types){
diff --git a/views/device/index.ejs b/views/device/index.ejs
index 50f04230c3..c7d99dc1b0 100644
--- a/views/device/index.ejs
+++ b/views/device/index.ejs
@@ -131,7 +131,7 @@
                                             </tr>
                                         </thead>
                                         <tbody>
-                                            <tr ng-repeat="device in vm.devices" class="ng-cloak">
+                                            <tr infinite-scroll="vm.loadMore()" ng-repeat="device in vm.devices" class="ng-cloak">
                                                 <td>{{device.id}}</td>
                                                 <td><input type="text" class="form-control" ng-model="device.name" ng-model-options='{ debounce: 500 }' ng-change="vm.updateDevice(device);" /></td>
                                                 <td>{{device.identifier}}</td>