Files
portal-api/resources/views/components/module/network.blade.php
T
2026-02-04 09:07:44 +07:00

95 lines
4.1 KiB
PHP

<div class="row form-group align-items-center mb-0">
<label for="network_id" class="col-md-3 text-right">Network</label>
<div class="col-md-9 p-1 bg-customer">
<select class="custom-select select2 network_id" id="network_id" data-route="{{ route('api.getNetwork') }}"
name="module_network_id" style="width: 100%;">
<option value="0">---------</option>
@if($networks)
@foreach($networks->all() as $item)
<option @selected($model && ((isset($model?->ipaddress?->module_network_id) && $item->id == $model?->ipaddress?->module_network_id) || isset($model?->module_network_id) && $item->id == $model?->module_network_id)) value="{{$item->id}}">{{$item->name}}</option>
@endforeach
@endif
</select>
</div>
</div>
@push('custom-scripts')
<script>
$(document).ready(function () {
// Namespace check logic kept
if (window.networkComponentInitialized) {
return;
}
window.networkComponentInitialized = true;
const $host = $('.host_id');
const $network = $('.network_id');
// Use data-route to avoid conflict with Select2 auto-ajax feature
const networkAjaxUrl = $network.data('route');
function loadNetworks(hostId, preselect = null) {
if (!hostId) {
$network.html('<option value="0">---------</option>').prop('disabled', true);
$network.trigger('change');
return;
}
$network.html('<option value="">Loading...</option>').prop('disabled', true);
$network.trigger('change');
$.ajax({
url: networkAjaxUrl,
type: 'GET',
data: {
host: hostId
},
success: function (response) {
// Strict check
if (response.error === false && Array.isArray(response.data) && response.data.length > 0) {
let options = '<option value="0">---------</option>';
response.data.forEach(net => {
const selected = (preselect == net.id) ? 'selected' : '';
options += `<option value="${net.id}" ${selected}>${net.name}</option>`;
});
$network.html(options);
$network.prop('disabled', false);
$network.trigger('change');
if (preselect) {
setTimeout(() => {
$network.val(preselect).trigger('change');
}, 100);
}
} else {
$network.html('<option value="0">Not Found Network</option>').prop('disabled', true);
$network.trigger('change');
}
},
error: function (xhr, status, error) {
console.error('AJAX Error:', error);
$network.html('<option value="0">Error loading Network</option>').prop('disabled', true);
$network.trigger('change');
}
});
}
// Listen for changes on Host select
$host.off('change.networkComponent').on('change.networkComponent', function () {
const hostId = $(this).val();
loadNetworks(hostId);
});
if (!$host.val()) {
$network.prop('disabled', true);
} else {
if ($network.find('option').length <= 1 || $network.val() == 0) {
loadNetworks($host.val());
} else {
// Just ensure it's enabled if we have values
$network.prop('disabled', false);
}
}
});
</script>
@endpush