adding date range filter

2025-07-22 13:15:33 +00:00 · 2024-01-28 17:28:21 -05:00 · 2024-01-28 17:28:21 -05:00 · 6c97e127bc
commit 6c97e127bc
parent e7ded1e68b
4 changed files with 81 additions and 101 deletions
--- a/index.html
+++ b/index.html
@ -39,44 +39,45 @@
    
    <main class="container">
      <div class="header-space">
-        <h1>Welcome to Nostryfied</h1>
+        <h1>Backup your Nostr Events</h1>
      </div>
-      <h2><b>Nostryfied</b> offers an <b>Broadcast & Export Service</b> that allows you to <b>Download a 
-        Copy of your Data</b> & when you use this service, all of your data will also be <b>Broadcasted to Major Relays</b> 
-         on the network. <br><br>This design ensures that the data is <b> Widely Distributed</b> 
-         and makes it more <b>Resistant to Censorship.</b>
-      </h2>
      <div>
        <form>
          <div>
            <form>
-              <div class="space-between-small">
-                <div class="space-between">
-                  <b>From Relays</b>
-                </div>
-              </div>
-
              <div class="space-between-small">
                <p>
+                  From relays
                  <input
                    type="text"
+                    class="cool-field" 
                    id="relaySet"
                    name="relaySet"
-                    placeholder="Force relays or blank to use your list: wss://nos.lol"
-                    style="width: 180px"
-                    value="" />
+                    placeholder="wss://nos.lol, wss://nostr.mom or leave blank for all"
+                    value="wss://nos.lol" />
+                </p>
+              </div>
+
+              <div class="space-between-small-left">
+                <p>
+                  Created from
+                  <input type="date" class="cool-field" id="startDate" name="startDate" min="2020-01-01" value="2020-01-01"  />
+                  to
+                  <input type="date" class="cool-field" id="endDate" name="endDate" min="2020-01-01"  />
                </p>
              </div>

              <div class="space-between-small">
                <p>
+                  By and about
                  <input
                    type="text"
                    id="pubkey"
                    name="pubkey"
+                    class="cool-field" 
                    onchange="pubkeyOnChange()"
                    placeholder="Public key (npub or hex)"
-                    style="width: 180px"
+                    value=""
                    required />
                </p>
              </div>
@ -106,35 +107,15 @@
          </div>
          
          <style>
-            #pubkey {
-              width: 600px; /* change width value */
+            .cool-field {
              font-size: 16px;
              padding: 5px;
              border: 1px solid #ccc;
              border-radius: 4px;
              box-sizing: border-box;
-              max-width: 100%;
-              margin: 0 auto;
-              display: block;
            }
            
-            #pubkey::placeholder {
-              color: #999;
-            }
-
-            #relaySet {
-              width: 600px; /* change width value */
-              font-size: 16px;
-              padding: 5px;
-              border: 1px solid #ccc;
-              border-radius: 4px;
-              box-sizing: border-box;
-              max-width: 100%;
-              margin: 0 auto;
-              display: block;
-            }
-            
-            #relaySet::placeholder {
+            .cool-field::placeholder {
              color: #999;
            }
            </style>
@ -198,52 +179,7 @@
          </p>
        </div>
      </div>
-      <div class="wrapper">
-        <div class="divider div-transparent"></div>
-        </div> 
-      <p>
-        <a href="https://formfaca.de/sm/t5B7tbyRB"
-          >Auto Backup (Wishlist)</a
-        >
-      </p> 
-      <div class="wrapper">
-        <div class="divider div-transparent"></div> 
-          <h4><b>Why you should Use this backup Service?</b></h1>
-        </div>
-        <h2>
-          Have you been using the new social network Nostr
-           that's <b>free, open, and not controlled</b> by the likes of Big Tech? 
-           If so, you might be wondering where your <b>data is stored and 
-           how you can get a copy of it.</b> Nostr is designed
-            with a <b>decentralized architecture</b> that stores your data on <b>multiple servers,</b>
-             making it more difficult for any one entity to control or access it. <br><br>
-            <b>Nostryfied</b> provides an <b>Export & Broadcast service</b> that allows you to <b>download a copy of your data,
-              & Broadcast it to all the major relays</b> although please note that this service is not a complete backup and might not
-               include all of your data.
-        </h4>
-        <p>
-          <a href="https://snort.social/p/npub1cmmswlckn82se7f2jeftl6ll4szlc6zzh8hrjyyfm9vm3t2afr7svqlr6f" class="linkbutton">Author</a>
-          <a href="https://snort.social/p/npub1ctpqas992k2ewy72f3qycnfveq8xewgx7kmyy9c8qcf2pjhzn33qauqp94" class="linkbutton">Support</a>
-        </p> 
-      </div>
-      <div class="wrapper">
-        <div class="divider div-transparent"></div> 
-          <h4><b>What is Nostr? How to get started</b></h1>
-        </div>
-        <h2>
-          <b>Notes and Other Stuff Transmitted by Relays</b> Nostr is a <b>relay-based network</b> that broadcasts your messages to multiple servers. 
-          This design helps to make the network more <b>resistant to censorship and also ensures 
-          that the network is distributed</b>, providing a higher level of <b>availability and reliability.</b> <br><br>
-          <b>NOSTR Lightning integrating</b> By integrating Bitcoin and Lightning into NOSTR, not only do users 
-          <b>unlock a decentralized way to transact funds,</b> but relays are also given a way to <b>monetize or control 
-          for denial-of-service (DOS) spam attacks.</b>
-        </h2>
-        <p>
-          <a href="https://nostr-resources.com/" class="linkbutton">Resources</a>&nbsp;&nbsp;
-          <a href="https://www.austrich.net/nostr/" class="linkbutton">Nostr Tools</a>
-        </p> 
-      </div>
-
+  
      <footer>
      <h5>

@ -261,5 +197,14 @@
    <script src="js/nostr-utils.js"></script>
    <script src="js/relays.js"></script>
    <script src="js/nostr-broadcast.js"></script>
+    <script> 
+      Date.prototype.toDateInputValue = (function() {
+          var local = new Date(this);
+          local.setMinutes(this.getMinutes() - this.getTimezoneOffset());
+          return local.toJSON().slice(0,10);
+      });
+
+      document.getElementById('endDate').value = new Date().toDateInputValue()
+    </script>
  </body>
 </html>
--- a/js/nostr-broadcast.js
+++ b/js/nostr-broadcast.js
@ -36,7 +36,19 @@ const fetchAndBroadcast = async () => {

  // get all events from relays
  const filters =[{ authors: [pubkey] }, { "#p": [pubkey] }]
-  const data = (await getEvents(filters, pubkey, relaySet)).sort((a, b) => b.created_at - a.created_at)
+
+  let date = new Date();
+  let offset = date.getTimezoneOffset() * 60;
+
+  const startDate = Date.parse($('#startDate').val())
+  const endDate = Date.parse($('#endDate').val())
+
+  const addedFilters = {
+    since: Math.floor((startDate - startDate % 864e5) / 1000) + offset, // 0:00
+    until: Math.floor((endDate - endDate % 864e5 + 864e5 - 1) / 1000) + offset // 23:59
+  }
+
+  const data = (await getEvents(filters, addedFilters, pubkey, relaySet)).sort((a, b) => b.created_at - a.created_at)

  // inform user fetching is done
  $('#fetching-status').html(txt.fetching + checkMark)
@ -44,15 +56,17 @@ const fetchAndBroadcast = async () => {

  const latestKind3 = data.filter((it) => it.kind == 3 && it.pubkey === pubkey)[0]  

+  $('#checking-relays-header-box').css('display', 'none')
+  $('#checking-relays-box').css('display', 'none')
+  // inform user that backup file (js format) is being downloaded
+
+  $('#file-download').html(txt.download)
+  downloadFile(data, 'nostr-backup.json')
+
  if (latestKind3) {
    const myRelaySet = JSON.parse(latestKind3.content)
    relays = Object.keys(myRelaySet).filter(url => myRelaySet[url].write).map(url => url)
-  
-    $('#checking-relays-header-box').css('display', 'none')
-    $('#checking-relays-box').css('display', 'none')
-    // inform user that backup file (js format) is being downloaded
-    $('#file-download').html(txt.download)
-    downloadFile(data, 'nostr-backup.js')
+
    // inform user that app is broadcasting events to relays
    $('#broadcasting-status').html(txt.broadcasting)
    // show and update broadcasting progress bar
--- a/js/nostr-utils.js
+++ b/js/nostr-utils.js
@ -48,9 +48,9 @@ const parseRelaySet = (commaSeparatedRelayString) => {

 // download js file
 const downloadFile = (data, fileName) => {
-  const prettyJs = 'const data = ' + JSON.stringify(data, null, 2)
+  const prettyJs = JSON.stringify(data, null, 2)
  const tempLink = document.createElement('a')
-  const taBlob = new Blob([prettyJs], { type: 'text/javascript' })
+  const taBlob = new Blob([prettyJs], { type: 'text/json' })
  tempLink.setAttribute('href', URL.createObjectURL(taBlob))
  tempLink.setAttribute('download', fileName)
  tempLink.click()
@ -120,7 +120,7 @@ const displayRelayStatus = (relayStatusAndCount) => {
 }

 // fetch events from relay, returns a promise
-const fetchFromRelay = async (relay, filters, pubkey, events, relayStatus) =>
+const fetchFromRelay = async (relay, filters, addedFilters, pubkey, events, relayStatus) =>
  new Promise((resolve, reject) => {
    try {
      updateRelayStatus(relay, "Starting", 0, undefined, undefined, relayStatus)
@ -138,13 +138,22 @@ const fetchFromRelay = async (relay, filters, pubkey, events, relayStatus) =>
      const subscriptions = Object.fromEntries(filters.map ( (filter, index) => {
        let id = "my-sub-"+index

+        let myFilter = filter
+
+        if (!myFilter.since && addedFilters.since) {
+          myFilter.since = addedFilters.since
+        }
+        if (!myFilter.until && addedFilters.until) {
+          myFilter.until = addedFilters.until
+        }
+
        return [ 
          id, {
            id: id,
            counter: 0,
            lastEvent: null,
            done: false,
-            filter: filter,
+            filter: myFilter,
            eventIds: new Set()
          }
        ]
@ -178,6 +187,9 @@ const fetchFromRelay = async (relay, filters, pubkey, events, relayStatus) =>
          try { 
            const { id } = data

+            if (addedFilters.since && data.created_at < addedFilters.since) return
+            if (addedFilters.until && data.created_at > addedFilters.until) return
+
            if (!subscriptions[subscriptionId].lastEvent || data.created_at < subscriptions[subscriptionId].lastEvent.created_at)
            subscriptions[subscriptionId].lastEvent = data

@ -228,7 +240,9 @@ const fetchFromRelay = async (relay, filters, pubkey, events, relayStatus) =>
          } else {
            //console.log("Limit: ", { ...filters[0], until: lastSub1Event.created_at })
            subscriptions[subscriptionId].counter = 0
-            ws.send(JSON.stringify(['REQ', subscriptions[subscriptionId].id, { ...subscriptions[subscriptionId].filter, until: subscriptions[subscriptionId].lastEvent.created_at } ]))
+            let newFilter = { ...subscriptions[subscriptionId].filter }
+            newFilter.until = subscriptions[subscriptionId].lastEvent.created_at
+            ws.send(JSON.stringify(['REQ', subscriptions[subscriptionId].id, newFilter]))
          }
        }

@ -297,7 +311,7 @@ const fetchFromRelay = async (relay, filters, pubkey, events, relayStatus) =>
  })

 // query relays for events published by this pubkey
-const getEvents = async (filters, pubkey, relaySet) => {
+const getEvents = async (filters, addedFilters, pubkey, relaySet) => {
  // events hash
  const events = {}

@ -309,7 +323,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, (progress) => $('#fetching-progress').val(progress))
+  await processInPool(myRelaySet, (relay, poolStatus) => fetchFromRelay(relay, filters, addedFilters, pubkey, events, poolStatus), 10, (progress) => $('#fetching-progress').val(progress))

  displayRelayStatus({})

@ -319,7 +333,7 @@ const getEvents = async (filters, pubkey, relaySet) => {

 // 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))
+  const poolStatus = await processInPool(relays, (relay, poolStatus) => sendToRelay(relay, data, poolStatus), 10, (progress) => $('#broadcasting-progress').val(progress))

  displayRelayStatus(relayStatus)
 }
@ -348,6 +362,8 @@ const processInPool = async (items, processItem, poolSize, onProgress) => {
  }

  await Promise.allSettled(Object.values(pool));
+
+  return poolStatus
 }

 const sendAllEvents = async (relay, data, relayStatus, ws) => {
--- a/style.css
+++ b/style.css
@ -159,6 +159,11 @@ a {
  justify-content: center;
 }

+.space-between-small-left {
+  display: flex;
+  justify-content: left;
+}
+
 h2 {
  font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
  font-size: 1em;
@ -193,7 +198,7 @@ h2 {
 }

 #pubkey {
-  width: 600px !important;
+  width: 450px !important;
 }

@media screen and (max-width: 1080px) {
@ -215,7 +220,7 @@ h2 {


 #relaySet {
-  width: 600px !important;
+  width: 450px !important;
 }

@media screen and (max-width: 1080px) {