vines-services 0.1.0 → 0.1.1

data/web/javascripts/services.js

@@ -0,0 +1,404 @@
+var ServicesPage;
+var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+ServicesPage = (function() {
+  var ATTRS, MEMBERS, SERVICES, SYSTEMS, USERS;
+  SERVICES = 'http://getvines.com/protocol/services';
+  MEMBERS = 'http://getvines.com/protocol/services/members';
+  SYSTEMS = 'http://getvines.com/protocol/systems';
+  ATTRS = 'http://getvines.com/protocol/systems/attributes';
+  USERS = 'http://getvines.com/protocol/users';
+  function ServicesPage(session) {
+    this.session = session;
+    this.api = new Api(this.session);
+    this.selectedService = null;
+    this.validateTimeout = null;
+    this.layout = null;
+    this.users = [];
+  }
+  ServicesPage.prototype.deleteService = function(event) {
+    var selected;
+    this.drawBlankSlate();
+    this.toggleForm('#remove-contact-form');
+    selected = $("#services li[data-id='" + this.selectedService.id + "']");
+    this.api.remove(SERVICES, this.selectedService.id, __bind(function(result) {
+      return selected.fadeOut(200, function() {
+        selected.remove();
+        return this.selectedService = null;
+      });
+    }, this));
+    return false;
+  };
+  ServicesPage.prototype.icon = function(member) {
+    var icon, icons;
+    icons = {
+      darwin: 'mac.png',
+      linux: 'linux.png',
+      windows: 'windows.png'
+    };
+    icon = icons[member.os] || 'run.png';
+    return "images/" + icon;
+  };
+  ServicesPage.prototype.drawMember = function(member) {
+    var node;
+    if (!this.editorVisible()) {
+      return;
+    }
+    node = $("<li>\n  <span class=\"icon\"><img src=\"" + (this.icon(member)) + "\"/></span>\n  <span class=\"text\"></span>\n</li>").appendTo('#members');
+    return $('.text', node).text(member.name);
+  };
+  ServicesPage.prototype.operators = function() {
+    var node, operator, _i, _len, _ref, _results;
+    _ref = ['like', 'not like', 'starts with', 'ends with', 'is', 'is not', '>', '>=', '<', '<=', 'and', 'or'];
+    _results = [];
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      operator = _ref[_i];
+      node = $("<li data-selector=\"" + operator + "\">\n  " + operator + "\n</li>").appendTo('#operators');
+      _results.push(node.click(__bind(function(event) {
+        var name;
+        $('#syntax').focus();
+        name = $(event.currentTarget).attr('data-selector');
+        $('#syntax').val($('#syntax').val() + (" " + name + " "));
+        return this.validateIn();
+      }, this)));
+    }
+    return _results;
+  };
+  ServicesPage.prototype.selectService = function(node) {
+    var id, name;
+    id = $(node).attr('data-id');
+    name = $(node).attr('data-name');
+    $('#services li').removeClass('selected');
+    $(node).addClass('selected');
+    $('#remove-service-msg').html("Are you sure you want to remove the " + ("<strong>" + name + "</strong> service?"));
+    $('#remove-service-form .buttons').fadeIn(200);
+    return this.api.get(SERVICES, {
+      id: id
+    }, __bind(function(result) {
+      this.selectedService = result;
+      return this.drawEditor(result);
+    }, this));
+  };
+  ServicesPage.prototype.serviceNode = function(service) {
+    var label, node;
+    label = service.size === 1 ? 'system' : 'systems';
+    node = $("<li data-id=\"" + service.id + "\" data-name=\"\" data-size=\"" + service.size + "\">\n  <span class=\"text\">" + service.name + "</span>\n  <span class=\"count\">" + service.size + " " + label + "</span>\n</li>").appendTo('#services');
+    node.attr('data-name', service.name);
+    $('.text', node).text(service.name);
+    node.click(__bind(function(event) {
+      return this.selectService(event.currentTarget);
+    }, this));
+    return node;
+  };
+  ServicesPage.prototype.findServices = function() {
+    return this.api.get(SERVICES, {}, __bind(function(result) {
+      var row, _i, _len, _ref, _results;
+      _ref = result.rows;
+      _results = [];
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        row = _ref[_i];
+        _results.push(this.serviceNode(row));
+      }
+      return _results;
+    }, this));
+  };
+  ServicesPage.prototype.findMembers = function(id) {
+    return this.api.get(MEMBERS, {
+      id: id
+    }, __bind(function(result) {
+      var row, _i, _len, _ref, _results;
+      _ref = result.rows;
+      _results = [];
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        row = _ref[_i];
+        _results.push(this.drawMember(row));
+      }
+      return _results;
+    }, this));
+  };
+  ServicesPage.prototype.findUsers = function(syntax) {
+    return this.api.get(USERS, {}, __bind(function(result) {
+      var row;
+      this.users = (function() {
+        var _i, _len, _ref, _results;
+        _ref = result.rows;
+        _results = [];
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          row = _ref[_i];
+          if (!row.system) {
+            _results.push(row);
+          }
+        }
+        return _results;
+      })();
+      return this.drawUsers();
+    }, this));
+  };
+  ServicesPage.prototype.attributeNode = function(attribute) {
+    var node;
+    node = $('<li data-name=""></li>').appendTo('#attributes');
+    node.text(attribute);
+    node.attr('data-name', attribute);
+    return node.click(__bind(function(event) {
+      var name;
+      $('#syntax').focus();
+      name = $(event.currentTarget).attr('data-name');
+      $('#syntax').val($('#syntax').val() + (" " + name + " "));
+      return this.validateIn();
+    }, this));
+  };
+  ServicesPage.prototype.findAttributes = function(syntax) {
+    return this.api.get(ATTRS, {}, __bind(function(result) {
+      var row, _i, _len, _ref, _results;
+      _ref = result.rows;
+      _results = [];
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        row = _ref[_i];
+        _results.push(this.attributeNode(row));
+      }
+      return _results;
+    }, this));
+  };
+  ServicesPage.prototype.validateIn = function(millis) {
+    clearTimeout(this.validateTimeout);
+    return this.validateTimeout = setTimeout((__bind(function() {
+      return this.validate();
+    }, this)), millis || 500);
+  };
+  ServicesPage.prototype.validate = function() {
+    var code, prev;
+    $('#syntax-status').text('');
+    prev = $('#syntax').data('prev');
+    code = $.trim($('#syntax').val());
+    $('#syntax').data('prev', code);
+    if (!(code && code !== prev)) {
+      return;
+    }
+    $('#syntax-status').text('Searching . . .');
+    $('#members').empty();
+    return this.api.get2(MEMBERS, code, __bind(function(result) {
+      var row, _i, _len, _ref, _results;
+      if (result.ok) {
+        $('#syntax-status').text('');
+        _ref = result.rows;
+        _results = [];
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          row = _ref[_i];
+          _results.push(this.drawMember(row));
+        }
+        return _results;
+      } else {
+        return $('#syntax-status').text(result.error);
+      }
+    }, this));
+  };
+  ServicesPage.prototype.validateForm = function() {
+    var name, valid;
+    $('#name-error').empty();
+    valid = true;
+    name = $.trim($('#name').val());
+    if (name === '') {
+      $('#name-error').text('Name is required.');
+      valid = false;
+    }
+    return valid;
+  };
+  ServicesPage.prototype.save = function() {
+    var accounts, service, u, users;
+    if (!this.validateForm()) {
+      return;
+    }
+    users = $('#users :checked').map(function() {
+      return $(this).val();
+    }).get();
+    accounts = $('#unix-users').val().split(',');
+    accounts = (function() {
+      var _i, _len, _results;
+      _results = [];
+      for (_i = 0, _len = accounts.length; _i < _len; _i++) {
+        u = accounts[_i];
+        if ($.trim(u).length > 0) {
+          _results.push($.trim(u));
+        }
+      }
+      return _results;
+    })();
+    service = {
+      name: $('#name').val(),
+      code: $('#syntax').val(),
+      accounts: accounts,
+      users: users
+    };
+    if ($('#id').val().length > 0) {
+      service['id'] = $('#id').val();
+    }
+    this.api.save(SERVICES, service, __bind(function(result) {
+      var node;
+      new Notification('Service saved successfully');
+      result.size = $('#members').length;
+      $('#id').val(result.id);
+      node = $("#services li[data-id='" + result.id + "']");
+      if (node.length === 0) {
+        node = this.serviceNode(result);
+        return this.selectService(node);
+      } else {
+        return $('.text', node).text(result.name);
+      }
+    }, this));
+    return false;
+  };
+  ServicesPage.prototype.drawBlankSlate = function() {
+    $('#beta').empty();
+    $("<form id=\"blank-slate\">\n  <p>\n    Services are dynamically updated groups of systems based on\n    criteria you define. Send a command to the service and it runs\n    on every system in the group.\n  </p>\n  <input type=\"submit\" id=\"blank-slate-add\" value=\"Add Service\"/>\n</form>").appendTo('#beta');
+    if (!this.api.user.permissions.services) {
+      $('#blank-slate-add').remove();
+    }
+    return $('#blank-slate').submit(__bind(function() {
+      this.drawEditor();
+      return false;
+    }, this));
+  };
+  ServicesPage.prototype.draw = function() {
+    var fn;
+    if (!this.session.connected()) {
+      window.location.hash = '';
+      return;
+    }
+    $('body').attr('id', 'services-page');
+    $('#container').hide().empty();
+    $("<div id=\"alpha\" class=\"sidebar column y-fill\">\n  <h2>Services <div id=\"search-services-icon\"></div></h2>\n  <div id=\"search-services-form\"></div>\n  <ul id=\"services\" class=\"selectable scroll y-fill\"></ul>\n  <div id=\"alpha-controls\" class=\"controls\">\n    <div id=\"add-service\"></div>\n    <div id=\"remove-service\"></div>\n  </div>\n  <form id=\"remove-service-form\" class=\"overlay\" style=\"display:none;\">\n    <h2>Remove Service</h2>\n    <p id=\"remove-service-msg\">Select a service in the list above to remove.</p>\n    <fieldset class=\"buttons\" style=\"display:none;\">\n      <input id=\"remove-service-cancel\" type=\"button\" value=\"Cancel\"/>\n      <input id=\"remove-service-ok\" type=\"submit\" value=\"Remove\"/>\n    </fieldset>\n  </form>\n</div>\n<div id=\"beta\" class=\"primary column x-fill y-fill\"></div>\n<div id=\"charlie\" class=\"sidebar column y-fill\">\n  <h2>Operators</h2>\n  <ul id=\"operators\"></ul>\n  <h2>Attributes <div id=\"search-attributes-icon\"></div></h2>\n  <div id=\"search-attributes-form\"></div>\n  <ul id=\"attributes\" class=\"y-fill scroll\"></ul>\n</div>").appendTo('#container');
+    new Button('#add-service', ICONS.plus);
+    new Button('#remove-service', ICONS.minus);
+    if (!this.api.user.permissions.services) {
+      $('#alpha-controls div').remove();
+    }
+    this.drawBlankSlate();
+    $('#add-service').click(__bind(function() {
+      return this.drawEditor();
+    }, this));
+    $('#remove-service').click(__bind(function() {
+      return this.toggleForm('#remove-service-form');
+    }, this));
+    $('#remove-service-cancel').click(__bind(function() {
+      return this.toggleForm('#remove-service-form');
+    }, this));
+    $('#remove-service-form').submit(__bind(function() {
+      return this.deleteService();
+    }, this));
+    this.operators();
+    this.findServices();
+    this.findAttributes();
+    this.findUsers();
+    $('#container').show();
+    this.layout = this.resize();
+    fn = __bind(function() {
+      this.layout.resize();
+      return this.layout.resize();
+    }, this);
+    new Filter({
+      list: '#services',
+      icon: '#search-services-icon',
+      form: '#search-services-form',
+      attrs: ['data-name'],
+      open: fn,
+      close: fn
+    });
+    return new Filter({
+      list: '#attributes',
+      icon: '#search-attributes-icon',
+      form: '#search-attributes-form',
+      attrs: ['data-name'],
+      open: fn,
+      close: fn
+    });
+  };
+  ServicesPage.prototype.drawEditor = function(service) {
+    if (!this.pageVisible()) {
+      return;
+    }
+    if (!service) {
+      this.selectedService = null;
+      $('#services li').removeClass('selected');
+    }
+    $('#beta').empty();
+    $("<form id=\"editor-form\" class=\"sections y-fill scroll\">\n  <input id=\"id\" type=\"hidden\"/>\n  <div>\n    <section>\n      <h2>Service</h2>\n      <fieldset>\n        <label for=\"name\">Name</label>\n        <input id=\"name\" type=\"text\"/>\n        <p id=\"name-error\" class=\"error\"></p>\n        <label for=\"syntax\">Criteria</label>\n        <textarea id=\"syntax\" placeholder=\"fqdn starts with 'www.' and platform is 'mac_os_x'\"></textarea>\n        <p id=\"syntax-status\"></p>\n      </fieldset>\n    </section>\n    <section>\n      <h2>Members</h2>\n      <fieldset id=\"service-preview\">\n        <ul id=\"members\" class=\"scroll\"></ul>\n      </fieldset>\n    </section>\n    <section>\n      <h2>Permissions</h2>\n      <fieldset>\n        <label>Users</label>\n        <ul id=\"users\" class=\"scroll\"></ul>\n        <label for=\"unix-users\">Unix Accounts</label>\n        <input id=\"unix-users\" type=\"text\"/>\n      </fieldset>\n    </section>\n  </div>\n</form>\n<form id=\"editor-buttons\">\n  <input id=\"save\" type=\"submit\" value=\"Save\"/>\n</form>").appendTo('#beta');
+    if (service) {
+      this.findMembers(service.id);
+      $('#id').val(service.id);
+      $('#name').val(service.name);
+      $('#syntax').val(service.code);
+      $('#unix-users').val(service.accounts.join(', '));
+    }
+    if (this.users.length > 0) {
+      this.drawUsers();
+    }
+    this.layout.resize();
+    $('#name').focus();
+    $('#syntax').change(__bind(function() {
+      return this.validateIn();
+    }, this));
+    $('#syntax').keyup(__bind(function() {
+      return this.validateIn();
+    }, this));
+    $('#editor-form').submit(__bind(function() {
+      return this.save();
+    }, this));
+    return $('#editor-buttons').submit(__bind(function() {
+      return this.save();
+    }, this));
+  };
+  ServicesPage.prototype.drawUsers = function() {
+    var node, user, _i, _len, _ref;
+    if (!this.editorVisible()) {
+      return;
+    }
+    $('#users').empty();
+    _ref = this.users;
+    for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+      user = _ref[_i];
+      node = $("<li>\n  <input id='user-" + user.jid + "' type='checkbox' value='" + user.jid + "'/>\n  <label for='user-" + user.jid + "'>" + user.jid + "</label>\n</li>").appendTo('#users');
+      if (user.jid === this.session.bareJid()) {
+        $('input', node).prop('checked', true);
+      }
+    }
+    if (this.selectedService) {
+      return $('#users input[type="checkbox"]').val(this.selectedService.users);
+    }
+  };
+  ServicesPage.prototype.toggleForm = function(form, fn) {
+    form = $(form);
+    $('form.overlay').each(function() {
+      if (this.id !== form.attr('id')) {
+        return $(this).hide();
+      }
+    });
+    if (form.is(':hidden')) {
+      if (fn) {
+        fn();
+      }
+      return form.fadeIn(100);
+    } else {
+      return form.fadeOut(100, function() {
+        form[0].reset();
+        if (fn) {
+          return fn();
+        }
+      });
+    }
+  };
+  ServicesPage.prototype.pageVisible = function() {
+    return $('#services-page').length > 0;
+  };
+  ServicesPage.prototype.editorVisible = function() {
+    return $('#services-page #editor-form').length > 0;
+  };
+  ServicesPage.prototype.resize = function() {
+    var a, b, c;
+    a = $('#alpha');
+    b = $('#beta');
+    c = $('#charlie');
+    return new Layout(function() {
+      return c.css('left', a.width() + b.width());
+    });
+  };
+  return ServicesPage;
+})();