Illustrations/web/templates/entry_add.html

{% extends "base.html" %}
{% load static %}
{% block title %}New Entry - Illustrations DB{% endblock %}
{% block body_class %}themed-bg{% endblock %}

{% block content %}
<div class="container">
  <h1 class="page-title">Record New Illustration</h1>
  <p class="page-subtitle">Use this form to save a new illustration that you encountered.  Be sure to properly catagorize your entry with comma seperated subjects and to use the standard bible book abbreviations when recording a scripture.</p>

  <form method="post" class="search-form card">
    {% csrf_token %}

    <div class="form-grid">
      <div class="form-row">
        <label>Subject</label>
        {{ form.subject }}
        {% if form.subject.errors %}<div class="err">{{ form.subject.errors|striptags }}</div>{% endif %}
      </div>

      <div class="form-row">
        <label>Illustration</label>
        {{ form.illustration }}
        {% if form.illustration.errors %}<div class="err">{{ form.illustration.errors|striptags }}</div>{% endif %}
      </div>

      <div class="form-row">
        <label>Application</label>
        {{ form.application }}
        {% if form.application.errors %}<div class="err">{{ form.application.errors|striptags }}</div>{% endif %}
      </div>

      <div class="form-row two">
        <div>
          <label>Scripture</label>
          {{ form.scripture_raw }}
          {% if form.scripture_raw.errors %}<div class="err">{{ form.scripture_raw.errors|striptags }}</div>{% endif %}
        </div>
        <div>
          <label>Source</label>
          {{ form.source }}
          {% if form.source.errors %}<div class="err">{{ form.source.errors|striptags }}</div>{% endif %}
        </div>
      </div>

      <div class="form-row two">
        <div>
          <label>Talk Title</label>
          {{ form.talk_title }}
          {% if form.talk_title.errors %}<div class="err">{{ form.talk_title.errors|striptags }}</div>{% endif %}
        </div>
        <div>
          <label>Talk Number</label>
          {{ form.talk_number }}
          {% if form.talk_number.errors %}<div class="err">{{ form.talk_number.errors|striptags }}</div>{% endif %}
        </div>
      </div>

      <div class="form-row two">
        <div>
          <label>Code</label>
          {{ form.entry_code }}
          {% if form.entry_code.errors %}<div class="err">{{ form.entry_code.errors|striptags }}</div>{% endif %}
        </div>
        <div>
          <label>Dates</label>
          <div class="two">
            {{ form.date_added }} {{ form.date_edited }}
          </div>
          {% if form.date_added.errors %}<div class="err">{{ form.date_added.errors|striptags }}</div>{% endif %}
          {% if form.date_edited.errors %}<div class="err">{{ form.date_edited.errors|striptags }}</div>{% endif %}
        </div>
      </div>
    </div>

    <div class="result-toolbar" style="margin-top:18px;">
      <div class="rt-left"></div>
      <div class="rt-right">
        <a class="btn btn-secondary" href="{% url 'search' %}">Cancel</a>
        <button class="btn btn-primary" type="submit">Save</button>
      </div>
    </div>
  </form>
</div>

<script>
(function () {
  // Gracefully load the mapping, then wire up behavior
  const talksUrl = "{% static 'talks.json' %}";

  function wireAutofill(talkMap) {
    const numberEl = document.getElementById("id_talk_number");
    const titleEl  = document.getElementById("id_talk_title");
    if (!numberEl || !titleEl) return;

    // If the user types anything, we mark the field "dirty" so we won't overwrite it.
    let userTyped = false;
    titleEl.addEventListener("input", () => {
      // If the user cleared the field, allow auto-fill again.
      userTyped = titleEl.value.trim().length > 0;
      if (!userTyped) titleEl.dataset.autofilled = "0";
    });

    function maybeAutofill() {
      const n = numberEl.value;
      const mapped = talkMap && talkMap[n] ? talkMap[n] : "";

      // Only set if the user hasn't typed their own value
      if (!userTyped) {
        if (mapped) {
          titleEl.value = mapped;
          titleEl.dataset.autofilled = "1";
        } else if (titleEl.dataset.autofilled === "1") {
          // Clear if the previous value was auto-filled and the new number has no mapping
          titleEl.value = "";
          titleEl.dataset.autofilled = "0";
        }
      }
    }

    // On change
    numberEl.addEventListener("change", maybeAutofill);

    // Initial fill on page load if title is empty
    if (titleEl.value.trim() === "") {
      userTyped = false;
      maybeAutofill();
    } else {
      // User already has a value; don't overwrite
      userTyped = true;
    }
  }

  // Try to fetch the mapping; if it fails, we just silently skip auto-fill
  fetch(talksUrl, {cache: "no-store"})
    .then(r => r.ok ? r.json() : {})
    .then(map => wireAutofill(map))
    .catch(() => wireAutofill({}));
})();
</script>
{% endblock %}