/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/okeanos-ember.js - Synnefo - Greek Research and Technology Network's projects

| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / javascripts / okeanos-ember.js @ cc5d0e0e

History | View | Annotate | Download (20.4 kB)

       /* Init Application */
       window.Synnefo = Ember.Application.create({
               currentPath: 'vms',
                LOG_TRANSITIONS: true, // To have Ember write out transition events to the log (it can be helpful to see exactly what is going on with the router)
       });
       Synnefo.ApplicationAdapter = DS.FixtureAdapter.extend();;/* Objects */
       Ember.Inflector.inflector.uncountable('account');
       Synnefo.Account = DS.Model.extend({
               email: DS.attr('string')
       });
       // CHECK can i use a single obj and not an array of obj
       Synnefo.Account.FIXTURES = {
               id: 001,
               email: "athina@mail.com"
       };
       Synnefo.Vm = DS.Model.extend({
               // id: DS.attr('number'),         we do not define it ;)
               name: DS.attr('string'),
               hostname: DS.attr('string'),
               status: DS.attr('string'),
               os: DS.attr()
       });
       Synnefo.Vm.FIXTURES =
       [{
               id: 125355,
               name: "web-server",
               hostname: "user@snf-38389.vm.okeanos.grnet.gr",
               status: "running",
               os: "kubuntu"
       },
+      {
               id: 12,
               name: "another-server",
               hostname: "user@snf-33333.vm.okeanos.grnet.gr",
               status: "off",
               os: "fedora"
       }];
       Synnefo.Network = DS.Model.extend({
               name: DS.attr('string'),
               status: DS.attr('string'),
       });
       Synnefo.Network.FIXTURES =
       [{
         id: 11,
         name: 'Network-1',
         status: 'running'
       },
+      {
         id: 22,
         name: 'Network-2',
         status: 'error'
       }];
       Synnefo.Volume = DS.Model.extend({
         name: DS.attr('string'),
         status: DS.attr('string'),
       });
       Synnefo.Volume.FIXTURES =
       [{
         id: 111,
         name: 'Volume-1',
         status: 'running'
       },
+      {
         id: 222,
         name: 'Volume-2',
         status: 'building'
       }];
       Synnefo.Snapshot = DS.Model.extend({
         name: DS.attr('string'),
         status: DS.attr('string'),
       });
       Synnefo.Snapshot.FIXTURES =
       [{
         id: 33,
         name: 'Snapshot-1',
         status: 'running'
       },
+      {
         id: 44,
         name: 'Snapshot-2',
         status: 'building'
       }];
       Synnefo.UserImage = DS.Model.extend({
         name: DS.attr('string'),
         status: DS.attr('string'),
       });
       Synnefo.UserImage.FIXTURES =
       [{
         id: 55,
         name: 'Image-1',
         status: 'running'
       },
+      {
         id: 66,
         name: 'Image-2',
         status: 'running'
       }];
       Synnefo.conf = {
         sectors: [{
                 destination: "vms",
                 title: "Virtual Machines",
                 icon: "snf-pc-outline"
         },
+        {
           destination: "networks",
           title: "Network",
                 icon: "snf-network-outline"
         },
+        {
                 destination: "volumes",
                 title: "Volumes",
                 icon: "snf-volume-outline"
         },
+        {
                 destination: "pithos",
                 title: "Pithos",
                 icon: "snf-pithos-outline"
         },
+        {
                 destination: "images",
                 title: "Images",
                 icon: "snf-image-outline"
         },
+        {
                 destination: "snapshots",
                 title: "Snapshots",
                 icon: "snf-snapshot-outline"
         },
+        {
                 destination: "ips",
                 title: "IPs",
                 icon: "snf-nic-outline"
         },
+        {
                 destination: "sshkeys",
                 title: "SSh Keys",
                 icon: "snf-key-outline"
         }],
         userActions: [{
           description:'start',
           'snf-components':['vms'],
           'enabled-status': ['off'],
           action: 'is this a function?'
         },
+        {
           description:'destroyElement',
           'snf-components': ['vms', 'networks'],
           'enabled-status': ['all'],
           action: 'is this a function?',
         },
+        {
           description:'shutdown',
           'snf-components': ['vms'],
           'enabled-status': ['running'],
           action: 'is this a function?'
         },
+        {
           description:'add machine',
           'snf-components': ['networks'],
           'enabled-status': ['active'],
           action: 'is this a function?'
         },
+        {
           description:'action for all',
           'snf-components': ['vms', 'networks'],
           'enabled-status': ['all'],
           action: 'is this a function?'
       }]
       };
       Synnefo.wizards = {
         vmWizard: {
           // each step must have a headline
           stepsHeadlines: [
+              {
                 title:'Select an OS',
                 subtitle:'Choose your preferred image'
               },
+              {
                 title:'Select CPUs, RAM and Disk Size',
                 subtitle:'Available options are filtered based on the selected image'
               },
+              {
                 title:'Virtual machine custom options',
                 subtitle:'tba'
               },
+              {
                 title:'Confirm your settings',
                 subtitle:'Confirm that the options you have selected are correct'
               },
           ],
           stepsSubmenus: [
+            {
               options:['System', 'My images', 'Shared with me', 'Public']
             },
+            {
               options: ['Small', 'Medium', 'large']
+            }
           ],
           stepsContent: ['step-1', 'step-2', 'step-3', 'step-4']
         },
         networkWizard: {}
       };/* Mapping */
       Synnefo.Router.map(function() {
       // I defined the above resource to extend its Route
       this.resource('sections', {'path':'/'});
       for(var i=0; i<Synnefo.conf.sectors.length; i++)
               this.resource(Synnefo.conf.sectors[i].destination, function() {
                       // this.route('grid');
                       // this.route('list');
                       this.route('create');
               });
       });
       /* Routes */
       Synnefo.ApplicationRoute = Ember.Route.extend({
               model: function() {
                       return {email: 'athina@mail.com'};
               },
               redirect: function() {
                       //  have to set vm navigation icon full
                       this.transitionTo('vms');
               },
       });
       /* Items Routes */
       Synnefo.SectionsRoute = Ember.Route.extend({
               modelName: undefined,
               model: function() {
                       return this.store.find(this.modelName);
               },
               renderTemplate: function(controller) {
                       this.render('snfElems', {controller: controller});
               },
               actions: {
                       openWizard: function() {
                               var wizardType = this.routeName;
                               this.transitionTo(wizardType+'.create')
+                      }
+              }
       });
       Synnefo.VmsRoute = Synnefo.SectionsRoute.extend({
               modelName: 'vm'
       });
       Synnefo.NetworksRoute = Synnefo.SectionsRoute.extend({
               modelName: 'network'
       });
       Synnefo.VolumesRoute = Synnefo.SectionsRoute.extend({
               modelName: 'volume'
       });
       Synnefo.SnapshotsRoute = Synnefo.SectionsRoute.extend({
               modelName: 'snapshot'
       });
       Synnefo.ImagesRoute = Synnefo.SectionsRoute.extend({
               modelName: 'userImage'
       });
       /* Wizards Routes */
       Synnefo.CreateRoute = Ember.Route.extend({
               model: function(){
                       return [{name: 'vm-wizard'}]
               },
               renderTemplate: function(controller) {
                       this.render('wizard',{controller: controller});
               },
       /*        beforeModel: function() {
                       this._super();
                       console.log('beforeModel ',this.get('router.url'))
                       this.previousRoute = this.get('router.url'); // should return the current path but some times it returns the path where the user was before (when i dont type the url of the wizard)
               },
               previousRoute: undefined,*/
               actions: {
                       closeWizard: function() {
                               history.back();
+                      }
+              }
       });
       Synnefo.VmsCreateRoute = Synnefo.CreateRoute.extend({
               model: function() {
                       return Synnefo.wizards.vmWizard;
+              }
       });
       Synnefo.NetworksCreateRoute = Synnefo.CreateRoute.extend();
       Synnefo.VolumesCreateRoute = Synnefo.CreateRoute.extend();
       Synnefo.SnapshotsCreateRoute = Synnefo.CreateRoute.extend();
       Synnefo.ImagesCreateRoute = Synnefo.CreateRoute.extend({});;/* Controllers */
       Synnefo.ApplicationController = Ember.Controller.extend({
               updateCurrentPath: function() {
                       // we need the set because ElemsController gets the value of current path in every transition
                       Synnefo.set('currentPath', this.get('currentPath'))
                       return this.get('currentPath');
               }.observes('currentPath'),
               pageTitle : function() {
                       var currentPath =this.get('currentPath');
                       if(currentPath!== 'index') return Synnefo.conf.sectors.findBy('destination', this.get('currentPath')).title;
                               else return 'Home';
               }.property('currentPath'),
               // name: "okeanos application",
       });
       /* Items Controllers */
       Synnefo.ElemsController = Ember.ArrayController.extend({
               type: undefined,
               itemController: function(){
                       var type = this.type;
                       return type.substring(0, type.length - 1);
               }.property(),
               icon: function() {
                       // should this be placed in ElemsView?
                       return        Synnefo.conf.sectors.findBy('destination', this.get('type')).icon.replace('outline', 'full');
               }.property(),
               hasOS: function(){
                               if(Synnefo.get('currentPath') === "vms" || Synnefo.get('currentPath') === "vms.index")
                                       return true;
                               else return false;
               }.property(),
                       hasTags: function(){
                               if(Synnefo.get('currentPath') == "vms" || Synnefo.get('currentPath') === "vms.index")
                                       return true;
                               else return false;
               }.property(),
       });
       Synnefo.VmsController = Synnefo.ElemsController.extend({
               type: 'vms'
       });
       Synnefo.NetworksController = Synnefo.ElemsController.extend({
               type: 'networks'
       });
       Synnefo.VolumesController = Synnefo.ElemsController.extend({
               type: 'volumes'
       });
       Synnefo.SnapshotsController = Synnefo.ElemsController.extend({
               type: 'snapshots'
       });
       Synnefo.ImagesController = Synnefo.ElemsController.extend({
               type: 'images'
       });
       /* Controllers for each Item */
       Synnefo.ElemController = Ember.ObjectController.extend({
               needs: [],
               actionsList: Synnefo.conf.userActions,
               setAvailableActions: function() {
                       var parent = this.needs;
                       var self = this;
                       return this.actionsList.filter(function(el) {
                               return _.contains(el['snf-components'], self.get('controllers.'+parent).type) &&( _.contains(el['enabled-status'], self.get('model.status')) || _.contains(el['enabled-status'], 'all'));
                       })
               }.property(),
               createBtn: false,
               actions: {
                       shutdown: function(param) {
                               this.set('model.status', 'shutting');
                       },
                       destroyElement: function(param) {
                               var element = this.get('model');
                               element.deleteRecord();
                               element.save();
+                      }
+              }
       });
       Synnefo.VmController = Synnefo.ElemController.extend({
               needs: ['vms']
       });
       Synnefo.NetworkController = Synnefo.ElemController.extend({
               needs: ['networks']
       });
       Synnefo.VolumeController = Synnefo.ElemController.extend({
               needs: ['volumes']
       });
       Synnefo.SnapshotController = Synnefo.ElemController.extend({
               needs: ['snapshots']
       });
       Synnefo.ImageController = Synnefo.ElemController.extend({
               needs: ['images']
       });
       /* Controllers for Wizards */
       Synnefo.CreateController = Ember.ObjectController.extend({
               currentStep: undefined,
               totalStep: function() {
                       return this.get('stepsContent').length;
               }.property(),
               init: function() {
                       this._super();
                       this.set('currentStep', 1)
               },
               btnLeftLabel: function(){
               return (this.get('currentStep') === 1)?'CANCEL':'PREVIOUS';
               }.property('currentStep'),
               btnRightLabel: function(){
               return (this.get('currentStep') === this.get('totalStep'))?'CREATE':'NEXT';
               }.property('currentStep'),
               actions: {
                       moveNext: function() {
                               var step = this.get('currentStep');
                               if(step!== this.get('totalStep')) {
                                       step++;
                                       this.set('currentStep', step);
+                              }
                               else
                                       this.get('target').send('closeWizard');
                       },
                       moveBack: function() {
                               var step = this.get('currentStep');
                               if(step === 1) {
                                       this.get('target').send('closeWizard');
+                              }
                               else {
                                       step--;
                                       this.set('currentStep', step);
+                              }
+                      }
               },
       });
       Synnefo.VmsCreateController =Synnefo.CreateController.extend();
+      ;
       /* Views */
       Synnefo.ApplicationView = Ember.View.extend({
               classNames: ['content']
       });
       /* Navigation Menu */
       Synnefo.NavIconView = Ember.View.extend({
               tagName: 'span',
               click: function() {
                       var parentEl = this.$().parent('a');
                       var currentEl = this.$().parents('li').siblings('li').find('a.current');
                       ui.replaceClass(currentEl, 'full', 'outline', 'snf-');
                       ui.replaceClass(parentEl, 'outline', 'full', 'snf-');
+              }
       });
       Synnefo.NavigationView = Ember.CollectionView.extend({
         tagName: "ul",
         classNames: ['icons-nav'],
         content: Synnefo.conf.sectors,
         itemViewClass: Ember.View.extend({
           templateName: "navigationItem"
         }),
       });
       /* Items Parts */
       Synnefo.ElemView = Ember.View.extend({
               // templateName: 'elem',
               addNewBtn: false,
               templateName: 'snfElem',
               tagName: 'li',
               selectable: true,
               initSelect: 'unchecked',
               classNameBindings: ['status'],
               attributeBindings: ['data-status'],
               'data-status': function() {
                       return this.status;
               }.property(),
               status: function() {
                       return this.get('controller.status');
               }.property('controller.status')
       });
       Synnefo.ImgWrapView = Ember.View.extend({
               templateName: 'img-wrap',
               classNames: ['img-wrap'],
               icon: function() {
                       var parentView = this.get('parentView');
                       var addNewBtn = parentView.get('addNewBtn');
                       if(addNewBtn)
                               return parentView.get('icon');
                       else
                               return parentView.get('controller').get('parentController').get('icon');
               }.property()
       });
       Synnefo.LabelNameView = Ember.View.extend({
               templateName: 'name',
               tagName: 'h4',
               name: function() {
                       // the name may be defined inside the parent view or in its model or controller
                       return this.get('parentView').get('controller').get('name');
               }.property()
       });
       // to be changed
       Synnefo.ImmediateActionView = Ember.View.extend({
               templateName: 'actions',
               classNames: ['actions']
       });
       /* Wizard */
       Synnefo.CollectionView = Ember.CollectionView.extend({
               counter: 0
       });
       // to use (extend) Synnefo.CollectionItemView must a counter to be set (initialized) in the parent view
       //  so when we want to use Synnefo.CollectionItemView, the collection that includes has extend Synnefo.CollectionView
       Synnefo.CollectionItemView = Ember.View.extend({
               // classNameBindings: ['isCurrent:current::', 'isFirst:preselected', 'isPast:past::'],
                       index: undefined,
                       isCurrent: false,
                       isFirst: false,
                       init: function() {
                               this._super();
                               var prevIndex = this.get('parentView').get('counter');
                               var index = ++prevIndex;
                               this.get('parentView').set('counter', index);
                               this.set('index', index);
                               if(index === 1) {
                                       this.set('isFirst', true);
+                              }
                       },
                       isCurrent: function() {
                               return this.index === this.get('controller').get('currentStep');
                       }.property('controller.currentStep'),
                       isPast: function() {
                               return this.index < this.get('controller').get('currentStep');
                       }.property('controller.currentStep')
               });
       Synnefo.WizardHeadersView = Synnefo.CollectionView.extend({
               tagName: 'ul',
               classNames:['nums'],
               content: Synnefo.wizards.vmWizard.stepsHeadlines,
               itemViewClass: Synnefo.CollectionItemView.extend({
                       classNameBindings: ['isCurrent:current::', 'isFirst:preselected', 'isPast:past::'],
                       templateName: 'wizardStepHeader',
               })
       });
       Synnefo.WizardSubMenusView = Synnefo.CollectionView.extend({
               classNames: ['row', 'menus'],
               content: Synnefo.wizards.vmWizard.stepsSubmenus,
               itemViewClass: Synnefo.CollectionItemView.extend({
                       tagName: 'nav',
                       classNames: ['sub-menu'],
                       classNameBindings: ['isCurrent:current::', 'isFirst:preselected', 'isPast:past::'],
                       templateName: 'submenu'
               })
       });
       Synnefo.WizardSubMenuView = Synnefo.CollectionView.extend({
               tagName: 'ul',
               content: function() {
                       var stepIndex = this.get('parentView').get('index');
                       return Synnefo.wizards.vmWizard.stepsSubmenus[--stepIndex].options;
               }.property(),
               removeOtherCurrent: function(clickedView) {
                       var childViews = this._childViews;
                       for(var i=0; i<childViews.length; i++)
                               if(childViews[i] !== clickedView)
                                       childViews[i].set('isCurrent', false);
               },
               itemViewClass: Synnefo.CollectionItemView.extend({
                       templateName: 'menuOption',
                       classNameBindings:['isCurrent:current::', 'isFirst:preselected'],
                       isCurrent: function(){
                               if(this.get('isFirst')) return true;
                       }.property(),
                       click: function() {
                               this.get('parentView').removeOtherCurrent(this);
                               this.set('isCurrent', true)
+                      }
               })
       });
       // The only buttons that are views are the buttons that move the wizard
       // The reason is that they shouldn't be isolated from the surrounding
       // (Their labels changes depanding the current step)
       Synnefo.WizardBtnBackView = Ember.View.extend({
               classNames: ['nav', 'prev'],
               tagName: 'a',
               templateName: 'components/btns-span',
               content: function(){
                       return this.get('controller').get('btnLeftLabel');
               }.property('controller.btnLeftLabel'),
               click: function() {
                       this.get('controller').send('moveBack');
+              }
       });
       Synnefo.WizardBtnNextView = Ember.View.extend({
               classNames: ['nav', 'next'],
               tagName: 'a',
               templateName: 'components/btns-span',
               content: function(){
                       return this.get('controller').get('btnRightLabel');
               }.property('controller.btnRightLabel'),
               click: function() {
                       this.get('controller').send('moveNext');
+              }
       });
       ;/* Components */
       Synnefo.Btn1Component = Ember.Component.extend({
               tagName: 'a',
               click: function() {
                       this.sendAction("action", this.get('param'));
               },
               content: undefined // will be set if we want to print a message inside the span
       });
       Synnefo.BtnsSpanComponent = Ember.Component.extend({
               tagName: 'a',
               templateName: 'components/btns-span',
               click: function() {
                       this.sendAction("action");
+              }
       });
       /* Add New Item */
       Synnefo.AddNewComponent = Ember.Component.extend({
               templateName: 'snfElem',
               addNewBtn: true,
               selectable: false,
               icon: function() {
                       baseIcon = Synnefo.conf.sectors.findBy('destination', this.get('type')).icon;
                       return        baseIcon.replace('outline', 'create-full');
               }.property(),
               tagName: 'li',
               status: 'add-new',
               classNameBindings: ['status'],
               attributeBindings: ['data-status, data-reveal-id'],
               'data-reveal-id': function(){
                       if(addNewBtn)
                               return /*this.get('type').substring(0, type.length - 1)+*/'-wizard';
                       else
                               return undefined;
               }.property(),
               'data-status': function() {
                       return this.status;
               }.property(),
               name: function() {
                       var msg = 'Create New ';
                       var btnType = this.get('type')
                       switch(btnType){
                               case 'vms':
                                       return msg + 'Machine';
                               case 'networks':
                                       return msg + 'Network';
                               case 'volumes':
                                       return msg + 'Volume';
                               case 'snapshots':
                                       return msg + 'Snapshot';
                               case 'images':
                                       return '+ Upload New Image';
+                      }
               }.property(),
                       click: function () {
                       this.sendAction('action');
+                      }
       });
       /* Login Menu */
       Synnefo.LoginMenuComponent = Ember.Component.extend({
               classNames: ['login'],
               didInsertElement: function() {
                       var self = this.$();
                       self.mouseenter(function(e){
                       self.find('ul').stop(true, true).slideDown(200);
                   });
                   self.mouseleave(function(e){
               self.find('ul').stop(true, true).slideUp(200);
           });
+              }
       });
       /* Checkboxes and Radiobuttons */
       Synnefo.SnfCheckboxComponent = Ember.Component.extend({
               tagName: 'a',
               classNames: ['check'],
               templateName: 'components/select-btn',
               initState: function() {
                       return this.get('initState');
               }.property(),
               didInsertElement: function() {
                       var el = this.$();
                       var self =this;
                       this.setInitClasses();
                       el.click(function(e) {
                   e.preventDefault();
                   e.stopPropagation();
                   self.changeState(el);
                   // ui.entitiesActionsEnabled();
               });
               },
               setInitClasses: function() {
                       var self =this.$();
                       switch(this.initState){
                               case 'unchecked': {
                                       this.uncheck(self);
                                       break;
+                              }
                               case 'prechecked': {
                                       self.find('span').addClass('prechecked')
                                       this.check(self);
                                       break;
+                              }
+                      }
               },
               // used to be in ui.checkbox
               changeState : function(checkbox_link) {
               $(checkbox_link).find('.snf-checkbox-unchecked, .snf-checkbox-checked').toggleClass('snf-checkbox-unchecked snf-checkbox-checked');
               $(checkbox_link).closest('li').toggleClass('selected');
           },
           check : function(checkbox_link) {
               $(checkbox_link).find('span').removeClass('snf-checkbox-unchecked').addClass('snf-checkbox-checked');
               $(checkbox_link).closest('li').addClass('selected');
           },
           uncheck : function(checkbox_link) {
               $(checkbox_link).find('span').removeClass('snf-checkbox-checked').addClass('snf-checkbox-unchecked');
               $(checkbox_link).closest('li').removeClass('selected');
           },
           reset: function(area) {
               $(area).find('.snf-radio-checked').not('.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked');
               $(area).find('.snf-radio-unchecked.prechecked').toggleClass('snf-radio-checked snf-radio-unchecked');
           },
       });
       /* Wizard Buttons */
       Synnefo.Close1Component = Synnefo.BtnsSpanComponent.extend({
               classNames: ['close'],
               spanClass: 'snf-close' // has to be modified to array of strings
       });
               //  there's another close icon to confirm/info modals
       /*
       Back and Next buttons are constructed as views and not as components
       {{cancel-1 action="moveBack" step=currentStep minStep=1}}
       {{next-1 action="moveNext" step=currentStep maxStep=totalStep}}
       Synnefo.Cancel1Component = Synnefo.BtnsSpanComponent.extend({
               // classNameBindings: ['el3'], the element that should be focused when the user goes to the next step
               content: 'CANCEL',
               click: function(){
                       var currentStep =this.get('step');
                       var minStep =this.get('minStep');
                       console.log('minStep ', minStep);
                       this.sendAction();
                       if(currentStep === minStep)
                               this.set('content', 'CANCEL');
                       else
                               this.set('content', 'PREVIOUS');
+              }
       //  there's another close to modals
       Synnefo.Cancel1Component = Synnefo.BtnsSpanComponent.extend({
               classNames: ['nav', 'prev'],
               // classNameBindings: ['el3'], the element that should be focused when the user goes to the next step
               content: 'CANCEL'
       });
       Synnefo.Next1Component = Synnefo.BtnsSpanComponent.extend({
               classNames: ['nav', 'next'],
               // classNameBindings: ['el3'], the element that should be focused when the user goes to the next step
               content: 'NEXT',
               click: function() {
                       var currentStep =this.get('step');
                       var maxStep =this.get('maxStep');
                       this.sendAction('action');
                       if(currentStep === maxStep)
                               this.set('content', 'CREATE');
                       else
                               this.set('content', 'NEXT');
+              }
       }); */