68 lines
3.7 KiB
PHP
68 lines
3.7 KiB
PHP
|
<div class="mb-3 row">
|
||
|
|
<label class="col-2 col-form-label fw-bold">@lang('cabels') : </label>
|
||
|
|
<div class="col-10">
|
||
|
|
<table class="table table-striped">
|
||
|
|
<thead>
|
||
|
|
<th>@lang('barcode')</th>
|
||
|
|
<th class="text-center">@lang('available')</th>
|
||
|
|
<th class="text-center">@lang('amount')</th>
|
||
|
|
<th class="text-center">@lang('action')</th>
|
||
|
|
</thead>
|
||
|
|
<tbody id="cabel_input_container">
|
||
|
|
<datalist id="cabels">
|
||
|
|
@foreach($cabels as $cabel)
|
||
|
|
<option data-available="{{$cabel->total - (count($cabel->loans) + count($cabel->reservations))}}" data-cabel-id="{{$cabel->id}}">{{$cabel->category->name}}.{{$cabel->name}}</option>
|
||
|
|
@endforeach
|
||
|
|
</datalist>
|
||
|
|
<tr>
|
||
|
|
<button type="button" id="cabel_add_button" class="btn btn-outline-success mb-4">@lang('add') @lang('cabel')</button>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
var cabel_count = 0;
|
||
|
|
$("#cabel_add_button").click(function(){
|
||
|
|
let cabel_table = $("#cabel_input_container");
|
||
|
|
cabel_table.append('<tr><td class="col align-middle"><div class="input-group"><input type="text" name="cabels[' + cabel_count + ']" id="cabel_' + cabel_count + '_input" class="form-control" placeholder="Barcode" list="cabels" data-cabel-index="' + cabel_count + '" oninput="cabel_barcode_change(this)" required></div></td><td id="cabel_' + cabel_count + '_available" class="col-1 text-center align-middle">0</td><td class="col-1 text-center align-middle"><input type="number" id="cabel_' + cabel_count + '_amount" name="cabel_amount[' + cabel_count + ']" class="form-control text-center" step="1" min="0" max="0" @if(old("cabel_' + cabel_count + '_amount"))value="old("cabel_' + cabel_count + '_amount")"@else value="0" @endif required disabled><input type="hidden" name="cabel_id[' + cabel_count + ']" id="cabel_' + cabel_count + '_id" value="0"></td><td class="col-2 text-center align-middle"><button type="button" onclick="cabel_barcode_remove(this)" class="btn btn-outline-danger">@lang('remove') @lang('cabel')</button></td></tr>');
|
||
|
|
cabel_count += 1;
|
||
|
|
});
|
||
|
|
|
||
|
|
function cabel_barcode_remove(elem) {
|
||
|
|
let this_row = $(elem).parent().parent().remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
function cabel_barcode_change(elem){
|
||
|
|
let cabel_index = $(elem).data('cabel-index');
|
||
|
|
let cabel_input = $("#cabel_" + cabel_index + "_input");
|
||
|
|
|
||
|
|
var available = $('#cabels option').filter(function() {
|
||
|
|
return this.value == cabel_input.val();
|
||
|
|
}).data('available');
|
||
|
|
var cabel_id = $('#cabels option').filter(function() {
|
||
|
|
return this.value == cabel_input.val();
|
||
|
|
}).data('cabel-id');
|
||
|
|
|
||
|
|
if(available == null || typeof available === "undefined"){
|
||
|
|
$("#cabel_" + cabel_index + "_available").html(0);
|
||
|
|
$("#cabel_" + cabel_index + "_amount").prop('min',0);
|
||
|
|
$("#cabel_" + cabel_index + "_amount").prop('max',0);
|
||
|
|
$("#cabel_" + cabel_index + "_amount").val(0);
|
||
|
|
$("#cabel_" + cabel_index + "_amount").prop('disabled',true);
|
||
|
|
$("#cabel_" + cabel_index + "_id").val(0);
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
$("#cabel_" + cabel_index + "_available").html(available);
|
||
|
|
$("#cabel_" + cabel_index + "_amount").prop('min',1);
|
||
|
|
$("#cabel_" + cabel_index + "_amount").prop('max',available);
|
||
|
|
$("#cabel_" + cabel_index + "_amount").val(1);
|
||
|
|
$("#cabel_" + cabel_index + "_amount").prop('disabled',false);
|
||
|
|
$("#cabel_" + cabel_index + "_id").val(cabel_id);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|