355 lines
13 KiB
HTML
355 lines
13 KiB
HTML
<div class="page-content">
|
|
@if (loading()) {
|
|
<div class="loading-container">
|
|
<nz-spin nzSimple nzSize="large"></nz-spin>
|
|
</div>
|
|
} @else if (channel()) {
|
|
<div class="detail-header">
|
|
<button nz-button (click)="goBack()">
|
|
<span nz-icon nzType="arrow-left" nzTheme="outline"></span>
|
|
Back to Channels
|
|
</button>
|
|
@if (isOwner()) {
|
|
<div class="header-actions">
|
|
<button nz-button (click)="openEditModal()">
|
|
<span nz-icon nzType="edit"></span>
|
|
Edit
|
|
</button>
|
|
@if (expertMode()) {
|
|
<button
|
|
nz-button
|
|
nzDanger
|
|
nz-popconfirm
|
|
nzPopconfirmTitle="Are you sure you want to delete this channel? All messages and subscriptions will be lost."
|
|
(nzOnConfirm)="deleteChannel()"
|
|
[nzLoading]="deleting()"
|
|
>
|
|
<span nz-icon nzType="delete"></span>
|
|
Delete
|
|
</button>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<nz-card [nzTitle]="channel()!.display_name">
|
|
<scn-metadata-grid>
|
|
<scn-metadata-value label="Channel ID">
|
|
<span class="mono">{{ channel()!.channel_id }}</span>
|
|
</scn-metadata-value>
|
|
<scn-metadata-value label="Internal Name">
|
|
<span class="mono">{{ channel()!.internal_name }}</span>
|
|
</scn-metadata-value>
|
|
<scn-metadata-value label="Status">
|
|
<nz-tag [nzColor]="getSubscriptionStatus().color">
|
|
{{ getSubscriptionStatus().label }}
|
|
</nz-tag>
|
|
</scn-metadata-value>
|
|
<scn-metadata-value label="Owner">
|
|
<span class="mono">{{ channel()!.owner_user_id }}</span>
|
|
</scn-metadata-value>
|
|
@if (channel()!.description_name) {
|
|
<scn-metadata-value label="Description">
|
|
{{ channel()!.description_name }}
|
|
</scn-metadata-value>
|
|
}
|
|
<scn-metadata-value label="Messages Sent">
|
|
{{ channel()!.messages_sent }}
|
|
</scn-metadata-value>
|
|
<scn-metadata-value label="Last Sent">
|
|
@if (channel()!.timestamp_lastsent) {
|
|
<div class="timestamp-absolute">{{ channel()!.timestamp_lastsent | date:'yyyy-MM-dd HH:mm:ss' }}</div>
|
|
<div class="timestamp-relative">{{ channel()!.timestamp_lastsent | relativeTime }}</div>
|
|
} @else {
|
|
Never
|
|
}
|
|
</scn-metadata-value>
|
|
<scn-metadata-value label="Created">
|
|
<div class="timestamp-absolute">{{ channel()!.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
|
|
<div class="timestamp-relative">{{ channel()!.timestamp_created | relativeTime }}</div>
|
|
</scn-metadata-value>
|
|
@if (isOwner() && channel()!.subscribe_key) {
|
|
<scn-metadata-value label="Subscribe Key">
|
|
<div class="key-field">
|
|
<nz-input-group [nzSuffix]="subscribeKeySuffix">
|
|
<input
|
|
type="text"
|
|
nz-input
|
|
[value]="channel()!.subscribe_key"
|
|
readonly
|
|
class="mono"
|
|
/>
|
|
</nz-input-group>
|
|
<ng-template #subscribeKeySuffix>
|
|
<span
|
|
nz-icon
|
|
nzType="copy"
|
|
class="action-icon"
|
|
nz-tooltip
|
|
nzTooltipTitle="Copy"
|
|
[appCopyToClipboard]="channel()!.subscribe_key!"
|
|
></span>
|
|
</ng-template>
|
|
@if (expertMode()) {
|
|
<button
|
|
nz-button
|
|
nz-popconfirm
|
|
nzPopconfirmTitle="Regenerate subscribe key? The existing key will no longer be valid."
|
|
(nzOnConfirm)="regenerateSubscribeKey()"
|
|
>
|
|
Invalidate & Regenerate
|
|
</button>
|
|
}
|
|
</div>
|
|
</scn-metadata-value>
|
|
<scn-metadata-value label="Subscribe QR">
|
|
<div class="qr-container">
|
|
<app-qr-code-display [data]="qrCodeData()"></app-qr-code-display>
|
|
<p class="qr-hint">Scan with the SimpleCloudNotifier app to subscribe</p>
|
|
</div>
|
|
</scn-metadata-value>
|
|
}
|
|
</scn-metadata-grid>
|
|
</nz-card>
|
|
|
|
@if (isOwner()) {
|
|
<nz-card nzTitle="Subscriptions" [nzExtra]="subscriptionsCardExtra" class="mt-16">
|
|
<ng-template #subscriptionsCardExtra>
|
|
@if (expertMode()) {
|
|
<button
|
|
nz-button
|
|
nzSize="small"
|
|
[nzType]="isUserSubscribed() ? 'default' : 'primary'"
|
|
nz-tooltip
|
|
[nzTooltipTitle]="isUserSubscribed() ? 'Unsubscribe' : 'Subscribe'"
|
|
(click)="toggleSelfSubscription()"
|
|
>
|
|
<span nz-icon [nzType]="isUserSubscribed() ? 'user-delete' : 'user-add'"></span>
|
|
</button>
|
|
}
|
|
</ng-template>
|
|
<nz-table
|
|
#subscriptionTable
|
|
[nzData]="subscriptions()"
|
|
[nzLoading]="loadingSubscriptions()"
|
|
[nzShowPagination]="false"
|
|
[nzNoResult]="noResultTpl"
|
|
nzSize="small"
|
|
>
|
|
<ng-template #noResultTpl></ng-template>
|
|
<thead>
|
|
<tr>
|
|
<th>Subscriber</th>
|
|
<th nzWidth="0">Status</th>
|
|
<th nzWidth="0">Active</th>
|
|
<th nzWidth="0">Created</th>
|
|
<th nzWidth="0">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@for (sub of subscriptions(); track sub.subscription_id) {
|
|
<tr class="clickable-row">
|
|
<td>
|
|
<a class="cell-link" [routerLink]="['/subscriptions', sub.subscription_id]">
|
|
<div class="cell-name">{{ getUserDisplayName(sub.subscriber_user_id) }}</div>
|
|
<div class="cell-id mono">{{ sub.subscriber_user_id }}</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<a class="cell-link" [routerLink]="['/subscriptions', sub.subscription_id]">
|
|
<nz-tag [nzColor]="sub.confirmed ? 'green' : 'orange'">
|
|
{{ sub.confirmed ? 'Confirmed' : 'Pending' }}
|
|
</nz-tag>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<a class="cell-link" [routerLink]="['/subscriptions', sub.subscription_id]">
|
|
<nz-tag [nzColor]="sub.active ? 'green' : 'default'">
|
|
{{ sub.active ? 'Active' : 'Inactive' }}
|
|
</nz-tag>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<a class="cell-link" [routerLink]="['/subscriptions', sub.subscription_id]">
|
|
<div class="timestamp-absolute">{{ sub.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
|
|
<div class="timestamp-relative">{{ sub.timestamp_created | relativeTime }}</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<div class="action-buttons">
|
|
@if (!sub.confirmed) {
|
|
<button
|
|
nz-button
|
|
nzSize="small"
|
|
nzType="primary"
|
|
nz-tooltip
|
|
nzTooltipTitle="Accept"
|
|
(click)="acceptSubscription(sub)"
|
|
>
|
|
<span nz-icon nzType="check"></span>
|
|
</button>
|
|
<button
|
|
nz-button
|
|
nzSize="small"
|
|
nzDanger
|
|
nz-tooltip
|
|
nzTooltipTitle="Deny"
|
|
nz-popconfirm
|
|
nzPopconfirmTitle="Deny this subscription request?"
|
|
(nzOnConfirm)="denySubscription(sub)"
|
|
>
|
|
<span nz-icon nzType="close"></span>
|
|
</button>
|
|
} @else {
|
|
@if (expertMode()) {
|
|
<button
|
|
nz-button
|
|
nzSize="small"
|
|
nzDanger
|
|
nz-tooltip
|
|
nzTooltipTitle="Revoke"
|
|
nz-popconfirm
|
|
nzPopconfirmTitle="Revoke this subscription?"
|
|
(nzOnConfirm)="revokeSubscription(sub)"
|
|
>
|
|
<span nz-icon nzType="delete"></span>
|
|
</button>
|
|
}
|
|
}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
} @empty {
|
|
<tr>
|
|
<td colspan="5">
|
|
<nz-empty nzNotFoundContent="No subscriptions"></nz-empty>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</nz-table>
|
|
</nz-card>
|
|
}
|
|
|
|
<nz-card nzTitle="Messages" class="mt-16">
|
|
<nz-table
|
|
#messageTable
|
|
[nzData]="messages()"
|
|
[nzLoading]="loadingMessages()"
|
|
[nzShowPagination]="false"
|
|
[nzNoResult]="noMessagesResultTpl"
|
|
nzSize="small"
|
|
>
|
|
<ng-template #noMessagesResultTpl></ng-template>
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>Content</th>
|
|
<th nzWidth="0">Sender</th>
|
|
<th nzWidth="0">Priority</th>
|
|
<th nzWidth="0">Time</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@for (message of messages(); track message.message_id) {
|
|
<tr class="clickable-row">
|
|
<td>
|
|
<a class="cell-link" [routerLink]="['/messages', message.message_id]">
|
|
<div class="message-title">{{ message.title }}</div>
|
|
<div class="message-id mono">{{ message.message_id }}</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<a class="cell-link" [routerLink]="['/messages', message.message_id]">
|
|
@if (message.content) {
|
|
<div class="message-content">{{ message.content | slice:0:128 }}{{ message.content.length > 128 ? '...' : '' }}</div>
|
|
} @else {
|
|
<span class="text-muted"></span>
|
|
}
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<a class="cell-link" [routerLink]="['/messages', message.message_id]">
|
|
<span style="white-space: pre">{{ message.sender_name || '-' }}</span>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<a class="cell-link" [routerLink]="['/messages', message.message_id]">
|
|
<nz-tag [nzColor]="getPriorityColor(message.priority)">
|
|
{{ getPriorityLabel(message.priority) }}
|
|
</nz-tag>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<a class="cell-link" [routerLink]="['/messages', message.message_id]">
|
|
<div class="timestamp-absolute">{{ message.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</div>
|
|
<div class="timestamp-relative">{{ message.timestamp | relativeTime }}</div>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
} @empty {
|
|
<tr>
|
|
<td colspan="5">
|
|
<nz-empty nzNotFoundContent="No messages"></nz-empty>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</nz-table>
|
|
@if (messagesTotalCount() > messagesPageSize) {
|
|
<div class="pagination-controls">
|
|
<nz-pagination
|
|
[nzPageIndex]="messagesCurrentPage()"
|
|
[nzPageSize]="messagesPageSize"
|
|
[nzTotal]="messagesTotalCount()"
|
|
[nzDisabled]="loadingMessages()"
|
|
(nzPageIndexChange)="messagesGoToPage($event)"
|
|
></nz-pagination>
|
|
</div>
|
|
}
|
|
</nz-card>
|
|
} @else {
|
|
<nz-card>
|
|
<div class="not-found">
|
|
<p>Channel not found</p>
|
|
<button nz-button nzType="primary" (click)="goBack()">
|
|
Back to Channels
|
|
</button>
|
|
</div>
|
|
</nz-card>
|
|
}
|
|
</div>
|
|
|
|
<!-- Edit Modal -->
|
|
<nz-modal
|
|
[(nzVisible)]="showEditModal"
|
|
nzTitle="Edit Channel"
|
|
(nzOnCancel)="closeEditModal()"
|
|
(nzOnOk)="saveChannel()"
|
|
[nzOkLoading]="saving()"
|
|
>
|
|
<ng-container *nzModalContent>
|
|
<nz-form-item>
|
|
<nz-form-label>Display Name</nz-form-label>
|
|
<nz-form-control>
|
|
<input
|
|
type="text"
|
|
nz-input
|
|
[(ngModel)]="editDisplayName"
|
|
/>
|
|
</nz-form-control>
|
|
</nz-form-item>
|
|
<nz-form-item class="mb-0">
|
|
<nz-form-label>Description</nz-form-label>
|
|
<nz-form-control>
|
|
<textarea
|
|
nz-input
|
|
rows="3"
|
|
[(ngModel)]="editDescription"
|
|
></textarea>
|
|
</nz-form-control>
|
|
</nz-form-item>
|
|
</ng-container>
|
|
</nz-modal>
|
|
|