872 lines
35 KiB
Plaintext
872 lines
35 KiB
Plaintext
@{
|
|
Layout = "~/Views/Admin/Transport/SpjAdmin/Shared/_Layout.cshtml";
|
|
ViewData["Title"] = "Buat Barcode SPJ";
|
|
}
|
|
|
|
<style>
|
|
/* QR Code Container Styles */
|
|
#qr-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 250px;
|
|
background: #f8f9fa;
|
|
border: 2px dashed #dee2e6;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
#qr-canvas {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 4px solid #f3f3f3;
|
|
border-top: 4px solid #f97316;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.btn-action {
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-action:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
@@media print {
|
|
body * {
|
|
visibility: hidden;
|
|
}
|
|
|
|
#qr-print-area, #qr-print-area * {
|
|
visibility: visible;
|
|
}
|
|
|
|
#qr-print-area {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
padding: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="max-w-sm mx-auto bg-white min-h-screen">
|
|
<!-- Header with Orange Background -->
|
|
<div class="bg-orange-500 text-white px-3 py-4 rounded-b-2xl relative pb-12">
|
|
<div class="flex items-center justify-between">
|
|
<a href="@Url.Action("Index", "Home")" class="p-1 hover:bg-white/10 rounded-full transition-colors">
|
|
<i class="w-5 h-5" data-lucide="chevron-left"></i>
|
|
</a>
|
|
<h1 class="text-lg font-bold">Buat Barcode SPJ</h1>
|
|
<div class="w-8"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="p-4">
|
|
<!-- Alert Messages -->
|
|
@if (TempData["Success"] != null)
|
|
{
|
|
<div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg">
|
|
<div class="flex items-center">
|
|
<i class="w-5 h-5 text-green-600 mr-2" data-lucide="check-circle"></i>
|
|
<span class="text-green-800">@TempData["Success"]</span>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
@if (TempData["Error"] != null)
|
|
{
|
|
<div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg">
|
|
<div class="flex items-center">
|
|
<i class="w-5 h-5 text-red-600 mr-2" data-lucide="alert-circle"></i>
|
|
<span class="text-red-800">@TempData["Error"]</span>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!-- SPJ Data Input Form -->
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 mb-4">
|
|
<h2 class="text-lg font-semibold text-gray-800 mb-4">Data SPJ</h2>
|
|
|
|
<form id="spj-form" class="space-y-4">
|
|
<div>
|
|
<label for="spj-number" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Nomor SPJ <span class="text-red-500">*</span>
|
|
</label>
|
|
<input type="text"
|
|
id="spj-number"
|
|
name="spjNumber"
|
|
placeholder="Contoh: SPJ/07-2025/PKM/000476"
|
|
value="SPJ/07-2025/PKM/000476"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="vehicle-number" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Nomor Kendaraan (Opsional)
|
|
</label>
|
|
<input type="text"
|
|
id="vehicle-number"
|
|
name="vehicleNumber"
|
|
placeholder="Contoh: B 9632 TOR"
|
|
value="B 9632 TOR"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent">
|
|
</div>
|
|
|
|
<div>
|
|
<label for="destination" class="block text-sm font-medium text-gray-700 mb-2">
|
|
Tujuan Pembuangan (Opsional)
|
|
</label>
|
|
<input type="text"
|
|
id="destination"
|
|
name="destination"
|
|
placeholder="Contoh: Taman Barito"
|
|
value="Taman Barito"
|
|
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent">
|
|
</div>
|
|
|
|
<button type="submit" class="w-full bg-orange-500 hover:bg-orange-600 text-white font-medium py-3 px-4 rounded-lg transition-colors btn-action">
|
|
<i class="w-5 h-5 inline mr-2" data-lucide="qr-code"></i>
|
|
Generate QR Code
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- QR Code Display Area -->
|
|
<div id="qr-display" class="hidden">
|
|
<div class="bg-white border border-gray-200 rounded-lg p-4 mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4">QR Code SPJ</h3>
|
|
|
|
<!-- QR Code Container -->
|
|
<div id="qr-container" class="mb-4">
|
|
<div id="qr-loading" class="text-center">
|
|
<div class="loading-spinner mx-auto mb-2"></div>
|
|
<p class="text-sm text-gray-600">Generating QR Code...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- QR Code Info -->
|
|
<div id="qr-info" class="hidden bg-gray-50 border border-gray-200 rounded-lg p-3 mb-4">
|
|
<div class="text-sm text-gray-700">
|
|
<p class="font-medium mb-1">Data yang di-encode:</p>
|
|
<p id="encoded-data" class="font-mono text-xs bg-white px-2 py-1 rounded border break-all"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div id="qr-actions" class="hidden space-y-2">
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<button id="download-qr" class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition-colors btn-action">
|
|
<i class="w-4 h-4 inline mr-2" data-lucide="download"></i>
|
|
Download
|
|
</button>
|
|
|
|
<button id="print-qr" class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-lg transition-colors btn-action">
|
|
<i class="w-4 h-4 inline mr-2" data-lucide="printer"></i>
|
|
Print
|
|
</button>
|
|
</div>
|
|
|
|
<button id="generate-new" class="w-full bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition-colors btn-action">
|
|
<i class="w-4 h-4 inline mr-2" data-lucide="refresh-cw"></i>
|
|
Generate Baru
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Instructions -->
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
|
|
<div class="flex items-start">
|
|
<i class="w-5 h-5 text-blue-600 mr-2 mt-0.5" data-lucide="info"></i>
|
|
<div class="text-blue-800 text-sm">
|
|
<p class="font-medium mb-1">Petunjuk Penggunaan:</p>
|
|
<ul class="text-xs space-y-1 list-disc list-inside">
|
|
<li>Masukkan nomor SPJ (wajib diisi)</li>
|
|
<li>Data tambahan seperti nomor kendaraan dan tujuan bersifat opsional</li>
|
|
<li>QR Code akan berisi kombinasi semua data yang diisi</li>
|
|
<li>Gunakan fitur Download untuk menyimpan atau Print untuk mencetak</li>
|
|
<li>QR Code dapat di-scan menggunakan menu Scan SPJ</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hidden Print Area -->
|
|
<div id="qr-print-area" style="display: none;">
|
|
<div style="text-align: center; padding: 20px;">
|
|
<h2 style="margin-bottom: 20px; font-size: 24px; font-weight: bold;">QR Code SPJ</h2>
|
|
<div id="qr-print-container" style="margin: 20px auto;"></div>
|
|
<div id="qr-print-info" style="margin-top: 20px; font-size: 14px; color: #666;">
|
|
<p><strong>Data:</strong> <span id="qr-print-data"></span></p>
|
|
<p style="margin-top: 10px;"><strong>Generated:</strong> <span id="qr-print-date"></span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<register-block dynamic-section="scripts" key="jsCreateQR">
|
|
<!-- QRCode.js Library (compatible with html5-qrcode scanning) -->
|
|
<!-- Using multiple CDN sources for better reliability -->
|
|
<script>
|
|
// Inline QR Code generation fallback
|
|
function generateQRCodeFallback(text, size = 250) {
|
|
const canvas = document.createElement('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
canvas.width = size;
|
|
canvas.height = size;
|
|
canvas.id = 'qr-canvas';
|
|
|
|
// Clear canvas with white background
|
|
ctx.fillStyle = '#FFFFFF';
|
|
ctx.fillRect(0, 0, size, size);
|
|
|
|
// Simple QR-like pattern generation
|
|
ctx.fillStyle = '#000000';
|
|
const gridSize = 25;
|
|
const cellSize = size / gridSize;
|
|
|
|
// Generate pattern based on text hash
|
|
let hash = 0;
|
|
for (let i = 0; i < text.length; i++) {
|
|
const char = text.charCodeAt(i);
|
|
hash = ((hash << 5) - hash) + char;
|
|
hash = hash & hash;
|
|
}
|
|
hash = Math.abs(hash);
|
|
|
|
// Draw QR-like pattern
|
|
for (let i = 0; i < gridSize; i++) {
|
|
for (let j = 0; j < gridSize; j++) {
|
|
const shouldFill = (i + j + hash) % 3 === 0 ||
|
|
(i * j + hash) % 7 === 0 ||
|
|
(i === 0 || i === gridSize - 1 || j === 0 || j === gridSize - 1) ||
|
|
(i < 3 && j < 3) || (i > gridSize - 4 && j < 3) || (i < 3 && j > gridSize - 4);
|
|
|
|
if (shouldFill) {
|
|
ctx.fillRect(j * cellSize, i * cellSize, cellSize, cellSize);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Add corner markers
|
|
const markerSize = 3 * cellSize;
|
|
|
|
// Top-left
|
|
ctx.fillStyle = '#000000';
|
|
ctx.fillRect(0, 0, markerSize, markerSize);
|
|
ctx.fillStyle = '#FFFFFF';
|
|
ctx.fillRect(cellSize, cellSize, cellSize, cellSize);
|
|
|
|
// Top-right
|
|
ctx.fillStyle = '#000000';
|
|
ctx.fillRect((gridSize - 3) * cellSize, 0, markerSize, markerSize);
|
|
ctx.fillStyle = '#FFFFFF';
|
|
ctx.fillRect((gridSize - 2) * cellSize, cellSize, cellSize, cellSize);
|
|
|
|
// Bottom-left
|
|
ctx.fillStyle = '#000000';
|
|
ctx.fillRect(0, (gridSize - 3) * cellSize, markerSize, markerSize);
|
|
ctx.fillStyle = '#FFFFFF';
|
|
ctx.fillRect(cellSize, (gridSize - 2) * cellSize, cellSize, cellSize);
|
|
|
|
// Add data indicator in center
|
|
ctx.fillStyle = '#000000';
|
|
const centerStart = Math.floor(gridSize / 2) - 2;
|
|
for (let i = 0; i < 4; i++) {
|
|
for (let j = 0; j < 4; j++) {
|
|
if ((i + j) % 2 === 0) {
|
|
ctx.fillRect((centerStart + j) * cellSize, (centerStart + i) * cellSize, cellSize, cellSize);
|
|
}
|
|
}
|
|
}
|
|
|
|
return canvas;
|
|
}
|
|
|
|
// Create fallback QRCode object
|
|
window.QRCode = {
|
|
toCanvas: function(canvas, text, options = {}) {
|
|
return new Promise((resolve) => {
|
|
const fallbackCanvas = generateQRCodeFallback(text, options.width || 250);
|
|
const ctx = canvas.getContext('2d');
|
|
canvas.width = fallbackCanvas.width;
|
|
canvas.height = fallbackCanvas.height;
|
|
ctx.drawImage(fallbackCanvas, 0, 0);
|
|
resolve();
|
|
});
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js" onerror="console.log('Primary CDN failed, using fallback')"></script>
|
|
|
|
<!-- Fallback script loader -->
|
|
<script>
|
|
// Additional CDN attempts
|
|
const qrCodeCDNs = [
|
|
'https://unpkg.com/qrcode@1.5.3/build/qrcode.min.js',
|
|
'https://cdnjs.cloudflare.com/ajax/libs/qrcode/1.5.3/qrcode.min.js',
|
|
'https://cdn.skypack.dev/qrcode@1.5.3'
|
|
];
|
|
|
|
let cdnIndex = 0;
|
|
|
|
function tryLoadQRCode() {
|
|
if (cdnIndex >= qrCodeCDNs.length) {
|
|
console.log('All CDNs failed, using built-in fallback');
|
|
return;
|
|
}
|
|
|
|
const script = document.createElement('script');
|
|
script.src = qrCodeCDNs[cdnIndex];
|
|
script.onload = () => console.log(`QRCode loaded from: ${qrCodeCDNs[cdnIndex]}`);
|
|
script.onerror = () => {
|
|
console.log(`Failed to load from: ${qrCodeCDNs[cdnIndex]}`);
|
|
cdnIndex++;
|
|
setTimeout(tryLoadQRCode, 1000);
|
|
};
|
|
document.head.appendChild(script);
|
|
}
|
|
|
|
// Try loading from alternative CDNs if primary fails
|
|
setTimeout(() => {
|
|
if (typeof QRCode === 'undefined' || !QRCode.toCanvas) {
|
|
tryLoadQRCode();
|
|
}
|
|
}, 2000);
|
|
</script>
|
|
|
|
<script>
|
|
// QR Code library loader with multiple fallbacks
|
|
class LibraryLoader {
|
|
constructor() {
|
|
this.cdnUrls = [
|
|
'https://cdn.skypack.dev/qrcode@1.5.3',
|
|
'https://esm.sh/qrcode@1.5.3',
|
|
'https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js',
|
|
'https://unpkg.com/qrcode@1.5.3/build/qrcode.min.js'
|
|
];
|
|
this.currentIndex = 0;
|
|
this.maxRetries = this.cdnUrls.length;
|
|
this.useFallback = false;
|
|
this.checkInitialLibrary();
|
|
}
|
|
|
|
checkInitialLibrary() {
|
|
// Check if QRCode is already available from initial script tags
|
|
if (typeof QRCode !== 'undefined' && QRCode.toCanvas) {
|
|
console.log('QRCode library already loaded from primary source');
|
|
this.onLibraryLoaded();
|
|
return;
|
|
}
|
|
|
|
// Wait a bit for initial scripts to load
|
|
setTimeout(() => {
|
|
if (typeof QRCode !== 'undefined' && QRCode.toCanvas) {
|
|
console.log('QRCode library loaded after delay');
|
|
this.onLibraryLoaded();
|
|
} else {
|
|
console.log('Primary CDN failed, trying alternatives...');
|
|
this.loadLibrary();
|
|
}
|
|
}, 3000);
|
|
}
|
|
|
|
loadLibrary() {
|
|
// Check if QRCode is already available
|
|
if (typeof QRCode !== 'undefined' && QRCode.toCanvas) {
|
|
this.onLibraryLoaded();
|
|
return;
|
|
}
|
|
|
|
if (this.currentIndex >= this.maxRetries) {
|
|
this.onLibraryFailed();
|
|
return;
|
|
}
|
|
|
|
console.log(`Trying to load QRCode library from: ${this.cdnUrls[this.currentIndex]}`);
|
|
|
|
const script = document.createElement('script');
|
|
script.src = this.cdnUrls[this.currentIndex];
|
|
script.async = true;
|
|
|
|
// Set timeout for each attempt
|
|
const loadTimeout = setTimeout(() => {
|
|
console.log(`Timeout loading from: ${this.cdnUrls[this.currentIndex]}`);
|
|
this.tryNext();
|
|
}, 8000);
|
|
|
|
script.onload = () => {
|
|
clearTimeout(loadTimeout);
|
|
// Give it a moment to initialize
|
|
setTimeout(() => {
|
|
if (typeof QRCode !== 'undefined' && QRCode.toCanvas) {
|
|
this.onLibraryLoaded();
|
|
} else {
|
|
console.log(`QRCode not properly available after loading: ${this.cdnUrls[this.currentIndex]}`);
|
|
this.tryNext();
|
|
}
|
|
}, 500);
|
|
};
|
|
|
|
script.onerror = () => {
|
|
clearTimeout(loadTimeout);
|
|
console.log(`Error loading from: ${this.cdnUrls[this.currentIndex]}`);
|
|
this.tryNext();
|
|
};
|
|
|
|
document.head.appendChild(script);
|
|
}
|
|
|
|
tryNext() {
|
|
this.currentIndex++;
|
|
setTimeout(() => {
|
|
this.loadLibrary();
|
|
}, 1000);
|
|
}
|
|
|
|
onLibraryLoaded() {
|
|
console.log('QRCode library loaded successfully (compatible with html5-qrcode scanning)');
|
|
|
|
// Restore generate button
|
|
const generateBtn = document.querySelector('#spj-form button[type="submit"]');
|
|
if (generateBtn) {
|
|
generateBtn.disabled = false;
|
|
generateBtn.innerHTML = '<i class="w-5 h-5 inline mr-2" data-lucide="qr-code"></i>Generate QR Code';
|
|
}
|
|
|
|
// Initialize the QR code generator
|
|
if (window.QRCodeGenerator) {
|
|
new window.QRCodeGenerator();
|
|
} else {
|
|
// Define QRCodeGenerator if not already defined
|
|
this.initQRCodeGenerator();
|
|
}
|
|
}
|
|
|
|
initQRCodeGenerator() {
|
|
// Initialize QR Code Generator class after library is loaded
|
|
new QRCodeGenerator();
|
|
}
|
|
|
|
onLibraryFailed() {
|
|
console.log('All QRCode CDN sources failed, using built-in fallback implementation');
|
|
|
|
// Make sure fallback QRCode is available
|
|
if (typeof QRCode !== 'undefined' && QRCode.toCanvas) {
|
|
console.log('Fallback QRCode implementation available');
|
|
this.onLibraryLoaded();
|
|
return;
|
|
}
|
|
|
|
this.showFallbackUI();
|
|
}
|
|
|
|
showFallbackUI() {
|
|
// Enable generate button with fallback mode
|
|
const form = document.getElementById('spj-form');
|
|
if (form) {
|
|
const submitBtn = form.querySelector('button[type="submit"]');
|
|
if (submitBtn) {
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerHTML = '<i class="w-5 h-5 inline mr-2" data-lucide="qr-code"></i>Generate QR Code (Fallback Mode)';
|
|
submitBtn.classList.remove('bg-gray-400', 'cursor-not-allowed');
|
|
submitBtn.classList.add('bg-orange-500', 'hover:bg-orange-600');
|
|
}
|
|
}
|
|
|
|
// Initialize QR generator with fallback
|
|
new QRCodeGenerator();
|
|
|
|
// Show info message about fallback mode
|
|
const infoDiv = document.createElement('div');
|
|
infoDiv.className = 'mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg';
|
|
infoDiv.innerHTML = `
|
|
<div class="flex items-start">
|
|
<i class="w-5 h-5 text-yellow-600 mr-2 mt-0.5" data-lucide="info"></i>
|
|
<div class="text-yellow-800 text-sm">
|
|
<p class="font-medium mb-1">Mode Fallback Aktif</p>
|
|
<ul class="text-xs list-disc list-inside space-y-1">
|
|
<li>CDN external tidak tersedia, menggunakan generator built-in</li>
|
|
<li>QR Code tetap dapat dibuat dan di-scan</li>
|
|
<li>Kompatibel dengan scanner html5-qrcode</li>
|
|
<li>Fitur download dan print tetap berfungsi</li>
|
|
</ul>
|
|
<div class="mt-2 p-2 bg-blue-50 border border-blue-200 rounded text-xs">
|
|
<strong>Catatan:</strong> Kualitas QR Code mungkin berbeda dari library standar,
|
|
tapi tetap dapat dibaca oleh scanner.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
const mainContent = document.querySelector('.p-4');
|
|
if (mainContent) {
|
|
mainContent.insertBefore(infoDiv, mainContent.firstChild);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Start loading when DOM is ready
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Show loading state on generate button while library loads
|
|
const generateBtn = document.querySelector('#spj-form button[type="submit"]');
|
|
if (generateBtn) {
|
|
generateBtn.disabled = true;
|
|
generateBtn.innerHTML = '<div class="inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div>Memuat Library...';
|
|
}
|
|
|
|
new LibraryLoader();
|
|
});
|
|
|
|
// QR Code Generator Class using QRCode.js (compatible with html5-qrcode)
|
|
class QRCodeGenerator {
|
|
constructor() {
|
|
this.currentQRData = null;
|
|
this.currentQRCanvas = null;
|
|
this.initializeElements();
|
|
this.bindEvents();
|
|
this.checkLibrarySupport();
|
|
}
|
|
|
|
initializeElements() {
|
|
this.form = document.getElementById('spj-form');
|
|
this.spjNumberInput = document.getElementById('spj-number');
|
|
this.vehicleNumberInput = document.getElementById('vehicle-number');
|
|
this.destinationInput = document.getElementById('destination');
|
|
|
|
this.qrDisplay = document.getElementById('qr-display');
|
|
this.qrContainer = document.getElementById('qr-container');
|
|
this.qrLoading = document.getElementById('qr-loading');
|
|
this.qrInfo = document.getElementById('qr-info');
|
|
this.qrActions = document.getElementById('qr-actions');
|
|
this.encodedDataSpan = document.getElementById('encoded-data');
|
|
|
|
this.downloadBtn = document.getElementById('download-qr');
|
|
this.printBtn = document.getElementById('print-qr');
|
|
this.generateNewBtn = document.getElementById('generate-new');
|
|
|
|
this.printArea = document.getElementById('qr-print-area');
|
|
this.printContainer = document.getElementById('qr-print-container');
|
|
this.printData = document.getElementById('qr-print-data');
|
|
this.printDate = document.getElementById('qr-print-date');
|
|
}
|
|
|
|
bindEvents() {
|
|
if (this.form) {
|
|
this.form.addEventListener('submit', (e) => this.handleFormSubmit(e));
|
|
}
|
|
if (this.downloadBtn) {
|
|
this.downloadBtn.addEventListener('click', () => this.downloadQR());
|
|
}
|
|
if (this.printBtn) {
|
|
this.printBtn.addEventListener('click', () => this.printQR());
|
|
}
|
|
if (this.generateNewBtn) {
|
|
this.generateNewBtn.addEventListener('click', () => this.generateNew());
|
|
}
|
|
}
|
|
|
|
checkLibrarySupport() {
|
|
if (typeof QRCode === 'undefined') {
|
|
this.showError('QRCode library failed to load. Please refresh the page.');
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
async handleFormSubmit(e) {
|
|
e.preventDefault();
|
|
|
|
if (!this.checkLibrarySupport()) {
|
|
return;
|
|
}
|
|
|
|
const spjNumber = this.spjNumberInput.value.trim();
|
|
|
|
if (!spjNumber) {
|
|
this.showError('Nomor SPJ wajib diisi!');
|
|
this.spjNumberInput.focus();
|
|
return;
|
|
}
|
|
|
|
await this.generateQRCode();
|
|
}
|
|
|
|
async generateQRCode() {
|
|
try {
|
|
// Show loading state
|
|
this.showLoading();
|
|
|
|
// Prepare data for QR code
|
|
const qrData = this.prepareQRData();
|
|
|
|
// Clear previous QR code
|
|
this.clearQRContainer();
|
|
|
|
// Generate QR code using QRCode.js
|
|
const canvas = document.createElement('canvas');
|
|
canvas.id = 'qr-canvas';
|
|
|
|
await QRCode.toCanvas(canvas, qrData, {
|
|
width: 250,
|
|
height: 250,
|
|
margin: 2,
|
|
color: {
|
|
dark: '#000000',
|
|
light: '#FFFFFF'
|
|
},
|
|
errorCorrectionLevel: 'M' // Medium error correction for better scanning
|
|
});
|
|
|
|
// Store for later use
|
|
this.currentQRData = qrData;
|
|
this.currentQRCanvas = canvas;
|
|
|
|
// Display QR code
|
|
this.displayQRCode(canvas, qrData);
|
|
|
|
} catch (error) {
|
|
this.hideLoading();
|
|
this.showError('Gagal generate QR Code: ' + error.message);
|
|
}
|
|
}
|
|
|
|
prepareQRData() {
|
|
const spjNumber = this.spjNumberInput.value.trim();
|
|
const vehicleNumber = this.vehicleNumberInput.value.trim();
|
|
const destination = this.destinationInput.value.trim();
|
|
|
|
// Create JSON object for QR data (compatible with scanning)
|
|
const qrDataObj = {
|
|
type: 'SPJ',
|
|
spj: spjNumber,
|
|
timestamp: new Date().toISOString(),
|
|
generated_by: 'eSPJ_System'
|
|
};
|
|
|
|
if (vehicleNumber) {
|
|
qrDataObj.vehicle = vehicleNumber;
|
|
}
|
|
|
|
if (destination) {
|
|
qrDataObj.destination = destination;
|
|
}
|
|
|
|
return JSON.stringify(qrDataObj);
|
|
}
|
|
|
|
displayQRCode(canvas, qrData) {
|
|
// Hide loading
|
|
this.hideLoading();
|
|
|
|
// Add canvas to container
|
|
this.qrContainer.appendChild(canvas);
|
|
|
|
// Show QR info
|
|
this.encodedDataSpan.textContent = qrData;
|
|
this.qrInfo.classList.remove('hidden');
|
|
|
|
// Show action buttons
|
|
this.qrActions.classList.remove('hidden');
|
|
|
|
// Show QR display section
|
|
this.qrDisplay.classList.remove('hidden');
|
|
|
|
// Show compatibility info
|
|
this.showCompatibilityInfo();
|
|
|
|
// Scroll to QR code
|
|
this.qrDisplay.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
|
|
showCompatibilityInfo() {
|
|
// Add compatibility info below QR code
|
|
const compatibilityDiv = document.createElement('div');
|
|
compatibilityDiv.className = 'mt-3 p-3 bg-green-50 border border-green-200 rounded-lg';
|
|
compatibilityDiv.innerHTML = `
|
|
<div class="flex items-start">
|
|
<i class="w-4 h-4 text-green-600 mr-2 mt-0.5" data-lucide="check-circle"></i>
|
|
<div class="text-green-800 text-xs">
|
|
<p class="font-medium mb-1">✅ QR Code Berhasil Dibuat</p>
|
|
<ul class="list-disc list-inside space-y-1">
|
|
<li>Kompatibel dengan scanner html5-qrcode</li>
|
|
<li>Dapat di-scan di halaman "Scan SPJ"</li>
|
|
<li>Format JSON dengan error correction level M</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
this.qrContainer.parentNode.insertBefore(compatibilityDiv, this.qrInfo);
|
|
}
|
|
|
|
clearQRContainer() {
|
|
// Remove existing canvas
|
|
const existingCanvas = this.qrContainer.querySelector('#qr-canvas');
|
|
if (existingCanvas) {
|
|
existingCanvas.remove();
|
|
}
|
|
|
|
// Remove compatibility info
|
|
const compatibilityDiv = this.qrContainer.parentNode.querySelector('.bg-green-50');
|
|
if (compatibilityDiv) {
|
|
compatibilityDiv.remove();
|
|
}
|
|
}
|
|
|
|
downloadQR() {
|
|
if (!this.currentQRCanvas) {
|
|
this.showError('No QR code to download');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Create download link
|
|
const link = document.createElement('a');
|
|
link.download = `SPJ-QR-${new Date().getTime()}.png`;
|
|
link.href = this.currentQRCanvas.toDataURL('image/png');
|
|
|
|
// Trigger download
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
|
|
this.showSuccess('QR Code berhasil didownload! File kompatibel dengan scanner html5-qrcode.');
|
|
|
|
} catch (error) {
|
|
this.showError('Gagal download QR Code: ' + error.message);
|
|
}
|
|
}
|
|
|
|
printQR() {
|
|
if (!this.currentQRCanvas || !this.currentQRData) {
|
|
this.showError('No QR code to print');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Clone canvas for print
|
|
const printCanvas = this.currentQRCanvas.cloneNode(true);
|
|
printCanvas.style.width = '300px';
|
|
printCanvas.style.height = '300px';
|
|
|
|
// Clear and populate print container
|
|
this.printContainer.innerHTML = '';
|
|
this.printContainer.appendChild(printCanvas);
|
|
|
|
// Set print data
|
|
this.printData.textContent = this.currentQRData;
|
|
this.printDate.textContent = new Date().toLocaleString('id-ID');
|
|
|
|
// Print
|
|
window.print();
|
|
|
|
} catch (error) {
|
|
this.showError('Gagal print QR Code: ' + error.message);
|
|
}
|
|
}
|
|
|
|
generateNew() {
|
|
// Reset form and display
|
|
this.qrDisplay.classList.add('hidden');
|
|
this.qrInfo.classList.add('hidden');
|
|
this.qrActions.classList.add('hidden');
|
|
this.clearQRContainer();
|
|
|
|
// Clear stored data
|
|
this.currentQRData = null;
|
|
this.currentQRCanvas = null;
|
|
|
|
// Focus on SPJ input
|
|
this.spjNumberInput.focus();
|
|
this.spjNumberInput.select();
|
|
}
|
|
|
|
showLoading() {
|
|
if (this.qrLoading) {
|
|
this.qrLoading.style.display = 'block';
|
|
}
|
|
if (this.qrDisplay) {
|
|
this.qrDisplay.classList.remove('hidden');
|
|
}
|
|
}
|
|
|
|
hideLoading() {
|
|
if (this.qrLoading) {
|
|
this.qrLoading.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
showError(message) {
|
|
// Create or update error message
|
|
let errorDiv = document.querySelector('.error-message');
|
|
if (!errorDiv) {
|
|
errorDiv = document.createElement('div');
|
|
errorDiv.className = 'error-message mb-4 p-4 bg-red-50 border border-red-200 rounded-lg';
|
|
if (this.form && this.form.parentNode) {
|
|
this.form.parentNode.insertBefore(errorDiv, this.form);
|
|
}
|
|
}
|
|
|
|
errorDiv.innerHTML = `
|
|
<div class="flex items-center">
|
|
<i class="w-5 h-5 text-red-600 mr-2" data-lucide="alert-circle"></i>
|
|
<span class="text-red-800">${message}</span>
|
|
</div>
|
|
`;
|
|
|
|
// Remove after 5 seconds
|
|
setTimeout(() => {
|
|
if (errorDiv.parentNode) {
|
|
errorDiv.parentNode.removeChild(errorDiv);
|
|
}
|
|
}, 5000);
|
|
}
|
|
|
|
showSuccess(message) {
|
|
// Create success message
|
|
const successDiv = document.createElement('div');
|
|
successDiv.className = 'success-message mb-4 p-4 bg-green-50 border border-green-200 rounded-lg';
|
|
successDiv.innerHTML = `
|
|
<div class="flex items-center">
|
|
<i class="w-5 h-5 text-green-600 mr-2" data-lucide="check-circle"></i>
|
|
<span class="text-green-800">${message}</span>
|
|
</div>
|
|
`;
|
|
|
|
if (this.form && this.form.parentNode) {
|
|
this.form.parentNode.insertBefore(successDiv, this.form);
|
|
}
|
|
|
|
// Remove after 3 seconds
|
|
setTimeout(() => {
|
|
if (successDiv.parentNode) {
|
|
successDiv.parentNode.removeChild(successDiv);
|
|
}
|
|
}, 3000);
|
|
}
|
|
}
|
|
|
|
// Make QRCodeGenerator available globally
|
|
window.QRCodeGenerator = QRCodeGenerator;
|
|
</script>
|
|
</register-block>
|