refactor: Replace external QR code dependency with bundled qrcode package
- Install qrcode npm package for proper QR code generation - Create new Stimulus controller using qrcode library instead of external CDN - Update ticket show view to use self-contained QR code generation - Remove dependency on external qrserver.com API - Generate valid, scannable QR codes client-side 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
56
app/javascript/controllers/qr_code_controller.js
Normal file
56
app/javascript/controllers/qr_code_controller.js
Normal file
@@ -0,0 +1,56 @@
|
||||
// QR Code generator controller using qrcode npm package
|
||||
import { Controller } from "@hotwired/stimulus"
|
||||
import QRCode from "qrcode"
|
||||
|
||||
export default class extends Controller {
|
||||
static values = { data: String }
|
||||
static targets = ["container", "loading"]
|
||||
|
||||
connect() {
|
||||
this.generateQRCode()
|
||||
}
|
||||
|
||||
async generateQRCode() {
|
||||
try {
|
||||
// Hide loading indicator
|
||||
if (this.hasLoadingTarget) {
|
||||
this.loadingTarget.style.display = 'none'
|
||||
}
|
||||
|
||||
// Create canvas element
|
||||
const canvas = document.createElement('canvas')
|
||||
|
||||
// Generate QR code using qrcode library
|
||||
await QRCode.toCanvas(canvas, this.dataValue, {
|
||||
width: 128,
|
||||
height: 128,
|
||||
margin: 1,
|
||||
color: {
|
||||
dark: '#000000',
|
||||
light: '#FFFFFF'
|
||||
}
|
||||
})
|
||||
|
||||
// Clear container and add QR code
|
||||
this.containerTarget.innerHTML = ''
|
||||
this.containerTarget.appendChild(canvas)
|
||||
|
||||
console.log('QR code generated successfully')
|
||||
} catch (error) {
|
||||
console.error('Error generating QR code:', error)
|
||||
this.showFallback()
|
||||
}
|
||||
}
|
||||
|
||||
showFallback() {
|
||||
this.containerTarget.innerHTML = `
|
||||
<div class="w-32 h-32 bg-gray-100 rounded flex items-center justify-center text-gray-500 text-xs border-2 border-dashed border-gray-300">
|
||||
<div class="text-center">
|
||||
<div class="text-lg mb-1">📱</div>
|
||||
<div>QR Code</div>
|
||||
<div class="font-mono text-xs mt-1 break-all px-2">${this.dataValue}</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user