|
6 | 6 |
|
7 | 7 | @section('scripts') |
8 | 8 | @parent |
| 9 | + <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fuelux/3.13.0/css/fuelux.min.css" /> |
9 | 10 | <script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/4.2.1/highcharts.js"></script> |
10 | 11 | <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.7/socket.io.min.js"></script> |
| 12 | + <script src="//cdnjs.cloudflare.com/ajax/libs/fuelux/3.13.0/js/fuelux.min.js"></script> |
11 | 13 | <script src="{{ asset('js/bootstrap-notify.min.js') }}"></script> |
12 | 14 | <script> |
13 | 15 | $(document).ready(function () { |
|
285 | 287 | <div class="panel panel-default"> |
286 | 288 | <div class="panel-heading"></div> |
287 | 289 | <div class="panel-body"> |
288 | | - <table class="table table-striped table-bordered table-hover"> |
| 290 | + <table class="table table-striped table-bordered table-hover" style="margin-bottom:0;"> |
289 | 291 | <thead> |
290 | 292 | <td>IP Address</td> |
291 | 293 | <td>Ports</td> |
|
294 | 296 | <tbody> |
295 | 297 | @foreach($allocations as $ip => $ports) |
296 | 298 | <tr> |
297 | | - <td>{{ $ip }}</td> |
| 299 | + <td><span style="cursor:pointer" data-action="delete" data-ip="{{ $ip }}" data-total="{{ count($ports) }}" class="is-ipblock"><i class="fa fa-fw fa-square-o"></i></span> {{ $ip }}</td> |
298 | 300 | <td> |
299 | 301 | @foreach($ports as $id => $allocation) |
300 | 302 | @if (($id % 2) === 0) |
|
322 | 324 | </tbody> |
323 | 325 | </table> |
324 | 326 | </div> |
| 327 | + <div class="panel-heading" style="border-top: 1px solid #ddd;"></div> |
| 328 | + <div class="panel-body"> |
| 329 | + <h4 style="margin-top:0;">Allocate Additional Ports</h4> |
| 330 | + <form action="{{ route('admin.nodes.post.allocations', $node->id) }}" method="POST"> |
| 331 | + <div class="row" id="duplicate"> |
| 332 | + <div class="col-md-4 fuelux"> |
| 333 | + <label for="" class="control-label">IP Address</label> |
| 334 | + <div class="input-group input-append dropdown combobox allocationComboBox" data-initialize="combobox"> |
| 335 | + <input type="text" name="allocate_ip[]" class="form-control pillbox_ip" style="border-right:0;"> |
| 336 | + <div class="input-group-btn"> |
| 337 | + <button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> |
| 338 | + <ul class="dropdown-menu dropdown-menu-right"> |
| 339 | + @foreach($allocations as $ip => $ports) |
| 340 | + <li data-action="alloc_dropdown_val" data-value="{{ $ip }}"><a href="#">{{ $ip }}</a></li> |
| 341 | + @endforeach |
| 342 | + </ul> |
| 343 | + </div> |
| 344 | + </div> |
| 345 | + </div> |
| 346 | + <div class="form-group col-md-7 col-xs-10 fuelux"> |
| 347 | + <label for="" class="control-label">Ports</label> |
| 348 | + <div class="pillbox allocationPillbox" data-initialize="pillbox"> |
| 349 | + <ul class="clearfix pill-group"> |
| 350 | + <li class="pillbox-input-wrap btn-group"> |
| 351 | + <input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add port"> |
| 352 | + </li> |
| 353 | + </ul> |
| 354 | + </div> |
| 355 | + <input name="allocate_port[]" type="hidden" class="pillboxMain"/> |
| 356 | + </div> |
| 357 | + <div class="form-group col-md-1 col-xs-2" style="margin-left: -10px;"> |
| 358 | + <label for="" class="control-label"> </label> |
| 359 | + <button class="btn btn-danger btn-allocate-delete removeClone disabled"><i class="fa fa-close"></i></button> |
| 360 | + </div> |
| 361 | + </div> |
| 362 | + <div class="row"> |
| 363 | + <div class="col-md-12"> |
| 364 | + <hr /> |
| 365 | + {!! csrf_field() !!} |
| 366 | + <input type="submit" class="btn btn-sm btn-primary" value="Add Ports" /> |
| 367 | + <button class="btn btn-success btn-sm cloneElement">Add More Rows</button> |
| 368 | + </div> |
| 369 | + </div> |
| 370 | + </form> |
| 371 | + </div> |
325 | 372 | </div> |
326 | 373 | </div> |
327 | 374 | <div class="tab-pane" id="tab_servers"> |
|
384 | 431 | placement: 'auto' |
385 | 432 | }); |
386 | 433 |
|
| 434 | + $('.cloneElement').on('click', function (event) { |
| 435 | + event.preventDefault(); |
| 436 | + var cloned = $('#duplicate').clone(); |
| 437 | + var rnd = randomKey(10); |
| 438 | + cloned.find('.allocationPillbox').removeClass('allocationPillbox').addClass('allocationPillbox_' + rnd); |
| 439 | + cloned.find('.pillboxMain').removeClass('pillboxMain').addClass('pillbox_' + rnd); |
| 440 | + cloned.find('.removeClone').removeClass('disabled'); |
| 441 | + cloned.find('.pillbox_ip').removeClass('pillbox_ip').addClass('pillbox_ip_' + rnd); |
| 442 | + cloned.insertAfter('#duplicate'); |
| 443 | + $('.allocationPillbox_' + rnd).pillbox(); |
| 444 | + $('.allocationPillbox_' + rnd).on('added.fu.pillbox edited.fu.pillbox removed.fu.pillbox', function pillboxChanged() { |
| 445 | + $('.pillbox_' + rnd).val(JSON.stringify($('.allocationPillbox_' + rnd).pillbox('items'))); |
| 446 | + }); |
| 447 | + $('.removeClone').on('click', function (event) { |
| 448 | + event.preventDefault(); |
| 449 | + var element = $(this); |
| 450 | + element.parent().parent().slideUp(function () { |
| 451 | + element.remove(); |
| 452 | + $('.pillbox_' + rnd).remove(); |
| 453 | + $('.pillbox_ip_' + rnd).remove(); |
| 454 | + }); |
| 455 | + }); |
| 456 | + }) |
| 457 | +
|
| 458 | + $('.allocationPillbox').pillbox(); |
| 459 | + $('.allocationComboBox').combobox(); |
| 460 | + $('.allocationPillbox').on('added.fu.pillbox edited.fu.pillbox removed.fu.pillbox', function pillboxChanged() { |
| 461 | + $('.pillboxMain').val(JSON.stringify($('.allocationPillbox').pillbox('items'))); |
| 462 | + }); |
| 463 | +
|
387 | 464 | var notifySocketError = false; |
388 | 465 | var Status = { |
389 | 466 | 0: 'Off', |
|
664 | 741 | 'X-CSRF-TOKEN': '{{ csrf_token() }}' |
665 | 742 | } |
666 | 743 | }).done(function (data) { |
| 744 | + if (element.hasClass('is-ipblock')) { |
| 745 | + var tMatched = 0; |
| 746 | + element.parent().parent().find('*').each(function () { |
| 747 | + if ($(this).attr('data-port') && $(this).attr('data-ip')) { |
| 748 | + $(this).fadeOut(); |
| 749 | + tMatched++; |
| 750 | + } |
| 751 | + }); |
| 752 | + if (tMatched === element.data('total')) { |
| 753 | + element.fadeOut(); |
| 754 | + $('li[data-action="alloc_dropdown_val"][data-value="' + deleteIp + '"]').remove(); |
| 755 | + element.parent().parent().slideUp().remove(); |
| 756 | + } |
| 757 | + } |
667 | 758 | swal({ |
668 | 759 | type: 'success', |
669 | 760 | title: 'Port Deleted!', |
|
0 commit comments