Improve UI for superusers (bug 1100533)

src/media/js/helpers_local.js

@@ -7,6 +7,9 @@ define('helpers_local', ['nunjucks', 'operators'],
     // Filter operator shelves that do not belong to the current operator.
     filters.for_current = function(shelves) {
         var current = operators.get.current();
+        if (!current) {
+            return [];
+        }
         return shelves.filter(function(shelf) {
             return (shelf.carrier == current.carrier &&
                     shelf.region == current.region);

src/media/js/main.js

@@ -11,13 +11,15 @@ define(
         'login',  // Comment this if your app does not have accounts.
         'navigation',
         'operators',
+        'settings',
         'templates',
         'user',  // Comment this if your app does not have accounts.
         'z'
     ],
 function() {
     var console = require('log')('main');
     var operators = require('operators');
+    var settings = require('settings');
     var storage = require('storage');
     var urls = require('urls');
     var user = require('user');
@@ -33,7 +35,9 @@ function() {
         var nunjucks = require('templates');
         $('#site-header').html(nunjucks.env.render('header.html', {
             all_operators: operators.get.all(),
-            current_operator: operators.get.current()
+            current_operator: operators.get.current(),
+            carriers: settings.carriers,
+            regions: settings.REGION_CHOICES_SLUG
         }));
         $('#site-footer').html(
             nunjucks.env.render('footer.html'));

src/media/js/operators.js

@@ -3,8 +3,8 @@
     an active one used by the tool.
 */
 
-define('operators', ['defer', 'jquery', 'nunjucks', 'requests', 'storage', 'urls', 'z'],
-    function(defer, $, nunjucks, requests, storage, urls, z) {
+define('operators', ['defer', 'jquery', 'nunjucks', 'requests', 'settings', 'storage', 'urls', 'z'],
+    function(defer, $, nunjucks, requests, settings, storage, urls, z) {
 
     var console = require('log')('operators');
     var ALL_OPERATORS_KEY = 'operators_all';
@@ -53,7 +53,23 @@ define('operators', ['defer', 'jquery', 'nunjucks', 'requests', 'storage', 'urls
     function fetch() {
         var def = defer.Deferred();
         requests.get(urls.api.url('permissions')).done(function(data) {
-            var operators = data.objects;
+            var operators;
+
+            if (data[0] == '*') {
+                operators = [];
+                $.each(settings.carriers, function(i, carrier) {
+                    $.each(Object.keys(settings.REGION_CHOICES_SLUG), function(i, region) {
+                        operators.push({
+                            'carrier': carrier,
+                            'region': region
+                        });
+                    });
+                });
+
+            } else {
+                operators = data.objects;
+            }
+
             console.log('Received operators from server', operators);
             setAll(operators);
 
@@ -90,9 +106,10 @@ define('operators', ['defer', 'jquery', 'nunjucks', 'requests', 'storage', 'urls
     // Handle submission of the operator selection form.
     }).on('submit', '#operator_selection form', function(evt) {
         evt.preventDefault();
-        var $selected = $('#operator_selection option:selected');
-        if ($selected.data('carrier')) {
-            setCurrent($selected.data('carrier'), $selected.data('region'));
+        var region = $('#operator_selection option[data-region]:selected').data('region');
+        var carrier = $('#operator_selection option[data-carrier]:selected').data('carrier');
+        if (carrier && region) {
+            setCurrent(carrier, region);
         } else {
             z.body.removeClass('show-operator_selection');
         }

src/templates/header.html

@@ -10,18 +10,38 @@ <h1 class="site"><a href="/" rel="external"><span class="wordmark">Firefox Marke
 
 <menu id="operator_selection">
   <form>
-    <label>{{ _('Switch to:') }}
-      <select>
-        <option selected>--</option>
-        {% for operator in all_operators %}
-          {% if not (operator.carrier == current_operator.carrier and operator.region == current_operator.region) %}
-            <option data-carrier="{{ operator.carrier }}" data-region="{{ operator.region }}">
-              {{ operator.carrier }} / {{ operator.region }}
-            </option>
-          {% endif %}
+
+    {# If there are more than 35 operators available, let's assume they're an admin and show each
+       possible carrier/region combination in two lists. #}
+    {% if all_operators|length > 35 %}
+      <label id="carriers">{{ _('Switch to:') }}</label>
+      <select name="carriers">
+        <option>---</option>
+        {% for carrier in carriers %}
+          <option data-carrier="{{ carrier }}"{% if carrier == current_operator.carrier %} selected{% endif %}>{{ carrier }}</option>
+        {% endfor %}
+      </select>
+      <select id="only_regions">
+        <option>---</option>
+        {% for slug, region in regions %}
+          <option data-region="{{ slug }}"{% if slug == current_operator.region %} selected{% endif %}>{{ region }}</option>
         {% endfor %}
       </select>
-    </label>
+
+    {# Otherwise, we'll just show the pairs in a single list. #}
+    {% else %}
+      <label>{{ _('Switch to:') }}
+        <select>
+          <option selected>--</option>
+          {% for operator in all_operators %}
+              <option data-carrier="{{ operator.carrier }}" data-region="{{ operator.region }}" {% if operator.carrier == current_operator.carrier and operator.region == current_operator.region %} selected{% endif %}>
+                {{ operator.carrier }} / {{ operator.region }}
+              </option>
+          {% endfor %}
+        </select>
+      </label>
+    {% endif %}
+
     <button class="button t action" type="Submit">{{ _('Go') }}</button>
   </form>
 </menu>