wakame-vdc-webui 10.11.0

data/public/javascripts/dcmgr_gui/application.js

@@ -0,0 +1,91 @@
+// Place your application-specific JavaScript functions and classes here
+// This file is automatically included by javascript_include_tag :defaults
+
+//<![CDATA[
+jQuery(function($){
+
+	//サイドメニュー開閉関数
+	var regionpos = 0;
+	$('#regionselect').click(function () {
+		if(regionpos==0){regionpos+=33;}else{regionpos=0;}
+		$('#regionselect').css("background-position","0px -"+regionpos+"px");
+		$('#regionmenu').toggle();
+	});
+	
+	$('#regionmenu li a').click(function () {
+		if(regionpos==0){regionpos+=33;}else{regionpos=0;}
+		$('#regionselect').css("background-position","0px -"+regionpos+"px");
+		$('#regionselect').html($(this).html());
+		$('#regionmenu').toggle();
+	});
+	
+	//maincontent開閉関数
+  $('.showhide').click(function(){
+   $(this).parent().next().toggle();//開閉
+   //backgroundの切り替え
+   var imgurl = $(this).css("background-image");
+   var img = imgurl.match(/.+\/images\/(btn_[a-z]+\.gif)/);
+   if(img[1] == "btn_hide.gif"){
+     $(this).css("background-image","url(images/btn_show.gif)");
+     $(this).css("background-repeat","no-repeat");
+   }else{
+     $(this).css("background-image","url(images/btn_hide.gif)");
+     $(this).css("background-repeat","no-repeat");
+   }
+  });
+  
+	//InstanceActionsメニュー開閉関数
+	var instancepos = 0;
+	$('#instanceaction').click(function () {
+		if(instancepos==0){instancepos+=26;}else{instancepos=0;}
+		$('#instanceaction').css("background-position","0px -"+instancepos+"px");
+		$('#actionlist').toggle();
+	});
+	
+	$('#actionlist li a').click(function () {
+		if(instancepos==0){instancepos+=26;}else{instancepos=0;}
+		$('#instanceaction').css("background-position","0px -"+instancepos+"px");
+		$('#instanceaction').html($(this).html());
+		$('#actionlist').toggle();
+	});
+	
+	//VolumeActionsメニュー開閉関数
+	var volumepos = 0;
+	$('#volumeaction').click(function () {
+		if(volumepos==0){volumepos+=26;}else{volumepos=0;}
+		$('#volumeaction').css("background-position","0px -"+volumepos+"px");
+		$('#volumelist').toggle();
+	});
+	
+	$('#volumelist li a').click(function () {
+		if(volumepos==0){volumepos+=26;}else{volumepos=0;}
+		$('#volumeaction').css("background-position","0px -"+volumepos+"px");
+		$('#volumeaction').html($(this).html());
+		$('#volumelist').toggle();
+	});
+	
+	//ReservedInstancesメニュー開閉関数
+	var rsvinstancepos = 0;
+	$('#reservedinstance').click(function () {
+		if(rsvinstancepos==0){rsvinstancepos+=26;}else{rsvinstancepos=0;}
+		$('#reservedinstance').css("background-position","0px -"+rsvinstancepos+"px");
+		$('#rsvinstancelist').toggle();
+	});
+	
+	$('#rsvinstancelist li a').click(function () {
+		if(rsvinstancepos==0){rsvinstancepos+=26;}else{rsvinstancepos=0;}
+		$('#reservedinstance').css("background-position","0px -"+rsvinstancepos+"px");
+		$('#reservedinstance').html($(this).html());
+		$('#rsvinstancelist').toggle();
+	});
+	
+  $('#accounts_account_uuid').live('change',function() {
+    $(this).parent('form').submit();
+    return false;
+	});
+	
+	//global
+  dcmgrGUI = new DcmgrGUI;
+	dcmgrGUI.initialize();
+});
+//]]>

data/public/javascripts/dcmgr_gui/core.js

@@ -0,0 +1,539 @@
+var DcmgrGUI = function(){};
+
+//Refarence:http://wp.serpere.info/archives/1091
+DcmgrGUI.Class = (function() {
+  function subclass() {}
+  return {
+    create: function(parent) {
+        function klass() {
+          this.initialize.apply(this, arguments);
+        }
+
+        var index = 0;
+        if(jQuery.isFunction(parent)) {
+          index = 1;
+          subclass.prototype = parent.prototype;
+          klass.prototype = new subclass;
+        }
+        for(; index < arguments.length; ++index) {
+            jQuery.extend(klass.prototype, arguments[index]);
+        }
+        return klass;
+      }
+    }
+})();
+
+DcmgrGUI.Filter = DcmgrGUI.Class.create({
+  initialize: function(){
+    this.filters = [];
+  },
+  add: function(filter){
+    this.filters.push(filter);
+  },
+  execute: function(data){
+    this.apply(0,data);
+  },
+  apply: function(index,data){
+    if (this.filters[index] && typeof this.filters[index] === "function") {
+      this.filters[index](data);
+      var next_index = index + 1;
+      if (this.filters[next_index]) {
+        this.apply(next_index,data);
+      } else {
+        return data;
+      };
+    }
+  }
+});
+
+DcmgrGUI.Converter = {};
+DcmgrGUI.Converter.fromMBtoGB = function(data){
+  return Math.ceil(data/1024) + 'GB';
+};
+
+DcmgrGUI.Pagenate = DcmgrGUI.Class.create({
+  initialize: function(params) {
+    this.element = $('#pagenate');
+    this.view = $("#viewPagenate").text();
+    this.total = params.total;
+    this.page_count = this.getPageCount(params['total'],params['row']);
+    this.current_page = 1;
+    this.row = params['row'];
+    this.start = this.getStartCount();
+    this.offset = this.getOffsetCount();
+    $('.prev').bind("click",{obj: this},this.updatePage);
+    $('.next').bind("click",{obj: this},this.updatePage);
+
+    this.renderPagenate();
+  },
+  getPageCount: function(total,row){
+    return Math.ceil(total / row)
+  },
+  changeTotal: function(total){
+    this.total = total;
+    this.page_count = this.getPageCount(this.total,this.row)
+    this.renderPagenate();
+  },
+  renderPagenate: function(){
+    this.start = this.getStartCount();
+    this.offset = this.getOffsetCount();
+    var html = this.start + ' to ' + this.offset + ' of ' + this.total;
+    $("#viewPagenate").html(html+' '+this.view);    
+  },
+  updatePage: function(event){
+
+    var self = event.data.obj;
+    var name = $(this).attr('class');
+    
+    if(self.current_page >= 1 && self.current_page < self.page_count) {
+      if(name === 'next'){
+        self.next_page = self.current_page +1;
+        self.current_page = self.next_page;
+      }
+    }
+    
+    if(self.current_page > 1 && self.current_page <= self.page_count){
+      if(name === 'prev'){
+        self.prev_page = self.current_page -1;
+        self.current_page = self.prev_page;
+      }
+    }
+    self.renderPagenate();
+    self.element.trigger('dcmgrGUI.updatePagenate');
+  },
+  getOffsetCount: function(){
+    var count = (this.current_page * this.row);
+    
+    if (this.total < count) {
+      return this.total;
+    } else {
+      return count;
+    }
+  },
+  getStartCount: function(){
+    if (this.current_page === 1) {
+      var start = 1;
+    } else {
+      var start = ((this.current_page -1) * this.row) + 1;
+    }
+    return start;
+  }
+});
+
+DcmgrGUI.Dialog = DcmgrGUI.Class.create({
+  initialize: function(params) {
+    this.target = $(params['target']);
+    this.element = $('<div></div>')
+    this.path_prefix = '/dialog';
+    this.path = this.path_prefix + params['path'];
+    this.width = params['width'];
+    this.height = params['height'];
+    this.title = params['title'];
+    this.button = params['button'];
+    this.callback = params['callback'] ||null;
+  },
+  open: function(params){
+    //multi select action
+    if(params){
+      if(params.ids.length == 0){
+        return false;
+      }
+      this.create(params);
+    }else{
+      //new create action
+      this.create();
+    }
+    this.content.dialog('open');
+  },
+  disabledButton: function(buttonName,disabled){
+    var widget = this.content
+                  .dialog('widget')
+                  .find(".ui-button-text:contains('"+ buttonName +"')")
+                  .parent();
+    if( widget ) {
+      widget.button("option", "disabled", disabled);
+    }       
+  },
+  close: function(){
+    this.content.dialog('close');
+  },
+  create: function(params){
+    this.content = this.element
+        .load(this.path,params,this.callback)
+  			.dialog({
+  				title: this.title,
+  				disable: false,
+  				autoOpen: false,
+  				bgiframe: true,
+  				width: this.width,
+  				height: this.height,
+  				modal: true,
+  				resizable: true,
+  				closeOnEscape: true,
+  				closeText: 'hide',
+  				draggable:false,
+  				buttons: this.button
+  	});
+  }
+});
+
+DcmgrGUI.ContentBase = DcmgrGUI.Class.create({
+  initialize: function(params){
+    if (params.element_id) {
+      this.element = $(params.element_id);
+    } else {
+      this.element = $('<div></div>');
+    }
+    
+    this.template = params.template_id;
+    this.events = this.events||[];
+    //prototype.register_event function add to call before initialize function
+    this.bind_events();
+    this.filter = new DcmgrGUI.Filter();
+  },
+  update:function(request,async){
+    this.request = request;
+    this.async = async;
+    var self = this;
+
+    $("#list_load_mask").mask("Loading...");
+    self.element.trigger('dcmgrGUI.beforeUpdate');
+    $.ajax({
+       async: async||true,
+       url: request.url,
+       dataType: "json",
+       data: request.data,
+       success: function(json,status,xhr){
+         self.filter.execute(json); 
+         self.element.trigger('dcmgrGUI.contentChange',[{"data":json,"self":self}]);
+         self.element.trigger('dcmgrGUI.afterUpdate',[{"data":json,"self":self}]);
+       },
+       complete: function(xhr, status) {
+         $("#list_load_mask").unmask();
+       },
+       error: function(xhr, status, error){
+         alert('Dcmgr connection '+status);
+       }
+     });
+  },
+  register_event:function(name,handler){
+    this.events = this.events||[]
+    this.events.push({
+      "name":name,
+      "handler":handler
+    })
+  },bind_events:function(){
+    for(var i in this.events){
+      this.element.bind(this.events[i].name,this.events[i].handler);
+    }
+  }
+});
+
+DcmgrGUI.Util = {};
+DcmgrGUI.Util.getPagePath = function(path,page,format){
+    var format = format||'json';
+    return path + page + '.' + format;
+}
+DcmgrGUI.Util.setfillData = function(maxrows,json){
+    var fillCount = maxrows-json.length;
+    var emptyObj = [];
+    for (var key in json[0]) {
+      emptyObj.key = ''
+    }
+    for(var i=0;i<fillCount;i++){
+      json.push(emptyObj);
+    }
+  return json;
+}
+
+DcmgrGUI.Util.getLoadingImage = function(type){
+  switch(type) {
+    case "ball":
+      var image = 'loader_ball.gif'
+    break;
+    
+    case "boxes":
+      var image = 'loader_boxes.gif'
+    break;
+    
+    default:
+      var image = 'loader_ball.gif'
+    break;
+  }
+  return '<img src="images/'+image+'" />';
+}
+
+
+DcmgrGUI.Util.getPagenateData = function(start,limit){
+  return "start=" + start + "&" + "limit=" + limit;
+}
+
+DcmgrGUI.List = DcmgrGUI.Class.create(DcmgrGUI.ContentBase, {
+  initialize: function(params){
+    DcmgrGUI.ContentBase.prototype.initialize(params);
+    this.checked_list = {};
+    this.detail_template = {};
+    this.maxrow = params.maxrow
+    this.page = params.page
+    
+    var self = this;
+
+    this.element.bind('dcmgrGUI.afterUpdate',function(event){
+      
+      var bg;
+      var kids;
+      
+      $("table").find('td').hover(
+        function () {
+         //Mouse over
+         bg = $(this).parent().css("background-color");
+         kids = $(this).parent().children();
+         kids.css("background-color","#82c9d9");
+        },
+        function () {
+         //Mouse over
+         kids.css("background-color",bg);
+        }
+      );
+      
+      self.element.find("[type='checkbox']").each(function(key,value){
+        var id = $(value).val();
+        if(self.checked_list[id]){
+          $(event.target).find("[type='checkbox']").each(function(){
+            if($(this).val() === id){
+              $(this).attr('checked',true);
+            }
+          })
+        }
+      })
+    });
+    
+    this.element.bind('dcmgrGUI.updateList',function(event,params){
+      self.update(params.request,true)
+    });
+    
+  },
+  setDetailTemplate:function(template){
+    this.detail_template = template;
+  },
+  getCheckedInstanceIds:function(checked_list){
+    var ids = []
+    for(var id in this.checked_list){
+      ids.push(id);
+    }
+    return { 
+      'ids':ids 
+    }
+  },
+  checkRadioButton:function(id){
+    $('#'+id).attr("checked", true);
+  },
+  setData:function(json){
+    var rows = []
+    if(!json){
+      rows = this.getEmptyData()
+    }else{
+      $.each(json,function(key,value){
+        rows.push(value.result)
+      });
+    }
+    var row = this.maxrow || 10;
+    var data = {
+      rows:DcmgrGUI.Util.setfillData(row,rows)
+    };
+    this.element.html('');
+    if(data.rows){
+      $( this.template )
+        .tmpl( data )
+        .appendTo( this.element );
+    }
+  },
+  clearCheckedList:function(){
+    this.checked_list = {}
+  },
+  changeStatus:function(state){
+    $.each(this.checked_list,function(id,obj){
+       obj.element.find('.state').html(state);
+       $('#detail').find('#'+id).find('.state').html(state);
+    });
+  },
+  currentChecked:function(){
+    var id = this.element.find("[type='radio']:checked").val();
+    if( id ){
+      return id;
+    }else{
+      return null;
+    }
+  },
+  singleCheckList:function(params){
+    var self = this;
+    this.element.find("[type='radio']").each(function(key,value){
+      $(this).click(function(){
+        var check_id = $(this).val();
+        
+        if($(this).is(':checked')){
+          var c_detail = new DcmgrGUI.Detail({
+            template_id:params.template_id
+          });
+          
+          c_detail.element.bind('dcmgrGUI.contentChange',function(event,params){
+            var data = { item:params.data }
+            
+            //initialize
+            if(!params.data){
+              data.item = self.getEmptyData();
+            }
+            
+            if(data.item){
+              $('#detail').html($( c_detail.template ).tmpl(data));
+            }
+          });
+          
+          c_detail.update({
+            url:DcmgrGUI.Util.getPagePath(params.detail_path,check_id)
+          },true);
+          
+        }else{
+          $('#detail').html('');
+        }
+      });
+    });
+  },
+  multiCheckList:function(params){
+    var self = this;
+    this.element.find("[type='checkbox']").each(function(key,value){
+      $(this).click(function(){
+        var check_id = $(this).val();
+        
+        if($(this).is(':checked')){
+
+          //step1:onclick checkbox and generate detail object
+          self.checked_list[check_id] = {
+            //+1 is to remove table header
+            element:$(self.element.find('tr')[key+1]),
+            c_detail:new DcmgrGUI.Detail({
+              //id is to search element key
+              id:check_id,
+              template_id:params.template_id
+            })
+          }
+          
+          //step2:bind event dcmgrGUI.contentChange
+          self.checked_list[check_id].c_detail.element.bind('dcmgrGUI.contentChange',function(event,params){
+            if(self.checked_list[check_id]){
+            
+              //step4:marge data in template
+              var data = { item:params.data }
+              
+              //initialize
+              if(!params.data){
+                data.item = self.checked_list[check_id].c_detail.getEmptyData();
+              }
+              
+              if (self.detail_template.filter) {
+                self.detail_template.filter.execute(data);
+              };
+              self.checked_list[check_id].c_detail.filter.execute(data);
+              
+              if(data.item){
+                $( self.checked_list[check_id].c_detail.template )
+                  .tmpl(data)
+                  .appendTo( $('#detail') );
+              }
+            }
+          });
+          
+          //step3:update detail
+          self.checked_list[check_id].c_detail.update({
+            url:DcmgrGUI.Util.getPagePath(params.detail_path,check_id)
+          },true);
+
+        }else{
+          //remove detail
+          if(self.checked_list[check_id]){
+           $($('#detail').find('#'+check_id)).remove();
+           delete self.checked_list[check_id]
+         }
+          
+        }
+      });
+    })
+  }
+});
+
+DcmgrGUI.Detail = DcmgrGUI.Class.create(DcmgrGUI.ContentBase, {
+});
+
+DcmgrGUI.Refresh = DcmgrGUI.Class.create({
+  initialize: function(){
+    this.element = $('.refresh');
+    var self = this;
+    self.element.live('click',function(){
+      self.element.trigger('dcmgrGUI.refresh');
+    })
+  },
+});
+
+DcmgrGUI.ItemSelector = DcmgrGUI.Class.create({
+  
+  initialize: function(params) {
+
+    this.left_select_id = params.left_select_id;
+    this.right_select_id = params.right_select_id;
+    this.data = params.data;
+    
+    this.leftSelectionsArray = [];
+    var dataSize = this.data.length;
+    for(var i = 0;i < dataSize ;i++) {
+      var html = '<option id="'+i+'" value="'+ this.data[i]['value'] +'">'+ this.data[i]['name'] +'</option>';
+      this.leftSelectionsArray[i] = $(html);
+    }
+    this.rightSelectionsArray = this.emptyArray(this.data.length);
+    
+    this.refreshOptions(this.left_select_id,this.leftSelectionsArray);
+  },
+  refreshOptions: function(select_id,selectionsArray){
+    var selectionsSize = selectionsArray.length;
+    $(select_id).html('');
+    for(var i = 0;i < selectionsSize  ;i++) {
+      if(selectionsArray[i] !== null ){
+        $(select_id).append(selectionsArray[i]);
+      }
+    }
+  },
+  emptyArray: function(size) {
+    var data = [];
+    for(var i = 0;i < size  ;i++) {
+      data[i] = null;
+    }
+    return data;
+  },
+  leftToRight: function() {
+    var self = this;
+    $(this.left_select_id).find('option:selected').each(function(){
+      var index = $(this).attr('id');
+      self.leftSelectionsArray[index] = null;
+      self.rightSelectionsArray[index] = this;
+      $(this).remove();
+    });
+    
+    this.refreshOptions(this.right_select_id,this.rightSelectionsArray);
+  },
+  rightToLeft: function() {
+    var self = this;
+    $(this.right_select_id).find('option:selected').each(function(){
+      var index = $(this).attr('id');
+      self.leftSelectionsArray[index] = this;
+      self.rightSelectionsArray[index] = null;
+      $(this).remove();
+    });
+    
+    this.refreshOptions(this.left_select_id,this.leftSelectionsArray);
+  }
+});
+
+DcmgrGUI.prototype = {
+  initialize:function(){
+    $.deferred.define();
+  }
+}