joshlaymon/Illustrations
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update web/templates/entry_add.html

Browse Source
This commit is contained in:
Joshua Laymon 2025-08-14 22:49:37 +00:00
parent 32201bc589
commit d206e37f3b
1 changed files with 56 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
web/templates/entry_add.html
View File

@ -8,36 +8,36 @@
<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">
<form method="post" class="search-form card add-form-card">
{% csrf_token %}
<div class="form-grid">
<div class="form-row">
<label>Subject</label>
<label class="f-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>
<label class="f-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>
<label class="f-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>
<label class="f-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>
<label class="f-label">Source</label>
{{ form.source }}
{% if form.source.errors %}<div class="err">{{ form.source.errors|striptags }}</div>{% endif %}
</div>
@ -45,29 +45,32 @@
<div class="form-row two">
<div>
<label>Talk Title</label>
<label class="f-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>
<label class="f-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">
<!-- Combined row: Entry Code + Date Added + Date Edited -->
<div class="form-row three">
<div>
<label>Code</label>
<label class="f-label">Entry 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>
<label class="f-label">Date Added</label>
{{ form.date_added }}
{% if form.date_added.errors %}<div class="err">{{ form.date_added.errors|striptags }}</div>{% endif %}
</div>
<div>
<label class="f-label">Date Edited</label>
{{ form.date_edited }}
{% if form.date_edited.errors %}<div class="err">{{ form.date_edited.errors|striptags }}</div>{% endif %}
</div>
</div>
@ -83,9 +86,37 @@
</form>
</div>
<style>
/* Card padding + breathing room */
.add-form-card {
padding: 22px 22px 18px;
}
.form-grid { display: grid; gap: 16px; }
.form-row { display: block; }
.form-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
/* Bigger, bold labels (but not huge) */
.f-label {
display: block;
font-weight: 700;
font-size: 15px;
margin-bottom: 6px;
color: #111827;
}
/* Nudge inputs away from edges a bit more */
.search-input.input-hero { padding: 12px 14px; }
.textarea-hero { min-height: 140px; }
@media (max-width: 860px) {
.form-row.two, .form-row.three { grid-template-columns: 1fr; }
}
</style>
<script>
(function () {
// Gracefully load the mapping, then wire up behavior
// ----- Talk Number -> Talk Title auto-fill -----
const talksUrl = "{% static 'talks.json' %}";
function wireAutofill(talkMap) {
@ -93,10 +124,8 @@
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";
});
@ -104,38 +133,41 @@
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({}));
// ----- Auto-set today's date for Date Added (only if empty) -----
const dateAddedEl = document.getElementById("id_date_added");
if (dateAddedEl && !dateAddedEl.value) {
const today = new Date();
const yyyy = today.getFullYear();
const mm = String(today.getMonth() + 1).padStart(2, "0");
const dd = String(today.getDate()).padStart(2, "0");
dateAddedEl.value = `${yyyy}-${mm}-${dd}`;
}
})();
</script>
{% endblock %}