Kembali
@@ -358,6 +398,7 @@
@endsection
@push('scripts')
+
@@ -546,7 +587,7 @@
let regionBoundaryLayer = L.featureGroup().addTo(map);
function focusToRegionBoundary(selectElement, shouldZoom = true) {
- regionBoundaryLayer.clearLayers(); // Bersihkan garis wilayah sebelumnya
+ regionBoundaryLayer.clearLayers();
let selectedOption = selectElement.options[selectElement.selectedIndex];
if (!selectedOption || !selectedOption.hasAttribute('data-path')) return;
@@ -561,7 +602,7 @@
function formatCoordinates(coords) {
if (coords.length === 2 && typeof coords[0] === 'number') {
- return [coords[0], coords[1]]; // JANGAN DIBALIK
+ return [coords[0], coords[1]];
}
return coords.map(formatCoordinates);
}
@@ -637,10 +678,8 @@
map.on(L.Draw.Event.CREATED, function (e) {
let layer = e.layer;
-
drawnItems.clearLayers();
drawnItems.addLayer(layer);
-
updatePathTextarea(layer);
});
@@ -660,16 +699,143 @@
return [latlng.lng, latlng.lat];
});
document.getElementById('path').value = JSON.stringify(pathData);
-
let area = L.GeometryUtil.geodesicArea(latlngs);
-
- console.log(area);
-
$('#luas_lahan').val(area.toFixed(2));
}
- // FORM
+ const previewTemplate = `
+ `;
+ Dropzone.autoDiscover = false;
+ let myDropzone = null;
+ const dropzoneElement = document.querySelector("#dropzone-container");
+
+ if (dropzoneElement) {
+ myDropzone = new Dropzone(dropzoneElement, {
+ url: "/",
+ autoProcessQueue: false,
+ previewTemplate: previewTemplate,
+ clickable: "#btn-tambah-foto",
+ previewsContainer: "#dropzone-container",
+ parallelUploads: 10,
+ maxFilesize: 5,
+ addRemoveLinks: false,
+ acceptedFiles: "image/jpeg,image/jpg,image/png",
+
+ init: function () {
+ let dz = this;
+
+ let rawPhotos = {!! json_encode($lahanSelected->foto ?? []) !!};
+ let existingPhotos = [];
+
+ if (typeof rawPhotos === 'string') {
+ try {
+ existingPhotos = JSON.parse(rawPhotos);
+ } catch(e) {
+ existingPhotos = [];
+ }
+ } else if (Array.isArray(rawPhotos)) {
+ existingPhotos = rawPhotos;
+ }
+
+ if (existingPhotos && existingPhotos.length > 0) {
+ existingPhotos.forEach(function (photo, index) {
+
+ let pathStr = typeof photo === 'object' ? (photo.path || photo[0] || '') : photo;
+
+ if (pathStr && pathStr !== '') {
+ let mockFile = {
+ name: "Foto Lahan " + (index + 1),
+ size: 1024,
+ id: index,
+ isServerFile: true,
+ accepted: true
+ };
+
+ dz.emit("addedfile", mockFile);
+ dz.emit("thumbnail", mockFile, "{{ asset('storage') }}/" + pathStr);
+ dz.emit("complete", mockFile);
+
+ dz.files.push(mockFile);
+ }
+ });
+ }
+
+ this.on("removedfile", function (file) {
+ if (file.isServerFile) {
+ let deleteInput = $('').attr({
+ type: 'hidden',
+ name: 'deleted_photos[]',
+ value: file.id
+ });
+ $('#deleted-photos-container').append(deleteInput);
+ }
+ });
+ }
+ });
+ }
+
+ $(document).on('click', '.btn-edit', function(e) {
+ e.preventDefault();
+ e.stopPropagation();
+
+ let previewElement = $(this).closest('.dz-preview')[0];
+ let dz = myDropzone;
+ let fileToReplace = dz.files.find(f => f.previewElement === previewElement);
+
+ if (fileToReplace) {
+ let tempInput = document.createElement('input');
+ tempInput.type = 'file';
+ tempInput.accept = 'image/jpeg,image/jpg,image/png';
+
+ tempInput.onchange = function(event) {
+ let newFile = event.target.files[0];
+ if (newFile) {
+ if(fileToReplace.isServerFile){
+ let deleteInput = $('').attr({
+ type: 'hidden',
+ name: 'deleted_photos[]',
+ value: fileToReplace.id
+ });
+ $('#deleted-photos-container').append(deleteInput);
+ }
+
+ dz.removeFile(fileToReplace);
+ dz.addFile(newFile);
+ }
+ };
+ tempInput.click();
+ }
+ });
+
+ $(document).on('click', '#dropzone-container .dz-image img', function (e) {
+ e.stopPropagation();
+ $('#foto-lightbox-img').attr('src', this.src);
+ $('#foto-lightbox').addClass('active');
+ });
+
+ $('#foto-lightbox').on('click', function (e) {
+ if (e.target === this || $(e.target).hasClass('foto-lightbox-close')) {
+ $(this).removeClass('active');
+ }
+ });
+
+
+ // FORM VALIDATION & SUBMIT
$('#petani-lahan-tanaman').validate({
rules: {
luas_lahan: { required: true },
@@ -697,6 +863,57 @@
},
unhighlight: function (element) {
$(element).removeClass('is-invalid');
+ },
+ submitHandler: function (form) {
+ const formData = new FormData(form);
+
+ formData.append('_method', 'PUT');
+
+ if (myDropzone) {
+ myDropzone.files.forEach(function(file) {
+ if (!file.isServerFile) {
+ formData.append("foto[]", file);
+ }
+ });
+ }
+
+ let submitBtn = $(form).find('button[type="submit"]');
+ let originalText = submitBtn.html();
+ submitBtn.prop('disabled', true).html(' Menyimpan...');
+
+ $.ajax({
+ url: $(form).attr('action'),
+ type: "POST",
+ data: formData,
+ processData: false,
+ contentType: false,
+ headers: {
+ 'X-CSRF-TOKEN': $('input[name="_token"]').val(),
+ 'Accept': 'application/json'
+ },
+ success: function(res) {
+ alert('Data lahan berhasil disimpan!');
+ window.location.href = "{{ route('petani.index') }}";
+ },
+ error: function(xhr) {
+ submitBtn.prop('disabled', false).html(originalText);
+
+ if (xhr.status === 422) {
+ let errors = xhr.responseJSON.errors;
+ let errorMsg = "";
+ $.each(errors, function(key, val) {
+ errorMsg += val[0] + "\n";
+ });
+ alert("Penyimpanan Gagal:\n\n" + errorMsg);
+ } else {
+ let errorDetail = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : xhr.statusText;
+ alert("Error " + xhr.status + ": " + errorDetail);
+ console.error(xhr.responseText);
+ }
+ }
+ });
+
+ return false;
}
});