new UI - event page - show loading image before event page is fully loaded.

This commit is contained in:
Jessica Wang 2010-10-31 16:02:21 -07:00
parent 10f8c1688c
commit b98c68b508
3 changed files with 116 additions and 103 deletions

View File

@ -26,94 +26,98 @@
<%=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 &hellip;</p>
</div>
</div>
<div class="grid_container">
<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("Initiated.By")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="username">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Owner.Account")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="account">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Type")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="type">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Level")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="level">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Description")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="description">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("State")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="state">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Date")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="created">
</div>
</div>
</div>
</div>
<div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display: none;">
<div class="rightpanel_mainloaderbox">
<div class="rightpanel_mainloader_animatedicon">
</div>
<p>
Loading &hellip;</p>
</div>
</div>
<div id="tab_container">
<div class="grid_container">
<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("Initiated.By")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="username">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Owner.Account")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="account">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Type")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="type">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Level")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="level">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Description")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="description">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("State")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="state">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Date")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="created">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- event detail panel (end) -->

View File

@ -38,20 +38,28 @@ function eventToMidmenu(jsonObj, $midmenuItem1) {
function eventToRightPanel($midmenuItem1) {
copyActionInfoFromMidMenuToRightPanel($midmenuItem1);
eventJsonToDetailsTab($midmenuItem1);
$("#right_panel_content").data("$midmenuItem1", $midmenuItem1);
eventJsonToDetailsTab();
}
function eventJsonToDetailsTab($midmenuItem1) {
var jsonObj = $midmenuItem1.data("jsonObj");
var $detailsTab = $("#right_panel_content #tab_content_details");
$detailsTab.data("jsonObj", jsonObj);
$detailsTab.find("#id").text(fromdb(jsonObj.id));
$detailsTab.find("#username").text(fromdb(jsonObj.username));
$detailsTab.find("#account").text(fromdb(jsonObj.account));
$detailsTab.find("#type").text(jsonObj.type);
$detailsTab.find("#level").text(jsonObj.level);
$detailsTab.find("#description").text(fromdb(jsonObj.description));
$detailsTab.find("#state").text(jsonObj.state);
setDateField(jsonObj.created, $detailsTab.find("#created"));
function eventJsonToDetailsTab() {
var $thisTab = $("#right_panel_content #tab_content_details");
$thisTab.find("#tab_container").hide();
$thisTab.find("#tab_spinning_wheel").show();
var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
var jsonObj = $midmenuItem1.data("jsonObj");
$thisTab.data("jsonObj", jsonObj);
$thisTab.find("#id").text(fromdb(jsonObj.id));
$thisTab.find("#username").text(fromdb(jsonObj.username));
$thisTab.find("#account").text(fromdb(jsonObj.account));
$thisTab.find("#type").text(jsonObj.type);
$thisTab.find("#level").text(jsonObj.level);
$thisTab.find("#description").text(fromdb(jsonObj.description));
$thisTab.find("#state").text(jsonObj.state);
setDateField(jsonObj.created, $thisTab.find("#created"));
$thisTab.find("#tab_spinning_wheel").hide();
$thisTab.find("#tab_container").show();
}

View File

@ -184,7 +184,8 @@ function isoJsonToDetailsTab() {
var jsonObj = $midmenuItem1.data("jsonObj");
//comment the following code because listIsos API has a bug => listIsos API returns nothing when id is 200(tool) and zoneid is specified
//listIsos API has a bug => it returns nothing when id is 200(xs-tools.iso) and zoneid is specified. So, comment the following code before the bug is fixed.
/*
var array1 = [];
var id = $midmenuItem1.data("jsonObj").id;