diff --git a/index.html b/index.html index 58c8aed..f7f60fb 100755 --- a/index.html +++ b/index.html @@ -12,7 +12,6 @@
-
diff --git a/public/style/4nk.css b/public/style/4nk.css index 30cf2ac..731c277 100755 --- a/public/style/4nk.css +++ b/public/style/4nk.css @@ -80,6 +80,7 @@ body { .nav-wrapper { position: fixed; + z-index: 2; background: radial-gradient(circle, white, var(--primary-color)); /* background-color: #CFD8DC; */ display: flex; diff --git a/src/components/header/header.ts b/src/components/header/header.ts index d04c9b0..863f02d 100755 --- a/src/components/header/header.ts +++ b/src/components/header/header.ts @@ -70,20 +70,20 @@ function hideSomeFunctionnalities() { } } -async function setNotification(notifications: INotification[]): Promise { +async function setNotification(notifications: any[]): Promise { const badge = document.querySelector('.notification-badge') as HTMLDivElement; const noNotifications = document.querySelector('.no-notification') as HTMLDivElement; if (notifications?.length) { badge.innerText = notifications.length.toString(); const notificationBoard = document.querySelector('.notification-board') as HTMLDivElement; + notificationBoard.querySelectorAll('.notification-element')?.forEach(elem => elem.remove()) noNotifications.style.display = 'none'; for (const notif of notifications) { const notifElement = document.createElement('div'); notifElement.className = 'notification-element'; - notifElement.setAttribute('notif-id', notif.id.toString()); + notifElement.setAttribute('notif-id', notif.states[0]?.commited_in.toString()); notifElement.innerHTML = ` -
${notif.title}
-
${notif.description}
+
${notif.states[0]?.commited_in}
`; // this.addSubscription(notifElement, 'click', 'goToProcessPage') notificationBoard.appendChild(notifElement); diff --git a/src/components/validation-modal/validation-modal.css b/src/components/validation-modal/validation-modal.css new file mode 100644 index 0000000..fbdf842 --- /dev/null +++ b/src/components/validation-modal/validation-modal.css @@ -0,0 +1,70 @@ +.validation-modal { + display: block; /* Show the modal for demo purposes */ + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgb(0,0,0); + background-color: rgba(0,0,0,0.4); + padding-top: 60px; +} +.modal-content { + background-color: #fefefe; + margin: 5% auto; + padding: 20px; + border: 1px solid #888; + width: 80%; + height: fit-content; +} +.modal-title { + font-size: 24px; + font-weight: bold; + margin-bottom: 20px; +} +.validation-box { + margin-bottom: 15px; + width: 100%; +} +.expansion-panel-header { + background-color: #e0e0e0; + padding: 10px; + cursor: pointer; +} +.expansion-panel-body { + display: none; + background-color: #fafafa; + padding: 10px; + border-top: 1px solid #ddd; +} +.expansion-panel-body pre { + background-color: #f6f8fa; + padding: 10px; + border-left: 4px solid #d1d5da; + overflow-x: auto; +} +.diff { + display: flex; + justify-content: space-between; + margin-bottom: 10px; +} +.diff-side { + width: 48%; + padding: 10px; +} +.diff-old { + background-color: #fee; + border: 1px solid #f00; +} +.diff-new { + background-color: #e6ffe6; + border: 1px solid #0f0; +} +.radio-buttons { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 10px; +} \ No newline at end of file diff --git a/src/components/validation-modal/validation-modal.html b/src/components/validation-modal/validation-modal.html new file mode 100755 index 0000000..24af5c6 --- /dev/null +++ b/src/components/validation-modal/validation-modal.html @@ -0,0 +1,62 @@ + + +
+
+
Validate
+
+
+
Validation 1
+
+
+ + +
+
+
+ 
-old line
+
+
+ 
+new line
+
+
+
+
+ +
+
Validation 2
+
+
+ + +
+
+
+ 
-foo\n-bar
+
+
+ 
+baz
+
+
+
+
+ +
+
+ +
+
+
diff --git a/src/components/validation-modal/validation-modal.ts b/src/components/validation-modal/validation-modal.ts new file mode 100755 index 0000000..4c409d9 --- /dev/null +++ b/src/components/validation-modal/validation-modal.ts @@ -0,0 +1,13 @@ +document.querySelectorAll('.expansion-panel-header').forEach(header => { + header.addEventListener('click', function(event) { + const target = event.target as HTMLElement + const body = target.nextElementSibling as HTMLElement; + if(body?.style) body.style.display = body.style.display === 'block' ? 'none' : 'block'; + }); +}); + +function validate() { + console.log('==> VALIDATE') +} + +window.validate = validate \ No newline at end of file diff --git a/src/models/notification.model.ts b/src/models/notification.model.ts index c99c41e..3ef66d6 100755 --- a/src/models/notification.model.ts +++ b/src/models/notification.model.ts @@ -17,3 +17,14 @@ export interface IMessage { id: string; message: any; } + +export interface UserDiff { + new_state_merkle_root: string, // TODO add a merkle proof that the new_value belongs to that state + field: string, + previous_value: string, + new_value: string, + notify_user: boolean, + need_validation: boolean, + // validated: bool, + proof: any, // This is only validation (or refusal) for that specific diff, not the whole state. It can't be commited as such +} \ No newline at end of file diff --git a/src/pages/process-element/process-component.ts b/src/pages/process-element/process-component.ts new file mode 100644 index 0000000..6969c65 --- /dev/null +++ b/src/pages/process-element/process-component.ts @@ -0,0 +1,50 @@ +import processHtml from './process-element.html?raw' +import processScript from './process-element.ts?raw' +import processCss from '../../4nk.css?raw' +import { initProcessElement } from './process-element'; + +export class ProcessListComponent extends HTMLElement { + _callback: any; + id: string = ''; + zone: string = ''; + + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + } + + connectedCallback() { + console.log('CALLBACK PROCESS LIST PAGE') + this.render(); + setTimeout(() => { + initProcessElement(this.id, this.zone); + }, 500); + } + + set callback(fn) { + if (typeof fn === 'function') { + this._callback = fn; + } else { + console.error('Callback is not a function'); + } + } + + get callback() { + return this._callback; + } + + render() { + if(this.shadowRoot) this.shadowRoot.innerHTML = ` + ${processHtml} +