From c30be04ba09db33939c6093176d78c1198a6e6e9 Mon Sep 17 00:00:00 2001 From: counterweight Date: Thu, 13 Feb 2025 23:16:07 +0100 Subject: [PATCH] adding details much more elegant --- src/public/javascript/createProfile.js | 59 +++++++++++++++--- src/views/createProfile.ejs | 83 +++++++++++++------------- 2 files changed, 95 insertions(+), 47 deletions(-) diff --git a/src/public/javascript/createProfile.js b/src/public/javascript/createProfile.js index fdf8fe0..03e2b2c 100644 --- a/src/public/javascript/createProfile.js +++ b/src/public/javascript/createProfile.js @@ -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 = () => { - const contactList = document.querySelector('.contact-list'); + contactDetails = new ContactDetails(document.querySelector('#created-contact-details-list')); document.querySelectorAll('.contact-detail-add-button').forEach(button => { button.addEventListener('click', function () { @@ -13,13 +61,10 @@ window.onload = () => { if (value === '') return; // Ignore empty input // Save new contact detail - contactDetails.push({ type, value }); + contactDetails.addDetails(type, value); // Create and display a non-editable badge - const newBadge = document.createElement('div'); - newBadge.classList.add('contact-badge'); - newBadge.innerText = `${type}: ${value}`; - contactList.appendChild(newBadge); + contactDetails.syncUi(); // Clear input field input.value = ''; diff --git a/src/views/createProfile.ejs b/src/views/createProfile.ejs index 2759d83..d491ae9 100644 --- a/src/views/createProfile.ejs +++ b/src/views/createProfile.ejs @@ -2,50 +2,53 @@ - Crear perfil - - - - + Crear perfil + + + + -

Crea tu perfil

-

Tu clave de Nostr ya es parte de la seca.

-

Añade detalles a tu perfil para poder empezar a comerciar.

-

-
-
- +

Crea tu perfil

+

Tu clave de Nostr ya es parte de la seca.

+

Añade detalles a tu perfil para poder empezar a comerciar.

+

+
+ + - -
-

Añade métodos de contacto para poder hablar con otros miembros.

-
-
📱 Teléfono
-
📱 WhatsApp
-
📩 Telegram >Añadir
-
📧 Email
-
📧 Nostr
-
📧 Signal
-
📧 Matrix
-
📧 XMPP
-
📧 Simplex
-
-
-
-

Contactos añadidos

-
-
+ +
+

Añade métodos de contacto para poder hablar con otros miembros.

+
+
📱 Teléfono
+
📱 WhatsApp
+
📩 Telegram >Añadir
+
📧 Email
+
📧 Nostr
+
📧 Signal
+
📧 Matrix
+
📧 XMPP
+
📧 Simplex
+
+
+
+

Contactos añadidos

+
+ +
+
+ \ No newline at end of file