Another enhancement to the linking system
This commit is contained in:
parent
8332f485d1
commit
953d3725b2
@ -9,56 +9,61 @@
|
|||||||
|
|
||||||
<input type="hidden" id="address_id" name="address_id">
|
<input type="hidden" id="address_id" name="address_id">
|
||||||
|
|
||||||
<div class="row">
|
<div class="greyframe titledbox shadow0xb0">
|
||||||
<div class="col-12">
|
<h2 class="cap">Enter your Link code</h2>
|
||||||
<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">
|
||||||
<div class="input-group has-validation">
|
<label for="system" class="form-label">BBS Name</label>
|
||||||
<span class="input-group-text"><i class="bi bi-globe"></i></span>
|
<div class="input-group has-validation">
|
||||||
<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 class="input-group-text"><i class="bi bi-laptop-fill"></i></span>
|
||||||
<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>
|
<select style="width: 80%;" class="form-select @error('system_id') is-invalid @enderror" id="system" name="address_id" required>
|
||||||
<div id="address_search_results"></div>
|
<option value=""> </option>
|
||||||
<span class="invalid-feedback" role="alert">
|
@foreach (\App\Models\Address::select(['addresses.id','addresses.host_id','addresses.node_id','addresses.point_id','addresses.zone_id','systems.name'])
|
||||||
@error('address_id')
|
->active()
|
||||||
{{ $message }}
|
->join('systems',['systems.id'=>'addresses.system_id'])
|
||||||
@else
|
->whereRaw('systems.id NOT IN (SELECT system_id FROM system_user)')
|
||||||
A address is required.
|
->with(['zone'])
|
||||||
@enderror
|
->orderBy('systems.name')
|
||||||
</span>
|
->get() as $oo)
|
||||||
</div>
|
<option value="{{ $oo->id }}" @if(old('id')===$oo->id)selected @endif>{{ $oo->name }} ({{ $oo->ftn3d }})</option>
|
||||||
</div>
|
@endforeach
|
||||||
</div>
|
</select>
|
||||||
|
<span class="invalid-feedback" role="alert">
|
||||||
<!-- CODE -->
|
@error('system_id')
|
||||||
<div class="row">
|
{{ $message }}
|
||||||
<div class="col-4">
|
@else
|
||||||
<label for="code" class="form-label">Code</label>
|
BBS Name is required.
|
||||||
<div class="input-group has-validation">
|
@enderror
|
||||||
<span class="input-group-text"><i class="bi bi-fingerprint"></i></span>
|
</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>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -66,113 +71,15 @@
|
|||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
@section('page-css')
|
@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
|
@append
|
||||||
@section('page-scripts')
|
@section('page-scripts')
|
||||||
|
@js('select2')
|
||||||
<script type="text/javascript">
|
<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() {
|
$(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>
|
</script>
|
||||||
@endsection
|
@endsection
|
||||||
Loading…
Reference in New Issue
Block a user