diff --git a/resources/views/form/rapport-horizon/1793272971-f2e4a8b3-d211-46ba-b867-69d4b85da68d.blade.php b/resources/views/form/rapport-horizon/1793272971-f2e4a8b3-d211-46ba-b867-69d4b85da68d.blade.php index 996d42a1..be88ad7b 100644 --- a/resources/views/form/rapport-horizon/1793272971-f2e4a8b3-d211-46ba-b867-69d4b85da68d.blade.php +++ b/resources/views/form/rapport-horizon/1793272971-f2e4a8b3-d211-46ba-b867-69d4b85da68d.blade.php @@ -148,24 +148,51 @@ @case('file') @if(!isset($form->is_approval) || $form->is_approval != 'yes') - @if($question->code == 'upload_photo') - code == 'upload_photo') +
+ + + + + required == 'yes' ? 'required' : ''}}> - @else - required == 'yes' ? 'required' : ''}}> - @endif + data-required="{{$question->required == 'yes' ? '1' : '0'}}" + style="display:none;"> + +
+ + + + + +
+
+ @else + required == 'yes' ? 'required' : ''}}> + @endif + @elseif(isset($question->value)) @endif @@ -254,6 +281,22 @@ $('#report-form').on('submit', function(event){ event.preventDefault(); + + const photoField = document.getElementById('field-upload_photo'); + + if ( + photoField && + photoField.dataset.required === '1' && + photoField.files.length === 0 + ) { + Swal.fire({ + icon: 'warning', + title: 'Photo Required', + text: 'Please open the camera and capture a photo before submitting.' + }); + return; + } + $("#pageloader").fadeIn(); $.ajax({ type: "POST", @@ -297,6 +340,102 @@ dateField.setAttribute('max', currentDate); dateField.style.pointerEvents = 'none'; } + + + let photoStream = null; + + const video = document.getElementById('photo-camera-preview'); + const preview = document.getElementById('photo-captured-preview'); + const photoInput = document.getElementById('field-upload_photo'); + + $('#start-photo-camera').on('click', async function () { + try { + if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { + throw new Error('Camera access is not supported by this browser.'); + } + + photoStream = await navigator.mediaDevices.getUserMedia({ + video: { facingMode: { ideal: 'environment' } }, + audio: false + }); + + video.srcObject = photoStream; + video.style.display = 'block'; + preview.style.display = 'none'; + + $('#start-photo-camera').hide(); + $('#capture-photo').show(); + $('#retake-photo').hide(); + + } catch (error) { + Swal.fire({ + icon: 'error', + title: 'Camera Unavailable', + text: 'Please allow camera access and try again.' + }); + } + }); + + $('#capture-photo').on('click', function () { + if (!photoStream || !video.videoWidth) { + return; + } + + const canvas = document.createElement('canvas'); + canvas.width = video.videoWidth; + canvas.height = video.videoHeight; + + canvas.getContext('2d').drawImage( + video, 0, 0, canvas.width, canvas.height + ); + + canvas.toBlob(function (blob) { + if (!blob) { + Swal.fire('Error', 'Could not capture the photo.', 'error'); + return; + } + + const file = new File( + [blob], + 'captured-photo.jpg', + { type: 'image/jpeg' } + ); + + const transfer = new DataTransfer(); + transfer.items.add(file); + photoInput.files = transfer.files; + + preview.src = URL.createObjectURL(blob); + preview.style.display = 'block'; + video.style.display = 'none'; + + stopPhotoCamera(); + + $('#capture-photo').hide(); + $('#start-photo-camera').hide(); + $('#retake-photo').show(); + }, 'image/jpeg', 0.9); + }); + + $('#retake-photo').on('click', function () { + photoInput.value = ''; + preview.src = ''; + preview.style.display = 'none'; + $('#retake-photo').hide(); + $('#start-photo-camera').trigger('click'); + }); + + function stopPhotoCamera() { + if (photoStream) { + photoStream.getTracks().forEach(track => track.stop()); + photoStream = null; + } + + video.srcObject = null; + } + + window.addEventListener('beforeunload', stopPhotoCamera); + });