Fix GladysAssistant#226 : Add infinite scrolling in My Devices view

R6n0 · Nov 14, 2017 · 633dd25 · 633dd25
1 parent 039b864
commit 633dd25
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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>