/** * userConfig.js * User Configurations View: Upload, preview and manage custom signature images stored in SQLite. */ const UserConfigView = { async render() { const container = document.getElementById('view-container'); container.innerHTML = '

Caricamento configurazioni utente...

'; const titleEl = document.getElementById('page-title'); if (titleEl) { titleEl.textContent = 'Configurazioni Utente'; } try { const [signatures, shapes] = await Promise.all([ App.api('/api/config/user-signatures'), App.api('/api/config/user-shapes') ]); this.renderUI(container, signatures, shapes); } catch (err) { container.innerHTML = `
⚠️
Errore caricamento configurazioni utente
${App.escapeHtml(err.message)}
`; } }, renderUI(container, signatures = [], shapes = []) { container.innerHTML = `
📐 Forme Personalizzate & Preferiti Configura forme salvate per l'editor PDF

Crea Nuova Forma Personalizzata

${shapes.length > 0 ? shapes.map(sh => `
${App.escapeHtml(sh.name)}
${sh.shape_type === 'circle' ? 'Cerchio' : 'Rettangolo'} • Bordo ${sh.border_width}px
`).join('') : `
Nessuna forma personalizzata salvata.
`}
✍️ Immagini e Firme Utente Saranno disponibili per l'apposizione rapida sui PDF

Aggiungi nuova immagine / firma

${signatures.length > 0 ? signatures.map(sig => `
${App.escapeHtml(sig.name)}
${App.escapeHtml(sig.name)}
${App.formatDateTime(sig.created_at)}
`).join('') : `
Nessuna firma salvata. Carica la prima immagine con il modulo qui sopra.
`}
`; this.bindEvents(container); }, bindEvents(container) { // Shapes handlers const btnSaveShape = container.querySelector('#btn-save-shape'); if (btnSaveShape) { btnSaveShape.addEventListener('click', async () => { const name = container.querySelector('#shape-name').value.trim(); const shapeType = container.querySelector('#shape-type').value; const isTransparent = container.querySelector('#shape-transparent-fill').checked; const fillColor = isTransparent ? 'transparent' : container.querySelector('#shape-fill-color').value; const borderColor = container.querySelector('#shape-border-color').value; const borderWidth = parseInt(container.querySelector('#shape-border-width').value || 3, 10); if (!name) { Toast.warning('Inserisci un nome per la forma.'); return; } try { btnSaveShape.disabled = true; await App.api('/api/config/user-shapes', { method: 'POST', body: JSON.stringify({ name, shape_type: shapeType, fill_color: fillColor, border_color: borderColor, border_width: borderWidth, is_favorite: 1 }) }); Toast.success('Forma salvata!'); this.render(); } catch (err) { Toast.error('Errore salvataggio forma: ' + err.message); btnSaveShape.disabled = false; } }); } container.querySelectorAll('.btn-fav-shape').forEach(btn => { btn.addEventListener('click', async (e) => { e.stopPropagation(); try { await App.api(`/api/config/user-shapes/${btn.dataset.id}/toggle-favorite`, { method: 'PUT' }); this.render(); } catch (err) { Toast.error('Errore aggiornamento preferiti: ' + err.message); } }); }); container.querySelectorAll('.btn-delete-shape').forEach(btn => { btn.addEventListener('click', async (e) => { e.stopPropagation(); const ok = await App.confirm('Elimina Forma', 'Eliminare questa forma personalizzata?', { confirmText: 'Elimina', cancelText: 'Annulla' }); if (ok) { try { await App.api(`/api/config/user-shapes/${btn.dataset.id}`, { method: 'DELETE' }); Toast.success('Forma eliminata!'); this.render(); } catch (err) { Toast.error('Errore eliminazione: ' + err.message); } } }); }); // Signatures handlers const btnSave = container.querySelector('#btn-save-user-sig'); const inputName = container.querySelector('#user-sig-name'); const inputFile = container.querySelector('#user-sig-file'); if (btnSave && inputFile) { btnSave.addEventListener('click', async () => { const name = inputName.value.trim(); const file = inputFile.files[0]; if (!name) { Toast.warning('Inserisci un nome descrittivo per la firma/immagine.'); return; } if (!file) { Toast.warning('Seleziona un file immagine.'); return; } const reader = new FileReader(); reader.onload = async () => { const base64Data = reader.result; try { btnSave.disabled = true; btnSave.textContent = 'Salvataggio...'; const res = await App.api('/api/config/user-signatures', { method: 'POST', body: JSON.stringify({ name, image_data: base64Data }) }); Toast.success(res.message || 'Firma salvata!'); this.render(); } catch (err) { Toast.error('Errore durante il salvataggio: ' + err.message); btnSave.disabled = false; btnSave.textContent = '➕ Salva in SQLite'; } }; reader.readAsDataURL(file); }); } container.querySelectorAll('.btn-delete-sig').forEach(btn => { btn.addEventListener('click', async (e) => { e.stopPropagation(); const id = btn.dataset.id; const ok = await App.confirm('Elimina Firma', 'Sei sicuro di voler eliminare questa firma dal database?', { confirmText: 'Elimina', cancelText: 'Annulla' }); if (ok) { try { await App.api(`/api/config/user-signatures/${id}`, { method: 'DELETE' }); Toast.success('Firma eliminata!'); this.render(); } catch (err) { Toast.error('Errore eliminazione: ' + err.message); } } }); }); } };