link diffs to validation modal and show and prettify
This commit is contained in:
AnisHADJARAB
Sosthene
parent
d64efbd6a0
commit
2124388cc5
309
src/4nk.css
309
src/4nk.css
@ -1,12 +1,9 @@
|
||||
:host {
|
||||
--primary-color
|
||||
: #3A506B;
|
||||
--primary-color: #3a506b;
|
||||
/* Bleu métallique */
|
||||
--secondary-color
|
||||
: #B0BEC5;
|
||||
--secondary-color: #b0bec5;
|
||||
/* Gris acier */
|
||||
--accent-color
|
||||
: #D68C45;
|
||||
--accent-color: #d68c45;
|
||||
/* Cuivre */
|
||||
font-family: Arial, sans-serif;
|
||||
height: 100vh;
|
||||
@ -18,24 +15,24 @@ body {
|
||||
padding: 0;
|
||||
background-color: #f4f4f4;
|
||||
background-image: url(../assets/bgd.webp);
|
||||
background-repeat:no-repeat;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-blend-mode :soft-light;
|
||||
background-blend-mode: soft-light;
|
||||
height: 100vh;
|
||||
}
|
||||
.message {
|
||||
}
|
||||
.message {
|
||||
margin: 30px 0;
|
||||
font-size: 14px;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
}
|
||||
|
||||
.message strong{
|
||||
font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
|
||||
.message strong {
|
||||
font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/** Modal Css */
|
||||
.modal {
|
||||
/** Modal Css */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -46,9 +43,9 @@ body {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
.modal-content {
|
||||
width: 55%;
|
||||
height: 30%;
|
||||
background-color: white;
|
||||
@ -58,17 +55,17 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
.modal-title {
|
||||
margin: 0;
|
||||
padding-bottom: 8px;
|
||||
width: 100%;
|
||||
font-size: 0.9rem;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.confirmation-box {
|
||||
.confirmation-box {
|
||||
/* margin-top: 20px; */
|
||||
align-content: center;
|
||||
width: 70%;
|
||||
@ -78,22 +75,24 @@ body {
|
||||
color: #333333;
|
||||
top: 5%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-wrapper {
|
||||
.nav-wrapper {
|
||||
position: fixed;
|
||||
background: radial-gradient(circle, white, var(--primary-color));
|
||||
/* background-color: #CFD8DC; */
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
color: #37474F;
|
||||
color: #37474f;
|
||||
height: 9vh;
|
||||
width: 100vw;
|
||||
left: 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 {
|
||||
display: flex;
|
||||
@ -101,7 +100,8 @@ body {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.notification-bell, .burger-menu {
|
||||
.notification-bell,
|
||||
.burger-menu {
|
||||
z-index: 3;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
@ -109,8 +109,8 @@ body {
|
||||
}
|
||||
.notification-badge {
|
||||
position: absolute;
|
||||
top: -.7rem;
|
||||
left: -.8rem;
|
||||
top: -0.7rem;
|
||||
left: -0.8rem;
|
||||
background-color: red;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
@ -135,19 +135,19 @@ body {
|
||||
display: none;
|
||||
|
||||
.notification-element {
|
||||
padding: .8rem 0;
|
||||
padding: 0.8rem 0;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
background-color: rgba(26, 28, 24, .08);
|
||||
background-color: rgba(26, 28, 24, 0.08);
|
||||
}
|
||||
}
|
||||
.notification-element:not(:last-child) {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
.brand-logo {
|
||||
height: 100%;
|
||||
width: 100vw;
|
||||
align-content: center;
|
||||
@ -159,35 +159,35 @@ body {
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
.container {
|
||||
text-align: center;
|
||||
display: grid;
|
||||
height: 100vh;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 10px;
|
||||
grid-auto-rows: 10vh 15vh 1fr;
|
||||
}
|
||||
.title-container {
|
||||
}
|
||||
.title-container {
|
||||
grid-column: 2 / 7;
|
||||
grid-row: 2;
|
||||
}
|
||||
.page-container {
|
||||
}
|
||||
.page-container {
|
||||
grid-column: 2 / 7;
|
||||
grid-row: 3 ;
|
||||
grid-row: 3;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
max-height: 60vh;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 20px 0;
|
||||
}
|
||||
@media only screen and (min-width: 600px) {
|
||||
}
|
||||
@media only screen and (min-width: 600px) {
|
||||
.tab-container {
|
||||
display: none;
|
||||
}
|
||||
@ -197,7 +197,7 @@ body {
|
||||
}
|
||||
.process-container {
|
||||
grid-column: 3 / 6;
|
||||
grid-row: 3 ;
|
||||
grid-row: 3;
|
||||
|
||||
.card {
|
||||
min-width: 40vw;
|
||||
@ -205,7 +205,7 @@ body {
|
||||
}
|
||||
.separator {
|
||||
width: 2px;
|
||||
background-color: #78909C;
|
||||
background-color: #78909c;
|
||||
height: 80%;
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
@ -216,12 +216,12 @@ body {
|
||||
align-items: center;
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
@media only screen and (max-width: 600px) {
|
||||
.process-container {
|
||||
grid-column: 2 / 7;
|
||||
grid-row: 3 ;
|
||||
grid-row: 3;
|
||||
}
|
||||
.container {
|
||||
grid-auto-rows: 10vh 15vh 15vh 1fr;
|
||||
@ -232,7 +232,7 @@ body {
|
||||
}
|
||||
.page-container {
|
||||
grid-column: 2 / 7;
|
||||
grid-row: 4 ;
|
||||
grid-row: 4;
|
||||
}
|
||||
.separator {
|
||||
display: none;
|
||||
@ -244,7 +244,7 @@ body {
|
||||
z-index: 1;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #E0E4D6;
|
||||
border-bottom-color: #e0e4d6;
|
||||
}
|
||||
|
||||
.tab {
|
||||
@ -255,7 +255,7 @@ body {
|
||||
font-size: 1rem;
|
||||
color: #6200ea;
|
||||
&:hover {
|
||||
background-color: rgba(26, 28, 24, .08);
|
||||
background-color: rgba(26, 28, 24, 0.08);
|
||||
}
|
||||
}
|
||||
.tab.active {
|
||||
@ -278,66 +278,64 @@ body {
|
||||
width: 80%;
|
||||
height: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qr-code {
|
||||
.qr-code {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-display {
|
||||
font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
|
||||
.emoji-display {
|
||||
font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#emoji-display-2{
|
||||
#emoji-display-2 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
#okButton{
|
||||
#okButton {
|
||||
margin-bottom: 2em;
|
||||
cursor: pointer;
|
||||
background-color: #D0D0D7;
|
||||
background-color: #d0d0d7;
|
||||
color: white;
|
||||
border-style: none;
|
||||
border-radius: 5px;
|
||||
color: #000;
|
||||
padding: 2px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.pairing-request {
|
||||
font-family: "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
|
||||
.pairing-request {
|
||||
font-family: 'Segoe UI Emoji', 'Noto Color Emoji', 'Apple Color Emoji', sans-serif;
|
||||
font-size: 14px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.sp-address-btn {
|
||||
.sp-address-btn {
|
||||
margin-bottom: 2em;
|
||||
cursor: pointer;
|
||||
background-color: #D0D0D7;
|
||||
background-color: #d0d0d7;
|
||||
color: white;
|
||||
border-style: none;
|
||||
border-radius: 5px;
|
||||
color: #000;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.camera-card {
|
||||
.camera-card {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
/* height: 200px; */
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background-color: var(--primary-color);
|
||||
@ -346,14 +344,13 @@ body {
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
.btn:hover {
|
||||
background-color: #3700b3;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.card {
|
||||
.card {
|
||||
min-width: 300px;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
@ -370,17 +367,16 @@ body {
|
||||
justify-content: flex-start;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.card-content {
|
||||
.card-content {
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
text-align: left;
|
||||
font-size: .8em;
|
||||
font-size: 0.8em;
|
||||
position: relative;
|
||||
left: 2vw;
|
||||
width: 90%;
|
||||
@ -389,17 +385,17 @@ body {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.process-element {
|
||||
padding: .4rem 0;
|
||||
padding: 0.4rem 0;
|
||||
&:hover {
|
||||
background-color: rgba(26, 28, 24, .08);
|
||||
background-color: rgba(26, 28, 24, 0.08);
|
||||
}
|
||||
&.selected {
|
||||
background-color: rgba(26, 28, 24, .08);
|
||||
}
|
||||
background-color: rgba(26, 28, 24, 0.08);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-description {
|
||||
.card-description {
|
||||
padding: 20px;
|
||||
font-size: 1rem;
|
||||
color: #333;
|
||||
@ -409,14 +405,13 @@ body {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.card-action {
|
||||
.card-action {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-content {
|
||||
.menu-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 3.4rem;
|
||||
@ -425,48 +420,46 @@ body {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-content a {
|
||||
.menu-content a {
|
||||
display: block;
|
||||
padding: 10px 20px;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-code-scanner {
|
||||
.qr-code-scanner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* QR READER */
|
||||
#qr-reader div {
|
||||
/* QR READER */
|
||||
#qr-reader div {
|
||||
position: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
#qr-reader div img{
|
||||
top: 15px ;
|
||||
#qr-reader div img {
|
||||
top: 15px;
|
||||
right: 25px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* INPUT CSS **/
|
||||
.input-container {
|
||||
/* INPUT CSS **/
|
||||
.input-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: #ECEFF1;
|
||||
}
|
||||
background-color: #eceff1;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
.input-field {
|
||||
width: 36vw;
|
||||
padding: 10px 0;
|
||||
font-size: 1rem;
|
||||
@ -475,13 +468,13 @@ body {
|
||||
outline: none;
|
||||
background: transparent;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.input-field:focus {
|
||||
.input-field:focus {
|
||||
border-bottom: 2px solid #6200ea;
|
||||
}
|
||||
}
|
||||
|
||||
.input-label {
|
||||
.input-label {
|
||||
position: absolute;
|
||||
margin-top: -0.5em;
|
||||
top: 0;
|
||||
@ -490,32 +483,37 @@ body {
|
||||
font-size: 1rem;
|
||||
color: #999;
|
||||
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:not(:placeholder-shown) + .input-label {
|
||||
.input-field:focus + .input-label,
|
||||
.input-field:not(:placeholder-shown) + .input-label {
|
||||
transform: translateY(-20px);
|
||||
font-size: 0.8em;
|
||||
color: #6200ea;
|
||||
}
|
||||
}
|
||||
|
||||
.input-underline {
|
||||
.input-underline {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
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%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
.dropdown-content {
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
top: 100%;
|
||||
@ -529,22 +527,19 @@ body {
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
display: none;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-content span {
|
||||
.dropdown-content span {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-content span:hover {
|
||||
.dropdown-content span:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/** AUTOCOMPLETE **/
|
||||
/** AUTOCOMPLETE **/
|
||||
|
||||
select[data-multi-select-plugin] {
|
||||
display: none !important;
|
||||
@ -562,8 +557,12 @@ select[data-multi-select-plugin] {
|
||||
flex-direction: row;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
-o-transition: 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;
|
||||
-o-transition:
|
||||
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 {
|
||||
@ -571,7 +570,7 @@ select[data-multi-select-plugin] {
|
||||
}
|
||||
|
||||
.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 {
|
||||
@ -650,7 +649,7 @@ select[data-multi-select-plugin] {
|
||||
}
|
||||
|
||||
.dropdown-icon.active {
|
||||
transform: rotateX(180deg)
|
||||
transform: rotateX(180deg);
|
||||
}
|
||||
|
||||
.search-container .dropdown-icon {
|
||||
@ -666,7 +665,7 @@ select[data-multi-select-plugin] {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
/* 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-size: 10px;
|
||||
background-repeat: no-repeat;
|
||||
@ -684,8 +683,8 @@ select[data-multi-select-plugin] {
|
||||
border: 1px solid #ccc;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
|
||||
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, 0.175);
|
||||
}
|
||||
|
||||
.search-container ul :focus {
|
||||
@ -710,7 +709,6 @@ select[data-multi-select-plugin] {
|
||||
border-radius: 4px 0px 0 0;
|
||||
}
|
||||
|
||||
|
||||
.search-container ul li:hover.not-cursor {
|
||||
cursor: default;
|
||||
}
|
||||
@ -718,7 +716,6 @@ select[data-multi-select-plugin] {
|
||||
.search-container ul li:hover {
|
||||
color: #333;
|
||||
background-color: #f0f0f0;
|
||||
;
|
||||
border-color: #adadad;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -729,8 +726,6 @@ select[data-multi-select-plugin] {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**************************************** Process page card ******************************************************/
|
||||
.process-card {
|
||||
min-width: 300px;
|
||||
@ -748,12 +743,11 @@ select[data-multi-select-plugin] {
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
overflow-y: auto;
|
||||
|
||||
}
|
||||
|
||||
.process-card-content {
|
||||
text-align: left;
|
||||
font-size: .8em;
|
||||
font-size: 0.8em;
|
||||
position: relative;
|
||||
left: 2vw;
|
||||
width: 90%;
|
||||
@ -762,16 +756,16 @@ select[data-multi-select-plugin] {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.process-element {
|
||||
padding: .4rem 0;
|
||||
padding: 0.4rem 0;
|
||||
&:hover {
|
||||
background-color: rgba(26, 28, 24, .08);
|
||||
background-color: rgba(26, 28, 24, 0.08);
|
||||
}
|
||||
&.selected {
|
||||
background-color: rgba(26, 28, 24, .08);
|
||||
background-color: rgba(26, 28, 24, 0.08);
|
||||
}
|
||||
}
|
||||
.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%;
|
||||
}
|
||||
|
||||
|
||||
.process-card-action {
|
||||
width: 100%;
|
||||
}
|
||||
@ -42,8 +42,7 @@ export async function initHeader() {
|
||||
// Charger le profile-header
|
||||
const profileContainer = document.getElementById('profile-header-container');
|
||||
if (profileContainer) {
|
||||
const profileHeaderHtml = await fetch('/src/components/profile-header/profile-header.html')
|
||||
.then(res => res.text());
|
||||
const profileHeaderHtml = await fetch('/src/components/profile-header/profile-header.html').then((res) => res.text());
|
||||
profileContainer.innerHTML = profileHeaderHtml;
|
||||
|
||||
// Initialiser les données du profil
|
||||
@ -77,7 +76,7 @@ async function setNotification(notifications: any[]): Promise<void> {
|
||||
if (notifications?.length) {
|
||||
badge.innerText = notifications.length.toString();
|
||||
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';
|
||||
for (const notif of notifications) {
|
||||
const notifElement = document.createElement('div');
|
||||
@ -90,9 +89,9 @@ async function setNotification(notifications: any[]): Promise<void> {
|
||||
// this.addSubscription(notifElement, 'click', 'goToProcessPage')
|
||||
notificationBoard.appendChild(notifElement);
|
||||
notifElement.addEventListener('click', async () => {
|
||||
const modalService = await ModalService.getInstance()
|
||||
modalService.injectValidationModal(notif)
|
||||
})
|
||||
const modalService = await ModalService.getInstance();
|
||||
modalService.injectValidationModal(notif);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
noNotifications.style.display = 'block';
|
||||
@ -125,11 +124,11 @@ async function loadUserProfile() {
|
||||
}
|
||||
|
||||
async function importJSON() {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = '.json';
|
||||
const input = document.createElement('input');
|
||||
input.type = 'file';
|
||||
input.accept = '.json';
|
||||
|
||||
input.onchange = async (e) => {
|
||||
input.onchange = async (e) => {
|
||||
const file = (e.target as HTMLInputElement).files?.[0];
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
@ -140,14 +139,14 @@ input.onchange = async (e) => {
|
||||
await service.importJSON(content);
|
||||
alert('Import réussi');
|
||||
} catch (error) {
|
||||
alert('Erreur lors de l\'import: ' + error);
|
||||
alert("Erreur lors de l'import: " + error);
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
input.click();
|
||||
input.click();
|
||||
}
|
||||
|
||||
(window as any).importJSON = importJSON;
|
||||
@ -1,8 +1,8 @@
|
||||
<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="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 class="user-info">
|
||||
<span class="user-name">John</span>
|
||||
|
||||
@ -2,10 +2,10 @@ import QrScanner from 'qr-scanner';
|
||||
import Services from '../../services/service';
|
||||
import { prepareAndSendPairingTx } from '~/utils/sp-address.utils';
|
||||
|
||||
export default class QrScannerComponent extends HTMLElement {
|
||||
export default class QrScannerComponent extends HTMLElement {
|
||||
videoElement: any;
|
||||
wrapper: any
|
||||
qrScanner: any
|
||||
wrapper: any;
|
||||
qrScanner: any;
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
@ -29,8 +29,8 @@ import { prepareAndSendPairingTx } from '~/utils/sp-address.utils';
|
||||
console.error('Video element not found!');
|
||||
return;
|
||||
}
|
||||
console.log("🚀 ~ QrScannerComponent ~ initializeScanner ~ this.videoElement:", this.videoElement)
|
||||
this.qrScanner = new QrScanner(this.videoElement, result => this.onQrCodeScanned(result),{
|
||||
console.log('🚀 ~ QrScannerComponent ~ initializeScanner ~ this.videoElement:', this.videoElement);
|
||||
this.qrScanner = new QrScanner(this.videoElement, (result) => this.onQrCodeScanned(result), {
|
||||
highlightScanRegion: true,
|
||||
highlightCodeOutline: true,
|
||||
});
|
||||
@ -38,9 +38,8 @@ import { prepareAndSendPairingTx } from '~/utils/sp-address.utils';
|
||||
try {
|
||||
await QrScanner.hasCamera();
|
||||
this.qrScanner.start();
|
||||
this.videoElement.style = 'height: 200px; width: 200px'
|
||||
this.shadowRoot?.appendChild(this.wrapper)
|
||||
|
||||
this.videoElement.style = 'height: 200px; width: 200px';
|
||||
this.shadowRoot?.appendChild(this.wrapper);
|
||||
} catch (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
|
||||
const spAddress = scannedUrl.searchParams.get('sp_address');
|
||||
if(spAddress) {
|
||||
if (spAddress) {
|
||||
// Call the sendPairingTx function with the extracted sp_address
|
||||
try {
|
||||
await prepareAndSendPairingTx(spAddress)
|
||||
await prepareAndSendPairingTx(spAddress);
|
||||
} catch (e) {
|
||||
console.error('Failed to pair:', e);
|
||||
}
|
||||
@ -69,6 +68,6 @@ import { prepareAndSendPairingTx } from '~/utils/sp-address.utils';
|
||||
this.qrScanner.destroy();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('qr-scanner', QrScannerComponent);
|
||||
customElements.define('qr-scanner', QrScannerComponent);
|
||||
|
||||
@ -7,8 +7,8 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
background-color: rgb(0, 0, 0);
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
padding-top: 60px;
|
||||
}
|
||||
.modal-content {
|
||||
|
||||
@ -1,55 +1,7 @@
|
||||
|
||||
<div id="validation-modal" class="validation-modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-title">Validate</div>
|
||||
<div class="modal-title">Validate Process {{processId}}</div>
|
||||
<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 class="modal-action">
|
||||
|
||||
@ -1,17 +1,56 @@
|
||||
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';
|
||||
});
|
||||
});
|
||||
import ModalService from '~/services/modal.service';
|
||||
|
||||
async function validate() {
|
||||
console.log('==> VALIDATE')
|
||||
const modalservice = await ModalService.getInstance()
|
||||
modalservice.closeValidationModal()
|
||||
console.log('==> VALIDATE');
|
||||
const modalservice = await ModalService.getInstance();
|
||||
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;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { DocumentSignature } from "~/models/signature.models";
|
||||
import { DocumentSignature } from '~/models/signature.models';
|
||||
|
||||
export interface Group {
|
||||
id: number;
|
||||
|
||||
10
src/main.ts
10
src/main.ts
@ -5,15 +5,7 @@ import { ChatElement } from './pages/chat/chat';
|
||||
import { AccountComponent } from './pages/account/account-component';
|
||||
import { AccountElement } from './pages/account/account';
|
||||
|
||||
export {
|
||||
SignatureComponent,
|
||||
SignatureElement,
|
||||
ChatComponent,
|
||||
ChatElement,
|
||||
AccountComponent,
|
||||
AccountElement
|
||||
};
|
||||
|
||||
export { SignatureComponent, SignatureElement, ChatComponent, ChatElement, AccountComponent, AccountElement };
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
|
||||
@ -4,325 +4,269 @@ export const STORAGE_KEYS = {
|
||||
pairing: 'pairingRows',
|
||||
wallet: 'walletRows',
|
||||
process: 'processRows',
|
||||
data: 'dataRows'
|
||||
data: 'dataRows',
|
||||
};
|
||||
|
||||
// Initialiser le stockage des lignes par défaut dans le localStorage
|
||||
export const defaultRows = [
|
||||
{
|
||||
column1: "sprt1qqwtvg5q5vcz0reqvmld98u7va3av6gakwe9yxw9yhnpj5djcunn4squ68tuzn8dz78dg4adfv0dekx8hg9sy0t6s9k5em7rffgxmrsfpyy7gtyrz",
|
||||
column2: "🎊😑🎄😩",
|
||||
column3: "Laptop"
|
||||
column1: 'sprt1qqwtvg5q5vcz0reqvmld98u7va3av6gakwe9yxw9yhnpj5djcunn4squ68tuzn8dz78dg4adfv0dekx8hg9sy0t6s9k5em7rffgxmrsfpyy7gtyrz',
|
||||
column2: '🎊😑🎄😩',
|
||||
column3: 'Laptop',
|
||||
},
|
||||
{
|
||||
column1: "sprt1qqwtvg5q5vcz0reqvmld98u7va3av6gakwe9yxw9yhnpj5djcunn4squ68tuzn8dz78dg4adfv0dekx8hg9sy0t6s9k5em7rffgxmrsfpyy7gtyrx",
|
||||
column2: "🎏🎕😧🌥",
|
||||
column3: "Phone" }
|
||||
column1: 'sprt1qqwtvg5q5vcz0reqvmld98u7va3av6gakwe9yxw9yhnpj5djcunn4squ68tuzn8dz78dg4adfv0dekx8hg9sy0t6s9k5em7rffgxmrsfpyy7gtyrx',
|
||||
column2: '🎏🎕😧🌥',
|
||||
column3: 'Phone',
|
||||
},
|
||||
];
|
||||
|
||||
export const mockNotifications: { [key: string]: Notification[] } = {};
|
||||
|
||||
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"
|
||||
];
|
||||
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'];
|
||||
|
||||
export const mockDataRows = [
|
||||
{
|
||||
column1: "User Project",
|
||||
column2: "private",
|
||||
column3: "User",
|
||||
column4: "6 months",
|
||||
column5: "NDA signed",
|
||||
column6: "Contract #123",
|
||||
processName: "User Process",
|
||||
zone: "A"
|
||||
column1: 'User Project',
|
||||
column2: 'private',
|
||||
column3: 'User',
|
||||
column4: '6 months',
|
||||
column5: 'NDA signed',
|
||||
column6: 'Contract #123',
|
||||
processName: 'User Process',
|
||||
zone: 'A',
|
||||
},
|
||||
{
|
||||
column1: "Process Project",
|
||||
column2: "private",
|
||||
column3: "Process",
|
||||
column4: "1 year",
|
||||
column5: "Terms accepted",
|
||||
column6: "Contract #456",
|
||||
processName: "Process Management",
|
||||
zone: "B"
|
||||
column1: 'Process Project',
|
||||
column2: 'private',
|
||||
column3: 'Process',
|
||||
column4: '1 year',
|
||||
column5: 'Terms accepted',
|
||||
column6: 'Contract #456',
|
||||
processName: 'Process Management',
|
||||
zone: 'B',
|
||||
},
|
||||
{
|
||||
column1: "Member Project",
|
||||
column2: "private",
|
||||
column3: "Member",
|
||||
column4: "3 months",
|
||||
column5: "GDPR compliant",
|
||||
column6: "Contract #789",
|
||||
processName: "Member Process",
|
||||
zone: "C"
|
||||
column1: 'Member Project',
|
||||
column2: 'private',
|
||||
column3: 'Member',
|
||||
column4: '3 months',
|
||||
column5: 'GDPR compliant',
|
||||
column6: 'Contract #789',
|
||||
processName: 'Member Process',
|
||||
zone: 'C',
|
||||
},
|
||||
{
|
||||
column1: "Peer Project",
|
||||
column2: "public",
|
||||
column3: "Peer",
|
||||
column4: "2 years",
|
||||
column5: "IP rights",
|
||||
column6: "Contract #101",
|
||||
processName: "Peer Process",
|
||||
zone: "D"
|
||||
column1: 'Peer Project',
|
||||
column2: 'public',
|
||||
column3: 'Peer',
|
||||
column4: '2 years',
|
||||
column5: 'IP rights',
|
||||
column6: 'Contract #101',
|
||||
processName: 'Peer Process',
|
||||
zone: 'D',
|
||||
},
|
||||
{
|
||||
column1: "Payment Project",
|
||||
column2: "confidential",
|
||||
column3: "Payment",
|
||||
column4: "1 year",
|
||||
column5: "NDA signed",
|
||||
column6: "Contract #102",
|
||||
processName: "Payment Process",
|
||||
zone: "E"
|
||||
column1: 'Payment Project',
|
||||
column2: 'confidential',
|
||||
column3: 'Payment',
|
||||
column4: '1 year',
|
||||
column5: 'NDA signed',
|
||||
column6: 'Contract #102',
|
||||
processName: 'Payment Process',
|
||||
zone: 'E',
|
||||
},
|
||||
{
|
||||
column1: "Deposit Project",
|
||||
column2: "private",
|
||||
column3: "Deposit",
|
||||
column4: "6 months",
|
||||
column5: "Terms accepted",
|
||||
column6: "Contract #103",
|
||||
processName: "Deposit Process",
|
||||
zone: "F"
|
||||
column1: 'Deposit Project',
|
||||
column2: 'private',
|
||||
column3: 'Deposit',
|
||||
column4: '6 months',
|
||||
column5: 'Terms accepted',
|
||||
column6: 'Contract #103',
|
||||
processName: 'Deposit Process',
|
||||
zone: 'F',
|
||||
},
|
||||
{
|
||||
column1: "Artefact Project",
|
||||
column2: "public",
|
||||
column3: "Artefact",
|
||||
column4: "1 year",
|
||||
column5: "GDPR compliant",
|
||||
column6: "Contract #104",
|
||||
processName: "Artefact Process",
|
||||
zone: "G"
|
||||
column1: 'Artefact Project',
|
||||
column2: 'public',
|
||||
column3: 'Artefact',
|
||||
column4: '1 year',
|
||||
column5: 'GDPR compliant',
|
||||
column6: 'Contract #104',
|
||||
processName: 'Artefact Process',
|
||||
zone: 'G',
|
||||
},
|
||||
{
|
||||
column1: "Resolve Project",
|
||||
column2: "private",
|
||||
column3: "Resolve",
|
||||
column4: "2 years",
|
||||
column5: "IP rights",
|
||||
column6: "Contract #105",
|
||||
processName: "Resolve Process",
|
||||
zone: "H"
|
||||
column1: 'Resolve Project',
|
||||
column2: 'private',
|
||||
column3: 'Resolve',
|
||||
column4: '2 years',
|
||||
column5: 'IP rights',
|
||||
column6: 'Contract #105',
|
||||
processName: 'Resolve Process',
|
||||
zone: 'H',
|
||||
},
|
||||
{
|
||||
column1: "Backup Project",
|
||||
column2: "public",
|
||||
column3: "Backup",
|
||||
column4: "1 year",
|
||||
column5: "NDA signed",
|
||||
column6: "Contract #106",
|
||||
processName: "Backup Process",
|
||||
zone: "I"
|
||||
}
|
||||
column1: 'Backup Project',
|
||||
column2: 'public',
|
||||
column3: 'Backup',
|
||||
column4: '1 year',
|
||||
column5: 'NDA signed',
|
||||
column6: 'Contract #106',
|
||||
processName: 'Backup Process',
|
||||
zone: 'I',
|
||||
},
|
||||
];
|
||||
|
||||
export const mockProcessRows = [
|
||||
{
|
||||
process: "User Project",
|
||||
role: "User",
|
||||
process: 'User Project',
|
||||
role: 'User',
|
||||
notification: {
|
||||
messages: [
|
||||
{ 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: 3, read: false, date: "2024-03-08", message: "Security update required" },
|
||||
{ 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: 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: 3, read: false, date: '2024-03-08', message: 'Security update required' },
|
||||
{ id: 4, read: true, date: '2024-03-07', message: 'Weekly report available' },
|
||||
{ id: 5, read: true, date: '2024-03-06', message: 'Team meeting scheduled' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
process: "Member Project",
|
||||
role: "Member",
|
||||
process: 'Member Project',
|
||||
role: 'Member',
|
||||
notification: {
|
||||
messages: [
|
||||
{ id: 6, read: true, date: "2024-03-10", message: "Member access granted" },
|
||||
{ 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: 6, read: true, date: '2024-03-10', message: 'Member access granted' },
|
||||
{ id: 7, read: true, date: '2024-03-09', message: 'Documentation updated' },
|
||||
{ id: 8, read: true, date: '2024-03-08', message: 'Project status: on track' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
process: "Peer Project",
|
||||
role: "Peer",
|
||||
process: 'Peer Project',
|
||||
role: 'Peer',
|
||||
notification: {
|
||||
unread: 2,
|
||||
total: 4,
|
||||
messages: [
|
||||
{ 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: 11, read: false, date: "2024-03-08", message: "Security update required" },
|
||||
{ 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: 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: 11, read: false, date: '2024-03-08', message: 'Security update required' },
|
||||
{ id: 12, read: true, date: '2024-03-07', message: 'Weekly report available' },
|
||||
{ id: 13, read: true, date: '2024-03-06', message: 'Team meeting scheduled' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
process: "Deposit Project",
|
||||
role: "Deposit",
|
||||
process: 'Deposit Project',
|
||||
role: 'Deposit',
|
||||
notification: {
|
||||
unread: 1,
|
||||
total: 10,
|
||||
messages: [
|
||||
{ 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: 16, read: false, date: "2024-03-08", message: "Weekly report available" },
|
||||
{ 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: 14, read: false, date: '2024-03-10', message: 'Deposit milestone reached' },
|
||||
{ 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: 17, read: true, date: '2024-03-07', message: 'Team meeting scheduled' },
|
||||
{ id: 18, read: true, date: '2024-03-06', message: 'Project status: on track' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
process: "Artefact Project",
|
||||
role: "Artefact",
|
||||
process: 'Artefact Project',
|
||||
role: 'Artefact',
|
||||
notification: {
|
||||
unread: 0,
|
||||
total: 3,
|
||||
messages: [
|
||||
{ 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: 21, read: false, date: "2024-03-08", message: "Weekly report available" },
|
||||
{ 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: 19, read: false, date: '2024-03-10', message: 'New artefact added' },
|
||||
{ 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: 22, read: true, date: '2024-03-07', message: 'Team meeting scheduled' },
|
||||
{ id: 23, read: true, date: '2024-03-06', message: 'Project status: on track' },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
process: "Resolve Project",
|
||||
role: "Resolve",
|
||||
process: 'Resolve Project',
|
||||
role: 'Resolve',
|
||||
notification: {
|
||||
unread: 5,
|
||||
total: 12,
|
||||
messages: [
|
||||
{ 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: 26, read: false, date: "2024-03-08", message: "Weekly report available" },
|
||||
{ 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: 24, read: false, date: '2024-03-10', message: 'New issue reported' },
|
||||
{ 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: 27, read: true, date: '2024-03-07', message: 'Team meeting scheduled' },
|
||||
{ id: 28, read: true, date: '2024-03-06', message: 'Project status: on track' },
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
export const mockContracts = {
|
||||
'Contract #123': {
|
||||
title: "User Project Agreement",
|
||||
date: "2024-01-15",
|
||||
parties: ["Company XYZ", "User Team"],
|
||||
terms: [
|
||||
"Data Protection",
|
||||
"User Privacy",
|
||||
"Access Rights",
|
||||
"Service Level Agreement"
|
||||
],
|
||||
content: "This agreement establishes the terms and conditions for user project management."
|
||||
title: 'User Project Agreement',
|
||||
date: '2024-01-15',
|
||||
parties: ['Company XYZ', 'User Team'],
|
||||
terms: ['Data Protection', 'User Privacy', 'Access Rights', 'Service Level Agreement'],
|
||||
content: 'This agreement establishes the terms and conditions for user project management.',
|
||||
},
|
||||
'Contract #456': {
|
||||
title: "Process Management Contract",
|
||||
date: "2024-02-01",
|
||||
parties: ["Company XYZ", "Process Team"],
|
||||
terms: [
|
||||
"Process Workflow",
|
||||
"Quality Standards",
|
||||
"Performance Metrics",
|
||||
"Monitoring Procedures"
|
||||
],
|
||||
content: "This contract defines the process management standards and procedures."
|
||||
title: 'Process Management Contract',
|
||||
date: '2024-02-01',
|
||||
parties: ['Company XYZ', 'Process Team'],
|
||||
terms: ['Process Workflow', 'Quality Standards', 'Performance Metrics', 'Monitoring Procedures'],
|
||||
content: 'This contract defines the process management standards and procedures.',
|
||||
},
|
||||
'Contract #789': {
|
||||
title: "Member Access Agreement",
|
||||
date: "2024-03-15",
|
||||
parties: ["Company XYZ", "Member Team"],
|
||||
terms: [
|
||||
"Member Rights",
|
||||
"Access Levels",
|
||||
"Security Protocol",
|
||||
"Confidentiality Agreement"
|
||||
],
|
||||
content: "This agreement outlines the terms for member access and privileges."
|
||||
title: 'Member Access Agreement',
|
||||
date: '2024-03-15',
|
||||
parties: ['Company XYZ', 'Member Team'],
|
||||
terms: ['Member Rights', 'Access Levels', 'Security Protocol', 'Confidentiality Agreement'],
|
||||
content: 'This agreement outlines the terms for member access and privileges.',
|
||||
},
|
||||
'Contract #101': {
|
||||
title: "Peer Collaboration Agreement",
|
||||
date: "2024-04-01",
|
||||
parties: ["Company XYZ", "Peer Network"],
|
||||
terms: [
|
||||
"Collaboration Rules",
|
||||
"Resource Sharing",
|
||||
"Dispute Resolution",
|
||||
"Network Protocol"
|
||||
],
|
||||
content: "This contract establishes peer collaboration and networking guidelines."
|
||||
title: 'Peer Collaboration Agreement',
|
||||
date: '2024-04-01',
|
||||
parties: ['Company XYZ', 'Peer Network'],
|
||||
terms: ['Collaboration Rules', 'Resource Sharing', 'Dispute Resolution', 'Network Protocol'],
|
||||
content: 'This contract establishes peer collaboration and networking guidelines.',
|
||||
},
|
||||
'Contract #102': {
|
||||
title: "Payment Processing Agreement",
|
||||
date: "2024-05-01",
|
||||
parties: ["Company XYZ", "Payment Team"],
|
||||
terms: [
|
||||
"Transaction Protocol",
|
||||
"Security Measures",
|
||||
"Fee Structure",
|
||||
"Service Availability"
|
||||
],
|
||||
content: "This agreement defines payment processing terms and conditions."
|
||||
title: 'Payment Processing Agreement',
|
||||
date: '2024-05-01',
|
||||
parties: ['Company XYZ', 'Payment Team'],
|
||||
terms: ['Transaction Protocol', 'Security Measures', 'Fee Structure', 'Service Availability'],
|
||||
content: 'This agreement defines payment processing terms and conditions.',
|
||||
},
|
||||
'Contract #103': {
|
||||
title: "Deposit Management Contract",
|
||||
date: "2024-06-01",
|
||||
parties: ["Company XYZ", "Deposit Team"],
|
||||
terms: [
|
||||
"Deposit Rules",
|
||||
"Storage Protocol",
|
||||
"Access Control",
|
||||
"Security Standards"
|
||||
],
|
||||
content: "This contract outlines deposit management procedures and security measures."
|
||||
title: 'Deposit Management Contract',
|
||||
date: '2024-06-01',
|
||||
parties: ['Company XYZ', 'Deposit Team'],
|
||||
terms: ['Deposit Rules', 'Storage Protocol', 'Access Control', 'Security Standards'],
|
||||
content: 'This contract outlines deposit management procedures and security measures.',
|
||||
},
|
||||
'Contract #104': {
|
||||
title: "Artefact Handling Agreement",
|
||||
date: "2024-07-01",
|
||||
parties: ["Company XYZ", "Artefact Team"],
|
||||
terms: [
|
||||
"Handling Procedures",
|
||||
"Storage Guidelines",
|
||||
"Access Protocol",
|
||||
"Preservation Standards"
|
||||
],
|
||||
content: "This agreement establishes artefact handling and preservation guidelines."
|
||||
title: 'Artefact Handling Agreement',
|
||||
date: '2024-07-01',
|
||||
parties: ['Company XYZ', 'Artefact Team'],
|
||||
terms: ['Handling Procedures', 'Storage Guidelines', 'Access Protocol', 'Preservation Standards'],
|
||||
content: 'This agreement establishes artefact handling and preservation guidelines.',
|
||||
},
|
||||
'Contract #105': {
|
||||
title: "Resolution Protocol Agreement",
|
||||
date: "2024-08-01",
|
||||
parties: ["Company XYZ", "Resolution Team"],
|
||||
terms: [
|
||||
"Resolution Process",
|
||||
"Time Constraints",
|
||||
"Escalation Protocol",
|
||||
"Documentation Requirements"
|
||||
],
|
||||
content: "This contract defines the resolution process and protocol standards."
|
||||
title: 'Resolution Protocol Agreement',
|
||||
date: '2024-08-01',
|
||||
parties: ['Company XYZ', 'Resolution Team'],
|
||||
terms: ['Resolution Process', 'Time Constraints', 'Escalation Protocol', 'Documentation Requirements'],
|
||||
content: 'This contract defines the resolution process and protocol standards.',
|
||||
},
|
||||
'Contract #106': {
|
||||
title: "Backup Service Agreement",
|
||||
date: "2024-09-01",
|
||||
parties: ["Company XYZ", "Backup Team"],
|
||||
terms: [
|
||||
"Backup Schedule",
|
||||
"Data Protection",
|
||||
"Recovery Protocol",
|
||||
"Service Reliability"
|
||||
],
|
||||
content: "This agreement outlines backup service terms and recovery procedures."
|
||||
}
|
||||
title: 'Backup Service Agreement',
|
||||
date: '2024-09-01',
|
||||
parties: ['Company XYZ', 'Backup Team'],
|
||||
terms: ['Backup Schedule', 'Data Protection', 'Recovery Protocol', 'Service Reliability'],
|
||||
content: 'This agreement outlines backup service terms and recovery procedures.',
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,40 +1,52 @@
|
||||
export const groupsMock = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Group 🚀 ",
|
||||
name: 'Group 🚀 ',
|
||||
roles: [
|
||||
{
|
||||
id: 1,
|
||||
name: "Role 1",
|
||||
members: [{ id: 1, name: "Member 1" }, { id: 2, name: "Member 2" }]
|
||||
name: 'Role 1',
|
||||
members: [
|
||||
{ id: 1, name: 'Member 1' },
|
||||
{ id: 2, name: 'Member 2' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Role 2",
|
||||
members: [{ id: 3, name: "Member 3" }, { id: 4, name: "Member 4" }]
|
||||
}
|
||||
]
|
||||
name: 'Role 2',
|
||||
members: [
|
||||
{ id: 3, name: 'Member 3' },
|
||||
{ id: 4, name: 'Member 4' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Group ₿",
|
||||
name: 'Group ₿',
|
||||
roles: [
|
||||
{
|
||||
id: 3,
|
||||
name: "Role 1",
|
||||
members: [{ id: 5, name: "Member 5" }, { id: 6, name: "Member 6" }]
|
||||
}
|
||||
]
|
||||
name: 'Role 1',
|
||||
members: [
|
||||
{ id: 5, name: 'Member 5' },
|
||||
{ id: 6, name: 'Member 6' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Group 🪙",
|
||||
name: 'Group 🪙',
|
||||
roles: [
|
||||
{
|
||||
id: 4,
|
||||
name: "Role 1",
|
||||
members: [{ id: 7, name: "Member 7" }, { id: 8, name: "Member 8" }]
|
||||
}
|
||||
]
|
||||
}
|
||||
name: 'Role 1',
|
||||
members: [
|
||||
{ id: 7, name: 'Member 7' },
|
||||
{ id: 8, name: 'Member 8' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -2,64 +2,63 @@ export const messagesMock = [
|
||||
{
|
||||
memberId: 1, // Conversations avec Mmber 1
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Tout va bien, merci !", time: "10:32 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: 3, sender: '4NK', text: 'Tout va bien, merci !', time: '10:32 AM' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 2, // Conversations avec Member 2
|
||||
messages: [
|
||||
{ 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: 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' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 3, // Conversations avec Member 3
|
||||
messages: [
|
||||
{ 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: 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' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 4, // Conversations avec Member 4
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 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: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 5, // Conversations avec Member 5
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 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: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 6, // Conversations avec Member 6
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 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: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 7, // Conversations avec Member 7
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 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: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 8, // Conversations avec Member 8
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 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: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -1,29 +1,19 @@
|
||||
// Définir les rôles autorisés
|
||||
const VALID_ROLES = [
|
||||
"User",
|
||||
"Process",
|
||||
"Member",
|
||||
"Peer",
|
||||
"Payment",
|
||||
"Deposit",
|
||||
"Artefact",
|
||||
"Resolve",
|
||||
"Backup"
|
||||
];
|
||||
const VALID_ROLES = ['User', 'Process', 'Member', 'Peer', 'Payment', 'Deposit', 'Artefact', 'Resolve', 'Backup'];
|
||||
|
||||
const VISIBILITY_LEVELS = {
|
||||
PUBLIC: "public",
|
||||
CONFIDENTIAL: "confidential",
|
||||
PRIVATE: "private",
|
||||
PUBLIC: 'public',
|
||||
CONFIDENTIAL: 'confidential',
|
||||
PRIVATE: 'private',
|
||||
};
|
||||
|
||||
const DOCUMENT_STATUS = {
|
||||
DRAFT: "draft",
|
||||
PENDING: "pending",
|
||||
IN_REVIEW: "in_review",
|
||||
APPROVED: "approved",
|
||||
REJECTED: "rejected",
|
||||
EXPIRED: "expired"
|
||||
DRAFT: 'draft',
|
||||
PENDING: 'pending',
|
||||
IN_REVIEW: 'in_review',
|
||||
APPROVED: 'approved',
|
||||
REJECTED: 'rejected',
|
||||
EXPIRED: 'expired',
|
||||
};
|
||||
|
||||
// Fonction pour créer un rôle
|
||||
@ -37,424 +27,445 @@ function createRole(name, members) {
|
||||
export const groupsMock = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Processus 1",
|
||||
description: "Description du processus 1",
|
||||
name: 'Processus 1',
|
||||
description: 'Description du processus 1',
|
||||
commonDocuments: [
|
||||
{
|
||||
id: 101,
|
||||
name: "Règlement intérieur",
|
||||
description: "Document vierge pour le règlement intérieur",
|
||||
name: 'Règlement intérieur',
|
||||
description: 'Document vierge pour le règlement intérieur',
|
||||
visibility: VISIBILITY_LEVELS.PUBLIC,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 102,
|
||||
name: "Charte de confidentialité",
|
||||
description: "Document vierge pour la charte de confidentialité",
|
||||
name: 'Charte de confidentialité',
|
||||
description: 'Document vierge pour la charte de confidentialité',
|
||||
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 103,
|
||||
name: "Procédures générales",
|
||||
description: "Document vierge pour les procédures générales",
|
||||
name: 'Procédures générales',
|
||||
description: 'Document vierge pour les procédures générales',
|
||||
visibility: VISIBILITY_LEVELS.PUBLIC,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 104,
|
||||
name: "Urgency A",
|
||||
name: 'Urgency A',
|
||||
description: "Document vierge pour le plan d'urgence A",
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 105,
|
||||
name: "Urgency B",
|
||||
name: 'Urgency B',
|
||||
description: "Document vierge pour le plan d'urgence B",
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 106,
|
||||
name: "Urgency C",
|
||||
name: 'Urgency C',
|
||||
description: "Document vierge pour le plan d'urgence C",
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 107,
|
||||
name: "Document à signer",
|
||||
description: "Document vierge pour le règlement intérieur",
|
||||
name: 'Document à signer',
|
||||
description: 'Document vierge pour le règlement intérieur',
|
||||
visibility: VISIBILITY_LEVELS.PUBLIC,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
],
|
||||
roles: [
|
||||
{
|
||||
name: "User",
|
||||
members: [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }],
|
||||
name: 'User',
|
||||
members: [
|
||||
{ id: 1, name: 'Alice' },
|
||||
{ id: 2, name: 'Bob' },
|
||||
],
|
||||
documents: [
|
||||
{
|
||||
id: 1,
|
||||
name: "Document User A",
|
||||
description: "Description du document User A.",
|
||||
visibility: "public",
|
||||
createdAt: "2024-01-01",
|
||||
deadline: "2024-02-01",
|
||||
name: 'Document User A',
|
||||
description: 'Description du document User A.',
|
||||
visibility: 'public',
|
||||
createdAt: '2024-01-01',
|
||||
deadline: '2024-02-01',
|
||||
signatures: [
|
||||
{
|
||||
member: { id: 1, name: "Alice" },
|
||||
member: { id: 1, name: 'Alice' },
|
||||
signed: true,
|
||||
signedAt: "2024-01-15"
|
||||
signedAt: '2024-01-15',
|
||||
},
|
||||
{
|
||||
member: { id: 2, name: "Bob" },
|
||||
signed: false
|
||||
}
|
||||
]
|
||||
member: { id: 2, name: 'Bob' },
|
||||
signed: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Document User B",
|
||||
description: "Document vierge pour le rôle User",
|
||||
visibility: "confidential",
|
||||
name: 'Document User B',
|
||||
description: 'Document vierge pour le rôle User',
|
||||
visibility: 'confidential',
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "Document User C",
|
||||
description: "Document vierge pour validation utilisateur",
|
||||
name: 'Document User C',
|
||||
description: 'Document vierge pour validation utilisateur',
|
||||
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "Document User D",
|
||||
description: "Document vierge pour approbation utilisateur",
|
||||
name: 'Document User D',
|
||||
description: 'Document vierge pour approbation utilisateur',
|
||||
visibility: VISIBILITY_LEVELS.PUBLIC,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
}
|
||||
]
|
||||
signatures: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Process",
|
||||
members: [{ id: 3, name: "Charlie" }, { id: 4, name: "David" }],
|
||||
name: 'Process',
|
||||
members: [
|
||||
{ id: 3, name: 'Charlie' },
|
||||
{ id: 4, name: 'David' },
|
||||
],
|
||||
documents: [
|
||||
{
|
||||
id: 3,
|
||||
name: "Document Process A",
|
||||
description: "Description du document Process A.",
|
||||
visibility: "confidential",
|
||||
createdAt: "2024-01-10",
|
||||
deadline: "2024-03-01",
|
||||
name: 'Document Process A',
|
||||
description: 'Description du document Process A.',
|
||||
visibility: 'confidential',
|
||||
createdAt: '2024-01-10',
|
||||
deadline: '2024-03-01',
|
||||
signatures: [
|
||||
{
|
||||
member: { id: 3, name: "Charlie" },
|
||||
member: { id: 3, name: 'Charlie' },
|
||||
signed: true,
|
||||
signedAt: "2024-01-12"
|
||||
}
|
||||
]
|
||||
signedAt: '2024-01-12',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: "Document Process B",
|
||||
description: "Document vierge pour processus interne",
|
||||
name: 'Document Process B',
|
||||
description: 'Document vierge pour processus interne',
|
||||
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: "Document Process C",
|
||||
description: "Document vierge pour validation processus",
|
||||
name: 'Document Process C',
|
||||
description: 'Document vierge pour validation processus',
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: "Document Process D",
|
||||
description: "Document vierge pour validation processus",
|
||||
name: 'Document Process D',
|
||||
description: 'Document vierge pour validation processus',
|
||||
visibility: VISIBILITY_LEVELS.PUBLIC,
|
||||
status: DOCUMENT_STATUS.PENDING,
|
||||
createdAt: "2024-01-15",
|
||||
deadline: "2024-02-01",
|
||||
createdAt: '2024-01-15',
|
||||
deadline: '2024-02-01',
|
||||
signatures: [
|
||||
{
|
||||
member: { id: 3, name: "Charlie" },
|
||||
member: { id: 3, name: 'Charlie' },
|
||||
signed: true,
|
||||
signedAt: "2024-01-15"
|
||||
signedAt: '2024-01-15',
|
||||
},
|
||||
{
|
||||
member: { id: 4, name: "David" },
|
||||
signed: false
|
||||
}
|
||||
]
|
||||
member: { id: 4, name: 'David' },
|
||||
signed: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: "Document Process E",
|
||||
description: "Document vierge pour validation processus",
|
||||
name: 'Document Process E',
|
||||
description: 'Document vierge pour validation processus',
|
||||
visibility: VISIBILITY_LEVELS.PUBLIC,
|
||||
status: DOCUMENT_STATUS.PENDING,
|
||||
createdAt: "2024-01-15",
|
||||
deadline: "2024-02-01",
|
||||
createdAt: '2024-01-15',
|
||||
deadline: '2024-02-01',
|
||||
signatures: [
|
||||
{
|
||||
member: { id: 3, name: "Charlie" },
|
||||
member: { id: 3, name: 'Charlie' },
|
||||
signed: true,
|
||||
signedAt: "2024-01-15"
|
||||
signedAt: '2024-01-15',
|
||||
},
|
||||
{
|
||||
member: { id: 4, name: "David" },
|
||||
signed: false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
member: { id: 4, name: 'David' },
|
||||
signed: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Backup",
|
||||
members: [{ id: 15, name: "Oscar" }, { id: 16, name: "Patricia" }],
|
||||
name: 'Backup',
|
||||
members: [
|
||||
{ id: 15, name: 'Oscar' },
|
||||
{ id: 16, name: 'Patricia' },
|
||||
],
|
||||
documents: [
|
||||
{
|
||||
id: 11,
|
||||
name: "Document Backup A",
|
||||
description: "Document vierge pour sauvegarde",
|
||||
name: 'Document Backup A',
|
||||
description: 'Document vierge pour sauvegarde',
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
signatures: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Processus 2",
|
||||
description: "Description du processus 2",
|
||||
name: 'Processus 2',
|
||||
description: 'Description du processus 2',
|
||||
commonDocuments: [
|
||||
{
|
||||
id: 201,
|
||||
name: "Règlement intérieur",
|
||||
description: "Document vierge pour le règlement intérieur",
|
||||
name: 'Règlement intérieur',
|
||||
description: 'Document vierge pour le règlement intérieur',
|
||||
visibility: VISIBILITY_LEVELS.PUBLIC,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 202,
|
||||
name: "Charte de confidentialité",
|
||||
description: "Document vierge pour la charte de confidentialité",
|
||||
name: 'Charte de confidentialité',
|
||||
description: 'Document vierge pour la charte de confidentialité',
|
||||
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 203,
|
||||
name: "Charte de confidentialité",
|
||||
description: "Document vierge pour la charte de confidentialité",
|
||||
name: 'Charte de confidentialité',
|
||||
description: 'Document vierge pour la charte de confidentialité',
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 204,
|
||||
name: "Charte de confidentialité",
|
||||
description: "Document vierge pour la charte de confidentialité",
|
||||
name: 'Charte de confidentialité',
|
||||
description: 'Document vierge pour la charte de confidentialité',
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 205,
|
||||
name: "Charte de confidentialité",
|
||||
description: "Document vierge pour la charte de confidentialité",
|
||||
name: 'Charte de confidentialité',
|
||||
description: 'Document vierge pour la charte de confidentialité',
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
}
|
||||
signatures: [],
|
||||
},
|
||||
],
|
||||
roles: [
|
||||
{
|
||||
name: "Artefact",
|
||||
members: [{ id: 17, name: "Quinn" }, { id: 18, name: "Rachel" }],
|
||||
name: 'Artefact',
|
||||
members: [
|
||||
{ id: 17, name: 'Quinn' },
|
||||
{ id: 18, name: 'Rachel' },
|
||||
],
|
||||
documents: [
|
||||
{
|
||||
id: 12,
|
||||
name: "Document Artefact A",
|
||||
description: "Document vierge pour artefact",
|
||||
name: 'Document Artefact A',
|
||||
description: 'Document vierge pour artefact',
|
||||
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
name: "Document Artefact B",
|
||||
description: "Document vierge pour validation artefact",
|
||||
name: 'Document Artefact B',
|
||||
description: 'Document vierge pour validation artefact',
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
}
|
||||
]
|
||||
signatures: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Resolve",
|
||||
members: [{ id: 19, name: "Sam" }, { id: 20, name: "Tom" }],
|
||||
name: 'Resolve',
|
||||
members: [
|
||||
{ id: 19, name: 'Sam' },
|
||||
{ id: 20, name: 'Tom' },
|
||||
],
|
||||
documents: [
|
||||
{
|
||||
id: 14,
|
||||
name: "Document Resolve A",
|
||||
description: "Document vierge pour résolution",
|
||||
name: 'Document Resolve A',
|
||||
description: 'Document vierge pour résolution',
|
||||
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
signatures: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Processus 3",
|
||||
description: "Description du processus 3",
|
||||
name: 'Processus 3',
|
||||
description: 'Description du processus 3',
|
||||
commonDocuments: [
|
||||
{
|
||||
id: 301,
|
||||
name: "Règlement intérieur",
|
||||
description: "Document vierge pour le règlement intérieur",
|
||||
name: 'Règlement intérieur',
|
||||
description: 'Document vierge pour le règlement intérieur',
|
||||
visibility: VISIBILITY_LEVELS.PUBLIC,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 302,
|
||||
name: "Charte de confidentialité",
|
||||
description: "Document vierge pour la charte de confidentialité",
|
||||
name: 'Charte de confidentialité',
|
||||
description: 'Document vierge pour la charte de confidentialité',
|
||||
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 303,
|
||||
name: "Procédures générales",
|
||||
description: "Document vierge pour les procédures générales",
|
||||
name: 'Procédures générales',
|
||||
description: 'Document vierge pour les procédures générales',
|
||||
visibility: VISIBILITY_LEVELS.PUBLIC,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
}
|
||||
signatures: [],
|
||||
},
|
||||
],
|
||||
roles: [
|
||||
{
|
||||
name: "Deposit",
|
||||
members: [{ id: 21, name: "Uma" }, { id: 22, name: "Victor" }],
|
||||
name: 'Deposit',
|
||||
members: [
|
||||
{ id: 21, name: 'Uma' },
|
||||
{ id: 22, name: 'Victor' },
|
||||
],
|
||||
documents: [
|
||||
{
|
||||
id: 15,
|
||||
name: "Document Deposit A",
|
||||
description: "Document vierge pour dépôt",
|
||||
name: 'Document Deposit A',
|
||||
description: 'Document vierge pour dépôt',
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
name: "Document Deposit B",
|
||||
description: "Document vierge pour validation dépôt",
|
||||
name: 'Document Deposit B',
|
||||
description: 'Document vierge pour validation dépôt',
|
||||
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
}
|
||||
]
|
||||
signatures: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Payment",
|
||||
members: [{ id: 23, name: "Walter" }, { id: 24, name: "Xena" }],
|
||||
name: 'Payment',
|
||||
members: [
|
||||
{ id: 23, name: 'Walter' },
|
||||
{ id: 24, name: 'Xena' },
|
||||
],
|
||||
documents: [
|
||||
{
|
||||
id: 17,
|
||||
name: "Document Payment B",
|
||||
description: "Document vierge pour paiement",
|
||||
name: 'Document Payment B',
|
||||
description: 'Document vierge pour paiement',
|
||||
visibility: VISIBILITY_LEVELS.PRIVATE,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
signatures: [],
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
name: "Document Payment C",
|
||||
description: "Document vierge pour validation paiement",
|
||||
name: 'Document Payment C',
|
||||
description: 'Document vierge pour validation paiement',
|
||||
visibility: VISIBILITY_LEVELS.CONFIDENTIAL,
|
||||
status: DOCUMENT_STATUS.DRAFT,
|
||||
createdAt: null,
|
||||
deadline: null,
|
||||
signatures: []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
signatures: [],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -2,104 +2,104 @@ export const membersMock = [
|
||||
// Processus 1
|
||||
{
|
||||
id: 1,
|
||||
name: "Alice",
|
||||
avatar: "A",
|
||||
email: "alice@company.com",
|
||||
processRoles: [{ processId: 1, role: "User" }]
|
||||
name: 'Alice',
|
||||
avatar: 'A',
|
||||
email: 'alice@company.com',
|
||||
processRoles: [{ processId: 1, role: 'User' }],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Bob",
|
||||
avatar: "B",
|
||||
email: "bob@company.com",
|
||||
processRoles: [{ processId: 1, role: "User" }]
|
||||
name: 'Bob',
|
||||
avatar: 'B',
|
||||
email: 'bob@company.com',
|
||||
processRoles: [{ processId: 1, role: 'User' }],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Charlie",
|
||||
avatar: "C",
|
||||
email: "charlie@company.com",
|
||||
processRoles: [{ processId: 1, role: "Process" }]
|
||||
name: 'Charlie',
|
||||
avatar: 'C',
|
||||
email: 'charlie@company.com',
|
||||
processRoles: [{ processId: 1, role: 'Process' }],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "David",
|
||||
avatar: "D",
|
||||
email: "david@company.com",
|
||||
processRoles: [{ processId: 1, role: "Process" }]
|
||||
name: 'David',
|
||||
avatar: 'D',
|
||||
email: 'david@company.com',
|
||||
processRoles: [{ processId: 1, role: 'Process' }],
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
name: "Oscar",
|
||||
avatar: "O",
|
||||
email: "oscar@company.com",
|
||||
processRoles: [{ processId: 1, role: "Backup" }]
|
||||
name: 'Oscar',
|
||||
avatar: 'O',
|
||||
email: 'oscar@company.com',
|
||||
processRoles: [{ processId: 1, role: 'Backup' }],
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
name: "Patricia",
|
||||
avatar: "P",
|
||||
email: "patricia@company.com",
|
||||
processRoles: [{ processId: 1, role: "Backup" }]
|
||||
name: 'Patricia',
|
||||
avatar: 'P',
|
||||
email: 'patricia@company.com',
|
||||
processRoles: [{ processId: 1, role: 'Backup' }],
|
||||
},
|
||||
|
||||
// Processus 2
|
||||
{
|
||||
id: 17,
|
||||
name: "Quinn",
|
||||
avatar: "Q",
|
||||
email: "quinn@company.com",
|
||||
processRoles: [{ processId: 2, role: "Artefact" }]
|
||||
name: 'Quinn',
|
||||
avatar: 'Q',
|
||||
email: 'quinn@company.com',
|
||||
processRoles: [{ processId: 2, role: 'Artefact' }],
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
name: "Rachel",
|
||||
avatar: "R",
|
||||
email: "rachel@company.com",
|
||||
processRoles: [{ processId: 2, role: "Artefact" }]
|
||||
name: 'Rachel',
|
||||
avatar: 'R',
|
||||
email: 'rachel@company.com',
|
||||
processRoles: [{ processId: 2, role: 'Artefact' }],
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
name: "Sam",
|
||||
avatar: "S",
|
||||
email: "sam@company.com",
|
||||
processRoles: [{ processId: 2, role: "Resolve" }]
|
||||
name: 'Sam',
|
||||
avatar: 'S',
|
||||
email: 'sam@company.com',
|
||||
processRoles: [{ processId: 2, role: 'Resolve' }],
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
name: "Tom",
|
||||
avatar: "T",
|
||||
email: "tom@company.com",
|
||||
processRoles: [{ processId: 2, role: "Resolve" }]
|
||||
name: 'Tom',
|
||||
avatar: 'T',
|
||||
email: 'tom@company.com',
|
||||
processRoles: [{ processId: 2, role: 'Resolve' }],
|
||||
},
|
||||
|
||||
// Processus 3
|
||||
{
|
||||
id: 21,
|
||||
name: "Uma",
|
||||
avatar: "U",
|
||||
email: "uma@company.com",
|
||||
processRoles: [{ processId: 3, role: "Deposit" }]
|
||||
name: 'Uma',
|
||||
avatar: 'U',
|
||||
email: 'uma@company.com',
|
||||
processRoles: [{ processId: 3, role: 'Deposit' }],
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
name: "Victor",
|
||||
avatar: "V",
|
||||
email: "victor@company.com",
|
||||
processRoles: [{ processId: 3, role: "Deposit" }]
|
||||
name: 'Victor',
|
||||
avatar: 'V',
|
||||
email: 'victor@company.com',
|
||||
processRoles: [{ processId: 3, role: 'Deposit' }],
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
name: "Walter",
|
||||
avatar: "W",
|
||||
email: "walter@company.com",
|
||||
processRoles: [{ processId: 3, role: "Payment" }]
|
||||
name: 'Walter',
|
||||
avatar: 'W',
|
||||
email: 'walter@company.com',
|
||||
processRoles: [{ processId: 3, role: 'Payment' }],
|
||||
},
|
||||
{
|
||||
id: 24,
|
||||
name: "Xena",
|
||||
avatar: "X",
|
||||
email: "xena@company.com",
|
||||
processRoles: [{ processId: 3, role: "Payment" }]
|
||||
}
|
||||
name: 'Xena',
|
||||
avatar: 'X',
|
||||
email: 'xena@company.com',
|
||||
processRoles: [{ processId: 3, role: 'Payment' }],
|
||||
},
|
||||
];
|
||||
|
||||
@ -2,64 +2,63 @@ export const messagesMock = [
|
||||
{
|
||||
memberId: 1, // Conversations avec Mmber 1
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Tout va bien, merci !", time: "10:32 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: 3, sender: '4NK', text: 'Tout va bien, merci !', time: '10:32 AM' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 2, // Conversations avec Member 2
|
||||
messages: [
|
||||
{ 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: 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' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 3, // Conversations avec Member 3
|
||||
messages: [
|
||||
{ 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: 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' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 4, // Conversations avec Member 4
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 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: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 5, // Conversations avec Member 5
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 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: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 6, // Conversations avec Member 6
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 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: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 7, // Conversations avec Member 7
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 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: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
|
||||
],
|
||||
},
|
||||
{
|
||||
memberId: 8, // Conversations avec Member 8
|
||||
messages: [
|
||||
{ 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: 3, sender: "4NK", text: "Ça va et toi ?", time: "10:31 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: 3, sender: '4NK', text: 'Ça va et toi ?', time: '10:31 AM' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -19,12 +19,12 @@ export interface IMessage {
|
||||
}
|
||||
|
||||
export interface UserDiff {
|
||||
new_state_merkle_root: string, // TODO add a merkle proof that the new_value belongs to that state
|
||||
field: string,
|
||||
previous_value: string,
|
||||
new_value: string,
|
||||
notify_user: boolean,
|
||||
need_validation: boolean,
|
||||
new_state_merkle_root: string; // TODO add a merkle proof that the new_value belongs to that state
|
||||
field: string;
|
||||
previous_value: string;
|
||||
new_value: string;
|
||||
notify_user: boolean;
|
||||
need_validation: boolean;
|
||||
// validated: bool,
|
||||
proof: any, // This is only validation (or refusal) for that specific diff, not the whole state. It can't be commited as such
|
||||
proof: any; // This is only validation (or refusal) for that specific diff, not the whole state. It can't be commited as such
|
||||
}
|
||||
@ -5,7 +5,7 @@ export interface Group {
|
||||
roles: {
|
||||
id?: number;
|
||||
name: string;
|
||||
members: { id: string | number; name: string; }[];
|
||||
members: { id: string | number; name: string }[];
|
||||
documents?: {
|
||||
id: number;
|
||||
name: string;
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
import { AccountElement } from './account';
|
||||
import accountCss from '../../../public/style/account.css?raw'
|
||||
import Services from '../../services/service.js'
|
||||
import accountCss from '../../../public/style/account.css?raw';
|
||||
import Services from '../../services/service.js';
|
||||
|
||||
class AccountComponent extends HTMLElement {
|
||||
_callback: any
|
||||
_callback: any;
|
||||
accountElement: AccountElement | null = null;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
console.log('INIT')
|
||||
console.log('INIT');
|
||||
this.attachShadow({ mode: 'open' });
|
||||
|
||||
this.accountElement = this.shadowRoot?.querySelector('account-element') || null;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
console.log('CALLBACKs')
|
||||
console.log('CALLBACKs');
|
||||
this.render();
|
||||
this.fetchData();
|
||||
|
||||
@ -28,7 +28,7 @@ class AccountComponent extends HTMLElement {
|
||||
if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
|
||||
const data = await (window as any).myService?.getProcesses();
|
||||
} else {
|
||||
const service = await Services.getInstance()
|
||||
const service = await Services.getInstance();
|
||||
const data = await service.getProcesses();
|
||||
}
|
||||
}
|
||||
@ -46,7 +46,7 @@ class AccountComponent extends HTMLElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
if(this.shadowRoot && !this.shadowRoot.querySelector('account-element')) {
|
||||
if (this.shadowRoot && !this.shadowRoot.querySelector('account-element')) {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = accountCss;
|
||||
|
||||
@ -54,10 +54,9 @@ class AccountComponent extends HTMLElement {
|
||||
|
||||
this.shadowRoot.appendChild(style);
|
||||
this.shadowRoot.appendChild(accountElement);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { AccountComponent }
|
||||
export { AccountComponent };
|
||||
customElements.define('account-component', AccountComponent);
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Account</title>
|
||||
<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">
|
||||
</head>
|
||||
<body>
|
||||
<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" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header Container -->
|
||||
<div id="header-container"></div>
|
||||
|
||||
@ -20,10 +20,10 @@
|
||||
<!-- Banner Preview Section -->
|
||||
<div class="banner-preview">
|
||||
<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="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 class="user-info">
|
||||
<span class="editable" id="popup-name"></span>
|
||||
@ -34,7 +34,7 @@
|
||||
<div class="banner-controls">
|
||||
<label for="banner-upload" class="banner-upload-label button-style">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
@ -42,12 +42,12 @@
|
||||
<!-- Avatar Upload Section -->
|
||||
<div class="popup-avatar">
|
||||
<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">
|
||||
<span>Change Avatar</span>
|
||||
</div>
|
||||
</label>
|
||||
<input type="file" id="avatar-upload" accept="image/*" style="display: none;">
|
||||
<input type="file" id="avatar-upload" accept="image/*" style="display: none" />
|
||||
</div>
|
||||
|
||||
<!-- User Info Section -->
|
||||
@ -68,10 +68,18 @@
|
||||
<div class="container">
|
||||
<!-- Parameter List -->
|
||||
<div class="parameter-list">
|
||||
<ul class="parameter-list-ul" onclick="window.showPairing()">Pairing 🔗</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>
|
||||
<ul class="parameter-list-ul" onclick="window.showPairing()">
|
||||
Pairing 🔗
|
||||
</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>
|
||||
|
||||
<!-- Parameter Area -->
|
||||
@ -87,5 +95,5 @@
|
||||
|
||||
<!-- Scripts -->
|
||||
<script type="module" src="./account.ts?ts"></script>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
@ -71,15 +71,11 @@ export function showAlert(message: string): void {
|
||||
class AccountElement extends HTMLElement {
|
||||
private dom: Node;
|
||||
|
||||
|
||||
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.dom = getCorrectDOM('account-element');
|
||||
|
||||
|
||||
window.showPairing = () => this.showPairing();
|
||||
window.showWallet = () => this.showWallet();
|
||||
window.showProcess = () => this.showProcess();
|
||||
@ -140,14 +136,14 @@ class AccountElement extends HTMLElement {
|
||||
this.deleteAccount();
|
||||
modal.remove();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private deleteAccount(): void {
|
||||
private deleteAccount(): void {
|
||||
localStorage.clear();
|
||||
window.location.href = '/login.html';
|
||||
}
|
||||
}
|
||||
|
||||
private updateNavbarBanner(imageUrl: string): void {
|
||||
private updateNavbarBanner(imageUrl: string): void {
|
||||
const navbarSection = document.querySelector('.nav-wrapper .avatar-section');
|
||||
if (!navbarSection) return;
|
||||
|
||||
@ -160,13 +156,13 @@ private updateNavbarBanner(imageUrl: string): void {
|
||||
}
|
||||
|
||||
bannerImg.src = imageUrl;
|
||||
}
|
||||
}
|
||||
|
||||
private saveBannerToLocalStorage(dataUrl: string): void {
|
||||
private saveBannerToLocalStorage(dataUrl: string): void {
|
||||
localStorage.setItem('userBanner', dataUrl);
|
||||
}
|
||||
}
|
||||
|
||||
private loadSavedBanner(): void {
|
||||
private loadSavedBanner(): void {
|
||||
const savedBanner = localStorage.getItem('userBanner');
|
||||
if (savedBanner) {
|
||||
const bannerImg = document.getElementById('popup-banner-img') as HTMLImageElement;
|
||||
@ -175,10 +171,9 @@ private loadSavedBanner(): void {
|
||||
}
|
||||
this.updateNavbarBanner(savedBanner);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private closeNotificationPopup(event: Event): void {
|
||||
private closeNotificationPopup(event: Event): void {
|
||||
const target = event.target as HTMLElement;
|
||||
const isOverlay = target.classList.contains('notification-popup-overlay');
|
||||
const isCloseButton = target.classList.contains('close-popup');
|
||||
@ -186,13 +181,13 @@ private closeNotificationPopup(event: Event): void {
|
||||
|
||||
const popup = document.querySelector('.notification-popup-overlay');
|
||||
if (popup) popup.remove();
|
||||
}
|
||||
}
|
||||
|
||||
private markAsRead(processName: string, messageId: number, element: HTMLElement): void {
|
||||
const process = mockProcessRows.find(p => p.process === processName);
|
||||
private markAsRead(processName: string, messageId: number, element: HTMLElement): void {
|
||||
const process = mockProcessRows.find((p) => p.process === processName);
|
||||
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;
|
||||
|
||||
message.read = true;
|
||||
@ -217,17 +212,17 @@ private markAsRead(processName: string, messageId: number, element: HTMLElement)
|
||||
(bell as HTMLElement).style.color = '#666';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fonctions de gestion des données et de l'interface
|
||||
private calculateNotifications(messages: NotificationMessage[]): { unread: number; total: number } {
|
||||
// Fonctions de gestion des données et de l'interface
|
||||
private calculateNotifications(messages: NotificationMessage[]): { unread: number; total: number } {
|
||||
const total = messages.length;
|
||||
const unread = messages.filter(msg => !msg.read).length;
|
||||
const unread = messages.filter((msg) => !msg.read).length;
|
||||
return { unread, total };
|
||||
}
|
||||
}
|
||||
|
||||
// Fonctions de récupération
|
||||
private exportRecovery(): void {
|
||||
// Fonctions de récupération
|
||||
private exportRecovery(): void {
|
||||
Swal.fire({
|
||||
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?',
|
||||
@ -236,7 +231,7 @@ private exportRecovery(): void {
|
||||
confirmButtonText: 'Confirm',
|
||||
cancelButtonText: 'Cancel',
|
||||
confirmButtonColor: '#C89666',
|
||||
cancelButtonColor: '#6c757d'
|
||||
cancelButtonColor: '#6c757d',
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
const recoveryWords = this.generateRecoveryWords();
|
||||
@ -246,12 +241,16 @@ private exportRecovery(): void {
|
||||
title: 'Your Recovery Words',
|
||||
html: `
|
||||
<div class="recovery-words-container">
|
||||
${recoveryWords.map((word, index) => `
|
||||
${recoveryWords
|
||||
.map(
|
||||
(word, index) => `
|
||||
<div class="recovery-word">
|
||||
<span class="word-number">${index + 1}.</span>
|
||||
<span class="word">${word}</span>
|
||||
</div>
|
||||
`).join('')}
|
||||
`,
|
||||
)
|
||||
.join('')}
|
||||
</div>
|
||||
<div class="recovery-warning">
|
||||
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',
|
||||
confirmButtonColor: '#C89666',
|
||||
allowOutsideClick: false,
|
||||
allowEscapeKey: false
|
||||
allowEscapeKey: false,
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
// Stocker l'état du bouton dans le localStorage
|
||||
@ -277,13 +276,10 @@ private exportRecovery(): void {
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private generateRecoveryWords(): string[] {
|
||||
const wordsList = [
|
||||
'apple', 'banana', 'orange', 'grape', 'kiwi', 'mango', 'peach', 'plum',
|
||||
'lemon', 'lime', 'cherry', 'melon', 'pear', 'fig', 'date', 'berry'
|
||||
];
|
||||
private generateRecoveryWords(): string[] {
|
||||
const wordsList = ['apple', 'banana', 'orange', 'grape', 'kiwi', 'mango', 'peach', 'plum', 'lemon', 'lime', 'cherry', 'melon', 'pear', 'fig', 'date', 'berry'];
|
||||
const recoveryWords: string[] = [];
|
||||
while (recoveryWords.length < 4) {
|
||||
const randomWord = wordsList[Math.floor(Math.random() * wordsList.length)];
|
||||
@ -292,9 +288,9 @@ private generateRecoveryWords(): string[] {
|
||||
}
|
||||
}
|
||||
return recoveryWords;
|
||||
}
|
||||
}
|
||||
|
||||
private exportUserData(): void {
|
||||
private exportUserData(): void {
|
||||
const data: { [key: string]: string | null } = {};
|
||||
for (let i = 0; i < localStorage.length; i++) {
|
||||
const key = localStorage.key(i);
|
||||
@ -314,9 +310,9 @@ private exportUserData(): void {
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
}
|
||||
|
||||
private updateActionButtons(): void {
|
||||
private updateActionButtons(): void {
|
||||
const buttonContainer = document.querySelector('.button-container');
|
||||
if (!buttonContainer) return;
|
||||
|
||||
@ -326,9 +322,9 @@ private updateActionButtons(): void {
|
||||
<button onclick="${this.getCancelFunction()}" class="action-button cancel-button">✗</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
private getConfirmFunction(): string {
|
||||
private getConfirmFunction(): string {
|
||||
switch (currentMode) {
|
||||
case 'wallet':
|
||||
return 'window.confirmWalletRow()';
|
||||
@ -337,9 +333,9 @@ private getConfirmFunction(): string {
|
||||
default:
|
||||
return 'window.confirmRow()';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private getCancelFunction(): string {
|
||||
private getCancelFunction(): string {
|
||||
switch (currentMode) {
|
||||
case 'wallet':
|
||||
return 'window.cancelWalletRow()';
|
||||
@ -348,10 +344,10 @@ private getCancelFunction(): string {
|
||||
default:
|
||||
return 'window.cancelRow()';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fonctions de gestion des tableaux
|
||||
private addRow(): void {
|
||||
// Fonctions de gestion des tableaux
|
||||
private addRow(): void {
|
||||
if (isAddingRow) return;
|
||||
|
||||
isAddingRow = true;
|
||||
@ -390,14 +386,16 @@ private addRow(): void {
|
||||
deleteCell.style.width = '40px';
|
||||
|
||||
this.updateActionButtons();
|
||||
}
|
||||
}
|
||||
|
||||
// Fonctions de mise à jour de l'interface
|
||||
private updateTableContent(rows: Row[]): void {
|
||||
// Fonctions de mise à jour de l'interface
|
||||
private updateTableContent(rows: Row[]): void {
|
||||
const tbody = document.querySelector('#pairing-table tbody');
|
||||
if (!tbody) return;
|
||||
|
||||
tbody.innerHTML = rows.map(row => `
|
||||
tbody.innerHTML = rows
|
||||
.map(
|
||||
(row) => `
|
||||
<tr>
|
||||
<td>${row.column1}</td>
|
||||
<td class="device-name" onclick="window.editDeviceName(this)">${row.column2}</td>
|
||||
@ -408,19 +406,19 @@ private updateTableContent(rows: Row[]): void {
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
}
|
||||
|
||||
|
||||
|
||||
private confirmRow(): void {
|
||||
private confirmRow(): void {
|
||||
if (!currentRow) return;
|
||||
|
||||
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
|
||||
if (values.some(value => value === '')) {
|
||||
if (values.some((value) => value === '')) {
|
||||
showAlert('Please fill in all fields');
|
||||
return;
|
||||
}
|
||||
@ -434,7 +432,7 @@ private confirmRow(): void {
|
||||
const newRow: Row = {
|
||||
column1: values[0],
|
||||
column2: values[1],
|
||||
column3: values[2]
|
||||
column3: values[2],
|
||||
};
|
||||
|
||||
const storageKey = STORAGE_KEYS[currentMode];
|
||||
@ -447,9 +445,9 @@ private confirmRow(): void {
|
||||
|
||||
this.resetButtonContainer();
|
||||
this.updateTableContent(rows);
|
||||
}
|
||||
}
|
||||
|
||||
private cancelRow(): void {
|
||||
private cancelRow(): void {
|
||||
if (!currentRow) return;
|
||||
|
||||
currentRow.remove();
|
||||
@ -457,18 +455,18 @@ private cancelRow(): void {
|
||||
currentRow = null;
|
||||
|
||||
this.resetButtonContainer();
|
||||
}
|
||||
}
|
||||
|
||||
private resetButtonContainer(): void {
|
||||
private resetButtonContainer(): void {
|
||||
const buttonContainer = document.querySelector('.button-container');
|
||||
if (!buttonContainer) return;
|
||||
|
||||
buttonContainer.innerHTML = `
|
||||
<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');
|
||||
if (!row) return;
|
||||
|
||||
@ -499,9 +497,9 @@ private deleteRow(button: HTMLButtonElement): void {
|
||||
rows.splice(index, 1);
|
||||
localStorage.setItem(storageKey, JSON.stringify(rows));
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
private editDeviceName(cell: HTMLTableCellElement): void {
|
||||
private editDeviceName(cell: HTMLTableCellElement): void {
|
||||
if (cell.classList.contains('editing')) return;
|
||||
|
||||
const currentValue = cell.textContent || '';
|
||||
@ -521,9 +519,9 @@ private editDeviceName(cell: HTMLTableCellElement): void {
|
||||
cell.appendChild(input);
|
||||
cell.classList.add('editing');
|
||||
input.focus();
|
||||
}
|
||||
}
|
||||
|
||||
private finishEditing(cell: HTMLTableCellElement, input: HTMLInputElement): void {
|
||||
private finishEditing(cell: HTMLTableCellElement, input: HTMLInputElement): void {
|
||||
const newValue = input.value.trim();
|
||||
if (newValue === '') {
|
||||
cell.textContent = cell.getAttribute('data-original-value') || '';
|
||||
@ -548,9 +546,9 @@ private finishEditing(cell: HTMLTableCellElement, input: HTMLInputElement): void
|
||||
|
||||
cell.textContent = newValue;
|
||||
cell.classList.remove('editing');
|
||||
}
|
||||
// Fonction pour gérer le téléchargement de l'avatar
|
||||
private handleAvatarUpload(event: Event): void {
|
||||
}
|
||||
// Fonction pour gérer le téléchargement de l'avatar
|
||||
private handleAvatarUpload(event: Event): void {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
|
||||
@ -568,10 +566,9 @@ private handleAvatarUpload(event: Event): void {
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private showProcess(): void {
|
||||
private showProcess(): void {
|
||||
//console.log("showProcess called");
|
||||
currentMode = 'process';
|
||||
this.hideAllContent();
|
||||
@ -601,14 +598,16 @@ private showProcess(): void {
|
||||
// Utiliser mockProcessRows au lieu du localStorage
|
||||
this.updateProcessTableContent(mockProcessRows);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fonction utilitaire pour mettre à jour le contenu du tableau Process
|
||||
private updateProcessTableContent(rows: any[]): void {
|
||||
// Fonction utilitaire pour mettre à jour le contenu du tableau Process
|
||||
private updateProcessTableContent(rows: any[]): void {
|
||||
const tbody = document.querySelector('#process-table tbody');
|
||||
if (!tbody) return;
|
||||
|
||||
tbody.innerHTML = rows.map(row => `
|
||||
tbody.innerHTML = rows
|
||||
.map(
|
||||
(row) => `
|
||||
<tr>
|
||||
<td>${row.process}</td>
|
||||
<td>${row.role}</td>
|
||||
@ -621,19 +620,21 @@ private updateProcessTableContent(rows: any[]): void {
|
||||
</div>
|
||||
</td>
|
||||
</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;
|
||||
|
||||
const modal = document.createElement('div');
|
||||
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'}"
|
||||
onclick="window.markAsRead('${processName}', ${msg.id}, this)">
|
||||
<div class="notification-status">
|
||||
@ -644,7 +645,9 @@ private showProcessNotifications(processName: string): void {
|
||||
<small>${msg.date}</small>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
|
||||
if (process.notification.messages.length === 0) {
|
||||
notificationsList = '<p>No notifications</p>';
|
||||
@ -674,17 +677,15 @@ private showProcessNotifications(processName: string): void {
|
||||
modal.remove();
|
||||
this.showProcess(); // Rafraîchir l'affichage pour mettre à jour les compteurs
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private handleLogout(): void {
|
||||
private handleLogout(): void {
|
||||
localStorage.clear();
|
||||
window.location.href = '../login/login.html';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Fonctions de gestion des contrats
|
||||
private showContractPopup(contractId: string) {
|
||||
// Fonctions de gestion des contrats
|
||||
private showContractPopup(contractId: string) {
|
||||
// Empêcher la navigation par défaut
|
||||
event?.preventDefault();
|
||||
// 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>Terms:</strong></p>
|
||||
<ul>
|
||||
${contract.terms.map(term => `<li>${term}</li>`).join('')}
|
||||
${contract.terms.map((term) => `<li>${term}</li>`).join('')}
|
||||
</ul>
|
||||
<p><strong>Content:</strong> ${contract.content}</p>
|
||||
</div>
|
||||
@ -724,25 +725,23 @@ private showContractPopup(contractId: string) {
|
||||
popup.addEventListener('click', (e) => {
|
||||
if (e.target === popup) closePopup();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Ajouter à l'objet window
|
||||
// Ajouter à l'objet window
|
||||
|
||||
|
||||
// Fonction utilitaire pour cacher tous les contenus
|
||||
private hideAllContent(): void {
|
||||
// Fonction utilitaire pour cacher tous les contenus
|
||||
private hideAllContent(): void {
|
||||
const contents = ['pairing-content', 'wallet-content', 'process-content', 'data-content'];
|
||||
contents.forEach(id => {
|
||||
contents.forEach((id) => {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Fonctions d'affichage des sections
|
||||
private showPairing(): void {
|
||||
}
|
||||
|
||||
// Fonctions d'affichage des sections
|
||||
private showPairing(): void {
|
||||
isAddingRow = false;
|
||||
currentRow = null;
|
||||
|
||||
@ -756,7 +755,6 @@ private showPairing(): void {
|
||||
headerElement.textContent = 'Pairing';
|
||||
}
|
||||
|
||||
|
||||
// Afficher le contenu de pairing
|
||||
const pairingContent = document.getElementById('pairing-content');
|
||||
|
||||
@ -786,9 +784,9 @@ private showPairing(): void {
|
||||
const rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.pairing) || '[]');
|
||||
this.updateTableContent(rows);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private showWallet(): void {
|
||||
private showWallet(): void {
|
||||
isAddingRow = false;
|
||||
currentRow = null;
|
||||
|
||||
@ -823,23 +821,26 @@ private showWallet(): void {
|
||||
|
||||
const rows = JSON.parse(localStorage.getItem(STORAGE_KEYS.wallet) || '[]');
|
||||
this.updateWalletTableContent(rows);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private updateWalletTableContent(rows: WalletRow[]): void {
|
||||
private updateWalletTableContent(rows: WalletRow[]): void {
|
||||
const tbody = document.querySelector('#wallet-table tbody');
|
||||
if (!tbody) return;
|
||||
|
||||
tbody.innerHTML = rows.map(row => `
|
||||
tbody.innerHTML = rows
|
||||
.map(
|
||||
(row) => `
|
||||
<tr>
|
||||
<td>${row.column1}</td>
|
||||
<td>${row.column2}</td>
|
||||
<td class="device-name" onclick="editDeviceName(this)">${row.column3}</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
}
|
||||
|
||||
private showData(): void {
|
||||
private showData(): void {
|
||||
//console.log("showData called");
|
||||
currentMode = 'data';
|
||||
this.hideAllContent();
|
||||
@ -872,10 +873,10 @@ private showData(): void {
|
||||
const rows = mockDataRows || JSON.parse(localStorage.getItem(STORAGE_KEYS.data) || '[]');
|
||||
this.updateDataTableContent(rows);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fonctions de gestion du wallet
|
||||
private addWalletRow(): void {
|
||||
// Fonctions de gestion du wallet
|
||||
private addWalletRow(): void {
|
||||
if (isAddingRow) return;
|
||||
isAddingRow = true;
|
||||
|
||||
@ -885,7 +886,7 @@ private addWalletRow(): void {
|
||||
currentRow = table.insertRow();
|
||||
const placeholders = ['Label', 'Wallet', 'Type'];
|
||||
|
||||
placeholders.forEach(placeholder => {
|
||||
placeholders.forEach((placeholder) => {
|
||||
const cell = currentRow!.insertCell();
|
||||
const input = document.createElement('input');
|
||||
input.type = 'text';
|
||||
@ -906,19 +907,19 @@ private addWalletRow(): void {
|
||||
`;
|
||||
|
||||
this.updateActionButtons();
|
||||
}
|
||||
}
|
||||
|
||||
private confirmWalletRow(): void {
|
||||
private confirmWalletRow(): void {
|
||||
if (!currentRow) return;
|
||||
|
||||
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) {
|
||||
const newRow: WalletRow = {
|
||||
column1: inputs[0].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) || '[]');
|
||||
@ -931,9 +932,9 @@ private confirmWalletRow(): void {
|
||||
} else {
|
||||
showAlert('Please complete all fields before confirming.');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private cancelWalletRow(): void {
|
||||
private cancelWalletRow(): void {
|
||||
if (!currentRow) return;
|
||||
|
||||
currentRow.remove();
|
||||
@ -947,15 +948,15 @@ private cancelWalletRow(): void {
|
||||
buttonContainer.innerHTML = `
|
||||
<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');
|
||||
if (!tbody) return;
|
||||
|
||||
tbody.innerHTML = rows.map(row => `
|
||||
tbody.innerHTML = rows
|
||||
.map(
|
||||
(row) => `
|
||||
<tr>
|
||||
<td>${row.column1}</td>
|
||||
<td>${row.column2}</td>
|
||||
@ -966,11 +967,13 @@ private updateDataTableContent(rows: DataRow[]): void {
|
||||
<a href="#" onclick="showContractPopup('${row.column6}')">${row.column6}</a>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('');
|
||||
}
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
}
|
||||
|
||||
// Fonctions de gestion de l'avatar et de la bannière
|
||||
private openAvatarPopup(): void {
|
||||
// Fonctions de gestion de l'avatar et de la bannière
|
||||
private openAvatarPopup(): void {
|
||||
const popup = document.getElementById('avatar-popup');
|
||||
if (!popup) return;
|
||||
|
||||
@ -1052,9 +1055,9 @@ private openAvatarPopup(): void {
|
||||
exportRecoveryBtn.style.cursor = 'not-allowed';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private setupEventListeners(popup: HTMLElement): void {
|
||||
private setupEventListeners(popup: HTMLElement): void {
|
||||
// Gestionnaire pour la fermeture
|
||||
const closeBtn = popup.querySelector('.close-popup');
|
||||
if (closeBtn) {
|
||||
@ -1141,14 +1144,14 @@ private setupEventListeners(popup: HTMLElement): void {
|
||||
if (navLastName) navLastName.textContent = newLastName;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private closeAvatarPopup(): void {
|
||||
private closeAvatarPopup(): void {
|
||||
const popup = document.querySelector('.avatar-popup');
|
||||
if (popup) popup.remove();
|
||||
}
|
||||
}
|
||||
|
||||
private loadAvatar(): void {
|
||||
private loadAvatar(): void {
|
||||
const savedAvatar = localStorage.getItem('userAvatar');
|
||||
if (savedAvatar) {
|
||||
const avatarImg = document.querySelector('.avatar') as HTMLImageElement;
|
||||
@ -1156,9 +1159,9 @@ private loadAvatar(): void {
|
||||
avatarImg.src = savedAvatar;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private loadUserInfo(): void {
|
||||
private loadUserInfo(): void {
|
||||
const savedName = localStorage.getItem('userName');
|
||||
const savedLastName = localStorage.getItem('userLastName');
|
||||
|
||||
@ -1181,8 +1184,7 @@ private loadUserInfo(): void {
|
||||
|
||||
this.loadAvatar();
|
||||
this.loadSavedBanner();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
private updateNavbarName(name: string): void {
|
||||
const nameElement = document.querySelector('.nav-wrapper .user-name');
|
||||
@ -1198,15 +1200,13 @@ private loadUserInfo(): void {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
private initializeEventListeners() {
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
this.showPairing();
|
||||
});
|
||||
|
||||
const editableFields = document.querySelectorAll<HTMLElement>('.editable');
|
||||
editableFields.forEach(field => {
|
||||
editableFields.forEach((field) => {
|
||||
field.addEventListener('click', () => {
|
||||
if (!field.classList.contains('editing')) {
|
||||
const currentValue = field.textContent || '';
|
||||
@ -1234,7 +1234,6 @@ private loadUserInfo(): void {
|
||||
this.loadSavedBanner();
|
||||
this.loadUserInfo();
|
||||
|
||||
|
||||
const savedAvatar = localStorage.getItem('userAvatar');
|
||||
const savedBanner = localStorage.getItem('userBanner');
|
||||
const savedName = localStorage.getItem('userName');
|
||||
@ -1261,6 +1260,3 @@ private loadUserInfo(): void {
|
||||
|
||||
customElements.define('account-element', AccountElement);
|
||||
export { AccountElement };
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
import { ChatElement } from './chat';
|
||||
import chatCss from '../../../public/style/chat.css?raw'
|
||||
import Services from '../../services/service.js'
|
||||
import chatCss from '../../../public/style/chat.css?raw';
|
||||
import Services from '../../services/service.js';
|
||||
|
||||
class ChatComponent extends HTMLElement {
|
||||
_callback: any
|
||||
_callback: any;
|
||||
chatElement: ChatElement | null = null;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
console.log('INIT')
|
||||
console.log('INIT');
|
||||
this.attachShadow({ mode: 'open' });
|
||||
|
||||
this.chatElement = this.shadowRoot?.querySelector('chat-element') || null;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
console.log('CALLBACKs')
|
||||
console.log('CALLBACKs');
|
||||
this.render();
|
||||
this.fetchData();
|
||||
|
||||
@ -28,7 +28,7 @@ class ChatComponent extends HTMLElement {
|
||||
if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
|
||||
const data = await (window as any).myService?.getProcesses();
|
||||
} else {
|
||||
const service = await Services.getInstance()
|
||||
const service = await Services.getInstance();
|
||||
const data = await service.getProcesses();
|
||||
}
|
||||
}
|
||||
@ -46,7 +46,7 @@ class ChatComponent extends HTMLElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
if(this.shadowRoot) {
|
||||
if (this.shadowRoot) {
|
||||
// Créer l'élément chat-element
|
||||
const chatElement = document.createElement('chat-element');
|
||||
this.shadowRoot.innerHTML = `<style>${chatCss}</style>`;
|
||||
@ -55,5 +55,5 @@ class ChatComponent extends HTMLElement {
|
||||
}
|
||||
}
|
||||
|
||||
export { ChatComponent }
|
||||
export { ChatComponent };
|
||||
customElements.define('chat-component', ChatComponent);
|
||||
|
||||
@ -1,15 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Messagerie</title>
|
||||
<link rel="stylesheet" href="../../public/style/chat.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<link rel="stylesheet" href="../../public/style/chat.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Main content-->
|
||||
<div class="container">
|
||||
<!-- List of groups -->
|
||||
@ -33,21 +31,18 @@
|
||||
<label for="file-input" class="attachment-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
|
||||
<button id="send-button">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script type="module" src="./chat.ts?ts"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -9,16 +9,12 @@ declare global {
|
||||
import { groupsMock } from '../../mocks/mock-signature/groupsMock';
|
||||
import { messagesMock as initialMessagesMock, messagesMock } from '../../mocks/mock-signature/messagesMock';
|
||||
import { membersMock } from '../../mocks/mock-signature/membersMocks';
|
||||
import {
|
||||
Message,
|
||||
DocumentSignature,
|
||||
} from '../../models/signature.models';
|
||||
import { Message, DocumentSignature } from '../../models/signature.models';
|
||||
import { messageStore } from '../../utils/messageMock';
|
||||
import { Member } from '../../interface/memberInterface';
|
||||
import { Group } from '../../interface/groupInterface';
|
||||
import { getCorrectDOM } from '../../utils/document.utils';
|
||||
|
||||
|
||||
let currentUser: Member = membersMock[0];
|
||||
|
||||
interface LocalNotification {
|
||||
@ -44,13 +40,12 @@ class ChatElement extends HTMLElement {
|
||||
private notificationBoard = document.getElementById('notification-board');
|
||||
private notificationBell = document.getElementById('notification-bell');
|
||||
private selectedSignatories: DocumentSignature[] = [];
|
||||
private allMembers = membersMock.map(member => ({
|
||||
private allMembers = membersMock.map((member) => ({
|
||||
id: member.id,
|
||||
name: member.name,
|
||||
roleName: 'Default Role'
|
||||
roleName: 'Default Role',
|
||||
}));
|
||||
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
@ -62,9 +57,7 @@ class ChatElement extends HTMLElement {
|
||||
|
||||
// Initialiser les événements de notification
|
||||
document.addEventListener('click', (event: Event): void => {
|
||||
if (this.notificationBoard && this.notificationBoard.style.display === 'block' &&
|
||||
!this.notificationBoard.contains(event.target as Node) &&
|
||||
this.notificationBell && !this.notificationBell.contains(event.target as Node)) {
|
||||
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.style.display = 'none';
|
||||
}
|
||||
});
|
||||
@ -142,14 +135,13 @@ class ChatElement extends HTMLElement {
|
||||
(this.notificationBadge as HTMLElement).style.display = count > 0 ? 'block' : 'none';
|
||||
}
|
||||
|
||||
|
||||
// Add notification
|
||||
private addNotification(memberId: string, message: Message) {
|
||||
// Creating a new notification
|
||||
const notification = {
|
||||
memberId,
|
||||
text: `New message from Member ${memberId}: ${message.text}`,
|
||||
time: message.time
|
||||
time: message.time,
|
||||
};
|
||||
|
||||
// Added notification to list and interface
|
||||
@ -158,7 +150,7 @@ class ChatElement extends HTMLElement {
|
||||
this.updateNotificationBadge();
|
||||
}
|
||||
|
||||
// Send a messsage
|
||||
// Send a messsage
|
||||
private sendMessage() {
|
||||
const messageInput = document.getElementById('message-input') as HTMLInputElement;
|
||||
if (!messageInput) return;
|
||||
@ -170,10 +162,10 @@ class ChatElement extends HTMLElement {
|
||||
|
||||
const newMessage: Message = {
|
||||
id: Date.now(),
|
||||
sender: "4NK",
|
||||
sender: '4NK',
|
||||
text: messageText,
|
||||
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
|
||||
type: 'text' as const
|
||||
type: 'text' as const,
|
||||
};
|
||||
// Add and display the message immediately
|
||||
messageStore.addMessage(this.selectedMemberId, newMessage);
|
||||
@ -200,22 +192,21 @@ class ChatElement extends HTMLElement {
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}
|
||||
|
||||
|
||||
// Load the list of members
|
||||
private loadMemberChat(memberId: string | number) {
|
||||
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
|
||||
let memberInfo = { processName: '', roleName: '', memberName: '' };
|
||||
groupsMock.forEach(process => {
|
||||
process.roles.forEach(role => {
|
||||
const member = role.members.find(m => String(m.id) === String(memberId));
|
||||
groupsMock.forEach((process) => {
|
||||
process.roles.forEach((role) => {
|
||||
const member = role.members.find((m) => String(m.id) === String(memberId));
|
||||
if (member) {
|
||||
memberInfo = {
|
||||
processName: process.name,
|
||||
roleName: role.name,
|
||||
memberName: member.name
|
||||
memberName: member.name,
|
||||
};
|
||||
}
|
||||
});
|
||||
@ -241,7 +232,7 @@ class ChatElement extends HTMLElement {
|
||||
messageContent.classList.add('user');
|
||||
} else {
|
||||
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');
|
||||
}
|
||||
}
|
||||
@ -251,11 +242,10 @@ class ChatElement extends HTMLElement {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
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');
|
||||
if (memberList) {
|
||||
(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.className = 'member-list';
|
||||
|
||||
role.members.forEach(member => {
|
||||
role.members.forEach((member) => {
|
||||
const memberItem = document.createElement('li');
|
||||
memberItem.textContent = member.name;
|
||||
|
||||
@ -280,7 +270,6 @@ class ChatElement extends HTMLElement {
|
||||
roleElement.appendChild(memberList);
|
||||
}
|
||||
|
||||
|
||||
// Toggle the list of Roles
|
||||
private toggleRoles(group: Group, groupElement: HTMLElement) {
|
||||
console.log('=== toggleRoles START ===');
|
||||
@ -292,7 +281,7 @@ class ChatElement extends HTMLElement {
|
||||
|
||||
if (roleList) {
|
||||
const roleItems = roleList.querySelectorAll('.role-item');
|
||||
roleItems.forEach(roleItem => {
|
||||
roleItems.forEach((roleItem) => {
|
||||
console.log('Processing roleItem:', roleItem.innerHTML); // Voir le contenu HTML complet
|
||||
|
||||
let container = roleItem.querySelector('.role-item-container');
|
||||
@ -325,9 +314,12 @@ class ChatElement extends HTMLElement {
|
||||
folderButton.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
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) {
|
||||
console.log('Found role:', role);
|
||||
} else {
|
||||
@ -340,17 +332,15 @@ class ChatElement extends HTMLElement {
|
||||
}
|
||||
});
|
||||
|
||||
(roleList as HTMLElement).style.display =
|
||||
(roleList as HTMLElement).style.display === 'none' ? 'block' : 'none';
|
||||
(roleList as HTMLElement).style.display = (roleList as HTMLElement).style.display === 'none' ? 'block' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private loadGroupList(): void {
|
||||
const groupList = document.getElementById('group-list');
|
||||
if (!groupList) return;
|
||||
|
||||
groupsMock.forEach(group => {
|
||||
groupsMock.forEach((group) => {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'group-list-item';
|
||||
|
||||
@ -379,7 +369,7 @@ class ChatElement extends HTMLElement {
|
||||
roleList.style.display = 'none';
|
||||
|
||||
// Add roles for this process
|
||||
group.roles.forEach(role => {
|
||||
group.roles.forEach((role) => {
|
||||
const roleItem = document.createElement('li');
|
||||
roleItem.className = 'role-item';
|
||||
roleItem.textContent = role.name;
|
||||
@ -395,14 +385,15 @@ class ChatElement extends HTMLElement {
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Function to manage the list of users
|
||||
private toggleUserList() {
|
||||
const userList = getCorrectDOM('userList');
|
||||
if (!userList) return;
|
||||
|
||||
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}')">
|
||||
<span class="user-avatar">${member.avatar}</span>
|
||||
<div>
|
||||
@ -410,13 +401,15 @@ class ChatElement extends HTMLElement {
|
||||
<span class="user-email">${member.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
`,
|
||||
)
|
||||
.join('');
|
||||
}
|
||||
(userList as HTMLElement).classList.toggle('show');
|
||||
}
|
||||
|
||||
private switchUser(userId: string | number) {
|
||||
const user = membersMock.find(member => member.id === userId);
|
||||
const user = membersMock.find((member) => member.id === userId);
|
||||
if (!user) return;
|
||||
currentUser = user;
|
||||
this.updateCurrentUserDisplay();
|
||||
@ -441,9 +434,9 @@ class ChatElement extends HTMLElement {
|
||||
return {
|
||||
id: Date.now(),
|
||||
sender: senderName,
|
||||
text: "OK...",
|
||||
text: 'OK...',
|
||||
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) {
|
||||
messageStore.addMessage(this.selectedMemberId, {
|
||||
id: Date.now(),
|
||||
sender: "4NK",
|
||||
sender: '4NK',
|
||||
fileName: fileName,
|
||||
fileData: fileData,
|
||||
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
|
||||
type: 'file'
|
||||
type: 'file',
|
||||
});
|
||||
console.log('Message added to store');
|
||||
|
||||
@ -475,8 +468,7 @@ class ChatElement extends HTMLElement {
|
||||
}
|
||||
|
||||
private initializeEventListeners() {
|
||||
document.addEventListener('DOMContentLoaded', (): void => {
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', (): void => {});
|
||||
|
||||
// Gestionnaire d'événements pour le chat
|
||||
const sendBtn = this.shadowRoot?.querySelector('#send-button');
|
||||
@ -533,4 +525,3 @@ class ChatElement extends HTMLElement {
|
||||
|
||||
customElements.define('chat-element', ChatElement);
|
||||
export { ChatElement };
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import loginHtml from './home.html?raw'
|
||||
import loginScript from './home.ts?raw'
|
||||
import loginCss from '../../4nk.css?raw'
|
||||
import loginHtml from './home.html?raw';
|
||||
import loginScript from './home.ts?raw';
|
||||
import loginCss from '../../4nk.css?raw';
|
||||
import { initHomePage } from './home';
|
||||
|
||||
export class LoginComponent extends HTMLElement {
|
||||
@ -11,7 +11,7 @@ export class LoginComponent extends HTMLElement {
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
console.log('CALLBACK LOGIN PAGE')
|
||||
console.log('CALLBACK LOGIN PAGE');
|
||||
this.render();
|
||||
setTimeout(() => {
|
||||
initHomePage();
|
||||
@ -31,7 +31,8 @@ export class LoginComponent extends HTMLElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
if(this.shadowRoot) this.shadowRoot.innerHTML = `
|
||||
if (this.shadowRoot)
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
${loginCss}
|
||||
</style>${loginHtml}
|
||||
|
||||
@ -4,10 +4,10 @@ import { addSubscription } from '../../utils/subscription.utils';
|
||||
import { displayEmojis, generateQRCode } from '../../utils/sp-address.utils';
|
||||
import { getCorrectDOM } from '../../utils/html.utils';
|
||||
import QrScannerComponent from '../../components/qrcode-scanner/qrcode-scanner-component';
|
||||
export {QrScannerComponent}
|
||||
export { QrScannerComponent };
|
||||
export async function initHomePage(): Promise<void> {
|
||||
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) => {
|
||||
addSubscription(tab, 'click', () => {
|
||||
container.querySelectorAll('.tab').forEach((t) => t.classList.remove('active'));
|
||||
@ -34,17 +34,15 @@ export async function openModal(myAddress: string, receiverAddress: string) {
|
||||
// service.setNotification()
|
||||
|
||||
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;
|
||||
if (scannerImg) scannerImg.style.display = 'none';
|
||||
const scannerQrCode = container.querySelector('.qr-code-scanner') as HTMLElement;
|
||||
if (scannerQrCode) scannerQrCode.style.display = 'block';
|
||||
const scanButton = container?.querySelector('#scan-btn') as HTMLElement;
|
||||
if (scanButton) scanButton.style.display = 'none';
|
||||
const reader = container?.querySelector('#qr-reader')
|
||||
if(reader) reader.innerHTML = '<qr-scanner></qr-scanner>'
|
||||
const reader = container?.querySelector('#qr-reader');
|
||||
if (reader) reader.innerHTML = '<qr-scanner></qr-scanner>';
|
||||
}
|
||||
|
||||
(window as any).scanDevice = scanDevice;
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import processHtml from './process-element.html?raw'
|
||||
import processScript from './process-element.ts?raw'
|
||||
import processCss from '../../4nk.css?raw'
|
||||
import processHtml from './process-element.html?raw';
|
||||
import processScript from './process-element.ts?raw';
|
||||
import processCss from '../../4nk.css?raw';
|
||||
import { initProcessElement } from './process-element';
|
||||
|
||||
export class ProcessListComponent extends HTMLElement {
|
||||
@ -14,7 +14,7 @@ export class ProcessListComponent extends HTMLElement {
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
console.log('CALLBACK PROCESS LIST PAGE')
|
||||
console.log('CALLBACK PROCESS LIST PAGE');
|
||||
this.render();
|
||||
setTimeout(() => {
|
||||
initProcessElement(this.id, this.zone);
|
||||
@ -34,7 +34,8 @@ export class ProcessListComponent extends HTMLElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
if(this.shadowRoot) this.shadowRoot.innerHTML = `
|
||||
if (this.shadowRoot)
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
${processCss}
|
||||
</style>${processHtml}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import processHtml from './process.html?raw'
|
||||
import processScript from './process.ts?raw'
|
||||
import processCss from '../../4nk.css?raw'
|
||||
import processHtml from './process.html?raw';
|
||||
import processScript from './process.ts?raw';
|
||||
import processCss from '../../4nk.css?raw';
|
||||
import { init } from './process';
|
||||
|
||||
export class ProcessListComponent extends HTMLElement {
|
||||
@ -11,7 +11,7 @@ export class ProcessListComponent extends HTMLElement {
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
console.log('CALLBACK PROCESS LIST PAGE')
|
||||
console.log('CALLBACK PROCESS LIST PAGE');
|
||||
this.render();
|
||||
setTimeout(() => {
|
||||
init();
|
||||
@ -31,7 +31,8 @@ export class ProcessListComponent extends HTMLElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
if(this.shadowRoot) this.shadowRoot.innerHTML = `
|
||||
if (this.shadowRoot)
|
||||
this.shadowRoot.innerHTML = `
|
||||
<style>
|
||||
${processCss}
|
||||
</style>${processHtml}
|
||||
|
||||
@ -4,7 +4,7 @@ import { getCorrectDOM } from '~/utils/html.utils';
|
||||
|
||||
// Initialize function, create initial tokens with itens that are already selected by the user
|
||||
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;
|
||||
// Create div that wroaps all the elements inside (select, elements selected, search div) to put select inside
|
||||
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 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 inputInderline = container.querySelector('.selected-processes');
|
||||
// Create token wrapper
|
||||
@ -299,7 +299,7 @@ function removeToken(e: Event) {
|
||||
// Remove token attribute
|
||||
(target.parentNode as any)?.remove();
|
||||
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);
|
||||
process?.remove();
|
||||
@ -355,7 +355,7 @@ addSubscription(document, 'click', () => {
|
||||
});
|
||||
|
||||
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) {
|
||||
const cardContent = container.querySelector('.process-card-content');
|
||||
@ -387,7 +387,7 @@ async function showSelectedProcess(elem: MouseEvent) {
|
||||
}
|
||||
|
||||
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 oldSelectedProcess = container.querySelector('.selected-process-zone');
|
||||
oldSelectedProcess?.classList.remove('selected-process-zone');
|
||||
@ -399,7 +399,7 @@ function select(event: Event) {
|
||||
}
|
||||
|
||||
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');
|
||||
console.log('🚀 ~ goToProcessPage ~ event:', target);
|
||||
@ -426,8 +426,8 @@ async function getProcesses(): Promise<any[]> {
|
||||
|
||||
const res = Object.entries(processes).map(([key, value]) => ({
|
||||
key,
|
||||
value
|
||||
}))
|
||||
value,
|
||||
}));
|
||||
|
||||
return res;
|
||||
}
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
import { SignatureElement } from './signature';
|
||||
import signatureCss from '../../../public/style/signature.css?raw'
|
||||
import Services from '../../services/service.js'
|
||||
import signatureCss from '../../../public/style/signature.css?raw';
|
||||
import Services from '../../services/service.js';
|
||||
|
||||
class SignatureComponent extends HTMLElement {
|
||||
_callback: any
|
||||
_callback: any;
|
||||
signatureElement: SignatureElement | null = null;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
console.log('INIT')
|
||||
console.log('INIT');
|
||||
this.attachShadow({ mode: 'open' });
|
||||
|
||||
this.signatureElement = this.shadowRoot?.querySelector('signature-element') || null;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
console.log('CALLBACKs')
|
||||
console.log('CALLBACKs');
|
||||
this.render();
|
||||
this.fetchData();
|
||||
|
||||
@ -28,7 +28,7 @@ class SignatureComponent extends HTMLElement {
|
||||
if ((import.meta as any).env.VITE_IS_INDEPENDANT_LIB === false) {
|
||||
const data = await (window as any).myService?.getProcesses();
|
||||
} else {
|
||||
const service = await Services.getInstance()
|
||||
const service = await Services.getInstance();
|
||||
const data = await service.getProcesses();
|
||||
}
|
||||
}
|
||||
@ -46,7 +46,7 @@ class SignatureComponent extends HTMLElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
if(this.shadowRoot) {
|
||||
if (this.shadowRoot) {
|
||||
// Créer l'élément signature-element
|
||||
const signatureElement = document.createElement('signature-element');
|
||||
this.shadowRoot.innerHTML = `<style>${signatureCss}</style>`;
|
||||
@ -55,5 +55,5 @@ class SignatureComponent extends HTMLElement {
|
||||
}
|
||||
}
|
||||
|
||||
export { SignatureComponent }
|
||||
export { SignatureComponent };
|
||||
customElements.define('signature-component', SignatureComponent);
|
||||
|
||||
@ -1,22 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Signatures</title>
|
||||
<link rel="stylesheet" href="../../../public/style/signature.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<link rel="stylesheet" href="../../../public/style/signature.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Main content-->
|
||||
<div class="container">
|
||||
|
||||
<!-- List of groups -->
|
||||
<div class="group-list">
|
||||
<ul id="group-list">
|
||||
</ul>
|
||||
<ul id="group-list"></ul>
|
||||
</div>
|
||||
|
||||
<!-- Chat area -->
|
||||
@ -33,21 +29,18 @@
|
||||
<label for="file-input" class="attachment-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
|
||||
<button id="send-button">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<script type="module" src="./signature.ts?ts"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -6,7 +6,7 @@ import { cleanSubscriptions } from './utils/subscription.utils';
|
||||
import { LoginComponent } from './pages/home/home-component';
|
||||
import { prepareAndSendPairingTx } from './utils/sp-address.utils';
|
||||
import ModalService from './services/modal.service';
|
||||
export {Services};
|
||||
export { Services };
|
||||
const routes: { [key: string]: string } = {
|
||||
home: '/src/pages/home/home.html',
|
||||
process: '/src/pages/process/process.html',
|
||||
@ -20,7 +20,7 @@ export let currentRoute = '';
|
||||
|
||||
export async function navigate(path: string) {
|
||||
cleanSubscriptions();
|
||||
cleanPage()
|
||||
cleanPage();
|
||||
path = path.replace(/^\//, '');
|
||||
if (path.includes('/')) {
|
||||
const parsedPath = path.split('/')[0];
|
||||
@ -42,14 +42,13 @@ async function handleLocation(path: string) {
|
||||
|
||||
const content = document.getElementById('containerId');
|
||||
if (content) {
|
||||
|
||||
if(path === 'home' ) {
|
||||
const login = LoginComponent
|
||||
if (path === 'home') {
|
||||
const login = LoginComponent;
|
||||
const container = document.querySelector('#containerId');
|
||||
const accountComponent = document.createElement('login-4nk-component');
|
||||
accountComponent.setAttribute('style', 'width: 100vw; height: 100vh; position: relative; grid-row: 2;')
|
||||
if(container) container.appendChild(accountComponent)
|
||||
} else if(path !== 'process') {
|
||||
accountComponent.setAttribute('style', 'width: 100vw; height: 100vh; position: relative; grid-row: 2;');
|
||||
if (container) container.appendChild(accountComponent);
|
||||
} else if (path !== 'process') {
|
||||
const html = await fetch(routeHtml).then((data) => data.text());
|
||||
content.innerHTML = html;
|
||||
}
|
||||
@ -70,8 +69,8 @@ async function handleLocation(path: string) {
|
||||
if (!customElements.get('process-list-4nk-component')) {
|
||||
customElements.define('process-list-4nk-component', ProcessListComponent);
|
||||
}
|
||||
accountComponent.setAttribute('style', 'height: 100vh; position: relative; grid-row: 2; grid-column: 4;')
|
||||
if(container2) container2.appendChild(accountComponent)
|
||||
accountComponent.setAttribute('style', 'height: 100vh; position: relative; grid-row: 2; grid-column: 4;');
|
||||
if (container2) container2.appendChild(accountComponent);
|
||||
break;
|
||||
|
||||
case 'process-element':
|
||||
@ -157,7 +156,7 @@ export async function init(): Promise<void> {
|
||||
setTimeout(async () => {
|
||||
try {
|
||||
// check if we have a shared secret with that address
|
||||
await prepareAndSendPairingTx(pairingAddress)
|
||||
await prepareAndSendPairingTx(pairingAddress);
|
||||
} catch (e) {
|
||||
console.error('Failed to pair:', e);
|
||||
}
|
||||
@ -174,7 +173,7 @@ export async function init(): Promise<void> {
|
||||
|
||||
async function cleanPage() {
|
||||
const container = document.querySelector('#containerId');
|
||||
if(container) container.innerHTML = ''
|
||||
if (container) container.innerHTML = '';
|
||||
}
|
||||
|
||||
async function injectHeader() {
|
||||
|
||||
@ -1,20 +1,8 @@
|
||||
const addResourcesToCache = async (resources) => {
|
||||
const cache = await caches.open("v1");
|
||||
const cache = await caches.open('v1');
|
||||
await cache.addAll(resources);
|
||||
};
|
||||
};
|
||||
|
||||
self.addEventListener("install", (event) => {
|
||||
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",
|
||||
]),
|
||||
);
|
||||
});
|
||||
self.addEventListener('install', (event) => {
|
||||
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']));
|
||||
});
|
||||
|
||||
@ -9,21 +9,21 @@ self.addEventListener('activate', (event) => {
|
||||
// Event listener for messages from clients
|
||||
self.addEventListener('message', async (event) => {
|
||||
const data = event.data;
|
||||
if(data.type === 'START') {
|
||||
if (data.type === 'START') {
|
||||
const fetchNotifications = async () => {
|
||||
const itemsWithFlag = await getAllItemsWithFlag();
|
||||
|
||||
// Process items with the specific flag
|
||||
itemsWithFlag?.forEach(item => {
|
||||
itemsWithFlag?.forEach((item) => {
|
||||
console.log(item); // Do something with each flagged item
|
||||
});
|
||||
|
||||
event.ports[0].postMessage({
|
||||
type: "NOTIFICATIONS",
|
||||
data: itemsWithFlag
|
||||
type: 'NOTIFICATIONS',
|
||||
data: itemsWithFlag,
|
||||
});
|
||||
}
|
||||
fetchNotifications()
|
||||
};
|
||||
fetchNotifications();
|
||||
setInterval(fetchNotifications, 2 * 60 * 1000);
|
||||
}
|
||||
|
||||
@ -100,13 +100,13 @@ async function getAllItemsWithFlag() {
|
||||
const request = store.getAll();
|
||||
request.onsuccess = (event) => {
|
||||
const allItems = event.target.result;
|
||||
const itemsWithFlag = allItems.filter(item => !item.need_validation);
|
||||
const itemsWithFlag = allItems.filter((item) => item.need_validation);
|
||||
|
||||
const processMap = {};
|
||||
|
||||
for (const diff of itemsWithFlag) {
|
||||
const currentProcess = allProcesses.find(item => {
|
||||
return item.states.some(state => state.merkle_root === diff.new_state_merkle_root);
|
||||
const currentProcess = allProcesses.find((item) => {
|
||||
return item.states.some((state) => state.merkle_root === diff.new_state_merkle_root);
|
||||
});
|
||||
|
||||
if (currentProcess) {
|
||||
@ -116,18 +116,25 @@ async function getAllItemsWithFlag() {
|
||||
processMap[processKey] = {
|
||||
process: currentProcess.states,
|
||||
processId: currentProcess.key,
|
||||
diffs: []
|
||||
diffs: [],
|
||||
};
|
||||
}
|
||||
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 {
|
||||
process: entry.process,
|
||||
processId: entry.processId,
|
||||
diffs: entry.diffs
|
||||
diffs: diffs,
|
||||
};
|
||||
});
|
||||
|
||||
@ -139,4 +146,3 @@ async function getAllItemsWithFlag() {
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import Services from "./service";
|
||||
import Services from './service';
|
||||
|
||||
class Database {
|
||||
private static instance: Database;
|
||||
@ -31,9 +31,9 @@ class Database {
|
||||
},
|
||||
AnkDiff: {
|
||||
name: 'diffs',
|
||||
options: { key: 'new_state_merkle_root'},
|
||||
indices: []
|
||||
}
|
||||
options: { key: 'new_state_merkle_root' },
|
||||
indices: [],
|
||||
},
|
||||
};
|
||||
|
||||
// Private constructor to prevent direct instantiation from outside
|
||||
@ -144,11 +144,11 @@ class Database {
|
||||
}
|
||||
|
||||
private handleAddObjectResponse = async (event: MessageEvent) => {
|
||||
const data = event.data
|
||||
const data = event.data;
|
||||
console.log('Received response from service worker (ADD_OBJECT):', data);
|
||||
if(data.type === 'NOTIFICATIONS') {
|
||||
const service = await Services.getInstance()
|
||||
service.setNotifications(data.data)
|
||||
if (data.type === 'NOTIFICATIONS') {
|
||||
const service = await Services.getInstance();
|
||||
service.setNotifications(data.data);
|
||||
}
|
||||
};
|
||||
|
||||
@ -201,7 +201,7 @@ class Database {
|
||||
getRequest.onsuccess = () => resolve(getRequest.result);
|
||||
getRequest.onerror = () => reject(getRequest.error);
|
||||
});
|
||||
return result
|
||||
return result;
|
||||
}
|
||||
|
||||
public async dumpStore(storeName: string): Promise<Record<string, any>> {
|
||||
@ -227,9 +227,8 @@ class Database {
|
||||
// Combine keys and values into an object
|
||||
const result: Record<string, any> = Object.fromEntries(keys.map((key, index) => [key, values[index]]));
|
||||
return result;
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error fetching data from IndexedDB:", error);
|
||||
console.error('Error fetching data from IndexedDB:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 validationModalStyle from '../components/validation-modal/validation-modal.css?raw';
|
||||
import Services from './service';
|
||||
import { navigate } from '../router';
|
||||
import { init, navigate } from '../router';
|
||||
import { addressToEmoji } from '../utils/sp-address.utils';
|
||||
import { RoleDefinition } from 'pkg/sdk_client';
|
||||
import { initValidationModal } from '~/components/validation-modal/validation-modal';
|
||||
import { interpolate } from '~/utils/html.utils';
|
||||
|
||||
export default class ModalService {
|
||||
private static instance: ModalService;
|
||||
@ -56,28 +58,30 @@ export default class ModalService {
|
||||
const container = document.querySelector('#containerId');
|
||||
if (container) {
|
||||
let html = await fetch('/src/components/validation-modal/validation-modal.html').then((res) => res.text());
|
||||
html = interpolate(html, {processId: processDiff.processId})
|
||||
container.innerHTML += html;
|
||||
|
||||
// Dynamically load the header JS
|
||||
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.type = 'module';
|
||||
document.head.appendChild(script);
|
||||
const css = document.createElement('style');
|
||||
css.id = 'validation-modal-css'
|
||||
css.id = 'validation-modal-css';
|
||||
css.innerText = validationModalStyle;
|
||||
document.head.appendChild(css);
|
||||
initValidationModal(processDiff)
|
||||
}
|
||||
}
|
||||
|
||||
async closeValidationModal() {
|
||||
const script = document.querySelector('#validation-modal-script')
|
||||
const css = document.querySelector('#validation-modal-css')
|
||||
const component = document.querySelector('#validation-modal')
|
||||
script?.remove()
|
||||
css?.remove()
|
||||
component?.remove()
|
||||
const script = document.querySelector('#validation-modal-script');
|
||||
const css = document.querySelector('#validation-modal-css');
|
||||
const component = document.querySelector('#validation-modal');
|
||||
script?.remove();
|
||||
css?.remove();
|
||||
component?.remove();
|
||||
}
|
||||
|
||||
// this is kind of too specific for pairing though
|
||||
@ -88,7 +92,7 @@ export default class ModalService {
|
||||
const owner = roleDefinition['owner'];
|
||||
members = owner.members;
|
||||
} else {
|
||||
throw new Error('No \"owner\" role');
|
||||
throw new Error('No "owner" role');
|
||||
}
|
||||
|
||||
// pairing specifics
|
||||
@ -145,7 +149,7 @@ export default class ModalService {
|
||||
const createPrdUpdateReturn = service.createPrdUpdate(this.currentPcdCommitment);
|
||||
await service.handleApiReturn(createPrdUpdateReturn);
|
||||
} catch (e) {
|
||||
throw e
|
||||
throw e;
|
||||
}
|
||||
} else {
|
||||
throw new Error('No currentPcdCommitment');
|
||||
@ -156,7 +160,7 @@ export default class ModalService {
|
||||
const approveChangeReturn = service.approveChange(this.currentPcdCommitment!);
|
||||
await service.handleApiReturn(approveChangeReturn);
|
||||
} catch (e) {
|
||||
throw e
|
||||
throw e;
|
||||
}
|
||||
|
||||
try {
|
||||
|
||||
@ -11,6 +11,8 @@ import { storeData, retrieveData } from './storage.service';
|
||||
export const U32_MAX = 4294967295;
|
||||
|
||||
const storageUrl = `http://localhost:8080`;
|
||||
const RELAY_ADDRESS = 'sprt1qqdg4x69xdyhxpz4weuel0985qyswa0x9ycl4q6xc0fngf78jtj27gqj5vff4fvlt3fydx4g7vv0mh7vqv8jncgusp6n2zv860nufdzkyy59pqrdr';
|
||||
const wsurl = `https://demo.4nkweb.com/ws/`;
|
||||
|
||||
export default class Services {
|
||||
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');
|
||||
}
|
||||
|
||||
const members_str = members.map(member => JSON.stringify(member));
|
||||
const members_str = members.map((member) => JSON.stringify(member));
|
||||
|
||||
const waitForAmount = async (): Promise<BigInt> => {
|
||||
let attempts = 3;
|
||||
@ -186,7 +188,7 @@ export default class Services {
|
||||
try {
|
||||
return this.sdkClient.create_response_prd(this.currentProcess, pcdMerkleRoot);
|
||||
} catch (e) {
|
||||
throw e
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
|
||||
@ -344,7 +346,7 @@ export default class Services {
|
||||
try {
|
||||
await this.openConfirmationModal();
|
||||
} 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,
|
||||
});
|
||||
} 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
|
||||
@ -502,7 +504,7 @@ export default class Services {
|
||||
public async saveDiffs(diffs: UserDiff[]) {
|
||||
const db = await Database.getInstance();
|
||||
try {
|
||||
for(const diff of diffs) {
|
||||
for (const diff of diffs) {
|
||||
await db.addObject({
|
||||
storeName: 'diffs',
|
||||
object: diff,
|
||||
@ -510,7 +512,7 @@ export default class Services {
|
||||
});
|
||||
}
|
||||
} 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) {
|
||||
throw e;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public async restoreSecrets() {
|
||||
@ -549,14 +550,13 @@ export default class Services {
|
||||
const sharedSecrets: Record<string, string> = await db.dumpStore('shared_secrets');
|
||||
const unconfirmedSecrets = await db.dumpStore('unconfirmed_secrets');
|
||||
const secretsStore = {
|
||||
'shared_secrets': sharedSecrets,
|
||||
'unconfirmed_secrets': Object.values(unconfirmedSecrets),
|
||||
shared_secrets: sharedSecrets,
|
||||
unconfirmed_secrets: Object.values(unconfirmedSecrets),
|
||||
};
|
||||
this.sdkClient.set_shared_secrets(JSON.stringify(secretsStore));
|
||||
} catch (e) {
|
||||
throw e;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
getNotifications(): any[] | null {
|
||||
@ -583,11 +583,11 @@ export default class Services {
|
||||
// path: '/notif3',
|
||||
// },
|
||||
// ];
|
||||
return this.notifications
|
||||
return this.notifications;
|
||||
}
|
||||
|
||||
setNotifications(notifications: any[]) {
|
||||
this.notifications = notifications
|
||||
this.notifications = notifications;
|
||||
}
|
||||
|
||||
async importJSON(content: any): Promise<void> {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
export function getCorrectDOM(componentTag: string): Node {
|
||||
const dom = document?.querySelector(componentTag)?.shadowRoot || document as Node
|
||||
return dom
|
||||
}
|
||||
const dom = document?.querySelector(componentTag)?.shadowRoot || (document as Node);
|
||||
return dom;
|
||||
}
|
||||
|
||||
@ -3,6 +3,6 @@ export function interpolate(template: string, data: { [key: string]: string }) {
|
||||
}
|
||||
|
||||
export function getCorrectDOM(componentTag: string): Node {
|
||||
const dom = document?.querySelector(componentTag)?.shadowRoot || document as Node
|
||||
return dom
|
||||
const dom = document?.querySelector(componentTag)?.shadowRoot || (document as Node);
|
||||
return dom;
|
||||
}
|
||||
@ -37,13 +37,13 @@ class MessageStore {
|
||||
}
|
||||
|
||||
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) {
|
||||
memberMessages.messages.push(message);
|
||||
} else {
|
||||
this.messages.push({
|
||||
memberId: String(memberId),
|
||||
messages: [message]
|
||||
messages: [message],
|
||||
});
|
||||
}
|
||||
this.saveToLocalStorage();
|
||||
|
||||
@ -100,7 +100,7 @@ export async function displayEmojis(text: string) {
|
||||
|
||||
// Verify Other address
|
||||
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 emojiDisplay = container.querySelector('#emoji-display-2');
|
||||
const okButton = container.querySelector('#okButton') as HTMLButtonElement;
|
||||
@ -148,7 +148,7 @@ export function initAddressInput() {
|
||||
}
|
||||
|
||||
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;
|
||||
try {
|
||||
// Connect to target, if necessary
|
||||
@ -184,7 +184,7 @@ export async function prepareAndSendPairingTx(secondDeviceAddress: string) {
|
||||
|
||||
export async function generateQRCode(spAddress: string) {
|
||||
try {
|
||||
const container = getCorrectDOM('login-4nk-component') as HTMLElement
|
||||
const container = getCorrectDOM('login-4nk-component') as HTMLElement;
|
||||
const currentUrl = 'https://' + window.location.host;
|
||||
const url = await QRCode.toDataURL(currentUrl + '?sp_address=' + spAddress);
|
||||
const qrCode = container?.querySelector('.qr-code img');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user