arangodb/js/apps/system/aardvark/frontend/js/views/applicationsView.js

/*jslint indent: 2, nomen: true, maxlen: 100, sloppy: true, vars: true, white: true, plusplus: true */
/*global Backbone, EJS, $, window, arangoHelper, templateEngine, _, console */

window.ApplicationsView = Backbone.View.extend({
  el: '#content',

  template: templateEngine.createTemplate("applicationsView.ejs"),

  events: {
    "click .toggle-icon": "toggleView",
    "click #checkDevel": "toggleDevel",
    "click #checkActive": "toggleActive",
    "click #checkInactive": "toggleInactive",
    "click #foxxToggle": "slideToggle",
    "click #importFoxxToggle": "slideToggleImport",
    "change #importFoxx": "uploadSetup",
    "click #confirmFoxxImport": "importFoxx"
  },

  uploadSetup: function (e) {
    var files = e.target.files || e.dataTransfer.files;
    this.file = files[0];
    this.allowUpload = true;
    console.log("Checked file");
  },

  importFoxx: function() {
    var self = this;
    if (self.allowUpload) {
      console.log("Start Upload");
      $.ajax({
        type: "POST",
        async: false,
        url: '/_api/upload',
        data: self.file,
        processData: false,
        contentType: 'application/octet-stream',
        complete: function(res) {
          if (res.readyState === 4) {
            if (res.status === 201) {
              try {
                $.ajax({
                  type: "POST",
                  async: false,
                  url: "/_admin/aardvark/foxxes/inspect",
                  data: res.responseText,
                  contentType: "application/json"
                }).done(function(res) {
                  // TODO: remove logs, report errors etc.
                  console.log("Pos:", res);
                  
                  $.ajax({
                    type: "POST",
                    async: false,
                    url: '/_admin/foxx/fetch',
                    data: JSON.stringify({ 
                      name: res.name,
                      version: res.version,
                      filename: res.filename
                    }),
                    processData: false
                  }).done(function (res) {
                    console.log(res);
                    // TODO: reload UI
                  }).fail(function (res) {
                    console.log(res);
                  });

                }).fail(function(err) {
                  console.log("Neg:", err);
                });
              } catch (e) {
                arangoHelper.arangoError("Error: " + e);
              }
              delete self.file;
              self.allowUpload = false;
              /*
              self.hideSpinner();
              self.hideImportModal();
              self.resetView();
              */
              return;
            }
          }
          // self.hideSpinner();
          arangoHelper.arangoError("Upload error");
        }
      });
    }
  },
  
  toggleDevel: function() {
    var self = this;
    this._showDevel = !this._showDevel;
    _.each(this._installedSubViews, function(v) {
      v.toggle("devel", self._showDevel);
    });
  },
  
  toggleActive: function() {
    var self = this;
    this._showActive = !this._showActive;
    _.each(this._installedSubViews, function(v) {
      v.toggle("active", self._showActive);
    });
  },
  
  toggleInactive: function() {
    var self = this;
    this._showInactive = !this._showInactive;
    _.each(this._installedSubViews, function(v) {
      v.toggle("inactive", self._showInactive);
    });
  },

  slideToggleImport: function() {
    $('#foxxDropdownImport').slideToggle(200);
    $('#foxxDropdownOut').hide();
  },

  slideToggle: function() {
    $('#foxxDropdownOut').slideToggle(200);
    $('#foxxDropdownImport').hide();
  },

  toggleView: function(event) {
    var target = $(event.currentTarget);
    var type = target.attr("id");
    var close = target.hasClass("icon-minus");
    var selector = "";
    if (type === "toggleInstalled") {
      selector = "#installedList";
    } else if (type === "toggleAvailable") {
      selector = "#availableList";
    }
    if (close) {
      $(selector).hide();
    } else {
      $(selector).show();
    }
    target.toggleClass("icon-minus");
    target.toggleClass("icon-plus");
    event.stopPropagation();
  },
  
  reload: function() {
    var self = this;

    // unbind and remove any unused views
    _.each(this._installedSubViews, function (v) {
      v.undelegateEvents();
    });
    _.each(this._availableSubViews, function (v) {
      v.undelegateEvents();
    });

    this._installedSubViews = { };
    this._availableSubViews = { };

    this.collection.fetch({
      success: function() {
        self.collection.each(function (foxx) {
          var subView;
          if (foxx.get("type") === "app") {
            subView = new window.FoxxInstalledView({model: foxx});
            self._availableSubViews[foxx.get('_id')] = subView;
          } else if (foxx.get("type") === "mount") {
            subView = new window.FoxxActiveView({model: foxx});
            self._installedSubViews[foxx.get('_id')] = subView;
          }
        });
        self.render();
      }
    });
  },
  
  initialize: function() {    
    this._installedSubViews = {};
    this._availableSubViews = {};
    this._showDevel = true;
    this._showActive = true;
    this._showInactive = true;
    this.reload();
  },
  
  render: function() {
    $(this.el).html(this.template.text);
    var self = this;
    _.each(this._installedSubViews, function (v) {
      $("#installedList").append(v.render());
    });
    _.each(this._availableSubViews, function (v) {
      $("#availableList").append(v.render());
    });
    this.delegateEvents();
    $('#checkActive').attr('checked', this._showActive);
    $('#checkInactive').attr('checked', this._showInactive);
    $('#checkDevel').attr('checked', this._showDevel);
    _.each(this._installedSubViews, function(v) {
      v.toggle("devel", self._showDevel);
      v.toggle("active", self._showActive);
      v.toggle("inactive", self._showInactive);
    });
  
    arangoHelper.fixTooltips(".glyphicon", "left");
    return this;
  }
});