Merge branch 'main' of https://git.probindo.com/Probindo/database-pertani-web
This commit is contained in:
@@ -12,6 +12,150 @@
|
||||
background-color: #f8f9fa;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropzone-custom-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
padding: 15px;
|
||||
border: 2px dashed #ced4da;
|
||||
border-radius: 12px;
|
||||
background-color: #f8f9fa;
|
||||
min-height: 160px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-tambah-foto {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 140px;
|
||||
height: 160px;
|
||||
border: 2px dashed #a8b1ba;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
color: #6c757d;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
order: 999;
|
||||
}
|
||||
.btn-tambah-foto:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #6c757d;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.dropzone-custom-container .dz-preview {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
|
||||
border: 1px solid #e2e8f0;
|
||||
width: 140px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dropzone-custom-container .dz-image {
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
background: #f1f5f9;
|
||||
cursor: zoom-in;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 12px 12px 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dropzone-custom-container .dz-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.dropzone-custom-container .dz-details {
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border-radius: 0 0 12px 12px;
|
||||
border-top: 1px solid #e2e8f0;
|
||||
}
|
||||
.dropzone-custom-container .dz-filename {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #495057;
|
||||
}
|
||||
.dropzone-custom-container .dz-size {
|
||||
font-size: 10px;
|
||||
color: #adb5bd;
|
||||
}
|
||||
|
||||
.dropzone-custom-container .dz-remove-custom {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
background: #dc3545;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
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-success-mark,
|
||||
.dropzone-custom-container .dz-error-mark,
|
||||
.dropzone-custom-container .progress { display: none !important; }
|
||||
|
||||
.foto-lightbox {
|
||||
display: none;
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
background: rgba(0, 0, 0, 0.85) !important;
|
||||
z-index: 99999 !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
padding: 30px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
.foto-lightbox.active {
|
||||
display: flex !important;
|
||||
}
|
||||
.foto-lightbox img {
|
||||
max-width: 90vw !important;
|
||||
max-height: 85vh !important;
|
||||
object-fit: contain !important;
|
||||
border-radius: 8px !important;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.5) !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>
|
||||
@endpush
|
||||
|
||||
@@ -226,23 +370,22 @@
|
||||
</div>
|
||||
|
||||
<hr class="my-4">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-4">
|
||||
<h6 class="mb-0">Foto</h6>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12 mb-3 form-control-validation">
|
||||
<div id="dropzone-foto" class="needsclick">
|
||||
<div class="dz-message needsclick">
|
||||
Drop foto di sini atau klik untuk memilih
|
||||
<h6 class="mb-5">Foto</h6>
|
||||
<div id="dropzone-container" class="dropzone-custom-container">
|
||||
|
||||
<div id="btn-tambah-foto" class="btn-tambah-foto">
|
||||
<i class="ti tabler-plus" style="font-size: 32px; margin-bottom: 8px;"></i>
|
||||
<span style="font-size: 13px; font-weight: 600;">Tambah Foto</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<input type="file" id="foto-input" name="foto[]" multiple hidden>
|
||||
@error('file')<div class="error invalid-feedback">{{ $message }}</div>@enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col-12 text-end">
|
||||
@@ -258,6 +401,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="foto-lightbox" class="foto-lightbox">
|
||||
<span class="foto-lightbox-close">×</span>
|
||||
<img id="foto-lightbox-img" src="" alt="Preview Foto Besar">
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
@@ -505,35 +653,48 @@
|
||||
$('#luas_lahan').val(area.toFixed(2));
|
||||
}
|
||||
|
||||
// DROPZONE
|
||||
const previewTemplate = `<div class="dz-preview dz-file-preview">
|
||||
const previewTemplate = `
|
||||
<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-image"><img data-dz-thumbnail /></div>
|
||||
<div class="dz-details">
|
||||
<div class="dz-thumbnail">
|
||||
<img data-dz-thumbnail>
|
||||
<span class="dz-nopreview">No preview</span>
|
||||
<div class="dz-success-mark"></div>
|
||||
<div class="dz-error-mark"></div>
|
||||
<div class="dz-error-message"><span data-dz-errormessage></span></div>
|
||||
<div class="progress">
|
||||
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-dz-uploadprogress></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dz-filename" data-dz-name></div>
|
||||
<div class="dz-size" data-dz-size></div>
|
||||
<div class="dz-filename"><span data-dz-name></span></div>
|
||||
<div class="dz-size"><span data-dz-size></span></div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
|
||||
Dropzone.autoDiscover = false;
|
||||
const dropzoneFoto = $("#dropzone-foto").addClass("dropzone").dropzone({
|
||||
|
||||
let myDropzone = null;
|
||||
const dropzoneElement = document.querySelector("#dropzone-container");
|
||||
|
||||
if (dropzoneElement) {
|
||||
myDropzone = new Dropzone(dropzoneElement, {
|
||||
url: "/",
|
||||
autoProcessQueue: false,
|
||||
previewTemplate: previewTemplate,
|
||||
parallelUploads: 1,
|
||||
clickable: "#btn-tambah-foto",
|
||||
previewsContainer: "#dropzone-container",
|
||||
parallelUploads: 10,
|
||||
maxFilesize: 5,
|
||||
addRemoveLinks: true,
|
||||
addRemoveLinks: false,
|
||||
acceptedFiles: "image/jpeg,image/jpg,image/png",
|
||||
thumbnailWidth: null,
|
||||
thumbnailHeight: null,
|
||||
});
|
||||
}
|
||||
|
||||
$(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
|
||||
|
||||
$('#petani-lahan-tanaman').validate({
|
||||
|
||||
Reference in New Issue
Block a user