Another enhancement to the linking system

resources/views/user/link.blade.php

@@ -9,25 +9,33 @@
 
 		<input type="hidden" id="address_id" name="address_id">
 
-		<div class="row">
-			<div class="col-12">
 		<div class="greyframe titledbox shadow0xb0">
 			<h2 class="cap">Enter your Link code</h2>
 
-					<!-- ADDRESS -->
+			<!-- SYSTEM -->
-					<div class="row" style="z-index: 2;">
+			<div class="row">
-						<div class="col-4">
+				<!-- Name -->
-							<label for="address" class="form-label">Address</label>
+				<div class="col-5">
+					<label for="system" class="form-label">BBS Name</label>
 					<div class="input-group has-validation">
-								<span class="input-group-text"><i class="bi bi-globe"></i></span>
+						<span class="input-group-text"><i class="bi bi-laptop-fill"></i></span>
-								<input type="text" class="form-control @error('address_id') is-invalid @enderror" id="address" placeholder="Address" name="address" value="{{ old('address') }}" required autofocus autocomplete="off">
+						<select style="width: 80%;" class="form-select @error('system_id') is-invalid @enderror" id="system" name="address_id" required>
-								<span id="search-icon" style="z-index: 4;width: 0;"><i style="border-radius: 50%;" class="spinner-border spinner-border-sm text-dark d-none"></i></span>
+							<option value="">&nbsp;</option>
-								<div id="address_search_results"></div>
+							@foreach (\App\Models\Address::select(['addresses.id','addresses.host_id','addresses.node_id','addresses.point_id','addresses.zone_id','systems.name'])
+								->active()
+								->join('systems',['systems.id'=>'addresses.system_id'])
+								->whereRaw('systems.id NOT IN (SELECT system_id FROM system_user)')
+								->with(['zone'])
+								->orderBy('systems.name')
+								->get() as $oo)
+								<option value="{{ $oo->id }}" @if(old('id')===$oo->id)selected @endif>{{ $oo->name }} ({{ $oo->ftn3d }})</option>
+							@endforeach
+						</select>
 						<span class="invalid-feedback" role="alert">
-									@error('address_id')
+							@error('system_id')
 								{{ $message }}
 							@else
-										A address is required.
+								BBS Name is required.
 							@enderror
 						</span>
 					</div>
@@ -59,119 +67,18 @@
 				</div>
 			</div>
 		</div>
-				</div>
-			</div>
-		</div>
 	</form>
 @endsection
 
 @section('page-css')
-	<style>
+	@css('select2')
-		input#address + span {
-			left: -1.5em;
-			top: 0.5em;
-			position:relative
-		}
-		div#address_search_results ul {
-			color:#eeeeee;
-			background-color:#292929;
-			font-size: .85rem;
-			padding: 0 5px 0 5px;
-			z-index: 99;
-			top: -0.5em;
-			left: 31em !important;
-		}
-		div#address_search_results ul li.dropdown-header {
-			display: block;
-			color: #fff !important;
-		}
-		div#address_search_results ul li,
-		div#address_search_results ul li a {
-			display: block;
-			color: #aaa !important;
-			margin: 0 !important;
-			border: 0 !important;
-			width: inherit;
-			text-indent: 0 !important;
-			padding-left: 0 !important;
-		}
-		div#address_search_results ul li:hover {
-			padding-left: 0;
-			text-indent: 0;
-		}
-		div#address_search_results ul li:before {
-			content:""!important
-		}
-	</style>
 @append
 @section('page-scripts')
+	@js('select2')
 	<script type="text/javascript">
-
-		var address_id;
-		var addresssearch = _.debounce(function(url,query,process,icon){
-			icon = $('#search-icon').find('i');
-
-			$.ajax({
-				url : url,
-				type : 'GET',
-				data : 'term=' + query,
-				dataType : 'JSON',
-				async : true,
-				cache : false,
-				beforeSend : function() {
-					if (c++ === 0) {
-						icon.removeClass('d-none');
-					}
-				},
-				success : function(data) {
-					// if json is null, means no match, won't do again.
-					if(data==null || (data.length===0)) return;
-
-					process(data);
-				},
-				complete : function() {
-					if (--c === 0) {
-						icon.addClass('d-none');
-					}
-				}
-			})
-		}, 500);
-
 		$(document).ready(function() {
-			$('input[id=address]').typeahead({
+			$('#system').select2({
-				autoSelect: false,
+				placeholder: 'Find your Address',
-				scrollHeight: 10,
-				theme: 'bootstrap5',
-				delay: 500,
-				minLength: 3,
-				items: {{ $search_limit ?? 5 }},
-				fitToElement: false,
-				selectOnBlur: false,
-				appendTo: "#address_search_results",
-				source: function (query,process) {
-					addresssearch('{{ url('system/api/address/orphan') }}',query,process);
-				},
-
-				matcher: function () { return true; },
-
-				// Disable sorting and just return the items (items should by the ajax method)
-				sorter: function(items) {
-					return items;
-				},
-
-				updater: function (item) {
-					console.log(item);
-					$('#address_id').val(item.id);
-					console.log($('#address_id'));
-					return item.name;
-				},
-			})
-				.on('keyup keypress', function(event) {
-					var key = event.keyCode || event.which;
-					if (key === 13) {
-						event.preventDefault();
-						return false;
-					}
 			});
 		});
 	</script>