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

add prettify to project

Browse Source
This commit is contained in:
AnisHADJARAB 2024-10-29 12:49:13 +00:00
parent 9e327f6c08
commit 29f09e92b7
13 changed files with 1867 additions and 1754 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.prettierignore Normal file
View File

@ -0,0 +1,5 @@
# Add files here to ignore them from prettier formatting
/dist
/coverage
/.nx/cache
.angular

14
.prettierrc Normal file
View File

@ -0,0 +1,14 @@
{
"printWidth": 300,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"quoteProps": "as-needed",
"trailingComma": "all",
"bracketSpacing": true,
"arrowParens": "always",
"requirePragma": false,
"insertPragma": false,
"endOfLine": "crlf"
}

135
package-lock.json generated
View File

@ -17,11 +17,13 @@
"vite": "^5.4.9", "vite": "^5.4.9",
"vite-plugin-copy": "^0.1.6", "vite-plugin-copy": "^0.1.6",
"vite-plugin-html": "^3.2.2", "vite-plugin-html": "^3.2.2",
"vite-plugin-terminal": "^1.2.0",
"vite-plugin-wasm": "^3.3.0" "vite-plugin-wasm": "^3.3.0"
}, },
"devDependencies": { "devDependencies": {
"copy-webpack-plugin": "^12.0.2", "copy-webpack-plugin": "^12.0.2",
"html-webpack-plugin": "^5.6.0", "html-webpack-plugin": "^5.6.0",
"prettier": "^3.3.3",
"ts-loader": "^9.5.1", "ts-loader": "^9.5.1",
"typescript": "^5.3.3", "typescript": "^5.3.3",
"vite-plugin-static-copy": "^1.0.6", "vite-plugin-static-copy": "^1.0.6",
@ -902,6 +904,56 @@
"node": ">=14" "node": ">=14"
} }
}, },
"node_modules/@polka/url": {
"version": "1.0.0-next.28",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
"integrity": "sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==",
"license": "MIT"
},
"node_modules/@rollup/plugin-strip": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@rollup/plugin-strip/-/plugin-strip-3.0.4.tgz",
"integrity": "sha512-LDRV49ZaavxUo2YoKKMQjCxzCxugu1rCPQa0lDYBOWLj6vtzBMr8DcoJjsmg+s450RbKbe3qI9ZLaSO+O1oNbg==",
"license": "MIT",
"dependencies": {
"@rollup/pluginutils": "^5.0.1",
"estree-walker": "^2.0.2",
"magic-string": "^0.30.3"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
},
"peerDependenciesMeta": {
"rollup": {
"optional": true
}
}
},
"node_modules/@rollup/plugin-strip/node_modules/@rollup/pluginutils": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.2.tgz",
"integrity": "sha512-/FIdS3PyZ39bjZlwqFnWqCOVnW7o963LtKMwQOD0NhQqw22gSr2YY1afu3FxRip4ZCZNsD5jq6Aaz6QV3D/Njw==",
"license": "MIT",
"dependencies": {
"@types/estree": "^1.0.0",
"estree-walker": "^2.0.2",
"picomatch": "^2.3.1"
},
"engines": {
"node": ">=14.0.0"
},
"peerDependencies": {
"rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
},
"peerDependenciesMeta": {
"rollup": {
"optional": true
}
}
},
"node_modules/@rollup/pluginutils": { "node_modules/@rollup/pluginutils": {
"version": "4.2.1", "version": "4.2.1",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@ -4136,6 +4188,12 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/kolorist": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.8.0.tgz",
"integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==",
"license": "MIT"
},
"node_modules/launch-editor": { "node_modules/launch-editor": {
"version": "2.8.0", "version": "2.8.0",
"resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.8.0.tgz", "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.8.0.tgz",
@ -4192,7 +4250,6 @@
"version": "0.30.10", "version": "0.30.10",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
"integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==", "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
"peer": true,
"dependencies": { "dependencies": {
"@jridgewell/sourcemap-codec": "^1.4.15" "@jridgewell/sourcemap-codec": "^1.4.15"
} }
@ -4334,6 +4391,15 @@
"node": ">=16 || 14 >=14.17" "node": ">=16 || 14 >=14.17"
} }
}, },
"node_modules/mrmime": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
"integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
"license": "MIT",
"engines": {
"node": ">=10"
}
},
"node_modules/ms": { "node_modules/ms": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -4739,6 +4805,22 @@
"node": "^10 || ^12 || >=14" "node": "^10 || ^12 || >=14"
} }
}, },
"node_modules/prettier": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
"integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
"dev": true,
"license": "MIT",
"bin": {
"prettier": "bin/prettier.cjs"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/pretty-error": { "node_modules/pretty-error": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz", "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-4.0.0.tgz",
@ -5430,6 +5512,20 @@
"integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
"dev": true "dev": true
}, },
"node_modules/sirv": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
"integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
"license": "MIT",
"dependencies": {
"@polka/url": "^1.0.0-next.24",
"mrmime": "^2.0.0",
"totalist": "^3.0.0"
},
"engines": {
"node": ">= 10"
}
},
"node_modules/slash": { "node_modules/slash": {
"version": "5.1.0", "version": "5.1.0",
"resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz", "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
@ -5808,6 +5904,15 @@
"node": ">=0.6" "node": ">=0.6"
} }
}, },
"node_modules/totalist": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
"license": "MIT",
"engines": {
"node": ">=6"
}
},
"node_modules/tree-dump": { "node_modules/tree-dump": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/tree-dump/-/tree-dump-1.0.2.tgz", "resolved": "https://registry.npmjs.org/tree-dump/-/tree-dump-1.0.2.tgz",
@ -5966,6 +6071,12 @@
"node": ">=14.17" "node": ">=14.17"
} }
}, },
"node_modules/ufo": {
"version": "1.5.4",
"resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.4.tgz",
"integrity": "sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==",
"license": "MIT"
},
"node_modules/undici-types": { "node_modules/undici-types": {
"version": "5.26.5", "version": "5.26.5",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
@ -6201,6 +6312,28 @@
"node": ">=14.14" "node": ">=14.14"
} }
}, },
"node_modules/vite-plugin-terminal": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/vite-plugin-terminal/-/vite-plugin-terminal-1.2.0.tgz",
"integrity": "sha512-IIw1V+IySth8xlrGmH4U7YmfTp681vTzYpa7b8A3KNCJ2oW1BGPPwW8tSz6BQTvSgbRmrP/9NsBLsfXkN4e8sA==",
"license": "MIT",
"dependencies": {
"@rollup/plugin-strip": "^3.0.2",
"debug": "^4.3.4",
"kolorist": "^1.7.0",
"sirv": "^2.0.2",
"ufo": "^1.1.1"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/sponsors/patak-dev"
},
"peerDependencies": {
"vite": "^2.0.0||^3.0.0||^4.0.0||^5.0.0"
}
},
"node_modules/vite-plugin-wasm": { "node_modules/vite-plugin-wasm": {
"version": "3.3.0", "version": "3.3.0",
"resolved": "https://registry.npmjs.org/vite-plugin-wasm/-/vite-plugin-wasm-3.3.0.tgz", "resolved": "https://registry.npmjs.org/vite-plugin-wasm/-/vite-plugin-wasm-3.3.0.tgz",

4
package.json
View File

@ -8,7 +8,8 @@
"build_wasm": "wasm-pack build --out-dir ../ihm_client/dist/pkg ../sdk_client --target bundler --dev", "build_wasm": "wasm-pack build --out-dir ../ihm_client/dist/pkg ../sdk_client --target bundler --dev",
"start": "vite --host 0.0.0.0", "start": "vite --host 0.0.0.0",
"build": "tsc && vite build", "build": "tsc && vite build",
"deploy": "sudo cp -r dist/* /var/www/html/" "deploy": "sudo cp -r dist/* /var/www/html/",
"prettify": "prettier --config ./.prettierrc --write \"src/**/*{.ts,.html.scss}\""
}, },
"keywords": [], "keywords": [],
"author": "", "author": "",
@ -16,6 +17,7 @@
"devDependencies": { "devDependencies": {
"copy-webpack-plugin": "^12.0.2", "copy-webpack-plugin": "^12.0.2",
"html-webpack-plugin": "^5.6.0", "html-webpack-plugin": "^5.6.0",
"prettier": "^3.3.3",
"ts-loader": "^9.5.1", "ts-loader": "^9.5.1",
"typescript": "^5.3.3", "typescript": "^5.3.3",
"vite-plugin-static-copy": "^1.0.6", "vite-plugin-static-copy": "^1.0.6",

1
src/index.ts
View File

@ -37,4 +37,3 @@
// console.error(error); // console.error(error);
// } // }
// }); // });

21
src/models/notification.model.ts
View File

@ -1,22 +1,19 @@
export interface INotification { export interface INotification {
id: number; id: number;
title: string; title: string;
description: string; description: string;
sendToNotificationPage?: boolean; sendToNotificationPage?: boolean;
path?: string; path?: string;
} }
// Quelles sont les données utiles pour le user ??? // Quelles sont les données utiles pour le user ???
export interface IUser { export interface IUser {
id: string; id: string;
information?: any information?: any;
} }
// Quelles sont les données utiles pour les messages ??? // Quelles sont les données utiles pour les messages ???
export interface IMessage { export interface IMessage {
id: string; id: string;
message: any message: any;
} }

36
src/models/process.model.ts
View File

@ -1,23 +1,23 @@
export interface IProcess { export interface IProcess {
id: number; id: number;
name: string; name: string;
description: string; description: string;
icon?: string; icon?: string;
zoneList: IZone[], zoneList: IZone[];
} }
export interface IZone { export interface IZone {
id: number; id: number;
name: string; name: string;
path: string; path: string;
// Est-ce que la zone a besoin d'une icone ? // Est-ce que la zone a besoin d'une icone ?
icon?: string; icon?: string;
} }
export interface INotification { export interface INotification {
id: number; id: number;
title: string; title: string;
description: string; description: string;
sendToNotificationPage?: boolean; sendToNotificationPage?: boolean;
path?: string; path?: string;
} }

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

@ -1,88 +1,84 @@
import { Html5QrcodeScanner } from "html5-qrcode"; import { Html5QrcodeScanner } from 'html5-qrcode';
import Routing from "../../services/routing.service"; import Routing from '../../services/routing.service';
import Services from "../../services/service"; import Services from '../../services/service';
let resultContainer = document.getElementById('qr-reader-results'); let resultContainer = document.getElementById('qr-reader-results');
let lastResult: any, countResults = 0; let lastResult: any,
countResults = 0;
export function initHomePage(): void { export function initHomePage(): void {
console.log('INIT') console.log('INIT');
document.querySelectorAll('.tab').forEach(tab => { document.querySelectorAll('.tab').forEach((tab) => {
tab.addEventListener('click', () => { tab.addEventListener('click', () => {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active')); document.querySelectorAll('.tab').forEach((t) => t.classList.remove('active'));
tab.classList.add('active'); tab.classList.add('active');
document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); document.querySelectorAll('.tab-content').forEach((content) => content.classList.remove('active'));
document.getElementById(tab.getAttribute('data-tab') as string)?.classList.add('active'); document.getElementById(tab.getAttribute('data-tab') as string)?.classList.add('active');
}); });
}); });
document.getElementById('notification-bell')?.addEventListener('click', openCloseNotifications); document.getElementById('notification-bell')?.addEventListener('click', openCloseNotifications);
var html5QrcodeScanner = new Html5QrcodeScanner( var html5QrcodeScanner = new Html5QrcodeScanner('qr-reader', { fps: 10, qrbox: 250 }, undefined);
"qr-reader", { fps: 10, qrbox: 250 }, undefined); html5QrcodeScanner.render(onScanSuccess, undefined);
html5QrcodeScanner.render(onScanSuccess, undefined);
docReady(() => { docReady(() => {
scanDevice(); scanDevice();
});
});
} }
async function onScanSuccess(decodedText: any, decodedResult: any) { async function onScanSuccess(decodedText: any, decodedResult: any) {
if (lastResult === decodedText) { return; } if (lastResult === decodedText) {
return;
}
lastResult = decodedText; lastResult = decodedText;
++countResults; ++countResults;
// Handle on success condition with the decoded message. // Handle on success condition with the decoded message.
console.log(`Scan result ${decodedText}`, decodedResult); console.log(`Scan result ${decodedText}`, decodedResult);
try { try {
// Attempt to parse the decoded text as a URL // Attempt to parse the decoded text as a URL
const scannedUrl = new URL(decodedText); const scannedUrl = new URL(decodedText);
// Extract the 'sp_address' parameter // Extract the 'sp_address' parameter
const spAddress = scannedUrl.searchParams.get('sp_address'); const spAddress = scannedUrl.searchParams.get('sp_address');
if (spAddress) { if (spAddress) {
html5QrcodeScanner.clear(); html5QrcodeScanner.clear();
const service = await Services.getInstance() const service = await Services.getInstance();
// Call the sendPairingTx function with the extracted sp_address // Call the sendPairingTx function with the extracted sp_address
await service.sendPairingTx(spAddress); await service.sendPairingTx(spAddress);
} else { } else {
console.error('The scanned URL does not contain the sp_address parameter.'); console.error('The scanned URL does not contain the sp_address parameter.');
alert('Invalid QR code: sp_address parameter missing.'); alert('Invalid QR code: sp_address parameter missing.');
} }
} catch (error) { } catch (error) {
// Handle cases where decodedText is not a valid URL // Handle cases where decodedText is not a valid URL
console.error('Scanned text is not a valid URL:', error); console.error('Scanned text is not a valid URL:', error);
alert('Invalid QR code: Unable to parse URL.'); alert('Invalid QR code: Unable to parse URL.');
} }
} }
export function toggleMenu() { export function toggleMenu() {
let menu = document.getElementById('menu'); let menu = document.getElementById('menu');
if(menu) { if (menu) {
if (menu.style.display === 'block') { if (menu.style.display === 'block') {
menu.style.display = 'none'; menu.style.display = 'none';
} else { } else {
menu.style.display = 'block'; menu.style.display = 'block';
}
} }
}
} }
//// Modal //// Modal
export async function openModal(myAddress: string, receiverAddress: string) { export async function openModal(myAddress: string, receiverAddress: string) {
const router = await Routing.getInstance(); const router = await Routing.getInstance();
router.openLoginModal(myAddress, receiverAddress) router.openLoginModal(myAddress, receiverAddress);
} }
function openCloseNotifications() {
function openCloseNotifications() { const notifications = document.querySelector('.notification-board') as HTMLDivElement;
const notifications = document.querySelector('.notification-board') as HTMLDivElement notifications.style.display = notifications?.style.display === 'none' ? 'block' : 'none';
notifications.style.display = notifications?.style.display === 'none' ? 'block' : 'none' }
}
// const service = await Services.getInstance() // const service = await Services.getInstance()
// service.setNotification() // service.setNotification()
@ -93,22 +89,19 @@ export function toggleMenu() {
/// Scan QR Code /// Scan QR Code
function docReady(fn: any) { function docReady(fn: any) {
// see if DOM is already available // see if DOM is already available
if (document.readyState === "complete" if (document.readyState === 'complete' || document.readyState === 'interactive') {
|| document.readyState === "interactive") { // call on next available tick
// call on next available tick setTimeout(fn, 1);
setTimeout(fn, 1);
} else { } else {
document.addEventListener("DOMContentLoaded", fn); document.addEventListener('DOMContentLoaded', fn);
} }
} }
function scanDevice() { function scanDevice() {
const scannerImg = document.querySelector('#scanner') as HTMLElement const scannerImg = document.querySelector('#scanner') as HTMLElement;
if(scannerImg) scannerImg.style.display = 'none' if (scannerImg) scannerImg.style.display = 'none';
const scannerQrCode = document.querySelector('.qr-code-scanner') as HTMLElement const scannerQrCode = document.querySelector('.qr-code-scanner') as HTMLElement;
if(scannerQrCode) scannerQrCode.style.display = 'block' if (scannerQrCode) scannerQrCode.style.display = 'block';
} }
(window as any).scanDevice = scanDevice (window as any).scanDevice = scanDevice;

383
src/pages/process/process.ts
View File

@ -1,40 +1,39 @@
import Services from "../../services/service"; import Services from '../../services/service';
import {IProcess } from "~/models/process.model"; import { IProcess } from '~/models/process.model';
function toggleMenu() { function toggleMenu() {
const menu = document.getElementById("menu") as HTMLDivElement; const menu = document.getElementById('menu') as HTMLDivElement;
if (menu.style.display === "block") { if (menu.style.display === 'block') {
menu.style.display = "none"; menu.style.display = 'none';
} else { } else {
menu.style.display = "block"; menu.style.display = 'block';
} }
} }
// Initialize function, create initial tokens with itens that are already selected by the user // Initialize function, create initial tokens with itens that are already selected by the user
function init(element: HTMLElement) { function init(element: HTMLElement) {
// Create div that wroaps all the elements inside (select, elements selected, search div) to put select inside // Create div that wroaps all the elements inside (select, elements selected, search div) to put select inside
const wrapper = document.createElement("div"); const wrapper = document.createElement('div');
wrapper.addEventListener("click", clickOnWrapper); wrapper.addEventListener('click', clickOnWrapper);
wrapper.classList.add("multi-select-component"); wrapper.classList.add('multi-select-component');
wrapper.classList.add("input-field"); wrapper.classList.add('input-field');
// Create elements of search // Create elements of search
const search_div = document.createElement("div"); const search_div = document.createElement('div');
search_div.classList.add("search-container"); search_div.classList.add('search-container');
const input = document.createElement("input"); const input = document.createElement('input');
input.classList.add("selected-input"); input.classList.add('selected-input');
input.setAttribute("autocomplete", "off"); input.setAttribute('autocomplete', 'off');
input.setAttribute("tabindex", "0"); input.setAttribute('tabindex', '0');
input.addEventListener("keyup", inputChange); input.addEventListener('keyup', inputChange);
input.addEventListener("keydown", deletePressed); input.addEventListener('keydown', deletePressed);
input.addEventListener("click", openOptions); input.addEventListener('click', openOptions);
const dropdown_icon = document.createElement("a"); const dropdown_icon = document.createElement('a');
dropdown_icon.classList.add("dropdown-icon"); dropdown_icon.classList.add('dropdown-icon');
dropdown_icon.addEventListener("click", clickDropdown); dropdown_icon.addEventListener('click', clickDropdown);
const autocomplete_list = document.createElement("ul"); const autocomplete_list = document.createElement('ul');
autocomplete_list.classList.add("autocomplete-list"); autocomplete_list.classList.add('autocomplete-list');
search_div.appendChild(input); search_div.appendChild(input);
search_div.appendChild(autocomplete_list); search_div.appendChild(autocomplete_list);
search_div.appendChild(dropdown_icon); search_div.appendChild(dropdown_icon);
@ -47,43 +46,42 @@ function init(element: HTMLElement) {
addPlaceholder(wrapper); addPlaceholder(wrapper);
// const select = document.querySelector(".select-field"); // const select = document.querySelector(".select-field");
// for (const process of processeList) { // for (const process of processeList) {
// const option = document.createElement("option"); // const option = document.createElement("option");
// option.setAttribute("value", process.name); // option.setAttribute("value", process.name);
// option.innerText = process.name; // option.innerText = process.name;
// select.appendChild(option); // select.appendChild(option);
// } // }
} }
function removePlaceholder(wrapper: HTMLElement) { function removePlaceholder(wrapper: HTMLElement) {
const input_search = wrapper.querySelector(".selected-input"); const input_search = wrapper.querySelector('.selected-input');
input_search?.removeAttribute("placeholder"); input_search?.removeAttribute('placeholder');
} }
function addPlaceholder(wrapper: HTMLElement) { function addPlaceholder(wrapper: HTMLElement) {
const input_search = wrapper.querySelector(".selected-input"); const input_search = wrapper.querySelector('.selected-input');
const tokens = wrapper.querySelectorAll(".selected-wrapper"); const tokens = wrapper.querySelectorAll('.selected-wrapper');
if (!tokens.length && !(document.activeElement === input_search)) if (!tokens.length && !(document.activeElement === input_search)) input_search?.setAttribute('placeholder', '---------');
input_search?.setAttribute("placeholder", "---------");
} }
// Listener of user search // Listener of user search
function inputChange(e: Event) { function inputChange(e: Event) {
const target = e.target as HTMLInputElement const target = e.target as HTMLInputElement;
const wrapper = target?.parentNode?.parentNode; const wrapper = target?.parentNode?.parentNode;
const select = wrapper?.querySelector("select") as HTMLSelectElement; const select = wrapper?.querySelector('select') as HTMLSelectElement;
const dropdown = wrapper?.querySelector(".dropdown-icon"); const dropdown = wrapper?.querySelector('.dropdown-icon');
const input_val = target?.value; const input_val = target?.value;
if (input_val) { if (input_val) {
dropdown?.classList.add("active"); dropdown?.classList.add('active');
populateAutocompleteList(select, input_val.trim()); populateAutocompleteList(select, input_val.trim());
} else { } else {
dropdown?.classList.remove("active"); dropdown?.classList.remove('active');
const event = new Event("click"); const event = new Event('click');
dropdown?.dispatchEvent(event); dropdown?.dispatchEvent(event);
} }
} }
@ -91,11 +89,11 @@ function inputChange(e: Event) {
// Listen for clicks on the wrapper, if click happens focus on the input // Listen for clicks on the wrapper, if click happens focus on the input
function clickOnWrapper(e: Event) { function clickOnWrapper(e: Event) {
const wrapper = e.target as HTMLElement; const wrapper = e.target as HTMLElement;
if (wrapper.tagName == "DIV") { if (wrapper.tagName == 'DIV') {
const input_search = wrapper.querySelector(".selected-input"); const input_search = wrapper.querySelector('.selected-input');
const dropdown = wrapper.querySelector(".dropdown-icon"); const dropdown = wrapper.querySelector('.dropdown-icon');
if (!dropdown?.classList.contains("active")) { if (!dropdown?.classList.contains('active')) {
const event = new Event("click"); const event = new Event('click');
dropdown?.dispatchEvent(event); dropdown?.dispatchEvent(event);
} }
(input_search as HTMLInputElement)?.focus(); (input_search as HTMLInputElement)?.focus();
@ -106,9 +104,9 @@ function clickOnWrapper(e: Event) {
function openOptions(e: Event) { function openOptions(e: Event) {
const input_search = e.target as HTMLElement; const input_search = e.target as HTMLElement;
const wrapper = input_search?.parentElement?.parentElement; const wrapper = input_search?.parentElement?.parentElement;
const dropdown = wrapper?.querySelector(".dropdown-icon"); const dropdown = wrapper?.querySelector('.dropdown-icon');
if (!dropdown?.classList.contains("active")) { if (!dropdown?.classList.contains('active')) {
const event = new Event("click"); const event = new Event('click');
dropdown?.dispatchEvent(event); dropdown?.dispatchEvent(event);
} }
e.stopPropagation(); e.stopPropagation();
@ -116,22 +114,22 @@ function openOptions(e: Event) {
// Function that create a token inside of a wrapper with the given value // Function that create a token inside of a wrapper with the given value
function createToken(wrapper: HTMLElement, value: any) { function createToken(wrapper: HTMLElement, value: any) {
const search = wrapper.querySelector(".search-container"); const search = wrapper.querySelector('.search-container');
const inputInderline = document.querySelector(".selected-processes"); const inputInderline = document.querySelector('.selected-processes');
// Create token wrapper // Create token wrapper
const token = document.createElement("div"); const token = document.createElement('div');
token.classList.add("selected-wrapper"); token.classList.add('selected-wrapper');
const token_span = document.createElement("span"); const token_span = document.createElement('span');
token_span.classList.add("selected-label"); token_span.classList.add('selected-label');
token_span.innerText = value; token_span.innerText = value;
const close = document.createElement("a"); const close = document.createElement('a');
close.classList.add("selected-close"); close.classList.add('selected-close');
close.setAttribute("tabindex", "-1"); close.setAttribute('tabindex', '-1');
close.setAttribute("data-option", value); close.setAttribute('data-option', value);
close.setAttribute("data-hits", '0'); close.setAttribute('data-hits', '0');
close.setAttribute("href", "#"); close.setAttribute('href', '#');
close.innerText = "x"; close.innerText = 'x';
close.addEventListener("click", removeToken); close.addEventListener('click', removeToken);
token.appendChild(token_span); token.appendChild(token_span);
token.appendChild(close); token.appendChild(close);
inputInderline?.appendChild(token); inputInderline?.appendChild(token);
@ -141,16 +139,16 @@ function createToken(wrapper: HTMLElement, value: any) {
function clickDropdown(e: Event) { function clickDropdown(e: Event) {
const dropdown = e.target as HTMLElement; const dropdown = e.target as HTMLElement;
const wrapper = dropdown?.parentNode?.parentNode; const wrapper = dropdown?.parentNode?.parentNode;
const input_search = wrapper?.querySelector(".selected-input") as HTMLInputElement; const input_search = wrapper?.querySelector('.selected-input') as HTMLInputElement;
const select = wrapper?.querySelector("select") as HTMLSelectElement; const select = wrapper?.querySelector('select') as HTMLSelectElement;
dropdown.classList.toggle("active"); dropdown.classList.toggle('active');
if (dropdown.classList.contains("active")) { if (dropdown.classList.contains('active')) {
removePlaceholder(wrapper as HTMLElement); removePlaceholder(wrapper as HTMLElement);
input_search?.focus(); input_search?.focus();
if (!input_search?.value) { if (!input_search?.value) {
populateAutocompleteList(select, "", true); populateAutocompleteList(select, '', true);
} else { } else {
populateAutocompleteList(select, input_search.value); populateAutocompleteList(select, input_search.value);
} }
@ -164,8 +162,8 @@ function clickDropdown(e: Event) {
function clearAutocompleteList(select: HTMLSelectElement) { function clearAutocompleteList(select: HTMLSelectElement) {
const wrapper = select.parentNode; const wrapper = select.parentNode;
const autocomplete_list = wrapper?.querySelector(".autocomplete-list"); const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
if(autocomplete_list) autocomplete_list.innerHTML = ""; if (autocomplete_list) autocomplete_list.innerHTML = '';
} }
// Populate the autocomplete list following a given query from the user // Populate the autocomplete list following a given query from the user
@ -178,33 +176,33 @@ function populateAutocompleteList(select: HTMLSelectElement, query: string, drop
else options_to_show = autocomplete(query, autocomplete_options); else options_to_show = autocomplete(query, autocomplete_options);
const wrapper = select.parentNode; const wrapper = select.parentNode;
const input_search = wrapper?.querySelector(".search-container"); const input_search = wrapper?.querySelector('.search-container');
const autocomplete_list = wrapper?.querySelector(".autocomplete-list"); const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
if(autocomplete_list) autocomplete_list.innerHTML = ""; if (autocomplete_list) autocomplete_list.innerHTML = '';
const result_size = options_to_show.length; const result_size = options_to_show.length;
if (result_size == 1) { if (result_size == 1) {
const li = document.createElement("li"); const li = document.createElement('li');
li.innerText = options_to_show[0]; li.innerText = options_to_show[0];
li.setAttribute("data-value", options_to_show[0]); li.setAttribute('data-value', options_to_show[0]);
li.addEventListener("click", selectOption); li.addEventListener('click', selectOption);
autocomplete_list?.appendChild(li); autocomplete_list?.appendChild(li);
if (query.length == options_to_show[0].length) { if (query.length == options_to_show[0].length) {
const event = new Event("click"); const event = new Event('click');
li.dispatchEvent(event); li.dispatchEvent(event);
} }
} else if (result_size > 1) { } else if (result_size > 1) {
for (let i = 0; i < result_size; i++) { for (let i = 0; i < result_size; i++) {
const li = document.createElement("li"); const li = document.createElement('li');
li.innerText = options_to_show[i]; li.innerText = options_to_show[i];
li.setAttribute("data-value", options_to_show[i]); li.setAttribute('data-value', options_to_show[i]);
li.addEventListener("click", selectOption); li.addEventListener('click', selectOption);
autocomplete_list?.appendChild(li); autocomplete_list?.appendChild(li);
} }
} else { } else {
const li = document.createElement("li"); const li = document.createElement('li');
li.classList.add("not-cursor"); li.classList.add('not-cursor');
li.innerText = "No options found"; li.innerText = 'No options found';
autocomplete_list?.appendChild(li); autocomplete_list?.appendChild(li);
} }
} }
@ -212,15 +210,13 @@ function populateAutocompleteList(select: HTMLSelectElement, query: string, drop
// Listener to autocomplete results when clicked set the selected property in the select option // Listener to autocomplete results when clicked set the selected property in the select option
function selectOption(e: any) { function selectOption(e: any) {
const wrapper = e.target.parentNode.parentNode.parentNode; const wrapper = e.target.parentNode.parentNode.parentNode;
const input_search = wrapper.querySelector(".selected-input"); const input_search = wrapper.querySelector('.selected-input');
const option = wrapper.querySelector( const option = wrapper.querySelector(`select option[value="${e.target.dataset.value}"]`);
`select option[value="${e.target.dataset.value}"]`
);
option.setAttribute("selected", ""); option.setAttribute('selected', '');
createToken(wrapper, e.target.dataset.value); createToken(wrapper, e.target.dataset.value);
if (input_search.value) { if (input_search.value) {
input_search.value = ""; input_search.value = '';
} }
// showSelectedProcess(e.target.dataset.value); // showSelectedProcess(e.target.dataset.value);
@ -228,16 +224,16 @@ function selectOption(e: any) {
input_search.focus(); input_search.focus();
e.target.remove(); e.target.remove();
const autocomplete_list = wrapper.querySelector(".autocomplete-list"); const autocomplete_list = wrapper.querySelector('.autocomplete-list');
if (!autocomplete_list.children.length) { if (!autocomplete_list.children.length) {
const li = document.createElement("li"); const li = document.createElement('li');
li.classList.add("not-cursor"); li.classList.add('not-cursor');
li.innerText = "No options found"; li.innerText = 'No options found';
autocomplete_list.appendChild(li); autocomplete_list.appendChild(li);
} }
const event = new Event("keyup"); const event = new Event('keyup');
input_search.dispatchEvent(event); input_search.dispatchEvent(event);
e.stopPropagation(); e.stopPropagation();
} }
@ -251,9 +247,7 @@ function autocomplete(query: string, options: any) {
let options_return = []; let options_return = [];
for (let i = 0; i < options.length; i++) { for (let i = 0; i < options.length; i++) {
if ( if (query.toLowerCase() === options[i].slice(0, query.length).toLowerCase()) {
query.toLowerCase() === options[i].slice(0, query.length).toLowerCase()
) {
options_return.push(options[i]); options_return.push(options[i]);
} }
} }
@ -263,14 +257,10 @@ function autocomplete(query: string, options: any) {
// Returns the options that are selected by the user and the ones that are not // Returns the options that are selected by the user and the ones that are not
function getOptions(select: HTMLSelectElement) { function getOptions(select: HTMLSelectElement) {
// Select all the options available // Select all the options available
const all_options = Array.from(select.querySelectorAll("option")).map( const all_options = Array.from(select.querySelectorAll('option')).map((el) => el.value);
(el) => el.value
);
// Get the options that are selected from the user // Get the options that are selected from the user
const options_selected = Array.from( const options_selected = Array.from(select.querySelectorAll('option:checked')).map((el: any) => el.value);
select.querySelectorAll("option:checked")
).map((el: any) => el.value);
// Create an autocomplete options array with the options that are not selected by the user // Create an autocomplete options array with the options that are not selected by the user
const autocomplete_options: any[] = []; const autocomplete_options: any[] = [];
@ -291,20 +281,18 @@ function getOptions(select: HTMLSelectElement) {
// Listener for when the user wants to remove a given token. // Listener for when the user wants to remove a given token.
function removeToken(e: Event) { function removeToken(e: Event) {
// Get the value to remove // Get the value to remove
const target = e.target as HTMLSelectElement const target = e.target as HTMLSelectElement;
const value_to_remove = target.dataset.option; const value_to_remove = target.dataset.option;
const wrapper = target.parentNode?.parentNode?.parentNode; const wrapper = target.parentNode?.parentNode?.parentNode;
const input_search = wrapper?.querySelector(".selected-input"); const input_search = wrapper?.querySelector('.selected-input');
const dropdown = wrapper?.querySelector(".dropdown-icon"); const dropdown = wrapper?.querySelector('.dropdown-icon');
// Get the options in the select to be unselected // Get the options in the select to be unselected
const option_to_unselect = wrapper?.querySelector( const option_to_unselect = wrapper?.querySelector(`select option[value="${value_to_remove}"]`);
`select option[value="${value_to_remove}"]` option_to_unselect?.removeAttribute('selected');
);
option_to_unselect?.removeAttribute("selected");
// Remove token attribute // Remove token attribute
(target.parentNode as any)?.remove(); (target.parentNode as any)?.remove();
dropdown?.classList.remove("active"); dropdown?.classList.remove('active');
const process = document.querySelector("#" + target.dataset.option); const process = document.querySelector('#' + target.dataset.option);
process?.remove(); process?.remove();
} }
@ -313,24 +301,24 @@ function deletePressed(e: KeyboardEvent) {
const input_search = e.target as HTMLInputElement; const input_search = e.target as HTMLInputElement;
const wrapper = input_search?.parentNode?.parentNode; const wrapper = input_search?.parentNode?.parentNode;
const key = e.keyCode || e.charCode; const key = e.keyCode || e.charCode;
const tokens = wrapper?.querySelectorAll(".selected-wrapper"); const tokens = wrapper?.querySelectorAll('.selected-wrapper');
if (tokens?.length) { if (tokens?.length) {
const last_token_x = tokens[tokens.length - 1].querySelector("a"); const last_token_x = tokens[tokens.length - 1].querySelector('a');
let hits = +(last_token_x?.dataset?.hits || 0); let hits = +(last_token_x?.dataset?.hits || 0);
if (key == 8 || key == 46) { if (key == 8 || key == 46) {
if (!input_search.value) { if (!input_search.value) {
if (hits > 1) { if (hits > 1) {
// Trigger delete event // Trigger delete event
const event = new Event("click"); const event = new Event('click');
last_token_x?.dispatchEvent(event); last_token_x?.dispatchEvent(event);
} else { } else {
if(last_token_x?.dataset.hits) last_token_x.dataset.hits = '2'; if (last_token_x?.dataset.hits) last_token_x.dataset.hits = '2';
} }
} }
} else { } else {
if(last_token_x?.dataset.hits) last_token_x.dataset.hits = '0'; if (last_token_x?.dataset.hits) last_token_x.dataset.hits = '0';
} }
} }
return true; return true;
@ -345,72 +333,67 @@ function deletePressed(e: KeyboardEvent) {
// } // }
// get select that has the options available // get select that has the options available
const select = document.querySelectorAll("[data-multi-select-plugin]") as NodeListOf<HTMLElement>; const select = document.querySelectorAll('[data-multi-select-plugin]') as NodeListOf<HTMLElement>;
select.forEach((select) => { select.forEach((select) => {
console.log(select); console.log(select);
init(select); init(select);
}); });
// Dismiss on outside click // Dismiss on outside click
document.addEventListener("click", () => { document.addEventListener('click', () => {
// get select that has the options available // get select that has the options available
const select = document.querySelectorAll("[data-multi-select-plugin]"); const select = document.querySelectorAll('[data-multi-select-plugin]');
for (let i = 0; i < select.length; i++) { for (let i = 0; i < select.length; i++) {
if (event) { if (event) {
var isClickInside = select[i].parentElement?.parentElement?.contains( var isClickInside = select[i].parentElement?.parentElement?.contains(event.target as Node);
event.target as Node
);
if (!isClickInside) { if (!isClickInside) {
const wrapper = select[i].parentElement?.parentElement; const wrapper = select[i].parentElement?.parentElement;
const dropdown = wrapper?.querySelector(".dropdown-icon"); const dropdown = wrapper?.querySelector('.dropdown-icon');
const autocomplete_list = wrapper?.querySelector(".autocomplete-list"); const autocomplete_list = wrapper?.querySelector('.autocomplete-list');
//the click was outside the specifiedElement, do something //the click was outside the specifiedElement, do something
dropdown?.classList.remove("active"); dropdown?.classList.remove('active');
if(autocomplete_list) autocomplete_list.innerHTML = ""; if (autocomplete_list) autocomplete_list.innerHTML = '';
addPlaceholder(wrapper as HTMLElement); addPlaceholder(wrapper as HTMLElement);
} }
} }
} }
}); });
export async function unpair() { export async function unpair() {
const service = await Services.getInstance() const service = await Services.getInstance();
await service.unpairDevice() await service.unpairDevice();
} }
(window as any).unpair = unpair; (window as any).unpair = unpair;
async function showSelectedProcess(event: MouseEvent) { async function showSelectedProcess(event: MouseEvent) {
const elem = event.target; const elem = event.target;
if(elem) { if (elem) {
const cardContent = document.querySelector('.card-content');
const cardContent = document.querySelector(".card-content"); const processes = await getProcesses();
console.log('🚀 ~ Services ~ showSelectedProcess ~ processes:', processes);
const processes = await getProcesses(); const process = processes.find((process: any) => process.name === (elem as any).dataset.value);
console.log("🚀 ~ Services ~ showSelectedProcess ~ processes:", processes) if (process) {
const process = processes.find((process: any) => process.name === (elem as any).dataset.value); const processDiv = document.createElement('div');
if (process) { processDiv.className = 'process';
const processDiv = document.createElement("div"); processDiv.id = process.name;
processDiv.className = "process"; const titleDiv = document.createElement('div');
processDiv.id = process.name; titleDiv.className = 'process-title';
const titleDiv = document.createElement("div"); titleDiv.innerHTML = `${process.name} : ${process.description}`;
titleDiv.className = "process-title"; processDiv.appendChild(titleDiv);
titleDiv.innerHTML = `${process.name} : ${process.description}`; for (const zone of process.zoneList) {
processDiv.appendChild(titleDiv); const zoneElement = document.createElement('div');
for (const zone of process.zoneList) { zoneElement.className = 'process-element';
const zoneElement = document.createElement("div"); zoneElement.setAttribute('zone-id', zone.id.toString());
zoneElement.className = "process-element"; zoneElement.innerHTML = `Zone ${zone.id} : ${zone.name}`;
zoneElement.setAttribute('zone-id', zone.id.toString()) const service = await Services.getInstance();
zoneElement.innerHTML = `Zone ${zone.id} : ${zone.name}`; service.addSubscription(zoneElement, 'click', 'goToProcessPage');
const service = await Services.getInstance() processDiv.appendChild(zoneElement);
service.addSubscription(zoneElement, 'click', 'goToProcessPage')
processDiv.appendChild(zoneElement);
}
if(cardContent) cardContent.appendChild(processDiv);
} }
if (cardContent) cardContent.appendChild(processDiv);
}
} }
} }
@ -418,59 +401,61 @@ function goToProcessPage(event: MouseEvent) {
const target = event.target as HTMLDivElement; const target = event.target as HTMLDivElement;
const zoneId = target?.getAttribute('zone-id'); const zoneId = target?.getAttribute('zone-id');
const processList = document.querySelectorAll('.process-element'); const processList = document.querySelectorAll('.process-element');
if(processList) { if (processList) {
for(const process of processList) { for (const process of processList) {
process.classList.remove('selected') process.classList.remove('selected');
} }
} }
target.classList.add('selected') target.classList.add('selected');
console.log('=======================> going to process page', zoneId) console.log('=======================> going to process page', zoneId);
} }
async function getProcesses(): Promise<IProcess[]> { async function getProcesses(): Promise<any[]> {
const service = await Services.getInstance() const service = await Services.getInstance();
// const processes = service.getProcesses() // const processes = service.getProcesses()
// console.log("🚀 ~ Services ~ getProcesses ~ processes:", processes) // console.log("🚀 ~ Services ~ getProcesses ~ processes:", processes)
return [ const process = [
{ {
id: 1, title: 'Messaging',
name: "Messaging", description: 'Messagerie chiffrée',
description: "Encrypted messages", html: '<div><input /></div>',
zoneList: [ css: '',
{ script: '',
id: 1, zones: ['zone 1', 'zone 2'],
name: "General", roles: {
path: '/test' owner: {
members: ['dfdsfdfdsf', 'dfdfdfdsfsfdfdsf'],
validation_rules: [
{
quorum: 1.0,
fields: ['description', 'roles', 'session_privkey', 'session_pubkey', 'key_parity'],
min_sig_member: 1.0,
},
],
}, },
], },
}, },
{ {
id: 2, title: 'Database',
name: "Storage", description: 'Database chiffrée',
description: "Distributed storage", html: '<div><input /></div>',
zoneList: [ css: '',
{ script: '',
id: 1, zones: ['zone 1', 'zone 2'],
name: "Paris", roles: {
path: '/test' owner: {
members: ['dfdsfdfdsf', 'dfdfdfdsfsfdfdsf'],
validation_rules: [
{
quorum: 1.0,
fields: ['description', 'roles', 'session_privkey', 'session_pubkey', 'key_parity'],
min_sig_member: 1.0,
},
],
}, },
{ },
id: 2,
name: "Normandy",
path: '/test'
},
{
id: 3,
name: "New York",
path: '/test'
},
{
id: 4,
name: "Moscow",
path: '/test'
},
],
}, },
]; ];
return process
} }

79
src/router.ts
View File

@ -3,8 +3,8 @@ import { initHomePage } from './pages/home/home';
import Services from './services/service'; import Services from './services/service';
const routes: { [key: string]: string } = { const routes: { [key: string]: string } = {
'home': '/src/pages/home/home.html', home: '/src/pages/home/home.html',
'process': '/src/pages/process/process.html', process: '/src/pages/process/process.html',
}; };
export async function navigate(path: string) { export async function navigate(path: string) {
@ -21,17 +21,16 @@ async function handleLocation(path: string) {
const content = document.getElementById('containerId'); const content = document.getElementById('containerId');
if (content) { if (content) {
const html = await fetch(routeHtml).then(data => data.text()); const html = await fetch(routeHtml).then((data) => data.text());
content.innerHTML = html; content.innerHTML = html;
await new Promise(requestAnimationFrame); await new Promise(requestAnimationFrame);
if(path === "home") { if (path === 'home') {
const { initHomePage } = await import('./pages/home/home'); const { initHomePage } = await import('./pages/home/home');
initHomePage() initHomePage();
} } else if (path === 'process') {
else if (path === "process") { await import('./pages/process/process');
await import('./pages/process/process');
} }
} }
} }
@ -41,45 +40,43 @@ window.onpopstate = () => handleLocation('home');
async function init(): Promise<boolean> { async function init(): Promise<boolean> {
let isPaired = false; let isPaired = false;
try { try {
const services = await Services.getInstance(); const services = await Services.getInstance();
setTimeout( async () => { setTimeout(async () => {
let device = await services.getDevice() let device = await services.getDevice();
console.log("🚀 ~ setTimeout ~ device:", device) console.log('🚀 ~ setTimeout ~ device:', device);
if(!device) { if (!device) {
device = await services.createNewDevice(); device = await services.createNewDevice();
} else { } else {
await services.restoreDevice(device) await services.restoreDevice(device);
} }
await services.restoreProcesses(); await services.restoreProcesses();
await services.restoreMessages(); await services.restoreMessages();
if (services.isPaired()) { if (services.isPaired()) {
isPaired = true; isPaired = true;
console.log("🚀 ~ setTimeout ~ isPaired:", isPaired) console.log('🚀 ~ setTimeout ~ isPaired:', isPaired);
await navigate('process'); await navigate('process');
return isPaired return isPaired;
} else { } else {
const queryString = window.location.search; const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString) const urlParams = new URLSearchParams(queryString);
const pairingAddress = urlParams.get('sp_address') const pairingAddress = urlParams.get('sp_address');
if(pairingAddress) { if (pairingAddress) {
setTimeout(async () => await services.sendPairingTx(pairingAddress), 2000) setTimeout(async () => await services.sendPairingTx(pairingAddress), 2000);
} }
return isPaired return isPaired;
} }
}, 200); }, 200);
} catch (error) { } catch (error) {
console.error(error); console.error(error);
return isPaired return isPaired;
} }
return isPaired return isPaired;
} }
(async () => { (async () => {
const isPaired = await init() const isPaired = await init();
console.log("🚀 ~ handleLocation ~ isPaired:", isPaired) console.log('🚀 ~ handleLocation ~ isPaired:', isPaired);
await navigate('home'); await navigate('home');
})(); })();

190
src/services/routing.service.ts
View File

@ -6,112 +6,112 @@ import Services from './service';
import { U32_MAX } from './service'; import { U32_MAX } from './service';
import { navigate } from '../router'; import { navigate } from '../router';
export default class Routing { export default class Routing {
private static instance: Routing; private static instance: Routing;
private sdkClient: any; private sdkClient: any;
private currentPrd: any; private currentPrd: any;
private currentOutpoint?: string; private currentOutpoint?: string;
private constructor() {} private constructor() {}
private paired_addresses: string[] = []; private paired_addresses: string[] = [];
// Method to access the singleton instance of Services // Method to access the singleton instance of Services
public static async getInstance(): Promise<Routing> { public static async getInstance(): Promise<Routing> {
if (!Routing.instance) { if (!Routing.instance) {
Routing.instance = new Routing(); Routing.instance = new Routing();
await Routing.instance.init(); await Routing.instance.init();
}
return Routing.instance;
} }
return Routing.instance;
}
public async init(): Promise<void> { public async init(): Promise<void> {
this.sdkClient = await import("../../dist/pkg/sdk_client"); this.sdkClient = await import('../../dist/pkg/sdk_client');
}
public openLoginModal(myAddress: string, receiverAddress: string) {
const container = document.querySelector('.page-container');
let html = modalHtml;
html = html.replace('{{device1}}', myAddress);
html = html.replace('{{device2}}', receiverAddress);
if (container) container.innerHTML += html;
const modal = document.getElementById('login-modal');
if (modal) modal.style.display = 'flex';
const newScript = document.createElement('script');
newScript.setAttribute('type', 'module');
newScript.textContent = modalScript;
document.head.appendChild(newScript).parentNode?.removeChild(newScript);
}
public async openConfirmationModal(pcd: any, outpointCommitment: string) {
console.log('');
let roles = JSON.parse(pcd['roles']); // ['members'][0];
console.log(roles);
let members = roles['owner']['members'];
console.log(members);
// We take all the addresses except our own
const local_address = this.sdkClient.get_address();
console.log('🚀 ~ Routing ~ openConfirmationModal ~ pcd:', pcd);
for (const address of members[0]['sp_addresses']) {
if (address !== local_address) {
this.paired_addresses.push(address);
} }
public openLoginModal(myAddress: string, receiverAddress: string) {
const container = document.querySelector('.page-container');
let html = modalHtml
html = html.replace('{{device1}}', myAddress)
html = html.replace('{{device2}}', receiverAddress)
if (container) container.innerHTML += html;
const modal = document.getElementById('login-modal')
if (modal) modal.style.display = 'flex';
const newScript = document.createElement('script');
newScript.setAttribute('type', 'module')
newScript.textContent = modalScript;
document.head.appendChild(newScript).parentNode?.removeChild(newScript);
} }
let html = confirmationModalHtml;
let services = await Services.getInstance();
html = html.replace('{{device1}}', await services.addressToEmoji(members[0]['sp_addresses'][0]));
html = html.replace('{{device2}}', await services.addressToEmoji(members[0]['sp_addresses'][1]));
this.currentOutpoint = outpointCommitment as string;
const container = document.querySelector('.page-container');
public async openConfirmationModal(pcd: any, outpointCommitment: string) { if (container) container.innerHTML += html;
console.log("") const modal = document.getElementById('modal');
let roles = JSON.parse(pcd['roles']);// ['members'][0]; if (modal) modal.style.display = 'flex';
console.log(roles); const newScript = document.createElement('script');
let members = roles['owner']['members']; newScript.setAttribute('type', 'module');
console.log(members); newScript.textContent = confirmationModalScript;
// We take all the addresses except our own document.head.appendChild(newScript).parentNode?.removeChild(newScript);
const local_address = this.sdkClient.get_address();
console.log("🚀 ~ Routing ~ openConfirmationModal ~ pcd:", pcd)
for (const address of members[0]['sp_addresses']) {
if (address !== local_address) { this.paired_addresses.push(address) }
}
let html = confirmationModalHtml;
let services = await Services.getInstance();
html = html.replace('{{device1}}', await services.addressToEmoji(members[0]['sp_addresses'][0]));
html = html.replace('{{device2}}', await services.addressToEmoji(members[0]['sp_addresses'][1]));
this.currentOutpoint = outpointCommitment as string;
const container = document.querySelector('.page-container');
if (container) container.innerHTML += html; // Add correct text
const modal = document.getElementById('modal')
if (modal) modal.style.display = 'flex';
const newScript = document.createElement('script');
newScript.setAttribute('type', 'module')
newScript.textContent = confirmationModalScript;
document.head.appendChild(newScript).parentNode?.removeChild(newScript);
// Add correct text // Close modal when clicking outside of it
window.onclick = (event) => {
// Close modal when clicking outside of it const modal = document.getElementById('modal');
window.onclick = (event) => { if (event.target === modal) {
const modal = document.getElementById('modal'); this.closeConfirmationModal();
if (event.target === modal) {
this.closeConfirmationModal();
}
}
}
confirmLogin() {
console.log('=============> Confirm Login')
const loginTx = this.sdkClient.create_login_transaction(1)
this.sdkClient.login('LOGIN', loginTx)
}
async closeLoginModal() {
const modal = document.getElementById('login-modal')
if (modal) modal.style.display = 'none';
} }
};
}
confirmLogin() {
console.log('=============> Confirm Login');
const loginTx = this.sdkClient.create_login_transaction(1);
this.sdkClient.login('LOGIN', loginTx);
}
async closeLoginModal() {
const modal = document.getElementById('login-modal');
if (modal) modal.style.display = 'none';
}
async confirmPairing() { async confirmPairing() {
const service = await Services.getInstance() const service = await Services.getInstance();
const modal = document.getElementById('modal') const modal = document.getElementById('modal');
// console.log("🚀 ~ Routing ~ confirm ~ prd:", prd) // console.log("🚀 ~ Routing ~ confirm ~ prd:", prd)
if (modal) modal.style.display = 'none'; if (modal) modal.style.display = 'none';
// Just make an empty commitment for now // Just make an empty commitment for now
const emptyTxid = '0'.repeat(64) const emptyTxid = '0'.repeat(64);
const commitmentOutpoint = `${emptyTxid}:${U32_MAX}`; const commitmentOutpoint = `${emptyTxid}:${U32_MAX}`;
// We take the paired device(s) from the contract // We take the paired device(s) from the contract
await this.sdkClient.pair_device(commitmentOutpoint, this.paired_addresses) await this.sdkClient.pair_device(commitmentOutpoint, this.paired_addresses);
this.paired_addresses = [] this.paired_addresses = [];
const newDevice = await service.dumpDevice(); const newDevice = await service.dumpDevice();
await service.saveDevice(newDevice); await service.saveDevice(newDevice);
navigate('process'); navigate('process');
} }
async closeConfirmationModal() { async closeConfirmationModal() {
const service = await Services.getInstance() const service = await Services.getInstance();
await service.unpairDevice() await service.unpairDevice();
const modal = document.getElementById('modal') const modal = document.getElementById('modal');
if (modal) modal.style.display = 'none'; if (modal) modal.style.display = 'none';
} }
} }

1355
src/services/service.ts
View File

File diff suppressed because it is too large Load Diff

239
src/websockets.ts
View File

@ -1,136 +1,137 @@
import { AnkFlag, CachedMessage } from "dist/pkg/sdk_client"; import { AnkFlag, CachedMessage } from 'dist/pkg/sdk_client';
import Services from "./services/service"; import Services from './services/service';
// import { AnkFlag, AnkNetworkMsg, CachedMessage } from "../dist/pkg/sdk_client"; // import { AnkFlag, AnkNetworkMsg, CachedMessage } from "../dist/pkg/sdk_client";
class WebSocketClient { class WebSocketClient {
private ws: WebSocket; private ws: WebSocket;
private messageQueue: string[] = []; private messageQueue: string[] = [];
constructor(url: string, private services: Services) { constructor(
this.ws = new WebSocket(url); url: string,
private services: Services,
) {
this.ws = new WebSocket(url);
if(this.ws !== null) { if (this.ws !== null) {
this.ws.onopen = async (event) => { this.ws.onopen = async (event) => {
console.log('WebSocket connection established'); console.log('WebSocket connection established');
const amount = await services.getAmount(); const amount = await services.getAmount();
if (amount === 0n) { if (amount === 0n) {
const faucetMsg = await services.createFaucetMessage(); const faucetMsg = await services.createFaucetMessage();
await services.sendFaucetMessage(faucetMsg); await services.sendFaucetMessage(faucetMsg);
}
while (this.messageQueue.length > 0) {
const message = this.messageQueue.shift();
if (message) {
this.ws.send(message);
}
}
};
// Listen for messages
this.ws.onmessage = (event) => {
const msgData = event.data;
// console.log("Received text message: ", msgData);
(async () => {
if (typeof msgData === 'string') {
try {
const feeRate = 0.0001;
const parsedMessage = JSON.parse(msgData)
// console.log("🚀 ~ WebSocketClient ~ parsedMessage:", parsedMessage)
const services = await Services.getInstance()
switch(parsedMessage.flag) {
case 'NewTx':
await services.parseNewTx(parsedMessage.content)
break;
case 'Cipher':
await services.parseCipher(parsedMessage.content)
// device = await services.dumpWallet()
// console.log("🚀 ~ WebSocketClient ~ device:", device)
// await services.saveDevice(device)
break;
}
// By parsing the message, we can link it with existing cached message and return the updated version of the message
// if (res.status === 'FaucetComplete') {
// // we received a faucet tx, there's nothing else to do
// window.alert(`New faucet output\n${res.commited_in}`);
// } else if (res.status === 'TxWaitingCipher') {
// // we received a tx but we don't have the cipher
// console.debug(`received notification in output ${res.commited_in}, waiting for cipher message`);
// } else if (res.status === 'CipherWaitingTx') {
// // we received a cipher but we don't have the key
// console.debug(`received a cipher`);
// } else if (res.status === 'SentWaitingConfirmation') {
// // We are sender and we're waiting for the challenge that will confirm recipient got the transaction and the message
// } else if (res.status === 'MustSpendConfirmation') {
// // we received a challenge for a notification we made
// // that means we can stop rebroadcasting the tx and we must spend the challenge to confirm
// window.alert(`Spending ${res.confirmed_by} to prove our identity`);
// console.debug(`sending confirm message to ${res.recipient}`);
// } else if (res.status === 'ReceivedMustConfirm') {
// // we found a notification and decrypted the cipher
// window.alert(`Received message from ${res.sender}\n${res.plaintext}`);
// // we must spend the commited_in output to sender
// } else if (res.status === 'Complete') {
// window.alert(`Received confirmation that ${res.sender} is the author of message ${res.plaintext}`)
// } else {
// console.debug('Received an unimplemented valid message');
// }
} catch (error) {
console.error('Received an invalid message:', error);
}
} else {
console.error('Received a non-string message');
}
})();
};
// Listen for possible errors
this.ws.onerror = (event) => {
console.error('WebSocket error:', event);
};
// Listen for when the connection is closed
this.ws.onclose = (event) => {
console.log('WebSocket is closed now.');
}
} }
while (this.messageQueue.length > 0) {
} const message = this.messageQueue.shift();
if (message) {
// Method to send messages this.ws.send(message);
public async sendMessage(flag: AnkFlag, message: string): Promise<void> { }
if (this.ws.readyState === WebSocket.OPEN) {
const networkMessage = {
'flag': flag,
'content': message
}
// if(flag === 'Cipher') {
// const services = await Services.getInstance();
// services.parseCipher(JSON.stringify(networkMessage))
// }
console.log("Sending message:", JSON.stringify(networkMessage));
this.ws.send(JSON.stringify(networkMessage));
} else {
console.error('WebSocket is not open. ReadyState:', this.ws.readyState);
this.messageQueue.push(message);
} }
} };
public getUrl(): string { // Listen for messages
return this.ws.url; this.ws.onmessage = (event) => {
} const msgData = event.data;
public sendNormalMessage(message: string) { // console.log("Received text message: ", msgData);
this.ws.send(message); (async () => {
console.log("Sending message:", JSON.stringify(message)); if (typeof msgData === 'string') {
try {
const feeRate = 0.0001;
const parsedMessage = JSON.parse(msgData);
// console.log("🚀 ~ WebSocketClient ~ parsedMessage:", parsedMessage)
const services = await Services.getInstance();
switch (parsedMessage.flag) {
case 'NewTx':
await services.parseNewTx(parsedMessage.content);
break;
case 'Cipher':
await services.parseCipher(parsedMessage.content);
// device = await services.dumpWallet()
// console.log("🚀 ~ WebSocketClient ~ device:", device)
// await services.saveDevice(device)
break;
}
// By parsing the message, we can link it with existing cached message and return the updated version of the message
// if (res.status === 'FaucetComplete') {
// // we received a faucet tx, there's nothing else to do
// window.alert(`New faucet output\n${res.commited_in}`);
// } else if (res.status === 'TxWaitingCipher') {
// // we received a tx but we don't have the cipher
// console.debug(`received notification in output ${res.commited_in}, waiting for cipher message`);
// } else if (res.status === 'CipherWaitingTx') {
// // we received a cipher but we don't have the key
// console.debug(`received a cipher`);
// } else if (res.status === 'SentWaitingConfirmation') {
// // We are sender and we're waiting for the challenge that will confirm recipient got the transaction and the message
// } else if (res.status === 'MustSpendConfirmation') {
// // we received a challenge for a notification we made
// // that means we can stop rebroadcasting the tx and we must spend the challenge to confirm
// window.alert(`Spending ${res.confirmed_by} to prove our identity`);
// console.debug(`sending confirm message to ${res.recipient}`);
// } else if (res.status === 'ReceivedMustConfirm') {
// // we found a notification and decrypted the cipher
// window.alert(`Received message from ${res.sender}\n${res.plaintext}`);
// // we must spend the commited_in output to sender
// } else if (res.status === 'Complete') {
// window.alert(`Received confirmation that ${res.sender} is the author of message ${res.plaintext}`)
// } else {
// console.debug('Received an unimplemented valid message');
// }
} catch (error) {
console.error('Received an invalid message:', error);
}
} else {
console.error('Received a non-string message');
}
})();
};
} // Listen for possible errors
this.ws.onerror = (event) => {
console.error('WebSocket error:', event);
};
// Method to close the WebSocket connection // Listen for when the connection is closed
public close(): void { this.ws.onclose = (event) => {
this.ws.close(); console.log('WebSocket is closed now.');
};
} }
}
// Method to send messages
public async sendMessage(flag: AnkFlag, message: string): Promise<void> {
if (this.ws.readyState === WebSocket.OPEN) {
const networkMessage = {
flag: flag,
content: message,
};
// if(flag === 'Cipher') {
// const services = await Services.getInstance();
// services.parseCipher(JSON.stringify(networkMessage))
// }
console.log('Sending message:', JSON.stringify(networkMessage));
this.ws.send(JSON.stringify(networkMessage));
} else {
console.error('WebSocket is not open. ReadyState:', this.ws.readyState);
this.messageQueue.push(message);
}
}
public getUrl(): string {
return this.ws.url;
}
public sendNormalMessage(message: string) {
this.ws.send(message);
console.log('Sending message:', JSON.stringify(message));
}
// Method to close the WebSocket connection
public close(): void {
this.ws.close();
}
} }
export { WebSocketClient }; export { WebSocketClient };