<form class="row g-0 needs-validation" method="post" action="{{ url('system/address/add',$o->id) }}" novalidate> <input type="hidden" id="action" name="action" value=""> @csrf <div class="row pt-0"> <div class="col-12"> <div class="greyframe titledbox shadow0xb0"> <h2 class="cap">Assign New/Update Existing Address</h2> <div class="row"> <!-- Select Zone --> <div class="col-3"> <label for="zone_id" class="form-label">Zone</label> <div class="input-group has-validation"> <span class="input-group-text"><i class="bi bi-hash"></i></span> <select class="form-select @error('zone_id') is-invalid @enderror" id="zone_id" name="zone_id" required> <option></option> @foreach(\App\Models\Zone::active()->domainZoneOrder()->with(['domain'])->get() as $zo) <option value="{{ $zo->id }}">{{ $zo->zone_id }} <small>({{ $zo->domain->name }})</small></option> @endforeach </select> <span class="invalid-feedback" role="alert"> @error('zone_id') {{ $message }} @else Please select the Zone for the node's address. @enderror </span> </div> </div> <!-- Select Region --> <div class="col-3 d-none" id="region-select"> <label for="region_id" class="form-label">Region</label> <div class="input-group has-validation"> <span class="input-group-text"><i class="bi bi-geo"></i></span> <select class="form-select @error('region_id') is-invalid @enderror" id="region_id" name="region_id" required> </select> <span class="invalid-feedback" role="alert"> @error('region_id') {{ $message }} @else Please make a choice. @enderror </span> </div> </div> <!-- Select Host --> <div class="col-3 d-none" id="host-select"> <label for="host_id" class="form-label">Host</label> <div class="input-group has-validation"> <span class="input-group-text"><i class="bi bi-diagram-3-fill"></i></span> <select class="form-select @error('host_id') is-invalid @enderror" id="host_id" name="host_id"> </select> <span class="invalid-feedback" role="alert"> @error('host_id') {{ $message }} @enderror </span> </div> </div> <!-- Select Hub --> <div class="col-3 d-none" id="hub-select"> <label for="hub_id" class="form-label">Hub</label> <div class="input-group has-validation"> <span class="input-group-text"><i class="bi bi-diagram-2-fill"></i></span> <select class="form-select @error('hub_id') is-invalid @enderror" id="hub_id" name="hub_id"> </select> <span class="invalid-feedback" role="alert"> @error('hub_id') {{ $message }} @enderror </span> </div> </div> </div> <div class="row"> <!-- Node/Point address --> <div class="col-3 d-none" id="node-address"> <label for="node_id" class="form-label">Node/Point Address</label> <div class="input-group has-validation"> <span class="input-group-text"><i class="bi bi-hash"></i></span> <input type="text" style="width: 35%;" class="form-control text-end @error('node_id') is-invalid @enderror" id="node_id" placeholder="Node" name="node_id" value="{{ old('node_id',$o->node_id) }}" @cannot('admin',$o)disabled @endcannot> <span class="input-group-text p-0">.</span> <input type="text" class="form-control @error('point_id') is-invalid @enderror" id="point_id" placeholder="0" name="point_id" value="{{ old('point_id',$o->point_id) ?: 0 }}" @cannot('admin',$o)disabled @endcannot style="padding-left: 0;"> <span class="invalid-feedback" role="alert"> @error('node_id') {{ $message }} @enderror @error('point_id') {{ $message }} @enderror </span> </div> </div> <!-- Region Address --> <div class="col-3 ps-0 d-none" id="region-address"> <label for="region_id_new" class="form-label">Region Address</label> <div class="input-group has-validation"> <span class="input-group-text"><i class="bi bi-hash"></i></span> <input type="text" style="width: 35%;" class="form-control @error('region_id_new') is-invalid @enderror" id="region_id_new" placeholder="Region #" name="region_id_new" value="{{ old('region_id_new') }}" @cannot('admin',$o)disabled @endcannot> <span class="input-group-text">/0.0</span> <span class="invalid-feedback" role="alert"> @error('region_id_new') {{ $message }} @else The region number is required. @enderror </span> </div> </div> <!-- Host Address --> <div class="col-3 ps-0 d-none" id="host-address"> <label for="host_id_new" class="form-label">Host Address</label> <div class="input-group has-validation"> <span class="input-group-text"><i class="bi bi-hash"></i></span> <input type="text" class="form-control text-end @error('host_id_new') is-invalid @enderror" id="host_id_new" placeholder="Host #" name="host_id_new" value="{{ old('host_id_new') }}" @cannot('admin',$o)disabled @endcannot> <span class="input-group-text p-0">/</span> <input type="text" class="form-control @error('node_id_new') is-invalid @enderror" id="node_id_new" placeholder="Node #" name="node_id_new" value="{{ old('node_id_new') }}" @cannot('admin',$o)disabled @endcannot> <span class="input-group-text">.0</span> <span class="invalid-feedback" role="alert"> @error('host_id_new') {{ $message }} @else The host address is required. @enderror @error('node_id_new') {{ $message }} @else The node address is required. @enderror </span> </div> </div> <!-- Hub Checkbox --> <div class="col-2 d-none" id="hub-checkbox"> <label for="hub" class="form-label">Hub</label> <div class="input-group"> <div class="btn-group" role="group"> <input type="radio" class="btn-check" name="hub" id="hub_yes" value="1" required @cannot('admin',$o)disabled @endcannot @if(old('hub',$o->hub))checked @endif> <label class="btn btn-outline-success" for="hub_yes">Yes</label> <input type="radio" class="btn-check btn-danger" name="hub" id="hub_no" value="0" required @cannot('admin',$o)disabled @endcannot @if(! old('hub',$o->hub))checked @endif> <label class="btn btn-outline-danger" for="hub_no">No</label> </div> </div> </div> <!-- Security --> <div class="col-2 d-none" id="sec-level"> <label for="security" class="form-label">Security Level</label> <div class="input-group has-validation"> <span class="input-group-text"><i class="bi bi-file-lock"></i></span> <input type="text" class="form-control text-end @error('security') is-invalid @enderror" id="security" placeholder="#" name="security" value="{{ old('security') }}" @cannot('admin',$o)disabled @endcannot> <span class="invalid-feedback" role="alert"> @error('security') {{ $message }} @enderror </span> </div> </div> </div> <div class="row"> <div class="col-2"> <a href="{{ url('system') }}" class="btn btn-danger">Cancel</a> </div> <span class="col-6 mt-auto mx-auto text-center align-bottom"> @if($errors->count()) <span class="btn btn-sm btn-danger" role="alert"> There were errors with the submission. <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </span> @endif </span> @can('admin',$o) <div class="col-2"> <button type="submit" id="submit" name="submit" class="btn btn-success float-end">Add/Update</button> </div> @endcan </div> </div> </div> </div> </form> @section('page-scripts') <script type="text/javascript"> $(document).ready(function() { var modify; var id; /* // Disable enter for form submission. $('input').on('keydown', function(event) { var x = event.which; if (x === 13) { event.preventDefault(); } }); */ $('.modaddress').on('click',function(event) { id = $(this).attr('data-id'); event.stopPropagation(); modify = $.get('{{ url('system/api/address/get') }}'+'/'+id,function(data) { $('#zone_id').val(data.zone_id).change(); $('#node_id').val(data.node_id).change(); $('#point_id').val(data.point_id).change(); $('#security').val(data.security).change(); }); return false; }); $('#zone_id').on('change',function() { $(this).parent().find('i').addClass('spinner-grow spinner-grow-sm'); $('#region_id').prop('disabled',true); $('#region_id').children().remove(); if (! $('#region-address').hasClass('d-none')) $('#region-address').addClass('d-none'); if (! $('#host-address').hasClass('d-none')) $('#host-address').addClass('d-none'); if (! $('#host-select').hasClass('d-none')) $('#host-select').addClass('d-none'); if (! $('#hub-select').hasClass('d-none')) $('#hub-select').addClass('d-none') if (! $('#hub-checkbox').hasClass('d-none')) $('#hub-checkbox').addClass('d-none'); if (! $('#node-address').hasClass('d-none')) $('#node-address').addClass('d-none'); $.get('{{ url('domain/api/regions') }}'+'/'+this.value,function(data) { $('#region_id').append('<option value=""></option>'); $('#region_id').append('<option value="0">No Region</option>'); $('#region_id').append('<option value="new">New Region</option>'); data.forEach(function(item) { $('#region_id').append('<option value="'+item.id+'">'+item.value+'</option>'); }); $('#region_id').prop('disabled',false); $('#region_id').show(); if (modify.responseJSON.region_id) $('#region_id').val(modify.responseJSON.region_id).change(); }); $('#region-select').removeClass('d-none'); $(this).parent().find('i').removeClass('spinner-grow spinner-grow-sm'); }); $('#region_id').on('change',function() { switch(this.value) { case '': if (! $('#region-address').hasClass('d-none')) $('#region-address').addClass('d-none'); if (! $('#host-select').hasClass('d-none')) $('#host-select').addClass('d-none'); if (! $('#host-address').hasClass('d-none')) $('#host-address').addClass('d-none'); if (! $('#hub-select').hasClass('d-none')) $('#hub-select').addClass('d-none'); if (! $('#hub-checkbox').hasClass('d-none')) $('#hub-checkbox').addClass('d-none'); if (! $('#node-address').hasClass('d-none')) $('#node-address').addClass('d-none'); break; case 'new': if (! $('#host-select').hasClass('d-none')) $('#host-select').addClass('d-none'); if (! $('#host-address').hasClass('d-none')) $('#host-address').addClass('d-none'); if ($('#region-address').hasClass('d-none')) $('#region-address').removeClass('d-none'); if (! $('#hub-select').hasClass('d-none')) $('#hub-select').addClass('d-none'); if (! $('#hub-checkbox').hasClass('d-none')) $('#hub-checkbox').addClass('d-none'); if (! $('#node-address').hasClass('d-none')) $('#node-address').addClass('d-none'); $('#action').val('region'); break; case '0': default: // Find Hosts if ($('#host-select').hasClass('d-none')) $('#host-select').removeClass('d-none'); if (! $('#region-address').hasClass('d-none')) $('#region-address').addClass('d-none'); if (! $('#hub-select').hasClass('d-none')) $('#hub-select').addClass('d-none'); if (! $('#hub-checkbox').hasClass('d-none')) $('#hub-checkbox').addClass('d-none'); if (! $('#host-address').hasClass('d-none')) $('#host-address').addClass('d-none'); if (! $('#node-address').hasClass('d-none')) $('#node-address').addClass('d-none'); $(this).parent().find('i').addClass('spinner-grow spinner-grow-sm'); $('#host_id').prop('disabled',true); $('#host_id').children().remove(); var that = this; $.get('{{ url('domain/api/hosts') }}'+'/'+$('#zone_id').val()+'/'+this.value,function(data) { $('#host_id').append('<option value=""></option>'); if (that.value !== '0') $('#host_id').append('<option value="0">No Host</option>'); $('#host_id').append('<option value="new">New Host</option>'); data.forEach(function(item) { $('#host_id').append('<option value="'+item.id+'">'+item.value+'</option>'); }); $('#host_id').prop('disabled',false); $('#host_id').show(); if (modify.responseJSON.host_id) $('#host_id').val(modify.responseJSON.host_id).change(); }); $('#host-select').removeClass('d-none'); $(this).parent().find('i').removeClass('spinner-grow spinner-grow-sm'); } }); $('#host_id').on('change',function() { switch(this.value) { case '': if (! $('#host-address').hasClass('d-none')) $('#host-address').addClass('d-none'); if (! $('#hub-select').hasClass('d-none')) $('#hub-select').addClass('d-none'); if (! $('#hub-checkbox').hasClass('d-none')) $('#hub-checkbox').addClass('d-none'); if (! $('#node-address').hasClass('d-none')) $('#node-address').addClass('d-none'); break; case 'new': if ($('#host-address').hasClass('d-none')) $('#host-address').removeClass('d-none'); if (! $('#hub-select').hasClass('d-none')) $('#hub-select').addClass('d-none'); if (! $('#hub-checkbox').hasClass('d-none')) $('#hub-checkbox').addClass('d-none'); if (! $('#node-address').hasClass('d-none')) $('#node-address').addClass('d-none'); $('#action').val('host'); break; case '0': default: if (! $('#host-address').hasClass('d-none')) $('#host-address').addClass('d-none'); if ($('#hub-select').hasClass('d-none')) $('#hub-select').removeClass('d-none'); if ($('#hub-checkbox').hasClass('d-none')) $('#hub-checkbox').removeClass('d-none'); if ($('#node-address').hasClass('d-none')) $('#node-address').removeClass('d-none'); $(this).parent().find('i').addClass('spinner-grow spinner-grow-sm'); $('#hub_id').prop('disabled',true); $('#hub_id').children().remove(); $.get('{{ url('domain/api/hubs') }}'+'/'+$('#zone_id').val()+'/'+this.value,function(data) { $('#hub_id').append('<option value="">No Hub</option>'); data.forEach(function(item) { $('#hub_id').append('<option value="'+item.id+'">'+item.value+'</option>'); }); $('#hub_id').prop('disabled',false); $('#hub_id').show(); if (modify.responseJSON.hub_id) $('#host_id').val(modify.responseJSON.hub_id).change(); }); $('#hub-select').removeClass('d-none'); $('#sec-level').removeClass('d-none'); $(this).parent().find('i').removeClass('spinner-grow spinner-grow-sm'); if (modify && modify.responseJSON) { $('#submit').val(id); $('#action').val('update'); } else { $('#action').val('node'); } } }); $('#hub_id').on('change',function() { switch(this.value) { case '': if ($('#hub-checkbox').hasClass('d-none')) $('#hub-checkbox').removeClass('d-none'); break; default: if (! $('#hub-checkbox').hasClass('d-none')) $('#hub-checkbox').addClass('d-none'); } }); $('#point_id').on('change',function() { switch(this.value) { case '0': if ($('#hub-checkbox').hasClass('d-none')) $('#hub-checkbox').removeClass('d-none'); break; default: if (! $('#hub-checkbox').hasClass('d-none')) $('#hub-checkbox').addClass('d-none'); } }); }); </script> @append