fusionDev1Dev3
This commit is contained in:
parent
4ff2965b49
commit
3a851d1b62
@ -5,7 +5,7 @@
|
||||
"main": "dist/index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"build_wasm": "wasm-pack build --out-dir ../ihm_client/pkg ../sdk_client --target bundler --dev",
|
||||
"build_wasm": "wasm-pack build --out-dir ../ihm_client_dev1/pkg ../sdk_client --target bundler --dev",
|
||||
"start": "vite --host 0.0.0.0",
|
||||
"build": "tsc && vite build",
|
||||
"deploy": "sudo cp -r dist/* /var/www/html/",
|
||||
|
||||
@ -599,7 +599,7 @@ body {
|
||||
margin-top: 9vh;
|
||||
margin-left: -1%;
|
||||
text-align: left;
|
||||
width: 209vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
/* Liste des information sur l'account */
|
||||
@ -1364,3 +1364,62 @@ body {
|
||||
border-radius: 50%;
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
/* ---------------------Style pour le QR code--------------------- */
|
||||
|
||||
.qr-code {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.qr-code:hover {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.qr-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.qr-modal-content {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.close-qr-modal {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 5px;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.close-qr-modal:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.qr-code-large {
|
||||
max-width: 300px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.qr-address {
|
||||
margin-top: 10px;
|
||||
word-break: break-all;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ declare global {
|
||||
interface Window {
|
||||
initAccount: () => void;
|
||||
showContractPopup: (contractId: string) => void;
|
||||
showPairing: () => void;
|
||||
showPairing: () => Promise<void>;
|
||||
showWallet: () => void;
|
||||
showData: () => void;
|
||||
addWalletRow: () => void;
|
||||
@ -36,6 +36,7 @@ declare global {
|
||||
generateRecoveryWords: () => string[];
|
||||
exportUserData: () => void;
|
||||
updateActionButtons: () => void;
|
||||
showQRCodeModal: (address: string) => void;
|
||||
}
|
||||
}
|
||||
|
||||
@ -45,6 +46,7 @@ import { Row, WalletRow, DataRow, Notification, Contract, NotificationMessage }
|
||||
import { addressToEmoji } from '../../utils/sp-address.utils';
|
||||
import { getCorrectDOM } from '../../utils/document.utils';
|
||||
import accountStyle from '../../../public/style/account.css?inline';
|
||||
import Services from '../../services/service';
|
||||
|
||||
let isAddingRow = false;
|
||||
let currentRow: HTMLTableRowElement | null = null;
|
||||
@ -197,6 +199,7 @@ class AccountElement extends HTMLElement {
|
||||
window.updateActionButtons = () => this.updateActionButtons();
|
||||
window.openAvatarPopup = () => this.openAvatarPopup();
|
||||
window.closeAvatarPopup = () => this.closeAvatarPopup();
|
||||
window.showQRCodeModal = (address: string) => this.showQRCodeModal(address);
|
||||
|
||||
if (!localStorage.getItem('rows')) {
|
||||
localStorage.setItem('rows', JSON.stringify(defaultRows));
|
||||
@ -552,6 +555,13 @@ private updateTableContent(rows: Row[]): void {
|
||||
<td>${row.column1}</td>
|
||||
<td class="device-name" onclick="window.editDeviceName(this)">${row.column2}</td>
|
||||
<td>${row.column3}</td>
|
||||
<td>
|
||||
<img src="https://api.qrserver.com/v1/create-qr-code/?size=50x50&data=${encodeURIComponent(row.column1)}"
|
||||
alt="QR Code"
|
||||
title="${row.column1}"
|
||||
class="qr-code"
|
||||
onclick="window.showQRCodeModal('${encodeURIComponent(row.column1)}')">
|
||||
</td>
|
||||
<td>
|
||||
<button class="delete-button" onclick="window.deleteRow(this)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="16" height="16" fill="red">
|
||||
@ -627,29 +637,26 @@ private deleteRow(button: HTMLButtonElement): void {
|
||||
const table = row.closest('tbody');
|
||||
if (!table) return;
|
||||
|
||||
// Vérifier le nombre de lignes restantes
|
||||
const remainingRows = table.getElementsByTagName('tr').length;
|
||||
if (remainingRows <= 2) {
|
||||
this.showAlert('You must keep at least 2 devices paired');
|
||||
return;
|
||||
}
|
||||
|
||||
// Animation de suppression
|
||||
row.style.transition = 'opacity 0.3s';
|
||||
const index = Array.from(table.children).indexOf(row);
|
||||
row.style.transition = 'opacity 0.3s, transform 0.3s';
|
||||
row.style.opacity = '0';
|
||||
row.style.transform = 'translateX(-100%)';
|
||||
|
||||
setTimeout(() => {
|
||||
// Obtenir l'index avant la suppression
|
||||
const index = Array.from(table.children).indexOf(row);
|
||||
|
||||
// Supprimer la ligne du DOM
|
||||
row.remove();
|
||||
|
||||
// Mettre à jour le localStorage
|
||||
const storageKey = STORAGE_KEYS[currentMode];
|
||||
const rows = JSON.parse(localStorage.getItem(storageKey) || '[]');
|
||||
rows.splice(index, 1);
|
||||
localStorage.setItem(storageKey, JSON.stringify(rows));
|
||||
if (index > -1) {
|
||||
rows.splice(index, 1);
|
||||
localStorage.setItem(storageKey, JSON.stringify(rows));
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
|
||||
@ -887,9 +894,6 @@ private showContractPopup(contractId: string) {
|
||||
});
|
||||
}
|
||||
|
||||
// Ajouter à l'objet window
|
||||
|
||||
|
||||
// Fonction utilitaire pour cacher tous les contenus
|
||||
private hideAllContent(): void {
|
||||
const contents = ['pairing-content', 'wallet-content', 'process-content', 'data-content'];
|
||||
@ -902,29 +906,26 @@ private hideAllContent(): void {
|
||||
}
|
||||
|
||||
// Fonctions d'affichage des sections
|
||||
private showPairing(): void {
|
||||
private async showPairing(): Promise<void> {
|
||||
const service = await Services.getInstance();
|
||||
const spAddress = await service.getDeviceAddress();
|
||||
|
||||
isAddingRow = false;
|
||||
currentRow = null;
|
||||
|
||||
currentMode = 'pairing';
|
||||
// Cacher tous les contenus
|
||||
|
||||
this.hideAllContent();
|
||||
|
||||
// Mettre à jour le titre
|
||||
const headerElement = this.shadowRoot?.getElementById('parameter-header');
|
||||
if (headerElement) {
|
||||
headerElement.textContent = 'Pairing';
|
||||
}
|
||||
|
||||
|
||||
// Afficher le contenu de pairing
|
||||
const pairingContent = this.shadowRoot?.getElementById('pairing-content');
|
||||
|
||||
if (pairingContent) {
|
||||
pairingContent.style.display = 'block';
|
||||
pairingContent.innerHTML = `
|
||||
<div class="parameter-header" id="parameter-header">Pairing</div>
|
||||
<div class="parameter-header" id="parameter-header">Pairing</div>
|
||||
<div class="table-container">
|
||||
<table class="parameter-table" id="pairing-table">
|
||||
<thead>
|
||||
@ -932,7 +933,8 @@ private showPairing(): void {
|
||||
<th>SP Address</th>
|
||||
<th>Device Name</th>
|
||||
<th>SP Emojis</th>
|
||||
<th></th>
|
||||
<th>QR Code</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
@ -943,8 +945,46 @@ private showPairing(): void {
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Mettre à jour le contenu du tableau
|
||||
const rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.pairing) || '[]');
|
||||
let rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.pairing) || '[]');
|
||||
|
||||
const deviceExists = rows.some((row: Row) => row.column1 === spAddress);
|
||||
|
||||
if (!deviceExists && spAddress) {
|
||||
const emojis = await addressToEmoji(spAddress);
|
||||
|
||||
try {
|
||||
// Déboguer le processus de pairing
|
||||
const pairingProcessId = await service.getPairingProcessId();
|
||||
console.log('Pairing Process ID:', pairingProcessId);
|
||||
|
||||
const pairingProcess = await service.getProcess(pairingProcessId);
|
||||
console.log('Pairing Process:', pairingProcess);
|
||||
|
||||
const userName = pairingProcess?.states?.[0]?.metadata?.userName
|
||||
|| pairingProcess?.states?.[0]?.metadata?.name
|
||||
|| localStorage.getItem('userName')
|
||||
|
||||
console.log('Username found:', userName);
|
||||
|
||||
const newRow = {
|
||||
column1: spAddress,
|
||||
column2: userName,
|
||||
column3: emojis
|
||||
};
|
||||
rows = [newRow, ...rows];
|
||||
localStorage.setItem(STORAGE_KEYS.pairing, JSON.stringify(rows));
|
||||
} catch (error) {
|
||||
console.error('Error getting pairing process:', error);
|
||||
const newRow = {
|
||||
column1: spAddress,
|
||||
column2: 'This Device',
|
||||
column3: emojis
|
||||
};
|
||||
rows = [newRow, ...rows];
|
||||
localStorage.setItem(STORAGE_KEYS.pairing, JSON.stringify(rows));
|
||||
}
|
||||
}
|
||||
|
||||
this.updateTableContent(rows);
|
||||
}
|
||||
}
|
||||
@ -1419,6 +1459,28 @@ private initializeEventListeners() {
|
||||
avatarInput.addEventListener('change', this.handleAvatarUpload.bind(this));
|
||||
}
|
||||
}
|
||||
|
||||
private showQRCodeModal(address: string): void {
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'qr-modal';
|
||||
modal.innerHTML = `
|
||||
<div class="qr-modal-content">
|
||||
<span class="close-qr-modal">×</span>
|
||||
<img src="https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${address}"
|
||||
alt="QR Code Large"
|
||||
class="qr-code-large">
|
||||
<div class="qr-address">${decodeURIComponent(address)}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
this.shadowRoot?.appendChild(modal);
|
||||
|
||||
const closeBtn = modal.querySelector('.close-qr-modal');
|
||||
closeBtn?.addEventListener('click', () => modal.remove());
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target === modal) modal.remove();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('account-element', AccountElement);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user