version control for foxx apps

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

@@ -246,12 +246,54 @@ window.ApplicationsView = Backbone.View.extend({
 
   render: function() {
     $(this.el).html(this.template.render({}));
-    var self = this;
+    var self = this, name;
+    var versions = {};
+
     _.each(this._installedSubViews, function (v) {
       $("#installedList").append(v.render());
     });
     _.each(this._availableSubViews, function (v) {
+      name = v.model.get("name");
+
+      //look which installed apps have multiple versions
+      if (versions[name]) {
+        versions[name].counter++;
+        versions[name].versions.push(v.model.get("version"));
+      }
+      else {
+        versions[name] = {
+          counter: 1,
+          versions: [v.model.get("version")]
+        };
+      }
+    });
+    _.each(this._availableSubViews, function (v) {
+      var name = v.model.get("name"),
+      version = v.model.get("version");
+      if (versions[name].counter > 1 ) {
+        //here comes special render for multiple versions view
+
+        var highestVersion = "0.0.0";
+        var selectOptions = "";
+
+        _.each(versions[name].versions, function(x) {
+          selectOptions += '<option>'+x+'</option>';
+          if (x > highestVersion) {
+            highestVersion = x;
+          }
+        });
+
+        if (version === highestVersion) {
+          v.model.set("highestVersion", highestVersion);
+          v.model.set("versions", versions[name].versions);
+          v.model.set("selectOptions", selectOptions);
+
           $("#availableList").append(v.render());
+        }
+      }
+      else {
+        $("#availableList").append(v.render());
+      }
     });
     this.delegateEvents();
     $('#checkActive').attr('checked', this._showActive);

js/apps/system/aardvark/frontend/js/views/foxxInstalledView.js

@@ -10,7 +10,28 @@
 
     events: {
       'click .install': 'installDialog',
-      'click .purge': 'removeDialog'
+      'click .purge': 'removeDialog',
+      'change select' : 'renderVersion'
+    },
+
+    renderVersion: function(e) {
+      var name = this.model.get("name"),
+      selectOptions = this.model.get("selectOptions"),
+      versionToRender = $('#'+name+'Select').val();
+      this.model.set("activeVersion", versionToRender);
+
+      var toRender = this.model.collection.findWhere({
+        name: name,
+        version: versionToRender
+      });
+
+
+      $('#'+name+'Select').parent().remove();
+
+      this.renderVersionModel(toRender, name, selectOptions, versionToRender);
+      this.initialize();
+      //window.App.applicationsView.reload();
+
     },
 
     initialize: function(){
@@ -148,9 +169,36 @@
       });
     },
 
+    renderVersionModel: function(model, name, selectOptions, activeVersion) {
+        $(this.el).html(this.template.render(model)).append(
+          '<div class="tileSelects"><select id="'+name+'Select">'+selectOptions+'</select></div>'
+        );
+
+        window.setTimeout(function() {
+          $('#'+name+'Select').val(activeVersion);
+        }, 100);
+
+    },
+
     render: function(){
+      var name = this.model.get("name"),
+      selectOptions = this.model.get("selectOptions"),
+      activeVersion = this.model.get("activeVersion");
+
+      if (activeVersion === 0 || activeVersion === undefined) {
+        activeVersion = this.model.get("highestVersion");
+      }
+
+      //if multiple versions are installed
+      if (this.model.get("highestVersion")) {
+        this.renderVersionModel(this.model, name, selectOptions, activeVersion);
+      }
+      else {
         $(this.el).html(this.template.render(this.model));
+      }
+
       return $(this.el);
     }
+
   });
 }());

js/apps/system/aardvark/frontend/scss/_tiles.scss

@@ -88,6 +88,20 @@ $iconsize: 50px;
     white-space: nowrap !important;
   }
 
+  div.tileSelects {
+    margin-left: 40px;
+    position: relative;
+    z-index: 9999;
+
+    select {
+      float: right;
+      height: 20px;
+      margin-right: 5px;
+      margin-top: 16px;
+      width: 70px;
+    }
+  }
+
   div.iconSet {
     position: absolute;
     right: 5px;

js/apps/system/aardvark/frontend/scss/generated.css

@@ -2019,6 +2019,16 @@ div .tile, div .bigtile {
     padding: 4px 8px;
     text-overflow: ellipsis !important;
     white-space: nowrap !important; }
+  div .tile div.tileSelects, div .bigtile div.tileSelects {
+    margin-left: 40px;
+    position: relative;
+    z-index: 9999; }
+    div .tile div.tileSelects select, div .bigtile div.tileSelects select {
+      float: right;
+      height: 20px;
+      margin-right: 5px;
+      margin-top: 16px;
+      width: 70px; }
   div .tile div.iconSet, div .bigtile div.iconSet {
     position: absolute;
     right: 5px;