httemplate/elements/select-mib-popup.html

   1 <& /elements/header-popup.html &>
   2 <TABLE WIDTH="100%">
   3 <TR>
   4   <TD ALIGN="right">Module:</TD>
   5   <TD><SELECT ID="select_module"></SELECT></TD>
   6 </TR>
   7 <TR>
   8   <TD ALIGN="right">Object:</TD>
   9   <TD><INPUT TYPE="text" NAME="path" ID="input_path"></TD>
  10 </TR>
  11 <TR>
  12   <TD COLSPAN=2>
  13     <SELECT STYLE="width:100%" SIZE=12 ID="select_path"></SELECT>
  14   </TD>
  15 </TR>
  16 <TR>
  17   <TH COLSPAN=2 ID="mib_objectID"></TH>
  18 </TR>
  19 <TR>
  20   <TD ALIGN="right">Module: </TD><TD ID="mib_moduleID"></TD>
  21 </TR>
  22 <TR>
  23   <TD ALIGN="right">Data type: </TD><TD ID="mib_type"></TD>
  24 </TR>
  25 <TR>
  26   <TH COLSPAN=2>
  27     <BUTTON ID="submit_button" onclick="submit()" DISABLED=1>Continue</BUTTON>
  28   </TH>
  29 </TR>
  30 </TABLE>
  31 <& /elements/xmlhttp.html,
  32   url   => $p.'misc/xmlhttp-mib-browse.html',
  33   subs  => [qw( search get_module_list )],
  34 &>
  35 <SCRIPT TYPE="text/javascript">
  36
  37 var selected_mib;
  38
  39 function show_info(state) {
  40   document.getElementById('mib_objectID').style.display =
  41     document.getElementById('mib_moduleID').style.display =
  42     document.getElementById('mib_type').style.display =
  43     state ? 'block' : 'none';
  44 }
  45
  46 function clear_list() {
  47   var select_path = document.getElementById('select_path');
  48   select_path.options.length = 0;
  49 }
  50
  51 function add_item(value) {
  52   var select_path = document.getElementById('select_path');
  53   var input_path = document.getElementById('input_path');
  54   var opt = document.createElement('option');
  55   var v = value;
  56   if ( v.match(/-$/) ) {
  57     opt.className = 'leaf';
  58     v = v.substring(0, v.length - 1);
  59   }
  60   opt.value = opt.text = v;
  61   opt.selected = (input_path.value == v);
  62   select_path.add(opt, null);
  63 }
  64
  65 var timerID = 0;
  66
  67 function populate(json_result) {
  68   var result = JSON.parse(json_result);
  69   clear_list();
  70   for (var x in result['choices']) {
  71     opt = document.createElement('option');
  72     add_item(result['choices'][x]);
  73   }
  74   if ( result['objectID'] ) {
  75     selected_mib = result;
  76     show_info(true);
  77     // show details on the selected node
  78     document.getElementById('mib_objectID').innerHTML = result.objectID;
  79     document.getElementById('mib_moduleID').innerHTML = result.moduleID;
  80     document.getElementById('mib_type').innerHTML = result.type;
  81     document.getElementById('submit_button').disabled = !result.type;
  82   } else {
  83     selected_mib = undefined;
  84     show_info(false);
  85   }
  86 }
  87
  88 function populate_modules(json_result) {
  89   var result = JSON.parse(json_result);
  90   var select_module = document.getElementById('select_module');
  91   var opt = document.createElement('option');
  92   opt.value = 'ANY';
  93   opt.text  = '(any)';
  94   select_module.add(opt, null);
  95   for (var x in result['modules']) {
  96     opt = document.createElement('option');
  97     opt.value = opt.text = result['modules'][x];
  98     select_module.add(opt, null);
  99   }
 100 }
 101
 102 function dispatch_search() {
 103   // called from the interval timer
 104   var search_string = document.getElementById('select_module').value + ':' +
 105                       document.getElementById('input_path').value;
 106
 107   search(search_string, populate);
 108 }
 109
 110 function delayed_search() {
 111   // onkeyup handler for the text input
 112   // 500ms after the user stops typing, send the search request
 113   if (timerID != 0) {
 114     clearTimeout(timerID);
 115   }
 116   timerID = setTimeout(dispatch_search, 500);
 117 }
 118
 119 function handle_choose_object() {
 120   // onchange handler for the selector
 121   // when the user picks an option, set the text input to that, and then
 122   // search for it as though it was entered
 123   var input_path = document.getElementById('input_path');
 124   input_path.value = this.value;
 125   dispatch_search();
 126 }
 127
 128 function handle_choose_module() {
 129   input_path.value = ''; // just to avoid confusion
 130   delayed_search();
 131 }
 132
 133 function submit() {
 134 % if ( $callback ) {
 135   <% $callback %>;
 136   parent.nd(1); // close popup
 137 % } else {
 138   alert(document.getElementById('input_path').value);
 139 % }
 140 }
 141
 142 var input_path = document.getElementById('input_path');
 143 input_path.onkeyup = delayed_search;
 144 var select_path = document.getElementById('select_path');
 145 select_path.onchange = handle_choose_object;
 146 var select_module = document.getElementById('select_module');
 147 select_module.onchange = handle_choose_module;
 148 % if ( $cgi->param('curr_value') ) {
 149 input_path.value = <% $cgi->param('curr_value') |js_string %>;
 150 % }
 151 dispatch_search();
 152 get_module_list('', populate_modules);
 153
 154 </SCRIPT>
 155 <& /elements/footer.html &>
 156 <%init>
 157 my $callback = 'alert("(no callback defined)" + selected_mib.stringify)';
 158 $cgi->param('callback') =~ /^(\w+)$/;
 159 if ( $1 ) {
 160   # construct the JS function call expresssion
 161   $callback = 'window.parent.' . $1 . '(selected_mib';
 162   foreach ($cgi->param('arg')) {
 163     # pass-through arguments
 164     /^(\w+)$/ or next;
 165     $callback .= ",'$1'";
 166   }
 167   $callback .= ')';
 168 }
 169
 170 </%init>