httemplate/elements/tr-tower_sectors.html

   1 <%shared>
   2 # kind of a hack...
   3 my ($export) = FS::tower_sector->part_export;
   4 my $antenna_types; # will be an ordered hash
   5 if ($export and $export->can('get_antenna_types')) {
   6   $antenna_types = $export->get_antenna_types;
   7 }
   8 </%shared>
   9 <%init>
  10 my %opt = @_;
  11 my $tower = $opt{'object'};
  12 my $towernum = $tower->towernum;
  13 my $cgi = $opt{'cgi'};
  14
  15 my $tabcounter = 0;
  16
  17 my @fields = qw(
  18   sectorname ip_addr height freq_mhz direction width downtilt v_width
  19   db_high db_low sector_range
  20   power line_loss antenna_gain hardware_typenum up_rate_limit down_rate_limit
  21 );
  22
  23 my @sectors;
  24 if ( $cgi->param('error') ) {
  25   foreach my $k ($cgi->param) {
  26     if ($k =~ /^sectornum\d+$/) {
  27       my $sectornum = $cgi->param($k);
  28       my $sector = FS::tower_sector->new({
  29         'sectornum' => $sectornum,
  30         'towernum'  => $towernum,
  31         map { $_ => scalar($cgi->param($k.'_'.$_)) } @fields,
  32       });
  33       push @sectors, $sector if length($sector->sectorname);
  34     }
  35   }
  36 } elsif ( $towernum ) {
  37   @sectors = $tower->tower_sector;
  38 } # else new mode, no sectors yet
  39
  40 my $id = $opt{id} || $opt{field} || 'sectornum';
  41
  42 </%init>
  43 <& tablebreak-tr-title.html, value => 'Sectors' &>
  44
  45 <style>
  46   .ui-tabs-nav a {
  47     padding: 6px 9px;
  48     font-weight: bold;
  49   }
  50   .ui-tabs-nav li {
  51     border-top-left-radius: 0.5em;
  52     border-top-right-radius: 0.5em;
  53   }
  54   .ui-tabs-active li {
  55     border-bottom-color: #fff;
  56   }
  57   .ui-tabs {
  58     font-weight: bold;
  59   }
  60   .ui-tabs label {
  61     padding-top: 3px;
  62     width: 140px;
  63     display: inline-block;
  64     text-align: right;
  65   }
  66   .ui-tabs input, .ui-spinner {
  67     border: 1px solid #666;
  68     border-radius: 2px;
  69     font-size: 13.3px;
  70     text-align: right;
  71     font-weight: normal;
  72     padding: 1px;
  73   }
  74   .ui-tabs input { /* but not spinner, messes it up */
  75     margin-left: 1px;
  76     margin-right: 1px;
  77   }
  78   .ui-tabs input:focus {
  79     border-color: #7e0079;
  80     background-color: #ffffdd;
  81   }
  82   .ui-spinner input { /* use the spinner's border and padding */
  83     border: none;
  84     text-align: left;
  85   }
  86   .ui-tabs p {
  87     margin-top: 8px;
  88     margin-bottom: 8px;
  89   }
  90
  91 </style>
  92
  93
  94 <tr>
  95   <td colspan=2>
  96 %# prototypes
  97     <div style="display: none">
  98 <& .tab, id => $id . '_P' &>
  99 <& .panel, id => $id . '_P' &>
 100     </div>
 101
 102 %# main container
 103     <div id="<% $id %>_tabs">
 104       <ul>
 105 % foreach my $sector (@sectors) {
 106 <& .tab, sector => $sector, id => $id . $tabcounter &>
 107 %   $tabcounter++;
 108 % }
 109       </ul>
 110
 111 % $tabcounter = 0;
 112 % foreach my $sector (@sectors) {
 113 <& .panel, sector => $sector, id => $id . $tabcounter &>
 114 %   $tabcounter++;
 115 % }
 116     </div>
 117   </td>
 118 </tr>
 119 <script>
 120 $(function() {
 121   var tabcounter = <% $tabcounter %>;
 122   var id = <% $id |js_string %>;
 123   //create tab bar
 124   var tabs = $( '#'+id+'_tabs' ).tabs();
 125
 126   function changedSectorName() {
 127     var this_panel = $(this).closest('div');
 128     var this_tab = tabs.find('#' + this_panel.prop('id') + '_tab');
 129     // if this is the last panel, make a new one
 130     if (this_panel.next().length == 0) {
 131       addSector();
 132     }
 133     // and update the current tab's text with the sector name
 134     this_tab.find('a').text($(this).val());
 135   }
 136
 137   var tab_proto = $('#'+id+'_P_tab');
 138   var panel_proto = $('#'+id+'_P');
 139
 140   function addSector() {
 141     var new_tab = tab_proto.clone();
 142     var new_panel = panel_proto.clone();
 143     // replace proto placeholder with the counter value, in all id and
 144     // name properties in new_panel and its children
 145     new_panel.add( new_panel.find('*') ).each(function() {
 146       this.id = this.id.replace('_P', tabcounter);
 147       if (this.name) {
 148         this.name = this.name.replace('_P', tabcounter);
 149       }
 150     });
 151     tabcounter++;
 152     // and set the handler up on it
 153     new_panel.find('.input-sectorname').on('change', changedSectorName);
 154
 155     // also update the tab itself
 156     new_tab.find('a').prop('href', '#' + new_panel.prop('id'));
 157     new_tab.prop('id', new_panel.prop('id') + '_tab');
 158
 159     tabs.append(new_panel);
 160     tabs.children('ul:first').append(new_tab);
 161
 162     tabs.tabs('refresh');
 163   }
 164
 165   $('.dbspinner').spinner({ step: 5 });
 166
 167   $('.input-sectorname').on('change', changedSectorName);
 168   addSector();
 169
 170 });
 171 </script>
 172 <%def .tab>
 173 % my %opt = @_;
 174 % my $sector = $opt{sector};
 175 % my $id = $opt{id};
 176 % my $title = $sector ? $sector->sectorname : mt('Add new');
 177       <li id="<% $id %>_tab">
 178         <a href="#<% $id %>"><% $title |h %></a>
 179       </li>
 180 </%def>
 181 <%def .panel>
 182 % my %opt = @_;
 183 % my $sector = $opt{sector} || FS::tower_sector->new({});
 184 % my $id = $opt{id}; # sectornumX
 185 <div id="<% $id %>">
 186 % # no id on this one, the panel gets the "sectornumX" id
 187   <p>
 188     <label><% emt('Sector number') %></label> <% $sector->sectornum |h %>
 189     <input type="hidden" name="<% $id %>" value="<% $sector->sectornum |h %>">
 190   </p>
 191   <p>
 192     <label><% emt('Sector name') %></label>
 193     <input style="text-align: left"
 194            class="input-sectorname"
 195            id="<% $id %>_sectorname"
 196            name="<% $id %>_sectorname"
 197            value="<% $sector->sectorname |h %>">
 198
 199     <label><% emt('IP address') %></label>
 200     <input style="text-align: left"
 201            id="<% $id %>_ip_addr"
 202            name="<% $id %>_ip_addr"
 203            value="<% $sector->ip_addr |h %>">
 204   </p>
 205   <p>
 206     <label for="<% $id %>_height"><% emt('Antenna height') %></label>
 207     <input size="3"
 208            id="<% $id %>_height"
 209            name="<% $id %>_height"
 210            value="<% $sector->height |h %>">
 211     <% emt('feet above ground') %>
 212   </p>
 213   <p>
 214     <label for="<% $id %>_direction"><% emt('Azimuth') %></label>
 215     <input size="3"
 216            id="<% $id %>_direction"
 217            name="<% $id %>_direction"
 218            value="<% $sector->direction |h %>">&deg;
 219     <label for="<% $id %>_downtilt"><% emt('Down tilt') %></label>
 220     <input size="2"
 221            id="<% $id %>_downtilt"
 222            name="<% $id %>_downtilt"
 223            value="<% $sector->downtilt |h %>">&deg;
 224   </p>
 225
 226   <p>
 227     <label for="<% $id %>_freq_mhz"><% emt('Frequency') %></label>
 228     <input size="4"
 229            id="<% $id %>_freq_mhz"
 230            name="<% $id %>_freq_mhz"
 231            value="<% $sector->freq_mhz |h %>">
 232     <% emt('MHz') %>
 233   </p>
 234
 235   <p>
 236     <label for="<% $id %>_power"><% emt('Transmit power') %></label>
 237     <input size="3"
 238            id="<% $id %>_power"
 239            name="<% $id %>_power"
 240            value="<% $sector->power |h %>">
 241     <% emt('dBm') %><br>
 242     <label for="<% $id %>_antenna_gain">+ </label>
 243     <input size="3"
 244            id="<% $id %>_antenna_gain"
 245            name="<% $id %>_antenna_gain"
 246            value="<% $sector->antenna_gain |h %>">
 247     <% emt('dB antenna gain') %><br>
 248     <label for="<% $id %>_line_loss">&ndash; </label>
 249     <input size="3"
 250            id="<% $id %>_line_loss"
 251            name="<% $id %>_line_loss"
 252            value="<% $sector->line_loss |h %>">
 253     <% emt('dB line loss') %>
 254
 255 % if ( $antenna_types ) {
 256   <p>
 257     <label for="<% $id %>_hardware_typenum"><% emt('Antenna type') %></label>
 258     <& /elements/select.html,
 259       field   => $id.'_hardware_typenum',
 260       options => [ '', keys %$antenna_types ],
 261       labels  => $antenna_types,
 262       curr_value => $sector->hardware_typenum,
 263     &>
 264   </p>
 265 % }
 266 % # this next section might not be necessary if you enter an antenna type
 267   <p>
 268     <label for="<% $id %>_width"><% emt('Horizontal beam') %></label>
 269     <input size="3"
 270            id="<% $id %>_width"
 271            name="<% $id %>_width"
 272            value="<% $sector->width |h %>">&deg;
 273     <label for="<% $id %>_v_width"><% emt('Vertical beam') %></label>
 274     <input size="2"
 275            id="<% $id %>_v_width"
 276            name="<% $id %>_v_width"
 277            value="<% $sector->v_width |h %>">&deg;
 278   </p>
 279
 280   <label><% emt('Signal margin') %></label>
 281   <div style="display: inline-block; vertical-align: top">
 282       <input class="dbspinner"
 283              size="4"
 284              id="<% $id %>_db_high"
 285              name="<% $id %>_db_high"
 286              value="<% $sector->db_high |h %>">
 287       <% emt('dB (high quality)') %>
 288       <br>
 289
 290       <input class="dbspinner"
 291              size="4"
 292              id="<% $id %>_db_low"
 293              name="<% $id %>_db_low"
 294              value="<% $sector->db_low |h %>">
 295       <% emt('dB (low quality)') %>
 296   </div>
 297   <p>
 298   <label><% emt('Up Rate (Kbps)') %></label>
 299     <input style="text-align: left"
 300            id="<% $id %>_up_rate_limit"
 301            name="<% $id %>_up_rate_limit"
 302            value="<% $sector->up_rate_limit |h %>">
 303   </p>
 304   <p>
 305     <label><% emt('Down Rate (Kbps)') %></label>
 306     <input style="text-align: left"
 307            id="<% $id %>_down_rate_limit"
 308            name="<% $id %>_down_rate_limit"
 309            value="<% $sector->down_rate_limit |h %>">
 310   </p>
 311
 312 </div>
 313 </%def>