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

fix: Suppression du message redondant et correction de l'erreur populateMemberSelect

Browse Source 
- Suppression du message 'You are creating a new pairing session' redondant
- Suppression de l'appel à populateMemberSelect() qui cherchait un élément inexistant
- Interface plus épurée et sans erreurs de console
This commit is contained in:
NicolasCantu 2025-10-22 15:41:24 +02:00
parent 3258b16a6e
commit 50f782908d
4 changed files with 31 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/pages/home/home.html
View File

@ -5,11 +5,10 @@
<div class="pairing-container"> <div class="pairing-container">
<!-- Creator Flow --> <!-- Creator Flow -->
<div id="creator-flow" class="card pairing-card" style="display: none;"> <div id="creator-flow" class="card pairing-card" style="display: none;">
<div class="card-header"> <div class="card-header">
<h2>🔐 Create New Pairing</h2> <h2>🔐 Create New Pairing</h2>
<p class="card-description">You are creating a new pairing session</p> </div>
</div>
<div class="pairing-request"></div> <div class="pairing-request"></div>

31
src/pages/home/home.ts
View File

@ -10,7 +10,7 @@ import { navigate, registerAllListeners } from '../../router';
function showHomeLoadingSpinner(message: string = 'Loading...') { function showHomeLoadingSpinner(message: string = 'Loading...') {
// Remove existing spinner if any // Remove existing spinner if any
hideHomeLoadingSpinner(); hideHomeLoadingSpinner();
// Create spinner overlay // Create spinner overlay
const overlay = document.createElement('div'); const overlay = document.createElement('div');
overlay.id = 'home-loading-overlay'; overlay.id = 'home-loading-overlay';
@ -28,7 +28,7 @@ function showHomeLoadingSpinner(message: string = 'Loading...') {
z-index: 9998; z-index: 9998;
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
`; `;
// Create spinner content // Create spinner content
const spinnerContent = document.createElement('div'); const spinnerContent = document.createElement('div');
spinnerContent.style.cssText = ` spinnerContent.style.cssText = `
@ -41,7 +41,7 @@ function showHomeLoadingSpinner(message: string = 'Loading...') {
max-width: 350px; max-width: 350px;
width: 90%; width: 90%;
`; `;
// Create spinner // Create spinner
const spinner = document.createElement('div'); const spinner = document.createElement('div');
spinner.style.cssText = ` spinner.style.cssText = `
@ -53,7 +53,7 @@ function showHomeLoadingSpinner(message: string = 'Loading...') {
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
margin: 0 auto 15px auto; margin: 0 auto 15px auto;
`; `;
// Create message // Create message
const messageEl = document.createElement('div'); const messageEl = document.createElement('div');
messageEl.textContent = message; messageEl.textContent = message;
@ -62,7 +62,7 @@ function showHomeLoadingSpinner(message: string = 'Loading...') {
color: #3a506b; color: #3a506b;
font-weight: 500; font-weight: 500;
`; `;
// Add CSS animation if not already present // Add CSS animation if not already present
if (!document.getElementById('home-spinner-styles')) { if (!document.getElementById('home-spinner-styles')) {
const style = document.createElement('style'); const style = document.createElement('style');
@ -75,12 +75,12 @@ function showHomeLoadingSpinner(message: string = 'Loading...') {
`; `;
document.head.appendChild(style); document.head.appendChild(style);
} }
// Assemble spinner // Assemble spinner
spinnerContent.appendChild(spinner); spinnerContent.appendChild(spinner);
spinnerContent.appendChild(messageEl); spinnerContent.appendChild(messageEl);
overlay.appendChild(spinnerContent); overlay.appendChild(spinnerContent);
// Add to document // Add to document
document.body.appendChild(overlay); document.body.appendChild(overlay);
} }
@ -95,10 +95,10 @@ function hideHomeLoadingSpinner() {
export { QrScannerComponent }; export { QrScannerComponent };
export async function initHomePage(): Promise<void> { export async function initHomePage(): Promise<void> {
console.log('INIT-HOME'); console.log('INIT-HOME');
// Show loading spinner during home page initialization // Show loading spinner during home page initialization
showHomeLoadingSpinner('Initializing pairing interface...'); showHomeLoadingSpinner('Initializing pairing interface...');
const container = getCorrectDOM('login-4nk-component') as HTMLElement; const container = getCorrectDOM('login-4nk-component') as HTMLElement;
container.querySelectorAll('.tab').forEach((tab) => { container.querySelectorAll('.tab').forEach((tab) => {
addSubscription(tab, 'click', () => { addSubscription(tab, 'click', () => {
@ -116,7 +116,7 @@ export async function initHomePage(): Promise<void> {
// generateQRCode(spAddress); // generateQRCode(spAddress);
generateCreateBtn(); generateCreateBtn();
displayEmojis(spAddress); displayEmojis(spAddress);
// Hide loading spinner after initialization // Hide loading spinner after initialization
hideHomeLoadingSpinner(); hideHomeLoadingSpinner();
} catch (error) { } catch (error) {
@ -124,9 +124,6 @@ export async function initHomePage(): Promise<void> {
hideHomeLoadingSpinner(); hideHomeLoadingSpinner();
throw error; throw error;
} }
// Add this line to populate the select when the page loads
await populateMemberSelect();
} }
//// Modal //// Modal
@ -153,7 +150,7 @@ function scanDevice() {
async function populateMemberSelect() { async function populateMemberSelect() {
const container = getCorrectDOM('login-4nk-component') as HTMLElement; const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const memberSelect = container.querySelector('#memberSelect') as HTMLSelectElement; const memberSelect = container.querySelector('#memberSelect') as HTMLSelectElement;
if (!memberSelect) { if (!memberSelect) {
console.error('Could not find memberSelect element'); console.error('Could not find memberSelect element');
return; return;
@ -165,7 +162,7 @@ async function populateMemberSelect() {
for (const [processId, member] of Object.entries(members)) { for (const [processId, member] of Object.entries(members)) {
const process = await service.getProcess(processId); const process = await service.getProcess(processId);
let memberPublicName; let memberPublicName;
if (process) { if (process) {
const publicMemberData = service.getPublicData(process); const publicMemberData = service.getPublicData(process);
if (publicMemberData) { if (publicMemberData) {
@ -175,14 +172,14 @@ async function populateMemberSelect() {
} }
} }
} }
if (!memberPublicName) { if (!memberPublicName) {
memberPublicName = 'Unnamed Member'; memberPublicName = 'Unnamed Member';
} }
// Récupérer les emojis pour ce processId // Récupérer les emojis pour ce processId
const emojis = await addressToEmoji(processId); const emojis = await addressToEmoji(processId);
const option = document.createElement('option'); const option = document.createElement('option');
option.value = processId; option.value = processId;
option.textContent = `${memberPublicName} (${emojis})`; option.textContent = `${memberPublicName} (${emojis})`;

24
src/services/service.ts
View File

@ -20,7 +20,7 @@ const DEFAULTAMOUNT = 1000n;
function showGlobalLoadingSpinner(message: string = 'Loading...') { function showGlobalLoadingSpinner(message: string = 'Loading...') {
// Remove existing spinner if any // Remove existing spinner if any
hideGlobalLoadingSpinner(); hideGlobalLoadingSpinner();
// Create spinner overlay // Create spinner overlay
const overlay = document.createElement('div'); const overlay = document.createElement('div');
overlay.id = 'global-loading-overlay'; overlay.id = 'global-loading-overlay';
@ -38,7 +38,7 @@ function showGlobalLoadingSpinner(message: string = 'Loading...') {
z-index: 9999; z-index: 9999;
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
`; `;
// Create spinner content // Create spinner content
const spinnerContent = document.createElement('div'); const spinnerContent = document.createElement('div');
spinnerContent.style.cssText = ` spinnerContent.style.cssText = `
@ -51,7 +51,7 @@ function showGlobalLoadingSpinner(message: string = 'Loading...') {
max-width: 400px; max-width: 400px;
width: 90%; width: 90%;
`; `;
// Create spinner // Create spinner
const spinner = document.createElement('div'); const spinner = document.createElement('div');
spinner.style.cssText = ` spinner.style.cssText = `
@ -63,7 +63,7 @@ function showGlobalLoadingSpinner(message: string = 'Loading...') {
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
margin: 0 auto 20px auto; margin: 0 auto 20px auto;
`; `;
// Create message // Create message
const messageEl = document.createElement('div'); const messageEl = document.createElement('div');
messageEl.textContent = message; messageEl.textContent = message;
@ -73,7 +73,7 @@ function showGlobalLoadingSpinner(message: string = 'Loading...') {
font-weight: 500; font-weight: 500;
margin-bottom: 10px; margin-bottom: 10px;
`; `;
// Create progress indicator // Create progress indicator
const progressEl = document.createElement('div'); const progressEl = document.createElement('div');
progressEl.textContent = 'Please wait...'; progressEl.textContent = 'Please wait...';
@ -81,7 +81,7 @@ function showGlobalLoadingSpinner(message: string = 'Loading...') {
font-size: 14px; font-size: 14px;
color: #666; color: #666;
`; `;
// Add CSS animation if not already present // Add CSS animation if not already present
if (!document.getElementById('global-spinner-styles')) { if (!document.getElementById('global-spinner-styles')) {
const style = document.createElement('style'); const style = document.createElement('style');
@ -94,13 +94,13 @@ function showGlobalLoadingSpinner(message: string = 'Loading...') {
`; `;
document.head.appendChild(style); document.head.appendChild(style);
} }
// Assemble spinner // Assemble spinner
spinnerContent.appendChild(spinner); spinnerContent.appendChild(spinner);
spinnerContent.appendChild(messageEl); spinnerContent.appendChild(messageEl);
spinnerContent.appendChild(progressEl); spinnerContent.appendChild(progressEl);
overlay.appendChild(spinnerContent); overlay.appendChild(spinnerContent);
// Add to document // Add to document
document.body.appendChild(overlay); document.body.appendChild(overlay);
} }
@ -149,16 +149,16 @@ export default class Services {
} }
console.log('initializing services'); console.log('initializing services');
// Show global loading spinner during initialization // Show global loading spinner during initialization
showGlobalLoadingSpinner('Initializing services...'); showGlobalLoadingSpinner('Initializing services...');
Services.instance = await Services.initializing; Services.instance = await Services.initializing;
Services.initializing = null; // Reset for potential future use Services.initializing = null; // Reset for potential future use
// Hide loading spinner after initialization // Hide loading spinner after initialization
hideGlobalLoadingSpinner(); hideGlobalLoadingSpinner();
return Services.instance; return Services.instance;
} }

2
src/utils/sp-address.utils.ts
View File

@ -421,7 +421,7 @@ function showLoadingState() {
const loadingFlow = container.querySelector('#loading-flow'); const loadingFlow = container.querySelector('#loading-flow');
const creatorFlow = container.querySelector('#creator-flow'); const creatorFlow = container.querySelector('#creator-flow');
const joinerFlow = container.querySelector('#joiner-flow'); const joinerFlow = container.querySelector('#joiner-flow');
if (loadingFlow) { if (loadingFlow) {
loadingFlow.style.display = 'block'; loadingFlow.style.display = 'block';
// Update loading message // Update loading message