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

component_ok

Browse Source
This commit is contained in:
Pascal 2024-12-18 13:57:49 +01:00 committed by Sosthene
parent 5e1b22d302
commit 6652354b33
11 changed files with 3897 additions and 3772 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
public/style/account.css
View File

@ -595,10 +595,11 @@ body {
.container {
display: flex;
flex: 1;
height: calc(100% - 4vh);
margin-top: 4vh;
height: 90vh;
margin-top: 9vh;
margin-left: -1%;
text-align: left;
width: 209vh;
}
/* Liste des information sur l'account */
@ -612,6 +613,8 @@ body {
overflow-y: auto;
border-right: 2px solid #2c3e50;
flex-shrink: 0;
padding-right: 10px;
height: 91vh;
}
.parameter-list ul {
@ -640,9 +643,10 @@ body {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
margin: 10px;
margin: 0px;
margin-top: 20px;
margin-left: 0%;
margin-left: 1%;
margin-bottom: -7px;
}
/* En-tête du parametre */
@ -1317,3 +1321,46 @@ body {
.banner-image.clickable:hover {
opacity: 0.8;
}
.parameter-list-ul.profile {
position: relative;
overflow: hidden;
max-height: 200px;
margin-bottom: 20px;
}
.profile-preview {
position: relative;
width: 100%;
height: 100%;
}
.preview-banner {
position: relative;
width: 100%;
height: 120px;
overflow: hidden;
}
.preview-banner-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.preview-info {
position: relative;
display: flex;
align-items: center;
padding: 10px;
gap: 10px;
background: rgba(0, 0, 0, 0.3);
}
.preview-avatar {
width: 45px;
height: 45px;
border-radius: 50%;
border: 2px solid white;
}

12
public/style/chat.css
View File

@ -145,10 +145,11 @@ body {
.container {
display: flex;
flex: 1;
height: calc(100% - 4vh);
margin-top: 4vh;
height: 90vh;
margin-top: 9vh;
margin-left: -1%;
text-align: left;
width: 209vh;
}
@ -164,8 +165,8 @@ body {
border-right: 2px solid #2c3e50;
flex-shrink: 0;
padding-right: 10px;
height: 91vh;
}
.group-list ul {
cursor: pointer;
list-style: none;
@ -198,9 +199,10 @@ body {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
margin: 10px;
margin: 0px;
margin-top: 20px;
margin-left: 0%;
margin-left: 1%;
margin-bottom: -7px;
}
/* En-tête du chat */

13
public/style/signature.css
View File

@ -18,6 +18,8 @@ body {
flex-direction: column;
}
/* 4NK NAVBAR */
.brand-logo {
@ -144,10 +146,11 @@ body {
.container {
display: flex;
flex: 1;
height: calc(100% - 4vh);
margin-top: 4vh;
height: 90vh;
margin-top: 9vh;
margin-left: -1%;
text-align: left;
width: 209vh;
}
@ -163,6 +166,7 @@ body {
border-right: 2px solid #2c3e50;
flex-shrink: 0;
padding-right: 10px;
height: 91vh;
}
.group-list ul {
@ -198,9 +202,10 @@ body {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
margin: 10px;
margin: 0px;
margin-top: 20px;
margin-left: 0%;
margin-left: 1%;
margin-bottom: -7px;
}
/* En-tête du chat */

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

@ -1,12 +0,0 @@
<div class="avatar-section">
<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()" />
</div>
<div class="user-info">
<span class="user-name">John</span>
<span class="user-lastname">Doe</span>
</div>
</div>
</div>

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

@ -1,99 +1,10 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
<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>
<!-- Header Container -->
<div id="header-container"></div>
<!-- Profile Popup -->
<div id="avatar-popup" class="popup">
<div class="popup-content">
<span class="close-popup">&times;</span>
<h2>Profile</h2>
<!-- 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" />
<div class="banner-content">
<div class="avatar-container">
<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>
<span class="editable" id="popup-lastname"></span>
</div>
</div>
</div>
<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" />
</label>
</div>
</div>
<!-- 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" />
<div class="avatar-overlay">
<span>Change Avatar</span>
</div>
</label>
<input type="file" id="avatar-upload" accept="image/*" style="display: none" />
</div>
<!-- User Info Section -->
<div class="popup-info">
<p><strong>Name:</strong> <span class="editable" id="popup-name"></span></p>
<p><strong>Last Name:</strong> <span class="editable" id="popup-lastname"></span></p>
<p><strong>Address:</strong> 🏠 🌍 🗽🎊😩-🎊😑🎄😩</p>
</div>
<!-- Buttons Container -->
<div class="popup-buttons">
<button class="delete-account-btn" onclick="confirmDeleteAccount()">Delete Account</button>
</div>
</div>
</div>
<!-- Main Content -->
<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>
</div>
<!-- Parameter Area -->
<div class="parameter-area">
<div class="content-container">
<div id="pairing-content"></div>
<div id="wallet-content"></div>
<div id="process-content"></div>
<div id="data-content"></div>
</div>
</div>
</div>
<!-- Scripts -->
<script type="module" src="./account.ts?ts"></script>
</body>
</head>
<body>
<account-component></account-component>
<script type="module" src="./account.ts"></script>
</body>
</html>

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

File diff suppressed because it is too large Load Diff

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

@ -1,48 +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" />
<title>Messagerie</title>
<link rel="stylesheet" href="../../public/style/chat.css" />
</head>
<body>
<!-- Main content-->
<div class="container">
<!-- List of groups -->
<div class="group-list">
<ul id="group-list">
<!-- Groups will be added here dynamically -->
</ul>
</div>
<head>
<title>Chat</title>
</head>
<!-- Chat area -->
<div class="chat-area">
<div class="chat-header" id="chat-header">
<!-- Chat title -->
</div>
<div class="messages" id="messages">
<!-- Messages -->
</div>
<body>
<chat-component></chat-component>
<script type="module" src="./chat.ts"></script>
</body>
<!-- Input area -->
<div class="input-area">
<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"
/>
</svg>
</label>
<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>
</html>

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

@ -9,11 +9,16 @@ 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';
import chatStyle from '../../../public/style/chat.css?inline';
let currentUser: Member = membersMock[0];
@ -40,24 +45,64 @@ 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' });
this.messagesMock = messageStore.getMessages();
this.dom = getCorrectDOM('signature-element');
this.shadowRoot!.innerHTML = `
<style>
${chatStyle}
</style>
<div class="container">
<!-- List of groups -->
<div class="group-list">
<ul id="group-list">
</ul>
</div>
<!-- Chat area -->
<div class="chat-area">
<div class="chat-header" id="chat-header">
<!-- Chat title -->
</div>
<div class="messages" id="messages">
<!-- Messages -->
</div>
<!-- Input area -->
<div class="input-area">
<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"/>
</svg>
</label>
<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>
`;
window.toggleUserList = this.toggleUserList.bind(this);
window.switchUser = this.switchUser.bind(this);
window.loadMemberChat = this.loadMemberChat.bind(this);
// 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';
}
});
@ -67,16 +112,17 @@ class ChatElement extends HTMLElement {
private initMessageEvents() {
// Pour le bouton Send
const sendButton = document.getElementById('send-button');
const sendButton = this.shadowRoot?.querySelector('#send-button');
if (sendButton) {
sendButton.addEventListener('click', () => this.sendMessage());
}
// Pour la touche Entrée
const messageInput = document.getElementById('message-input');
const messageInput = this.shadowRoot?.querySelector('#message-input');
if (messageInput) {
messageInput.addEventListener('keypress', (event: KeyboardEvent) => {
if (event.key === 'Enter' && !event.shiftKey) {
messageInput.addEventListener('keypress', (event: Event) => {
const keyEvent = event as KeyboardEvent; // Cast en KeyboardEvent
if (keyEvent.key === 'Enter' && !keyEvent.shiftKey) {
event.preventDefault();
this.sendMessage();
}
@ -85,7 +131,7 @@ class ChatElement extends HTMLElement {
}
private initFileUpload() {
const fileInput = document.getElementById('file-input') as HTMLInputElement;
const fileInput = this.shadowRoot?.querySelector('#file-input') as HTMLInputElement;
if (fileInput) {
fileInput.addEventListener('change', (event: Event) => {
const target = event.target as HTMLInputElement;
@ -135,13 +181,14 @@ 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
@ -150,9 +197,9 @@ class ChatElement extends HTMLElement {
this.updateNotificationBadge();
}
// Send a messsage
// Send a messsage
private sendMessage() {
const messageInput = document.getElementById('message-input') as HTMLInputElement;
const messageInput = this.shadowRoot?.querySelector('#message-input') as HTMLInputElement;
if (!messageInput) return;
const messageText = messageInput.value.trim();
@ -162,10 +209,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);
@ -188,32 +235,33 @@ class ChatElement extends HTMLElement {
}
// Scroll down the conversation after loading messages
private scrollToBottom(container: HTMLElement) {
container.scrollTop = container.scrollHeight;
private scrollToBottom(container: Element) {
(container as HTMLElement).scrollTop = (container as HTMLElement).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
};
}
});
});
const chatHeader = document.getElementById('chat-header');
const messagesContainer = document.getElementById('messages');
const chatHeader = this.shadowRoot?.querySelector('#chat-header');
const messagesContainer = this.shadowRoot?.querySelector('#messages');
if (!chatHeader || !messagesContainer) return;
@ -232,7 +280,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');
}
}
@ -242,10 +290,11 @@ 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';
@ -255,7 +304,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;
@ -270,6 +319,7 @@ class ChatElement extends HTMLElement {
roleElement.appendChild(memberList);
}
// Toggle the list of Roles
private toggleRoles(group: Group, groupElement: HTMLElement) {
console.log('=== toggleRoles START ===');
@ -281,7 +331,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');
@ -314,12 +364,9 @@ 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 {
@ -332,15 +379,17 @@ 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');
const groupList = this.shadowRoot?.querySelector('#group-list');
if (!groupList) return;
groupsMock.forEach((group) => {
groupsMock.forEach(group => {
const li = document.createElement('li');
li.className = 'group-list-item';
@ -369,7 +418,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;
@ -385,15 +434,14 @@ 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>
@ -401,15 +449,13 @@ 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();
@ -434,9 +480,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
};
}
@ -452,11 +498,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');
@ -468,7 +514,8 @@ 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');
@ -498,30 +545,20 @@ class ChatElement extends HTMLElement {
}
}
connectedCallback() {
if (this.shadowRoot) {
this.shadowRoot.innerHTML = `
<div class="container">
<div class="group-list">
<ul id="group-list"></ul>
</div>
<div class="chat-area">
<!-- ... reste du HTML de signature.html ... -->
</div>
</div>
`;
}
this.messagesMock = messageStore.getMessages();
if (this.messagesMock.length === 0) {
messageStore.setMessages(initialMessagesMock);
this.messagesMock = messageStore.getMessages();
}
connectedCallback() {
this.updateCurrentUserDisplay();
this.initializeEventListeners();
this.loadGroupList();
// Si un membre est sélectionné par défaut, charger ses messages
if (this.selectedMemberId) {
this.loadMemberChat(this.selectedMemberId);
}
}
}
customElements.define('chat-element', ChatElement);
export { ChatElement };

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

@ -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,8 +46,7 @@ class SignatureComponent extends HTMLElement {
}
render() {
if (this.shadowRoot) {
// Créer l'élément signature-element
if(this.shadowRoot) {
const signatureElement = document.createElement('signature-element');
this.shadowRoot.innerHTML = `<style>${signatureCss}</style>`;
this.shadowRoot.appendChild(signatureElement);
@ -55,5 +54,5 @@ class SignatureComponent extends HTMLElement {
}
}
export { SignatureComponent };
export { SignatureComponent }
customElements.define('signature-component', SignatureComponent);

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

@ -1,46 +1,12 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
<title>Signatures</title>
<link rel="stylesheet" href="../../../public/style/signature.css" />
</head>
</head>
<body>
<signature-component></signature-component>
<script type="module" src="./signature.ts"></script>
</body>
<body>
<!-- Main content-->
<div class="container">
<!-- List of groups -->
<div class="group-list">
<ul id="group-list"></ul>
</div>
<!-- Chat area -->
<div class="chat-area">
<div class="chat-header" id="chat-header">
<!-- Chat title -->
</div>
<div class="messages" id="messages">
<!-- Messages -->
</div>
<!-- Input area -->
<div class="input-area">
<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"
/>
</svg>
</label>
<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>
</html>

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

File diff suppressed because it is too large Load Diff