Ffix(surveyor/penilai): perbaikkan edit foto dan call report

2025-03-01 10:25:50 +07:00
parent 025cb3d5b8
commit f65b9bec23
10 changed files with 375 additions and 166 deletions
--- a/resources/views/surveyor/components/foto.blade.php
+++ b/resources/views/surveyor/components/foto.blade.php
@@ -5,8 +5,6 @@
@endsection

@section('content')
-    <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
-    {{-- <link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css" /> --}}
    <style>
        .dropzone {
            border: 2px dashed #3498db;
@@ -266,9 +264,6 @@
@include('lpj::surveyor.js.fotojs')
@include('lpj::surveyor.js.utils')
@push('scripts')
-    <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
-    <script src="https://scaleflex.cloudimg.io/v7/plugins/filerobot-image-editor/latest/filerobot-image-editor.min.js">
-    </script>
    <script>
        let jsonDataContoh = @json($formFoto);
        Dropzone.autoDiscover = false;
@@ -609,7 +604,7 @@
                    e.preventDefault();
                    // Get the file path from hidden input
                    const filePath = document.getElementById('editDataFilePath').value;
-                    
+
                    if (filePath) {
                        openFilerobotEditor(filePath);
                    } else {
@@ -632,20 +627,9 @@
            const config = {
                source: imagePath || '',
                onSave: (editedImageObject, designState) => {
-                    console.log('Image saved', editedImageObject);
-
-                    // Save the edited image
                    saveEditedImage(editedImageObject, document.getElementById('editDataFilePath').value);
+                    window.FilerobotImageEditor.terminate();

-                    // Close the editor
-                    FilerobotImageEditor.terminate();
-
-                    // Hide the modal
-                    document.getElementById('modal_10').setAttribute('data-modal-dismiss', 'true');
-
-
-                    // Update the preview if needed
-                    updateImagePreview(editedImageObject.imageBase64 || editedImageObject.imageCanvas.toDataURL());
                },
                annotationsCommon: {
                    fill: '#ff0000'
@@ -681,17 +665,29 @@
                config
            );

-            // Render the editor
+
            filerobotImageEditor.render({
                onClose: (closingReason) => {
                    console.log('Editor closed:', closingReason);
+
                    filerobotImageEditor.terminate();

-                    // Hide the modal
-                    document.querySelector('#modal_10').setAttribute('data-modal-dismiss', 'true');
+                    let closeButton = document.getElementById('modal_10');

+                    if (!closeButton) {
+                        closeButton = document.createElement('button');
+                        closeButton.setAttribute('data-modal-dismiss', 'true');
+                        closeButton.setAttribute('type', 'button');
+                        closeButton.setAttribute('class', 'btn btn-primary');
+                        closeButton.setAttribute('data-modal-toggle', '#modal_10');
+                        document.body.appendChild(closeButton);
+                    }
+
+                    closeButton.click();
+                    console.log('Modal closed via close button simulation');
                }
            });
+
        }
        window.addEditAndDeleteButtons = function(file, response) {

@@ -828,16 +824,23 @@
            formData.append('original_path', originalFilePath);

            formData.forEach((value, key) => {
-    console.log(`${key}:`, value);
-});
+                console.log(`${key}:`, value);
+            });

-            fetch('/api/save-edited-image', {
-                    method: 'POST',
-                    body: formData
-                })
-                .then(response => response.json())
-                .then(data => {

+                $.ajax({
+                    url: `{{ route('surveyor.saveEditedImage') }}`,
+                    type: 'POST',
+                    headers: {
+                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
+                    },
+                    data: {
+                        edited_image: imageData,
+                        original_path: originalFilePath,
+                        nomor_registrasi: '{{ $permohonan->nomor_registrasi }}'
+                    },
+
+                success: function(response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Perubahan Disimpan',
@@ -848,17 +851,23 @@
                            window.location.reload();

                        }
-                    });;
-
-                })
-                .catch(error => {
+                    });
+                },
+                error: function(xhr) {
                    const errorMessage = xhr.responseJSON?.message || 'Terjadi kesalahan';
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal Menyimpan',
                        text: errorMessage,
+                    }).then((response) => {
+                        if (response.isConfirmed) {
+                            window.location.reload();
+
+                        }
                    });
-                });
+
+                }
+            });
        }
    </script>
@endpush
--- a/resources/views/surveyor/index.blade.php
+++ b/resources/views/surveyor/index.blade.php
@@ -101,6 +101,8 @@
@endsection

@push('scripts')
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
+<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        function surveyorFreeze(permohonanId, noReg, debitur) {

@@ -308,12 +310,33 @@
        <div class="text-left space-y-4">
            <p class="text-gray-700 text-center">Untuk membuat jadwal kunjungan, silahkan isi form berikut!</p>
            <div>
-            <label for="waktu_penilaian" class="block text-sm font-medium text-gray-700 mb-1 " style="text-align: start;">Jadwal Kunjungan <span class="text-danger">*</span></label>
-            <input type="datetime-local" id="waktu_penilaian" class="input" style="margin-top: 10px;" required>
+                <label for="tanggal_kunjungan" class="block text-sm font-medium text-gray-700 mb-1" style="text-align: start;">Tanggal Kunjungan <span class="text-danger">*</span></label>
+                <input type="date" id="tanggal_kunjungan" class="input" style="margin-top: 10px; width: 100%;" required>
            </div>
            <div>
-            <label for="deskripsi_penilaian" class="block text-sm font-medium text-gray-700 mb-1 mt-2" style="text-align: start;">Keterangan <span class="text-danger">*</span> </label>
-            <textarea id="deskripsi-penilaian" class="textarea" placeholder="Masukkan keterangan" style="margin-top: 10px;" required></textarea>
+                <label class="block text-sm font-medium text-gray-700 mb-1 mt-2" style="text-align: start;">Waktu Kunjungan (Format 24 Jam) <span class="text-danger">*</span></label>
+                <div style="display: flex; align-items: center; gap: 10px; margin-top: 10px;">
+    <div style="position: relative; flex: 1;">
+        <input type="text" id="jam_kunjungan" class="input" maxlength="2" style="width: 100%; text-align: center; padding-right: 30px;" placeholder="00">
+        <div style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column;">
+            <button type="button" id="jam_up" class="btn btn-xs btn-light" style="height: 12px; padding: 0 4px; font-size: 10px; margin-bottom: 2px;">▲</button>
+            <button type="button" id="jam_down" class="btn btn-xs btn-light" style="height: 12px; padding: 0 4px; font-size: 10px;">▼</button>
+        </div>
+    </div>
+    <span style="font-weight: bold;">:</span>
+    <div style="position: relative; flex: 1;">
+        <input type="text" id="menit_kunjungan" class="input" maxlength="2" style="width: 100%; text-align: center; padding-right: 30px;" placeholder="00">
+        <div style="position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column;">
+            <button type="button" id="menit_up" class="btn btn-xs btn-light" style="height: 12px; padding: 0 4px; font-size: 10px; margin-bottom: 2px;">▲</button>
+            <button type="button" id="menit_down" class="btn btn-xs btn-light" style="height: 12px; padding: 0 4px; font-size: 10px;">▼</button>
+        </div>
+    </div>
+</div>
+
+            </div>
+            <div>
+                <label for="deskripsi-penilaian" class="block text-sm font-medium text-gray-700 mb-1 mt-2" style="text-align: start;">Keterangan <span class="text-danger">*</span> </label>
+                <textarea id="deskripsi-penilaian" class="textarea" placeholder="Masukkan keterangan" style="margin-top: 10px;" required></textarea>
            </div>
        </div>
        `,
@@ -322,14 +345,120 @@
        cancelButtonColor: '#d33',
        confirmButtonText: 'Submit',
        cancelButtonText: 'Batal',
+        didOpen: () => {
+            // Set default value ke waktu saat ini
+            const now = new Date();
+            const dateString = now.toISOString().slice(0, 10);
+            const hours = now.getHours();
+            const minutes = now.getMinutes();
+
+            // Set default values
+            document.getElementById('tanggal_kunjungan').value = dateString;
+            document.getElementById('jam_kunjungan').value = hours.toString().padStart(2, '0');
+            document.getElementById('menit_kunjungan').value = minutes.toString().padStart(2, '0');
+
+            // Handler untuk input jam
+            const jamInput = document.getElementById('jam_kunjungan');
+            const jamUp = document.getElementById('jam_up');
+            const jamDown = document.getElementById('jam_down');
+
+            // Validasi hanya angka untuk jam
+            jamInput.addEventListener('input', function(e) {
+                this.value = this.value.replace(/[^0-9]/g, '').substring(0, 2);
+                let value = parseInt(this.value, 10);
+
+                if (!isNaN(value)) {
+                    if (value > 23) {
+                        this.value = "00";
+                    } else {
+                        this.value = value.toString().padStart(2, '0');
+                    }
+                }
+            });
+
+            jamInput.addEventListener('blur', function() {
+                if (this.value === "" || isNaN(parseInt(this.value, 10))) {
+                    this.value = "00";
+                } else {
+                    this.value = parseInt(this.value, 10).toString().padStart(2, '0');
+                }
+            });
+
+            // Button handlers untuk jam
+            jamUp.addEventListener('click', function() {
+                let value = parseInt(jamInput.value, 10);
+                if (isNaN(value)) value = 0;
+
+                value = (value + 1) % 24;
+                jamInput.value = value.toString().padStart(2, '0');
+            });
+
+            jamDown.addEventListener('click', function() {
+                let value = parseInt(jamInput.value, 10);
+                if (isNaN(value)) value = 0;
+
+                value = (value - 1 + 24) % 24;
+                jamInput.value = value.toString().padStart(2, '0');
+            });
+
+            // Handler untuk input menit
+            const menitInput = document.getElementById('menit_kunjungan');
+            const menitUp = document.getElementById('menit_up');
+            const menitDown = document.getElementById('menit_down');
+
+            // Validasi hanya angka untuk menit
+            menitInput.addEventListener('input', function(e) {
+                this.value = this.value.replace(/[^0-9]/g, '').substring(0, 2);
+                let value = parseInt(this.value, 10);
+
+                if (!isNaN(value)) {
+                    if (value > 59) {
+                        this.value = "00";
+                    } else {
+                        this.value = value.toString().padStart(2, '0');
+                    }
+                }
+            });
+
+            menitInput.addEventListener('blur', function() {
+                if (this.value === "" || isNaN(parseInt(this.value, 10))) {
+                    this.value = "00";
+                } else {
+                    this.value = parseInt(this.value, 10).toString().padStart(2, '0');
+                }
+            });
+
+            // Button handlers untuk menit
+            menitUp.addEventListener('click', function() {
+                let value = parseInt(menitInput.value, 10);
+                if (isNaN(value)) value = 0;
+
+                value = (value + 1) % 60;
+                menitInput.value = value.toString().padStart(2, '0');
+            });
+
+            menitDown.addEventListener('click', function() {
+                let value = parseInt(menitInput.value, 10);
+                if (isNaN(value)) value = 0;
+
+                value = (value - 1 + 60) % 60;
+                menitInput.value = value.toString().padStart(2, '0');
+            });
+        },
        preConfirm: () => {
            // Ambil nilai input
-            const tanggalInspeksi = document.getElementById('waktu_penilaian').value;
+            const tanggalKunjungan = document.getElementById('tanggal_kunjungan').value;
+            let jamKunjungan = document.getElementById('jam_kunjungan').value;
+            let menitKunjungan = document.getElementById('menit_kunjungan').value;
            const keteranganInspeksi = document.getElementById('deskripsi-penilaian').value;

            // Validasi input: cek apakah input kosong
-            if (!tanggalInspeksi.trim()) {
-                Swal.showValidationMessage('Harap mengisi Jadwal Kunjungan.');
+            if (!tanggalKunjungan.trim()) {
+                Swal.showValidationMessage('Harap mengisi Tanggal Kunjungan.');
+                return false;
+            }
+            if (!jamKunjungan || !menitKunjungan) {
+                Swal.showValidationMessage('Harap mengisi Waktu Kunjungan.');
                return false;
            }
            if (!keteranganInspeksi.trim()) {
@@ -337,9 +466,16 @@
                return false;
            }

+            // Pastikan format 2 digit
+            jamKunjungan = parseInt(jamKunjungan, 10).toString().padStart(2, '0');
+            menitKunjungan = parseInt(menitKunjungan, 10).toString().padStart(2, '0');
+
+            // Gabungkan tanggal dan waktu dalam format ISO
+            const datetimeValue = `${tanggalKunjungan}T${jamKunjungan}:${menitKunjungan}`;
+
            // Jika semua valid, kembalikan data
            return {
-                tanggal: tanggalInspeksi,
+                tanggal: datetimeValue,
                keterangan: keteranganInspeksi
            };
        }
@@ -360,17 +496,15 @@
                deskripsi_penilaian: keterangan
            };

-            // Change from PUT to POST method
            $.ajax({
                url: useURL,
-                type: "POST", // Changed from PUT to POST
+                type: "POST",
                cache: false,
                data: input_data,
                success: function(response) {
                    if (response.success) {
-                        // Arahkan langsung ke halaman inspeksi
-                        Swal.fire('Berhasil!', 'Data berhasil disimpan.', 'success').then(
-                    () => {
+                        Swal.fire('Berhasil!', 'Berhasil membuat jadwal.', 'success').then(
+                        () => {
                            window.location.reload();
                        });
                    } else {
--- a/resources/views/surveyor/js/fotojs.blade.php
+++ b/resources/views/surveyor/js/fotojs.blade.php
@@ -3,19 +3,7 @@
        const ruteLainnyaDiv = document.getElementById("ruteLainnya");
        const lantaiLainnyaDiv = document.getElementById("lantaiLainnya");

-        // Function to add delete event listeners to existing buttons
-        function addDeleteListeners(container) {
-            container.querySelectorAll(".delete-btn").forEach(button => {
-                button.addEventListener("click", function() {
-                    this.closest(
-                            ".flex.items-baseline.flex-wrap.lg\\:flex-nowrap.gap-2\\.5.mb-5")
-                        .remove();
-                });
-            });
-        }

-        // Add delete listeners to existing buttons
-        addDeleteListeners(ruteLainnyaDiv);

        // Create new div for additional items
        function createNewDiv(container, inputName) {
@@ -64,13 +52,8 @@
        }

        // Event listener for adding more items
-        document.getElementById("btnAddMore").addEventListener("click", function() {
-            createNewDiv(ruteLainnyaDiv, "rute_lainnya");
-        });

-        document.getElementById("btnAddMoreObject").addEventListener("click", function() {
-            createNewDiv(lantaiLainnyaDiv, "lantai_lainnya");
-        });
+

        function setupInputHandlers(containerId, buttonId, labelText, inputDataClass, buttonDeleteClass) {
            const addButton = document.getElementById(buttonId);