summaryrefslogtreecommitdiff
path: root/httemplate/elements/select-phonenum.html
blob: f0ff03c99ba1c031ea60cf48192a721e7c1bc8e7 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<%doc>
Selector for DID phone number.

Options:

- prefix: prefix for all the object IDs, field names, javascript functions,
etc. for including multiple DID selectors on a single page.

- empty: text to display when no number is selected ("empty_label")

- bulknum: allow bulk selection of up to this many numbers (self-service 
only? wtf?)

- svcpart: svcpart (required)

- tollfree: pass "tollfree" to misc/phonenums.cgi, instead of passing an 
exchange/region/anything else.

- region: corresponds to the inverse of "get_dids_npa_select". The selector
creates an on-change handler telling the previous selector in the hierarchy
to update the list of phone numbers. If 'region' is true, it will look for 
a previous selector named "region", and prefix the query it sends to 
phonenums.cgi with '_REGION', which results in get_dids() being called
with a 'region' parameter instead of 'ratecenter' and 'state'.


Internally, this will set up an exchange_changed or region_changed function 
to refresh the phone number list. The function will fetch misc/phonenums.cgi,
passing the exchange (or region) and 
</%doc>

<% include('/elements/xmlhttp.html',
              'url'  => $p.'misc/phonenums.cgi',
              'subs' => [ $opt{'prefix'}. 'get_phonenums' ],
          )
%>

<SCRIPT TYPE="text/javascript">

  function jopt(what,value,text) {
    var optionName = new Option(text, value, false, false);
    what.append(optionName);
  }

  function <% $opt{'prefix'} %><% $previous %>_changed(what, callback) {

    $('#<% $opt{'prefix'} %>phonenum').prop('disabled', true);
    $('#<% $opt{'prefix'} %>phonenum').css('display', 'none');
    var phonenumwait = document.getElementById('<% $opt{'prefix'} %>phonenumwait');
    phonenumwait.style.display = 'inline';
    var phonenumerror = document.getElementById('<% $opt{'prefix'} %>phonenumerror');
    phonenumerror.style.display = 'none';

    var thing = "<% $previous eq 'region' ? '_REGION ' : '' %>" + what.options[what.selectedIndex].value;

    function <% $opt{'prefix'} %>update_phonenums(phonenums) {

      var reply = JSON.parse(phonenums);
      // blank the current phonenum
      $('#<% $opt{prefix} %>phonenum').empty();

%     if ($opt{empty}) {
        if ( what.form.<% $opt{'prefix'} %>phonenum.type != 'select-multiple' ){
          jopt($('#<% $opt{'prefix'} %>phonenum'), '', '<% $opt{empty} %>');
        }
%     }

      // add the new phonenums
      var phonenumArray = reply.phonenums;
      for ( var s = 0; s < phonenumArray.length; s++ ) {
          var phonenumLabel = phonenumArray[s];
          if ( phonenumLabel == "" )
              phonenumLabel = '(n/a)';
          jopt($('#<% $opt{'prefix'} %>phonenum'), phonenumArray[s], phonenumLabel);
      }

      //var phonenumFormLabel = document.getElementById('<% $opt{'prefix'} %>phonenumlabel');

    $('#<% $opt{'prefix'} %>phonenum').prop('disabled', false);

      phonenumwait.style.display = 'none';
      if ( phonenumArray.length >= 1 ) {
        $('#<% $opt{'prefix'} %>phonenum').prop('disabled', false);
        $('#<% $opt{'prefix'} %>phonenum').css('display', '');
      } else {
        var phonenumerror = document.getElementById('<% $opt{'prefix'} %>phonenumerror');
        phonenumerror.style.display = 'inline';
        if ( reply.error ) {
          phonenumerror.textContent = reply.error;
        } else {
          phonenumerror.textContent = 'Select a different <% $opt{'region'} ? 'region' : 'city/exchange' %>';
        }
      }

      //run the callback
      if ( callback != null ) 
        callback();

	var phonenum_sel = what.form.<% $opt{'prefix'} %>phonenum;
	var bulkdid = document.getElementById('bulkdid');
	if ( bulkdid != null ) {
	    var numCheckboxes = Math.min(phonenum_sel.options.length-1,<% $opt{'bulknum'} %>);
	    var i;
	    for(i = 0; i < numCheckboxes; i++){
		document.getElementById('bulkdid_'+i).style.display = 'block';
		document.getElementById('checkbox_bulkdid_'+i).checked = false;
		var tn = phonenum_sel.options[i+1].value;
		document.getElementById('checkbox_bulkdid_'+i).value = tn;
		document.getElementById('label_bulkdid_'+i).innerHTML = tn;
	    }
	    for(i = numCheckboxes; i < <% $opt{'bulknum'} %>; i++){
		document.getElementById('bulkdid_'+i).style.display = 'none';
		document.getElementById('checkbox_bulkdid_'+i).value = '';
		document.getElementById('checkbox_bulkdid_'+i).checked = false;
		document.getElementById('label_bulkdid_'+i).innerHTML = '';
	    }
	}

    }

    // go get the new phonenums
    <% $opt{'prefix'} %>get_phonenums( thing, <% $opt{'svcpart'} %>, <% $opt{'prefix'} %>update_phonenums );

  }

% if ( $opt{'tollfree'} ) {
    function <% $opt{'prefix'} %>update_phonenums(phonenums) {
	// lame hack so I can copy the code from above
	what = document.getElementById('<% $opt{prefix} %>phonenum');

	// blank the current phonenum
        $('#<% $opt{prefix} %>phonenum').empty();

%     if ($opt{empty}) {
        jopt($('#<% $opt{'prefix'} %>phonenum'), '', '<% $opt{empty} %>');
%     }

      // add the new phonenums
      var phonenumArray = eval('(' + phonenums + ')' );
      for ( var s = 0; s < phonenumArray.length; s++ ) {
          var phonenumLabel = phonenumArray[s];
          if ( phonenumLabel == "" )
              phonenumLabel = '(n/a)';
          jopt($('#<% $opt{'prefix'} %>phonenum'), phonenumArray[s], phonenumLabel);
      }

      $('#<% $opt{'prefix'} %>phonenum').prop('disabled', false);

      if ( phonenumArray.length >= 1 ) {
        $('#<% $opt{'prefix'} %>phonenum').prop('disabled', false);
        $('#<% $opt{'prefix'} %>phonenum').css('display', '');
      } 

    }
    <% $opt{'prefix'} %>get_phonenums( 'tollfree', <% $opt{'svcpart'} %>, <% $opt{'prefix'} %>update_phonenums );
% }

</SCRIPT>

% unless ( $opt{'tollfree'} ) {
<DIV ID="phonenumwait" STYLE="display:none"><IMG SRC="<%$fsurl%>images/wait-orange.gif"> <B>Finding phone numbers</B></DIV>

<DIV ID="phonenumerror" STYLE="display:none; font-weight: bold"><IMG SRC="<%$fsurl%>images/cross.png"></DIV>
% }

<SELECT <% $opt{multiple} ? 'MULTIPLE SIZE=25' : '' %>
        ID   = "<% $opt{'prefix'} %>phonenum"
        NAME = "<% $opt{'prefix'} %>phonenum" 
        <% $opt{'disabled'} %>
%#        notonChange="<% $opt{'prefix'} %>phonenum_changed(this); <% $opt{'onchange'} %>"
>
% unless ( $opt{multiple} ) {
    <OPTION VALUE="">Select phone number</OPTION>
% }
</SELECT>

<%init>

my %opt = @_;

$opt{disabled} = 'disabled' unless exists $opt{disabled};

my $previous = $opt{'region'} ? 'region' : 'exchange';

</%init>