aperonight/app/javascript/controllers/qr_code_controller.js

// 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>
    `
  }
}