104 lines
4.3 KiB
PHP
104 lines
4.3 KiB
PHP
@php
|
|
$selectedHostId = old('module_host_id') ?? ($model?->module_host_id ?? ($model?->ipaddress?->module_host_id ?? null));
|
|
@endphp
|
|
|
|
|
|
{{-- Select Host --}}
|
|
<div class="row form-group align-items-center mb-0">
|
|
<label for="host_id" class="col-md-3 text-right">Chọn Host</label>
|
|
<div class="col-md-9 p-1 bg-customer">
|
|
<select class="form-control select2 single__select host_id" name="module_host_id"
|
|
data-selected="{{ $selectedHostId }}"
|
|
data-placeholder="--- Chọn Host ---">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
@push('scripts')
|
|
<script>
|
|
$(document).ready(function () {
|
|
// Prevent multiple initializations using namespace
|
|
if (window.hostComponentInitialized) {
|
|
return;
|
|
}
|
|
window.hostComponentInitialized = true;
|
|
|
|
// Initialize Select2
|
|
initSelect2();
|
|
|
|
const $datacenter = $('.datacenter_id');
|
|
const $host = $('.host_id');
|
|
|
|
// Debounce function to prevent spam API calls
|
|
let loadHostsTimeout;
|
|
|
|
function debounceLoadHosts(datacenterId, preselect = null) {
|
|
clearTimeout(loadHostsTimeout);
|
|
loadHostsTimeout = setTimeout(() => {
|
|
loadHosts(datacenterId, preselect);
|
|
}, 300); // 300ms debounce
|
|
}
|
|
|
|
function loadHosts(datacenterId, preselect = null) {
|
|
// Check if already loading to prevent duplicate calls
|
|
if ($host.prop('disabled') && $host.find('option:first').text().includes('Đang tải')) {
|
|
return;
|
|
}
|
|
|
|
if (!datacenterId) {
|
|
$host.html('<option value="">--- Chọn Host ---</option>').prop('disabled', true);
|
|
return;
|
|
}
|
|
|
|
$host.html('<option value="">Đang tải Host...</option>').prop('disabled', true);
|
|
|
|
$.ajax({
|
|
url: '{{ route('api.getHost') }}',
|
|
type: 'GET',
|
|
data: {
|
|
datacenter: datacenterId
|
|
},
|
|
success: function (response) {
|
|
if (!response.error && response.data.length > 0) {
|
|
let options = '<option value="">--- Chọn Host ---</option>';
|
|
response.data.forEach(host => {
|
|
const selected = preselect == host.id ? 'selected' : '';
|
|
options +=
|
|
`<option value="${host.id}" ${selected}>${host.name}</option>`;
|
|
});
|
|
$host.html(options).prop('disabled', false);
|
|
|
|
// If there's a preselected host ID, select it
|
|
if (preselect) {
|
|
setTimeout(() => {
|
|
$host.val(preselect).trigger('change');
|
|
}, 100);
|
|
}
|
|
} else {
|
|
$host.html('<option value="">Không tìm thấy Host</option>').prop('disabled', true);
|
|
}
|
|
},
|
|
error: function () {
|
|
$host.html('<option value="">Lỗi tải Host</option>').prop('disabled', true);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Remove existing event handlers and bind new ones with namespace
|
|
$datacenter.off('change.hostComponent').on('change.hostComponent', function () {
|
|
const datacenterId = $(this).val();
|
|
const selectedHostId = $host.data('selected');
|
|
debounceLoadHosts(datacenterId, selectedHostId);
|
|
});
|
|
|
|
// Initial load logic
|
|
const selectedHostId = $host.data('selected');
|
|
if ($datacenter.val() && selectedHostId) {
|
|
debounceLoadHosts($datacenter.val(), selectedHostId);
|
|
} else if ($datacenter.val()) {
|
|
// If only datacenter is selected, load hosts without preselection
|
|
debounceLoadHosts($datacenter.val());
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|