103 lines
4.3 KiB
Text
103 lines
4.3 KiB
Text
===============================================================
|
|
QR CODES — IMPLEMENTACION (commit 54ad8a1)
|
|
===============================================================
|
|
|
|
OBJETIVO:
|
|
Añadir QR codes en 3 lugares de la app:
|
|
1. Invites de tribes (privados y publicos)
|
|
2. Invites de pubs SSB
|
|
3. Perfil de usuario (ID SSB como QR para compartir y recibir apoyo)
|
|
|
|
LIBRERIA USADA:
|
|
qrcode ^1.5.4 (ya estaba en package.json, usada en wallet_view.js)
|
|
Path de require: require('../server/node_modules/qrcode')
|
|
Metodo: QRCode.toString(data, { type: 'svg' }) -> devuelve SVG como string
|
|
Render: div({ class: 'qr-code', innerHTML: svgString })
|
|
|
|
--------------------------------------------------------------
|
|
1. TRIBE INVITES — tribes_view.js
|
|
--------------------------------------------------------------
|
|
ARCHIVO: nodejs-project/nodejs-project/src/views/tribes_view.js
|
|
|
|
CAMBIOS:
|
|
- Añadido: const QRCode = require('../server/node_modules/qrcode');
|
|
- renderInvitePage() convertida a async
|
|
- Genera QR del inviteCode y lo muestra bajo el texto del codigo
|
|
|
|
FLUJO:
|
|
Backend: POST /tribes/generate-invite
|
|
-> tribesModel.generateInvite(tribeId) -> devuelve inviteCode (string)
|
|
-> renderInvitePage(inviteCode) -> muestra codigo + QR
|
|
Backend ya tenia: ctx.body = await renderInvitePage(...)
|
|
|
|
ANTES:
|
|
exports.renderInvitePage = (inviteCode) => { ... }
|
|
|
|
DESPUES:
|
|
exports.renderInvitePage = async (inviteCode) => {
|
|
const qrSvg = inviteCode ? await QRCode.toString(inviteCode, { type: 'svg' }) : '';
|
|
// muestra h2 + p con el codigo + div con QR SVG
|
|
}
|
|
|
|
--------------------------------------------------------------
|
|
2. PUB INVITES — invites_view.js
|
|
--------------------------------------------------------------
|
|
ARCHIVO: nodejs-project/nodejs-project/src/views/invites_view.js
|
|
|
|
CAMBIOS:
|
|
- Añadido: const QRCode = require('../server/node_modules/qrcode');
|
|
- invitesView() convertida a async
|
|
- El bloque snhInvite (caja con invite code del pub) ahora incluye QR
|
|
|
|
CONTEXTO:
|
|
snhInvite se carga desde: src/configs/snh-invite-code.json
|
|
Estructura: { name: string, code: string }
|
|
El QR se genera del campo snhInvite.code
|
|
|
|
RUTA: GET /invites -> ctx.body = await invitesView({})
|
|
(backend.js linea 1406 ya tenia await)
|
|
|
|
--------------------------------------------------------------
|
|
3. PERFIL DE USUARIO — inhabitants_view.js
|
|
--------------------------------------------------------------
|
|
ARCHIVO: nodejs-project/nodejs-project/src/views/inhabitants_view.js
|
|
|
|
CAMBIOS:
|
|
- Añadido: const QRCode = require('../server/node_modules/qrcode');
|
|
- renderInhabitantCard() convertida a async
|
|
-> QR solo se genera para el propio usuario (isMe === true)
|
|
-> Aparece debajo del ID SSB en la lista de inhabitants
|
|
- inhabitantsView() convertida a async
|
|
-> Usa Promise.all() para renderizar las cards async
|
|
- inhabitantsProfileView() convertida a async
|
|
-> QR se genera SIEMPRE (para cualquier perfil visitado)
|
|
-> Aparece en el bloque inhabitant-left junto al avatar y karma
|
|
|
|
RUTAS:
|
|
GET /inhabitants -> inhabitantsView (lista de usuarios)
|
|
GET /author/:id -> inhabitantsProfileView (perfil individual)
|
|
Ambas ya tenian await en backend.js (lineas 1051 y 1066)
|
|
|
|
ID SSB formato: @<base64>.ed25519
|
|
Ejemplo: @abc123...==.ed25519
|
|
|
|
--------------------------------------------------------------
|
|
4. CSS — style.css
|
|
--------------------------------------------------------------
|
|
ARCHIVO: nodejs-project/nodejs-project/src/client/assets/styles/style.css
|
|
|
|
CLASES AÑADIDAS al final del archivo:
|
|
.qr-code svg -> max-width 200px, centrado
|
|
.qr-code-inline svg -> max-width 140px (en lista inhabitants)
|
|
.qr-code-profile svg -> max-width 160px (en perfil)
|
|
.user-id-qr -> flex column, para agrupar ID + QR
|
|
.user-id-label -> estilo del texto del ID (monospace pequeño)
|
|
.invite-code-text -> estilo del codigo de invite (monospace, fondo sutil)
|
|
|
|
--------------------------------------------------------------
|
|
PENDIENTE / POSIBLES MEJORAS:
|
|
--------------------------------------------------------------
|
|
- Añadir QR tambien en la vista de cada tribe individual (para compartir la URL)
|
|
- Permitir escanear QR directamente desde la app (necesita camara nativa)
|
|
- Añadir boton "copiar codigo" junto al QR de invite
|
|
- QR para pubs individuales en la tabla de pubs activos
|