counterweight/secajs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adding details much more elegant

Browse source
This commit is contained in:
counterweight 2025-02-13 23:16:07 +01:00
parent 2feb64e7e0
commit c30be04ba0
Signed by: counterweight
GPG key ID: 883EDBAA726BD96C
2 changed files with 95 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

59
src/public/javascript/createProfile.js
View file

@ -1,7 +1,55 @@
const contactDetails = []; class ContactDetails {
constructor(rootUiElement) {
this.rootUiElement = rootUiElement;
this.details = [];
}
addDetails(type, value) {
this.details.push({ type, value });
}
removeDetails(type, value) {
this.details = this.details.filter(detail => detail.type !== type || detail.value !== value);
}
syncUi() {
requestAnimationFrame(() => {
this.rootUiElement.innerHTML = '';
this.details.forEach((detail) => {
const addedDetailFragment = ContactDetails.buildContactDetailBadge(detail);
this.rootUiElement.appendChild(addedDetailFragment);
});
})
}
static buildContactDetailBadge(detail) {
const fragment = document.createDocumentFragment();
const div = document.createElement("div");
div.className = "added-contact-detail badge";
const p = document.createElement("p");
p.textContent = `${detail.type}: ${detail.value}`;
const button = document.createElement("button");
button.textContent = "Eliminar";
button.onclick = function () {
removeAddedContactDetail(this);
return false;
};
div.appendChild(p);
div.appendChild(button);
fragment.appendChild(div);
return fragment;
}
}
let contactDetails;
window.onload = () => { window.onload = () => {
const contactList = document.querySelector('.contact-list'); contactDetails = new ContactDetails(document.querySelector('#created-contact-details-list'));
document.querySelectorAll('.contact-detail-add-button').forEach(button => { document.querySelectorAll('.contact-detail-add-button').forEach(button => {
button.addEventListener('click', function () { button.addEventListener('click', function () {
@ -13,13 +61,10 @@ window.onload = () => {
if (value === '') return; // Ignore empty input if (value === '') return; // Ignore empty input
// Save new contact detail // Save new contact detail
contactDetails.push({ type, value }); contactDetails.addDetails(type, value);
// Create and display a non-editable badge // Create and display a non-editable badge
const newBadge = document.createElement('div'); contactDetails.syncUi();
newBadge.classList.add('contact-badge');
newBadge.innerText = `${type}: ${value}`;
contactList.appendChild(newBadge);
// Clear input field // Clear input field
input.value = ''; input.value = '';

83
src/views/createProfile.ejs
View file

@ -2,50 +2,53 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>Crear perfil</title> <title>Crear perfil</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/seca.css"> <link rel="stylesheet" href="/css/seca.css">
<script src="/javascript/createProfile.js"></script> <script src="/javascript/createProfile.js"></script>
</head> </head>
<body> <body>
<h1>Crea tu perfil</h1> <h1>Crea tu perfil</h1>
<p>Tu clave de Nostr ya es parte de la seca.</p> <p>Tu clave de Nostr ya es parte de la seca.</p>
<p>Añade detalles a tu perfil para poder empezar a comerciar.</p> <p>Añade detalles a tu perfil para poder empezar a comerciar.</p>
</p> </p>
<hr> <hr>
<form onsubmit="return false"> <form onsubmit="return false">
<label>Pseudónimo (Nym):<input type="text" name="nym" id="nym-input"></label> <label>Pseudónimo (Nym):<input type="text" name="nym" id="nym-input"></label>
<button id="submit-details-button" type="submit">Crear tu perfil</button> <button id="submit-details-button" type="submit">Crear tu perfil</button>
<div id="contacts"> <div id="contacts">
<p>Añade métodos de contacto para poder hablar con otros miembros.</p> <p>Añade métodos de contacto para poder hablar con otros miembros.</p>
<div class="badges"> <div class="badges">
<div class="badge" data-type="whatsapp">📱 Teléfono <input><button <div class="badge" data-type="whatsapp">📱 Teléfono <input><button
class="contact-detail-add-button">Añadir</button></div> class="contact-detail-add-button">Añadir</button></div>
<div class="badge" data-type="whatsapp">📱 WhatsApp <input><button <div class="badge" data-type="whatsapp">📱 WhatsApp <input><button
class="contact-detail-add-button">Añadir</button></div> class="contact-detail-add-button">Añadir</button></div>
<div class="badge" data-type="telegram">📩 Telegram <input><button <div class="badge" data-type="telegram">📩 Telegram <input><button
class="contact-detail-add-button"></button>>Añadir</button></div> class="contact-detail-add-button"></button>>Añadir</button></div>
<div class="badge" data-type="email">📧 Email <input><button <div class="badge" data-type="email">📧 Email <input><button
class="contact-detail-add-button">Añadir</button></div> class="contact-detail-add-button">Añadir</button></div>
<div class="badge" data-type="nostr">📧 Nostr <input><button <div class="badge" data-type="nostr">📧 Nostr <input><button
class="contact-detail-add-button">Añadir</button></div> class="contact-detail-add-button">Añadir</button></div>
<div class="badge" data-type="signal">📧 Signal <input><button <div class="badge" data-type="signal">📧 Signal <input><button
class="contact-detail-add-button">Añadir</button></div> class="contact-detail-add-button">Añadir</button></div>
<div class="badge" data-type="matrix">📧 Matrix <input><button <div class="badge" data-type="matrix">📧 Matrix <input><button
class="contact-detail-add-button">Añadir</button></div> class="contact-detail-add-button">Añadir</button></div>
<div class="badge" data-type="xmpp">📧 XMPP <input><button <div class="badge" data-type="xmpp">📧 XMPP <input><button
class="contact-detail-add-button">Añadir</button></div> class="contact-detail-add-button">Añadir</button></div>
<div class="badge" data-type="simplex">📧 Simplex <input><button <div class="badge" data-type="simplex">📧 Simplex <input><button
class="contact-detail-add-button">Añadir</button></div> class="contact-detail-add-button">Añadir</button></div>
</div> </div>
</div> </div>
<div class="contact-list"> <div id="created-contact-details-section">
<p>Contactos añadidos</p> <p>Contactos añadidos</p>
</div> <div id="created-contact-details-list">
</form>
</div>
</div>
</form>
</body> </body>
</html> </html>