mirror of https://github.com/apache/cloudstack.git
use selectable widget to multiple-select mid menu items to have actions
This commit is contained in:
parent
7d18462d76
commit
9dbca71434
|
|
@ -1,6 +1,4 @@
|
|||
$(document).ready(function() {
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$("#accordion_menu").accordion({
|
||||
autoHeight: false,
|
||||
collapsible: true,
|
||||
|
|
@ -12,8 +10,29 @@ $(document).ready(function() {
|
|||
ui.newHeader.find("#arrow_icon").removeClass("close").addClass("open");
|
||||
}
|
||||
});
|
||||
|
||||
$("#accordion_menu").show();
|
||||
|
||||
$("#midmenu_container").selectable({
|
||||
selecting: function(event, ui) {
|
||||
if(ui.selecting.id.indexOf("midmenuItem") != -1) {
|
||||
var $t = $("#"+ui.selecting.id);
|
||||
$t.find("#content").addClass("selected");
|
||||
|
||||
var id =$t.data("id");
|
||||
selectedItemIds[id] = null;
|
||||
|
||||
var toRightPanelFn = $t.data("toRightPanelFn");
|
||||
toRightPanelFn($t);
|
||||
}
|
||||
},
|
||||
unselecting: function(event, ui) {
|
||||
if(ui.unselecting.id.indexOf("midmenuItem") != -1) {
|
||||
$("#"+ui.unselecting.id).find("#content").removeClass("selected");
|
||||
var itemId =$("#"+ui.unselecting.id).data("id");
|
||||
delete selectedItemIds[itemId];
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var $rightPanel = $("#right_panel");
|
||||
var $addLink = $("#add_link");
|
||||
|
|
@ -24,9 +43,11 @@ $(document).ready(function() {
|
|||
var $midmenuItemVm = $("#midmenu_item_vm");
|
||||
var $actionListItem = $("#action_list_item");
|
||||
|
||||
var selectedItemIds = {};
|
||||
|
||||
$("#leftmenu_instance_group_header").bind("click", function(event) {
|
||||
var $arrowIcon = $(this).find("#arrow_icon");
|
||||
clickInstanceGroupHeader($arrowIcon);
|
||||
clickInstanceGroupHeader($arrowIcon, selectedItemIds);
|
||||
return false;
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
function clickInstanceGroupHeader($arrowIcon) {
|
||||
function clickInstanceGroupHeader($arrowIcon, selectedItemIds) {
|
||||
//***** VM Detail (begin) ******************************************************************************
|
||||
var $vmPopup
|
||||
var $rightPanelHeader;
|
||||
|
|
@ -14,9 +14,7 @@ function clickInstanceGroupHeader($arrowIcon) {
|
|||
var $actionListItem = $("#action_list_item");
|
||||
|
||||
var noGroupName = "(no group name)";
|
||||
|
||||
//var selectedItemType;
|
||||
var selectedItemIds = {};
|
||||
|
||||
var actionMap = {
|
||||
stopVirtualMachine: {
|
||||
label: "Stop",
|
||||
|
|
@ -50,6 +48,7 @@ function clickInstanceGroupHeader($arrowIcon) {
|
|||
|
||||
function setMidmenuItemVm(instance, $midmenuItemVm1) {
|
||||
$midmenuItemVm1.data("jsonObj", instance);
|
||||
$midmenuItemVm1.data("toRightPanelFn", vmMidmenuItemToRightPanel);
|
||||
$midmenuItemVm1.attr("id", ("midmenuItemVm_"+instance.id));
|
||||
$midmenuItemVm1.data("id", instance.id);
|
||||
var vmName = getVmName(instance.name, instance.displayname);
|
||||
|
|
@ -57,28 +56,8 @@ function clickInstanceGroupHeader($arrowIcon) {
|
|||
$midmenuItemVm1.find("#ip_address").text(instance.ipaddress);
|
||||
updateVirtualMachineStateInMidMenu(instance.state, $midmenuItemVm1);
|
||||
$midmenuItemVm1.bind("click", function(event) {
|
||||
var $t = $(this);
|
||||
var id = $t.data("id");
|
||||
|
||||
$t.find("#content").addClass("selected");
|
||||
if(!(id in selectedItemIds))
|
||||
selectedItemIds[id] = null;
|
||||
|
||||
if($t.find("#info_icon").css("display") != "none") {
|
||||
$rightPanelContent.find("#after_action_info").text($t.data("afterActionInfo"));
|
||||
if($t.find("#info_icon").hasClass("error"))
|
||||
$rightPanelContent.find("#after_action_info_container").addClass("errorbox");
|
||||
else
|
||||
$rightPanelContent.find("#after_action_info_container").removeClass("errorbox");
|
||||
$rightPanelContent.find("#after_action_info_container").show();
|
||||
}
|
||||
else {
|
||||
$rightPanelContent.find("#after_action_info").text("");
|
||||
$rightPanelContent.find("#after_action_info_container").hide();
|
||||
}
|
||||
var jsonObj = $t.data("jsonObj");
|
||||
vmJsonToRightPanel(jsonObj);
|
||||
|
||||
var $t = $(this);
|
||||
vmMidmenuItemToRightPanel($t);
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
|
@ -99,7 +78,21 @@ function clickInstanceGroupHeader($arrowIcon) {
|
|||
$rightPanelContent.find("#iso").hide();
|
||||
}
|
||||
|
||||
function vmJsonToRightPanel(jsonObj) {
|
||||
function vmMidmenuItemToRightPanel($t) {
|
||||
if($t.find("#info_icon").css("display") != "none") {
|
||||
$rightPanelContent.find("#after_action_info").text($t.data("afterActionInfo"));
|
||||
if($t.find("#info_icon").hasClass("error"))
|
||||
$rightPanelContent.find("#after_action_info_container").addClass("errorbox");
|
||||
else
|
||||
$rightPanelContent.find("#after_action_info_container").removeClass("errorbox");
|
||||
$rightPanelContent.find("#after_action_info_container").show();
|
||||
}
|
||||
else {
|
||||
$rightPanelContent.find("#after_action_info").text("");
|
||||
$rightPanelContent.find("#after_action_info_container").hide();
|
||||
}
|
||||
|
||||
var jsonObj = $t.data("jsonObj");
|
||||
var vmName = getVmName(jsonObj.name, jsonObj.displayname);
|
||||
$rightPanelHeader.find("#vm_name").text(vmName);
|
||||
updateVirtualMachineStateInRightPanel(jsonObj.state);
|
||||
|
|
@ -199,7 +192,7 @@ function clickInstanceGroupHeader($arrowIcon) {
|
|||
var label = $t.data("label");
|
||||
var isAsyncJob = $t.data("isAsyncJob");
|
||||
var asyncJobResponse = $t.data("asyncJobResponse");
|
||||
var jobIdMap = {};
|
||||
var jobIdMap = {};
|
||||
for(var id in selectedItemIds) {
|
||||
var midmenuItem = $("#midmenuItemVm_"+id);
|
||||
midmenuItem.find("#content").removeClass("selected").addClass("adding");
|
||||
|
|
|
|||
Loading…
Reference in New Issue