Show the list of subscribers for each stream on the subscriptions page

(imported from commit 1d092f8ad36d48e1f83df185c2b4f2a9667d4943)

zephyr/jstemplates/subscription.html

@@ -16,6 +16,12 @@
         <li><span class="sub_setting_control"><input class="colorpicker" type="text" value="{{color}}" /></span>
           Stream color
       </ul>
+      <h5>Subscribers</h5>
+      <div class="subscriber_list_container">
+        <div class="alert alert-error hide"></div>
+        <ul>
+        </ul>
+      </div>
     </div>
   </td>
 </tr>

zephyr/static/js/subs.js

@@ -288,6 +288,32 @@ $(function () {
         e.preventDefault();
         ajaxSubscribe($("#streams").val());
     });
+
+
+    $("#subscriptions_table").on("show", ".subscription_settings", function (e) {
+        var sub_row = $(e.target).closest('.subscription_row');
+        var stream = sub_row.find('.subscription_name').text();
+        var error_elem = sub_row.find('.subscriber_list_container .alert');
+        var list = sub_row.find('.subscriber_list_container ul');
+        error_elem.addClass('hide');
+        list.empty();
+
+        // TODO: Show a spinner while the list is loading
+        $.ajax({
+            type: "POST",
+            url: "/json/get_subscribers",
+            dataType: 'json', // This seems to be ignored. We still get back an xhr.
+            data: {stream: stream},
+            success: function (data) {
+                $.each(data.subscribers, function (idx, elem) {
+                    list.append('<li>' + elem);
+                });
+            },
+            error: function (xhr) {
+                error_elem.removeClass("hide").text("Could not fetch subscriber list");
+            }
+        });
+    });
 });
 
 return exports;

zephyr/static/styles/zephyr.css

@@ -631,6 +631,11 @@ table.floating_recipient {
     float: right;
 }
 
+.subscriber_list_container {
+    max-height: 200px;
+    overflow: auto;
+}
+
 #invite_user_form {
     margin-bottom: 0px;
 }