refactor: Simplify subscription details display in RelayHubDemo component
- Remove the subscription details section from RelayHubStatus.vue to streamline the component. - Implement a toggle button in RelayHubDemo.vue to show/hide subscription details, enhancing user interaction. - Update the layout and messaging for better clarity when no active subscriptions are present, improving overall user experience.
This commit is contained in:
parent
13f6f44a89
commit
260806e690
2 changed files with 48 additions and 156 deletions
|
|
@ -60,41 +60,6 @@
|
|||
<div>Local: {{ activeSubscriptions.size }}</div>
|
||||
<div>Global: {{ totalSubscriptionCount }}</div>
|
||||
</div>
|
||||
|
||||
<!-- Subscription Details -->
|
||||
<div v-if="subscriptionDetails.length > 0" class="subscription-details">
|
||||
<h5>Subscription Details:</h5>
|
||||
<div class="subscription-list">
|
||||
<div
|
||||
v-for="sub in subscriptionDetails"
|
||||
:key="sub.id"
|
||||
class="subscription-item"
|
||||
>
|
||||
<div class="subscription-id">
|
||||
<strong>ID:</strong> {{ sub.id }}
|
||||
</div>
|
||||
<div class="subscription-filters">
|
||||
<strong>Filters:</strong> {{ sub.filters.length }} filter(s)
|
||||
<div v-if="sub.filters.length > 0" class="filter-details">
|
||||
<div
|
||||
v-for="(filter, index) in sub.filters"
|
||||
:key="index"
|
||||
class="filter-item"
|
||||
>
|
||||
<code>{{ JSON.stringify(filter) }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="sub.relays && sub.relays.length > 0" class="subscription-relays">
|
||||
<strong>Relays:</strong> {{ sub.relays.join(', ') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="no-subscriptions">
|
||||
No active subscriptions found
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -111,7 +76,6 @@ const {
|
|||
connectedRelayCount,
|
||||
totalRelayCount,
|
||||
totalSubscriptionCount,
|
||||
subscriptionDetails,
|
||||
connectionHealth,
|
||||
connect,
|
||||
disconnect,
|
||||
|
|
@ -369,109 +333,4 @@ const {
|
|||
.dark .subscription-count {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.subscription-details {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
background-color: #f1f5f9;
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.dark .subscription-details {
|
||||
background-color: #334155;
|
||||
}
|
||||
|
||||
.subscription-details h5 {
|
||||
margin: 0 0 0.75rem 0;
|
||||
color: #475569;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dark .subscription-details h5 {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.subscription-list {
|
||||
/* Individual subscription items handle their own spacing */
|
||||
}
|
||||
|
||||
.subscription-item {
|
||||
padding: 0.75rem;
|
||||
background-color: white;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 0.375rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.dark .subscription-item {
|
||||
background-color: #1e293b;
|
||||
border-color: #475569;
|
||||
}
|
||||
|
||||
.subscription-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.subscription-id {
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: monospace;
|
||||
font-size: 0.875rem;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.dark .subscription-id {
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
.subscription-filters {
|
||||
margin-bottom: 0.5rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.dark .subscription-filters {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.filter-details {
|
||||
margin-top: 0.25rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.filter-item code {
|
||||
background-color: #f8fafc;
|
||||
padding: 0.125rem 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.dark .filter-item code {
|
||||
background-color: #475569;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.subscription-relays {
|
||||
font-size: 0.875rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.dark .subscription-relays {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.no-subscriptions {
|
||||
text-align: center;
|
||||
color: #94a3b8;
|
||||
font-style: italic;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.dark .no-subscriptions {
|
||||
color: #64748b;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -16,26 +16,52 @@
|
|||
|
||||
<!-- Subscription Details -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
|
||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Subscription Details</h2>
|
||||
<div v-if="subscriptionDetails.length > 0" class="space-y-4">
|
||||
<div
|
||||
v-for="sub in subscriptionDetails"
|
||||
:key="sub.id"
|
||||
class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700"
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Subscription Details</h2>
|
||||
<button
|
||||
@click="toggleSubscriptionDetails"
|
||||
class="flex items-center gap-2 px-3 py-2 text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
<div class="font-mono text-sm font-semibold text-blue-600 dark:text-blue-400 mb-2">
|
||||
{{ sub.id }}
|
||||
</div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-300">
|
||||
<div><strong>Filters:</strong> {{ sub.filters.length }} filter(s)</div>
|
||||
<div v-if="sub.relays && sub.relays.length > 0">
|
||||
<strong>Relays:</strong> {{ sub.relays.join(', ') }}
|
||||
<span>{{ showSubscriptionDetails ? 'Hide' : 'Show' }} Details</span>
|
||||
<svg
|
||||
class="w-4 h-4 transition-transform duration-200"
|
||||
:class="{ 'rotate-180': showSubscriptionDetails }"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="showSubscriptionDetails">
|
||||
<div v-if="subscriptionDetails.length > 0" class="space-y-4">
|
||||
<div
|
||||
v-for="sub in subscriptionDetails"
|
||||
:key="sub.id"
|
||||
class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700"
|
||||
>
|
||||
<div class="font-mono text-sm font-semibold text-blue-600 dark:text-blue-400 mb-2">
|
||||
{{ sub.id }}
|
||||
</div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-300">
|
||||
<div><strong>Filters:</strong> {{ sub.filters.length }} filter(s)</div>
|
||||
<div v-if="sub.relays && sub.relays.length > 0">
|
||||
<strong>Relays:</strong> {{ sub.relays.join(', ') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-gray-500 dark:text-gray-400 text-center py-4">
|
||||
No active subscriptions
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-gray-500 dark:text-gray-400 text-center py-4">
|
||||
No active subscriptions
|
||||
|
||||
<div v-else class="text-center py-8">
|
||||
<div class="text-gray-400 dark:text-gray-500 text-sm">
|
||||
Click "Show Details" to view subscription information
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -189,6 +215,13 @@ const subscriptionEvents = ref<any[]>([])
|
|||
const pageVisible = ref(!document.hidden)
|
||||
const networkOnline = ref(navigator.onLine)
|
||||
|
||||
// Subscription details visibility state
|
||||
const showSubscriptionDetails = ref(false)
|
||||
|
||||
const toggleSubscriptionDetails = () => {
|
||||
showSubscriptionDetails.value = !showSubscriptionDetails.value
|
||||
}
|
||||
|
||||
// Test connection
|
||||
const testConnection = async () => {
|
||||
try {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue