feat: Integrate MySQL backend and rebrand to LPD Gerana
- Add Node.js Express backend with REST API - Create database schema and server.js - Migrate frontend from IndexedDB to MySQL API - Add environment configuration (.env) - Rebrand from Koperasi to LPD Gerana - Update all documentation and UI text - Add configurable server port setting Features: - POST /api/dokumentasi - Create documentation - GET /api/dokumentasi - Retrieve all (with search) - GET /api/dokumentasi/:id - Get single record - DELETE /api/dokumentasi/:id - Delete record - Full CRUD operations with MySQL persistence
This commit is contained in:
630
app.js.backup
Normal file
630
app.js.backup
Normal file
@@ -0,0 +1,630 @@
|
||||
// ============================================
|
||||
// APLIKASI DOKUMENTASI NASABAH KOPERASI
|
||||
// ============================================
|
||||
|
||||
// Global Variables
|
||||
let stream = null;
|
||||
let capturedImage = null;
|
||||
let db = null;
|
||||
let currentDetailId = null;
|
||||
|
||||
// DOM Elements
|
||||
const elements = {
|
||||
// Webcam
|
||||
webcam: document.getElementById('webcam'),
|
||||
canvas: document.getElementById('canvas'),
|
||||
preview: document.getElementById('preview'),
|
||||
previewImage: document.getElementById('previewImage'),
|
||||
|
||||
// Buttons
|
||||
startBtn: document.getElementById('startBtn'),
|
||||
captureBtn: document.getElementById('captureBtn'),
|
||||
retakeBtn: document.getElementById('retakeBtn'),
|
||||
saveBtn: document.getElementById('saveBtn'),
|
||||
printBtn: document.getElementById('printBtn'),
|
||||
deleteBtn: document.getElementById('deleteBtn'),
|
||||
exportBtn: document.getElementById('exportBtn'),
|
||||
|
||||
// Form
|
||||
form: document.getElementById('nasabahForm'),
|
||||
nama: document.getElementById('nama'),
|
||||
noAnggota: document.getElementById('noAnggota'),
|
||||
jenisPerjanjian: document.getElementById('jenisPerjanjian'),
|
||||
tanggal: document.getElementById('tanggal'),
|
||||
catatan: document.getElementById('catatan'),
|
||||
|
||||
// Gallery
|
||||
gallery: document.getElementById('gallery'),
|
||||
emptyState: document.getElementById('emptyState'),
|
||||
searchInput: document.getElementById('searchInput'),
|
||||
galleryStats: document.getElementById('galleryStats'),
|
||||
|
||||
// Modal
|
||||
modal: document.getElementById('detailModal'),
|
||||
modalBody: document.getElementById('modalBody'),
|
||||
closeModal: document.querySelector('.close-modal'),
|
||||
|
||||
// Status
|
||||
webcamStatus: document.getElementById('webcamStatus'),
|
||||
toast: document.getElementById('toast')
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// API CONFIGURATION
|
||||
// ============================================
|
||||
|
||||
const API_BASE_URL = 'http://localhost:3000/api';
|
||||
|
||||
async function checkApiConnection() {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/health`);
|
||||
if (!response.ok) {
|
||||
throw new Error('API not responding');
|
||||
}
|
||||
console.log('✅ API connection successful');
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('❌ API connection failed:', error);
|
||||
showToast('⚠️ Tidak dapat terhubung ke server. Pastikan server berjalan.', 'error');
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// DATABASE OPERATIONS
|
||||
// ============================================
|
||||
|
||||
function saveToDatabase(data) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const transaction = db.transaction(['dokumentasi'], 'readwrite');
|
||||
const objectStore = transaction.objectStore('dokumentasi');
|
||||
|
||||
const request = objectStore.add(data);
|
||||
|
||||
request.onsuccess = () => {
|
||||
console.log('Data berhasil disimpan dengan ID:', request.result);
|
||||
resolve(request.result);
|
||||
};
|
||||
|
||||
request.onerror = () => {
|
||||
console.error('Gagal menyimpan data:', request.error);
|
||||
reject(request.error);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function getAllData() {
|
||||
return new Promise((resolve, reject) => {
|
||||
const transaction = db.transaction(['dokumentasi'], 'readonly');
|
||||
const objectStore = transaction.objectStore('dokumentasi');
|
||||
const request = objectStore.getAll();
|
||||
|
||||
request.onsuccess = () => {
|
||||
resolve(request.result);
|
||||
};
|
||||
|
||||
request.onerror = () => {
|
||||
reject(request.error);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function getDataById(id) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const transaction = db.transaction(['dokumentasi'], 'readonly');
|
||||
const objectStore = transaction.objectStore('dokumentasi');
|
||||
const request = objectStore.get(id);
|
||||
|
||||
request.onsuccess = () => {
|
||||
resolve(request.result);
|
||||
};
|
||||
|
||||
request.onerror = () => {
|
||||
reject(request.error);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function deleteData(id) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const transaction = db.transaction(['dokumentasi'], 'readwrite');
|
||||
const objectStore = transaction.objectStore('dokumentasi');
|
||||
const request = objectStore.delete(id);
|
||||
|
||||
request.onsuccess = () => {
|
||||
resolve();
|
||||
};
|
||||
|
||||
request.onerror = () => {
|
||||
reject(request.error);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// WEBCAM FUNCTIONS
|
||||
// ============================================
|
||||
|
||||
async function startWebcam() {
|
||||
try {
|
||||
showStatus('Meminta akses webcam...', 'info');
|
||||
|
||||
stream = await navigator.mediaDevices.getUserMedia({
|
||||
video: {
|
||||
width: { ideal: 1280 },
|
||||
height: { ideal: 720 },
|
||||
facingMode: 'user'
|
||||
},
|
||||
audio: false
|
||||
});
|
||||
|
||||
elements.webcam.srcObject = stream;
|
||||
|
||||
elements.startBtn.style.display = 'none';
|
||||
elements.captureBtn.style.display = 'inline-flex';
|
||||
|
||||
showStatus('Webcam aktif. Posisikan nasabah dan klik "Ambil Foto"', 'success');
|
||||
showToast('✅ Webcam berhasil diaktifkan', 'success');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error accessing webcam:', error);
|
||||
showStatus('Gagal mengakses webcam. Pastikan webcam terhubung dan izin diberikan.', 'error');
|
||||
showToast('❌ Gagal mengakses webcam', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function capturePhoto() {
|
||||
const canvas = elements.canvas;
|
||||
const context = canvas.getContext('2d');
|
||||
|
||||
// Set canvas size to match video
|
||||
canvas.width = elements.webcam.videoWidth;
|
||||
canvas.height = elements.webcam.videoHeight;
|
||||
|
||||
// Draw video frame to canvas
|
||||
context.drawImage(elements.webcam, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Get image data
|
||||
capturedImage = canvas.toDataURL('image/jpeg', 0.9);
|
||||
|
||||
// Show preview
|
||||
elements.previewImage.src = capturedImage;
|
||||
elements.webcam.style.display = 'none';
|
||||
elements.preview.style.display = 'block';
|
||||
|
||||
// Update buttons
|
||||
elements.captureBtn.style.display = 'none';
|
||||
elements.retakeBtn.style.display = 'inline-flex';
|
||||
elements.saveBtn.style.display = 'inline-flex';
|
||||
|
||||
showStatus('Foto berhasil diambil. Periksa hasilnya dan klik "Simpan" jika sudah sesuai.', 'success');
|
||||
showToast('📸 Foto berhasil diambil', 'success');
|
||||
}
|
||||
|
||||
function retakePhoto() {
|
||||
capturedImage = null;
|
||||
|
||||
elements.webcam.style.display = 'block';
|
||||
elements.preview.style.display = 'none';
|
||||
|
||||
elements.retakeBtn.style.display = 'none';
|
||||
elements.saveBtn.style.display = 'none';
|
||||
elements.captureBtn.style.display = 'inline-flex';
|
||||
|
||||
showStatus('Webcam aktif. Ambil foto ulang.', 'info');
|
||||
}
|
||||
|
||||
function stopWebcam() {
|
||||
if (stream) {
|
||||
stream.getTracks().forEach(track => track.stop());
|
||||
stream = null;
|
||||
}
|
||||
|
||||
elements.webcam.srcObject = null;
|
||||
elements.webcam.style.display = 'block';
|
||||
elements.preview.style.display = 'none';
|
||||
|
||||
elements.startBtn.style.display = 'inline-flex';
|
||||
elements.captureBtn.style.display = 'none';
|
||||
elements.retakeBtn.style.display = 'none';
|
||||
elements.saveBtn.style.display = 'none';
|
||||
|
||||
capturedImage = null;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// FORM FUNCTIONS
|
||||
// ============================================
|
||||
|
||||
async function saveDocumentation() {
|
||||
// Validate form
|
||||
if (!elements.form.checkValidity()) {
|
||||
elements.form.reportValidity();
|
||||
showToast('⚠️ Lengkapi semua data yang wajib diisi', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate photo
|
||||
if (!capturedImage) {
|
||||
showToast('⚠️ Ambil foto terlebih dahulu', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Prepare data
|
||||
const data = {
|
||||
nama: elements.nama.value.trim(),
|
||||
noAnggota: elements.noAnggota.value.trim(),
|
||||
jenisPerjanjian: elements.jenisPerjanjian.value,
|
||||
tanggal: elements.tanggal.value,
|
||||
catatan: elements.catatan.value.trim(),
|
||||
foto: capturedImage,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
try {
|
||||
await saveToDatabase(data);
|
||||
|
||||
showToast('✅ Dokumentasi berhasil disimpan', 'success');
|
||||
|
||||
// Reset form and webcam
|
||||
elements.form.reset();
|
||||
setDefaultDate();
|
||||
stopWebcam();
|
||||
showStatus('', '');
|
||||
|
||||
// Reload gallery
|
||||
await loadGallery();
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error saving documentation:', error);
|
||||
showToast('❌ Gagal menyimpan dokumentasi', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function setDefaultDate() {
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
elements.tanggal.value = today;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// GALLERY FUNCTIONS
|
||||
// ============================================
|
||||
|
||||
async function loadGallery(searchTerm = '') {
|
||||
try {
|
||||
const allData = await getAllData();
|
||||
|
||||
// Filter by search term
|
||||
let filteredData = allData;
|
||||
if (searchTerm) {
|
||||
const term = searchTerm.toLowerCase();
|
||||
filteredData = allData.filter(item =>
|
||||
item.nama.toLowerCase().includes(term) ||
|
||||
item.noAnggota.toLowerCase().includes(term)
|
||||
);
|
||||
}
|
||||
|
||||
// Sort by timestamp (newest first)
|
||||
filteredData.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
|
||||
|
||||
// Update stats
|
||||
updateGalleryStats(filteredData.length, allData.length);
|
||||
|
||||
// Show empty state if no data
|
||||
if (filteredData.length === 0) {
|
||||
elements.gallery.innerHTML = '';
|
||||
elements.emptyState.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
elements.emptyState.style.display = 'none';
|
||||
|
||||
// Render gallery items
|
||||
elements.gallery.innerHTML = filteredData.map(item => `
|
||||
<div class="gallery-item" data-id="${item.id}" onclick="showDetail(${item.id})">
|
||||
<img src="${item.foto}" alt="${item.nama}" class="gallery-item-image">
|
||||
<div class="gallery-item-info">
|
||||
<h3>${escapeHtml(item.nama)}</h3>
|
||||
<p><strong>No. Anggota:</strong> ${escapeHtml(item.noAnggota)}</p>
|
||||
<p><strong>Perjanjian:</strong> ${escapeHtml(item.jenisPerjanjian)}</p>
|
||||
<p class="gallery-item-date">📅 ${formatDate(item.tanggal)} • 🕐 ${formatTime(item.timestamp)}</p>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error loading gallery:', error);
|
||||
showToast('❌ Gagal memuat galeri', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function updateGalleryStats(shown, total) {
|
||||
if (total === 0) {
|
||||
elements.galleryStats.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
let statsText = `📊 Total: ${total} dokumentasi`;
|
||||
if (shown < total) {
|
||||
statsText += ` • Ditampilkan: ${shown}`;
|
||||
}
|
||||
|
||||
elements.galleryStats.innerHTML = statsText;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// DETAIL & PRINT FUNCTIONS
|
||||
// ============================================
|
||||
|
||||
async function showDetail(id) {
|
||||
try {
|
||||
const data = await getDataById(id);
|
||||
if (!data) {
|
||||
showToast('❌ Data tidak ditemukan', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
currentDetailId = id;
|
||||
|
||||
elements.modalBody.innerHTML = `
|
||||
<div class="detail-container">
|
||||
<div>
|
||||
<img src="${data.foto}" alt="${escapeHtml(data.nama)}" class="detail-image">
|
||||
</div>
|
||||
<div class="detail-info">
|
||||
<h2>📋 Detail Dokumentasi</h2>
|
||||
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">Nama Lengkap</div>
|
||||
<div class="detail-value">${escapeHtml(data.nama)}</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">Nomor Anggota</div>
|
||||
<div class="detail-value">${escapeHtml(data.noAnggota)}</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">Jenis Perjanjian</div>
|
||||
<div class="detail-value">${escapeHtml(data.jenisPerjanjian)}</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">Tanggal Penandatanganan</div>
|
||||
<div class="detail-value">${formatDate(data.tanggal)}</div>
|
||||
</div>
|
||||
|
||||
${data.catatan ? `
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">Catatan</div>
|
||||
<div class="detail-value">${escapeHtml(data.catatan)}</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">Waktu Pengambilan Foto</div>
|
||||
<div class="detail-value">${formatDateTime(data.timestamp)}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
elements.modal.classList.add('show');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error showing detail:', error);
|
||||
showToast('❌ Gagal memuat detail', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
elements.modal.classList.remove('show');
|
||||
currentDetailId = null;
|
||||
}
|
||||
|
||||
function printDetail() {
|
||||
window.print();
|
||||
}
|
||||
|
||||
async function deleteDetail() {
|
||||
if (!currentDetailId) return;
|
||||
|
||||
if (!confirm('Apakah Anda yakin ingin menghapus dokumentasi ini?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await deleteData(currentDetailId);
|
||||
showToast('✅ Dokumentasi berhasil dihapus', 'success');
|
||||
closeModal();
|
||||
await loadGallery();
|
||||
} catch (error) {
|
||||
console.error('Error deleting data:', error);
|
||||
showToast('❌ Gagal menghapus dokumentasi', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// EXPORT FUNCTION
|
||||
// ============================================
|
||||
|
||||
async function exportData() {
|
||||
try {
|
||||
const allData = await getAllData();
|
||||
|
||||
if (allData.length === 0) {
|
||||
showToast('⚠️ Tidak ada data untuk diekspor', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Create CSV data (without photos for file size)
|
||||
const csvData = convertToCSV(allData);
|
||||
|
||||
// Download CSV
|
||||
const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
|
||||
const link = document.createElement('a');
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
link.setAttribute('href', url);
|
||||
link.setAttribute('download', `dokumentasi_nasabah_${new Date().toISOString().split('T')[0]}.csv`);
|
||||
link.style.visibility = 'hidden';
|
||||
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
|
||||
showToast('✅ Data berhasil diekspor', 'success');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error exporting data:', error);
|
||||
showToast('❌ Gagal mengekspor data', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function convertToCSV(data) {
|
||||
const headers = ['ID', 'Nama', 'No. Anggota', 'Jenis Perjanjian', 'Tanggal', 'Catatan', 'Waktu Input'];
|
||||
const rows = data.map(item => [
|
||||
item.id,
|
||||
item.nama,
|
||||
item.noAnggota,
|
||||
item.jenisPerjanjian,
|
||||
formatDate(item.tanggal),
|
||||
item.catatan || '',
|
||||
formatDateTime(item.timestamp)
|
||||
]);
|
||||
|
||||
const csvContent = [
|
||||
headers.join(','),
|
||||
...rows.map(row => row.map(cell => `"${cell}"`).join(','))
|
||||
].join('\n');
|
||||
|
||||
return csvContent;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// UTILITY FUNCTIONS
|
||||
// ============================================
|
||||
|
||||
function showStatus(message, type) {
|
||||
if (!message) {
|
||||
elements.webcamStatus.innerHTML = '';
|
||||
elements.webcamStatus.className = 'status-message';
|
||||
return;
|
||||
}
|
||||
|
||||
elements.webcamStatus.innerHTML = message;
|
||||
elements.webcamStatus.className = `status-message ${type}`;
|
||||
}
|
||||
|
||||
function showToast(message, type = 'success') {
|
||||
elements.toast.textContent = message;
|
||||
elements.toast.className = `toast ${type} show`;
|
||||
|
||||
setTimeout(() => {
|
||||
elements.toast.classList.remove('show');
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function formatDate(dateString) {
|
||||
const options = { year: 'numeric', month: 'long', day: 'numeric' };
|
||||
return new Date(dateString).toLocaleDateString('id-ID', options);
|
||||
}
|
||||
|
||||
function formatTime(isoString) {
|
||||
return new Date(isoString).toLocaleTimeString('id-ID', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
function formatDateTime(isoString) {
|
||||
const date = new Date(isoString);
|
||||
return `${date.toLocaleDateString('id-ID', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
})} pukul ${date.toLocaleTimeString('id-ID', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}`;
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// EVENT LISTENERS
|
||||
// ============================================
|
||||
|
||||
function setupEventListeners() {
|
||||
// Webcam controls
|
||||
elements.startBtn.addEventListener('click', startWebcam);
|
||||
elements.captureBtn.addEventListener('click', capturePhoto);
|
||||
elements.retakeBtn.addEventListener('click', retakePhoto);
|
||||
elements.saveBtn.addEventListener('click', saveDocumentation);
|
||||
|
||||
// Modal
|
||||
elements.closeModal.addEventListener('click', closeModal);
|
||||
elements.modal.addEventListener('click', (e) => {
|
||||
if (e.target === elements.modal) {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
|
||||
elements.printBtn.addEventListener('click', printDetail);
|
||||
elements.deleteBtn.addEventListener('click', deleteDetail);
|
||||
|
||||
// Search
|
||||
elements.searchInput.addEventListener('input', (e) => {
|
||||
loadGallery(e.target.value);
|
||||
});
|
||||
|
||||
// Export
|
||||
elements.exportBtn.addEventListener('click', exportData);
|
||||
|
||||
// Keyboard shortcuts
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
closeModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// INITIALIZATION
|
||||
// ============================================
|
||||
|
||||
async function init() {
|
||||
try {
|
||||
// Initialize database
|
||||
await initDatabase();
|
||||
|
||||
// Set default date
|
||||
setDefaultDate();
|
||||
|
||||
// Setup event listeners
|
||||
setupEventListeners();
|
||||
|
||||
// Load gallery
|
||||
await loadGallery();
|
||||
|
||||
console.log('✅ Aplikasi berhasil diinisialisasi');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error initializing app:', error);
|
||||
showToast('❌ Gagal menginisialisasi aplikasi', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Start the app when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
|
||||
// Make showDetail function globally accessible
|
||||
window.showDetail = showDetail;
|
||||
Reference in New Issue
Block a user