Probindo/database-pertani-web
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://git.probindo.com/Probindo/database-pertani-web

Browse Source
This commit is contained in:
irwan.l.cahyono
2026-07-16 13:46:45 +07:00
parent 419404e273 837e542851
commit 4c647ea8ce
1 changed files with 201 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/produktivitas/petani/lahan/add.blade.php
+201 -136
View File
@@ -13,149 +13,156 @@
z-index: 1; z-index: 1;
} }
.dropzone-custom-container { .dropzone-custom-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 15px; gap: 15px;
padding: 15px; padding: 15px;
border: 2px dashed #ced4da; border: 2px dashed #ced4da;
border-radius: 12px; border-radius: 12px;
background-color: #f8f9fa; background-color: #f8f9fa;
min-height: 160px; min-height: 160px;
align-items: center; align-items: center;
} }
.btn-tambah-foto { .btn-tambah-foto {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 140px; width: 140px;
height: 160px; height: 160px;
border: 2px dashed #a8b1ba; border: 2px dashed #a8b1ba;
border-radius: 12px; border-radius: 12px;
background: #fff; background: #fff;
color: #6c757d; color: #6c757d;
cursor: pointer; cursor: pointer;
transition: 0.2s; transition: 0.2s;
order: 999; order: 999;
} }
.btn-tambah-foto:hover { .btn-tambah-foto:hover {
background: #e9ecef; background: #e9ecef;
border-color: #6c757d; border-color: #6c757d;
color: #495057; color: #495057;
} }
.dropzone-custom-container .dz-preview { .dropzone-custom-container .dz-preview {
position: relative; position: relative;
background: #fff; background: #fff;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.08); box-shadow: 0 4px 10px rgba(0,0,0,0.08);
border: 1px solid #e2e8f0; border: 1px solid #e2e8f0;
width: 140px; width: 140px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.dropzone-custom-container .dz-image { .dropzone-custom-container .dz-image {
width: 100%; width: 100%;
height: 110px; height: 110px;
background: #f1f5f9; background: #f1f5f9;
cursor: zoom-in; cursor: zoom-in;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 12px 12px 0 0; border-radius: 12px 12px 0 0;
overflow: hidden; overflow: hidden;
} }
.dropzone-custom-container .dz-image img { .dropzone-custom-container .dz-image img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
.dropzone-custom-container .dz-details { .dropzone-custom-container .dz-details {
padding: 8px; padding: 8px;
text-align: center; text-align: center;
background: #fff; background: #fff;
border-radius: 0 0 12px 12px; border-radius: 0 0 12px 12px;
border-top: 1px solid #e2e8f0; border-top: 1px solid #e2e8f0;
} }
.dropzone-custom-container .dz-filename { .dropzone-custom-container .dz-filename {
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: #495057; color: #495057;
} }
.dropzone-custom-container .dz-size { .dropzone-custom-container .dz-size {
font-size: 10px; font-size: 10px;
color: #adb5bd; color: #adb5bd;
} }
.dropzone-custom-container .dz-remove-custom { .dropzone-custom-container .dz-control-panel {
position: absolute; position: absolute;
top: -8px; top: -8px;
right: -8px; right: -8px;
background: #dc3545; display: flex;
color: #fff; gap: 5px;
border-radius: 50%; z-index: 20;
width: 24px; }
height: 24px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 12px;
font-weight: bold;
z-index: 99;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
cursor: pointer;
}
.dropzone-custom-container .dz-remove-custom:hover { background: #c82333; color: #fff; }
.dropzone-custom-container .dz-error-message, .dropzone-custom-container .dz-btn-action {
.dropzone-custom-container .dz-success-mark, display: flex;
.dropzone-custom-container .dz-error-mark, align-items: center;
.dropzone-custom-container .progress { display: none !important; } justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
color: #fff !important;
text-decoration: none !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
cursor: pointer;
font-size: 14px;
}
.foto-lightbox { .dropzone-custom-container .btn-edit { background: #ffc107; color: #000 !important; }
display: none; .dropzone-custom-container .btn-edit:hover { background: #7367f0; }
position: fixed !important; .dropzone-custom-container .btn-delete { background: #dc3545; }
top: 0 !important; .dropzone-custom-container .btn-delete:hover { background: #c82333; }
left: 0 !important;
width: 100vw !important; .dropzone-custom-container .dz-error-message,
height: 100vh !important; .dropzone-custom-container .dz-success-mark,
background: rgba(0, 0, 0, 0.85) !important; .dropzone-custom-container .dz-error-mark,
z-index: 99999 !important; .dropzone-custom-container .progress { display: none !important; }
align-items: center !important;
justify-content: center !important; .foto-lightbox {
padding: 30px !important; display: none;
box-sizing: border-box !important; position: fixed !important;
} top: 0 !important;
.foto-lightbox.active { left: 0 !important;
display: flex !important; width: 100vw !important;
} height: 100vh !important;
.foto-lightbox img { background: rgba(0, 0, 0, 0.85) !important;
max-width: 90vw !important; z-index: 99999 !important;
max-height: 85vh !important; align-items: center !important;
object-fit: contain !important; justify-content: center !important;
border-radius: 8px !important; padding: 30px !important;
box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important; box-sizing: border-box !important;
} }
.foto-lightbox-close { .foto-lightbox.active {
position: absolute !important; display: flex !important;
top: 20px !important; }
right: 30px !important; .foto-lightbox img {
color: #fff !important; max-width: 90vw !important;
font-size: 40px !important; max-height: 85vh !important;
font-weight: bold !important; object-fit: contain !important;
cursor: pointer !important; border-radius: 8px !important;
z-index: 100000 !important; box-shadow: 0 10px 40px rgba(0,0,0,0.5) !important;
} }
.foto-lightbox-close:hover { color: #dc3545 !important; } .foto-lightbox-close {
position: absolute !important;
top: 20px !important;
right: 30px !important;
color: #fff !important;
font-size: 40px !important;
font-weight: bold !important;
cursor: pointer !important;
z-index: 100000 !important;
}
.foto-lightbox-close:hover { color: #dc3545 !important; }
</style> </style>
@endpush @endpush
@@ -655,7 +662,14 @@
const previewTemplate = ` const previewTemplate = `
<div class="dz-preview dz-file-preview"> <div class="dz-preview dz-file-preview">
<a href="javascript:void(0);" class="dz-remove-custom" data-dz-remove title="Hapus File">✕</a> <div class="dz-control-panel">
<a href="javascript:void(0);" class="dz-btn-action btn-edit" title="Ganti Foto">
<i class="ti tabler-pencil"></i>
</a>
<a href="javascript:void(0);" class="dz-btn-action btn-delete" data-dz-remove title="Hapus Foto">
<i class="ti tabler-x"></i>
</a>
</div>
<div class="dz-image"><img data-dz-thumbnail /></div> <div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details"> <div class="dz-details">
<div class="dz-filename"><span data-dz-name></span></div> <div class="dz-filename"><span data-dz-name></span></div>
@@ -683,6 +697,29 @@
thumbnailHeight: null, thumbnailHeight: null,
}); });
} }
$(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) {
dz.removeFile(fileToReplace);
dz.addFile(newFile);
}
};
tempInput.click();
}
});
$(document).on('click', '#dropzone-container .dz-image img', function (e) { $(document).on('click', '#dropzone-container .dz-image img', function (e) {
e.stopPropagation(); e.stopPropagation();
@@ -695,6 +732,34 @@
$(this).removeClass('active'); $(this).removeClass('active');
} }
}); });
$(document).on('click', '.dz-edit', function(e) {
e.preventDefault();
e.stopPropagation();
let previewElement = $(this).closest('.dz-preview')[0];
let dz = $("#dropzone-foto")[0].dropzone;
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) {
dz.removeFile(fileToReplace);
dz.addFile(newFile);
}
};
tempInput.click();
}
});
// -----------------------------------
// FORM // FORM
$('#petani-lahan-tanaman').validate({ $('#petani-lahan-tanaman').validate({