ricardo/BCards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ajustes de qrcodes, links, etc.

Browse Source
This commit is contained in:
Ricardo Carneiro 2026-04-27 22:01:16 -03:00
parent 6c2b618b92
commit 302d6a0eeb
1 changed files with 57 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/BCards.Web/Views/UserPage/Display.cshtml
View File

@ -209,31 +209,37 @@
.qrcode-toggle {
width: 100%;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
background-color: var(--primary-color);
color: white !important;
border: none;
border-radius: 12px;
padding: 1rem;
padding: 0.75rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.3s ease;
color: inherit;
font-size: 1rem;
font-weight: 500;
font-weight: 600;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.qrcode-toggle:hover {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
background-color: var(--secondary-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}
.qrcode-toggle i {
transition: transform 0.3s ease;
}
.qrcode-toggle div {
display: flex;
align-items: center;
gap: 0.75rem;
}
.qrcode-container {
margin-top: 1rem;
padding: 1.5rem;
@ -550,13 +556,13 @@
<div class="qrcode-section mt-4">
<button class="qrcode-toggle" onclick="toggleQRCode()" type="button">
<i class="fas fa-qrcode me-2"></i>
<span id="qrToggleText">Ocultar QR Code</span>
QR Code
<i class="fas fa-chevron-up ms-auto" id="qrToggleIcon"></i>
</button>
<div class="qrcode-container" id="qrcodeContainer" style="display: block;">
<div class="qrcode-canvas" id="qrcode"></div>
<p class="qrcode-hint">Escaneie para compartilhar esta página</p>
<p class="qrcode-hint">Escaneie o QR Code para abrir no celular</p>
<button class="btn-download-qr" onclick="downloadQR()" type="button">
<i class="fas fa-download me-1"></i> Baixar QR Code
</button>
@ -594,8 +600,8 @@
</div>
@section Scripts {
<!-- QRCode.js Library - Load FIRST -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<!-- QR Code Library - Usando bwip-js para maior compatibilidade -->
<script src="https://cdn.jsdelivr.net/npm/bwip-js@3.4.1/dist/bwip-js-min.js"></script>
<script>
function recordClick(pageId, linkIndex) {
@ -718,64 +724,76 @@
function toggleQRCode() {
const container = document.getElementById('qrcodeContainer');
const icon = document.getElementById('qrToggleIcon');
const text = document.getElementById('qrToggleText');
if (container.style.display === 'block') {
// Close
container.style.display = 'none';
icon.classList.remove('fa-chevron-up');
icon.classList.add('fa-chevron-down');
text.textContent = 'Mostrar QR Code';
} else {
// Open
container.style.display = 'block';
icon.classList.remove('fa-chevron-down');
icon.classList.add('fa-chevron-up');
text.textContent = 'Ocultar QR Code';
}
}
function generateQRCode() {
if (qrCodeGenerated) {
console.log('QR Code already generated, skipping...');
console.log('[QR] QR Code already generated, skipping...');
return;
}
const qrcodeElement = document.getElementById("qrcode");
if (!qrcodeElement) {
console.error('QR Code container not found');
console.error('[QR] QR Code container not found');
return;
}
// Check if already has content (double-call prevention)
if (qrcodeElement.querySelector('canvas')) {
console.log('Canvas already exists, skipping generation');
qrCodeGenerated = true;
if (typeof bwipjs === 'undefined') {
console.error('[QR] bwip-js library is not loaded');
qrcodeElement.innerHTML = '<p class="text-danger small">Erro ao carregar gerador de QR Code. Verifique sua conexão ou bloqueador de anúncios.</p>';
return;
}
// Mark as generated BEFORE creating to prevent race conditions
qrCodeGenerated = true;
// Construir a URL final (LivePage)
const baseUrl = window.location.origin;
const categoryName = '@Html.Raw(category?.Name ?? "")'.trim();
const slug = '@Html.Raw(Model.Slug ?? "")'.trim();
// Clear any existing content
qrcodeElement.innerHTML = '';
// Se não houver categoria, usa 'geral' ou remove a barra extra
const categoryPart = categoryName ? encodeURIComponent(categoryName) : "page";
const pageUrl = `${baseUrl}/page/${categoryPart}/${encodeURIComponent(slug)}`;
const pageUrl = window.location.href.split('?')[0]; // Remove query params
console.log('[QR] Generating QR for URL:', pageUrl);
// Criar um elemento canvas dinamicamente
const canvas = document.createElement('canvas');
canvas.style.maxWidth = '100%';
canvas.style.height = 'auto';
try {
new QRCode(qrcodeElement, {
text: pageUrl,
width: 200,
height: 200,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
// bwip-js usa um canvas para renderizar
bwipjs.toCanvas(canvas, {
bcid: 'qrcode', // Tipo de código de barras
text: pageUrl, // Texto/URL
scale: 3, // Escala (resolução)
height: 50, // Altura (para QR é proporcional)
width: 50,
includetext: false, // Não mostrar o texto embaixo
textxalign: 'center',
});
console.log('QR Code generated successfully for:', pageUrl);
// Limpar e adicionar o canvas ao container
qrcodeElement.innerHTML = '';
qrcodeElement.appendChild(canvas);
qrCodeGenerated = true;
console.log('[QR] QR Code generated successfully with bwip-js');
} catch (error) {
console.error('Error generating QR Code:', error);
qrcodeElement.innerHTML = '<p class="text-danger small">Erro ao gerar QR Code</p>';
qrCodeGenerated = false; // Reset on error so it can retry
console.error('[QR] Error generating QR Code with bwip-js:', error);
qrcodeElement.innerHTML = '<p class="text-danger small">Erro ao gerar QR Code. Consulte o console para detalhes.</p>';
qrCodeGenerated = false;
}
}