Another enhancement to the linking system
This commit is contained in:
parent
8332f485d1
commit
953d3725b2
@ -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 -->
|
||||
<div class="row" style="z-index: 2;">
|
||||
<div class="col-4">
|
||||
<label for="address" class="form-label">Address</label>
|
||||
<!-- 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-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="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=""> </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('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>
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user