instance page - implement advanced search button clicking.

This commit is contained in:
Jessica Wang 2010-12-01 17:27:09 -08:00
parent cd5afb3d7e
commit f23135514a
4 changed files with 174 additions and 42 deletions

View File

@ -146,49 +146,9 @@
</li>
</ol>
</form>
<a href="#">
<a id="advanced_search_icon" href="#">
<fmt:message key="label.advanced"/></a>
<div class="adv_searchpopup" id="adv_search_dialog" style="display: none;">
<div class="adv_searchformbox">
<h3><fmt:message key="label.advanced.search"/></h3>
<a id="advanced_search_close" href="#"><fmt:message key="label.close"/> </a>
<form action="#" method="post">
<ol style="margin-top: 8px;">
<li>
<label for="filter">
<fmt:message key="label.name"/>:</label>
<input class="text" type="text" name="adv_search_name" id="adv_search_name" />
</li>
<li>
<label for="filter">
<fmt:message key="label.status"/>:</label>
<select class="select" id="adv_search_state">
<option value=""></option>
<option value="Creating">Creating</option>
<option value="Starting">Starting</option>
<option value="Running">Running</option>
<option value="Stopping">Stopping</option>
<option value="Stopped">Stopped</option>
<option value="Destroyed">Destroyed</option>
<option value="Expunging">Expunging</option>
<option value="Migrating">Migrating</option>
<option value="Error">Error</option>
<option value="Unknown">Unknown</option>
</select>
</li>
<li>
<label for="filter">
<fmt:message key="label.zone"/>:</label>
<select class="select" id="adv_search_zone">
</select>
</li>
</ol>
</form>
<div class="adv_search_actionbox">
<div class="adv_searchpopup_button" id="adv_search_button">
</div>
</div>
</div>
<div id="advanced_search_container">
</div>
</div>
<div class="actionpanel_button_wrapper" id="midmenu_action_link" style="position: relative;

View File

@ -1353,3 +1353,60 @@
</div>
<!-- ***** Dialogs (end) ***** -->
<!-- advanced search (begin) -->
<div id="advanced_search_template" class="adv_searchpopup" style="display: none;">
<div class="adv_searchformbox">
<h3>
Advance Search</h3>
<a id="advanced_search_close" href="#">Close </a>
<form action="#" method="post">
<ol>
<li>
<label for="filter">
Name:</label>
<input class="text" type="text" name="adv_search_name" id="adv_search_name" />
</li>
<li>
<label for="filter">
Status:</label>
<select class="select" id="adv_search_state">
<option value=""></option>
<option value="Creating">Creating</option>
<option value="Starting">Starting</option>
<option value="Running">Running</option>
<option value="Stopping">Stopping</option>
<option value="Stopped">Stopped</option>
<option value="Destroyed">Destroyed</option>
<option value="Expunging">Expunging</option>
<option value="Migrating">Migrating</option>
<option value="Error">Error</option>
<option value="Unknown">Unknown</option>
</select>
</li>
<li>
<label for="filter">
Zone:</label>
<select class="select" id="adv_search_zone">
</select>
</li>
<li id="adv_search_domain_li" style="display: none;">
<label for="filter">
Domain:</label>
<select class="select" id="adv_search_domain">
</select>
</li>
<li id="adv_search_account_li" style="display: none;">
<label for="filter">
Account:</label>
<input class="text" type="text" id="adv_search_account" />
</li>
</ol>
</form>
<div class="adv_search_actionbox">
<div class="adv_searchpopup_button" id="adv_search_button">
</div>
</div>
</div>
</div>
<!-- advanced search (end) -->

View File

@ -222,6 +222,120 @@ $(document).ready(function() {
}
});
//advanced search
$("#advanced_search_icon").unbind("click").bind("click", function(event) {
var $advancedSearch = $("#advanced_search_template").clone();
$advancedSearch.unbind("click").bind("click", function(event) {
var $target = $(event.target);
var targetId = $target.attr("id");
if(targetId == "advanced_search_close") {
$(this).hide();
return false;
}
else if(targetId == "adv_search_button") {
return false;
}
return true;
});
if(isAdmin())
$advancedSearch.find("#adv_search_domain_li, #adv_search_account_li, #adv_search_pod_li").show();
else
$advancedSearch.find("#adv_search_domain_li, #adv_search_account_li, #adv_search_pod_li").hide();
var zoneSelect = $advancedSearch.find("#adv_search_zone");
if(zoneSelect.length>0) { //if zone dropdown is found on Advanced Search dialog
$.ajax({
data: createURL("command=listZones&available=true"),
dataType: "json",
success: function(json) {
var zones = json.listzonesresponse.zone;
zoneSelect.empty();
zoneSelect.append("<option value=''></option>");
if (zones != null && zones.length > 0) {
for (var i = 0; i < zones.length; i++) {
zoneSelect.append("<option value='" + zones[i].id + "'>" + fromdb(zones[i].name) + "</option>");
}
}
}
});
var podSelect = $advancedSearch.find("#adv_search_pod").empty();
var podLabel = $advancedSearch.find("#adv_search_pod_label");
if(podSelect.length>0 && $advancedSearch.find("#adv_search_pod_li").css("display")!="none") {
zoneSelect.bind("change", function(event) {
var zoneId = $(this).val();
if (zoneId == null || zoneId.length == 0) {
podLabel.css("color", "gray");
podSelect.attr("disabled", "disabled");
podSelect.empty();
} else {
podLabel.css("color", "black");
podSelect.removeAttr("disabled");
$.ajax({
data: createURL("command=listPods&zoneId="+zoneId+""),
dataType: "json",
async: false,
success: function(json) {
var pods = json.listpodsresponse.pod;
podSelect.empty();
if (pods != null && pods.length > 0) {
for (var i = 0; i < pods.length; i++) {
podSelect.append("<option value='" + pods[i].id + "'>" + fromdb(pods[i].name) + "</option>");
}
}
}
});
}
return false;
});
zoneSelect.change();
}
}
var domainSelect = $advancedSearch.find("#adv_search_domain");
if(domainSelect.length>0 && $advancedSearch.find("#adv_search_domain_li").css("display")!="none") {
var domainSelect = domainSelect.empty();
$.ajax({
data: createURL("command=listDomains&available=true"),
dataType: "json",
success: function(json) {
var domains = json.listdomainsresponse.domain;
if (domains != null && domains.length > 0) {
for (var i = 0; i < domains.length; i++) {
domainSelect.append("<option value='" + domains[i].id + "'>" + fromdb(domains[i].name) + "</option>");
}
}
}
});
}
var vmSelect = $advancedSearch.find("#adv_search_vm");
if(vmSelect.length>0) {
vmSelect.empty();
vmSelect.append("<option value=''></option>");
$.ajax({
data: createURL("command=listVirtualMachines"),
dataType: "json",
success: function(json) {
var items = json.listvirtualmachinesresponse.virtualmachine;
if (items != null && items.length > 0) {
for (var i = 0; i < items.length; i++) {
vmSelect.append("<option value='" + items[i].id + "'>" + fromdb(items[i].name) + "</option>");
}
}
}
});
}
$("#advanced_search_container").empty().append($advancedSearch.show());
return false;
});
//pagination
$("#middle_menu_pagination").unbind("clik").bind("click", function(event) {
var params = $(this).data("params");

View File

@ -555,6 +555,7 @@ function clearMiddleMenu() {
$("#midmenu_action_link").hide();
clearAddButtonsOnTop();
$("#basic_search").find("#search_input").val("");
$("#advanced_search_container").empty();
$("#midmenu_prevbutton, #midmenu_nextbutton").hide();
$("#middle_menu_pagination").data("params", null);
}