Happy-Ripper-Docker/templates/browse.html

{% extends 'base.html' %} {% block content %}
  <div class="container">
    <form id="browse-form">
      <div class="mb-3">
        <input
          type="text"
          name="search"
          id="searchInput"
          placeholder="Album, Arist, Playlist..."
          class="form-control"
          required
        />
      </div>
  
  
      <button type="submit" class="btn btn-primary">Search</button>
    </form>
  </div>
  
  </br>

  <div class="container" id="results"></div>
  
  <script>
    async function enqueue(url, is_artist) {
      const formData = new FormData();
      formData.append("url", url);

      if (is_artist) {
        formData.append("is-channel-check", "");
      }

      const response = await fetch("/rip", {
        method: "POST",
        body: formData,
      });
  
      const data = await response.json();
    }

    const searchInput = document.getElementById("searchInput");
    const results = document.getElementById("results");
  
    document
      .getElementById("browse-form")
      .addEventListener("submit", async function (e) {
        e.preventDefault();
  
        const formData = new FormData(this);
  
        const response = await fetch("/search", {
          method: "POST",
          body: formData,
        });
  
        const data = await response.json();
        console.log(data)

        results.innerHTML = "";
        for (release of data) {
          var button = "url" in release ? `
              <div class="col">
                <button class="btn btn-primary" onclick="enqueue('${release.url}', ${release.category == 'artist'})">
                  Enqueue
                </button>
              </div>` : "";

          results.innerHTML += `
          <div class="card" style="max-width: 720px;">
            <div class="row">
              <div class="col">
                <img 
                  src="${release.thumbnails[0].url}" 
                  class="card-img-top"
                  style="max-width: 120px;"
                  >
              </div>

              <div class="col">
                <div class="card-body">
                  <h5 class="card-title">${release.title}</h5>
                  <p class="card-text">${release.category} • ${release.artist}</p>
                </div>
              </div>

              ${button}

            </div>
          </div>
          <br>
          `;
        }
      });
  </script>
{% endblock %}