Add a drop down menu to set item per page

public/js/vroom.js

@@ -36,9 +36,6 @@ $('.date-picker').datepicker({
   language: currentLang
 });
 
-// When pagination is done, how many item per page
-var itemPerPage = 20;
-
 // Regex to check a date
 var dateRe = /^\d{4}\-\d{1,2}\-\d{1,2}$/;
 
@@ -579,6 +576,7 @@ function initDoc(){
 function initAdminRooms(){
   var roomList = {};
   var matches = 0;
+  var itemPerPage = $('#item-per-page').val();
 
   // Update display of room list
   function updateRoomList(filter, min, max){
@@ -697,6 +695,13 @@ function initAdminRooms(){
     );
   }
 
+  // Update pagination
+  $('#item-per-page').change(function(){
+    itemPerPage = $('#item-per-page').val();
+    updateEventList($('#searchRoom').val(), 0, itemPerPage);
+    updatePagination();
+  });
+
   // Handle submiting the configuration form
   $(document).on('click', '.btn-configure', function(){
     roomName = $(this).data('room');
@@ -744,6 +749,7 @@ function initAdminRooms(){
 function initAdminAudit(){
   var eventList = {};
   var matches = 0;
+  var itemPerPage = $('#item-per-page').val();
 
   // Update display of event list
   function updateEventList(filter, min, max){
@@ -815,6 +821,13 @@ function initAdminAudit(){
     );
   }
 
+  // Update pagination
+  $('#item-per-page').change(function(){
+    itemPerPage = $('#item-per-page').val();
+    updateEventList($('#searchEvent').val(), 0, itemPerPage);
+    updatePagination();
+  });
+
   // When we click on either refresh or export buttons, check dates are valid
   $('#events_refresh,#events_export').click(function(e){
     e.preventDefault();

templates/default/admin_audit.html.ep

@@ -54,6 +54,20 @@
               % }
             </span>
           </div>
+          <div class="form-group">
+            <select id="item-per-page"
+                    class="form-control navbar-btn help"
+                    data-toggle="tooltip"
+                    data-placement="bottom"
+                    title="<%= l('ITEM_PER_PAGE') %>">
+              % foreach my $i qw(20 40 80 150 300){
+              <option value="<%= $i %>"
+              %== ($i == 20) ? 'selected="selected">' : '>'
+                %= $i
+              </option>
+              % }
+            </select>
+          </div>
         </div>
         <div class="form-group pull-right hidden-xs">
           %= image url_for('/img/loading.gif'), alt => $self->l('LOADING'), id => 'loadingIcon'

templates/default/admin_manage_rooms.html.ep

@@ -9,7 +9,7 @@
     <div class="panel-heading">
       <div class="form-inline">
         <div class="form-group">
-          <div class="input-group input-group-lg">
+          <div class="input-group">
             <input type="text"
                    id="searchRoom"
                    class="form-control"
@@ -19,6 +19,20 @@
               </span>
             </div>
           </div>
+          <div class="form-group">
+            <select id="item-per-page"
+                    class="form-control navbar-btn help"
+                    data-toggle="tooltip"
+                    data-placement="bottom"
+                    title="<%= l('ITEM_PER_PAGE') %>">
+              % foreach my $i qw(20 40 80 150 300){
+              <option value="<%= $i %>"
+              %== ($i == 20) ? 'selected="selected">' : '>'
+                %= $i
+              </option>
+              % }
+            </select>
+          </div>
         </div>
       </div>
     </div>