Fixes viz of subscriptions

index.html

@@ -175,11 +175,10 @@
               style="visibility: hidden" />
           </p>
         </div>
-        <div class="box-content" id="checking-relays-header-box">
-          <p id="checking-relays-header"></p>
-        </div>
         <div class="box-content" id="checking-relays-box">
-          <table id="checking-relays" class="fullwidth"></table>
+          <table id="checking-relays" class="fullwidth">
+            <tr id="checking-relays-header"></tr>
+          </table>
         </div>
         <div class="box-content">
           <p id="file-download"></p>

js/nostr-broadcast.js

@@ -16,7 +16,7 @@ const fetchAndBroadcast = async () => {
     fetching: 'Fetching from relays... ',
     download: `Downloading Backup file... ${checkMark}`,
   }
-  $('#checking-relays-header').text("Waiting for Relays: ")
+
   // parse pubkey ('npub' or hexa)
   const relaySet = parseRelaySet($('#relaySet').val())
   const pubkey = parsePubkey($('#pubkey').val())
@@ -32,7 +32,7 @@ const fetchAndBroadcast = async () => {
 
   $('#checking-relays-header-box').css('display', 'flex')
   $('#checking-relays-box').css('display', 'flex')
-  $('#checking-relays-header').text("Waiting for Relays:")
+  $('#checking-relays-header').html("<th>Relay</th><th>Status</th><th>From Key</th><th>About Key</th><th>Events</th>")
 
   // get all events from relays
   const filters =[{ authors: [pubkey] }, { "#p": [pubkey] }]
@@ -61,7 +61,7 @@ const fetchAndBroadcast = async () => {
     
     $('#checking-relays-header-box').css('display', 'flex')
     $('#checking-relays-box').css('display', 'flex')
-    $('#checking-relays-header').text("Broadcasting to Relays:")
+    $('#checking-relays-header').html("<th>Relay</th><th>Status</th><th>From Key</th><th>About Key</th><th>Events</th>")
   
     await broadcastEvents(data)
   }
@@ -142,7 +142,7 @@ const broadcast = async (data) => {
   
   $('#checking-relays-header-box').css('display', 'flex')
   $('#checking-relays-box').css('display', 'flex')
-  $('#checking-relays-header').text("Broadcasting to Relays:")
+  $('#checking-relays-header').html("<th>Relay</th><th>Status</th><th>From Key</th><th>About Key</th><th>Events</th>")
 
   await broadcastEvents(data)
 

js/nostr-utils.js

@@ -86,13 +86,21 @@ const displayRelayStatus = (relayStatusAndCount) => {
         let untilStr = "";
 
         if (relayStatusAndCount[it].until) {
-          Object.keys(relayStatusAndCount[it].until).forEach(subId => {
+          if (relayStatusAndCount[it].until["my-sub-0"])
-            untilStr += "<td> <" + new Date(relayStatusAndCount[it].until[subId] * 1000).toLocaleDateString("en-US") + "</td>"
+            untilStr += "<td> <" + new Date(relayStatusAndCount[it].until["my-sub-0"] * 1000).toLocaleDateString("en-US") + "</td>"
-          })
+          else
+            untilStr += "<td> </td>"
+
+          if (relayStatusAndCount[it].until["my-sub-1"])
+            untilStr += "<td> <" + new Date(relayStatusAndCount[it].until["my-sub-1"] * 1000).toLocaleDateString("en-US") + "</td>"
+          else
+            untilStr += "<td> </td>"
+        } else {
+          untilStr += "<td> </td> <td> </td>"
         }
           
         const relayName = it.replace("wss://", "").replace("ws://", "")  
-        const line = "<td>" + relayName + "</td><td>" + relayStatusAndCount[it].status + "</td><td>" + untilStr + "</td><td>" + relayStatusAndCount[it].count + "</td>"
+        const line = "<td>" + relayName + "</td><td>" + relayStatusAndCount[it].status + "</td>" + untilStr + "<td>" + relayStatusAndCount[it].count + "</td>"
 
         const elemId = relayName.replaceAll(".", "-")
 
@@ -301,7 +309,7 @@ const getEvents = async (filters, pubkey, relaySet) => {
     myRelaySet = relays
 
   // batch processing of 10 relays
-  await processInPool(myRelaySet, (relay, poolStatus) => fetchFromRelay(relay, filters, pubkey, events, poolStatus), 10)
+  await processInPool(myRelaySet, (relay, poolStatus) => fetchFromRelay(relay, filters, pubkey, events, poolStatus), 10, (progress) => $('#fetching-progress').val(progress))
 
   displayRelayStatus({})
 
@@ -309,7 +317,14 @@ const getEvents = async (filters, pubkey, relaySet) => {
   return Object.keys(events).map((id) => events[id])
 }
 
-const processInPool = async (items, processItem, poolSize) => {
+// broadcast events to list of relays
+const broadcastEvents = async (data) => {
+  await processInPool(relays, (relay, poolStatus) => sendToRelay(relay, data, poolStatus), 10, (progress) => $('#broadcasting-progress').val(progress))
+
+  displayRelayStatus(relayStatus)
+}
+
+const processInPool = async (items, processItem, poolSize, onProgress) => {
   let pool = {};
   let poolStatus = {}
   let remaining = [...items]
@@ -329,7 +344,7 @@ const processInPool = async (items, processItem, poolSize) => {
       }
     }
 
-    $('#fetching-progress').val(items.length - remaining.length)
+    onProgress(items.length - remaining.length)
   }
 
   await Promise.allSettled(Object.values(pool));
@@ -411,20 +426,6 @@ const sendToRelay = async (relay, data, relayStatus) =>
     }
   })
 
-// broadcast events to list of relays
-const broadcastEvents = async (data) => {
-  // batch processing of 10 relays
-  let broadcastFunctions = [...relays]
-  let relayStatus = {}
-  while (broadcastFunctions.length) {
-    let relaysForThisRound = broadcastFunctions.splice(0, 10)
-    $('#broadcasting-progress').val(relays.length - broadcastFunctions.length)
-    await Promise.allSettled( relaysForThisRound.map((relay) => sendToRelay(relay, data, relayStatus)) )
-  }
-
-  displayRelayStatus(relayStatus)
-}
-
 async function generateNostrEventId(msg) {
   const digest = [
       0,