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

<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('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('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('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