kbe/aperonight
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

refactor: Replace external QR code dependency with bundled qrcode package

Browse Source 
- 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:
kbe
2025-09-06 20:18:22 +02:00
parent d5326c7dc6
commit e983b68834
5 changed files with 281 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/javascript/controllers/index.js
View File

@@ -18,3 +18,6 @@ application.register("ticket-selection", TicketSelectionController);
import HeaderController from "./header_controller";
application.register("header", HeaderController);
import QrCodeController from "./qr_code_controller";
application.register("qr-code", QrCodeController);

56
app/javascript/controllers/qr_code_controller.js Normal file
View 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>
`
}
}

28
app/views/tickets/show.html.erb
View File

@@ -31,16 +31,16 @@
<p class="text-purple-100">ID: #<%= @ticket.id %></p>
</div>
<div class="text-right">
<div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium <%=
<div class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium <%=
case @ticket.status
when 'active' then 'bg-green-100 text-green-800'
when 'draft' then 'bg-yellow-100 text-yellow-800'
when 'draft' then 'bg-yellow-100 text-yellow-800'
when 'used' then 'bg-gray-100 text-gray-800'
when 'expired' then 'bg-red-100 text-red-800'
when 'refunded' then 'bg-blue-100 text-blue-800'
else 'bg-gray-100 text-gray-800'
end %>">
<%=
<%=
case @ticket.status
when 'active' then 'Valide'
when 'draft' then 'En attente'
@@ -59,7 +59,7 @@
<!-- Event Details -->
<div>
<h2 class="text-xl font-semibold text-gray-900 mb-6">Détails de l'événement</h2>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-500 mb-1">Événement</label>
@@ -108,7 +108,7 @@
<!-- Ticket Details -->
<div>
<h2 class="text-xl font-semibold text-gray-900 mb-6">Informations du billet</h2>
<div class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
@@ -128,14 +128,18 @@
</div>
<div>
<label class="block text-sm font-medium text-gray-500 mb-1">Code QR</label>
<label class="block text-sm font-medium text-gray-500 mb-1">QR Code</label>
<div class="bg-gray-50 rounded-lg p-4 text-center">
<div class="inline-block bg-white p-4 rounded-lg shadow-sm">
<!-- QR Code would be generated here -->
<div class="w-32 h-32 bg-gray-200 rounded flex items-center justify-center">
<svg class="w-12 h-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"/>
</svg>
<div data-controller="qr-code"
data-qr-code-data-value="<%= @ticket.qr_code %>"
class="w-32 h-32">
<!-- Loading indicator -->
<div data-qr-code-target="loading" class="w-32 h-32 bg-gray-100 rounded flex items-center justify-center">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600"></div>
</div>
<!-- QR code container -->
<div data-qr-code-target="container" class="w-32 h-32"></div>
</div>
</div>
<p class="text-xs text-gray-500 mt-2 font-mono"><%= @ticket.qr_code %></p>
@@ -148,7 +152,7 @@
<!-- Actions -->
<div class="mt-8 pt-6 border-t border-gray-200">
<div class="flex flex-col sm:flex-row gap-4">
<%= link_to dashboard_path,
<%= link_to dashboard_path,
class: "px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 text-center font-medium transition-colors duration-200" do %>
<svg class="w-4 h-4 inline-block mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18"/>