Simple Managment webapp [LLM]
This commit is contained in:
@@ -0,0 +1,250 @@
|
||||
<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>
|
||||
<button
|
||||
nz-button
|
||||
nzType="primary"
|
||||
nzDanger
|
||||
nz-popconfirm
|
||||
nzPopconfirmTitle="Are you sure you want to delete this channel? All messages and subscriptions will be lost."
|
||||
nzPopconfirmPlacement="bottomRight"
|
||||
(nzOnConfirm)="deleteChannel()"
|
||||
[nzLoading]="deleting()"
|
||||
>
|
||||
<span nz-icon nzType="delete"></span>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<nz-card [nzTitle]="channel()!.display_name">
|
||||
<nz-descriptions nzBordered [nzColumn]="2">
|
||||
<nz-descriptions-item nzTitle="Channel ID" [nzSpan]="2">
|
||||
<span class="mono">{{ channel()!.channel_id }}</span>
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Internal Name">
|
||||
<span class="mono">{{ channel()!.internal_name }}</span>
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Status">
|
||||
<nz-tag [nzColor]="getSubscriptionStatus().color">
|
||||
{{ getSubscriptionStatus().label }}
|
||||
</nz-tag>
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Owner" [nzSpan]="2">
|
||||
<span class="mono">{{ channel()!.owner_user_id }}</span>
|
||||
</nz-descriptions-item>
|
||||
@if (channel()!.description_name) {
|
||||
<nz-descriptions-item nzTitle="Description" [nzSpan]="2">
|
||||
{{ channel()!.description_name }}
|
||||
</nz-descriptions-item>
|
||||
}
|
||||
<nz-descriptions-item nzTitle="Messages Sent">
|
||||
{{ channel()!.messages_sent }}
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Last Sent">
|
||||
@if (channel()!.timestamp_lastsent) {
|
||||
{{ channel()!.timestamp_lastsent | relativeTime }}
|
||||
} @else {
|
||||
Never
|
||||
}
|
||||
</nz-descriptions-item>
|
||||
<nz-descriptions-item nzTitle="Created" [nzSpan]="2">
|
||||
{{ channel()!.timestamp_created }}
|
||||
</nz-descriptions-item>
|
||||
</nz-descriptions>
|
||||
</nz-card>
|
||||
|
||||
@if (isOwner()) {
|
||||
<nz-card nzTitle="Keys" class="mt-16">
|
||||
@if (channel()!.subscribe_key) {
|
||||
<div class="key-section">
|
||||
<label>Subscribe Key</label>
|
||||
<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>
|
||||
<span
|
||||
nz-icon
|
||||
nzType="qrcode"
|
||||
class="action-icon"
|
||||
nz-tooltip
|
||||
nzTooltipTitle="Show QR Code"
|
||||
(click)="showQrCode()"
|
||||
></span>
|
||||
</ng-template>
|
||||
<div class="key-actions">
|
||||
<button
|
||||
nz-button
|
||||
nzSize="small"
|
||||
nz-popconfirm
|
||||
nzPopconfirmTitle="Regenerate subscribe key? Existing subscribers will need the new key."
|
||||
(nzOnConfirm)="regenerateSubscribeKey()"
|
||||
>
|
||||
Regenerate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (channel()!.send_key) {
|
||||
<nz-divider></nz-divider>
|
||||
<div class="key-section">
|
||||
<label>Send Key</label>
|
||||
<nz-input-group [nzSuffix]="sendKeySuffix">
|
||||
<input
|
||||
type="text"
|
||||
nz-input
|
||||
[value]="channel()!.send_key"
|
||||
readonly
|
||||
class="mono"
|
||||
/>
|
||||
</nz-input-group>
|
||||
<ng-template #sendKeySuffix>
|
||||
<span
|
||||
nz-icon
|
||||
nzType="copy"
|
||||
class="action-icon"
|
||||
nz-tooltip
|
||||
nzTooltipTitle="Copy"
|
||||
[appCopyToClipboard]="channel()!.send_key!"
|
||||
></span>
|
||||
</ng-template>
|
||||
<div class="key-actions">
|
||||
<button
|
||||
nz-button
|
||||
nzSize="small"
|
||||
nz-popconfirm
|
||||
nzPopconfirmTitle="Regenerate send key?"
|
||||
(nzOnConfirm)="regenerateSendKey()"
|
||||
>
|
||||
Regenerate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</nz-card>
|
||||
|
||||
<nz-card nzTitle="Subscriptions" class="mt-16">
|
||||
<nz-table
|
||||
#subscriptionTable
|
||||
[nzData]="subscriptions()"
|
||||
[nzLoading]="loadingSubscriptions()"
|
||||
[nzShowPagination]="false"
|
||||
nzSize="small"
|
||||
>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Subscriber</th>
|
||||
<th>Status</th>
|
||||
<th>Created</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@for (sub of subscriptions(); track sub.subscription_id) {
|
||||
<tr>
|
||||
<td>
|
||||
<span class="mono">{{ sub.subscriber_user_id }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<nz-tag [nzColor]="sub.confirmed ? 'green' : 'orange'">
|
||||
{{ sub.confirmed ? 'Confirmed' : 'Pending' }}
|
||||
</nz-tag>
|
||||
</td>
|
||||
<td>{{ sub.timestamp_created | relativeTime }}</td>
|
||||
</tr>
|
||||
} @empty {
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<nz-empty nzNotFoundContent="No subscriptions"></nz-empty>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</nz-table>
|
||||
</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>
|
||||
|
||||
<!-- QR Code Modal -->
|
||||
<nz-modal
|
||||
[(nzVisible)]="showQrModal"
|
||||
nzTitle="Subscribe QR Code"
|
||||
(nzOnCancel)="closeQrModal()"
|
||||
[nzFooter]="null"
|
||||
>
|
||||
<ng-container *nzModalContent>
|
||||
<app-qr-code-display [data]="qrCodeData()"></app-qr-code-display>
|
||||
<p class="qr-hint">Scan this QR code with the SimpleCloudNotifier app to subscribe to this channel.</p>
|
||||
</ng-container>
|
||||
</nz-modal>
|
||||
Reference in New Issue
Block a user