Create search.js

ircradio/static/search.js

@@ -0,0 +1,79 @@
+// tracks input in 'search' field (id=general)
+let input_so_far = "";
+
+// cached song list and cached queries
+var queries = [];
+var songs = new Map([]);
+
+// track async fetch and processing
+var returned = false;
+
+$("#general").keyup( function() {
+
+  input_so_far = document.getElementsByName("general")[0].value;
+
+  if (input_so_far.length < 3) { 
+    $("#table tr").remove();
+    return 
+  };
+
+  if (!queries.includes(input_so_far.toLowerCase() ) ) {
+    queries.push(input_so_far.toLowerCase() );
+    returned = false;
+
+    const sanitized_input = encodeURIComponent( input_so_far );
+    const url = 'https://' + document.domain + ':' + location.port + '/search?name=' + sanitized_input + '&limit=15&offset=0'
+
+    const LoadData = async () => {
+      try {
+        const res = await fetch(url);
+        console.log("Status code 200 or similar: " + res.ok);
+        const data = await res.json();
+        return data;
+      } catch(err) {
+        console.error(err)
+      }
+    };
+  
+    LoadData().then(newSongsJson => {
+      newSongsJson.forEach( (new_song) => {
+        let already_have = false;
+        songs.forEach( (_v, key) => {
+          if (new_song.id == key) { already_have = true; return; };
+        })
+        if (!already_have) { songs.set(new_song.utube_id, new_song) }
+      })
+    }).then( () => { returned = true } );  
+
+  };
+
+  function renderTable () {
+
+    if (returned) {
+    
+      $("#table tr").remove();
+    
+      var filtered = new Map(
+        [...songs]
+        .filter(([k, v]) => 
+          ( v.title.toLowerCase().includes( input_so_far.toLowerCase() ) ) || 
+          ( v.added_by.toLowerCase().includes( input_so_far.toLowerCase() ) ) )
+      );
+
+      filtered.forEach( (song) => {
+        let added = song.added_by;
+        let added_link = '<a href="/library?name=' + added + '" target="_blank" rel="noopener noreferrer">' + added + '</a>';
+        let title  = song.title;
+        let id = song.utube_id;
+        let id_link = '<a href="https://www.youtube.com/watch?v=' + id + '" target="_blank" rel="noopener noreferrer">' + id + '</a>';
+        $('#table tbody').append('<tr><td>'+id_link+'</td><td>'+added_link+'</td><td>'+title+'</td></tr>')
+      })
+
+    } else {
+      setTimeout(renderTable, 30); // try again in 30 milliseconds
+    }
+  };
+
+  renderTable();
+
+});