httemplate/elements/select-mib-popup.html

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