Changeset 25491 for trunk/admin

Timestamp:

Nov 15, 2013, 11:28:10 PM (10 years ago)

Author:

plg

Message:

feature 1668: in user details, ability to modify recent_period and nb_image_page with sliders

File:

• trunk/admin/themes/default/template/user_list.tpl (modified) (6 diffs)

trunk/admin/themes/default/template/user_list.tpl

@@ -6 +6 @@
 {combine_script id='jquery.chosen' load='footer' path='themes/default/js/plugins/chosen.jquery.min.js'}
 {combine_css path="themes/default/js/plugins/chosen.css"}
+
+{combine_script id='jquery.ui.slider' require='jquery.ui' load='footer' path='themes/default/js/ui/minified/jquery.ui.slider.min.js'}
+{combine_css path="themes/default/js/ui/theme/jquery.ui.slider.css"}
 
 {footer_script}
@@ -90 +93 @@
    * Table with users
    */
+  /**
+   * find the key from a value in the startStopValues array
+   */
+  function getSliderKeyFromValue(value, values) {
+    for (var key in values) {
+      if (values[key] == value) {
+        return key;
+      }
+    }
+    return 0;
+  }
+
+  var recent_period_values = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,25,30,40,50,60,80,99];
+
+  function getRecentPeriodInfoFromIdx(idx) {
+    return sprintf(
+      "{/literal}{'%d days'|@translate}{literal}",
+      recent_period_values[idx]
+    );
+  }
+
+  var nb_image_page_values = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,35,40,45,50,60,70,80,90,100,200,300,500,999];
+
+  function getNbImagePageInfoFromIdx(idx) {
+    return sprintf(
+      "{/literal}{'%d photos per page'|@translate}{literal}",
+      nb_image_page_values[idx]
+    );
+  }
+
   /* Formating function for row details */
   function fnFormatDetails(oTable, nTr) {
@@ -184 +217 @@
           userDetails += '<div class="userPropertiesSetTitle">{/literal}{'Preferences'|translate}{literal}</div>';
 
-          userDetails += '<div class="userProperty"><strong>{/literal}{'Number of photos per page'|translate}{literal}</strong>';
-          userDetails += '<br>'+user.nb_image_page+'</div>';
+          userDetails += '<div class="userProperty"><strong class="nb_image_page_infos"></strong>';
+          userDetails += '<div class="nb_image_page"></div>';
+          userDetails += '<input type="hidden" name="nb_image_page" value="'+user.nb_image_page+'">';
+          userDetails += '</div>';
 
           userDetails += '<div class="userProperty"><strong>{/literal}{'Theme'|translate}{literal}</strong>';
@@ -209 +244 @@
           userDetails += '</select></div>';
 
-          userDetails += '<div class="userProperty"><strong>{/literal}{'Recent period'|translate}{literal}</strong>';
-          userDetails += '<br>'+user.recent_period+'</div>';
+          userDetails += '<div class="userProperty"><strong>{/literal}{'Recent period'|translate}{literal}</strong> <span class="recent_period_infos"></span>';
+          userDetails += '<div class="recent_period"></div>';
+          userDetails += '<input type="hidden" name="recent_period" value="'+user.recent_period+'">';
+          userDetails += '</div>';
 
           var checked = '';
@@ -242 +279 @@
           jQuery("#user"+userId).append(userDetails);
           jQuery(".chzn-select").chosen();
+
+          /* nb_image_page slider */
+          var nb_image_page_init = getSliderKeyFromValue(jQuery('input[name=nb_image_page]').val(), nb_image_page_values);
+          
+          jQuery('#user'+userId+' .nb_image_page_infos').html(getNbImagePageInfoFromIdx(nb_image_page_init));
+          
+          jQuery('#user'+userId+' .nb_image_page').slider({
+            range: "min",
+            min: 0,
+            max: nb_image_page_values.length - 1,
+            value: nb_image_page_init,
+            slide: function( event, ui ) {
+              jQuery('#user'+userId+' .nb_image_page_infos').html(getNbImagePageInfoFromIdx(ui.value));
+            },
+            stop: function( event, ui ) {
+              jQuery('#user'+userId+' input[name=nb_image_page]').val(nb_image_page_values[ui.value]).trigger('change');
+            }
+          });
+
+          /* recent_period slider */
+          var recent_period_init = getSliderKeyFromValue(jQuery('input[name=recent_period]').val(), recent_period_values);
+          jQuery('#user'+userId+' .recent_period_infos').html(getRecentPeriodInfoFromIdx(recent_period_init));
+          
+          jQuery('#user'+userId+' .recent_period').slider({
+            range: "min",
+            min: 0,
+            max: recent_period_values.length - 1,
+            value: recent_period_init,
+            slide: function( event, ui ) {
+              jQuery('#user'+userId+' .recent_period_infos').html(getRecentPeriodInfoFromIdx(ui.value));
+            },
+            stop: function( event, ui ) {
+              jQuery('#user'+userId+' input[name=recent_period]').val(recent_period_values[ui.value]).trigger('change');
+            }
+          });
         }
         else {
@@ -737 +809 @@
 
 .userStats {margin-top:10px;}
+.recent_period_infos {margin-left:10px;}
+.nb_image_page, .recent_period {width:340px;margin-top:5px;}
 </style>
 {/literal}