httemplate/elements/select-phonenum.html

   1 <%doc>
   2 Selector for DID phone number.
   3
   4 Options:
   5
   6 - prefix: prefix for all the object IDs, field names, javascript functions,
   7 etc. for including multiple DID selectors on a single page.
   8
   9 - empty: text to display when no number is selected ("empty_label")
  10
  11 - bulknum: allow bulk selection of up to this many numbers (self-service
  12 only? wtf?)
  13
  14 - svcpart: svcpart (required)
  15
  16 - tollfree: pass "tollfree" to misc/phonenums.cgi, instead of passing an
  17 exchange/region/anything else.
  18
  19 - region: corresponds to the inverse of "get_dids_npa_select". The selector
  20 creates an on-change handler telling the previous selector in the hierarchy
  21 to update the list of phone numbers. If 'region' is true, it will look for
  22 a previous selector named "region", and prefix the query it sends to
  23 phonenums.cgi with '_REGION', which results in get_dids() being called
  24 with a 'region' parameter instead of 'ratecenter' and 'state'.
  25
  26
  27 Internally, this will set up an exchange_changed or region_changed function
  28 to refresh the phone number list. The function will fetch misc/phonenums.cgi,
  29 passing the exchange (or region) and
  30 </%doc>
  31
  32 <% include('/elements/xmlhttp.html',
  33               'url'  => $p.'misc/phonenums.cgi',
  34               'subs' => [ $opt{'prefix'}. 'get_phonenums' ],
  35           )
  36 %>
  37
  38 <SCRIPT TYPE="text/javascript">
  39
  40   function jopt(what,value,text) {
  41     var optionName = new Option(text, value, false, false);
  42     what.append(optionName);
  43   }
  44
  45   function <% $opt{'prefix'} %><% $previous %>_changed(what, callback) {
  46
  47     $('#<% $opt{'prefix'} %>phonenum').prop('disabled', true);
  48     $('#<% $opt{'prefix'} %>phonenum').css('display', 'none');
  49     var phonenumwait = document.getElementById('<% $opt{'prefix'} %>phonenumwait');
  50     phonenumwait.style.display = 'inline';
  51     var phonenumerror = document.getElementById('<% $opt{'prefix'} %>phonenumerror');
  52     phonenumerror.style.display = 'none';
  53
  54     var thing = "<% $previous eq 'region' ? '_REGION ' : '' %>" + what.options[what.selectedIndex].value;
  55
  56     function <% $opt{'prefix'} %>update_phonenums(phonenums) {
  57
  58       var reply = JSON.parse(phonenums);
  59       // blank the current phonenum
  60       $('#<% $opt{prefix} %>phonenum').empty();
  61
  62 %     if ($opt{empty}) {
  63         if ( what.form.<% $opt{'prefix'} %>phonenum.type != 'select-multiple' ){
  64           jopt($('#<% $opt{'prefix'} %>phonenum'), '', '<% $opt{empty} %>');
  65         }
  66 %     }
  67
  68       // add the new phonenums
  69       var phonenumArray = reply.phonenums;
  70       for ( var s = 0; s < phonenumArray.length; s++ ) {
  71           var phonenumLabel = phonenumArray[s];
  72           if ( phonenumLabel == "" )
  73               phonenumLabel = '(n/a)';
  74           jopt($('#<% $opt{'prefix'} %>phonenum'), phonenumArray[s], phonenumLabel);
  75       }
  76
  77       //var phonenumFormLabel = document.getElementById('<% $opt{'prefix'} %>phonenumlabel');
  78
  79     $('#<% $opt{'prefix'} %>phonenum').prop('disabled', false);
  80
  81       phonenumwait.style.display = 'none';
  82       if ( phonenumArray.length >= 1 ) {
  83         $('#<% $opt{'prefix'} %>phonenum').prop('disabled', false);
  84         $('#<% $opt{'prefix'} %>phonenum').css('display', '');
  85       } else {
  86         var phonenumerror = document.getElementById('<% $opt{'prefix'} %>phonenumerror');
  87         phonenumerror.style.display = 'inline';
  88         if ( reply.error ) {
  89           phonenumerror.textContent = reply.error;
  90         } else {
  91           phonenumerror.textContent = 'Select a different <% $opt{'region'} ? 'region' : 'city/exchange' %>';
  92         }
  93       }
  94
  95       //run the callback
  96       if ( callback != null )
  97         callback();
  98
  99         var phonenum_sel = what.form.<% $opt{'prefix'} %>phonenum;
 100         var bulkdid = document.getElementById('bulkdid');
 101         if ( bulkdid != null ) {
 102             var numCheckboxes = Math.min(phonenum_sel.options.length-1,<% $opt{'bulknum'} %>);
 103             var i;
 104             for(i = 0; i < numCheckboxes; i++){
 105                 document.getElementById('bulkdid_'+i).style.display = 'block';
 106                 document.getElementById('checkbox_bulkdid_'+i).checked = false;
 107                 var tn = phonenum_sel.options[i+1].value;
 108                 document.getElementById('checkbox_bulkdid_'+i).value = tn;
 109                 document.getElementById('label_bulkdid_'+i).innerHTML = tn;
 110             }
 111             for(i = numCheckboxes; i < <% $opt{'bulknum'} %>; i++){
 112                 document.getElementById('bulkdid_'+i).style.display = 'none';
 113                 document.getElementById('checkbox_bulkdid_'+i).value = '';
 114                 document.getElementById('checkbox_bulkdid_'+i).checked = false;
 115                 document.getElementById('label_bulkdid_'+i).innerHTML = '';
 116             }
 117         }
 118
 119     }
 120
 121     // go get the new phonenums
 122     <% $opt{'prefix'} %>get_phonenums( thing, <% $opt{'svcpart'} %>, <% $opt{'prefix'} %>update_phonenums );
 123
 124   }
 125
 126 % if ( $opt{'tollfree'} ) {
 127     function <% $opt{'prefix'} %>update_phonenums(phonenums) {
 128         // lame hack so I can copy the code from above
 129         what = document.getElementById('<% $opt{prefix} %>phonenum');
 130
 131         // blank the current phonenum
 132         $('#<% $opt{prefix} %>phonenum').empty();
 133
 134 %     if ($opt{empty}) {
 135         jopt($('#<% $opt{'prefix'} %>phonenum'), '', '<% $opt{empty} %>');
 136 %     }
 137
 138       // add the new phonenums
 139       var phonenumArray = eval('(' + phonenums + ')' );
 140       for ( var s = 0; s < phonenumArray.length; s++ ) {
 141           var phonenumLabel = phonenumArray[s];
 142           if ( phonenumLabel == "" )
 143               phonenumLabel = '(n/a)';
 144           jopt($('#<% $opt{'prefix'} %>phonenum'), phonenumArray[s], phonenumLabel);
 145       }
 146
 147       $('#<% $opt{'prefix'} %>phonenum').prop('disabled', false);
 148
 149       if ( phonenumArray.length >= 1 ) {
 150         $('#<% $opt{'prefix'} %>phonenum').prop('disabled', false);
 151         $('#<% $opt{'prefix'} %>phonenum').css('display', '');
 152       }
 153
 154     }
 155     <% $opt{'prefix'} %>get_phonenums( 'tollfree', <% $opt{'svcpart'} %>, <% $opt{'prefix'} %>update_phonenums );
 156 % }
 157
 158 </SCRIPT>
 159
 160 % unless ( $opt{'tollfree'} ) {
 161 <DIV ID="phonenumwait" STYLE="display:none"><IMG SRC="<%$fsurl%>images/wait-orange.gif"> <B>Finding phone numbers</B></DIV>
 162
 163 <DIV ID="phonenumerror" STYLE="display:none; font-weight: bold"><IMG SRC="<%$fsurl%>images/cross.png"></DIV>
 164 % }
 165
 166 <SELECT <% $opt{multiple} ? 'MULTIPLE SIZE=25' : '' %>
 167         ID   = "<% $opt{'prefix'} %>phonenum"
 168         NAME = "<% $opt{'prefix'} %>phonenum"
 169         <% $opt{'disabled'} %>
 170 %#        notonChange="<% $opt{'prefix'} %>phonenum_changed(this); <% $opt{'onchange'} %>"
 171 >
 172 % unless ( $opt{multiple} ) {
 173     <OPTION VALUE="">Select phone number</OPTION>
 174 % }
 175 </SELECT>
 176
 177 <%init>
 178
 179 my %opt = @_;
 180
 181 $opt{disabled} = 'disabled' unless exists $opt{disabled};
 182
 183 my $previous = $opt{'region'} ? 'region' : 'exchange';
 184
 185 </%init>