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

add automatic update of worker and fix bad database get

Browse Source
This commit is contained in:
AnisHADJARAB 2024-11-07 15:33:39 +00:00
parent 81bab0b469
commit 546a92c45e
12 changed files with 235 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -9,7 +9,7 @@
"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}\"" "prettify": "prettier --config ./.prettierrc --write \"src/**/*{.ts,.html,.css,.js}\""
}, },
"keywords": [], "keywords": [],
"author": "", "author": "",

49
src/components/header/header.html
View File

@ -1,28 +1,31 @@
<div class="nav-wrapper"> <div class="nav-wrapper">
<div class="brand-logo">4NK</div> <div class="brand-logo">4NK</div>
<div class="nav-right-icons"> <div class="nav-right-icons">
<div class="notification-container"> <div class="notification-container">
<div class="bell-icon"> <div class="bell-icon">
<svg class="notification-bell" onclick="openCloseNotifications()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> <svg class="notification-bell" onclick="openCloseNotifications()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V208c0-61.9 50.1-112 112-112zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"/></svg> <path
</div> d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112v25.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V208c0-61.9 50.1-112 112-112zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"
<div class="notification-badge"></div> />
<div id="notification-board" class="notification-board"> </svg>
<div class="no-notification">No notifications available</div> </div>
</div> <div class="notification-badge"></div>
</div> <div id="notification-board" class="notification-board">
<div class="no-notification">No notifications available</div>
</div>
</div>
<div class="burger-menu"> <div class="burger-menu">
<svg class="burger-menu" onclick="toggleMenu()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> <svg class="burger-menu" onclick="toggleMenu()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/> <path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z" />
</svg> </svg>
<div class="menu-content" id="menu"> <div class="menu-content" id="menu">
<a onclick="unpair()">Revoke</a> <a onclick="unpair()">Revoke</a>
<a>Export</a> <a>Export</a>
<a>Import</a> <a>Import</a>
<a>Disconnect</a> <a>Disconnect</a>
</div> </div>
</div>
</div> </div>
</div> </div>
</div>

26
src/components/modal/confirmation-modal.html
View File

@ -1,16 +1,16 @@
<div id="modal" class="modal"> <div id="modal" class="modal">
<div class="modal-content"> <div class="modal-content">
<div class="modal-title">Login</div> <div class="modal-title">Login</div>
<div class="message"> <div class="message">
Do you want to pair device?<br> Do you want to pair device?<br />
Attempting to pair device with address <br> Attempting to pair device with address <br />
<strong>{{device1}}</strong> <br> <strong>{{device1}}</strong> <br />
with device with address <br> with device with address <br />
<strong>{{device2}}</strong> <strong>{{device2}}</strong>
</div> </div>
<div class="confirmation-box"> <div class="confirmation-box">
<a class="btn confirmation-btn" onclick="confirm()">Confirm</a> <a class="btn confirmation-btn" onclick="confirm()">Confirm</a>
<a class="btn refusal-btn" onclick="closeConfirmationModal()">Refuse</a> <a class="btn refusal-btn" onclick="closeConfirmationModal()">Refuse</a>
</div>
</div> </div>
</div> </div>
</div>

12
src/html/login-modal.html
View File

@ -1,16 +1,14 @@
<div id="login-modal" class="modal"> <div id="login-modal" class="modal">
<div class="modal-content"> <div class="modal-content">
<div class="modal-title">Login</div> <div class="modal-title">Login</div>
<div class="confirmation-box"> <div class="confirmation-box">
<div class="message"> <div class="message">
Attempting to pair device with address Attempting to pair device with address
<strong>{{device1}}</strong> <strong>{{device1}}</strong>
with device with address with device with address
<strong>{{device2}}</strong> <strong>{{device2}}</strong>
</div> </div>
<div> <div>Awaiting pairing validation...</div>
Awaiting pairing validation...
</div>
</div>
</div> </div>
</div> </div>
</div>

6
src/html/login-modal.js
View File

@ -1,12 +1,12 @@
import Routing from "/src/services/routing.service.ts"; import Routing from '/src/services/routing.service.ts';
const router = await Routing.getInstance(); const router = await Routing.getInstance();
export async function confirmLogin() { export async function confirmLogin() {
router.confirmLogin() router.confirmLogin();
} }
export async function closeLoginModal() { export async function closeLoginModal() {
router.closeLoginModal() router.closeLoginModal();
} }
window.confirmLogin = confirmLogin; window.confirmLogin = confirmLogin;

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

@ -1,52 +1,37 @@
<div class="title-container">
<div class="title-container"> <h1>Create Account / New Session</h1>
<h1>Create Account / New Session</h1>
</div>
<div class="tab-container">
<div class="tabs">
<div class="tab active" data-tab="tab1">Scan QR Code</div>
<div class="tab" data-tab="tab2">Scan other device</div>
</div>
</div>
<div class="page-container">
<div id="tab1" class="card tab-content active">
<div class="card-description">
Scan with your other device :
</div>
<div class="pairing-request"></div>
<div class="card-image qr-code">
<img src="assets/qr_code.png" alt="QR Code" width="150" height="150">
</div>
<button id="copyBtn" class="sp-address-btn"></button>
<div class="card-image emoji-display" id="emoji-display"></div>
</div>
<div class="separator"></div>
<div id="tab2" class="card tab-content">
<div class="card-description">
Scan your other device :
</div>
<div class="card-image camera-card">
<img id="scanner" src="assets/camera.jpg" alt="QR Code" width="150" height="150">
<div class="qr-code-scanner">
<div id="qr-reader" style="width:200px; display: contents;"></div>
<div id="qr-reader-results"></div>
</div>
</div>
<p>Or</p>
<input type="text" id="addressInput" placeholder="Paste address">
<div id="emoji-display-2"></div>
<button id="okButton" style="display:none;">OK</button>
</div>
<!-- <div id="modal" class="modal">
<div class="modal-content">
<div class="modal-title">Login</div>
<div class="confirmation-box">Waiting for confirmation...</div>
</div>
</div> -->
</div> </div>
<div class="tab-container">
<div class="tabs">
<div class="tab active" data-tab="tab1">Scan QR Code</div>
<div class="tab" data-tab="tab2">Scan other device</div>
</div>
</div>
<div class="page-container">
<div id="tab1" class="card tab-content active">
<div class="card-description">Scan with your other device :</div>
<div class="pairing-request"></div>
<div class="card-image qr-code">
<img src="assets/qr_code.png" alt="QR Code" width="150" height="150" />
</div>
<button id="copyBtn" class="sp-address-btn"></button>
<div class="card-image emoji-display" id="emoji-display"></div>
</div>
<div class="separator"></div>
<div id="tab2" class="card tab-content">
<div class="card-description">Scan your other device :</div>
<div class="card-image camera-card">
<img id="scanner" src="assets/camera.jpg" alt="QR Code" width="150" height="150" />
<div class="qr-code-scanner">
<div id="qr-reader" style="width: 200px; display: contents"></div>
<div id="qr-reader-results"></div>
</div>
</div>
<p>Or</p>
<input type="text" id="addressInput" placeholder="Paste address" />
<div id="emoji-display-2"></div>
<button id="okButton" style="display: none">OK</button>
</div>
</div>

5
src/pages/process-element/process-element.html
View File

@ -1,8 +1,5 @@
<div class="title-container"> <div class="title-container">
<h1>Process {{processTitle}}</h1> <h1>Process {{processTitle}}</h1>
</div> </div>
<div class="process-container"> <div class="process-container"></div>
</div>

19
src/pages/process/process.html
View File

@ -1,22 +1,19 @@
<div class="title-container"> <div class="title-container">
<h1>Process Selection</h1> <h1>Process Selection</h1>
</div> </div>
<div class="process-container"> <div class="process-container">
<div class="process-card"> <div class="process-card">
<div class="process-card-description"> <div class="process-card-description">
<div class="input-container"> <div class="input-container">
<select multiple data-multi-select-plugin id="autocomplete" placeholder="Filter processes..." class="select-field"> <select multiple data-multi-select-plugin id="autocomplete" placeholder="Filter processes..." class="select-field"></select>
</select>
<label for="autocomplete" class="input-label">Filter processes :</label> <label for="autocomplete" class="input-label">Filter processes :</label>
<div class="selected-processes"></div> <div class="selected-processes"></div>
</div> </div>
<div class="process-card-content"> <div class="process-card-content"></div>
</div>
<div class="process-card-action">
<a class="btn" onclick="goToProcessPage()">OK</a>
</div> </div>
</div> </div>
<div class="process-card-action">
<a class="btn" onclick="goToProcessPage()">OK</a>
</div>
</div> </div>

23
src/scanner.js
View File

@ -1,16 +1,13 @@
function onScanSuccess(decodedText, decodedResult) { function onScanSuccess(decodedText, decodedResult) {
// handle the scanned code as you like, for example: // handle the scanned code as you like, for example:
console.log(`Code matched = ${decodedText}`, decodedResult); console.log(`Code matched = ${decodedText}`, decodedResult);
} }
function onScanFailure(error) { function onScanFailure(error) {
// handle scan failure, usually better to ignore and keep scanning. // handle scan failure, usually better to ignore and keep scanning.
// for example: // for example:
console.warn(`Code scan error = ${error}`); console.warn(`Code scan error = ${error}`);
} }
let html5QrcodeScanner = new Html5QrcodeScanner( let html5QrcodeScanner = new Html5QrcodeScanner('reader', { fps: 10, qrbox: { width: 250, height: 250 } }, /* verbose= */ false);
"reader", html5QrcodeScanner.render(onScanSuccess, onScanFailure);
{ fps: 10, qrbox: {width: 250, height: 250} },
/* verbose= */ false);
html5QrcodeScanner.render(onScanSuccess, onScanFailure);

82
src/service-workers/database.worker.js
View File

@ -1,58 +1,60 @@
import Database from '../services/database.service'; import Database from '../services/database.service';
self.addEventListener('install', (event) => { self.addEventListener('install', (event) => {
event.waitUntil(self.skipWaiting()); // Activate worker immediately event.waitUntil(self.skipWaiting()); // Activate worker immediately
}); });
self.addEventListener('activate', (event) => { self.addEventListener('activate', (event) => {
event.waitUntil(self.clients.claim()); // Become available to all pages event.waitUntil(self.clients.claim()); // Become available to all pages
}); });
// Event listener for messages from clients // Event listener for messages from clients
self.addEventListener('message', async (event) => { self.addEventListener('message', async (event) => {
const data = event.data; const data = event.data;
const db = await Database.getInstance(); const db = await Database.getInstance();
if (data.type === 'ADD_OBJECT') { if (data.type === 'ADD_OBJECT') {
try { try {
const { storeName, object, key } = data.payload; const { storeName, object, key } = data.payload;
const db = await openDatabase(); const db = await openDatabase();
const tx = db.transaction(storeName, 'readwrite'); const tx = db.transaction(storeName, 'readwrite');
const store = tx.objectStore(storeName); const store = tx.objectStore(storeName);
console.log("🚀 ~ self.addEventListener ~ store:", store, storeName, key, object) await store.put(object);
await store.put(object); event.ports[0].postMessage({ status: 'success', message: 'Object added or replaced successfully' });
event.ports[0].postMessage({ status: 'success', message: 'Object added or replaced successfully' }); } catch (error) {
} catch(error) { event.ports[0].postMessage({ status: 'error', message: error.message });
event.ports[0].postMessage({ status: 'error', message: error.message });
}
} }
}
if (data.type === 'GET_OBJECT') { if (data.type === 'GET_OBJECT') {
const { storeName, key } = data.payload; const { storeName, key } = data.payload;
const db = await openDatabase(); const db = await openDatabase();
const tx = db.transaction(storeName, 'readonly'); const tx = db.transaction(storeName, 'readonly');
const store = tx.objectStore(storeName); const store = tx.objectStore(storeName);
const result = await store.get(key); const result = await new Promise((resolve, reject) => {
const getRequest = store.get(key);
event.ports[0].postMessage({ type: 'GET_OBJECT_RESULT', payload: result }); getRequest.onsuccess = (event) => resolve(getRequest.result);
} getRequest.onerror = (event) => reject(getRequest.error);
});
event.ports[0].postMessage({ type: 'GET_OBJECT_RESULT', payload: result });
}
}); });
async function openDatabase() { async function openDatabase() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const request = indexedDB.open('4nk', 1); const request = indexedDB.open('4nk', 1);
request.onerror = (event) => { request.onerror = (event) => {
reject(request.error); reject(request.error);
}; };
request.onsuccess = (event) => { request.onsuccess = (event) => {
resolve(request.result); resolve(request.result);
}; };
request.onupgradeneeded = (event) => { request.onupgradeneeded = (event) => {
const db = event.target.result; const db = event.target.result;
if (!db.objectStoreNames.contains('wallet')) { if (!db.objectStoreNames.contains('wallet')) {
db.createObjectStore('wallet', { keyPath: 'pre_id' }); db.createObjectStore('wallet', { keyPath: 'pre_id' });
} }
}; };
}); });
} }

34
src/services/database.service.ts
View File

@ -15,21 +15,18 @@ class Database {
AnkProcess: { AnkProcess: {
name: 'process', name: 'process',
options: { keyPath: 'id' }, options: { keyPath: 'id' },
indices: [ indices: [],
{
name: 'by_name',
keyPath: 'name',
options: {
unique: true,
},
},
],
}, },
AnkMessages: { AnkMessages: {
name: 'messages', name: 'messages',
options: { keyPath: 'id' }, options: { keyPath: 'id' },
indices: [], indices: [],
}, },
AnkProcessData: {
name: 'process-data',
options: { keyPath: 'id' },
indices: [],
},
}; };
// Private constructor to prevent direct instantiation from outside // Private constructor to prevent direct instantiation from outside
@ -105,6 +102,8 @@ class Database {
this.serviceWorkerRegistration = registration; this.serviceWorkerRegistration = registration;
this.checkForUpdates();
// Set up the message channels // Set up the message channels
this.messageChannel.port1.onmessage = this.handleAddObjectResponse; this.messageChannel.port1.onmessage = this.handleAddObjectResponse;
this.messageChannelForGet.port1.onmessage = this.handleGetObjectResponse; this.messageChannelForGet.port1.onmessage = this.handleGetObjectResponse;
@ -115,6 +114,23 @@ class Database {
} }
} }
} }
private async checkForUpdates() {
if (this.serviceWorkerRegistration) {
// Check for updates to the service worker
try {
await this.serviceWorkerRegistration.update();
// If there's a new worker waiting, activate it immediately
if (this.serviceWorkerRegistration.waiting) {
this.serviceWorkerRegistration.waiting.postMessage({ type: 'SKIP_WAITING' });
}
} catch (error) {
console.error('Error checking for service worker updates:', error);
}
}
}
private handleAddObjectResponse = (event: MessageEvent) => { private handleAddObjectResponse = (event: MessageEvent) => {
console.log('Received response from service worker (ADD_OBJECT):', event.data); console.log('Received response from service worker (ADD_OBJECT):', event.data);
}; };

2
src/services/service.ts
View File

@ -226,7 +226,7 @@ export default class Services {
localStorage.setItem(msg.id.toString(), JSON.stringify(msg)); localStorage.setItem(msg.id.toString(), JSON.stringify(msg));
const db = await Database.getInstance(); const db = await Database.getInstance();
db.addObject({ db.addObject({
storeName: 'process', storeName: 'messages',
object: { id: msg.id.toString(), msg }, object: { id: msg.id.toString(), msg },
key: msg.id.toString(), key: msg.id.toString(),
}); });