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

link diffs to validation modal and show and prettify

Browse Source
This commit is contained in:
AnisHADJARAB 2024-12-17 08:28:39 +00:00 committed by Sosthene
parent d64efbd6a0
commit 2124388cc5
46 changed files with 6581 additions and 6658 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

309
src/4nk.css
View File

@ -1,12 +1,9 @@
:host { :host {
--primary-color --primary-color: #3a506b;
: #3A506B;
/* Bleu métallique */ /* Bleu métallique */
--secondary-color --secondary-color: #b0bec5;
: #B0BEC5;
/* Gris acier */ /* Gris acier */
--accent-color --accent-color: #d68c45;
: #D68C45;
/* Cuivre */ /* Cuivre */
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
height: 100vh; height: 100vh;
@ -18,24 +15,24 @@ body {
padding: 0; padding: 0;
background-color: #f4f4f4; background-color: #f4f4f4;
background-image: url(../assets/bgd.webp); background-image: url(../assets/bgd.webp);
background-repeat:no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-blend-mode :soft-light; background-blend-mode: soft-light;
height: 100vh; height: 100vh;
} }
.message { .message {
margin: 30px 0; margin: 30px 0;
font-size: 14px; font-size: 14px;
overflow-wrap: anywhere; overflow-wrap: anywhere;
} }
.message strong{ .message strong {
font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif; font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif;
font-size: 20px; font-size: 20px;
} }
/** Modal Css */ /** Modal Css */
.modal { .modal {
display: none; display: none;
position: fixed; position: fixed;
top: 0; top: 0;
@ -46,9 +43,9 @@ body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 3; z-index: 3;
} }
.modal-content { .modal-content {
width: 55%; width: 55%;
height: 30%; height: 30%;
background-color: white; background-color: white;
@ -58,17 +55,17 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.modal-title { .modal-title {
margin: 0; margin: 0;
padding-bottom: 8px; padding-bottom: 8px;
width: 100%; width: 100%;
font-size: 0.9rem; font-size: 0.9rem;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }
.confirmation-box { .confirmation-box {
/* margin-top: 20px; */ /* margin-top: 20px; */
align-content: center; align-content: center;
width: 70%; width: 70%;
@ -78,22 +75,24 @@ body {
color: #333333; color: #333333;
top: 5%; top: 5%;
position: relative; position: relative;
} }
.nav-wrapper {
.nav-wrapper {
position: fixed; position: fixed;
background: radial-gradient(circle, white, var(--primary-color)); background: radial-gradient(circle, white, var(--primary-color));
/* background-color: #CFD8DC; */ /* background-color: #CFD8DC; */
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
color: #37474F; color: #37474f;
height: 9vh; height: 9vh;
width: 100vw; width: 100vw;
left: 0; left: 0;
top: 0; top: 0;
box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, .2), 0px 16px 24px 2px rgba(0, 0, 0, .14), 0px 6px 30px 5px rgba(0, 0, 0, .12); box-shadow:
0px 8px 10px -5px rgba(0, 0, 0, 0.2),
0px 16px 24px 2px rgba(0, 0, 0, 0.14),
0px 6px 30px 5px rgba(0, 0, 0, 0.12);
.nav-right-icons { .nav-right-icons {
display: flex; display: flex;
@ -101,7 +100,8 @@ body {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
.notification-bell, .burger-menu { .notification-bell,
.burger-menu {
z-index: 3; z-index: 3;
height: 20px; height: 20px;
width: 20px; width: 20px;
@ -109,8 +109,8 @@ body {
} }
.notification-badge { .notification-badge {
position: absolute; position: absolute;
top: -.7rem; top: -0.7rem;
left: -.8rem; left: -0.8rem;
background-color: red; background-color: red;
color: white; color: white;
border-radius: 50%; border-radius: 50%;
@ -135,19 +135,19 @@ body {
display: none; display: none;
.notification-element { .notification-element {
padding: .8rem 0; padding: 0.8rem 0;
width: 100%; width: 100%;
&:hover { &:hover {
background-color: rgba(26, 28, 24, .08); background-color: rgba(26, 28, 24, 0.08);
} }
} }
.notification-element:not(:last-child) { .notification-element:not(:last-child) {
border-bottom: 1px solid; border-bottom: 1px solid;
} }
} }
} }
.brand-logo { .brand-logo {
height: 100%; height: 100%;
width: 100vw; width: 100vw;
align-content: center; align-content: center;
@ -159,35 +159,35 @@ body {
text-align: center; text-align: center;
font-size: 1.5em; font-size: 1.5em;
font-weight: bold; font-weight: bold;
} }
.container { .container {
text-align: center; text-align: center;
display: grid; display: grid;
height: 100vh; height: 100vh;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
gap: 10px; gap: 10px;
grid-auto-rows: 10vh 15vh 1fr; grid-auto-rows: 10vh 15vh 1fr;
} }
.title-container { .title-container {
grid-column: 2 / 7; grid-column: 2 / 7;
grid-row: 2; grid-row: 2;
} }
.page-container { .page-container {
grid-column: 2 / 7; grid-column: 2 / 7;
grid-row: 3 ; grid-row: 3;
justify-content: center; justify-content: center;
display: flex; display: flex;
padding: 1rem; padding: 1rem;
box-sizing: border-box; box-sizing: border-box;
max-height: 60vh; max-height: 60vh;
} }
h1 { h1 {
font-size: 2em; font-size: 2em;
margin: 20px 0; margin: 20px 0;
} }
@media only screen and (min-width: 600px) { @media only screen and (min-width: 600px) {
.tab-container { .tab-container {
display: none; display: none;
} }
@ -197,7 +197,7 @@ body {
} }
.process-container { .process-container {
grid-column: 3 / 6; grid-column: 3 / 6;
grid-row: 3 ; grid-row: 3;
.card { .card {
min-width: 40vw; min-width: 40vw;
@ -205,7 +205,7 @@ body {
} }
.separator { .separator {
width: 2px; width: 2px;
background-color: #78909C; background-color: #78909c;
height: 80%; height: 80%;
margin: 0 0.5em; margin: 0 0.5em;
} }
@ -216,12 +216,12 @@ body {
align-items: center; align-items: center;
height: 80%; height: 80%;
} }
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.process-container { .process-container {
grid-column: 2 / 7; grid-column: 2 / 7;
grid-row: 3 ; grid-row: 3;
} }
.container { .container {
grid-auto-rows: 10vh 15vh 15vh 1fr; grid-auto-rows: 10vh 15vh 15vh 1fr;
@ -232,7 +232,7 @@ body {
} }
.page-container { .page-container {
grid-column: 2 / 7; grid-column: 2 / 7;
grid-row: 4 ; grid-row: 4;
} }
.separator { .separator {
display: none; display: none;
@ -244,7 +244,7 @@ body {
z-index: 1; z-index: 1;
border-bottom-style: solid; border-bottom-style: solid;
border-bottom-width: 1px; border-bottom-width: 1px;
border-bottom-color: #E0E4D6; border-bottom-color: #e0e4d6;
} }
.tab { .tab {
@ -255,7 +255,7 @@ body {
font-size: 1rem; font-size: 1rem;
color: #6200ea; color: #6200ea;
&:hover { &:hover {
background-color: rgba(26, 28, 24, .08); background-color: rgba(26, 28, 24, 0.08);
} }
} }
.tab.active { .tab.active {
@ -278,66 +278,64 @@ body {
width: 80%; width: 80%;
height: 20%; height: 20%;
} }
} }
.qr-code { .qr-code {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 200px; height: 200px;
} }
.emoji-display { .emoji-display {
font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif; font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif;
font-size: 20px; font-size: 20px;
}
} #emoji-display-2 {
#emoji-display-2{
margin-top: 30px; margin-top: 30px;
font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif; font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif;
font-size: 20px; font-size: 20px;
} }
#okButton{ #okButton {
margin-bottom: 2em; margin-bottom: 2em;
cursor: pointer; cursor: pointer;
background-color: #D0D0D7; background-color: #d0d0d7;
color: white; color: white;
border-style: none; border-style: none;
border-radius: 5px; border-radius: 5px;
color: #000; color: #000;
padding: 2px; padding: 2px;
margin-top: 10px; margin-top: 10px;
} }
.pairing-request { .pairing-request {
font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif; font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif;
font-size: 14px; font-size: 14px;
margin-top: 0px; margin-top: 0px;
} }
.sp-address-btn { .sp-address-btn {
margin-bottom: 2em; margin-bottom: 2em;
cursor: pointer; cursor: pointer;
background-color: #D0D0D7; background-color: #d0d0d7;
color: white; color: white;
border-style: none; border-style: none;
border-radius: 5px; border-radius: 5px;
color: #000; color: #000;
padding: 2px; padding: 2px;
}
} .camera-card {
.camera-card {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
/* height: 200px; */ /* height: 200px; */
} }
.btn { .btn {
display: inline-block; display: inline-block;
padding: 10px 20px; padding: 10px 20px;
background-color: var(--primary-color); background-color: var(--primary-color);
@ -346,14 +344,13 @@ body {
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
} }
.btn:hover { .btn:hover {
background-color: #3700b3; background-color: #3700b3;
} }
.card {
.card {
min-width: 300px; min-width: 300px;
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0;
border-radius: 8px; border-radius: 8px;
@ -370,17 +367,16 @@ body {
justify-content: flex-start; justify-content: flex-start;
padding: 1rem; padding: 1rem;
overflow-y: auto; overflow-y: auto;
}
} .card-content {
.card-content {
flex-grow: 1; flex-grow: 1;
flex-direction: column; flex-direction: column;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
text-align: left; text-align: left;
font-size: .8em; font-size: 0.8em;
position: relative; position: relative;
left: 2vw; left: 2vw;
width: 90%; width: 90%;
@ -389,17 +385,17 @@ body {
padding: 1rem 0; padding: 1rem 0;
} }
.process-element { .process-element {
padding: .4rem 0; padding: 0.4rem 0;
&:hover { &:hover {
background-color: rgba(26, 28, 24, .08); background-color: rgba(26, 28, 24, 0.08);
} }
&.selected { &.selected {
background-color: rgba(26, 28, 24, .08); background-color: rgba(26, 28, 24, 0.08);
}
} }
} }
}
.card-description { .card-description {
padding: 20px; padding: 20px;
font-size: 1rem; font-size: 1rem;
color: #333; color: #333;
@ -409,14 +405,13 @@ body {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-bottom: 0px; margin-bottom: 0px;
} }
.card-action {
.card-action {
width: 100%; width: 100%;
} }
.menu-content { .menu-content {
display: none; display: none;
position: absolute; position: absolute;
top: 3.4rem; top: 3.4rem;
@ -425,48 +420,46 @@ body {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
} }
.menu-content a { .menu-content a {
display: block; display: block;
padding: 10px 20px; padding: 10px 20px;
text-decoration: none; text-decoration: none;
color: #333; color: #333;
border-bottom: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;
&:hover { &:hover {
background-color: rgba(26, 28, 24, .08); background-color: rgba(26, 28, 24, 0.08);
}
} }
}
.menu-content a:last-child { .menu-content a:last-child {
border-bottom: none; border-bottom: none;
} }
.qr-code-scanner { .qr-code-scanner {
display: none; display: none;
} }
/* QR READER */
/* QR READER */ #qr-reader div {
#qr-reader div {
position: inherit; position: inherit;
} }
#qr-reader div img{ #qr-reader div img {
top: 15px ; top: 15px;
right: 25px; right: 25px;
margin-top: 5px; margin-top: 5px;
} }
/* INPUT CSS **/
/* INPUT CSS **/ .input-container {
.input-container {
position: relative; position: relative;
width: 100%; width: 100%;
background-color: #ECEFF1; background-color: #eceff1;
} }
.input-field { .input-field {
width: 36vw; width: 36vw;
padding: 10px 0; padding: 10px 0;
font-size: 1rem; font-size: 1rem;
@ -475,13 +468,13 @@ body {
outline: none; outline: none;
background: transparent; background: transparent;
transition: border-color 0.3s; transition: border-color 0.3s;
} }
.input-field:focus { .input-field:focus {
border-bottom: 2px solid #6200ea; border-bottom: 2px solid #6200ea;
} }
.input-label { .input-label {
position: absolute; position: absolute;
margin-top: -0.5em; margin-top: -0.5em;
top: 0; top: 0;
@ -490,32 +483,37 @@ body {
font-size: 1rem; font-size: 1rem;
color: #999; color: #999;
pointer-events: none; pointer-events: none;
transition: transform 0.3s, color 0.3s, font-size 0.3s; transition:
} transform 0.3s,
color 0.3s,
font-size 0.3s;
}
.input-field:focus + .input-label, .input-field:focus + .input-label,
.input-field:not(:placeholder-shown) + .input-label { .input-field:not(:placeholder-shown) + .input-label {
transform: translateY(-20px); transform: translateY(-20px);
font-size: 0.8em; font-size: 0.8em;
color: #6200ea; color: #6200ea;
} }
.input-underline { .input-underline {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
width: 0; width: 0;
height: 2px; height: 2px;
background-color: #6200ea; background-color: #6200ea;
transition: width 0.3s, left 0.3s; transition:
} width 0.3s,
left 0.3s;
}
.input-field:focus ~ .input-underline { .input-field:focus ~ .input-underline {
width: 100%; width: 100%;
left: 0; left: 0;
} }
.dropdown-content { .dropdown-content {
position: absolute; position: absolute;
flex-direction: column; flex-direction: column;
top: 100%; top: 100%;
@ -529,22 +527,19 @@ body {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: none; display: none;
z-index: 1; z-index: 1;
} }
.dropdown-content span { .dropdown-content span {
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
} }
.dropdown-content span:hover { .dropdown-content span:hover {
background-color: #f0f0f0; background-color: #f0f0f0;
} }
/** AUTOCOMPLETE **/
/** AUTOCOMPLETE **/
select[data-multi-select-plugin] { select[data-multi-select-plugin] {
display: none !important; display: none !important;
@ -562,8 +557,12 @@ select[data-multi-select-plugin] {
flex-direction: row; flex-direction: row;
height: auto; height: auto;
width: 100%; width: 100%;
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; -o-transition:
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; border-color ease-in-out 0.15s,
box-shadow ease-in-out 0.15s;
transition:
border-color ease-in-out 0.15s,
box-shadow ease-in-out 0.15s;
} }
.autocomplete-list { .autocomplete-list {
@ -571,7 +570,7 @@ select[data-multi-select-plugin] {
} }
.multi-select-component:focus-within { .multi-select-component:focus-within {
box-shadow: inset 0px 0px 0px 2px #78ABFE; box-shadow: inset 0px 0px 0px 2px #78abfe;
} }
.multi-select-component .btn-group { .multi-select-component .btn-group {
@ -650,7 +649,7 @@ select[data-multi-select-plugin] {
} }
.dropdown-icon.active { .dropdown-icon.active {
transform: rotateX(180deg) transform: rotateX(180deg);
} }
.search-container .dropdown-icon { .search-container .dropdown-icon {
@ -666,7 +665,7 @@ select[data-multi-select-plugin] {
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
/* SVG background image */ /* SVG background image */
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23818181%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23818181%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23818181%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23818181%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E');
background-position: center; background-position: center;
background-size: 10px; background-size: 10px;
background-repeat: no-repeat; background-repeat: no-repeat;
@ -684,8 +683,8 @@ select[data-multi-select-plugin] {
border: 1px solid #ccc; border: 1px solid #ccc;
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
} }
.search-container ul :focus { .search-container ul :focus {
@ -710,7 +709,6 @@ select[data-multi-select-plugin] {
border-radius: 4px 0px 0 0; border-radius: 4px 0px 0 0;
} }
.search-container ul li:hover.not-cursor { .search-container ul li:hover.not-cursor {
cursor: default; cursor: default;
} }
@ -718,7 +716,6 @@ select[data-multi-select-plugin] {
.search-container ul li:hover { .search-container ul li:hover {
color: #333; color: #333;
background-color: #f0f0f0; background-color: #f0f0f0;
;
border-color: #adadad; border-color: #adadad;
cursor: pointer; cursor: pointer;
} }
@ -729,8 +726,6 @@ select[data-multi-select-plugin] {
overflow-y: auto; overflow-y: auto;
} }
/**************************************** Process page card ******************************************************/ /**************************************** Process page card ******************************************************/
.process-card { .process-card {
min-width: 300px; min-width: 300px;
@ -748,12 +743,11 @@ select[data-multi-select-plugin] {
justify-content: space-between; justify-content: space-between;
padding: 1rem; padding: 1rem;
overflow-y: auto; overflow-y: auto;
} }
.process-card-content { .process-card-content {
text-align: left; text-align: left;
font-size: .8em; font-size: 0.8em;
position: relative; position: relative;
left: 2vw; left: 2vw;
width: 90%; width: 90%;
@ -762,16 +756,16 @@ select[data-multi-select-plugin] {
padding: 1rem 0; padding: 1rem 0;
} }
.process-element { .process-element {
padding: .4rem 0; padding: 0.4rem 0;
&:hover { &:hover {
background-color: rgba(26, 28, 24, .08); background-color: rgba(26, 28, 24, 0.08);
} }
&.selected { &.selected {
background-color: rgba(26, 28, 24, .08); background-color: rgba(26, 28, 24, 0.08);
} }
} }
.selected-process-zone { .selected-process-zone {
background-color: rgba(26, 28, 24, .08); background-color: rgba(26, 28, 24, 0.08);
} }
} }
@ -782,7 +776,6 @@ select[data-multi-select-plugin] {
width: 90%; width: 90%;
} }
.process-card-action { .process-card-action {
width: 100%; width: 100%;
} }

25
src/components/header/header.ts
View File

@ -42,8 +42,7 @@ export async function initHeader() {
// Charger le profile-header // Charger le profile-header
const profileContainer = document.getElementById('profile-header-container'); const profileContainer = document.getElementById('profile-header-container');
if (profileContainer) { if (profileContainer) {
const profileHeaderHtml = await fetch('/src/components/profile-header/profile-header.html') const profileHeaderHtml = await fetch('/src/components/profile-header/profile-header.html').then((res) => res.text());
.then(res => res.text());
profileContainer.innerHTML = profileHeaderHtml; profileContainer.innerHTML = profileHeaderHtml;
// Initialiser les données du profil // Initialiser les données du profil
@ -77,7 +76,7 @@ async function setNotification(notifications: any[]): Promise<void> {
if (notifications?.length) { if (notifications?.length) {
badge.innerText = notifications.length.toString(); badge.innerText = notifications.length.toString();
const notificationBoard = document.querySelector('.notification-board') as HTMLDivElement; const notificationBoard = document.querySelector('.notification-board') as HTMLDivElement;
notificationBoard.querySelectorAll('.notification-element')?.forEach(elem => elem.remove()) notificationBoard.querySelectorAll('.notification-element')?.forEach((elem) => elem.remove());
noNotifications.style.display = 'none'; noNotifications.style.display = 'none';
for (const notif of notifications) { for (const notif of notifications) {
const notifElement = document.createElement('div'); const notifElement = document.createElement('div');
@ -90,9 +89,9 @@ async function setNotification(notifications: any[]): Promise<void> {
// this.addSubscription(notifElement, 'click', 'goToProcessPage') // this.addSubscription(notifElement, 'click', 'goToProcessPage')
notificationBoard.appendChild(notifElement); notificationBoard.appendChild(notifElement);
notifElement.addEventListener('click', async () => { notifElement.addEventListener('click', async () => {
const modalService = await ModalService.getInstance() const modalService = await ModalService.getInstance();
modalService.injectValidationModal(notif) modalService.injectValidationModal(notif);
}) });
} }
} else { } else {
noNotifications.style.display = 'block'; noNotifications.style.display = 'block';
@ -125,11 +124,11 @@ async function loadUserProfile() {
} }
async function importJSON() { async function importJSON() {
const input = document.createElement('input'); const input = document.createElement('input');
input.type = 'file'; input.type = 'file';
input.accept = '.json'; input.accept = '.json';
input.onchange = async (e) => { input.onchange = async (e) => {
const file = (e.target as HTMLInputElement).files?.[0]; const file = (e.target as HTMLInputElement).files?.[0];
if (file) { if (file) {
const reader = new FileReader(); const reader = new FileReader();
@ -140,14 +139,14 @@ input.onchange = async (e) => {
await service.importJSON(content); await service.importJSON(content);
alert('Import réussi'); alert('Import réussi');
} catch (error) { } catch (error) {
alert('Erreur lors de l\'import: ' + error); alert("Erreur lors de l'import: " + error);
} }
}; };
reader.readAsText(file); reader.readAsText(file);
} }
}; };
input.click(); input.click();
} }
(window as any).importJSON = importJSON; (window as any).importJSON = importJSON;

4
src/components/profile-header/profile-header.html
View File

@ -1,8 +1,8 @@
<div class="avatar-section"> <div class="avatar-section">
<img src="https://via.placeholder.com/800x200" alt="Banner" class="banner-image"> <img src="https://via.placeholder.com/800x200" alt="Banner" class="banner-image" />
<div class="banner-content"> <div class="banner-content">
<div class="avatar-container"> <div class="avatar-container">
<img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" onclick="window.openAvatarPopup()"> <img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" onclick="window.openAvatarPopup()" />
</div> </div>
<div class="user-info"> <div class="user-info">
<span class="user-name">John</span> <span class="user-name">John</span>

23
src/components/qrcode-scanner/qrcode-scanner-component.ts
View File

@ -2,10 +2,10 @@ import QrScanner from 'qr-scanner';
import Services from '../../services/service'; import Services from '../../services/service';
import { prepareAndSendPairingTx } from '~/utils/sp-address.utils'; import { prepareAndSendPairingTx } from '~/utils/sp-address.utils';
export default class QrScannerComponent extends HTMLElement { export default class QrScannerComponent extends HTMLElement {
videoElement: any; videoElement: any;
wrapper: any wrapper: any;
qrScanner: any qrScanner: any;
constructor() { constructor() {
super(); super();
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
@ -29,8 +29,8 @@ import { prepareAndSendPairingTx } from '~/utils/sp-address.utils';
console.error('Video element not found!'); console.error('Video element not found!');
return; return;
} }
console.log("🚀 ~ QrScannerComponent ~ initializeScanner ~ this.videoElement:", this.videoElement) console.log('🚀 ~ QrScannerComponent ~ initializeScanner ~ this.videoElement:', this.videoElement);
this.qrScanner = new QrScanner(this.videoElement, result => this.onQrCodeScanned(result),{ this.qrScanner = new QrScanner(this.videoElement, (result) => this.onQrCodeScanned(result), {
highlightScanRegion: true, highlightScanRegion: true,
highlightCodeOutline: true, highlightCodeOutline: true,
}); });
@ -38,9 +38,8 @@ import { prepareAndSendPairingTx } from '~/utils/sp-address.utils';
try { try {
await QrScanner.hasCamera(); await QrScanner.hasCamera();
this.qrScanner.start(); this.qrScanner.start();
this.videoElement.style = 'height: 200px; width: 200px' this.videoElement.style = 'height: 200px; width: 200px';
this.shadowRoot?.appendChild(this.wrapper) this.shadowRoot?.appendChild(this.wrapper);
} catch (e) { } catch (e) {
console.error('No camera found or error starting the QR scanner', e); console.error('No camera found or error starting the QR scanner', e);
} }
@ -53,10 +52,10 @@ import { prepareAndSendPairingTx } from '~/utils/sp-address.utils';
// 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) {
// Call the sendPairingTx function with the extracted sp_address // Call the sendPairingTx function with the extracted sp_address
try { try {
await prepareAndSendPairingTx(spAddress) await prepareAndSendPairingTx(spAddress);
} catch (e) { } catch (e) {
console.error('Failed to pair:', e); console.error('Failed to pair:', e);
} }
@ -69,6 +68,6 @@ import { prepareAndSendPairingTx } from '~/utils/sp-address.utils';
this.qrScanner.destroy(); this.qrScanner.destroy();
} }
} }
} }
customElements.define('qr-scanner', QrScannerComponent); customElements.define('qr-scanner', QrScannerComponent);

4
src/components/validation-modal/validation-modal.css
View File

@ -7,8 +7,8 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
background-color: rgb(0,0,0); background-color: rgb(0, 0, 0);
background-color: rgba(0,0,0,0.4); background-color: rgba(0, 0, 0, 0.4);
padding-top: 60px; padding-top: 60px;
} }
.modal-content { .modal-content {

50
src/components/validation-modal/validation-modal.html
View File

@ -1,55 +1,7 @@
<div id="validation-modal" class="validation-modal"> <div id="validation-modal" class="validation-modal">
<div class="modal-content"> <div class="modal-content">
<div class="modal-title">Validate</div> <div class="modal-title">Validate Process {{processId}}</div>
<div class="validation-box"> <div class="validation-box">
<div class="expansion-panel">
<div class="expansion-panel-header">Validation 1</div>
<div class="expansion-panel-body">
<div class="radio-buttons">
<label>
<input type="radio" name="validation1" value="old">
Keep Old
</label>
<label>
<input type="radio" name="validation1" value="new">
Keep New
</label>
</div>
<div class="diff">
<div class="diff-side diff-old">
<pre>-old line</pre>
</div>
<div class="diff-side diff-new">
<pre>+new line</pre>
</div>
</div>
</div>
</div>
<div class="expansion-panel">
<div class="expansion-panel-header">Validation 2</div>
<div class="expansion-panel-body">
<div class="radio-buttons">
<label>
<input type="radio" name="validation2" value="old">
Keep Old
</label>
<label>
<input type="radio" name="validation2" value="new">
Keep New
</label>
</div>
<div class="diff">
<div class="diff-side diff-old">
<pre>-foo\n-bar</pre>
</div>
<div class="diff-side diff-new">
<pre>+baz</pre>
</div>
</div>
</div>
</div>
</div> </div>
<div class="modal-action"> <div class="modal-action">

65
src/components/validation-modal/validation-modal.ts
View File

@ -1,17 +1,56 @@
import ModalService from "~/services/modal.service"; import ModalService from '~/services/modal.service';
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';
});
});
async function validate() { async function validate() {
console.log('==> VALIDATE') console.log('==> VALIDATE');
const modalservice = await ModalService.getInstance() const modalservice = await ModalService.getInstance();
modalservice.closeValidationModal() modalservice.closeValidationModal();
} }
(window as any).validate = validate export async function initValidationModal(processDiffs: any) {
console.log("🚀 ~ initValidationModal ~ processDiffs:", processDiffs)
for(const diff of processDiffs.diffs) {
let diffs = ''
for(const value of diff) {
diffs+= `
<div class="radio-buttons">
<label>
<input type="radio" name="validation1" value="old" />
Keep Old
</label>
<label>
<input type="radio" name="validation1" value="new" />
Keep New
</label>
</div>
<div class="diff">
<div class="diff-side diff-old">
<pre>-${value.previous_value}</pre>
</div>
<div class="diff-side diff-new">
<pre>+${value.new_value}</pre>
</div>
</div>
`
}
const state = `
<div class="expansion-panel">
<div class="expansion-panel-header">State ${diff[0].new_state_merkle_root}</div>
<div class="expansion-panel-body">
${diffs}
</div>
</div>
`
const box = document.querySelector('.validation-box')
if(box) box.innerHTML += state
}
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';
});
});
}
(window as any).validate = validate;

2
src/interface/groupInterface.ts
View File

@ -1,4 +1,4 @@
import { DocumentSignature } from "~/models/signature.models"; import { DocumentSignature } from '~/models/signature.models';
export interface Group { export interface Group {
id: number; id: number;

10
src/main.ts
View File

@ -5,15 +5,7 @@ import { ChatElement } from './pages/chat/chat';
import { AccountComponent } from './pages/account/account-component'; import { AccountComponent } from './pages/account/account-component';
import { AccountElement } from './pages/account/account'; import { AccountElement } from './pages/account/account';
export { export { SignatureComponent, SignatureElement, ChatComponent, ChatElement, AccountComponent, AccountElement };
SignatureComponent,
SignatureElement,
ChatComponent,
ChatElement,
AccountComponent,
AccountElement
};
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {

418
src/mocks/mock-account/constAccountMock.ts
View File

@ -4,325 +4,269 @@ export const STORAGE_KEYS = {
pairing: 'pairingRows', pairing: 'pairingRows',
wallet: 'walletRows', wallet: 'walletRows',
process: 'processRows', process: 'processRows',
data: 'dataRows' data: 'dataRows',
}; };
// Initialiser le stockage des lignes par défaut dans le localStorage // Initialiser le stockage des lignes par défaut dans le localStorage
export const defaultRows = [ export const defaultRows = [
{ {
column1: "sprt1qqwtvg5q5vcz0reqvmld98u7va3av6gakwe9yxw9yhnpj5djcunn4squ68tuzn8dz78dg4adfv0dekx8hg9sy0t6s9k5em7rffgxmrsfpyy7gtyrz", column1: 'sprt1qqwtvg5q5vcz0reqvmld98u7va3av6gakwe9yxw9yhnpj5djcunn4squ68tuzn8dz78dg4adfv0dekx8hg9sy0t6s9k5em7rffgxmrsfpyy7gtyrz',
column2: "🎊😑🎄😩", column2: '🎊😑🎄😩',
column3: "Laptop" column3: 'Laptop',
}, },
{ {
column1: "sprt1qqwtvg5q5vcz0reqvmld98u7va3av6gakwe9yxw9yhnpj5djcunn4squ68tuzn8dz78dg4adfv0dekx8hg9sy0t6s9k5em7rffgxmrsfpyy7gtyrx", column1: 'sprt1qqwtvg5q5vcz0reqvmld98u7va3av6gakwe9yxw9yhnpj5djcunn4squ68tuzn8dz78dg4adfv0dekx8hg9sy0t6s9k5em7rffgxmrsfpyy7gtyrx',
column2: "🎏🎕😧🌥", column2: '🎏🎕😧🌥',
column3: "Phone" } column3: 'Phone',
},
]; ];
export const mockNotifications: { [key: string]: Notification[] } = {}; export const mockNotifications: { [key: string]: Notification[] } = {};
export const notificationMessages = [ export const notificationMessages = ['CPU usage high', 'Memory threshold reached', 'New update available', 'Backup completed', 'Security check required', 'Performance optimization needed', 'System alert', 'Network connectivity issue', 'Storage space low', 'Process checkpoint reached'];
"CPU usage high",
"Memory threshold reached",
"New update available",
"Backup completed",
"Security check required",
"Performance optimization needed",
"System alert",
"Network connectivity issue",
"Storage space low",
"Process checkpoint reached"
];
export const mockDataRows = [ export const mockDataRows = [
{ {
column1: "User Project", column1: 'User Project',
column2: "private", column2: 'private',
column3: "User", column3: 'User',
column4: "6 months", column4: '6 months',
column5: "NDA signed", column5: 'NDA signed',
column6: "Contract #123", column6: 'Contract #123',
processName: "User Process", processName: 'User Process',
zone: "A" zone: 'A',
}, },
{ {
column1: "Process Project", column1: 'Process Project',
column2: "private", column2: 'private',
column3: "Process", column3: 'Process',
column4: "1 year", column4: '1 year',
column5: "Terms accepted", column5: 'Terms accepted',
column6: "Contract #456", column6: 'Contract #456',
processName: "Process Management", processName: 'Process Management',
zone: "B" zone: 'B',
}, },
{ {
column1: "Member Project", column1: 'Member Project',
column2: "private", column2: 'private',
column3: "Member", column3: 'Member',
column4: "3 months", column4: '3 months',
column5: "GDPR compliant", column5: 'GDPR compliant',
column6: "Contract #789", column6: 'Contract #789',
processName: "Member Process", processName: 'Member Process',
zone: "C" zone: 'C',
}, },
{ {
column1: "Peer Project", column1: 'Peer Project',
column2: "public", column2: 'public',
column3: "Peer", column3: 'Peer',
column4: "2 years", column4: '2 years',
column5: "IP rights", column5: 'IP rights',
column6: "Contract #101", column6: 'Contract #101',
processName: "Peer Process", processName: 'Peer Process',
zone: "D" zone: 'D',
}, },
{ {
column1: "Payment Project", column1: 'Payment Project',
column2: "confidential", column2: 'confidential',
column3: "Payment", column3: 'Payment',
column4: "1 year", column4: '1 year',
column5: "NDA signed", column5: 'NDA signed',
column6: "Contract #102", column6: 'Contract #102',
processName: "Payment Process", processName: 'Payment Process',
zone: "E" zone: 'E',
}, },
{ {
column1: "Deposit Project", column1: 'Deposit Project',
column2: "private", column2: 'private',
column3: "Deposit", column3: 'Deposit',
column4: "6 months", column4: '6 months',
column5: "Terms accepted", column5: 'Terms accepted',
column6: "Contract #103", column6: 'Contract #103',
processName: "Deposit Process", processName: 'Deposit Process',
zone: "F" zone: 'F',
}, },
{ {
column1: "Artefact Project", column1: 'Artefact Project',
column2: "public", column2: 'public',
column3: "Artefact", column3: 'Artefact',
column4: "1 year", column4: '1 year',
column5: "GDPR compliant", column5: 'GDPR compliant',
column6: "Contract #104", column6: 'Contract #104',
processName: "Artefact Process", processName: 'Artefact Process',
zone: "G" zone: 'G',
}, },
{ {
column1: "Resolve Project", column1: 'Resolve Project',
column2: "private", column2: 'private',
column3: "Resolve", column3: 'Resolve',
column4: "2 years", column4: '2 years',
column5: "IP rights", column5: 'IP rights',
column6: "Contract #105", column6: 'Contract #105',
processName: "Resolve Process", processName: 'Resolve Process',
zone: "H" zone: 'H',
}, },
{ {
column1: "Backup Project", column1: 'Backup Project',
column2: "public", column2: 'public',
column3: "Backup", column3: 'Backup',
column4: "1 year", column4: '1 year',
column5: "NDA signed", column5: 'NDA signed',
column6: "Contract #106", column6: 'Contract #106',
processName: "Backup Process", processName: 'Backup Process',
zone: "I" zone: 'I',
} },
]; ];
export const mockProcessRows = [ export const mockProcessRows = [
{ {
process: "User Project", process: 'User Project',
role: "User", role: 'User',
notification: { notification: {
messages: [ messages: [
{ id: 1, read: false, date: "2024-03-10", message: "New user joined the project" }, { id: 1, read: false, date: '2024-03-10', message: 'New user joined the project' },
{ id: 2, read: false, date: "2024-03-09", message: "Project milestone reached" }, { id: 2, read: false, date: '2024-03-09', message: 'Project milestone reached' },
{ id: 3, read: false, date: "2024-03-08", message: "Security update required" }, { id: 3, read: false, date: '2024-03-08', message: 'Security update required' },
{ id: 4, read: true, date: "2024-03-07", message: "Weekly report available" }, { id: 4, read: true, date: '2024-03-07', message: 'Weekly report available' },
{ id: 5, read: true, date: "2024-03-06", message: "Team meeting scheduled" } { id: 5, read: true, date: '2024-03-06', message: 'Team meeting scheduled' },
] ],
} },
}, },
{ {
process: "Member Project", process: 'Member Project',
role: "Member", role: 'Member',
notification: { notification: {
messages: [ messages: [
{ id: 6, read: true, date: "2024-03-10", message: "Member access granted" }, { id: 6, read: true, date: '2024-03-10', message: 'Member access granted' },
{ id: 7, read: true, date: "2024-03-09", message: "Documentation updated" }, { id: 7, read: true, date: '2024-03-09', message: 'Documentation updated' },
{ id: 8, read: true, date: "2024-03-08", message: "Project status: on track" } { id: 8, read: true, date: '2024-03-08', message: 'Project status: on track' },
] ],
} },
}, },
{ {
process: "Peer Project", process: 'Peer Project',
role: "Peer", role: 'Peer',
notification: { notification: {
unread: 2, unread: 2,
total: 4, total: 4,
messages: [ messages: [
{ id: 9, read: false, date: "2024-03-10", message: "New peer project added" }, { id: 9, read: false, date: '2024-03-10', message: 'New peer project added' },
{ id: 10, read: false, date: "2024-03-09", message: "Project milestone reached" }, { id: 10, read: false, date: '2024-03-09', message: 'Project milestone reached' },
{ id: 11, read: false, date: "2024-03-08", message: "Security update required" }, { id: 11, read: false, date: '2024-03-08', message: 'Security update required' },
{ id: 12, read: true, date: "2024-03-07", message: "Weekly report available" }, { id: 12, read: true, date: '2024-03-07', message: 'Weekly report available' },
{ id: 13, read: true, date: "2024-03-06", message: "Team meeting scheduled" } { id: 13, read: true, date: '2024-03-06', message: 'Team meeting scheduled' },
] ],
} },
}, },
{ {
process: "Deposit Project", process: 'Deposit Project',
role: "Deposit", role: 'Deposit',
notification: { notification: {
unread: 1, unread: 1,
total: 10, total: 10,
messages: [ messages: [
{ id: 14, read: false, date: "2024-03-10", message: "Deposit milestone reached" }, { id: 14, read: false, date: '2024-03-10', message: 'Deposit milestone reached' },
{ id: 15, read: false, date: "2024-03-09", message: "Security update required" }, { id: 15, read: false, date: '2024-03-09', message: 'Security update required' },
{ id: 16, read: false, date: "2024-03-08", message: "Weekly report available" }, { id: 16, read: false, date: '2024-03-08', message: 'Weekly report available' },
{ id: 17, read: true, date: "2024-03-07", message: "Team meeting scheduled" }, { id: 17, read: true, date: '2024-03-07', message: 'Team meeting scheduled' },
{ id: 18, read: true, date: "2024-03-06", message: "Project status: on track" } { id: 18, read: true, date: '2024-03-06', message: 'Project status: on track' },
] ],
} },
}, },
{ {
process: "Artefact Project", process: 'Artefact Project',
role: "Artefact", role: 'Artefact',
notification: { notification: {
unread: 0, unread: 0,
total: 3, total: 3,
messages: [ messages: [
{ id: 19, read: false, date: "2024-03-10", message: "New artefact added" }, { id: 19, read: false, date: '2024-03-10', message: 'New artefact added' },
{ id: 20, read: false, date: "2024-03-09", message: "Security update required" }, { id: 20, read: false, date: '2024-03-09', message: 'Security update required' },
{ id: 21, read: false, date: "2024-03-08", message: "Weekly report available" }, { id: 21, read: false, date: '2024-03-08', message: 'Weekly report available' },
{ id: 22, read: true, date: "2024-03-07", message: "Team meeting scheduled" }, { id: 22, read: true, date: '2024-03-07', message: 'Team meeting scheduled' },
{ id: 23, read: true, date: "2024-03-06", message: "Project status: on track" } { id: 23, read: true, date: '2024-03-06', message: 'Project status: on track' },
] ],
} },
}, },
{ {
process: "Resolve Project", process: 'Resolve Project',
role: "Resolve", role: 'Resolve',
notification: { notification: {
unread: 5, unread: 5,
total: 12, total: 12,
messages: [ messages: [
{ id: 24, read: false, date: "2024-03-10", message: "New issue reported" }, { id: 24, read: false, date: '2024-03-10', message: 'New issue reported' },
{ id: 25, read: false, date: "2024-03-09", message: "Security update required" }, { id: 25, read: false, date: '2024-03-09', message: 'Security update required' },
{ id: 26, read: false, date: "2024-03-08", message: "Weekly report available" }, { id: 26, read: false, date: '2024-03-08', message: 'Weekly report available' },
{ id: 27, read: true, date: "2024-03-07", message: "Team meeting scheduled" }, { id: 27, read: true, date: '2024-03-07', message: 'Team meeting scheduled' },
{ id: 28, read: true, date: "2024-03-06", message: "Project status: on track" } { id: 28, read: true, date: '2024-03-06', message: 'Project status: on track' },
] ],
} },
} },
]; ];
export const mockContracts = { export const mockContracts = {
'Contract #123': { 'Contract #123': {
title: "User Project Agreement", title: 'User Project Agreement',
date: "2024-01-15", date: '2024-01-15',
parties: ["Company XYZ", "User Team"], parties: ['Company XYZ', 'User Team'],
terms: [ terms: ['Data Protection', 'User Privacy', 'Access Rights', 'Service Level Agreement'],
"Data Protection", content: 'This agreement establishes the terms and conditions for user project management.',
"User Privacy",
"Access Rights",
"Service Level Agreement"
],
content: "This agreement establishes the terms and conditions for user project management."
}, },
'Contract #456': { 'Contract #456': {
title: "Process Management Contract", title: 'Process Management Contract',
date: "2024-02-01", date: '2024-02-01',
parties: ["Company XYZ", "Process Team"], parties: ['Company XYZ', 'Process Team'],
terms: [ terms: ['Process Workflow', 'Quality Standards', 'Performance Metrics', 'Monitoring Procedures'],
"Process Workflow", content: 'This contract defines the process management standards and procedures.',
"Quality Standards",
"Performance Metrics",
"Monitoring Procedures"
],
content: "This contract defines the process management standards and procedures."
}, },
'Contract #789': { 'Contract #789': {
title: "Member Access Agreement", title: 'Member Access Agreement',
date: "2024-03-15", date: '2024-03-15',
parties: ["Company XYZ", "Member Team"], parties: ['Company XYZ', 'Member Team'],
terms: [ terms: ['Member Rights', 'Access Levels', 'Security Protocol', 'Confidentiality Agreement'],
"Member Rights", content: 'This agreement outlines the terms for member access and privileges.',
"Access Levels",
"Security Protocol",
"Confidentiality Agreement"
],
content: "This agreement outlines the terms for member access and privileges."
}, },
'Contract #101': { 'Contract #101': {
title: "Peer Collaboration Agreement", title: 'Peer Collaboration Agreement',
date: "2024-04-01", date: '2024-04-01',
parties: ["Company XYZ", "Peer Network"], parties: ['Company XYZ', 'Peer Network'],
terms: [ terms: ['Collaboration Rules', 'Resource Sharing', 'Dispute Resolution', 'Network Protocol'],
"Collaboration Rules", content: 'This contract establishes peer collaboration and networking guidelines.',
"Resource Sharing",
"Dispute Resolution",
"Network Protocol"
],
content: "This contract establishes peer collaboration and networking guidelines."
}, },
'Contract #102': { 'Contract #102': {
title: "Payment Processing Agreement", title: 'Payment Processing Agreement',
date: "2024-05-01", date: '2024-05-01',
parties: ["Company XYZ", "Payment Team"], parties: ['Company XYZ', 'Payment Team'],
terms: [ terms: ['Transaction Protocol', 'Security Measures', 'Fee Structure', 'Service Availability'],
"Transaction Protocol", content: 'This agreement defines payment processing terms and conditions.',
"Security Measures",
"Fee Structure",
"Service Availability"
],
content: "This agreement defines payment processing terms and conditions."
}, },
'Contract #103': { 'Contract #103': {
title: "Deposit Management Contract", title: 'Deposit Management Contract',
date: "2024-06-01", date: '2024-06-01',
parties: ["Company XYZ", "Deposit Team"], parties: ['Company XYZ', 'Deposit Team'],
terms: [ terms: ['Deposit Rules', 'Storage Protocol', 'Access Control', 'Security Standards'],
"Deposit Rules", content: 'This contract outlines deposit management procedures and security measures.',
"Storage Protocol",
"Access Control",
"Security Standards"
],
content: "This contract outlines deposit management procedures and security measures."
}, },
'Contract #104': { 'Contract #104': {
title: "Artefact Handling Agreement", title: 'Artefact Handling Agreement',
date: "2024-07-01", date: '2024-07-01',
parties: ["Company XYZ", "Artefact Team"], parties: ['Company XYZ', 'Artefact Team'],
terms: [ terms: ['Handling Procedures', 'Storage Guidelines', 'Access Protocol', 'Preservation Standards'],
"Handling Procedures", content: 'This agreement establishes artefact handling and preservation guidelines.',
"Storage Guidelines",
"Access Protocol",
"Preservation Standards"
],
content: "This agreement establishes artefact handling and preservation guidelines."
}, },
'Contract #105': { 'Contract #105': {
title: "Resolution Protocol Agreement", title: 'Resolution Protocol Agreement',
date: "2024-08-01", date: '2024-08-01',
parties: ["Company XYZ", "Resolution Team"], parties: ['Company XYZ', 'Resolution Team'],
terms: [ terms: ['Resolution Process', 'Time Constraints', 'Escalation Protocol', 'Documentation Requirements'],
"Resolution Process", content: 'This contract defines the resolution process and protocol standards.',
"Time Constraints",
"Escalation Protocol",
"Documentation Requirements"
],
content: "This contract defines the resolution process and protocol standards."
}, },
'Contract #106': { 'Contract #106': {
title: "Backup Service Agreement", title: 'Backup Service Agreement',
date: "2024-09-01", date: '2024-09-01',
parties: ["Company XYZ", "Backup Team"], parties: ['Company XYZ', 'Backup Team'],
terms: [ terms: ['Backup Schedule', 'Data Protection', 'Recovery Protocol', 'Service Reliability'],
"Backup Schedule", content: 'This agreement outlines backup service terms and recovery procedures.',
"Data Protection", },
"Recovery Protocol",
"Service Reliability"
],
content: "This agreement outlines backup service terms and recovery procedures."
}
}; };

48
src/mocks/mock-chat/groupsMock.js
View File

@ -1,40 +1,52 @@
export const groupsMock = [ export const groupsMock = [
{ {
id: 1, id: 1,
name: "Group 🚀 ", name: 'Group 🚀 ',
roles: [ roles: [
{ {
id: 1, id: 1,
name: "Role 1", name: 'Role 1',
members: [{ id: 1, name: "Member 1" }, { id: 2, name: "Member 2" }] members: [
{ id: 1, name: 'Member 1' },
{ id: 2, name: 'Member 2' },
],
}, },
{ {
id: 2, id: 2,
name: "Role 2", name: 'Role 2',
members: [{ id: 3, name: "Member 3" }, { id: 4, name: "Member 4" }] members: [
} { id: 3, name: 'Member 3' },
] { id: 4, name: 'Member 4' },
],
},
],
}, },
{ {
id: 2, id: 2,
name: "Group ₿", name: 'Group ₿',
roles: [ roles: [
{ {
id: 3, id: 3,
name: "Role 1", name: 'Role 1',
members: [{ id: 5, name: "Member 5" }, { id: 6, name: "Member 6" }] members: [
} { id: 5, name: 'Member 5' },
] { id: 6, name: 'Member 6' },
],
},
],
}, },
{ {
id: 3, id: 3,
name: "Group 🪙", name: 'Group 🪙',
roles: [ roles: [
{ {
id: 4, id: 4,
name: "Role 1", name: 'Role 1',
members: [{ id: 7, name: "Member 7" }, { id: 8, name: "Member 8" }] members: [
} { id: 7, name: 'Member 7' },
] { id: 8, name: 'Member 8' },
} ],
},
],
},
]; ];

63
src/mocks/mock-chat/messagesMock.js
View File

@ -2,64 +2,63 @@ export const messagesMock = [
{ {
memberId: 1, // Conversations avec Mmber 1 memberId: 1, // Conversations avec Mmber 1
messages: [ messages: [
{ id: 1, sender: "Member 1", text: "Salut !", time: "10:30 AM" }, { id: 1, sender: 'Member 1', text: 'Salut !', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Bonjour ! Comment ça va ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Bonjour ! Comment ça va ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Tout va bien, merci !", time: "10:32 AM" } { id: 3, sender: '4NK', text: 'Tout va bien, merci !', time: '10:32 AM' },
] ],
}, },
{ {
memberId: 2, // Conversations avec Member 2 memberId: 2, // Conversations avec Member 2
messages: [ messages: [
{ id: 1, sender: "Member 2", text: "Salut, on se voit ce soir ?", time: "10:30 AM" }, { id: 1, sender: 'Member 2', text: 'Salut, on se voit ce soir ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Oui, à quelle heure ?", time: "10:31 AM" } { id: 2, sender: '4NK', text: 'Oui, à quelle heure ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 3, // Conversations avec Member 3 memberId: 3, // Conversations avec Member 3
messages: [ messages: [
{ id: 1, sender: "Member 3", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 3', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 4, // Conversations avec Member 4 memberId: 4, // Conversations avec Member 4
messages: [ messages: [
{ id: 1, sender: "Member 4", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 4', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 5, // Conversations avec Member 5 memberId: 5, // Conversations avec Member 5
messages: [ messages: [
{ id: 1, sender: "Member 5", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 5', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 6, // Conversations avec Member 6 memberId: 6, // Conversations avec Member 6
messages: [ messages: [
{ id: 1, sender: "Member 6", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 6', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 7, // Conversations avec Member 7 memberId: 7, // Conversations avec Member 7
messages: [ messages: [
{ id: 1, sender: "Member 7", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 7', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 8, // Conversations avec Member 8 memberId: 8, // Conversations avec Member 8
messages: [ messages: [
{ id: 1, sender: "Member 8", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 8', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
} },
]; ];

381
src/mocks/mock-signature/groupsMock.js
View File

@ -1,29 +1,19 @@
// Définir les rôles autorisés // Définir les rôles autorisés
const VALID_ROLES = [ const VALID_ROLES = ['User', 'Process', 'Member', 'Peer', 'Payment', 'Deposit', 'Artefact', 'Resolve', 'Backup'];
"User",
"Process",
"Member",
"Peer",
"Payment",
"Deposit",
"Artefact",
"Resolve",
"Backup"
];
const VISIBILITY_LEVELS = { const VISIBILITY_LEVELS = {
PUBLIC: "public", PUBLIC: 'public',
CONFIDENTIAL: "confidential", CONFIDENTIAL: 'confidential',
PRIVATE: "private", PRIVATE: 'private',
}; };
const DOCUMENT_STATUS = { const DOCUMENT_STATUS = {
DRAFT: "draft", DRAFT: 'draft',
PENDING: "pending", PENDING: 'pending',
IN_REVIEW: "in_review", IN_REVIEW: 'in_review',
APPROVED: "approved", APPROVED: 'approved',
REJECTED: "rejected", REJECTED: 'rejected',
EXPIRED: "expired" EXPIRED: 'expired',
}; };
// Fonction pour créer un rôle // Fonction pour créer un rôle
@ -37,424 +27,445 @@ function createRole(name, members) {
export const groupsMock = [ export const groupsMock = [
{ {
id: 1, id: 1,
name: "Processus 1", name: 'Processus 1',
description: "Description du processus 1", description: 'Description du processus 1',
commonDocuments: [ commonDocuments: [
{ {
id: 101, id: 101,
name: "Règlement intérieur", name: 'Règlement intérieur',
description: "Document vierge pour le règlement intérieur", description: 'Document vierge pour le règlement intérieur',
visibility: VISIBILITY_LEVELS.PUBLIC, visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 102, id: 102,
name: "Charte de confidentialité", name: 'Charte de confidentialité',
description: "Document vierge pour la charte de confidentialité", description: 'Document vierge pour la charte de confidentialité',
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 103, id: 103,
name: "Procédures générales", name: 'Procédures générales',
description: "Document vierge pour les procédures générales", description: 'Document vierge pour les procédures générales',
visibility: VISIBILITY_LEVELS.PUBLIC, visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 104, id: 104,
name: "Urgency A", name: 'Urgency A',
description: "Document vierge pour le plan d'urgence A", description: "Document vierge pour le plan d'urgence A",
visibility: VISIBILITY_LEVELS.PRIVATE, visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 105, id: 105,
name: "Urgency B", name: 'Urgency B',
description: "Document vierge pour le plan d'urgence B", description: "Document vierge pour le plan d'urgence B",
visibility: VISIBILITY_LEVELS.PRIVATE, visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 106, id: 106,
name: "Urgency C", name: 'Urgency C',
description: "Document vierge pour le plan d'urgence C", description: "Document vierge pour le plan d'urgence C",
visibility: VISIBILITY_LEVELS.PRIVATE, visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 107, id: 107,
name: "Document à signer", name: 'Document à signer',
description: "Document vierge pour le règlement intérieur", description: 'Document vierge pour le règlement intérieur',
visibility: VISIBILITY_LEVELS.PUBLIC, visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
], ],
roles: [ roles: [
{ {
name: "User", name: 'User',
members: [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }], members: [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
],
documents: [ documents: [
{ {
id: 1, id: 1,
name: "Document User A", name: 'Document User A',
description: "Description du document User A.", description: 'Description du document User A.',
visibility: "public", visibility: 'public',
createdAt: "2024-01-01", createdAt: '2024-01-01',
deadline: "2024-02-01", deadline: '2024-02-01',
signatures: [ signatures: [
{ {
member: { id: 1, name: "Alice" }, member: { id: 1, name: 'Alice' },
signed: true, signed: true,
signedAt: "2024-01-15" signedAt: '2024-01-15',
}, },
{ {
member: { id: 2, name: "Bob" }, member: { id: 2, name: 'Bob' },
signed: false signed: false,
} },
] ],
}, },
{ {
id: 2, id: 2,
name: "Document User B", name: 'Document User B',
description: "Document vierge pour le rôle User", description: 'Document vierge pour le rôle User',
visibility: "confidential", visibility: 'confidential',
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 7, id: 7,
name: "Document User C", name: 'Document User C',
description: "Document vierge pour validation utilisateur", description: 'Document vierge pour validation utilisateur',
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 8, id: 8,
name: "Document User D", name: 'Document User D',
description: "Document vierge pour approbation utilisateur", description: 'Document vierge pour approbation utilisateur',
visibility: VISIBILITY_LEVELS.PUBLIC, visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
} },
] ],
}, },
{ {
name: "Process", name: 'Process',
members: [{ id: 3, name: "Charlie" }, { id: 4, name: "David" }], members: [
{ id: 3, name: 'Charlie' },
{ id: 4, name: 'David' },
],
documents: [ documents: [
{ {
id: 3, id: 3,
name: "Document Process A", name: 'Document Process A',
description: "Description du document Process A.", description: 'Description du document Process A.',
visibility: "confidential", visibility: 'confidential',
createdAt: "2024-01-10", createdAt: '2024-01-10',
deadline: "2024-03-01", deadline: '2024-03-01',
signatures: [ signatures: [
{ {
member: { id: 3, name: "Charlie" }, member: { id: 3, name: 'Charlie' },
signed: true, signed: true,
signedAt: "2024-01-12" signedAt: '2024-01-12',
} },
] ],
}, },
{ {
id: 9, id: 9,
name: "Document Process B", name: 'Document Process B',
description: "Document vierge pour processus interne", description: 'Document vierge pour processus interne',
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 10, id: 10,
name: "Document Process C", name: 'Document Process C',
description: "Document vierge pour validation processus", description: 'Document vierge pour validation processus',
visibility: VISIBILITY_LEVELS.PRIVATE, visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 11, id: 11,
name: "Document Process D", name: 'Document Process D',
description: "Document vierge pour validation processus", description: 'Document vierge pour validation processus',
visibility: VISIBILITY_LEVELS.PUBLIC, visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.PENDING, status: DOCUMENT_STATUS.PENDING,
createdAt: "2024-01-15", createdAt: '2024-01-15',
deadline: "2024-02-01", deadline: '2024-02-01',
signatures: [ signatures: [
{ {
member: { id: 3, name: "Charlie" }, member: { id: 3, name: 'Charlie' },
signed: true, signed: true,
signedAt: "2024-01-15" signedAt: '2024-01-15',
}, },
{ {
member: { id: 4, name: "David" }, member: { id: 4, name: 'David' },
signed: false signed: false,
} },
] ],
}, },
{ {
id: 12, id: 12,
name: "Document Process E", name: 'Document Process E',
description: "Document vierge pour validation processus", description: 'Document vierge pour validation processus',
visibility: VISIBILITY_LEVELS.PUBLIC, visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.PENDING, status: DOCUMENT_STATUS.PENDING,
createdAt: "2024-01-15", createdAt: '2024-01-15',
deadline: "2024-02-01", deadline: '2024-02-01',
signatures: [ signatures: [
{ {
member: { id: 3, name: "Charlie" }, member: { id: 3, name: 'Charlie' },
signed: true, signed: true,
signedAt: "2024-01-15" signedAt: '2024-01-15',
}, },
{ {
member: { id: 4, name: "David" }, member: { id: 4, name: 'David' },
signed: false signed: false,
} },
] ],
} },
] ],
}, },
{ {
name: "Backup", name: 'Backup',
members: [{ id: 15, name: "Oscar" }, { id: 16, name: "Patricia" }], members: [
{ id: 15, name: 'Oscar' },
{ id: 16, name: 'Patricia' },
],
documents: [ documents: [
{ {
id: 11, id: 11,
name: "Document Backup A", name: 'Document Backup A',
description: "Document vierge pour sauvegarde", description: 'Document vierge pour sauvegarde',
visibility: VISIBILITY_LEVELS.PRIVATE, visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
} },
] ],
} },
] ],
}, },
{ {
id: 2, id: 2,
name: "Processus 2", name: 'Processus 2',
description: "Description du processus 2", description: 'Description du processus 2',
commonDocuments: [ commonDocuments: [
{ {
id: 201, id: 201,
name: "Règlement intérieur", name: 'Règlement intérieur',
description: "Document vierge pour le règlement intérieur", description: 'Document vierge pour le règlement intérieur',
visibility: VISIBILITY_LEVELS.PUBLIC, visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 202, id: 202,
name: "Charte de confidentialité", name: 'Charte de confidentialité',
description: "Document vierge pour la charte de confidentialité", description: 'Document vierge pour la charte de confidentialité',
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 203, id: 203,
name: "Charte de confidentialité", name: 'Charte de confidentialité',
description: "Document vierge pour la charte de confidentialité", description: 'Document vierge pour la charte de confidentialité',
visibility: VISIBILITY_LEVELS.PRIVATE, visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 204, id: 204,
name: "Charte de confidentialité", name: 'Charte de confidentialité',
description: "Document vierge pour la charte de confidentialité", description: 'Document vierge pour la charte de confidentialité',
visibility: VISIBILITY_LEVELS.PRIVATE, visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 205, id: 205,
name: "Charte de confidentialité", name: 'Charte de confidentialité',
description: "Document vierge pour la charte de confidentialité", description: 'Document vierge pour la charte de confidentialité',
visibility: VISIBILITY_LEVELS.PRIVATE, visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
} },
], ],
roles: [ roles: [
{ {
name: "Artefact", name: 'Artefact',
members: [{ id: 17, name: "Quinn" }, { id: 18, name: "Rachel" }], members: [
{ id: 17, name: 'Quinn' },
{ id: 18, name: 'Rachel' },
],
documents: [ documents: [
{ {
id: 12, id: 12,
name: "Document Artefact A", name: 'Document Artefact A',
description: "Document vierge pour artefact", description: 'Document vierge pour artefact',
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 13, id: 13,
name: "Document Artefact B", name: 'Document Artefact B',
description: "Document vierge pour validation artefact", description: 'Document vierge pour validation artefact',
visibility: VISIBILITY_LEVELS.PRIVATE, visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
} },
] ],
}, },
{ {
name: "Resolve", name: 'Resolve',
members: [{ id: 19, name: "Sam" }, { id: 20, name: "Tom" }], members: [
{ id: 19, name: 'Sam' },
{ id: 20, name: 'Tom' },
],
documents: [ documents: [
{ {
id: 14, id: 14,
name: "Document Resolve A", name: 'Document Resolve A',
description: "Document vierge pour résolution", description: 'Document vierge pour résolution',
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
} },
] ],
} },
] ],
}, },
{ {
id: 3, id: 3,
name: "Processus 3", name: 'Processus 3',
description: "Description du processus 3", description: 'Description du processus 3',
commonDocuments: [ commonDocuments: [
{ {
id: 301, id: 301,
name: "Règlement intérieur", name: 'Règlement intérieur',
description: "Document vierge pour le règlement intérieur", description: 'Document vierge pour le règlement intérieur',
visibility: VISIBILITY_LEVELS.PUBLIC, visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 302, id: 302,
name: "Charte de confidentialité", name: 'Charte de confidentialité',
description: "Document vierge pour la charte de confidentialité", description: 'Document vierge pour la charte de confidentialité',
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 303, id: 303,
name: "Procédures générales", name: 'Procédures générales',
description: "Document vierge pour les procédures générales", description: 'Document vierge pour les procédures générales',
visibility: VISIBILITY_LEVELS.PUBLIC, visibility: VISIBILITY_LEVELS.PUBLIC,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
} },
], ],
roles: [ roles: [
{ {
name: "Deposit", name: 'Deposit',
members: [{ id: 21, name: "Uma" }, { id: 22, name: "Victor" }], members: [
{ id: 21, name: 'Uma' },
{ id: 22, name: 'Victor' },
],
documents: [ documents: [
{ {
id: 15, id: 15,
name: "Document Deposit A", name: 'Document Deposit A',
description: "Document vierge pour dépôt", description: 'Document vierge pour dépôt',
visibility: VISIBILITY_LEVELS.PRIVATE, visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 16, id: 16,
name: "Document Deposit B", name: 'Document Deposit B',
description: "Document vierge pour validation dépôt", description: 'Document vierge pour validation dépôt',
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
} },
] ],
}, },
{ {
name: "Payment", name: 'Payment',
members: [{ id: 23, name: "Walter" }, { id: 24, name: "Xena" }], members: [
{ id: 23, name: 'Walter' },
{ id: 24, name: 'Xena' },
],
documents: [ documents: [
{ {
id: 17, id: 17,
name: "Document Payment B", name: 'Document Payment B',
description: "Document vierge pour paiement", description: 'Document vierge pour paiement',
visibility: VISIBILITY_LEVELS.PRIVATE, visibility: VISIBILITY_LEVELS.PRIVATE,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
}, },
{ {
id: 18, id: 18,
name: "Document Payment C", name: 'Document Payment C',
description: "Document vierge pour validation paiement", description: 'Document vierge pour validation paiement',
visibility: VISIBILITY_LEVELS.CONFIDENTIAL, visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
status: DOCUMENT_STATUS.DRAFT, status: DOCUMENT_STATUS.DRAFT,
createdAt: null, createdAt: null,
deadline: null, deadline: null,
signatures: [] signatures: [],
} },
] ],
} },
] ],
} },
]; ];

114
src/mocks/mock-signature/membersMocks.js
View File

@ -2,104 +2,104 @@ export const membersMock = [
// Processus 1 // Processus 1
{ {
id: 1, id: 1,
name: "Alice", name: 'Alice',
avatar: "A", avatar: 'A',
email: "alice@company.com", email: 'alice@company.com',
processRoles: [{ processId: 1, role: "User" }] processRoles: [{ processId: 1, role: 'User' }],
}, },
{ {
id: 2, id: 2,
name: "Bob", name: 'Bob',
avatar: "B", avatar: 'B',
email: "bob@company.com", email: 'bob@company.com',
processRoles: [{ processId: 1, role: "User" }] processRoles: [{ processId: 1, role: 'User' }],
}, },
{ {
id: 3, id: 3,
name: "Charlie", name: 'Charlie',
avatar: "C", avatar: 'C',
email: "charlie@company.com", email: 'charlie@company.com',
processRoles: [{ processId: 1, role: "Process" }] processRoles: [{ processId: 1, role: 'Process' }],
}, },
{ {
id: 4, id: 4,
name: "David", name: 'David',
avatar: "D", avatar: 'D',
email: "david@company.com", email: 'david@company.com',
processRoles: [{ processId: 1, role: "Process" }] processRoles: [{ processId: 1, role: 'Process' }],
}, },
{ {
id: 15, id: 15,
name: "Oscar", name: 'Oscar',
avatar: "O", avatar: 'O',
email: "oscar@company.com", email: 'oscar@company.com',
processRoles: [{ processId: 1, role: "Backup" }] processRoles: [{ processId: 1, role: 'Backup' }],
}, },
{ {
id: 16, id: 16,
name: "Patricia", name: 'Patricia',
avatar: "P", avatar: 'P',
email: "patricia@company.com", email: 'patricia@company.com',
processRoles: [{ processId: 1, role: "Backup" }] processRoles: [{ processId: 1, role: 'Backup' }],
}, },
// Processus 2 // Processus 2
{ {
id: 17, id: 17,
name: "Quinn", name: 'Quinn',
avatar: "Q", avatar: 'Q',
email: "quinn@company.com", email: 'quinn@company.com',
processRoles: [{ processId: 2, role: "Artefact" }] processRoles: [{ processId: 2, role: 'Artefact' }],
}, },
{ {
id: 18, id: 18,
name: "Rachel", name: 'Rachel',
avatar: "R", avatar: 'R',
email: "rachel@company.com", email: 'rachel@company.com',
processRoles: [{ processId: 2, role: "Artefact" }] processRoles: [{ processId: 2, role: 'Artefact' }],
}, },
{ {
id: 19, id: 19,
name: "Sam", name: 'Sam',
avatar: "S", avatar: 'S',
email: "sam@company.com", email: 'sam@company.com',
processRoles: [{ processId: 2, role: "Resolve" }] processRoles: [{ processId: 2, role: 'Resolve' }],
}, },
{ {
id: 20, id: 20,
name: "Tom", name: 'Tom',
avatar: "T", avatar: 'T',
email: "tom@company.com", email: 'tom@company.com',
processRoles: [{ processId: 2, role: "Resolve" }] processRoles: [{ processId: 2, role: 'Resolve' }],
}, },
// Processus 3 // Processus 3
{ {
id: 21, id: 21,
name: "Uma", name: 'Uma',
avatar: "U", avatar: 'U',
email: "uma@company.com", email: 'uma@company.com',
processRoles: [{ processId: 3, role: "Deposit" }] processRoles: [{ processId: 3, role: 'Deposit' }],
}, },
{ {
id: 22, id: 22,
name: "Victor", name: 'Victor',
avatar: "V", avatar: 'V',
email: "victor@company.com", email: 'victor@company.com',
processRoles: [{ processId: 3, role: "Deposit" }] processRoles: [{ processId: 3, role: 'Deposit' }],
}, },
{ {
id: 23, id: 23,
name: "Walter", name: 'Walter',
avatar: "W", avatar: 'W',
email: "walter@company.com", email: 'walter@company.com',
processRoles: [{ processId: 3, role: "Payment" }] processRoles: [{ processId: 3, role: 'Payment' }],
}, },
{ {
id: 24, id: 24,
name: "Xena", name: 'Xena',
avatar: "X", avatar: 'X',
email: "xena@company.com", email: 'xena@company.com',
processRoles: [{ processId: 3, role: "Payment" }] processRoles: [{ processId: 3, role: 'Payment' }],
} },
]; ];

63
src/mocks/mock-signature/messagesMock.ts
View File

@ -2,64 +2,63 @@ export const messagesMock = [
{ {
memberId: 1, // Conversations avec Mmber 1 memberId: 1, // Conversations avec Mmber 1
messages: [ messages: [
{ id: 1, sender: "Mmeber 1", text: "Salut !", time: "10:30 AM" }, { id: 1, sender: 'Mmeber 1', text: 'Salut !', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Bonjour ! Comment ça va ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Bonjour ! Comment ça va ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Tout va bien, merci !", time: "10:32 AM" } { id: 3, sender: '4NK', text: 'Tout va bien, merci !', time: '10:32 AM' },
] ],
}, },
{ {
memberId: 2, // Conversations avec Member 2 memberId: 2, // Conversations avec Member 2
messages: [ messages: [
{ id: 1, sender: "Member 2", text: "Salut, on se voit ce soir ?", time: "10:30 AM" }, { id: 1, sender: 'Member 2', text: 'Salut, on se voit ce soir ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Oui, à quelle heure ?", time: "10:31 AM" } { id: 2, sender: '4NK', text: 'Oui, à quelle heure ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 3, // Conversations avec Member 3 memberId: 3, // Conversations avec Member 3
messages: [ messages: [
{ id: 1, sender: "Member 3", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 3', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 4, // Conversations avec Member 4 memberId: 4, // Conversations avec Member 4
messages: [ messages: [
{ id: 1, sender: "Member 4", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 4', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 5, // Conversations avec Member 5 memberId: 5, // Conversations avec Member 5
messages: [ messages: [
{ id: 1, sender: "Member 5", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 5', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 6, // Conversations avec Member 6 memberId: 6, // Conversations avec Member 6
messages: [ messages: [
{ id: 1, sender: "Member 6", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 6', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 7, // Conversations avec Member 7 memberId: 7, // Conversations avec Member 7
messages: [ messages: [
{ id: 1, sender: "Member 7", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 7', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
}, },
{ {
memberId: 8, // Conversations avec Member 8 memberId: 8, // Conversations avec Member 8
messages: [ messages: [
{ id: 1, sender: "Member 8", text: "Hey, ça va ?", time: "10:30 AM" }, { id: 1, sender: 'Member 8', text: 'Hey, ça va ?', time: '10:30 AM' },
{ id: 2, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" }, { id: 2, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
{ id: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 AM" } { id: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
] ],
} },
]; ];

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

@ -19,12 +19,12 @@ export interface IMessage {
} }
export interface UserDiff { export interface UserDiff {
new_state_merkle_root: string, // TODO add a merkle proof that the new_value belongs to that state new_state_merkle_root: string; // TODO add a merkle proof that the new_value belongs to that state
field: string, field: string;
previous_value: string, previous_value: string;
new_value: string, new_value: string;
notify_user: boolean, notify_user: boolean;
need_validation: boolean, need_validation: boolean;
// validated: bool, // 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 proof: any; // This is only validation (or refusal) for that specific diff, not the whole state. It can't be commited as such
} }

2
src/models/signature.models.ts
View File

@ -5,7 +5,7 @@ export interface Group {
roles: { roles: {
id?: number; id?: number;
name: string; name: string;
members: { id: string | number; name: string; }[]; members: { id: string | number; name: string }[];
documents?: { documents?: {
id: number; id: number;
name: string; name: string;

17
src/pages/account/account-component.ts
View File

@ -1,21 +1,21 @@
import { AccountElement } from './account'; import { AccountElement } from './account';
import accountCss from '../../../public/style/account.css?raw' import accountCss from '../../../public/style/account.css?raw';
import Services from '../../services/service.js' import Services from '../../services/service.js';
class AccountComponent extends HTMLElement { class AccountComponent extends HTMLElement {
_callback: any _callback: any;
accountElement: AccountElement | null = null; accountElement: AccountElement | null = null;
constructor() { constructor() {
super(); super();
console.log('INIT') console.log('INIT');
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
this.accountElement = this.shadowRoot?.querySelector('account-element') || null; this.accountElement = this.shadowRoot?.querySelector('account-element') || null;
} }
connectedCallback() { connectedCallback() {
console.log('CALLBACKs') console.log('CALLBACKs');
this.render(); this.render();
this.fetchData(); this.fetchData();
@ -28,7 +28,7 @@ class AccountComponent extends HTMLElement {
if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) { if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
const data = await (window as any).myService?.getProcesses(); const data = await (window as any).myService?.getProcesses();
} else { } else {
const service = await Services.getInstance() const service = await Services.getInstance();
const data = await service.getProcesses(); const data = await service.getProcesses();
} }
} }
@ -46,7 +46,7 @@ class AccountComponent extends HTMLElement {
} }
render() { render() {
if(this.shadowRoot && !this.shadowRoot.querySelector('account-element')) { if (this.shadowRoot && !this.shadowRoot.querySelector('account-element')) {
const style = document.createElement('style'); const style = document.createElement('style');
style.textContent = accountCss; style.textContent = accountCss;
@ -54,10 +54,9 @@ class AccountComponent extends HTMLElement {
this.shadowRoot.appendChild(style); this.shadowRoot.appendChild(style);
this.shadowRoot.appendChild(accountElement); this.shadowRoot.appendChild(accountElement);
} }
} }
} }
export { AccountComponent } export { AccountComponent };
customElements.define('account-component', AccountComponent); customElements.define('account-component', AccountComponent);

44
src/pages/account/account.html
View File

@ -1,13 +1,13 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Account</title> <title>Account</title>
<link rel="stylesheet" href="../../public/style/account.css"> <link rel="stylesheet" href="../../public/style/account.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
</head> </head>
<body> <body>
<!-- Header Container --> <!-- Header Container -->
<div id="header-container"></div> <div id="header-container"></div>
@ -20,10 +20,10 @@
<!-- Banner Preview Section --> <!-- Banner Preview Section -->
<div class="banner-preview"> <div class="banner-preview">
<div class="banner-image-container"> <div class="banner-image-container">
<img src="https://via.placeholder.com/800x200" alt="Banner" class="banner-image" id="popup-banner-img"> <img src="https://via.placeholder.com/800x200" alt="Banner" class="banner-image" id="popup-banner-img" />
<div class="banner-content"> <div class="banner-content">
<div class="avatar-container"> <div class="avatar-container">
<img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" id="popup-avatar-img"> <img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" id="popup-avatar-img" />
</div> </div>
<div class="user-info"> <div class="user-info">
<span class="editable" id="popup-name"></span> <span class="editable" id="popup-name"></span>
@ -34,7 +34,7 @@
<div class="banner-controls"> <div class="banner-controls">
<label for="banner-upload" class="banner-upload-label button-style"> <label for="banner-upload" class="banner-upload-label button-style">
Change Banner Image Change Banner Image
<input type="file" id="banner-upload" accept="image/*" style="display: none;"> <input type="file" id="banner-upload" accept="image/*" style="display: none" />
</label> </label>
</div> </div>
</div> </div>
@ -42,12 +42,12 @@
<!-- Avatar Upload Section --> <!-- Avatar Upload Section -->
<div class="popup-avatar"> <div class="popup-avatar">
<label for="avatar-upload" class="avatar-upload-label"> <label for="avatar-upload" class="avatar-upload-label">
<img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" id="popup-avatar-img"> <img src="https://via.placeholder.com/150" alt="Avatar" class="avatar" id="popup-avatar-img" />
<div class="avatar-overlay"> <div class="avatar-overlay">
<span>Change Avatar</span> <span>Change Avatar</span>
</div> </div>
</label> </label>
<input type="file" id="avatar-upload" accept="image/*" style="display: none;"> <input type="file" id="avatar-upload" accept="image/*" style="display: none" />
</div> </div>
<!-- User Info Section --> <!-- User Info Section -->
@ -68,10 +68,18 @@
<div class="container"> <div class="container">
<!-- Parameter List --> <!-- Parameter List -->
<div class="parameter-list"> <div class="parameter-list">
<ul class="parameter-list-ul" onclick="window.showPairing()">Pairing 🔗</ul> <ul class="parameter-list-ul" onclick="window.showPairing()">
<ul class="parameter-list-ul" onclick="window.showWallet()">Wallet 👛</ul> Pairing 🔗
<ul class="parameter-list-ul" onclick="window.showProcess()">Process ⚙️</ul> </ul>
<ul class="parameter-list-ul" onclick="window.showData()">Data 💾</ul> <ul class="parameter-list-ul" onclick="window.showWallet()">
Wallet 👛
</ul>
<ul class="parameter-list-ul" onclick="window.showProcess()">
Process ⚙️
</ul>
<ul class="parameter-list-ul" onclick="window.showData()">
Data 💾
</ul>
</div> </div>
<!-- Parameter Area --> <!-- Parameter Area -->
@ -87,5 +95,5 @@
<!-- Scripts --> <!-- Scripts -->
<script type="module" src="./account.ts?ts"></script> <script type="module" src="./account.ts?ts"></script>
</body> </body>
</html> </html>

298
src/pages/account/account.ts
View File

@ -71,15 +71,11 @@ export function showAlert(message: string): void {
class AccountElement extends HTMLElement { class AccountElement extends HTMLElement {
private dom: Node; private dom: Node;
constructor() { constructor() {
super(); super();
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
this.dom = getCorrectDOM('account-element'); this.dom = getCorrectDOM('account-element');
window.showPairing = () => this.showPairing(); window.showPairing = () => this.showPairing();
window.showWallet = () => this.showWallet(); window.showWallet = () => this.showWallet();
window.showProcess = () => this.showProcess(); window.showProcess = () => this.showProcess();
@ -140,14 +136,14 @@ class AccountElement extends HTMLElement {
this.deleteAccount(); this.deleteAccount();
modal.remove(); modal.remove();
}); });
} }
private deleteAccount(): void { private deleteAccount(): void {
localStorage.clear(); localStorage.clear();
window.location.href = '/login.html'; window.location.href = '/login.html';
} }
private updateNavbarBanner(imageUrl: string): void { private updateNavbarBanner(imageUrl: string): void {
const navbarSection = document.querySelector('.nav-wrapper .avatar-section'); const navbarSection = document.querySelector('.nav-wrapper .avatar-section');
if (!navbarSection) return; if (!navbarSection) return;
@ -160,13 +156,13 @@ private updateNavbarBanner(imageUrl: string): void {
} }
bannerImg.src = imageUrl; bannerImg.src = imageUrl;
} }
private saveBannerToLocalStorage(dataUrl: string): void { private saveBannerToLocalStorage(dataUrl: string): void {
localStorage.setItem('userBanner', dataUrl); localStorage.setItem('userBanner', dataUrl);
} }
private loadSavedBanner(): void { private loadSavedBanner(): void {
const savedBanner = localStorage.getItem('userBanner'); const savedBanner = localStorage.getItem('userBanner');
if (savedBanner) { if (savedBanner) {
const bannerImg = document.getElementById('popup-banner-img') as HTMLImageElement; const bannerImg = document.getElementById('popup-banner-img') as HTMLImageElement;
@ -175,10 +171,9 @@ private loadSavedBanner(): void {
} }
this.updateNavbarBanner(savedBanner); this.updateNavbarBanner(savedBanner);
} }
} }
private closeNotificationPopup(event: Event): void {
private closeNotificationPopup(event: Event): void {
const target = event.target as HTMLElement; const target = event.target as HTMLElement;
const isOverlay = target.classList.contains('notification-popup-overlay'); const isOverlay = target.classList.contains('notification-popup-overlay');
const isCloseButton = target.classList.contains('close-popup'); const isCloseButton = target.classList.contains('close-popup');
@ -186,13 +181,13 @@ private closeNotificationPopup(event: Event): void {
const popup = document.querySelector('.notification-popup-overlay'); const popup = document.querySelector('.notification-popup-overlay');
if (popup) popup.remove(); if (popup) popup.remove();
} }
private markAsRead(processName: string, messageId: number, element: HTMLElement): void { private markAsRead(processName: string, messageId: number, element: HTMLElement): void {
const process = mockProcessRows.find(p => p.process === processName); const process = mockProcessRows.find((p) => p.process === processName);
if (!process) return; if (!process) return;
const message = process.notification.messages.find(m => m.id === messageId); const message = process.notification.messages.find((m) => m.id === messageId);
if (!message || message.read) return; if (!message || message.read) return;
message.read = true; message.read = true;
@ -217,17 +212,17 @@ private markAsRead(processName: string, messageId: number, element: HTMLElement)
(bell as HTMLElement).style.color = '#666'; (bell as HTMLElement).style.color = '#666';
} }
} }
} }
// Fonctions de gestion des données et de l'interface // Fonctions de gestion des données et de l'interface
private calculateNotifications(messages: NotificationMessage[]): { unread: number; total: number } { private calculateNotifications(messages: NotificationMessage[]): { unread: number; total: number } {
const total = messages.length; const total = messages.length;
const unread = messages.filter(msg => !msg.read).length; const unread = messages.filter((msg) => !msg.read).length;
return { unread, total }; return { unread, total };
} }
// Fonctions de récupération // Fonctions de récupération
private exportRecovery(): void { private exportRecovery(): void {
Swal.fire({ Swal.fire({
title: 'Recovery Words Export', title: 'Recovery Words Export',
text: '4 words will be displayed. We strongly recommend writing them down on paper before exporting the account. Do you want to continue?', text: '4 words will be displayed. We strongly recommend writing them down on paper before exporting the account. Do you want to continue?',
@ -236,7 +231,7 @@ private exportRecovery(): void {
confirmButtonText: 'Confirm', confirmButtonText: 'Confirm',
cancelButtonText: 'Cancel', cancelButtonText: 'Cancel',
confirmButtonColor: '#C89666', confirmButtonColor: '#C89666',
cancelButtonColor: '#6c757d' cancelButtonColor: '#6c757d',
}).then((result) => { }).then((result) => {
if (result.isConfirmed) { if (result.isConfirmed) {
const recoveryWords = this.generateRecoveryWords(); const recoveryWords = this.generateRecoveryWords();
@ -246,12 +241,16 @@ private exportRecovery(): void {
title: 'Your Recovery Words', title: 'Your Recovery Words',
html: ` html: `
<div class="recovery-words-container"> <div class="recovery-words-container">
${recoveryWords.map((word, index) => ` ${recoveryWords
.map(
(word, index) => `
<div class="recovery-word"> <div class="recovery-word">
<span class="word-number">${index + 1}.</span> <span class="word-number">${index + 1}.</span>
<span class="word">${word}</span> <span class="word">${word}</span>
</div> </div>
`).join('')} `,
)
.join('')}
</div> </div>
<div class="recovery-warning"> <div class="recovery-warning">
Please write these words down carefully. They will be needed to recover your account. Please write these words down carefully. They will be needed to recover your account.
@ -261,7 +260,7 @@ private exportRecovery(): void {
confirmButtonText: 'I confirm the export', confirmButtonText: 'I confirm the export',
confirmButtonColor: '#C89666', confirmButtonColor: '#C89666',
allowOutsideClick: false, allowOutsideClick: false,
allowEscapeKey: false allowEscapeKey: false,
}).then((result) => { }).then((result) => {
if (result.isConfirmed) { if (result.isConfirmed) {
// Stocker l'état du bouton dans le localStorage // Stocker l'état du bouton dans le localStorage
@ -277,13 +276,10 @@ private exportRecovery(): void {
}); });
} }
}); });
} }
private generateRecoveryWords(): string[] { private generateRecoveryWords(): string[] {
const wordsList = [ const wordsList = ['apple', 'banana', 'orange', 'grape', 'kiwi', 'mango', 'peach', 'plum', 'lemon', 'lime', 'cherry', 'melon', 'pear', 'fig', 'date', 'berry'];
'apple', 'banana', 'orange', 'grape', 'kiwi', 'mango', 'peach', 'plum',
'lemon', 'lime', 'cherry', 'melon', 'pear', 'fig', 'date', 'berry'
];
const recoveryWords: string[] = []; const recoveryWords: string[] = [];
while (recoveryWords.length < 4) { while (recoveryWords.length < 4) {
const randomWord = wordsList[Math.floor(Math.random() * wordsList.length)]; const randomWord = wordsList[Math.floor(Math.random() * wordsList.length)];
@ -292,9 +288,9 @@ private generateRecoveryWords(): string[] {
} }
} }
return recoveryWords; return recoveryWords;
} }
private exportUserData(): void { private exportUserData(): void {
const data: { [key: string]: string | null } = {}; const data: { [key: string]: string | null } = {};
for (let i = 0; i < localStorage.length; i++) { for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i); const key = localStorage.key(i);
@ -314,9 +310,9 @@ private exportUserData(): void {
a.click(); a.click();
document.body.removeChild(a); document.body.removeChild(a);
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
} }
private updateActionButtons(): void { private updateActionButtons(): void {
const buttonContainer = document.querySelector('.button-container'); const buttonContainer = document.querySelector('.button-container');
if (!buttonContainer) return; if (!buttonContainer) return;
@ -326,9 +322,9 @@ private updateActionButtons(): void {
<button onclick="${this.getCancelFunction()}" class="action-button cancel-button">✗</button> <button onclick="${this.getCancelFunction()}" class="action-button cancel-button">✗</button>
</div> </div>
`; `;
} }
private getConfirmFunction(): string { private getConfirmFunction(): string {
switch (currentMode) { switch (currentMode) {
case 'wallet': case 'wallet':
return 'window.confirmWalletRow()'; return 'window.confirmWalletRow()';
@ -337,9 +333,9 @@ private getConfirmFunction(): string {
default: default:
return 'window.confirmRow()'; return 'window.confirmRow()';
} }
} }
private getCancelFunction(): string { private getCancelFunction(): string {
switch (currentMode) { switch (currentMode) {
case 'wallet': case 'wallet':
return 'window.cancelWalletRow()'; return 'window.cancelWalletRow()';
@ -348,10 +344,10 @@ private getCancelFunction(): string {
default: default:
return 'window.cancelRow()'; return 'window.cancelRow()';
} }
} }
// Fonctions de gestion des tableaux // Fonctions de gestion des tableaux
private addRow(): void { private addRow(): void {
if (isAddingRow) return; if (isAddingRow) return;
isAddingRow = true; isAddingRow = true;
@ -390,14 +386,16 @@ private addRow(): void {
deleteCell.style.width = '40px'; deleteCell.style.width = '40px';
this.updateActionButtons(); this.updateActionButtons();
} }
// Fonctions de mise à jour de l'interface // Fonctions de mise à jour de l'interface
private updateTableContent(rows: Row[]): void { private updateTableContent(rows: Row[]): void {
const tbody = document.querySelector('#pairing-table tbody'); const tbody = document.querySelector('#pairing-table tbody');
if (!tbody) return; if (!tbody) return;
tbody.innerHTML = rows.map(row => ` tbody.innerHTML = rows
.map(
(row) => `
<tr> <tr>
<td>${row.column1}</td> <td>${row.column1}</td>
<td class="device-name" onclick="window.editDeviceName(this)">${row.column2}</td> <td class="device-name" onclick="window.editDeviceName(this)">${row.column2}</td>
@ -408,19 +406,19 @@ private updateTableContent(rows: Row[]): void {
</button> </button>
</td> </td>
</tr> </tr>
`).join(''); `,
} )
.join('');
}
private confirmRow(): void {
private confirmRow(): void {
if (!currentRow) return; if (!currentRow) return;
const inputs = currentRow.getElementsByTagName('input'); const inputs = currentRow.getElementsByTagName('input');
const values: string[] = Array.from(inputs).map(input => input.value.trim()); const values: string[] = Array.from(inputs).map((input) => input.value.trim());
// Vérification des champs vides // Vérification des champs vides
if (values.some(value => value === '')) { if (values.some((value) => value === '')) {
showAlert('Please fill in all fields'); showAlert('Please fill in all fields');
return; return;
} }
@ -434,7 +432,7 @@ private confirmRow(): void {
const newRow: Row = { const newRow: Row = {
column1: values[0], column1: values[0],
column2: values[1], column2: values[1],
column3: values[2] column3: values[2],
}; };
const storageKey = STORAGE_KEYS[currentMode]; const storageKey = STORAGE_KEYS[currentMode];
@ -447,9 +445,9 @@ private confirmRow(): void {
this.resetButtonContainer(); this.resetButtonContainer();
this.updateTableContent(rows); this.updateTableContent(rows);
} }
private cancelRow(): void { private cancelRow(): void {
if (!currentRow) return; if (!currentRow) return;
currentRow.remove(); currentRow.remove();
@ -457,18 +455,18 @@ private cancelRow(): void {
currentRow = null; currentRow = null;
this.resetButtonContainer(); this.resetButtonContainer();
} }
private resetButtonContainer(): void { private resetButtonContainer(): void {
const buttonContainer = document.querySelector('.button-container'); const buttonContainer = document.querySelector('.button-container');
if (!buttonContainer) return; if (!buttonContainer) return;
buttonContainer.innerHTML = ` buttonContainer.innerHTML = `
<button class="add-row-button button-style" onclick="window.addRow()">Add a line</button> <button class="add-row-button button-style" onclick="window.addRow()">Add a line</button>
`; `;
} }
private deleteRow(button: HTMLButtonElement): void { private deleteRow(button: HTMLButtonElement): void {
const row = button.closest('tr'); const row = button.closest('tr');
if (!row) return; if (!row) return;
@ -499,9 +497,9 @@ private deleteRow(button: HTMLButtonElement): void {
rows.splice(index, 1); rows.splice(index, 1);
localStorage.setItem(storageKey, JSON.stringify(rows)); localStorage.setItem(storageKey, JSON.stringify(rows));
}, 300); }, 300);
} }
private editDeviceName(cell: HTMLTableCellElement): void { private editDeviceName(cell: HTMLTableCellElement): void {
if (cell.classList.contains('editing')) return; if (cell.classList.contains('editing')) return;
const currentValue = cell.textContent || ''; const currentValue = cell.textContent || '';
@ -521,9 +519,9 @@ private editDeviceName(cell: HTMLTableCellElement): void {
cell.appendChild(input); cell.appendChild(input);
cell.classList.add('editing'); cell.classList.add('editing');
input.focus(); input.focus();
} }
private finishEditing(cell: HTMLTableCellElement, input: HTMLInputElement): void { private finishEditing(cell: HTMLTableCellElement, input: HTMLInputElement): void {
const newValue = input.value.trim(); const newValue = input.value.trim();
if (newValue === '') { if (newValue === '') {
cell.textContent = cell.getAttribute('data-original-value') || ''; cell.textContent = cell.getAttribute('data-original-value') || '';
@ -548,9 +546,9 @@ private finishEditing(cell: HTMLTableCellElement, input: HTMLInputElement): void
cell.textContent = newValue; cell.textContent = newValue;
cell.classList.remove('editing'); cell.classList.remove('editing');
} }
// Fonction pour gérer le téléchargement de l'avatar // Fonction pour gérer le téléchargement de l'avatar
private handleAvatarUpload(event: Event): void { private handleAvatarUpload(event: Event): void {
const input = event.target as HTMLInputElement; const input = event.target as HTMLInputElement;
const file = input.files?.[0]; const file = input.files?.[0];
@ -568,10 +566,9 @@ private handleAvatarUpload(event: Event): void {
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
} }
private showProcess(): void {
private showProcess(): void {
//console.log("showProcess called"); //console.log("showProcess called");
currentMode = 'process'; currentMode = 'process';
this.hideAllContent(); this.hideAllContent();
@ -601,14 +598,16 @@ private showProcess(): void {
// Utiliser mockProcessRows au lieu du localStorage // Utiliser mockProcessRows au lieu du localStorage
this.updateProcessTableContent(mockProcessRows); this.updateProcessTableContent(mockProcessRows);
} }
} }
// Fonction utilitaire pour mettre à jour le contenu du tableau Process // Fonction utilitaire pour mettre à jour le contenu du tableau Process
private updateProcessTableContent(rows: any[]): void { private updateProcessTableContent(rows: any[]): void {
const tbody = document.querySelector('#process-table tbody'); const tbody = document.querySelector('#process-table tbody');
if (!tbody) return; if (!tbody) return;
tbody.innerHTML = rows.map(row => ` tbody.innerHTML = rows
.map(
(row) => `
<tr> <tr>
<td>${row.process}</td> <td>${row.process}</td>
<td>${row.role}</td> <td>${row.role}</td>
@ -621,19 +620,21 @@ private updateProcessTableContent(rows: any[]): void {
</div> </div>
</td> </td>
</tr> </tr>
`).join(''); `,
} )
.join('');
}
private showProcessNotifications(processName: string): void {
const process = mockProcessRows.find((p) => p.process === processName);
private showProcessNotifications(processName: string): void {
const process = mockProcessRows.find(p => p.process === processName);
if (!process) return; if (!process) return;
const modal = document.createElement('div'); const modal = document.createElement('div');
modal.className = 'notifications-modal'; modal.className = 'notifications-modal';
let notificationsList = process.notification.messages.map(msg => ` let notificationsList = process.notification.messages
.map(
(msg) => `
<div class="notification-item ${msg.read ? 'read' : 'unread'}" <div class="notification-item ${msg.read ? 'read' : 'unread'}"
onclick="window.markAsRead('${processName}', ${msg.id}, this)"> onclick="window.markAsRead('${processName}', ${msg.id}, this)">
<div class="notification-status"> <div class="notification-status">
@ -644,7 +645,9 @@ private showProcessNotifications(processName: string): void {
<small>${msg.date}</small> <small>${msg.date}</small>
</div> </div>
</div> </div>
`).join(''); `,
)
.join('');
if (process.notification.messages.length === 0) { if (process.notification.messages.length === 0) {
notificationsList = '<p>No notifications</p>'; notificationsList = '<p>No notifications</p>';
@ -674,17 +677,15 @@ private showProcessNotifications(processName: string): void {
modal.remove(); modal.remove();
this.showProcess(); // Rafraîchir l'affichage pour mettre à jour les compteurs this.showProcess(); // Rafraîchir l'affichage pour mettre à jour les compteurs
}); });
} }
private handleLogout(): void {
private handleLogout(): void {
localStorage.clear(); localStorage.clear();
window.location.href = '../login/login.html'; window.location.href = '../login/login.html';
} }
// Fonctions de gestion des contrats
// Fonctions de gestion des contrats private showContractPopup(contractId: string) {
private showContractPopup(contractId: string) {
// Empêcher la navigation par défaut // Empêcher la navigation par défaut
event?.preventDefault(); event?.preventDefault();
// Check if the contract exists in mockContracts // Check if the contract exists in mockContracts
@ -706,7 +707,7 @@ private showContractPopup(contractId: string) {
<p><strong>Parties:</strong> ${contract.parties.join(', ')}</p> <p><strong>Parties:</strong> ${contract.parties.join(', ')}</p>
<p><strong>Terms:</strong></p> <p><strong>Terms:</strong></p>
<ul> <ul>
${contract.terms.map(term => `<li>${term}</li>`).join('')} ${contract.terms.map((term) => `<li>${term}</li>`).join('')}
</ul> </ul>
<p><strong>Content:</strong> ${contract.content}</p> <p><strong>Content:</strong> ${contract.content}</p>
</div> </div>
@ -724,25 +725,23 @@ private showContractPopup(contractId: string) {
popup.addEventListener('click', (e) => { popup.addEventListener('click', (e) => {
if (e.target === popup) closePopup(); if (e.target === popup) closePopup();
}); });
} }
// Ajouter à l'objet window // Ajouter à l'objet window
// Fonction utilitaire pour cacher tous les contenus
// Fonction utilitaire pour cacher tous les contenus private hideAllContent(): void {
private hideAllContent(): void {
const contents = ['pairing-content', 'wallet-content', 'process-content', 'data-content']; const contents = ['pairing-content', 'wallet-content', 'process-content', 'data-content'];
contents.forEach(id => { contents.forEach((id) => {
const element = document.getElementById(id); const element = document.getElementById(id);
if (element) { if (element) {
element.style.display = 'none'; element.style.display = 'none';
} }
}); });
} }
// Fonctions d'affichage des sections
private showPairing(): void {
// Fonctions d'affichage des sections
private showPairing(): void {
isAddingRow = false; isAddingRow = false;
currentRow = null; currentRow = null;
@ -756,7 +755,6 @@ private showPairing(): void {
headerElement.textContent = 'Pairing'; headerElement.textContent = 'Pairing';
} }
// Afficher le contenu de pairing // Afficher le contenu de pairing
const pairingContent = document.getElementById('pairing-content'); const pairingContent = document.getElementById('pairing-content');
@ -786,9 +784,9 @@ private showPairing(): void {
const rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.pairing) || '[]'); const rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.pairing) || '[]');
this.updateTableContent(rows); this.updateTableContent(rows);
} }
} }
private showWallet(): void { private showWallet(): void {
isAddingRow = false; isAddingRow = false;
currentRow = null; currentRow = null;
@ -823,23 +821,26 @@ private showWallet(): void {
const rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.wallet) || '[]'); const rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.wallet) || '[]');
this.updateWalletTableContent(rows); this.updateWalletTableContent(rows);
} }
private updateWalletTableContent(rows: WalletRow[]): void {
private updateWalletTableContent(rows: WalletRow[]): void {
const tbody = document.querySelector('#wallet-table tbody'); const tbody = document.querySelector('#wallet-table tbody');
if (!tbody) return; if (!tbody) return;
tbody.innerHTML = rows.map(row => ` tbody.innerHTML = rows
.map(
(row) => `
<tr> <tr>
<td>${row.column1}</td> <td>${row.column1}</td>
<td>${row.column2}</td> <td>${row.column2}</td>
<td class="device-name" onclick="editDeviceName(this)">${row.column3}</td> <td class="device-name" onclick="editDeviceName(this)">${row.column3}</td>
</tr> </tr>
`).join(''); `,
} )
.join('');
}
private showData(): void { private showData(): void {
//console.log("showData called"); //console.log("showData called");
currentMode = 'data'; currentMode = 'data';
this.hideAllContent(); this.hideAllContent();
@ -872,10 +873,10 @@ private showData(): void {
const rows = mockDataRows || JSON.parse(localStorage.getItem(STORAGE_KEYS.data) || '[]'); const rows = mockDataRows || JSON.parse(localStorage.getItem(STORAGE_KEYS.data) || '[]');
this.updateDataTableContent(rows); this.updateDataTableContent(rows);
} }
} }
// Fonctions de gestion du wallet // Fonctions de gestion du wallet
private addWalletRow(): void { private addWalletRow(): void {
if (isAddingRow) return; if (isAddingRow) return;
isAddingRow = true; isAddingRow = true;
@ -885,7 +886,7 @@ private addWalletRow(): void {
currentRow = table.insertRow(); currentRow = table.insertRow();
const placeholders = ['Label', 'Wallet', 'Type']; const placeholders = ['Label', 'Wallet', 'Type'];
placeholders.forEach(placeholder => { placeholders.forEach((placeholder) => {
const cell = currentRow!.insertCell(); const cell = currentRow!.insertCell();
const input = document.createElement('input'); const input = document.createElement('input');
input.type = 'text'; input.type = 'text';
@ -906,19 +907,19 @@ private addWalletRow(): void {
`; `;
this.updateActionButtons(); this.updateActionButtons();
} }
private confirmWalletRow(): void { private confirmWalletRow(): void {
if (!currentRow) return; if (!currentRow) return;
const inputs = Array.from(currentRow.getElementsByTagName('input')); const inputs = Array.from(currentRow.getElementsByTagName('input'));
const allFieldsFilled = inputs.every(input => input.value.trim() !== ''); const allFieldsFilled = inputs.every((input) => input.value.trim() !== '');
if (allFieldsFilled) { if (allFieldsFilled) {
const newRow: WalletRow = { const newRow: WalletRow = {
column1: inputs[0].value.trim(), column1: inputs[0].value.trim(),
column2: inputs[1].value.trim(), column2: inputs[1].value.trim(),
column3: inputs[2].value.trim() column3: inputs[2].value.trim(),
}; };
const rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.wallet) || '[]'); const rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.wallet) || '[]');
@ -931,9 +932,9 @@ private confirmWalletRow(): void {
} else { } else {
showAlert('Please complete all fields before confirming.'); showAlert('Please complete all fields before confirming.');
} }
} }
private cancelWalletRow(): void { private cancelWalletRow(): void {
if (!currentRow) return; if (!currentRow) return;
currentRow.remove(); currentRow.remove();
@ -947,15 +948,15 @@ private cancelWalletRow(): void {
buttonContainer.innerHTML = ` buttonContainer.innerHTML = `
<button class="add-row-button button-style" onclick="window.addWalletRow()">Add a line</button> <button class="add-row-button button-style" onclick="window.addWalletRow()">Add a line</button>
`; `;
}
private updateDataTableContent(rows: DataRow[]): void {
}
private updateDataTableContent(rows: DataRow[]): void {
const tbody = document.querySelector('#data-table tbody'); const tbody = document.querySelector('#data-table tbody');
if (!tbody) return; if (!tbody) return;
tbody.innerHTML = rows.map(row => ` tbody.innerHTML = rows
.map(
(row) => `
<tr> <tr>
<td>${row.column1}</td> <td>${row.column1}</td>
<td>${row.column2}</td> <td>${row.column2}</td>
@ -966,11 +967,13 @@ private updateDataTableContent(rows: DataRow[]): void {
<a href="#" onclick="showContractPopup('${row.column6}')">${row.column6}</a> <a href="#" onclick="showContractPopup('${row.column6}')">${row.column6}</a>
</td> </td>
</tr> </tr>
`).join(''); `,
} )
.join('');
}
// Fonctions de gestion de l'avatar et de la bannière // Fonctions de gestion de l'avatar et de la bannière
private openAvatarPopup(): void { private openAvatarPopup(): void {
const popup = document.getElementById('avatar-popup'); const popup = document.getElementById('avatar-popup');
if (!popup) return; if (!popup) return;
@ -1052,9 +1055,9 @@ private openAvatarPopup(): void {
exportRecoveryBtn.style.cursor = 'not-allowed'; exportRecoveryBtn.style.cursor = 'not-allowed';
} }
} }
} }
private setupEventListeners(popup: HTMLElement): void { private setupEventListeners(popup: HTMLElement): void {
// Gestionnaire pour la fermeture // Gestionnaire pour la fermeture
const closeBtn = popup.querySelector('.close-popup'); const closeBtn = popup.querySelector('.close-popup');
if (closeBtn) { if (closeBtn) {
@ -1141,14 +1144,14 @@ private setupEventListeners(popup: HTMLElement): void {
if (navLastName) navLastName.textContent = newLastName; if (navLastName) navLastName.textContent = newLastName;
}); });
} }
} }
private closeAvatarPopup(): void { private closeAvatarPopup(): void {
const popup = document.querySelector('.avatar-popup'); const popup = document.querySelector('.avatar-popup');
if (popup) popup.remove(); if (popup) popup.remove();
} }
private loadAvatar(): void { private loadAvatar(): void {
const savedAvatar = localStorage.getItem('userAvatar'); const savedAvatar = localStorage.getItem('userAvatar');
if (savedAvatar) { if (savedAvatar) {
const avatarImg = document.querySelector('.avatar') as HTMLImageElement; const avatarImg = document.querySelector('.avatar') as HTMLImageElement;
@ -1156,9 +1159,9 @@ private loadAvatar(): void {
avatarImg.src = savedAvatar; avatarImg.src = savedAvatar;
} }
} }
} }
private loadUserInfo(): void { private loadUserInfo(): void {
const savedName = localStorage.getItem('userName'); const savedName = localStorage.getItem('userName');
const savedLastName = localStorage.getItem('userLastName'); const savedLastName = localStorage.getItem('userLastName');
@ -1181,8 +1184,7 @@ private loadUserInfo(): void {
this.loadAvatar(); this.loadAvatar();
this.loadSavedBanner(); this.loadSavedBanner();
} }
private updateNavbarName(name: string): void { private updateNavbarName(name: string): void {
const nameElement = document.querySelector('.nav-wrapper .user-name'); const nameElement = document.querySelector('.nav-wrapper .user-name');
@ -1198,15 +1200,13 @@ private loadUserInfo(): void {
} }
} }
private initializeEventListeners() { private initializeEventListeners() {
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
this.showPairing(); this.showPairing();
}); });
const editableFields = document.querySelectorAll<HTMLElement>('.editable'); const editableFields = document.querySelectorAll<HTMLElement>('.editable');
editableFields.forEach(field => { editableFields.forEach((field) => {
field.addEventListener('click', () => { field.addEventListener('click', () => {
if (!field.classList.contains('editing')) { if (!field.classList.contains('editing')) {
const currentValue = field.textContent || ''; const currentValue = field.textContent || '';
@ -1234,7 +1234,6 @@ private loadUserInfo(): void {
this.loadSavedBanner(); this.loadSavedBanner();
this.loadUserInfo(); this.loadUserInfo();
const savedAvatar = localStorage.getItem('userAvatar'); const savedAvatar = localStorage.getItem('userAvatar');
const savedBanner = localStorage.getItem('userBanner'); const savedBanner = localStorage.getItem('userBanner');
const savedName = localStorage.getItem('userName'); const savedName = localStorage.getItem('userName');
@ -1261,6 +1260,3 @@ private loadUserInfo(): void {
customElements.define('account-element', AccountElement); customElements.define('account-element', AccountElement);
export { AccountElement }; export { AccountElement };

16
src/pages/chat/chat-component.ts
View File

@ -1,21 +1,21 @@
import { ChatElement } from './chat'; import { ChatElement } from './chat';
import chatCss from '../../../public/style/chat.css?raw' import chatCss from '../../../public/style/chat.css?raw';
import Services from '../../services/service.js' import Services from '../../services/service.js';
class ChatComponent extends HTMLElement { class ChatComponent extends HTMLElement {
_callback: any _callback: any;
chatElement: ChatElement | null = null; chatElement: ChatElement | null = null;
constructor() { constructor() {
super(); super();
console.log('INIT') console.log('INIT');
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
this.chatElement = this.shadowRoot?.querySelector('chat-element') || null; this.chatElement = this.shadowRoot?.querySelector('chat-element') || null;
} }
connectedCallback() { connectedCallback() {
console.log('CALLBACKs') console.log('CALLBACKs');
this.render(); this.render();
this.fetchData(); this.fetchData();
@ -28,7 +28,7 @@ class ChatComponent extends HTMLElement {
if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) { if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
const data = await (window as any).myService?.getProcesses(); const data = await (window as any).myService?.getProcesses();
} else { } else {
const service = await Services.getInstance() const service = await Services.getInstance();
const data = await service.getProcesses(); const data = await service.getProcesses();
} }
} }
@ -46,7 +46,7 @@ class ChatComponent extends HTMLElement {
} }
render() { render() {
if(this.shadowRoot) { if (this.shadowRoot) {
// Créer l'élément chat-element // Créer l'élément chat-element
const chatElement = document.createElement('chat-element'); const chatElement = document.createElement('chat-element');
this.shadowRoot.innerHTML = `<style>${chatCss}</style>`; this.shadowRoot.innerHTML = `<style>${chatCss}</style>`;
@ -55,5 +55,5 @@ class ChatComponent extends HTMLElement {
} }
} }
export { ChatComponent } export { ChatComponent };
customElements.define('chat-component', ChatComponent); customElements.define('chat-component', ChatComponent);

27
src/pages/chat/chat.html
View File

@ -1,15 +1,13 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Messagerie</title> <title>Messagerie</title>
<link rel="stylesheet" href="../../public/style/chat.css"> <link rel="stylesheet" href="../../public/style/chat.css" />
</head> </head>
<body>
<body>
<!-- Main content--> <!-- Main content-->
<div class="container"> <div class="container">
<!-- List of groups --> <!-- List of groups -->
@ -33,21 +31,18 @@
<label for="file-input" class="attachment-icon"> <label for="file-input" class="attachment-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path <path
d="M13.514 2.444l-10.815 10.785c-.449.449-.678 1.074-.625 1.707l.393 4.696c.041.479.422.86.9.9l4.697.394c.633.053 1.258-.177 1.707-.626l11.875-11.844c.196-.196.195-.512 0-.707l-3.536-3.536c-.195-.195-.511-.196-.707 0l-8.878 8.848c-.162.162-.253.382-.253.611v.725c0 .184.148.332.332.332h.725c.229 0 .448-.092.61-.254l7.11-7.08 1.415 1.415-7.386 7.354c-.375.375-.885.586-1.414.586h-2.414c-.555 0-1-.448-1-1v-2.414c0-.53.211-1.039.586-1.414l9.506-9.477c.781-.781 2.049-.781 2.829-.001l4.243 4.243c.391.391.586.902.586 1.414 0 .512-.196 1.025-.587 1.416l-12.35 12.319c-.748.747-1.76 1.164-2.81 1.164-.257 0-6.243-.467-6.499-.487-.664-.052-1.212-.574-1.268-1.267-.019-.242-.486-6.246-.486-6.499 0-1.05.416-2.062 1.164-2.811l10.936-10.936 1.414 1.444z" /> d="M13.514 2.444l-10.815 10.785c-.449.449-.678 1.074-.625 1.707l.393 4.696c.041.479.422.86.9.9l4.697.394c.633.053 1.258-.177 1.707-.626l11.875-11.844c.196-.196.195-.512 0-.707l-3.536-3.536c-.195-.195-.511-.196-.707 0l-8.878 8.848c-.162.162-.253.382-.253.611v.725c0 .184.148.332.332.332h.725c.229 0 .448-.092.61-.254l7.11-7.08 1.415 1.415-7.386 7.354c-.375.375-.885.586-1.414.586h-2.414c-.555 0-1-.448-1-1v-2.414c0-.53.211-1.039.586-1.414l9.506-9.477c.781-.781 2.049-.781 2.829-.001l4.243 4.243c.391.391.586.902.586 1.414 0 .512-.196 1.025-.587 1.416l-12.35 12.319c-.748.747-1.76 1.164-2.81 1.164-.257 0-6.243-.467-6.499-.487-.664-.052-1.212-.574-1.268-1.267-.019-.242-.486-6.246-.486-6.499 0-1.05.416-2.062 1.164-2.811l10.936-10.936 1.414 1.444z"
/>
</svg> </svg>
</label> </label>
<input type="file" id="file-input" style="display: none;" /> <input type="file" id="file-input" style="display: none" />
<textarea id="message-input" rows="3" placeholder="Type your message..."></textarea> <textarea id="message-input" rows="3" placeholder="Type your message..."></textarea>
<button id="send-button">Send</button> <button id="send-button">Send</button>
</div> </div>
</div> </div>
</div> </div>
<script type="module" src="./chat.ts?ts"></script> <script type="module" src="./chat.ts?ts"></script>
</body>
</body>
</html> </html>

83
src/pages/chat/chat.ts
View File

@ -9,16 +9,12 @@ declare global {
import { groupsMock } from '../../mocks/mock-signature/groupsMock'; import { groupsMock } from '../../mocks/mock-signature/groupsMock';
import { messagesMock as initialMessagesMock, messagesMock } from '../../mocks/mock-signature/messagesMock'; import { messagesMock as initialMessagesMock, messagesMock } from '../../mocks/mock-signature/messagesMock';
import { membersMock } from '../../mocks/mock-signature/membersMocks'; import { membersMock } from '../../mocks/mock-signature/membersMocks';
import { import { Message, DocumentSignature } from '../../models/signature.models';
Message,
DocumentSignature,
} from '../../models/signature.models';
import { messageStore } from '../../utils/messageMock'; import { messageStore } from '../../utils/messageMock';
import { Member } from '../../interface/memberInterface'; import { Member } from '../../interface/memberInterface';
import { Group } from '../../interface/groupInterface'; import { Group } from '../../interface/groupInterface';
import { getCorrectDOM } from '../../utils/document.utils'; import { getCorrectDOM } from '../../utils/document.utils';
let currentUser: Member = membersMock[0]; let currentUser: Member = membersMock[0];
interface LocalNotification { interface LocalNotification {
@ -44,13 +40,12 @@ class ChatElement extends HTMLElement {
private notificationBoard = document.getElementById('notification-board'); private notificationBoard = document.getElementById('notification-board');
private notificationBell = document.getElementById('notification-bell'); private notificationBell = document.getElementById('notification-bell');
private selectedSignatories: DocumentSignature[] = []; private selectedSignatories: DocumentSignature[] = [];
private allMembers = membersMock.map(member => ({ private allMembers = membersMock.map((member) => ({
id: member.id, id: member.id,
name: member.name, name: member.name,
roleName: 'Default Role' roleName: 'Default Role',
})); }));
constructor() { constructor() {
super(); super();
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
@ -62,9 +57,7 @@ class ChatElement extends HTMLElement {
// Initialiser les événements de notification // Initialiser les événements de notification
document.addEventListener('click', (event: Event): void => { document.addEventListener('click', (event: Event): void => {
if (this.notificationBoard && this.notificationBoard.style.display === 'block' && if (this.notificationBoard && this.notificationBoard.style.display === 'block' && !this.notificationBoard.contains(event.target as Node) && this.notificationBell && !this.notificationBell.contains(event.target as Node)) {
!this.notificationBoard.contains(event.target as Node) &&
this.notificationBell && !this.notificationBell.contains(event.target as Node)) {
this.notificationBoard.style.display = 'none'; this.notificationBoard.style.display = 'none';
} }
}); });
@ -142,14 +135,13 @@ class ChatElement extends HTMLElement {
(this.notificationBadge as HTMLElement).style.display = count > 0 ? 'block' : 'none'; (this.notificationBadge as HTMLElement).style.display = count > 0 ? 'block' : 'none';
} }
// Add notification // Add notification
private addNotification(memberId: string, message: Message) { private addNotification(memberId: string, message: Message) {
// Creating a new notification // Creating a new notification
const notification = { const notification = {
memberId, memberId,
text: `New message from Member ${memberId}: ${message.text}`, text: `New message from Member ${memberId}: ${message.text}`,
time: message.time time: message.time,
}; };
// Added notification to list and interface // Added notification to list and interface
@ -158,7 +150,7 @@ class ChatElement extends HTMLElement {
this.updateNotificationBadge(); this.updateNotificationBadge();
} }
// Send a messsage // Send a messsage
private sendMessage() { private sendMessage() {
const messageInput = document.getElementById('message-input') as HTMLInputElement; const messageInput = document.getElementById('message-input') as HTMLInputElement;
if (!messageInput) return; if (!messageInput) return;
@ -170,10 +162,10 @@ class ChatElement extends HTMLElement {
const newMessage: Message = { const newMessage: Message = {
id: Date.now(), id: Date.now(),
sender: "4NK", sender: '4NK',
text: messageText, text: messageText,
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
type: 'text' as const type: 'text' as const,
}; };
// Add and display the message immediately // Add and display the message immediately
messageStore.addMessage(this.selectedMemberId, newMessage); messageStore.addMessage(this.selectedMemberId, newMessage);
@ -200,22 +192,21 @@ class ChatElement extends HTMLElement {
container.scrollTop = container.scrollHeight; container.scrollTop = container.scrollHeight;
} }
// Load the list of members // Load the list of members
private loadMemberChat(memberId: string | number) { private loadMemberChat(memberId: string | number) {
this.selectedMemberId = String(memberId); this.selectedMemberId = String(memberId);
const memberMessages = this.messagesMock.find(m => String(m.memberId) === String(memberId)); const memberMessages = this.messagesMock.find((m) => String(m.memberId) === String(memberId));
// Find the process and the role of the member // Find the process and the role of the member
let memberInfo = { processName: '', roleName: '', memberName: '' }; let memberInfo = { processName: '', roleName: '', memberName: '' };
groupsMock.forEach(process => { groupsMock.forEach((process) => {
process.roles.forEach(role => { process.roles.forEach((role) => {
const member = role.members.find(m => String(m.id) === String(memberId)); const member = role.members.find((m) => String(m.id) === String(memberId));
if (member) { if (member) {
memberInfo = { memberInfo = {
processName: process.name, processName: process.name,
roleName: role.name, roleName: role.name,
memberName: member.name memberName: member.name,
}; };
} }
}); });
@ -241,7 +232,7 @@ class ChatElement extends HTMLElement {
messageContent.classList.add('user'); messageContent.classList.add('user');
} else { } else {
messageContent.innerHTML = `<strong>${message.sender}</strong>: ${message.text} <span style="float: right;">${message.time}</span>`; messageContent.innerHTML = `<strong>${message.sender}</strong>: ${message.text} <span style="float: right;">${message.time}</span>`;
if (message.sender === "4NK") { if (message.sender === '4NK') {
messageContent.classList.add('user'); messageContent.classList.add('user');
} }
} }
@ -251,11 +242,10 @@ class ChatElement extends HTMLElement {
}); });
} }
this.scrollToBottom(messagesContainer); this.scrollToBottom(messagesContainer);
} }
private toggleMembers(role: { members: { id: string | number; name: string; }[] }, roleElement: HTMLElement) { private toggleMembers(role: { members: { id: string | number; name: string }[] }, roleElement: HTMLElement) {
let memberList = roleElement.querySelector('.member-list'); let memberList = roleElement.querySelector('.member-list');
if (memberList) { if (memberList) {
(memberList as HTMLElement).style.display = (memberList as HTMLElement).style.display === 'none' ? 'block' : 'none'; (memberList as HTMLElement).style.display = (memberList as HTMLElement).style.display === 'none' ? 'block' : 'none';
@ -265,7 +255,7 @@ class ChatElement extends HTMLElement {
memberList = document.createElement('ul'); memberList = document.createElement('ul');
memberList.className = 'member-list'; memberList.className = 'member-list';
role.members.forEach(member => { role.members.forEach((member) => {
const memberItem = document.createElement('li'); const memberItem = document.createElement('li');
memberItem.textContent = member.name; memberItem.textContent = member.name;
@ -280,7 +270,6 @@ class ChatElement extends HTMLElement {
roleElement.appendChild(memberList); roleElement.appendChild(memberList);
} }
// Toggle the list of Roles // Toggle the list of Roles
private toggleRoles(group: Group, groupElement: HTMLElement) { private toggleRoles(group: Group, groupElement: HTMLElement) {
console.log('=== toggleRoles START ==='); console.log('=== toggleRoles START ===');
@ -292,7 +281,7 @@ class ChatElement extends HTMLElement {
if (roleList) { if (roleList) {
const roleItems = roleList.querySelectorAll('.role-item'); const roleItems = roleList.querySelectorAll('.role-item');
roleItems.forEach(roleItem => { roleItems.forEach((roleItem) => {
console.log('Processing roleItem:', roleItem.innerHTML); // Voir le contenu HTML complet console.log('Processing roleItem:', roleItem.innerHTML); // Voir le contenu HTML complet
let container = roleItem.querySelector('.role-item-container'); let container = roleItem.querySelector('.role-item-container');
@ -325,9 +314,12 @@ class ChatElement extends HTMLElement {
folderButton.addEventListener('click', (event) => { folderButton.addEventListener('click', (event) => {
event.stopPropagation(); event.stopPropagation();
console.log('Clicked role name:', roleName); console.log('Clicked role name:', roleName);
console.log('Available roles:', group.roles.map(r => r.name)); console.log(
'Available roles:',
group.roles.map((r) => r.name),
);
const role = group.roles.find(r => r.name === roleName); const role = group.roles.find((r) => r.name === roleName);
if (role) { if (role) {
console.log('Found role:', role); console.log('Found role:', role);
} else { } else {
@ -340,17 +332,15 @@ class ChatElement extends HTMLElement {
} }
}); });
(roleList as HTMLElement).style.display = (roleList as HTMLElement).style.display = (roleList as HTMLElement).style.display === 'none' ? 'block' : 'none';
(roleList as HTMLElement).style.display === 'none' ? 'block' : 'none';
} }
} }
private loadGroupList(): void { private loadGroupList(): void {
const groupList = document.getElementById('group-list'); const groupList = document.getElementById('group-list');
if (!groupList) return; if (!groupList) return;
groupsMock.forEach(group => { groupsMock.forEach((group) => {
const li = document.createElement('li'); const li = document.createElement('li');
li.className = 'group-list-item'; li.className = 'group-list-item';
@ -379,7 +369,7 @@ class ChatElement extends HTMLElement {
roleList.style.display = 'none'; roleList.style.display = 'none';
// Add roles for this process // Add roles for this process
group.roles.forEach(role => { group.roles.forEach((role) => {
const roleItem = document.createElement('li'); const roleItem = document.createElement('li');
roleItem.className = 'role-item'; roleItem.className = 'role-item';
roleItem.textContent = role.name; roleItem.textContent = role.name;
@ -395,14 +385,15 @@ class ChatElement extends HTMLElement {
}); });
} }
// Function to manage the list of users // Function to manage the list of users
private toggleUserList() { private toggleUserList() {
const userList = getCorrectDOM('userList'); const userList = getCorrectDOM('userList');
if (!userList) return; if (!userList) return;
if (!(userList as HTMLElement).classList.contains('show')) { if (!(userList as HTMLElement).classList.contains('show')) {
(userList as HTMLElement).innerHTML = membersMock.map(member => ` (userList as HTMLElement).innerHTML = membersMock
.map(
(member) => `
<div class="user-list-item" onclick="switchUser('${member.id}')"> <div class="user-list-item" onclick="switchUser('${member.id}')">
<span class="user-avatar">${member.avatar}</span> <span class="user-avatar">${member.avatar}</span>
<div> <div>
@ -410,13 +401,15 @@ class ChatElement extends HTMLElement {
<span class="user-email">${member.email}</span> <span class="user-email">${member.email}</span>
</div> </div>
</div> </div>
`).join(''); `,
)
.join('');
} }
(userList as HTMLElement).classList.toggle('show'); (userList as HTMLElement).classList.toggle('show');
} }
private switchUser(userId: string | number) { private switchUser(userId: string | number) {
const user = membersMock.find(member => member.id === userId); const user = membersMock.find((member) => member.id === userId);
if (!user) return; if (!user) return;
currentUser = user; currentUser = user;
this.updateCurrentUserDisplay(); this.updateCurrentUserDisplay();
@ -441,9 +434,9 @@ class ChatElement extends HTMLElement {
return { return {
id: Date.now(), id: Date.now(),
sender: senderName, sender: senderName,
text: "OK...", text: 'OK...',
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
type: 'text' as const type: 'text' as const,
}; };
} }
@ -459,11 +452,11 @@ class ChatElement extends HTMLElement {
if (this.selectedMemberId) { if (this.selectedMemberId) {
messageStore.addMessage(this.selectedMemberId, { messageStore.addMessage(this.selectedMemberId, {
id: Date.now(), id: Date.now(),
sender: "4NK", sender: '4NK',
fileName: fileName, fileName: fileName,
fileData: fileData, fileData: fileData,
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }), time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
type: 'file' type: 'file',
}); });
console.log('Message added to store'); console.log('Message added to store');
@ -475,8 +468,7 @@ class ChatElement extends HTMLElement {
} }
private initializeEventListeners() { private initializeEventListeners() {
document.addEventListener('DOMContentLoaded', (): void => { document.addEventListener('DOMContentLoaded', (): void => {});
});
// Gestionnaire d'événements pour le chat // Gestionnaire d'événements pour le chat
const sendBtn = this.shadowRoot?.querySelector('#send-button'); const sendBtn = this.shadowRoot?.querySelector('#send-button');
@ -533,4 +525,3 @@ class ChatElement extends HTMLElement {
customElements.define('chat-element', ChatElement); customElements.define('chat-element', ChatElement);
export { ChatElement }; export { ChatElement };

11
src/pages/home/home-component.ts
View File

@ -1,6 +1,6 @@
import loginHtml from './home.html?raw' import loginHtml from './home.html?raw';
import loginScript from './home.ts?raw' import loginScript from './home.ts?raw';
import loginCss from '../../4nk.css?raw' import loginCss from '../../4nk.css?raw';
import { initHomePage } from './home'; import { initHomePage } from './home';
export class LoginComponent extends HTMLElement { export class LoginComponent extends HTMLElement {
@ -11,7 +11,7 @@ export class LoginComponent extends HTMLElement {
} }
connectedCallback() { connectedCallback() {
console.log('CALLBACK LOGIN PAGE') console.log('CALLBACK LOGIN PAGE');
this.render(); this.render();
setTimeout(() => { setTimeout(() => {
initHomePage(); initHomePage();
@ -31,7 +31,8 @@ export class LoginComponent extends HTMLElement {
} }
render() { render() {
if(this.shadowRoot) this.shadowRoot.innerHTML = ` if (this.shadowRoot)
this.shadowRoot.innerHTML = `
<style> <style>
${loginCss} ${loginCss}
</style>${loginHtml} </style>${loginHtml}

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

@ -4,10 +4,10 @@ import { addSubscription } from '../../utils/subscription.utils';
import { displayEmojis, generateQRCode } from '../../utils/sp-address.utils'; import { displayEmojis, generateQRCode } from '../../utils/sp-address.utils';
import { getCorrectDOM } from '../../utils/html.utils'; import { getCorrectDOM } from '../../utils/html.utils';
import QrScannerComponent from '../../components/qrcode-scanner/qrcode-scanner-component'; import QrScannerComponent from '../../components/qrcode-scanner/qrcode-scanner-component';
export {QrScannerComponent} export { QrScannerComponent };
export async function initHomePage(): Promise<void> { export async function initHomePage(): Promise<void> {
console.log('INIT-HOME'); console.log('INIT-HOME');
const container = getCorrectDOM('login-4nk-component') as HTMLElement const container = getCorrectDOM('login-4nk-component') as HTMLElement;
container.querySelectorAll('.tab').forEach((tab) => { container.querySelectorAll('.tab').forEach((tab) => {
addSubscription(tab, 'click', () => { addSubscription(tab, 'click', () => {
container.querySelectorAll('.tab').forEach((t) => t.classList.remove('active')); container.querySelectorAll('.tab').forEach((t) => t.classList.remove('active'));
@ -34,17 +34,15 @@ export async function openModal(myAddress: string, receiverAddress: string) {
// service.setNotification() // service.setNotification()
function scanDevice() { function scanDevice() {
const container = getCorrectDOM('login-4nk-component') as HTMLElement const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const scannerImg = container.querySelector('#scanner') as HTMLElement; const scannerImg = container.querySelector('#scanner') as HTMLElement;
if (scannerImg) scannerImg.style.display = 'none'; if (scannerImg) scannerImg.style.display = 'none';
const scannerQrCode = container.querySelector('.qr-code-scanner') as HTMLElement; const scannerQrCode = container.querySelector('.qr-code-scanner') as HTMLElement;
if (scannerQrCode) scannerQrCode.style.display = 'block'; if (scannerQrCode) scannerQrCode.style.display = 'block';
const scanButton = container?.querySelector('#scan-btn') as HTMLElement; const scanButton = container?.querySelector('#scan-btn') as HTMLElement;
if (scanButton) scanButton.style.display = 'none'; if (scanButton) scanButton.style.display = 'none';
const reader = container?.querySelector('#qr-reader') const reader = container?.querySelector('#qr-reader');
if(reader) reader.innerHTML = '<qr-scanner></qr-scanner>' if (reader) reader.innerHTML = '<qr-scanner></qr-scanner>';
} }
(window as any).scanDevice = scanDevice; (window as any).scanDevice = scanDevice;

11
src/pages/process-element/process-component.ts
View File

@ -1,6 +1,6 @@
import processHtml from './process-element.html?raw' import processHtml from './process-element.html?raw';
import processScript from './process-element.ts?raw' import processScript from './process-element.ts?raw';
import processCss from '../../4nk.css?raw' import processCss from '../../4nk.css?raw';
import { initProcessElement } from './process-element'; import { initProcessElement } from './process-element';
export class ProcessListComponent extends HTMLElement { export class ProcessListComponent extends HTMLElement {
@ -14,7 +14,7 @@ export class ProcessListComponent extends HTMLElement {
} }
connectedCallback() { connectedCallback() {
console.log('CALLBACK PROCESS LIST PAGE') console.log('CALLBACK PROCESS LIST PAGE');
this.render(); this.render();
setTimeout(() => { setTimeout(() => {
initProcessElement(this.id, this.zone); initProcessElement(this.id, this.zone);
@ -34,7 +34,8 @@ export class ProcessListComponent extends HTMLElement {
} }
render() { render() {
if(this.shadowRoot) this.shadowRoot.innerHTML = ` if (this.shadowRoot)
this.shadowRoot.innerHTML = `
<style> <style>
${processCss} ${processCss}
</style>${processHtml} </style>${processHtml}

11
src/pages/process/process-list-component.ts
View File

@ -1,6 +1,6 @@
import processHtml from './process.html?raw' import processHtml from './process.html?raw';
import processScript from './process.ts?raw' import processScript from './process.ts?raw';
import processCss from '../../4nk.css?raw' import processCss from '../../4nk.css?raw';
import { init } from './process'; import { init } from './process';
export class ProcessListComponent extends HTMLElement { export class ProcessListComponent extends HTMLElement {
@ -11,7 +11,7 @@ export class ProcessListComponent extends HTMLElement {
} }
connectedCallback() { connectedCallback() {
console.log('CALLBACK PROCESS LIST PAGE') console.log('CALLBACK PROCESS LIST PAGE');
this.render(); this.render();
setTimeout(() => { setTimeout(() => {
init(); init();
@ -31,7 +31,8 @@ export class ProcessListComponent extends HTMLElement {
} }
render() { render() {
if(this.shadowRoot) this.shadowRoot.innerHTML = ` if (this.shadowRoot)
this.shadowRoot.innerHTML = `
<style> <style>
${processCss} ${processCss}
</style>${processHtml} </style>${processHtml}

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

@ -4,7 +4,7 @@ import { getCorrectDOM } from '~/utils/html.utils';
// 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
export async function init() { export async function init() {
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
const element = container.querySelector('select') as HTMLSelectElement; const element = container.querySelector('select') as HTMLSelectElement;
// 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');
@ -118,7 +118,7 @@ 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 container = getCorrectDOM('process-list-4nk-component') as HTMLElement const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
const search = wrapper.querySelector('.search-container'); const search = wrapper.querySelector('.search-container');
const inputInderline = container.querySelector('.selected-processes'); const inputInderline = container.querySelector('.selected-processes');
// Create token wrapper // Create token wrapper
@ -299,7 +299,7 @@ function removeToken(e: Event) {
// 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 container = getCorrectDOM('process-list-4nk-component') as HTMLElement const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
const process = container.querySelector('#' + target.dataset.option); const process = container.querySelector('#' + target.dataset.option);
process?.remove(); process?.remove();
@ -355,7 +355,7 @@ addSubscription(document, 'click', () => {
}); });
async function showSelectedProcess(elem: MouseEvent) { async function showSelectedProcess(elem: MouseEvent) {
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
if (elem) { if (elem) {
const cardContent = container.querySelector('.process-card-content'); const cardContent = container.querySelector('.process-card-content');
@ -387,7 +387,7 @@ async function showSelectedProcess(elem: MouseEvent) {
} }
function select(event: Event) { function select(event: Event) {
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
const target = event.target as HTMLElement; const target = event.target as HTMLElement;
const oldSelectedProcess = container.querySelector('.selected-process-zone'); const oldSelectedProcess = container.querySelector('.selected-process-zone');
oldSelectedProcess?.classList.remove('selected-process-zone'); oldSelectedProcess?.classList.remove('selected-process-zone');
@ -399,7 +399,7 @@ function select(event: Event) {
} }
function goToProcessPage() { function goToProcessPage() {
const container = getCorrectDOM('process-list-4nk-component') as HTMLElement const container = getCorrectDOM('process-list-4nk-component') as HTMLElement;
const target = container.querySelector('.selected-process-zone'); const target = container.querySelector('.selected-process-zone');
console.log('🚀 ~ goToProcessPage ~ event:', target); console.log('🚀 ~ goToProcessPage ~ event:', target);
@ -426,8 +426,8 @@ async function getProcesses(): Promise<any[]> {
const res = Object.entries(processes).map(([key, value]) => ({ const res = Object.entries(processes).map(([key, value]) => ({
key, key,
value value,
})) }));
return res; return res;
} }

16
src/pages/signature/signature-component.ts
View File

@ -1,21 +1,21 @@
import { SignatureElement } from './signature'; import { SignatureElement } from './signature';
import signatureCss from '../../../public/style/signature.css?raw' import signatureCss from '../../../public/style/signature.css?raw';
import Services from '../../services/service.js' import Services from '../../services/service.js';
class SignatureComponent extends HTMLElement { class SignatureComponent extends HTMLElement {
_callback: any _callback: any;
signatureElement: SignatureElement | null = null; signatureElement: SignatureElement | null = null;
constructor() { constructor() {
super(); super();
console.log('INIT') console.log('INIT');
this.attachShadow({ mode: 'open' }); this.attachShadow({ mode: 'open' });
this.signatureElement = this.shadowRoot?.querySelector('signature-element') || null; this.signatureElement = this.shadowRoot?.querySelector('signature-element') || null;
} }
connectedCallback() { connectedCallback() {
console.log('CALLBACKs') console.log('CALLBACKs');
this.render(); this.render();
this.fetchData(); this.fetchData();
@ -28,7 +28,7 @@ class SignatureComponent extends HTMLElement {
if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) { if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
const data = await (window as any).myService?.getProcesses(); const data = await (window as any).myService?.getProcesses();
} else { } else {
const service = await Services.getInstance() const service = await Services.getInstance();
const data = await service.getProcesses(); const data = await service.getProcesses();
} }
} }
@ -46,7 +46,7 @@ class SignatureComponent extends HTMLElement {
} }
render() { render() {
if(this.shadowRoot) { if (this.shadowRoot) {
// Créer l'élément signature-element // Créer l'élément signature-element
const signatureElement = document.createElement('signature-element'); const signatureElement = document.createElement('signature-element');
this.shadowRoot.innerHTML = `<style>${signatureCss}</style>`; this.shadowRoot.innerHTML = `<style>${signatureCss}</style>`;
@ -55,5 +55,5 @@ class SignatureComponent extends HTMLElement {
} }
} }
export { SignatureComponent } export { SignatureComponent };
customElements.define('signature-component', SignatureComponent); customElements.define('signature-component', SignatureComponent);

31
src/pages/signature/signature.html
View File

@ -1,22 +1,18 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="UTF-8" />
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signatures</title> <title>Signatures</title>
<link rel="stylesheet" href="../../../public/style/signature.css"> <link rel="stylesheet" href="../../../public/style/signature.css" />
</head> </head>
<body>
<body>
<!-- Main content--> <!-- Main content-->
<div class="container"> <div class="container">
<!-- List of groups --> <!-- List of groups -->
<div class="group-list"> <div class="group-list">
<ul id="group-list"> <ul id="group-list"></ul>
</ul>
</div> </div>
<!-- Chat area --> <!-- Chat area -->
@ -33,21 +29,18 @@
<label for="file-input" class="attachment-icon"> <label for="file-input" class="attachment-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path <path
d="M13.514 2.444l-10.815 10.785c-.449.449-.678 1.074-.625 1.707l.393 4.696c.041.479.422.86.9.9l4.697.394c.633.053 1.258-.177 1.707-.626l11.875-11.844c.196-.196.195-.512 0-.707l-3.536-3.536c-.195-.195-.511-.196-.707 0l-8.878 8.848c-.162.162-.253.382-.253.611v.725c0 .184.148.332.332.332h.725c.229 0 .448-.092.61-.254l7.11-7.08 1.415 1.415-7.386 7.354c-.375.375-.885.586-1.414.586h-2.414c-.555 0-1-.448-1-1v-2.414c0-.53.211-1.039.586-1.414l9.506-9.477c.781-.781 2.049-.781 2.829-.001l4.243 4.243c.391.391.586.902.586 1.414 0 .512-.196 1.025-.587 1.416l-12.35 12.319c-.748.747-1.76 1.164-2.81 1.164-.257 0-6.243-.467-6.499-.487-.664-.052-1.212-.574-1.268-1.267-.019-.242-.486-6.246-.486-6.499 0-1.05.416-2.062 1.164-2.811l10.936-10.936 1.414 1.444z" /> d="M13.514 2.444l-10.815 10.785c-.449.449-.678 1.074-.625 1.707l.393 4.696c.041.479.422.86.9.9l4.697.394c.633.053 1.258-.177 1.707-.626l11.875-11.844c.196-.196.195-.512 0-.707l-3.536-3.536c-.195-.195-.511-.196-.707 0l-8.878 8.848c-.162.162-.253.382-.253.611v.725c0 .184.148.332.332.332h.725c.229 0 .448-.092.61-.254l7.11-7.08 1.415 1.415-7.386 7.354c-.375.375-.885.586-1.414.586h-2.414c-.555 0-1-.448-1-1v-2.414c0-.53.211-1.039.586-1.414l9.506-9.477c.781-.781 2.049-.781 2.829-.001l4.243 4.243c.391.391.586.902.586 1.414 0 .512-.196 1.025-.587 1.416l-12.35 12.319c-.748.747-1.76 1.164-2.81 1.164-.257 0-6.243-.467-6.499-.487-.664-.052-1.212-.574-1.268-1.267-.019-.242-.486-6.246-.486-6.499 0-1.05.416-2.062 1.164-2.811l10.936-10.936 1.414 1.444z"
/>
</svg> </svg>
</label> </label>
<input type="file" id="file-input" style="display: none;" /> <input type="file" id="file-input" style="display: none" />
<textarea id="message-input" rows="3" placeholder="Type your message..."></textarea> <textarea id="message-input" rows="3" placeholder="Type your message..."></textarea>
<button id="send-button">Send</button> <button id="send-button">Send</button>
</div> </div>
</div> </div>
</div> </div>
<script type="module" src="./signature.ts?ts"></script> <script type="module" src="./signature.ts?ts"></script>
</body>
</body>
</html> </html>

421
src/pages/signature/signature.ts
View File

File diff suppressed because it is too large Load Diff

23
src/router.ts
View File

@ -6,7 +6,7 @@ import { cleanSubscriptions } from './utils/subscription.utils';
import { LoginComponent } from './pages/home/home-component'; import { LoginComponent } from './pages/home/home-component';
import { prepareAndSendPairingTx } from './utils/sp-address.utils'; import { prepareAndSendPairingTx } from './utils/sp-address.utils';
import ModalService from './services/modal.service'; import ModalService from './services/modal.service';
export {Services}; export { Services };
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',
@ -20,7 +20,7 @@ export let currentRoute = '';
export async function navigate(path: string) { export async function navigate(path: string) {
cleanSubscriptions(); cleanSubscriptions();
cleanPage() cleanPage();
path = path.replace(/^\//, ''); path = path.replace(/^\//, '');
if (path.includes('/')) { if (path.includes('/')) {
const parsedPath = path.split('/')[0]; const parsedPath = path.split('/')[0];
@ -42,14 +42,13 @@ async function handleLocation(path: string) {
const content = document.getElementById('containerId'); const content = document.getElementById('containerId');
if (content) { if (content) {
if (path === 'home') {
if(path === 'home' ) { const login = LoginComponent;
const login = LoginComponent
const container = document.querySelector('#containerId'); const container = document.querySelector('#containerId');
const accountComponent = document.createElement('login-4nk-component'); const accountComponent = document.createElement('login-4nk-component');
accountComponent.setAttribute('style', 'width: 100vw; height: 100vh; position: relative; grid-row: 2;') accountComponent.setAttribute('style', 'width: 100vw; height: 100vh; position: relative; grid-row: 2;');
if(container) container.appendChild(accountComponent) if (container) container.appendChild(accountComponent);
} else if(path !== 'process') { } else if (path !== 'process') {
const html = await fetch(routeHtml).then((data) => data.text()); const html = await fetch(routeHtml).then((data) => data.text());
content.innerHTML = html; content.innerHTML = html;
} }
@ -70,8 +69,8 @@ async function handleLocation(path: string) {
if (!customElements.get('process-list-4nk-component')) { if (!customElements.get('process-list-4nk-component')) {
customElements.define('process-list-4nk-component', ProcessListComponent); customElements.define('process-list-4nk-component', ProcessListComponent);
} }
accountComponent.setAttribute('style', 'height: 100vh; position: relative; grid-row: 2; grid-column: 4;') accountComponent.setAttribute('style', 'height: 100vh; position: relative; grid-row: 2; grid-column: 4;');
if(container2) container2.appendChild(accountComponent) if (container2) container2.appendChild(accountComponent);
break; break;
case 'process-element': case 'process-element':
@ -157,7 +156,7 @@ export async function init(): Promise<void> {
setTimeout(async () => { setTimeout(async () => {
try { try {
// check if we have a shared secret with that address // check if we have a shared secret with that address
await prepareAndSendPairingTx(pairingAddress) await prepareAndSendPairingTx(pairingAddress);
} catch (e) { } catch (e) {
console.error('Failed to pair:', e); console.error('Failed to pair:', e);
} }
@ -174,7 +173,7 @@ export async function init(): Promise<void> {
async function cleanPage() { async function cleanPage() {
const container = document.querySelector('#containerId'); const container = document.querySelector('#containerId');
if(container) container.innerHTML = '' if (container) container.innerHTML = '';
} }
async function injectHeader() { async function injectHeader() {

22
src/service-workers/cache.worker.js
View File

@ -1,20 +1,8 @@
const addResourcesToCache = async (resources) => { const addResourcesToCache = async (resources) => {
const cache = await caches.open("v1"); const cache = await caches.open('v1');
await cache.addAll(resources); await cache.addAll(resources);
}; };
self.addEventListener("install", (event) => { self.addEventListener('install', (event) => {
event.waitUntil( event.waitUntil(addResourcesToCache(['/', '/index.html', '/style.css', '/app.js', '/image-list.js', '/star-wars-logo.jpg', '/gallery/bountyHunters.jpg', '/gallery/myLittleVader.jpg', '/gallery/snowTroopers.jpg']));
addResourcesToCache([ });
"/",
"/index.html",
"/style.css",
"/app.js",
"/image-list.js",
"/star-wars-logo.jpg",
"/gallery/bountyHunters.jpg",
"/gallery/myLittleVader.jpg",
"/gallery/snowTroopers.jpg",
]),
);
});

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

@ -9,21 +9,21 @@ self.addEventListener('activate', (event) => {
// 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;
if(data.type === 'START') { if (data.type === 'START') {
const fetchNotifications = async () => { const fetchNotifications = async () => {
const itemsWithFlag = await getAllItemsWithFlag(); const itemsWithFlag = await getAllItemsWithFlag();
// Process items with the specific flag // Process items with the specific flag
itemsWithFlag?.forEach(item => { itemsWithFlag?.forEach((item) => {
console.log(item); // Do something with each flagged item console.log(item); // Do something with each flagged item
}); });
event.ports[0].postMessage({ event.ports[0].postMessage({
type: "NOTIFICATIONS", type: 'NOTIFICATIONS',
data: itemsWithFlag data: itemsWithFlag,
}); });
} };
fetchNotifications() fetchNotifications();
setInterval(fetchNotifications, 2 * 60 * 1000); setInterval(fetchNotifications, 2 * 60 * 1000);
} }
@ -100,13 +100,13 @@ async function getAllItemsWithFlag() {
const request = store.getAll(); const request = store.getAll();
request.onsuccess = (event) => { request.onsuccess = (event) => {
const allItems = event.target.result; const allItems = event.target.result;
const itemsWithFlag = allItems.filter(item => !item.need_validation); const itemsWithFlag = allItems.filter((item) => item.need_validation);
const processMap = {}; const processMap = {};
for (const diff of itemsWithFlag) { for (const diff of itemsWithFlag) {
const currentProcess = allProcesses.find(item => { const currentProcess = allProcesses.find((item) => {
return item.states.some(state => state.merkle_root === diff.new_state_merkle_root); return item.states.some((state) => state.merkle_root === diff.new_state_merkle_root);
}); });
if (currentProcess) { if (currentProcess) {
@ -116,18 +116,25 @@ async function getAllItemsWithFlag() {
processMap[processKey] = { processMap[processKey] = {
process: currentProcess.states, process: currentProcess.states,
processId: currentProcess.key, processId: currentProcess.key,
diffs: [] diffs: [],
}; };
} }
processMap[processKey].diffs.push(diff); processMap[processKey].diffs.push(diff);
} }
} }
const results = Object.values(processMap).map(entry => { const results = Object.values(processMap).map((entry) => {
const diffs = []
for(const state of entry.process) {
const filteredDiff = entry.diffs.filter(diff => diff.new_state_merkle_root === state.merkle_root);
if(filteredDiff && filteredDiff.length) {
diffs.push(filteredDiff)
}
}
return { return {
process: entry.process, process: entry.process,
processId: entry.processId, processId: entry.processId,
diffs: entry.diffs diffs: diffs,
}; };
}); });
@ -139,4 +146,3 @@ async function getAllItemsWithFlag() {
}; };
}); });
} }

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

@ -1,4 +1,4 @@
import Services from "./service"; import Services from './service';
class Database { class Database {
private static instance: Database; private static instance: Database;
@ -31,9 +31,9 @@ class Database {
}, },
AnkDiff: { AnkDiff: {
name: 'diffs', name: 'diffs',
options: { key: 'new_state_merkle_root'}, options: { key: 'new_state_merkle_root' },
indices: [] indices: [],
} },
}; };
// Private constructor to prevent direct instantiation from outside // Private constructor to prevent direct instantiation from outside
@ -144,11 +144,11 @@ class Database {
} }
private handleAddObjectResponse = async (event: MessageEvent) => { private handleAddObjectResponse = async (event: MessageEvent) => {
const data = event.data const data = event.data;
console.log('Received response from service worker (ADD_OBJECT):', data); console.log('Received response from service worker (ADD_OBJECT):', data);
if(data.type === 'NOTIFICATIONS') { if (data.type === 'NOTIFICATIONS') {
const service = await Services.getInstance() const service = await Services.getInstance();
service.setNotifications(data.data) service.setNotifications(data.data);
} }
}; };
@ -201,7 +201,7 @@ class Database {
getRequest.onsuccess = () => resolve(getRequest.result); getRequest.onsuccess = () => resolve(getRequest.result);
getRequest.onerror = () => reject(getRequest.error); getRequest.onerror = () => reject(getRequest.error);
}); });
return result return result;
} }
public async dumpStore(storeName: string): Promise<Record<string, any>> { public async dumpStore(storeName: string): Promise<Record<string, any>> {
@ -227,9 +227,8 @@ class Database {
// Combine keys and values into an object // Combine keys and values into an object
const result: Record<string, any> = Object.fromEntries(keys.map((key, index) => [key, values[index]])); const result: Record<string, any> = Object.fromEntries(keys.map((key, index) => [key, values[index]]));
return result; return result;
} catch (error) { } catch (error) {
console.error("Error fetching data from IndexedDB:", error); console.error('Error fetching data from IndexedDB:', error);
throw error; throw error;
} }
} }

28
src/services/modal.service.ts
View File

@ -2,9 +2,11 @@ import modalHtml from '../components/login-modal/login-modal.html?raw';
import modalScript from '../components/login-modal/login-modal.js?raw'; import modalScript from '../components/login-modal/login-modal.js?raw';
import validationModalStyle from '../components/validation-modal/validation-modal.css?raw'; import validationModalStyle from '../components/validation-modal/validation-modal.css?raw';
import Services from './service'; import Services from './service';
import { navigate } from '../router'; import { init, navigate } from '../router';
import { addressToEmoji } from '../utils/sp-address.utils'; import { addressToEmoji } from '../utils/sp-address.utils';
import { RoleDefinition } from 'pkg/sdk_client'; import { RoleDefinition } from 'pkg/sdk_client';
import { initValidationModal } from '~/components/validation-modal/validation-modal';
import { interpolate } from '~/utils/html.utils';
export default class ModalService { export default class ModalService {
private static instance: ModalService; private static instance: ModalService;
@ -56,28 +58,30 @@ export default class ModalService {
const container = document.querySelector('#containerId'); const container = document.querySelector('#containerId');
if (container) { if (container) {
let html = await fetch('/src/components/validation-modal/validation-modal.html').then((res) => res.text()); let html = await fetch('/src/components/validation-modal/validation-modal.html').then((res) => res.text());
html = interpolate(html, {processId: processDiff.processId})
container.innerHTML += html; container.innerHTML += html;
// Dynamically load the header JS // Dynamically load the header JS
const script = document.createElement('script'); const script = document.createElement('script');
script.id = 'validation-modal-script' script.id = 'validation-modal-script';
script.src = '/src/components/validation-modal/validation-modal.ts'; script.src = '/src/components/validation-modal/validation-modal.ts';
script.type = 'module'; script.type = 'module';
document.head.appendChild(script); document.head.appendChild(script);
const css = document.createElement('style'); const css = document.createElement('style');
css.id = 'validation-modal-css' css.id = 'validation-modal-css';
css.innerText = validationModalStyle; css.innerText = validationModalStyle;
document.head.appendChild(css); document.head.appendChild(css);
initValidationModal(processDiff)
} }
} }
async closeValidationModal() { async closeValidationModal() {
const script = document.querySelector('#validation-modal-script') const script = document.querySelector('#validation-modal-script');
const css = document.querySelector('#validation-modal-css') const css = document.querySelector('#validation-modal-css');
const component = document.querySelector('#validation-modal') const component = document.querySelector('#validation-modal');
script?.remove() script?.remove();
css?.remove() css?.remove();
component?.remove() component?.remove();
} }
// this is kind of too specific for pairing though // this is kind of too specific for pairing though
@ -88,7 +92,7 @@ export default class ModalService {
const owner = roleDefinition['owner']; const owner = roleDefinition['owner'];
members = owner.members; members = owner.members;
} else { } else {
throw new Error('No \"owner\" role'); throw new Error('No "owner" role');
} }
// pairing specifics // pairing specifics
@ -145,7 +149,7 @@ export default class ModalService {
const createPrdUpdateReturn = service.createPrdUpdate(this.currentPcdCommitment); const createPrdUpdateReturn = service.createPrdUpdate(this.currentPcdCommitment);
await service.handleApiReturn(createPrdUpdateReturn); await service.handleApiReturn(createPrdUpdateReturn);
} catch (e) { } catch (e) {
throw e throw e;
} }
} else { } else {
throw new Error('No currentPcdCommitment'); throw new Error('No currentPcdCommitment');
@ -156,7 +160,7 @@ export default class ModalService {
const approveChangeReturn = service.approveChange(this.currentPcdCommitment!); const approveChangeReturn = service.approveChange(this.currentPcdCommitment!);
await service.handleApiReturn(approveChangeReturn); await service.handleApiReturn(approveChangeReturn);
} catch (e) { } catch (e) {
throw e throw e;
} }
try { try {

24
src/services/service.ts
View File

@ -11,6 +11,8 @@ import { storeData, retrieveData } from './storage.service';
export const U32_MAX = 4294967295; export const U32_MAX = 4294967295;
const storageUrl = `http://localhost:8080`; const storageUrl = `http://localhost:8080`;
const RELAY_ADDRESS = 'sprt1qqdg4x69xdyhxpz4weuel0985qyswa0x9ycl4q6xc0fngf78jtj27gqj5vff4fvlt3fydx4g7vv0mh7vqv8jncgusp6n2zv860nufdzkyy59pqrdr';
const wsurl = `https://demo.4nkweb.com/ws/`;
export default class Services { export default class Services {
private static initializing: Promise<Services> | null = null; private static initializing: Promise<Services> | null = null;
@ -95,7 +97,7 @@ export default class Services {
throw new Error('Trying to connect to empty members list'); throw new Error('Trying to connect to empty members list');
} }
const members_str = members.map(member => JSON.stringify(member)); const members_str = members.map((member) => JSON.stringify(member));
const waitForAmount = async (): Promise<BigInt> => { const waitForAmount = async (): Promise<BigInt> => {
let attempts = 3; let attempts = 3;
@ -186,7 +188,7 @@ export default class Services {
try { try {
return this.sdkClient.create_response_prd(this.currentProcess, pcdMerkleRoot); return this.sdkClient.create_response_prd(this.currentProcess, pcdMerkleRoot);
} catch (e) { } catch (e) {
throw e throw e;
} }
} }
@ -344,7 +346,7 @@ export default class Services {
try { try {
await this.openConfirmationModal(); await this.openConfirmationModal();
} catch (e) { } catch (e) {
throw new Error(`Error while evaluating pending updates for process ${this.currentProcess}: ${e}`) throw new Error(`Error while evaluating pending updates for process ${this.currentProcess}: ${e}`);
} }
} }
@ -479,7 +481,7 @@ export default class Services {
key: commitedIn, key: commitedIn,
}); });
} catch (e) { } catch (e) {
throw new Error(`Failed to save process: ${e}`) throw new Error(`Failed to save process: ${e}`);
} }
// We check how many copies in storage nodes // We check how many copies in storage nodes
@ -502,7 +504,7 @@ export default class Services {
public async saveDiffs(diffs: UserDiff[]) { public async saveDiffs(diffs: UserDiff[]) {
const db = await Database.getInstance(); const db = await Database.getInstance();
try { try {
for(const diff of diffs) { for (const diff of diffs) {
await db.addObject({ await db.addObject({
storeName: 'diffs', storeName: 'diffs',
object: diff, object: diff,
@ -510,7 +512,7 @@ export default class Services {
}); });
} }
} catch (e) { } catch (e) {
throw new Error(`Failed to save process: ${e}`) throw new Error(`Failed to save process: ${e}`);
} }
} }
@ -540,7 +542,6 @@ export default class Services {
} catch (e) { } catch (e) {
throw e; throw e;
} }
} }
public async restoreSecrets() { public async restoreSecrets() {
@ -549,14 +550,13 @@ export default class Services {
const sharedSecrets: Record<string, string> = await db.dumpStore('shared_secrets'); const sharedSecrets: Record<string, string> = await db.dumpStore('shared_secrets');
const unconfirmedSecrets = await db.dumpStore('unconfirmed_secrets'); const unconfirmedSecrets = await db.dumpStore('unconfirmed_secrets');
const secretsStore = { const secretsStore = {
'shared_secrets': sharedSecrets, shared_secrets: sharedSecrets,
'unconfirmed_secrets': Object.values(unconfirmedSecrets), unconfirmed_secrets: Object.values(unconfirmedSecrets),
}; };
this.sdkClient.set_shared_secrets(JSON.stringify(secretsStore)); this.sdkClient.set_shared_secrets(JSON.stringify(secretsStore));
} catch (e) { } catch (e) {
throw e; throw e;
} }
} }
getNotifications(): any[] | null { getNotifications(): any[] | null {
@ -583,11 +583,11 @@ export default class Services {
// path: '/notif3', // path: '/notif3',
// }, // },
// ]; // ];
return this.notifications return this.notifications;
} }
setNotifications(notifications: any[]) { setNotifications(notifications: any[]) {
this.notifications = notifications this.notifications = notifications;
} }
async importJSON(content: any): Promise<void> { async importJSON(content: any): Promise<void> {

6
src/utils/document.utils.ts
View File

@ -1,4 +1,4 @@
export function getCorrectDOM(componentTag: string): Node { export function getCorrectDOM(componentTag: string): Node {
const dom = document?.querySelector(componentTag)?.shadowRoot || document as Node const dom = document?.querySelector(componentTag)?.shadowRoot || (document as Node);
return dom return dom;
} }

4
src/utils/html.utils.ts
View File

@ -3,6 +3,6 @@ export function interpolate(template: string, data: { [key: string]: string }) {
} }
export function getCorrectDOM(componentTag: string): Node { export function getCorrectDOM(componentTag: string): Node {
const dom = document?.querySelector(componentTag)?.shadowRoot || document as Node const dom = document?.querySelector(componentTag)?.shadowRoot || (document as Node);
return dom return dom;
} }

4
src/utils/messageMock.ts
View File

@ -37,13 +37,13 @@ class MessageStore {
} }
addMessage(memberId: string | number, message: any) { addMessage(memberId: string | number, message: any) {
const memberMessages = this.messages.find(m => String(m.memberId) === String(memberId)); const memberMessages = this.messages.find((m) => String(m.memberId) === String(memberId));
if (memberMessages) { if (memberMessages) {
memberMessages.messages.push(message); memberMessages.messages.push(message);
} else { } else {
this.messages.push({ this.messages.push({
memberId: String(memberId), memberId: String(memberId),
messages: [message] messages: [message],
}); });
} }
this.saveToLocalStorage(); this.saveToLocalStorage();

6
src/utils/sp-address.utils.ts
View File

@ -100,7 +100,7 @@ export async function displayEmojis(text: string) {
// Verify Other address // Verify Other address
export function initAddressInput() { export function initAddressInput() {
const container = getCorrectDOM('login-4nk-component') as HTMLElement const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const addressInput = container.querySelector('#addressInput') as HTMLInputElement; const addressInput = container.querySelector('#addressInput') as HTMLInputElement;
const emojiDisplay = container.querySelector('#emoji-display-2'); const emojiDisplay = container.querySelector('#emoji-display-2');
const okButton = container.querySelector('#okButton') as HTMLButtonElement; const okButton = container.querySelector('#okButton') as HTMLButtonElement;
@ -148,7 +148,7 @@ export function initAddressInput() {
} }
async function onOkButtonClick() { async function onOkButtonClick() {
const container = getCorrectDOM('login-4nk-component') as HTMLElement const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const secondDeviceAddress = (container.querySelector('#addressInput') as HTMLInputElement).value; const secondDeviceAddress = (container.querySelector('#addressInput') as HTMLInputElement).value;
try { try {
// Connect to target, if necessary // Connect to target, if necessary
@ -184,7 +184,7 @@ export async function prepareAndSendPairingTx(secondDeviceAddress: string) {
export async function generateQRCode(spAddress: string) { export async function generateQRCode(spAddress: string) {
try { try {
const container = getCorrectDOM('login-4nk-component') as HTMLElement const container = getCorrectDOM('login-4nk-component') as HTMLElement;
const currentUrl = 'https://' + window.location.host; const currentUrl = 'https://' + window.location.host;
const url = await QRCode.toDataURL(currentUrl + '?sp_address=' + spAddress); const url = await QRCode.toDataURL(currentUrl + '?sp_address=' + spAddress);
const qrCode = container?.querySelector('.qr-code img'); const qrCode = container?.querySelector('.qr-code img');