From 953d3725b20feafd1c8b0240ce50b371655ff265 Mon Sep 17 00:00:00 2001
From: Deon George <deon@dege.au>
Date: Mon, 9 Oct 2023 17:48:26 +1100
Subject: [PATCH] Another enhancement to the linking system

---
 resources/views/user/link.blade.php | 207 ++++++++--------------------
 1 file changed, 57 insertions(+), 150 deletions(-)

diff --git a/resources/views/user/link.blade.php b/resources/views/user/link.blade.php
index 12a814f..4e86356 100644
--- a/resources/views/user/link.blade.php
+++ b/resources/views/user/link.blade.php
@@ -9,56 +9,61 @@
 
 		<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>
+		<div class="greyframe titledbox shadow0xb0">
+			<h2 class="cap">Enter your Link code</h2>
 
-					<!-- ADDRESS -->
-					<div class="row" style="z-index: 2;">
-						<div class="col-4">
-							<label for="address" class="form-label">Address</label>
-							<div class="input-group has-validation">
-								<span class="input-group-text"><i class="bi bi-globe"></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">
-								<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>
-								<div id="address_search_results"></div>
-								<span class="invalid-feedback" role="alert">
-									@error('address_id')
-										{{ $message }}
-									@else
-										A address is required.
-									@enderror
-								</span>
-							</div>
-						</div>
-					</div>
-
-					<!-- CODE -->
-					<div class="row">
-						<div class="col-4">
-							<label for="code" class="form-label">Code</label>
-							<div class="input-group has-validation">
-								<span class="input-group-text"><i class="bi bi-fingerprint"></i></span>
-								<input type="text" class="form-control @error('code') is-invalid @enderror" id="code" placeholder="Code" name="code" value="{{ old('code') }}" required>
-								<span class="invalid-feedback" role="alert">
-									@error('code')
-										{{ $message }}
-									@else
-										A code is required.
-									@enderror
-								</span>
-							</div>
-						</div>
-					</div>
-
-					<div class="row">
-						<div class="col-12">
-							<a href="{{ url('home') }}" class="btn btn-danger">Cancel</a>
-							<button type="submit" name="submit" class="btn btn-success float-end">Validate</button>
-						</div>
+			<!-- SYSTEM -->
+			<div class="row">
+				<!-- Name -->
+				<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-laptop-fill"></i></span>
+						<select style="width: 80%;" class="form-select @error('system_id') is-invalid @enderror" id="system" name="address_id" required>
+							<option value="">&nbsp;</option>
+							@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('system_id')
+								{{ $message }}
+							@else
+								BBS Name is required.
+							@enderror
+						</span>
 					</div>
 				</div>
+			</div>
+
+			<!-- CODE -->
+			<div class="row">
+				<div class="col-4">
+					<label for="code" class="form-label">Code</label>
+					<div class="input-group has-validation">
+						<span class="input-group-text"><i class="bi bi-fingerprint"></i></span>
+						<input type="text" class="form-control @error('code') is-invalid @enderror" id="code" placeholder="Code" name="code" value="{{ old('code') }}" required>
+						<span class="invalid-feedback" role="alert">
+							@error('code')
+								{{ $message }}
+							@else
+								A code is required.
+							@enderror
+						</span>
+					</div>
+				</div>
+			</div>
+
+			<div class="row">
+				<div class="col-12">
+					<a href="{{ url('home') }}" class="btn btn-danger">Cancel</a>
+					<button type="submit" name="submit" class="btn btn-success float-end">Validate</button>
 				</div>
 			</div>
 		</div>
@@ -66,113 +71,15 @@
 @endsection
 
 @section('page-css')
-	<style>
-		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>
+	@css('select2')
 @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({
-				autoSelect: false,
-				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;
-					}
-				});
+			$('#system').select2({
+				placeholder: 'Find your Address',
+			});
 		});
 	</script>
 @endsection
\ No newline at end of file