Simple Managment webapp [LLM]
This commit is contained in:
@@ -0,0 +1,74 @@
|
||||
<div class="page-content">
|
||||
@if (loading()) {
|
||||
<div class="loading-container">
|
||||
<nz-spin nzSimple nzSize="large"></nz-spin>
|
||||
</div>
|
||||
} @else if (message()) {
|
||||
<div class="detail-header">
|
||||
<button nz-button (click)="goBack()">
|
||||
<span nz-icon nzType="arrow-left" nzTheme="outline"></span>
|
||||
Back to Messages
|
||||
</button>
|
||||
<button
|
||||
nz-button
|
||||
nzType="primary"
|
||||
nzDanger
|
||||
nz-popconfirm
|
||||
nzPopconfirmTitle="Are you sure you want to delete this message?"
|
||||
nzPopconfirmPlacement="bottomRight"
|
||||
(nzOnConfirm)="deleteMessage()"
|
||||
[nzLoading]="deleting()"
|
||||
>
|
||||
<span nz-icon nzType="delete"></span>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nz-card [nzTitle]="message()!.title">
|
||||
<nz-descriptions nzBordered [nzColumn]="2">
|
||||
<nz-descriptions-item nzTitle="Message ID" [nzSpan]="2">
|
||||
<span class="mono">{{ message()!.message_id }}</span>
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Channel">
|
||||
{{ message()!.channel_internal_name }}
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Priority">
|
||||
<nz-tag [nzColor]="getPriorityColor(message()!.priority)">
|
||||
{{ getPriorityLabel(message()!.priority) }}
|
||||
</nz-tag>
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Sender Name">
|
||||
{{ message()!.sender_name || '-' }}
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Sender IP">
|
||||
{{ message()!.sender_ip }}
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Timestamp" [nzSpan]="2">
|
||||
{{ message()!.timestamp }} ({{ message()!.timestamp | relativeTime }})
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="User Message ID" [nzSpan]="2">
|
||||
<span class="mono">{{ message()!.usr_message_id || '-' }}</span>
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Used Key ID" [nzSpan]="2">
|
||||
<span class="mono">{{ message()!.used_key_id }}</span>
|
||||
</nz-descriptions-item>
|
||||
</nz-descriptions>
|
||||
|
||||
@if (message()!.content) {
|
||||
<nz-divider nzText="Content"></nz-divider>
|
||||
<div class="message-content">
|
||||
<pre>{{ message()!.content }}</pre>
|
||||
</div>
|
||||
}
|
||||
</nz-card>
|
||||
} @else {
|
||||
<nz-card>
|
||||
<div class="not-found">
|
||||
<p>Message not found</p>
|
||||
<button nz-button nzType="primary" (click)="goBack()">
|
||||
Back to Messages
|
||||
</button>
|
||||
</div>
|
||||
</nz-card>
|
||||
}
|
||||
</div>
|
||||
@@ -0,0 +1,31 @@
|
||||
.loading-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Mono', 'Droid Sans Mono', 'Source Code Pro', monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.not-found {
|
||||
text-align: center;
|
||||
padding: 48px;
|
||||
|
||||
p {
|
||||
color: #999;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import { Component, inject, signal, OnInit } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { NzCardModule } from 'ng-zorro-antd/card';
|
||||
import { NzButtonModule } from 'ng-zorro-antd/button';
|
||||
import { NzIconModule } from 'ng-zorro-antd/icon';
|
||||
import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';
|
||||
import { NzTagModule } from 'ng-zorro-antd/tag';
|
||||
import { NzSpinModule } from 'ng-zorro-antd/spin';
|
||||
import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
|
||||
import { NzDividerModule } from 'ng-zorro-antd/divider';
|
||||
import { ApiService } from '../../../core/services/api.service';
|
||||
import { NotificationService } from '../../../core/services/notification.service';
|
||||
import { Message } from '../../../core/models';
|
||||
import { RelativeTimePipe } from '../../../shared/pipes/relative-time.pipe';
|
||||
|
||||
@Component({
|
||||
selector: 'app-message-detail',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
NzCardModule,
|
||||
NzButtonModule,
|
||||
NzIconModule,
|
||||
NzDescriptionsModule,
|
||||
NzTagModule,
|
||||
NzSpinModule,
|
||||
NzPopconfirmModule,
|
||||
NzDividerModule,
|
||||
RelativeTimePipe,
|
||||
],
|
||||
templateUrl: './message-detail.component.html',
|
||||
styleUrl: './message-detail.component.scss'
|
||||
})
|
||||
export class MessageDetailComponent implements OnInit {
|
||||
private route = inject(ActivatedRoute);
|
||||
private router = inject(Router);
|
||||
private apiService = inject(ApiService);
|
||||
private notification = inject(NotificationService);
|
||||
|
||||
message = signal<Message | null>(null);
|
||||
loading = signal(true);
|
||||
deleting = signal(false);
|
||||
|
||||
ngOnInit(): void {
|
||||
const messageId = this.route.snapshot.paramMap.get('id');
|
||||
if (messageId) {
|
||||
this.loadMessage(messageId);
|
||||
}
|
||||
}
|
||||
|
||||
loadMessage(messageId: string): void {
|
||||
this.loading.set(true);
|
||||
this.apiService.getMessage(messageId).subscribe({
|
||||
next: (message) => {
|
||||
this.message.set(message);
|
||||
this.loading.set(false);
|
||||
},
|
||||
error: () => {
|
||||
this.loading.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
goBack(): void {
|
||||
this.router.navigate(['/messages']);
|
||||
}
|
||||
|
||||
deleteMessage(): void {
|
||||
const message = this.message();
|
||||
if (!message) return;
|
||||
|
||||
this.deleting.set(true);
|
||||
this.apiService.deleteMessage(message.message_id).subscribe({
|
||||
next: () => {
|
||||
this.notification.success('Message deleted');
|
||||
this.router.navigate(['/messages']);
|
||||
},
|
||||
error: () => {
|
||||
this.deleting.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getPriorityLabel(priority: number): string {
|
||||
switch (priority) {
|
||||
case 0: return 'Low';
|
||||
case 1: return 'Normal';
|
||||
case 2: return 'High';
|
||||
default: return 'Unknown';
|
||||
}
|
||||
}
|
||||
|
||||
getPriorityColor(priority: number): string {
|
||||
switch (priority) {
|
||||
case 0: return 'default';
|
||||
case 1: return 'blue';
|
||||
case 2: return 'red';
|
||||
default: return 'default';
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user