AudioBookRequest/templates/search.html

{% extends "base.html" %} {% block head %}
<title>Search</title>
<script>
  const onSearch = () => {
    const search_term = document.querySelector("input").value;
    document.getElementById("search").disabled = true;
    document.getElementById("search-text").style.display = "none";
    document.getElementById("search-spinner").style.display = "inline-block";
    window.location.href = `/search?q=${encodeURIComponent(search_term)}`;
  };
  const onRequest = (index, asin) => {
    const checkbox = document.getElementById(`checkbox-${index}`);
    fetch(
      `/search/request?asin=${encodeURIComponent(asin)}`,
      {
        method: checkbox.checked ? "POST" : "DELETE",
      },
    );
  };
const onPageChange = (page) => {
  const url = new URL(window.location);
  url.searchParams.set("page", page);
  window.location = url;
};
</script>
{% endblock %} {% block body %}
<div class="w-full h-screen flex items-center justify-center py-8 overflow-x-hidden">
  <div class="flex flex-col h-full gap-4 items-center">
    <form class="flex items-start gap-2 w-full" onsubmit="onSearch();">
      <input
        name="q"
        class="input input-bordered"
        placeholder="Book name..."
        value="{{ search_term }}"
      />
      <select class="select" name="region">
        {% for region in regions %}
        <option
          value="{{ region }}"
          {% if region == selected_region %}selected="selected"{% endif %}
        >
          {{ region }}
        </option>
        {% endfor %}
      </select>
      <button id="search" class="btn btn-primary" type="submit">
        <span id="search-text">Search</span>
        <span id="search-spinner" class="loading" style="display: none"></span>
      </button>
    </form>

    <div
      class="max-w-[80vw] grid gap-1 sm:gap-2 p-1 grid-flow-row grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 2xl:grid-cols-7"
    >
      {% for book in search_results %}
      <div class="flex flex-col">
        <div
          class="relative w-[10rem] h-[10rem] rounded-md overflow-hidden shadow-md shadow-white"
        >
          <img
            class="object-cover w-full h-full"
            src="{{ book.cover_image }}"
            alt="{{ book.title }}"
          />

          <div class="absolute top-0 right-0 bg-black/50 size-6 rounded-bl-md">
            <label class="swap swap-flip">
              <input
                id="checkbox-{{ loop.index }}"
                type="checkbox"
                onclick="onRequest('{{ loop.index }}','{{ book.asin }}');"
                {% if book.already_requested %}checked{% endif %}
              />
              <svg
                class="swap-off"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                width="24"
                height="24"
                stroke-width="2"
                style="--darkreader-inline-stroke: currentColor"
                data-darkreader-inline-stroke=""
              >
                <path d="M12 5l0 14"></path>
                <path d="M5 12l14 0"></path>
              </svg>
              <svg
                class="swap-on text-success"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                style="--darkreader-inline-stroke: currentColor"
                data-darkreader-inline-stroke=""
                width="24"
                height="24"
                stroke-width="2"
              >
                <path d="M5 12l5 5l10 -10"></path>
              </svg>
            </label>
          </div>
        </div>

        <div class="text-sm text-white" title="Title">{{ book.title }}</div>
        {% if book.subtitle %}<div class="text-neutral-content text-xs" title="Subtitle">{{ book.subtitle }}</div>{% endif %}
        <div class="text-neutral-content text-xs" title="Authors">
          {{ book.authors | join(", ") }}
        </div>
      </div>
      {% endfor %}
    </div>
    
    {% if search_results %}
    <div class="join">
      <button class="join-item btn" onclick="onPageChange('{{ page-1 }}')" {% if page==0 %}disabled{% endif %}>«</button>
      <button class="join-item btn flex flex-col" onclick="onPageChange('{{ 0 }}')" {% if page==0 %}disabled{% endif %} style="gap: 0;">
        Page {{ page+1 }}
        <span class="text-[0.5rem]">back to first</span>
      </button>  
      <button class="join-item btn" onclick="onPageChange('{{ page+1 }}')">»</button>
    </div>
    {% endif %}

    {% if not search_results %}
    <div role="alert" class="alert">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        class="stroke-info h-6 w-6 shrink-0">
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      {% if search_term %}
      <span>No results found for "{{ search_term }}"</span>
      {% else %}
      <span>Search for a book</span>
      {% endif %}
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}