/**
* 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 = '
📐 Forme Personalizzate & Preferiti
Configura forme salvate per l'editor PDF
Crea Nuova Forma Personalizzata
${shapes.length > 0 ? shapes.map(sh => `
${(() => {
const st = sh.shape_type;
const fill = sh.fill_color === 'transparent' ? 'none' : sh.fill_color;
const stroke = sh.border_color || '#3b82f6';
const sw = sh.border_width || 3;
if (st === 'circle') {
return `
`;
} else if (st === 'line') {
return `
`;
} else if (st === 'arrow') {
return `
`;
} else {
return `
`;
}
})()}
${App.escapeHtml(sh.name)}
${sh.shape_type === 'circle' ? 'Cerchio' : sh.shape_type === 'line' ? 'Linea' : sh.shape_type === 'arrow' ? 'Freccia' : '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.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-user-shape');
if (btnSaveShape) {
btnSaveShape.addEventListener('click', async () => {
const name = container.querySelector('#user-shape-name').value.trim();
const shapeType = container.querySelector('#user-shape-type').value;
const fillColor = container.querySelector('#user-shape-fill').value;
const borderColor = container.querySelector('#user-shape-border').value;
const borderWidth = parseInt(container.querySelector('#user-shape-width').value || 3, 10);
const isFavorite = container.querySelector('#user-shape-fav').checked;
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: isFavorite ? 1 : 0
})
});
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');
const checkDefault = container.querySelector('#user-sig-default');
if (btnSave && inputFile) {
btnSave.addEventListener('click', async () => {
const name = inputName.value.trim();
const file = inputFile.files[0];
const isDefault = checkDefault ? checkDefault.checked : false;
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,
is_default: isDefault ? 1 : 0
})
});
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-default-sig').forEach(btn => {
btn.addEventListener('click', async (e) => {
e.stopPropagation();
try {
await App.api(`/api/config/user-signatures/${btn.dataset.id}/set-default`, { method: 'PUT' });
Toast.success('Firma predefinita aggiornata!');
this.render();
} catch (err) {
Toast.error('Errore aggiornamento firma predefinita: ' + err.message);
}
});
});
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);
}
}
});
});
}
};