Browse files

Super rough, but enable/disable with set members works.

  • Loading branch information...
1 parent 72bcadd commit 316101de036addb0f59152c47cd51463c9626a7d @jnunemaker committed Feb 18, 2013
View
77 lib/flipper/ui/assets/javascripts/application.coffee
@@ -23,14 +23,36 @@ class Gate extends Spine.Model
super
url: ->
- "/flipper/features/#{encodeURIComponent @feature_id}/#{encodeURIComponent @key}"
+ "/flipper/features/#{encodeURIComponent @feature_id}/#{encodeURIComponent @name}"
- save: ->
+ disableSetMember: (member) ->
+ options =
+ type: 'POST'
+ url: @url()
+ data:
+ operation: 'disable'
+ value: member
+ success: (data, status, xhr) =>
+ @value = data.value
+ $.ajax options
+
+ enableSetMember: (member) ->
+ options =
+ type: 'POST'
+ url: @url()
+ data:
+ operation: 'enable'
+ value: member
+ success: (data, status, xhr) =>
+ @value = data.value
+ $.ajax options
+
+ save: (opts) ->
result = super
- @ajaxSave()
+ @ajaxSave(opts)
result
- ajaxSave: ->
+ ajaxSave: (opts) ->
options =
type: 'POST'
url: @url()
@@ -131,18 +153,24 @@ class App.Feature extends Spine.Controller
class App.Gate extends Spine.Controller
constructor: ->
super
- @active @render
+ @active @renderForParams
+ Gate.bind 'save', @saved
+
+ saved: (data) ->
+ console.log 'saved', data
- render: (params) ->
+ renderForParams: (params) ->
@feature = Feature.find(params.id)
@gate = @feature.gate(params.gate)
- @html @template()
+ @render()
- template: ->
- html_id = "#gate-#{@name.replace(/_/g, '-')}-template"
+ render: ->
+ @html @template("#gate-#{@name.replace(/_/g, '-')}-template", @gate)
+
+ template: (html_id, context) ->
source = $(html_id).html()
template = Handlebars.compile(source)
- template(@gate)
+ template(context)
class App.Gate.Boolean extends App.Gate
elements:
@@ -160,12 +188,37 @@ class App.Gate.Boolean extends App.Gate
@gate.value = @input.is(':checked')
@gate.save()
-class App.Gate.Group extends App.Gate
+class App.Gate.Set extends App.Gate
+ elements:
+ '.disable': 'dom_disable'
+ '.members': 'dom_members'
+ 'input[type=text]': 'dom_input'
+
+ events:
+ 'click .disable': 'disable'
+ 'submit form': 'submit'
+
+ disable: (event) ->
+ event.preventDefault()
+ member = $(event.currentTarget).closest('.member')
+ value = member.attr('data-value')
+ @gate.disableSetMember value
+ member.remove()
+
+ submit: (event) ->
+ event.preventDefault()
+ value = @dom_input.val()
+ @gate.enableSetMember value
+ html = @template "#gate-member-template", value
+ @dom_members.append html
+ @dom_input.val ''
+
+class App.Gate.Group extends App.Gate.Set
constructor: ->
@name = 'group'
super
-class App.Gate.Actor extends App.Gate
+class App.Gate.Actor extends App.Gate.Set
constructor: ->
@name = 'actor'
super
View
110 lib/flipper/ui/public/flipper/js/application.js
@@ -50,17 +50,51 @@
}
Gate.prototype.url = function() {
- return "/flipper/features/" + (encodeURIComponent(this.feature_id)) + "/" + (encodeURIComponent(this.key));
+ return "/flipper/features/" + (encodeURIComponent(this.feature_id)) + "/" + (encodeURIComponent(this.name));
};
- Gate.prototype.save = function() {
+ Gate.prototype.disableSetMember = function(member) {
+ var options,
+ _this = this;
+ options = {
+ type: 'POST',
+ url: this.url(),
+ data: {
+ operation: 'disable',
+ value: member
+ },
+ success: function(data, status, xhr) {
+ return _this.value = data.value;
+ }
+ };
+ return $.ajax(options);
+ };
+
+ Gate.prototype.enableSetMember = function(member) {
+ var options,
+ _this = this;
+ options = {
+ type: 'POST',
+ url: this.url(),
+ data: {
+ operation: 'enable',
+ value: member
+ },
+ success: function(data, status, xhr) {
+ return _this.value = data.value;
+ }
+ };
+ return $.ajax(options);
+ };
+
+ Gate.prototype.save = function(opts) {
var result;
result = Gate.__super__.save.apply(this, arguments);
- this.ajaxSave();
+ this.ajaxSave(opts);
return result;
};
- Gate.prototype.ajaxSave = function() {
+ Gate.prototype.ajaxSave = function(opts) {
var options;
options = {
type: 'POST',
@@ -240,21 +274,29 @@
function Gate() {
Gate.__super__.constructor.apply(this, arguments);
- this.active(this.render);
+ this.active(this.renderForParams);
+ Gate.bind('save', this.saved);
}
- Gate.prototype.render = function(params) {
+ Gate.prototype.saved = function(data) {
+ return console.log('saved', data);
+ };
+
+ Gate.prototype.renderForParams = function(params) {
this.feature = Feature.find(params.id);
this.gate = this.feature.gate(params.gate);
- return this.html(this.template());
+ return this.render();
};
- Gate.prototype.template = function() {
- var html_id, source, template;
- html_id = "#gate-" + (this.name.replace(/_/g, '-')) + "-template";
+ Gate.prototype.render = function() {
+ return this.html(this.template("#gate-" + (this.name.replace(/_/g, '-')) + "-template", this.gate));
+ };
+
+ Gate.prototype.template = function(html_id, context) {
+ var source, template;
source = $(html_id).html();
template = Handlebars.compile(source);
- return template(this.gate);
+ return template(context);
};
return Gate;
@@ -288,6 +330,48 @@
})(App.Gate);
+ App.Gate.Set = (function(_super) {
+
+ __extends(Set, _super);
+
+ function Set() {
+ return Set.__super__.constructor.apply(this, arguments);
+ }
+
+ Set.prototype.elements = {
+ '.disable': 'dom_disable',
+ '.members': 'dom_members',
+ 'input[type=text]': 'dom_input'
+ };
+
+ Set.prototype.events = {
+ 'click .disable': 'disable',
+ 'submit form': 'submit'
+ };
+
+ Set.prototype.disable = function(event) {
+ var member, value;
+ event.preventDefault();
+ member = $(event.currentTarget).closest('.member');
+ value = member.attr('data-value');
+ this.gate.disableSetMember(value);
+ return member.remove();
+ };
+
+ Set.prototype.submit = function(event) {
+ var html, value;
+ event.preventDefault();
+ value = this.dom_input.val();
+ this.gate.enableSetMember(value);
+ html = this.template("#gate-member-template", value);
+ this.dom_members.append(html);
+ return this.dom_input.val('');
+ };
+
+ return Set;
+
+ })(App.Gate);
+
App.Gate.Group = (function(_super) {
__extends(Group, _super);
@@ -299,7 +383,7 @@
return Group;
- })(App.Gate);
+ })(App.Gate.Set);
App.Gate.Actor = (function(_super) {
@@ -312,7 +396,7 @@
return Actor;
- })(App.Gate);
+ })(App.Gate.Set);
App.Gate.Percentage = (function(_super) {
View
40 lib/flipper/ui/views/layout.erb
@@ -73,18 +73,52 @@
</form>
</script>
+ <script id="gate-member-template" type="text/x-handlebars-template">
+ <li class="member" data-value="{{this}}">
+ {{this}}
+ <a href="#" class="disable">
+ x</a>
+ </li>
+ </script>
+
<script id="gate-group-template" type="text/x-handlebars-template">
- <ul>
+ <ul class="members">
{{#each value}}
- <li>
+ <li class="member" data-value="{{this}}">
{{this}}
+ <a href="#" class="disable">x</a>
</li>
{{/each}}
</ul>
+
+ <form action="/flipper/features/{{feature_id}}/group" method="POST">
+ <input type="hidden" name="operation" value="enable" />
+ <label>
+ Group Name
+ <input type="text" name="value" value="" />
+ </label>
+ <button>Enable Group</button>
+ </form>
</script>
<script id="gate-actor-template" type="text/x-handlebars-template">
- actor
+ <ul class="members">
+ {{#each value}}
+ <li class="member" data-value="{{this}}">
+ {{this}}
+ <a href="#" class="disable">x</a>
+ </li>
+ {{/each}}
+ </ul>
+
+ <form action="/flipper/features/{{feature_id}}/actor" method="POST">
+ <input type="hidden" name="operation" value="enable" />
+ <label>
+ Flipper Id
+ <input type="text" name="value" value="" />
+ </label>
+ <button>Enable Actor</button>
+ </form>
</script>
<script id="gate-percentage-of-actors-template" type="text/x-handlebars-template">

0 comments on commit 316101d

Please sign in to comment.