chat.page.html 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <ion-header>
  2. <ion-toolbar color="primary">
  3. <ion-buttons slot="start">
  4. <ion-back-button defaultHref="/tabs/session"></ion-back-button>
  5. </ion-buttons>
  6. <ion-title>{{ contact?.get('name') || contact?.get('to')?.get("nickname") ||contact?.get('to')?.get('username') }}</ion-title>
  7. </ion-toolbar>
  8. </ion-header>
  9. <ion-content class="chat-content">
  10. <ion-list lines="none">
  11. <ion-item *ngFor="let message of messageList" class="message-item">
  12. <ion-label class="message-container"
  13. [class.sent-message-container]="message?.get('sendUser')?.id === user?.id"
  14. [class.received-message-container]="message?.get('receiveUser')?.id === targetId">
  15. <div class="message-details">
  16. <p [class.sent-message]="message?.get('sendUser')?.id === user?.id"
  17. [class.received-message]="message?.get('receiveUser')?.id === targetId"
  18. class="message-text">{{ message?.get("contentJson")?.content }}</p>
  19. <div class="message-time">
  20. <p>{{ message.createdAt|date:'HH:mm:ss' }}</p>
  21. </div>
  22. </div>
  23. </ion-label>
  24. <ion-avatar slot="end" *ngIf="message?.get('sendUser')?.id === user?.id" class="message-avatar sent-avatar">
  25. <img [src]="'/assets/img/clock.png'">
  26. </ion-avatar>
  27. <ion-avatar slot="start" *ngIf="message?.get('receiveUser')?.id === targetId" class="message-avatar received-avatar">
  28. <img [src]="'/assets/img/clock.png'">
  29. </ion-avatar>
  30. </ion-item>
  31. </ion-list>
  32. <ion-list lines="none">
  33. <ion-item *ngFor="let message of messages" class="message-item">
  34. <ion-label class="message-container"
  35. [class.sent-message-container]="message.type === 'sent'"
  36. [class.received-message-container]="message.type === 'received'">
  37. <div class="message-details">
  38. <p [class.sent-message]="message.type === 'sent'"
  39. [class.received-message]="message.type === 'received'"
  40. class="message-text">{{ message.text }}</p>
  41. <div class="message-time">
  42. <p>{{ message.time }}</p>
  43. </div>
  44. </div>
  45. </ion-label>
  46. <ion-avatar slot="end" *ngIf="message.type === 'sent'" class="message-avatar sent-avatar">
  47. <img [src]="message.avatar">
  48. </ion-avatar>
  49. <ion-avatar slot="start" *ngIf="message.type === 'received'" class="message-avatar received-avatar">
  50. <img [src]="message.avatar">
  51. </ion-avatar>
  52. </ion-item>
  53. </ion-list>
  54. </ion-content>
  55. <ion-footer>
  56. <ion-toolbar>
  57. <ion-input placeholder="Type your message..." [(ngModel)]="newMessage" clearInput></ion-input>
  58. <ion-buttons slot="end">
  59. <ion-button (click)="sendMessage()" color="primary" [disabled]="!newMessage">Send</ion-button>
  60. </ion-buttons>
  61. </ion-toolbar>
  62. </ion-footer>