new UI - left menu - create new function buildZoneTree().

This commit is contained in:
Jessica Wang 2010-10-14 11:59:54 -07:00
parent 39d30b9bf1
commit 57bb673fa3
3 changed files with 65 additions and 55 deletions

View File

@ -575,60 +575,9 @@ long milliseconds = new Date().getTime();
</div>
</div>
<div class="leftmenu_expandedlist">
<div class="leftmenu_content" id="leftmenu_resource">
<div class="leftmenu_thirdindent">
<div class="leftmenu_arrows expanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/zone_zoneicon.png" alt="Zone" /></div>
Zone: <strong><span id="zone_name">Zone 1</span></strong>
</div>
<div class="leftmenu_content" id="leftmenu_zone_tree">
</div>
</div>
<div class="leftmenu_expandedlist">
<div class="leftmenu_content" id="leftmenu_resource">
<div class="leftmenu_fourthindent">
<div class="leftmenu_arrows expanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/zone_podicon.png" alt="Pod" /></div>
Pod: <strong><span id="pod_name">Name of the Pod</span></strong>
</div>
</div>
</div>
<div class="leftmenu_expandedlist">
<div class="leftmenu_content" id="leftmenu_resource">
<div class="leftmenu_fifthindent">
<div class="leftmenu_arrows expanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/zone_clustericon.png" alt="Cluster" /></div>
Cluster: <strong><span id="cluster_name">(Name of the Cluster)</span></strong>
</div>
</div>
</div>
<div class="leftmenu_expandedlist">
<div class="leftmenu_content" id="leftmenu_resource">
<div class="leftmenu_sixthindent">
<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/zone_hosticon.png" alt="Host" /></div>
Host: <strong><span id="host_name">(Name of the Host)</span></strong>
</div>
</div>
</div>
<div class="leftmenu_expandedlist">
<div class="leftmenu_content" id="leftmenu_resource">
<div class="leftmenu_sixthindent">
<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/zone_primarystorageicon.png" alt="PrimaryStorage" /></div>
Primary: <strong><span id="primary_storage_name">(Name of the Primary Storage)</span></strong>
</div>
</div>
</div>
</div>
<div class="leftmenu_expandedlist">
<div class="leftmenu_content" style="border-bottom: 1px dashed b4c8d6;" id="leftmenu_service_offering">
<div class="leftmenu_secondindent">
@ -740,6 +689,50 @@ long milliseconds = new Date().getTime();
<li id="action_list_item" style="display: none;"><a id="link" href="#">(action)</a></li>
<li id="no_available_actions" style="display: none">
<%=t.t("no.available.actions")%></li>
<div class="leftmenu_thirdindent" id="leftmenu_zone_node_template" style="display:none">
<div class="leftmenu_arrows expanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/zone_zoneicon.png" alt="Zone" /></div>
Zone: <strong><span id="zone_name"></span></strong>
</div>
<div class="leftmenu_expandedlist" id="leftmenu_pod_node_template" style="display:none">
<div class="leftmenu_content">
<div class="leftmenu_fourthindent">
<div class="leftmenu_arrows expanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/zone_podicon.png" alt="Pod" /></div>
Pod: <strong><span id="pod_name"></span></strong>
</div>
</div>
</div>
<div class="leftmenu_expandedlist" id="leftmenu_cluster_node_template" style="display:none">
<div class="leftmenu_content">
<div class="leftmenu_fifthindent">
<div class="leftmenu_arrows expanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/zone_clustericon.png" alt="Cluster" /></div>
Cluster: <strong><span id="cluster_name"></span></strong>
</div>
</div>
</div>
<div class="leftmenu_expandedlist" id="leftmenu_systemvm_node_template" style="display:none">
<div class="leftmenu_content">
<div class="leftmenu_fourthindent">
<div class="leftmenu_arrows expanded_close" id="arrowIcon">
</div>
<div class="leftmenu_list_icons">
<img src="images/zone_systemvmicon.png" alt="System VM" /></div>
System VM: <strong><span id="systemvm_name"></span></strong>
</div>
</div>
</div>
<!-- templates ends here-->
</body>
</html>

View File

@ -136,6 +136,7 @@ $(document).ready(function() {
});
$("#leftmenu_resource").bind("click", function(event) {
buildZoneTree();
selectLeftMenu($(this));
showMiddleMenuWithoutSearch();
@ -151,6 +152,22 @@ $(document).ready(function() {
return false;
});
function buildZoneTree() {
$zoneTree = $("#leftmenu_zone_tree").empty();
var $zoneNode = $("#leftmenu_zone_node_template").clone();
$zoneTree.append($zoneNode.show());
var $podNode = $("#leftmenu_pod_node_template").clone();
$zoneTree.append($podNode.show());
var $clusterNode = $("#leftmenu_cluster_node_template").clone();
$zoneTree.append($clusterNode.show());
var $systemvmNode = $("#leftmenu_systemvm_node_template").clone();
$zoneTree.append($systemvmNode.show());
}
$("#midmenu_action_link").bind("mouseover", function(event) {
$(this).find("#action_menu").show();

View File

@ -474,8 +474,8 @@ function setBooleanField(value, $field) {
function clearLeftMenu() {
var $arrowIcon = $("#leftmenu_instance_group_header #arrow_icon");
if($arrowIcon.hasClass("open") == true) {
$arrowIcon.removeClass("open").addClass("close");
if($arrowIcon.hasClass("expanded_open") == true) {
$arrowIcon.removeClass("expanded_open").addClass("expanded_close");
$("#leftmenu_instance_group_container").empty();
}
}