AudioBookRequest/templates/settings_page/download.html

{% extends "settings_page/base.html" %} {% block head %}
<title>Settings - Download</title>
<link href="/nouislider.css" rel="stylesheet" />
<script src="/nouislider.js"></script>
<script>
  const createSlider = (sliderId, fromId, toId, start, stop) => {
    const slider = document.getElementById(sliderId);
    noUiSlider.create(slider, {
      start: [start, stop],
      connect: true,
      range: {
        min: 0,
        max: 1000,
      },
    });
    // set correct value on initial load
    from = document.getElementById(fromId);
    to = document.getElementById(toId);
    from.value = start;
    to.value = stop;
    slider.noUiSlider.on("update", function (values, handle) {
      if (handle === 0) {
        document.getElementById(fromId).value =
          values[0] < 1000 ? values[0] : Infinity;
      } else {
        document.getElementById(toId).value =
          values[1] < 1000 ? values[1] : Infinity;
      }
    });
  };
</script>
{% endblock %} {% block content %}

<div class="flex flex-col">
  <h2 class="text-lg">Download</h2>

  {% block form %}
  <form
    class="flex flex-col gap-2"
    hx-post="/settings/download"
    hx-disabled-elt="#save-button"
    hx-target="this"
  >
    {% if success %}
    <script>
      toast("{{success|safe}}", "success");
    </script>
    {% endif %}

    <div
      class="w-full flex items-center justify-between gap-2 border-t pt-2 border-base-200"
    >
      <label for="auto-download">Auto Download</label>
      <!-- prettier-ignore -->
      <input
      id="auto-download"
      name="auto_download"
      type="checkbox"
      class="checkbox"
      {% if auto_download %}checked{% endif %}
      />
    </div>

    <h3 class="border-t pt-2 border-base-200">
      Quality <span class="text-xs">(kbit/s)</span>
    </h3>

    <div>
      <label for="flac-range">flac</label>
      <div class="flex w-full items-center">
        <input
          id="flac-from"
          name="flac_from"
          type="text"
          class="border-none w-[4rem] text-center"
          readonly
          value="{{ flac_range.from_kbits }}"
        />
        <div
          id="flac-range"
          class="w-full slider-no-overlap slider-round"
        ></div>
        <input
          id="flac-to"
          name="flac_to"
          type="text"
          class="border-none w-[4rem] text-center"
          readonly
          value="{{ flac_range.to_kbits }}"
        />
        <script>
          createSlider(
            "flac-range",
            "flac-from",
            "flac-to",
            "{{flac_range.from_kbits}}",
            "{{flac_range.to_kbits}}",
          );
        </script>
      </div>
    </div>

    <div>
      <label for="m4b-range">m4b</label>
      <div class="flex w-full items-center">
        <input
          id="m4b-from"
          name="m4b_from"
          type="text"
          class="border-none w-[4rem] text-center"
          readonly
          value="{{ m4b_range.from_kbits }}"
        />
        <div id="m4b-range" class="w-full slider-no-overlap slider-round"></div>
        <input
          id="m4b-to"
          name="m4b_to"
          type="text"
          class="border-none w-[4rem] text-center"
          readonly
          value="{{ m4b_range.to_kbits }}"
        />
        <script>
          createSlider(
            "m4b-range",
            "m4b-from",
            "m4b-to",
            "{{m4b_range.from_kbits}}",
            "{{m4b_range.to_kbits}}",
          );
        </script>
      </div>
    </div>

    <div>
      <label for="mp3-range">mp3</label>
      <div class="flex w-full items-center">
        <input
          id="mp3-from"
          name="mp3_from"
          type="text"
          class="border-none w-[4rem] text-center"
          readonly
          value="{{ mp3_range.from_kbits }}"
        />
        <div id="mp3-range" class="w-full slider-no-overlap slider-round"></div>
        <input
          id="mp3-to"
          name="mp3_to"
          type="text"
          class="border-none w-[4rem] text-center"
          readonly
          value="{{ mp3_range.to_kbits }}"
        />
        <script>
          createSlider(
            "mp3-range",
            "mp3-from",
            "mp3-to",
            "{{mp3_range.from_kbits}}",
            "{{mp3_range.to_kbits}}",
          );
        </script>
      </div>
    </div>

    <div>
      <label for="unknown_audio-range">Unknown Audio</label>
      <div class="flex w-full items-center">
        <input
          id="unknown_audio-from"
          name="unknown_audio_from"
          type="text"
          class="border-none w-[4rem] text-center"
          readonly
          value="{{ unknown_audio_range.from_kbits }}"
        />
        <div
          id="unknown_audio-range"
          class="w-full slider-no-overlap slider-round"
        ></div>
        <input
          id="unknown_audio-to"
          name="unknown_audio_to"
          type="text"
          class="border-none w-[4rem] text-center"
          readonly
          value="{{ unknown_audio_range.to_kbits }}"
        />
        <script>
          createSlider(
            "unknown_audio-range",
            "unknown_audio-from",
            "unknown_audio-to",
            "{{unknown_audio_range.from_kbits}}",
            "{{unknown_audio_range.to_kbits}}",
          );
        </script>
      </div>
    </div>

    <div>
      <label for="unknown-range">Unknown</label>
      <div class="flex w-full items-center">
        <input
          id="unknown-from"
          name="unknown_from"
          type="text"
          class="border-none w-[4rem] text-center"
          readonly
          value="{{ unknown_range.from_kbits }}"
        />
        <div
          id="unknown-range"
          class="w-full slider-no-overlap slider-round"
        ></div>
        <input
          id="unknown-to"
          name="unknown_to"
          type="text"
          class="border-none w-[4rem] text-center"
          readonly
          value="{{ unknown_range.to_kbits }}"
        />
        <script>
          createSlider(
            "unknown-range",
            "unknown-from",
            "unknown-to",
            "{{unknown_range.from_kbits}}",
            "{{unknown_range.to_kbits}}",
          );
        </script>
      </div>
    </div>

    <div class="w-full flex items-center justify-between">
      <label for="min-seeders">Min Seeders</label>
      <input
        id="min-seeders"
        name="min_seeders"
        type="number"
        class="input"
        placeholder="2"
        value="{{ min_seeders }}"
      />
    </div>

    <div class="w-full flex items-center justify-between">
      <label for="name-ratio">Author/Narrator Similarity Ratio</label>
      <input
        id="name-ratio"
        name="name_ratio"
        type="number"
        class="input"
        placeholder="75"
        value="{{ name_ratio }}"
      />
    </div>

    <div class="w-full flex items-center justify-between">
      <label for="title-ratio">Title Similarity Ratio</label>
      <input
        id="title-ratio"
        name="title_ratio"
        type="number"
        class="input"
        placeholder="90"
        value="{{ title_ratio }}"
      />
    </div>

    <button id="save-button" type="submit" class="btn btn-primary">Save</button>
  </form>
  {% endblock %}

  <hr class="my-4 border-base-200" />

  {% block flags %}
  <form
    id="flags-form"
    hx-post="/settings/download/indexer-flag"
    hx-target="this"
    hx-disabled-elt="#add-button"
  >
    <div class="flex gap-1 items-end w-full">
      <div class="flex flex-col w-full">
        <label for="indexer-flag">Indexer flag</label>
        <input
          required
          id="indexer-flag"
          name="flag"
          type="text"
          class="input"
          placeholder="freeleech"
        />
      </div>

      <div class="flex flex-col w-full">
        <label for="flag-score">Score</label>
        <input
          required
          id="flag-score"
          name="score"
          type="number"
          class="input"
          placeholder="10"
        />
      </div>
      <button type="submit" class="btn btn-primary" id="add-button">Add</button>
    </div>

    {% if indexer_flags %}
    <table class="table">
      <thead>
        <tr>
          <th>Flag</th>
          <th class="w-full">Score</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for flag in indexer_flags %}
        <tr>
          <td>{{ flag.flag }}</td>
          <td>{{ flag.score }}</td>
          <td>
            <button
              title="Delete flag"
              type="button"
              class="btn btn-square delete-button"
              hx-delete="/settings/download/indexer-flag/{{ flag.flag|quote_plus }}"
              hx-disabled-elt=".delete-button"
              hx-target="#flags-form"
            >
              {% include 'icons/trash.html' %}
            </button>
          </td>
        </tr>

        {% endfor %}
      </tbody>
    </table>
    {% endif %}
  </form>
  {% endblock %}

  <hr class="my-4 border-base-200" />

  <div class="flex flex-col gap-2">
    <h2 class="text-lg text-error">Danger Zone</h2>
    <button
      type="button"
      class="btn btn-error"
      hx-delete="/settings/download"
      hx-disabled-elt="this"
    >
      Reset download settings
    </button>
  </div>
</div>
{% endblock %}