From a5e1d0cd7942e0ef49e08a044fea806d0a572f00 Mon Sep 17 00:00:00 2001 From: AnisHADJARAB Date: Thu, 12 Dec 2024 15:41:25 +0000 Subject: [PATCH] link diffs from db to notification to modal --- src/components/header/header.ts | 10 ++- .../validation-modal/validation-modal.html | 3 - .../validation-modal/validation-modal.ts | 8 ++- src/service-workers/database.worker.js | 72 +++++++++++++++++-- src/services/modal.service.ts | 13 +++- src/services/service.ts | 24 +++++-- 6 files changed, 111 insertions(+), 19 deletions(-) diff --git a/src/components/header/header.ts b/src/components/header/header.ts index 863f02d..7c3fca3 100755 --- a/src/components/header/header.ts +++ b/src/components/header/header.ts @@ -1,3 +1,4 @@ +import ModalService from '~/services/modal.service'; import { INotification } from '../../models/notification.model'; import { currentRoute, navigate } from '../../router'; import Services from '../../services/service'; @@ -81,12 +82,17 @@ async function setNotification(notifications: any[]): Promise { for (const notif of notifications) { const notifElement = document.createElement('div'); notifElement.className = 'notification-element'; - notifElement.setAttribute('notif-id', notif.states[0]?.commited_in.toString()); + notifElement.setAttribute('notif-id', notif.processId); notifElement.innerHTML = ` -
${notif.states[0]?.commited_in}
+
Validation required :
+
${notif.processId}
`; // this.addSubscription(notifElement, 'click', 'goToProcessPage') notificationBoard.appendChild(notifElement); + notifElement.addEventListener('click', async () => { + const modalService = await ModalService.getInstance() + modalService.injectValidationModal(notif) + }) } } else { noNotifications.style.display = 'block'; diff --git a/src/components/validation-modal/validation-modal.html b/src/components/validation-modal/validation-modal.html index 24af5c6..409c189 100755 --- a/src/components/validation-modal/validation-modal.html +++ b/src/components/validation-modal/validation-modal.html @@ -1,7 +1,4 @@ -
Validate
diff --git a/src/components/validation-modal/validation-modal.ts b/src/components/validation-modal/validation-modal.ts index 4c409d9..2076c11 100755 --- a/src/components/validation-modal/validation-modal.ts +++ b/src/components/validation-modal/validation-modal.ts @@ -1,3 +1,5 @@ +import ModalService from "~/services/modal.service"; + document.querySelectorAll('.expansion-panel-header').forEach(header => { header.addEventListener('click', function(event) { const target = event.target as HTMLElement @@ -6,8 +8,10 @@ document.querySelectorAll('.expansion-panel-header').forEach(header => { }); }); -function validate() { +async function validate() { console.log('==> VALIDATE') + const modalservice = await ModalService.getInstance() + modalservice.closeValidationModal() } -window.validate = validate \ No newline at end of file +(window as any).validate = validate \ No newline at end of file diff --git a/src/service-workers/database.worker.js b/src/service-workers/database.worker.js index 0d56a3e..8e160ed 100755 --- a/src/service-workers/database.worker.js +++ b/src/service-workers/database.worker.js @@ -67,18 +67,76 @@ async function openDatabase() { async function getAllItemsWithFlag() { const db = await openDatabase(); - const tx = db.transaction('processes', 'readonly'); - const store = tx.objectStore('processes'); + + // Function to get all processes because it is asynchronous + const getAllProcesses = () => { + return new Promise((resolve, reject) => { + const tx = db.transaction('processes', 'readonly'); + const store = tx.objectStore('processes'); + const request = store.openCursor(); + const processes = []; + + request.onsuccess = (event) => { + const cursor = event.target.result; + if (cursor) { + processes.push({ key: cursor.key, ...cursor.value }); + cursor.continue(); + } else { + resolve(processes); + } + }; + + request.onerror = (event) => { + reject(event.target.error); + }; + }); + }; + + const allProcesses = await getAllProcesses(); + const tx = db.transaction('diffs', 'readonly'); + const store = tx.objectStore('diffs'); + return new Promise((resolve, reject) => { const request = store.getAll(); request.onsuccess = (event) => { - const allItems = event.target.result; - const itemsWithFlag = allItems.filter(item => item); - resolve(itemsWithFlag); + const allItems = event.target.result; + const itemsWithFlag = allItems.filter(item => !item.need_validation); + + const processMap = {}; + + for (const diff of itemsWithFlag) { + const currentProcess = allProcesses.find(item => { + return item.states.some(state => state.merkle_root === diff.new_state_merkle_root); + }); + + if (currentProcess) { + const processKey = currentProcess.merkle_root; + + if (!processMap[processKey]) { + processMap[processKey] = { + process: currentProcess.states, + processId: currentProcess.key, + diffs: [] + }; + } + processMap[processKey].diffs.push(diff); + } + } + + const results = Object.values(processMap).map(entry => { + return { + process: entry.process, + processId: entry.processId, + diffs: entry.diffs + }; + }); + + resolve(results); }; + request.onerror = (event) => { - reject(event.target.error); + reject(event.target.error); }; -}); + }); } diff --git a/src/services/modal.service.ts b/src/services/modal.service.ts index f2ea7af..81a5f9c 100755 --- a/src/services/modal.service.ts +++ b/src/services/modal.service.ts @@ -52,7 +52,7 @@ export default class ModalService { } } - async injectValidationModal() { + async injectValidationModal(processDiff: any) { const container = document.querySelector('#containerId'); if (container) { let html = await fetch('/src/components/validation-modal/validation-modal.html').then((res) => res.text()); @@ -60,15 +60,26 @@ export default class ModalService { // Dynamically load the header JS const script = document.createElement('script'); + script.id = 'validation-modal-script' script.src = '/src/components/validation-modal/validation-modal.ts'; script.type = 'module'; document.head.appendChild(script); const css = document.createElement('style'); + css.id = 'validation-modal-css' css.innerText = validationModalStyle; document.head.appendChild(css); } } + async closeValidationModal() { + const script = document.querySelector('#validation-modal-script') + const css = document.querySelector('#validation-modal-css') + const component = document.querySelector('#validation-modal') + script?.remove() + css?.remove() + component?.remove() + } + // this is kind of too specific for pairing though public async openPairingConfirmationModal(roleDefinition: Record, commitmentTx: string, merkleRoot: string) { // pairing specifics diff --git a/src/services/service.ts b/src/services/service.ts index 7796674..89b9a54 100755 --- a/src/services/service.ts +++ b/src/services/service.ts @@ -3,7 +3,7 @@ import { INotification } from '~/models/notification.model'; import { IProcess } from '~/models/process.model'; // import Database from './database'; import { initWebsocket, sendMessage } from '../websockets'; -import { ApiReturn, Member, PcdUpdates, Process, RoleDefinition } from '../../pkg/sdk_client'; +import { ApiReturn, Member, Process, RoleDefinition, UserDiff } from '../../pkg/sdk_client'; import ModalService from './modal.service'; import Database from './database.service'; @@ -15,7 +15,7 @@ export default class Services { private static initializing: Promise | null = null; private static instance: Services; private currentProcess: string | null = null; - private pendingUpdates: PcdUpdates | null = null; + private pendingUpdates: any | null = null; private currentUpdateMerkleRoot: string | null = null; private localAddress: string | null = null; private pairedAddresses: string[] = []; @@ -147,6 +147,7 @@ export default class Services { min_sig_member: 1.0, }, ], + storages: [] }, }, session_privkey: newKey['private_key'], @@ -263,7 +264,7 @@ export default class Services { public getUpdateProposals(commitmentOutpoint: string) { try { - const proposals: PcdUpdates = this.sdkClient.get_update_proposals(commitmentOutpoint); + const proposals: any = this.sdkClient.get_update_proposals(commitmentOutpoint); if (proposals.decrypted_pcds && proposals.decrypted_pcds.length != 0) { this.currentProcess = commitmentOutpoint; this.pendingUpdates = proposals; @@ -316,11 +317,12 @@ export default class Services { // Save process to storage try { await this.saveProcess(updatedProcess.commitment_tx, updatedProcess.current_process); + await this.saveDiffs(updatedProcess.new_diffs); } catch (e) { throw e; } - if (updatedProcess.new_state) { + if ((updatedProcess as any).new_state) { this.currentProcess = updatedProcess.commitment_tx; this.getUpdateProposals(this.currentProcess!); @@ -492,6 +494,20 @@ export default class Services { throw new Error(`Failed to save process: ${e}`) } } + public async saveDiffs(diffs: UserDiff[]) { + const db = await Database.getInstance(); + try { + for(const diff of diffs) { + await db.addObject({ + storeName: 'diffs', + object: diff, + key: diff.value_commitment, + }); + } + } catch (e) { + throw new Error(`Failed to save process: ${e}`) + } + } public async getProcess(commitedIn: string): Promise { const db = await Database.getInstance();