dropdown on categorypage

app/assets/javascripts/discourse/models/category.js

@@ -157,6 +157,22 @@ Discourse.Category = Discourse.Model.extend({
     return this.countStats('topics');
   }.property('posts_year', 'posts_month', 'posts_week', 'posts_day'),
 
+  notification_level: function () {
+    return this.get('notification_level');
+  }.property('notification_level'),
+
+  setNotification: function (notification_level) {
+    //console.log("inside category.js");
+    var url = "/category/" + this.get('id')+"/notifications";
+    this.set('notification_level', notification_level)
+    return Discourse.ajax(url, {
+      data: {
+        notification_level: notification_level
+      },
+      type: 'POST'
+    });
+  },
+
   postCountStats: function() {
     return this.countStats('posts');
   }.property('posts_year', 'posts_month', 'posts_week', 'posts_day'),
@@ -178,6 +194,13 @@ Discourse.Category = Discourse.Model.extend({
 
 Discourse.Category.reopenClass({
 
+  NotificationLevel: {
+    WATCHING: 3,
+    TRACKING: 2,
+    REGULAR: 1,
+    MUTED: 0
+  },
+
   slugFor: function(category) {
     if (!category) return "";
 

app/assets/javascripts/discourse/templates/navigation/category.js.handlebars

@@ -7,6 +7,8 @@
   {{customHTML "extraNavItem"}}
 </ul>
 
+{{view Discourse.CategoryNotificationsButton categoryBinding="model" category=category}}
+
 {{#if canCreateTopic}}
   <button id="create-topic" class='btn btn-default' {{action createTopic}}><i class='fa fa-plus'></i>{{i18n topic.create}}</button>
 {{/if}}

app/assets/javascripts/discourse/views/buttons/category_notification_dropdown_view.js

@@ -0,0 +1,50 @@
+/**
+  This view handles rendering of a button with an associated drop down
+
+  @class CategoryNotificationDropdownButtonView
+  @extends Discourse.View
+  @namespace Discourse
+  @module Discourse
+**/
+Discourse.CategoryNotificationDropdownButtonView = Discourse.View.extend({
+  classNameBindings: [':btn-group', 'hidden'],
+  shouldRerender: Discourse.View.renderIfChanged('text', 'text'),
+
+  didInsertElement: function() {
+    // If there's a click handler, call it
+    if (this.clicked) {
+      var dropDownButtonView = this;
+      this.$('ul li').on('click.dropdown-button', function(e) {
+        e.preventDefault();
+        dropDownButtonView.clicked($(e.currentTarget).data('id'));
+        return false;
+      });
+    }
+  },
+
+  willDestroyElement: function() {
+    this.$('ul li').off('click.dropdown-button');
+  },
+
+  render: function(buffer) {
+    buffer.push("<button class='btn standard dropdown-toggle' data-toggle='dropdown'>");
+    buffer.push(this.get('text'));
+    buffer.push("</button>");
+    
+    buffer.push("<ul class='notification-dropdown-menu'>");
+
+    _.each(this.get('dropDownContent'), function(row) {
+      var id = row[0],
+          textKey = row[1],
+          title = I18n.t(textKey + ".title"),
+          description = I18n.t(textKey + ".description");
+
+      buffer.push("<li data-id=\"" + id + "\"><a href='#'>");
+      buffer.push("<span class='title'>" + title + "</span>");
+      buffer.push("<span>" + description + "</span>");
+      buffer.push("</a></li>");
+    });
+    buffer.push("</ul>");
+    
+  }
+});

app/assets/javascripts/discourse/views/buttons/category_notifications_button.js

@@ -0,0 +1,65 @@
+/**
+  A button to display notification options for categories.
+
+  @class NotificationsButton
+  @extends Discourse.DropdownButtonView
+  @namespace Discourse
+  @module Discourse
+**/
+Discourse.CategoryNotificationsButton = Discourse.CategoryNotificationDropdownButtonView.extend({
+  classNames: ['notification-options'],
+  //title: I18n.t('category.notifications.title'),
+  //longDescriptionBinding: 'topic.details.notificationReasonText',
+  //topic: Em.computed.alias('controller.model'),
+  category: Em.computed.alias('controller.model'),
+  hidden: Em.computed.alias('topic.deleted'),
+
+  dropDownContent: function() {
+    var contents = [];
+
+    _.each([
+      ['WATCHING', 'watching'],
+      ['TRACKING', 'tracking'],
+      ['REGULAR', 'regular'],
+      ['MUTED', 'muted']
+    ], function(pair) {
+
+      if (pair[1] === 'regular') { return; }
+
+      contents.push([
+          Discourse.Category.NotificationLevel[pair[0]],
+          'category.notifications.' + pair[1]
+        ]);
+    });
+
+    return contents;
+  }.property(),
+
+  // displayed Button
+  text: function() {
+    var key = (function() {
+      switch (this.get('category.notification_level')) {
+        case Discourse.Category.NotificationLevel.WATCHING: return 'watching';
+        case Discourse.Category.NotificationLevel.TRACKING: return 'tracking';
+        case Discourse.Category.NotificationLevel.MUTED: return 'muted';
+        default: return 'regular';
+      }
+    }).call(this);
+
+    var icon = (function() {
+      switch (key) {
+        case 'watching': return '<i class="fa fa-circle heatmap-high"></i>&nbsp;';
+        case 'tracking': return '<i class="fa fa-circle heatmap-low"></i>&nbsp;';
+        case 'muted': return '<i class="fa fa-times-circle"></i>&nbsp;';
+        default: return '';
+      }
+    })();
+    return icon + (I18n.t("category.notifications." + key + ".title")) + "<span class='caret'></span>";
+  }.property('category.notification_level'),
+
+  clicked: function(id) {
+    return this.get('category').setNotification(id);
+  }
+
+});
+