Я пытаюсь создать форму управления сменой, в которой пользователь может создать shift время для своего сотрудника, а также break time, break time - это подраздел для формы shift, и пользователь может динамически создавать и создает break times столько, сколько они хотят, за один shift раз.
Функция создания и проверки для shift работает, но у меня возникают проблемы при проверке раздела break time, если поле не заполнено должным образом. Как я могу создать функцию проверки, которая возвращает ответ JSON такой же, как и тот, который я делал для смены для каждой строки времен перерыва. ниже мой код:
HTML:
{{-- Start Shifts Update Modal --}}
<div class="modal fade" id="update_shift_modal" tabindex="-1" role="dialog" aria-labelledby="update_shift_modal" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="update_shift_modal_title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body update-shift-modal-body">
<div id="shift_modal_alert_container">
<div class="alert alert-success" style="display:none;"></div>
<div class="alert alert-danger" style="display:none;"></div>
</div>
<div class="form-group row">
<div class="col-md-5 px-0">
<label class="col-md-12 col-form-label font-weight-bold">Shift Name <span class="text-danger">*</span></label>
<div class="col-md-12">
<input id="shift_name" class="form-control" type="text" placeholder="Enter a Shift Name" name="shift_name" required>
<div id="shift_name_error" class="invalid-feedback"></div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-12 col-form-label font-weight-bold">Full Day</label>
<div class="col-md-5 px-0">
<label class="col-md-12 col-form-label font-weight-bold">Start Work <span class="text-danger">*</span></label>
<div class="col-md-12">
<div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true">
<input id="full_day_start_date" type="time" class="form-control" required>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
<div id="full_day_start_date_error" class="invalid-feedback"></div>
</div>
</div>
</div>
<div class="col-md-5 px-0">
<label class="col-md-12 col-form-label font-weight-bold">End Work <span class="text-danger">*</span></label>
<div class="col-md-12">
<div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true">
<input id="full_day_end_date" type="time" class="form-control" required>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
<div id="full_day_end_date_error" class="invalid-feedback"></div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-5 px-0">
<div class="col-md-12">
<input type="checkbox" id="break_times_checkbox" onclick="displayBreakTimes()"> Break Times
</div>
</div>
</div>
<div id="shift_break_times_section" style="display: none;">
<div class="form-group row" >
<label class="col-md-5 col-form-label font-weight-bold">Shift Break Time</label>
<div class="col-md-5" style="text-align: right;">
<button class="btn btn-primary fas fa-plus" onclick="appendShiftBreakTimesSection()">
</button>
</div>
</div>
<div class="form-group row shift-break-section" >
<div class="col-md-5 px-0">
<label class="col-md-12 col-form-label font-weight-bold">Start Time</label>
<div class="col-md-12">
<div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true">
<input id="shift_break_start_date" type="time" class="form-control shift-break-start-date" required>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
<div id="shift-break_start_date_error" class="invalid-feedback"></div>
</div>
</div>
</div>
<div class="col-md-5 px-0">
<label class="col-md-12 col-form-label font-weight-bold">End Time</label>
<div class="col-md-12">
<div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true">
<input id="shift_break_end_date" type="time" class="form-control shift-break-end-date" required>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
<div id="shift_break_end_date_error" class="invalid-feedback"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button id="update_shift_submit" onclick="updateShift()" class="btn btn-primary">{{ __('Submit') }}</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{{-- End Shifts Update Modal --}}
Javascript:
function updateShift() {
var updateShiftData = {
_token: '{{ csrf_token() }}',
shift_name: $("#shift_name").val(),
full_day_start_work_time: $("#full_day_start_date").val(),
full_day_end_work_time: $("#full_day_end_date").val(),
};
if (breakTimesCheckBox.is(":checked")){
var shiftBreakTimesListData = [];
var shiftBreakTimesList = shiftBreakTimesSection.children()
shiftBreakTimesList.each(function (index, shiftBreakTimeEntry) {
shiftBreakTimesListData.push({
start_time: $(shiftBreakTimeEntry).find('.shift-break-start-date').val(),
end_time: $(shiftBreakTimeEntry).find('.shift-break-end-date').val(),
});
})
updateShiftData['shift_break_times_list'] = shiftBreakTimesListData;
};
var updateShiftRoute = "{{ route('admin.attendance.shift.add.post') }}";
$.ajax({
url: updateShiftRoute,
type: 'POST',
data: updateShiftData,
success: function(response) {
clearShiftFieldsError()
getShiftsDatatable();
if(updateType === 'add'){
alertContainer.find('.alert-success').css("display", "flex");
alertContainer.find('.alert-success').html(response);
alertContainer.find('.alert-danger').css("display", "none");
shiftUpdateModal.modal('hide');
}
if(updateType === 'edit'){
modalAlertContainer.find('.alert-success').css("display", "flex");
modalAlertContainer.find('.alert-success').html(response);
modalAlertContainer.find('.alert-danger').css("display", "none");
}
},
error: function(xhr) {
if(xhr.status == 422) {
var errors = xhr.responseJSON.errors;
var errorMessage = xhr.responseJSON.message;
clearShiftFieldsError()
for (var errorField in errors) {
if (errors.hasOwnProperty(errorField)) {
switch (errorField) {
case 'shift_name':
updateShiftFields.find('#shift_name').addClass('is-invalid');
$('#shift_name_error').html('<strong>' + errors[errorField][0] + '</strong>');
break;
case 'full_day_start_work_time':
updateShiftFields.find('#full_day_start_date').addClass('is-invalid');
$('#full_day_start_date_error').html('<strong>' + errors[errorField][0] + '</strong>');
break;
case 'full_day_end_work_time':
updateShiftFields.find('#full_day_end_date').addClass('is-invalid');
$('#full_day_end_date_error').html('<strong>' + errors[errorField][0] + '</strong>');
break;
}
}
}
}
}
});
}
Контроллер:
public function addShift(Request $request){
{
$user = Auth::user();
$data = request()->validate([
'shift_name' => 'required|unique:shifts,shift_name',
'full_day_start_work_time' => 'required',
'full_day_end_work_time' => 'required',
]);
$shift = Shift::create($data);
if(isset(request()->shift_break_times_list)){
$shift_break_times = request()->shift_break_times_list;
foreach($shift_break_times as $shift_break_time) {
$shiftBreakData = [
'start_time' => $shift_break_time['start_time'],
'end_time' => $shift_break_time['end_time'],
'shift_id' => $shift->id,
'created_by' => $user->employee->id,
];
$shiftBreakTime = ShiftBreakTime::create($shiftBreakData);
}
};
return response()->json("Shift successfully created!");
}
}