4nk/ihm_client
5
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor loadAllMembers

Browse Source
This commit is contained in:
NicolasCantu 2025-03-03 19:03:19 +01:00
parent e566c17a9a
commit 38b5567b68
1 changed files with 70 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/pages/chat/chat.ts
View File

@ -423,106 +423,123 @@ class ChatElement extends HTMLElement {
const service = await Services.getInstance();
const members = await service.getAllMembers();
const database = await Database.getInstance();
const db = database.db;
const processes = await service.getProcesses();
const memberList = document.createElement('ul');
memberList.className = 'member-list active';
const prioritizedMembers: [string, any][] = [];
const remainingMembers: [string, any][] = [];
// Partition members into prioritized and remaining arrays.
const prioritizedMembers: [string, Member][] = [];
const remainingMembers: [string, Member][] = [];
for (const [processId, member] of Object.entries(members)) {
if (this.dmMembersSet.has(processId)) {
prioritizedMembers.push([processId, member]);
prioritizedMembers.push([processId, member]);
} else {
remainingMembers.push([processId, member]);
remainingMembers.push([processId, member]);
}
}
const sortedMembers = prioritizedMembers.concat(remainingMembers);
for (const [processId, member] of sortedMembers) {
// Process each member.
for (const [processId, member] of sortedMembers) {
const memberItem = document.createElement('li');
memberItem.className = 'member-item';
// Apply special styling if the member is prioritized.
if (this.dmMembersSet.has(processId)) {
memberItem.style.cssText = `
background-color: var(--accent-color);
transition: background-color 0.3s ease;
cursor: pointer;
`;
memberItem.onmouseover = () => {
memberItem.style.backgroundColor = 'var(--accent-color-hover)';
};
memberItem.onmouseout = () => {
memberItem.style.backgroundColor = 'var(--accent-color)';
};
memberItem.style.cssText = `
background-color: var(--accent-color);
transition: background-color 0.3s ease;
cursor: pointer;
`;
memberItem.addEventListener('mouseover', () => {
memberItem.style.backgroundColor = 'var(--accent-color-hover)';
});
memberItem.addEventListener('mouseout', () => {
memberItem.style.backgroundColor = 'var(--accent-color)';
});
}
// Create a container for the member content.
const memberContainer = document.createElement('div');
memberContainer.className = 'member-container';
// Create the emoji span and load its label.
const emojiSpan = document.createElement('span');
emojiSpan.className = 'member-emoji';
const emojis = await addressToEmoji(processId);
emojiSpan.dataset.emojis = emojis;
const transaction = db.transaction("labels", "readonly");
const store = transaction.objectStore("labels");
const request = store.get(emojis);
request.onsuccess = () => {
const label = request.result;
emojiSpan.textContent = label ? `${label.label} (${emojis})` : `Member (${emojis})`;
};
request.onerror = () => {
emojiSpan.textContent = `Member (${emojis})`;
};
// Get the member name, if any, and add it to the display
const process = processes[processId];
let memberPublicName;
if (process) {
const publicMemberData = service.getPublicData(process);
if (publicMemberData) {
const extractedName = publicMemberData['memberPublicName'];
if (extractedName !== undefined && extractedName !== null) {
memberPublicName = extractedName;
}
}
}
if (!memberPublicName) {
memberPublicName = 'Unnamed Member';
}
emojiSpan.textContent = `${memberPublicName} (${emojis})`
memberContainer.appendChild(emojiSpan);
memberItem.appendChild(memberContainer);
// Add click handler to load member chat.
memberItem.addEventListener('click', async () => {
await this.loadMemberChat(processId);
await this.loadMemberChat(processId);
});
// Create and configure the edit label button.
const editLabelButton = document.createElement('button');
editLabelButton.className = 'edit-label-button';
editLabelButton.textContent = "✏️";
editLabelButton.addEventListener("click", (event) => {
event.stopPropagation();
});
editLabelButton.addEventListener("dblclick", async (event) => {
event.stopPropagation();
event.preventDefault();
const newLabel = prompt("Set a new name for the member:");
if (!newLabel) return;
const editTransaction = db.transaction("labels", "readwrite");
const editStore = editTransaction.objectStore("labels");
const labelObject = { emoji: emojis, label: newLabel };
const putRequest = editStore.put(labelObject);
putRequest.onsuccess = () => {
emojiSpan.textContent = `${newLabel} : ${emojis}`;
this.reloadMemberChat(processId);
};
const db = await Database.getInstance();
this.updateLabelForEmoji(emojis, newLabel, db, emojiSpan, processId);
});
memberList.appendChild(memberItem);
memberContainer.appendChild(editLabelButton);
memberList.appendChild(memberItem);
}
groupList.appendChild(memberList);
}
// Helper function to update a label in IndexedDB.
private updateLabelForEmoji(
emojis: string,
newLabel: string,
db: IDBDatabase,
emojiSpan: HTMLElement,
processId: string
) {
const transaction = db.transaction("labels", "readwrite");
const store = transaction.objectStore("labels");
const labelObject = { emoji: emojis, label: newLabel };
const request = store.put(labelObject);
request.onsuccess = () => {
emojiSpan.textContent = `${newLabel} : ${emojis}`;
this.reloadMemberChat(processId);
};
}
private async lookForDmProcess(): Promise<string | null> {
const service = await Services.getInstance();
const processes = await service.getMyProcesses();