mirror of https://github.com/apache/cloudstack.git
new UI - Disk Offering page - show loading image before page is fully loaded.
This commit is contained in:
Jessica Wang
parent
e7809481be
commit
f65061b793
|
|
@ -28,99 +28,103 @@
|
|||
<%=t.t("details")%></div>
|
||||
</div>
|
||||
<div id="tab_content_details">
|
||||
<div class="rightpanel_mainloader_panel" style="display:none;">
|
||||
<div class="rightpanel_mainloaderbox">
|
||||
<div class="rightpanel_mainloader_animatedicon"></div>
|
||||
<p>Loading …</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_container">
|
||||
<div class="grid_header">
|
||||
<div id="grid_header_title" class="grid_header_title">(title)</div>
|
||||
<div id="action_link" class="grid_actionbox" id="account_action_link">
|
||||
<div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
|
||||
<ul class="actionsdropdown_boxlist" id="action_list">
|
||||
<li><%=t.t("no.available.actions")%></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
|
||||
display: none;">
|
||||
<div class="gridheader_loader" id="Div1">
|
||||
</div>
|
||||
<p id="description">
|
||||
Waiting …</p>
|
||||
<div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display: none;">
|
||||
<div class="rightpanel_mainloaderbox">
|
||||
<div class="rightpanel_mainloader_animatedicon">
|
||||
</div>
|
||||
<p>
|
||||
Loading …</p>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("ID")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="id">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("name")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="name">
|
||||
</div>
|
||||
<input class="text" id="name_edit" style="width: 200px; display: none;" type="text" />
|
||||
<div id="name_edit_errormsg" style="display:none"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("display.text")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="displaytext">
|
||||
</div>
|
||||
<input class="text" id="displaytext_edit" style="width: 200px; display: none;" type="text" />
|
||||
<div id="displaytext_edit_errormsg" style="display:none"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("disk.size")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="disksize">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("tags")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="tags">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("domain")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="domain">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_botactionpanel">
|
||||
<div class="gridbot_buttons" id="save_button" style="display:none;">Save</div>
|
||||
<div class="gridbot_buttons" id="cancel_button" style="display:none;">Cancel</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab_container">
|
||||
<div class="grid_container">
|
||||
<div class="grid_header">
|
||||
<div id="grid_header_title" class="grid_header_title">(title)</div>
|
||||
<div id="action_link" class="grid_actionbox" id="account_action_link">
|
||||
<div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
|
||||
<ul class="actionsdropdown_boxlist" id="action_list">
|
||||
<li><%=t.t("no.available.actions")%></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
|
||||
display: none;">
|
||||
<div class="gridheader_loader" id="Div1">
|
||||
</div>
|
||||
<p id="description">
|
||||
Waiting …</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("ID")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="id">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("name")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="name">
|
||||
</div>
|
||||
<input class="text" id="name_edit" style="width: 200px; display: none;" type="text" />
|
||||
<div id="name_edit_errormsg" style="display:none"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("display.text")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="displaytext">
|
||||
</div>
|
||||
<input class="text" id="displaytext_edit" style="width: 200px; display: none;" type="text" />
|
||||
<div id="displaytext_edit_errormsg" style="display:none"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("disk.size")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="disksize">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("tags")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="tags">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("domain")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="domain">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_botactionpanel">
|
||||
<div class="gridbot_buttons" id="save_button" style="display:none;">Save</div>
|
||||
<div class="gridbot_buttons" id="cancel_button" style="display:none;">Cancel</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -160,31 +160,53 @@ function diskOfferingToMidmenu(jsonObj, $midmenuItem1) {
|
|||
|
||||
function diskOfferingToRightPanel($midmenuItem1) {
|
||||
copyActionInfoFromMidMenuToRightPanel($midmenuItem1);
|
||||
diskOfferingJsonToDetailsTab($midmenuItem1);
|
||||
$("#right_panel_content").data("$midmenuItem1", $midmenuItem1);
|
||||
diskOfferingJsonToDetailsTab();
|
||||
}
|
||||
|
||||
function diskOfferingJsonToDetailsTab($midmenuItem1) {
|
||||
var jsonObj = $midmenuItem1.data("jsonObj");
|
||||
var $detailsTab = $("#right_panel_content #tab_content_details");
|
||||
$detailsTab.data("jsonObj", jsonObj);
|
||||
$detailsTab.find("#id").text(jsonObj.id);
|
||||
function diskOfferingJsonToDetailsTab() {
|
||||
var $thisTab = $("#right_panel_content #tab_content_details");
|
||||
$thisTab.find("#tab_container").hide();
|
||||
$thisTab.find("#tab_spinning_wheel").show();
|
||||
|
||||
$detailsTab.find("#grid_header_title").text(fromdb(jsonObj.name));
|
||||
$detailsTab.find("#name").text(fromdb(jsonObj.name));
|
||||
$detailsTab.find("#name_edit").val(fromdb(jsonObj.name));
|
||||
var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
|
||||
var id = $midmenuItem1.data("jsonObj").id;
|
||||
|
||||
$detailsTab.find("#displaytext").text(fromdb(jsonObj.displaytext));
|
||||
$detailsTab.find("#displaytext_edit").val(fromdb(jsonObj.displaytext));
|
||||
var jsonObj;
|
||||
$.ajax({
|
||||
data: createURL("command=listDiskOfferings&id="+id),
|
||||
dataType: "json",
|
||||
async: false,
|
||||
success: function(json) {
|
||||
var items = json.listdiskofferingsresponse.diskoffering;
|
||||
if(items != null && items.length > 0)
|
||||
jsonObj = items[0];
|
||||
}
|
||||
});
|
||||
$thisTab.data("jsonObj", jsonObj);
|
||||
$midmenuItem1.data("jsonObj", jsonObj);
|
||||
|
||||
$thisTab.find("#id").text(jsonObj.id);
|
||||
|
||||
$detailsTab.find("#disksize").text(convertBytes(jsonObj.disksize));
|
||||
$detailsTab.find("#tags").text(fromdb(jsonObj.tags));
|
||||
$detailsTab.find("#domain").text(fromdb(jsonObj.domain));
|
||||
$thisTab.find("#grid_header_title").text(fromdb(jsonObj.name));
|
||||
$thisTab.find("#name").text(fromdb(jsonObj.name));
|
||||
$thisTab.find("#name_edit").val(fromdb(jsonObj.name));
|
||||
|
||||
$thisTab.find("#displaytext").text(fromdb(jsonObj.displaytext));
|
||||
$thisTab.find("#displaytext_edit").val(fromdb(jsonObj.displaytext));
|
||||
|
||||
$thisTab.find("#disksize").text(convertBytes(jsonObj.disksize));
|
||||
$thisTab.find("#tags").text(fromdb(jsonObj.tags));
|
||||
$thisTab.find("#domain").text(fromdb(jsonObj.domain));
|
||||
|
||||
//actions ***
|
||||
var $actionMenu = $("#right_panel_content #tab_content_details #action_link #action_menu");
|
||||
$actionMenu.find("#action_list").empty();
|
||||
buildActionLinkForDetailsTab("Edit Disk Offering", diskOfferingActionMap, $actionMenu, $midmenuItem1, $detailsTab);
|
||||
buildActionLinkForDetailsTab("Delete Disk Offering", diskOfferingActionMap, $actionMenu, $midmenuItem1, $detailsTab);
|
||||
buildActionLinkForDetailsTab("Edit Disk Offering", diskOfferingActionMap, $actionMenu, $midmenuItem1, $thisTab);
|
||||
buildActionLinkForDetailsTab("Delete Disk Offering", diskOfferingActionMap, $actionMenu, $midmenuItem1, $thisTab);
|
||||
|
||||
$thisTab.find("#tab_spinning_wheel").hide();
|
||||
$thisTab.find("#tab_container").show();
|
||||
}
|
||||
|
||||
function diskOfferingClearRightPanel() {
|
||||
|
|
@ -192,15 +214,15 @@ function diskOfferingClearRightPanel() {
|
|||
}
|
||||
|
||||
function diskOfferingClearDetailsTab() {
|
||||
var $detailsTab = $("#right_panel_content #tab_content_details");
|
||||
$detailsTab.find("#id").text("");
|
||||
$detailsTab.find("#name").text("");
|
||||
$detailsTab.find("#name_edit").val("");
|
||||
$detailsTab.find("#displaytext").text("");
|
||||
$detailsTab.find("#displaytext_edit").val("");
|
||||
$detailsTab.find("#disksize").text("");
|
||||
$detailsTab.find("#tags").text("");
|
||||
$detailsTab.find("#domain").text("");
|
||||
var $thisTab = $("#right_panel_content #tab_content_details");
|
||||
$thisTab.find("#id").text("");
|
||||
$thisTab.find("#name").text("");
|
||||
$thisTab.find("#name_edit").val("");
|
||||
$thisTab.find("#displaytext").text("");
|
||||
$thisTab.find("#displaytext_edit").val("");
|
||||
$thisTab.find("#disksize").text("");
|
||||
$thisTab.find("#tags").text("");
|
||||
$thisTab.find("#domain").text("");
|
||||
|
||||
var $actionMenu = $("#right_panel_content #tab_content_details #action_link #action_menu");
|
||||
$actionMenu.find("#action_list").empty();
|
||||
|
|
|
|||
Loading…
Reference in New Issue