clrghouz/resources/views/system/widget/form-address.blade.php

460 lines
14 KiB
PHP

@use(App\Models\Zone)
<form class="needs-validation" method="post" action="{{ url('system/address/add',$o->id) }}" autocomplete="off" novalidate>
@csrf
<input type="hidden" id="action" name="action" value="">
<div class="greyframe titledbox shadow0xb0">
<h2 class="cap">Assign New/Update Existing Address</h2>
<div class="row">
<!-- Select Zone -->
<div class="col-3">
<x-form.select name="zone_id" icon="bi-hash" label="Zone" :options="Zone::select(['id','zone_id','domain_id'])->active()->domainZoneOrder()->with(['domain'])->cursor()->map(fn($item,$key)=>['id'=>$item->id,'value'=>sprintf('%d [%s]',$item->zone_id,$item->domain->name)])" required="true" />
</div>
<!-- Select Region -->
<div class="col-3 d-none" id="region-select">
<x-form.select name="region_id" icon="bi-geo" label="Region" :required="true" />
</div>
<!-- Select Host -->
<div class="col-3 d-none" id="host-select">
<x-form.select name="host_id" icon="bi-diagram-3-fill" label="Host" />
</div>
<!-- Select Hub -->
<div class="col-3 d-none" id="hub-select">
<x-form.select name="hub_id" icon="bi-diagram-2-fill" label="Hub" />
</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 data-1p-ignore>
<span class="input-group-text p-0">.</span>
<input type="text" class="form-control pl-0 @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>
<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 data-1p-ignore>
<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 data-1p-ignore>
<span class="input-group-text">/0.0</span>
<span class="invalid-feedback" role="alert">
@error('host_id_new')
{!! $message !!}
@else
The host address is required.
@enderror
</span>
</div>
</div>
{{--
<!-- Hub Checkbox -->
<div class="col-2 d-none" id="hub-checkbox">
<span class="label form-label">Hub</span>
<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>
</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() {
// Hide all our other input boxes
if (! $('#region-select').hasClass('d-none'))
$('#region-select').addClass('d-none');
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');
if (! $('#sec-level').hasClass('d-none'))
$('#sec-level').addClass('d-none')
if (! this.value)
return false;
var icon = $(this).parent().find('i');
icon.addClass('spinner-grow spinner-grow-sm');
$.get('{{ url('domain/api/regions') }}'+'/'+this.value,function(data) {
$('#region_id').prop('disabled',true);
$('#region_id').children().remove();
$('#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 && modify.responseJSON.region_id)
$('#region_id').val(modify.responseJSON.region_id).change();
$('#region-select').removeClass('d-none');
icon.removeClass('spinner-grow spinner-grow-sm');
});
});
$('#region_id').on('change',function() {
// Hide all our other input boxes
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');
switch(this.value) {
// Not selected - everything off
case '':
if (! $('#region-address').hasClass('d-none'))
$('#region-address').addClass('d-none');
if (! $('#host-select').hasClass('d-none'))
$('#host-select').addClass('d-none');
if (! $('#sec-level').hasClass('d-none'))
$('#sec-level').addClass('d-none')
break;
// New Region - ask address/security
case 'new':
if ($('#region-address').hasClass('d-none'))
$('#region-address').removeClass('d-none');
if ($('#sec-level').hasClass('d-none'))
$('#sec-level').removeClass('d-none')
$('#action').val('region');
break;
// No region - next Host Select
case '0':
// Existing entry selected - next Host Select
default:
// Find Hosts
if (! $('#region-address').hasClass('d-none'))
$('#region-address').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');
if (! $('#sec-level').hasClass('d-none'))
$('#sec-level').addClass('d-none')
var that = this;
var icon = $(this).parent().find('i');
icon.addClass('spinner-grow spinner-grow-sm');
$.get('{{ url('domain/api/hosts') }}'+'/'+$('#zone_id').val()+'/'+this.value,function(data) {
$('#host_id').prop('disabled',true);
$('#host_id').children().remove();
$('#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 && modify.responseJSON.host_id)
$('#host_id').val(modify.responseJSON.host_id).change();
$('#host-select').removeClass('d-none');
icon.removeClass('spinner-grow spinner-grow-sm');
});
}
});
$('#host_id').on('change',function() {
if (! $('#hub-select').hasClass('d-none'))
$('#hub-select').addClass('d-none');
switch(this.value) {
// Not selected - everything off
case '':
if (! $('#host-address').hasClass('d-none'))
$('#host-address').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');
if (! $('#sec-level').hasClass('d-none'))
$('#sec-level').addClass('d-none')
break;
// New Host - ask address/security
case 'new':
if ($('#host-address').hasClass('d-none'))
$('#host-address').removeClass('d-none');
{{--
if (! $('#hub-checkbox').hasClass('d-none'))
$('#hub-checkbox').addClass('d-none');
--}}
if (! $('#node-address').hasClass('d-none'))
$('#node-address').addClass('d-none');
if ($('#sec-level').hasClass('d-none'))
$('#sec-level').removeClass('d-none')
$('#action').val('host');
break;
// No host - next Hub Select
case '0':
// Existing entry selected - next Hub Select
default:
$('#node_id').prop('disabled',true);
$('#point_id').prop('disabled',true);
if (! $('#host-address').hasClass('d-none'))
$('#host-address').addClass('d-none');
{{--
if ($('#hub-checkbox').hasClass('d-none'))
$('#hub-checkbox').removeClass('d-none');
--}}
if ($('#node-address').hasClass('d-none'))
$('#node-address').removeClass('d-none');
if ($('#sec-level').hasClass('d-none'))
$('#sec-level').removeClass('d-none')
var icon = $(this).parent().find('i');
icon.addClass('spinner-grow spinner-grow-sm');
$.get('{{ url('domain/api/hubs') }}'+'/'+$('#zone_id').val()+'/'+this.value,function(data) {
$('#hub_id').prop('disabled',true);
$('#hub_id').children().remove();
$('#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 && modify.responseJSON.hub_id)
$('#hub_id').val(modify.responseJSON.hub_id).change();
$('#hub-select').removeClass('d-none');
$('#node_id').prop('disabled',false);
$('#point_id').prop('disabled',false);
icon.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() {
if ($('#sec-level').hasClass('d-none'))
$('#sec-level').removeClass('d-none')
{{--
switch(this.value) {
// Not selected - enter a normal node
case '':
if ($('#hub-checkbox').hasClass('d-none'))
$('#hub-checkbox').removeClass('d-none');
break;
// Existing entry selected - next Address input
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