daengdeni/lpj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update form inspeksi dan so bisa ambil alih

Browse Source
This commit is contained in:
majid76
2024-11-28 11:16:45 +07:00
parent b7a60abd3e
commit a2c7df7af3
18 changed files with 1712 additions and 1269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
resources/views/surveyor/js/camera-editor.blade.php
View File

@@ -1,4 +1,304 @@
@push('scripts')
<script>
document.addEventListener("DOMContentLoaded", function() {
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-button").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);
addDeleteListeners(lantaiLainnyaDiv);
function createNewDiv(container, inputName) {
const newDiv = document.createElement("div");
newDiv.className = "flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 mb-5";
newDiv.innerHTML = `
<label class="flex flex-col form-label max-w-56">
Masukkan nama ${inputName}
</label>
<div class="flex flex-wrap items-baseline w-full">
<div class="flex flex-col lg:flex-row gap-2 w-full">
<div class="flex flex-wrap items-baseline px-2">
<input class="input" type="text" name="name_${inputName}[]">
</div>
<div class=" w-full flex flex-col gap-2">
<img id="foto_${inputName}-preview"
src="{{ isset($formFoto['gerbang']) ? asset('storage/' . $formFoto['gerbang']) : '' }}"
alt="Foto Gerbong" class="mt-2 max-w-full h-auto"
style="{{ isset($formFoto['gerbang']) ? '' : 'display: none;' }} width: 30rem;">
<div class="input-group w-full flex gap-2">
<input id="inputLainnya" type="file" name="foto_${inputName}[]"
class="file-input file-input-bordered w-full" accept="image/*" capture="camera"
onchange="previewImage(this, 'foto_${inputName}-preview')"
>
<button type="button" id="btnCamera" class="btn btn-light"
data-modal-toggle="#cameraModal">
<i class="ki-outline ki-abstract-33"></i> Camera
</button>
</div>
</div>
<button type="button" class="btn btn-danger btn-sm delete-button">
<i class="ki-filled ki-trash"></i>
</button>
</div>
</div>
`;
container.appendChild(newDiv);
addDeleteListeners(container);
}
document.getElementById("btnAddMore").addEventListener("click", function() {
createNewDiv(ruteLainnyaDiv, "rute_lainnya");
});
document.getElementById("btnAddMoreObject").addEventListener("click", function() {
createNewDiv(lantaiLainnyaDiv, "lantai_lainnya");
});
});
const style = document.createElement('style');
style.textContent = `
.draggable-text {
z-index: 1000;
}
.draggable-text:hover {
outline: 1px dashed #666;
}
`;
document.head.appendChild(style);
document.addEventListener('DOMContentLoaded', function() {
const editor = new UniversalCameraEditor();
const cameraButtons = document.querySelectorAll('#btnCamera');
const modal = document.getElementById('cameraModal');
const closeModal = document.getElementById('closeModal');
// Current input field to update
let currentInputField = null;
// Handle camera button click
cameraButtons.forEach(button => {
button.addEventListener('click', function(e) {
e.preventDefault();
const inputContainer = this.closest('.input-group');
currentInputField = inputContainer.querySelector('input[type="file"]');
modal.classList.remove('hidden');
modal.classList.add('modal-open');
editor.startCamera();
});
});
closeModal.addEventListener('click', function() {
modal.classList.add('hidden');
editor.closeCamera();
});
// Override save function
editor.saveAndUpload = async function() {
try {
// Create final canvas
const finalCanvas = document.createElement('canvas');
finalCanvas.width = this.canvas.width;
finalCanvas.height = this.canvas.height;
const ctx = finalCanvas.getContext('2d');
// Draw original photo and edited result on final canvas
ctx.drawImage(this.canvas, 0, 0);
ctx.drawImage(this.drawingCanvas, 0, 0);
// Convert canvas to Blob and create file
finalCanvas.toBlob(async (blob) => {
const file = new File([blob], `camera_photo_${Date.now()}.jpg`, {
type: "image/jpeg"
});
// Create FileList and update input field
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
if (currentInputField) {
currentInputField.files = dataTransfer.files;
const event = new Event('change', {
bubbles: true
});
currentInputField.dispatchEvent(event);
const previewContainer = currentInputField.closest('.input-group')
.querySelector('.preview-container');
if (previewContainer) {
const img = document.createElement('img');
img.src = URL.createObjectURL(file);
img.className = 'w-full h-32 object-cover rounded-lg';
previewContainer.innerHTML = '';
previewContainer.appendChild(img);
}
}
// Close modal
modal.classList.remove('show');
modal.style.display = 'none';
modal.setAttribute('aria-hidden', 'true');
// document.body.classList.remove('modal-open');
// Remove modal backdrop if exists
const backdrop = document.querySelector('.modal-backdrop');
if (backdrop) {
backdrop.remove();
}
// Stop camera stream
if (editor.stream) {
editor.stream.getTracks().forEach(track => track.stop());
editor.stream = null;
}
// Reset camera to initial state
editor.closeCamera();
// Reset scroll if needed
window.scrollTo(0, 0); // Adjust as necessary
}, 'image/jpeg', 0.8);
} catch (error) {
console.error('Error saving photo:', error);
alert('Error saving photo. Please try again.');
}
};
// Handle escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape') {
const modal = document.getElementById('cameraModal');
if (modal.classList.contains('modal-open')) {
modal.classList.remove('modal-open');
modal.classList.add('hidden');
if (editor.stream) {
editor.stream.getTracks().forEach(track => track.stop());
}
}
}
});
function setupInputHandlers(containerId, buttonId, labelText, inputDataClass, buttonDeleteClass) {
const inputContainer = document.getElementById(containerId);
const addButton = document.getElementById(buttonId);
function updateLabels() {
const labels = inputContainer.querySelectorAll('.form-label span');
labels.forEach((label, index) => {
label.textContent = `${labelText} ${index + 1}`;
});
}
function handleDeleteButtons() {
const deleteBtns = inputContainer.querySelectorAll(`.${buttonDeleteClass}`);
deleteBtns.forEach(btn => {
btn.style.display = inputContainer.children.length > 1 ? 'block' : 'none';
});
}
function createNewInput() {
const newDiv = inputContainer.children[0].cloneNode(true);
const inputFile = newDiv.querySelector(`.${inputDataClass}`);
inputFile.id = `inputRute-${inputContainer.children.length}`;
// Reset input file value
if (inputFile) {
inputFile.value = '';
}
// Update the camera button to set currentInputField
const cameraButton = newDiv.querySelector('#btnCamera');
if (cameraButton) {
cameraButton.addEventListener('click', function(e) {
e.preventDefault();
currentInputField = inputFile; // Set current input field to the new input
modal.classList.remove('hidden');
modal.classList.add('modal-open');
editor.startCamera();
});
}
// Add delete button functionality
const deleteBtn = newDiv.querySelector(`.${buttonDeleteClass}`);
if (deleteBtn) {
deleteBtn.addEventListener('click', function() {
inputContainer.removeChild(newDiv);
handleDeleteButtons();
updateLabels();
});
}
// Update preview container
const previewContainer = document.createElement('div');
previewContainer.className = 'preview-container';
const img = document.createElement('img');
img.id = `foto_rute-preview-${inputFile.id}`;
img.src = '';
img.className = 'mt-2 h-auto';
img.style.display = 'none';
img.style.width = '30rem';
previewContainer.appendChild(img);
// Append preview container to the new input group
const inputGroup = newDiv.querySelector('.input-group');
inputGroup.appendChild(previewContainer);
newDiv.style.marginTop = '10px';
inputContainer.appendChild(newDiv);
updateLabels();
handleDeleteButtons();
}
if (addButton) {
addButton.addEventListener('click', createNewInput);
}
const firstDeleteBtn = inputContainer.children[0].querySelector(`.${buttonDeleteClass}`);
if (firstDeleteBtn) {
firstDeleteBtn.addEventListener('click', function() {
if (inputContainer.children.length > 1) {
inputContainer.removeChild(this.closest('.flex'));
handleDeleteButtons();
updateLabels();
}
});
}
updateLabels();
}
setupInputHandlers('inputContainerRute', 'btnRute', 'Foto Rute Menuju Lokasi', 'file-input',
'delete-btn');
setupInputHandlers('inputContainerLantai', 'btnLantai', 'Foto Lantai', 'file-input', 'delete-btn');
setupInputHandlers('inputContainerLingkungan', 'btnLingkungan', 'Lingkungan', 'file-input',
'delete-btn');
});
</script>
<script>
class UniversalCameraEditor {
constructor() {