More webapp changes+fixes

This commit is contained in:
2025-12-05 16:58:30 +01:00
parent c66cd0568f
commit 8e7a540c97
40 changed files with 1944 additions and 272 deletions
@@ -20,122 +20,123 @@
</div>
<nz-card [nzTitle]="channel()!.display_name">
<nz-descriptions nzBordered [nzColumn]="2">
<nz-descriptions-item nzTitle="Channel ID" [nzSpan]="2">
<scn-metadata-grid>
<scn-metadata-value label="Channel ID">
<span class="mono">{{ channel()!.channel_id }}</span>
</nz-descriptions-item>
<nz-descriptions-item nzTitle="Internal Name">
</scn-metadata-value>
<scn-metadata-value label="Internal Name">
<span class="mono">{{ channel()!.internal_name }}</span>
</nz-descriptions-item>
<nz-descriptions-item nzTitle="Status">
</scn-metadata-value>
<scn-metadata-value label="Status">
<nz-tag [nzColor]="getSubscriptionStatus().color">
{{ getSubscriptionStatus().label }}
</nz-tag>
</nz-descriptions-item>
<nz-descriptions-item nzTitle="Owner" [nzSpan]="2">
</scn-metadata-value>
<scn-metadata-value label="Owner">
<span class="mono">{{ channel()!.owner_user_id }}</span>
</nz-descriptions-item>
</scn-metadata-value>
@if (channel()!.description_name) {
<nz-descriptions-item nzTitle="Description" [nzSpan]="2">
<scn-metadata-value label="Description">
{{ channel()!.description_name }}
</nz-descriptions-item>
</scn-metadata-value>
}
<nz-descriptions-item nzTitle="Messages Sent">
<scn-metadata-value label="Messages Sent">
{{ channel()!.messages_sent }}
</nz-descriptions-item>
<nz-descriptions-item nzTitle="Last Sent">
</scn-metadata-value>
<scn-metadata-value label="Last Sent">
@if (channel()!.timestamp_lastsent) {
{{ channel()!.timestamp_lastsent | relativeTime }}
<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
}
</nz-descriptions-item>
<nz-descriptions-item nzTitle="Created" [nzSpan]="2">
{{ channel()!.timestamp_created }}
</nz-descriptions-item>
</nz-descriptions>
</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>
<div class="key-actions">
<button
nz-button
nzSize="small"
nz-popconfirm
nzPopconfirmTitle="Regenerate subscribe key? The existing key will no longer be valid."
(nzOnConfirm)="regenerateSubscribeKey()"
>
Invalidate & Regenerate
</button>
</div>
</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>
}
@if (isOwner() && channel()!.send_key) {
<scn-metadata-value label="Send Key">
<div class="key-field">
<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>
</scn-metadata-value>
}
</scn-metadata-grid>
</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>
</ng-template>
<div class="key-actions">
<button
nz-button
nzSize="small"
nz-popconfirm
nzPopconfirmTitle="Regenerate subscribe key? The existing key will no longer be valid."
(nzOnConfirm)="regenerateSubscribeKey()"
>
Invalidate & Regenerate
</button>
</div>
<div class="qr-section">
<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>
</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
@@ -149,22 +150,26 @@
<thead>
<tr>
<th>Subscriber</th>
<th>Status</th>
<th>Created</th>
<th nzWidth="0">Status</th>
<th nzWidth="0">Created</th>
</tr>
</thead>
<tbody>
@for (sub of subscriptions(); track sub.subscription_id) {
<tr>
<td>
<span class="mono">{{ sub.subscriber_user_id }}</span>
<div class="cell-name">{{ getUserDisplayName(sub.subscriber_user_id) }}</div>
<div class="cell-id mono">{{ sub.subscriber_user_id }}</div>
</td>
<td>
<nz-tag [nzColor]="sub.confirmed ? 'green' : 'orange'">
{{ sub.confirmed ? 'Confirmed' : 'Pending' }}
</nz-tag>
</td>
<td>{{ sub.timestamp_created | relativeTime }}</td>
<td>
<div class="timestamp-absolute">{{ sub.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
<div class="timestamp-relative">{{ sub.timestamp_created | relativeTime }}</div>
</td>
</tr>
} @empty {
<tr>