123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566 |
- <ion-header>
- <ion-toolbar color="primary">
- <ion-buttons slot="start">
- <ion-back-button defaultHref="/tabs/session"></ion-back-button>
- </ion-buttons>
- <ion-title>{{ contact?.get('name') || contact?.get('to')?.get("nickname") ||contact?.get('to')?.get('username') }}</ion-title>
- </ion-toolbar>
- </ion-header>
- <ion-content class="chat-content">
- <ion-list lines="none">
- <ion-item *ngFor="let message of messageList" class="message-item">
- <ion-label class="message-container"
- [class.sent-message-container]="message?.get('sendUser')?.id === user?.id"
- [class.received-message-container]="message?.get('receiveUser')?.id === targetId">
- <div class="message-details">
- <p [class.sent-message]="message?.get('sendUser')?.id === user?.id"
- [class.received-message]="message?.get('receiveUser')?.id === targetId"
- class="message-text">{{ message?.get("contentJson")?.content }}</p>
- <div class="message-time">
- <p>{{ message.createdAt|date:'HH:mm:ss' }}</p>
- </div>
- </div>
- </ion-label>
- <ion-avatar slot="end" *ngIf="message?.get('sendUser')?.id === user?.id" class="message-avatar sent-avatar">
- <img [src]="'/assets/img/clock.png'">
- </ion-avatar>
- <ion-avatar slot="start" *ngIf="message?.get('receiveUser')?.id === targetId" class="message-avatar received-avatar">
- <img [src]="'/assets/img/clock.png'">
- </ion-avatar>
- </ion-item>
- </ion-list>
- <ion-list lines="none">
- <ion-item *ngFor="let message of messages" class="message-item">
- <ion-label class="message-container"
- [class.sent-message-container]="message.type === 'sent'"
- [class.received-message-container]="message.type === 'received'">
- <div class="message-details">
- <p [class.sent-message]="message.type === 'sent'"
- [class.received-message]="message.type === 'received'"
- class="message-text">{{ message.text }}</p>
- <div class="message-time">
- <p>{{ message.time }}</p>
- </div>
- </div>
- </ion-label>
- <ion-avatar slot="end" *ngIf="message.type === 'sent'" class="message-avatar sent-avatar">
- <img [src]="message.avatar">
- </ion-avatar>
- <ion-avatar slot="start" *ngIf="message.type === 'received'" class="message-avatar received-avatar">
- <img [src]="message.avatar">
- </ion-avatar>
- </ion-item>
- </ion-list>
- </ion-content>
- <ion-footer>
- <ion-toolbar>
- <ion-input placeholder="Type your message..." [(ngModel)]="newMessage" clearInput></ion-input>
- <ion-buttons slot="end">
- <ion-button (click)="sendMessage()" color="primary" [disabled]="!newMessage">Send</ion-button>
- </ion-buttons>
- </ion-toolbar>
- </ion-footer>
|