Illustrations/web/templates/entry_edit.html

266 lines
9.0 KiB
HTML

{% extends "base.html" %}
{% block body_class %}themed-bg{% endblock %}
{% load static %}
{% block content %}
<div class="page">
<!-- Top bar -->
<div class="result-toolbar">
<div class="rt-left">
<a class="btn btn-secondary" href="{% url 'entry_view' entry.id %}">← Back to Entry</a>
<span class="rt-count">Editing: #{{ entry.id }}</span>
</div>
<div class="rt-right">
<a class="btn" href="{% url 'entry_view' entry.id %}">Cancel</a>
<button form="entry-edit-form" class="btn btn-primary">Save</button>
</div>
</div>
<!-- Card -->
<div class="card entry-form modern-form" style="padding: 24px; margin-bottom: 60px;">
<form id="entry-edit-form" method="post">
{% csrf_token %}
<div class="f-grid">
<div class="f-row">
<div class="f-label" style="font-weight: 600; font-size: 1.05em;">Subject</div>
<div class="f-control">
{{ form.subject }}
</div>
</div>
<div class="f-row tall">
<div class="f-label" style="font-weight: 600; font-size: 1.05em;">Illustration</div>
<div class="f-control">
{{ form.illustration }}
</div>
</div>
<div class="f-row tall">
<div class="f-label" style="font-weight: 600; font-size: 1.05em;">Application</div>
<div class="f-control">
{{ form.application }}
</div>
</div>
<div class="f-row">
<div class="f-label" style="font-weight: 600; font-size: 1.05em;">Scripture</div>
<div class="f-control">
{{ form.scripture_raw }}
</div>
</div>
<div class="f-row">
<div class="f-label" style="font-weight: 600; font-size: 1.05em;">Source</div>
<div class="f-control">
{{ form.source }}
</div>
</div>
<div class="f-row">
<div class="f-label" style="font-weight: 600; font-size: 1.05em;">Talk Title</div>
<div class="f-control">
{{ form.talk_title }}
</div>
</div>
<div class="f-row">
<div class="f-label" style="font-weight: 600; font-size: 1.05em;">Talk Number</div>
<div class="f-control">
{{ form.talk_number }}
</div>
</div>
<!-- Combined row for Entry Code + Date Added + Date Edited -->
<div class="f-row" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
<div>
<div class="f-label" style="font-weight: 600; font-size: 1.05em;">Entry Code</div>
<div class="f-control">
{{ form.entry_code }}
</div>
</div>
<div>
<div class="f-label" style="font-weight: 600; font-size: 1.05em;">Date Added</div>
<div class="f-control">
{{ form.date_added }}
</div>
</div>
<div>
<div class="f-label" style="font-weight: 600; font-size: 1.05em;">Date Edited</div>
<div class="f-control">
{{ form.date_edited }}
</div>
</div>
</div>
</div>
<!-- bottom actions -->
<div class="form-actions bottom-actions" style="margin-top: 20px;">
<a class="btn btn-secondary" href="{% url 'entry_view' entry.id %}">Cancel</a>
<button class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
<!-- Talk title auto-fill & auto-date -->
<script>
(function () {
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;
const isEffectivelyEmpty = (s) => {
const t = (s || "").trim();
return t === "" || t === "-" || t === "—";
};
let userTyped = false;
titleEl.addEventListener("input", () => {
userTyped = !isEffectivelyEmpty(titleEl.value);
if (!userTyped) titleEl.dataset.autofilled = "0";
});
function maybeAutofill() {
const n = numberEl.value;
const mapped = talkMap && talkMap[n] ? talkMap[n] : "";
if (!userTyped) {
if (mapped) {
titleEl.value = mapped;
titleEl.dataset.autofilled = "1";
} else if (titleEl.dataset.autofilled === "1") {
titleEl.value = "";
titleEl.dataset.autofilled = "0";
}
}
}
numberEl.addEventListener("change", maybeAutofill);
if (isEffectivelyEmpty(titleEl.value)) {
userTyped = false;
maybeAutofill();
} else {
userTyped = true;
}
}
fetch(talksUrl, {cache: "no-store"})
.then(r => r.ok ? r.json() : {})
.then(map => wireAutofill(map))
.catch(() => wireAutofill({}));
// Auto-fill today's date for Date Edited if empty
const dateEditedEl = document.getElementById("id_date_edited");
if (dateEditedEl && !dateEditedEl.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');
dateEditedEl.value = `${yyyy}-${mm}-${dd}`;
}
})();
</script>
<style>
.scripture-valid,
textarea.scripture-valid,
input.scripture-valid { background-color: hsl(140 80% 92% / 0.8); transition: background-color .15s ease; }
.scripture-invalid,
textarea.scripture-invalid,
input.scripture-invalid { background-color: hsl(0 80% 94% / 0.8); transition: background-color .15s ease; }
</style>
<!-- Scripture Validation -->
<script>
(function () {
const el = document.getElementById("id_scripture_raw");
if (!el) return;
const WOL = new Set([
"Ge","Ex","Le","Nu","De","Jos","Jg","Ru","1Sa","2Sa","1Ki","2Ki","1Ch","2Ch","Ezr","Ne","Es","Job","Ps","Pr","Ec","Ca","Isa","Jer","La","Eze","Da","Ho","Joe","Am","Ob","Jon","Mic","Na","Hab","Zep","Hag","Zec","Mal",
"Mt","Mr","Lu","Joh","Ac","Ro","1Co","2Co","Ga","Eph","Php","Col","1Th","2Th","1Ti","2Ti","Tit","Phm","Heb","Jas","1Pe","2Pe","1Jo","2Jo","3Jo","Jude","Re"
]);
const FULL = new Map([
["genesis","Ge"],["exodus","Ex"],["leviticus","Le"],["numbers","Nu"],["deuteronomy","De"],
["joshua","Jos"],["judges","Jg"],["ruth","Ru"],
["1 samuel","1Sa"],["2 samuel","2Sa"],["1 kings","1Ki"],["2 kings","2Ki"],
["1 chronicles","1Ch"],["2 chronicles","2Ch"],
["ezra","Ezr"],["nehemiah","Ne"],["esther","Es"],["job","Job"],["psalms","Ps"],["psalm","Ps"],
["proverbs","Pr"],["ecclesiastes","Ec"],["song of solomon","Ca"],["song of songs","Ca"],
["isaiah","Isa"],["jeremiah","Jer"],["lamentations","La"],["ezekiel","Eze"],["daniel","Da"],
["hosea","Ho"],["joel","Joe"],["amos","Am"],["obadiah","Ob"],["jonah","Jon"],["micah","Mic"],
["nahum","Na"],["habakkuk","Hab"],["zephaniah","Zep"],["haggai","Hag"],["zechariah","Zec"],["malachi","Mal"],
["matthew","Mt"],["mark","Mr"],["luke","Lu"],["john","Joh"],["acts","Ac"],["romans","Ro"],
["1 corinthians","1Co"],["2 corinthians","2Co"],["galatians","Ga"],["ephesians","Eph"],
["philippians","Php"],["colossians","Col"],
["1 thessalonians","1Th"],["2 thessalonians","2Th"],
["1 timothy","1Ti"],["2 timothy","2Ti"],
["titus","Tit"],["philemon","Phm"],["hebrews","Heb"],["james","Jas"],
["1 peter","1Pe"],["2 peter","2Pe"],
["1 john","1Jo"],["2 john","2Jo"],["3 john","3Jo"],
["jude","Jude"],["revelation","Re"]
]);
function splitBookAndRest(s) {
const m = s.match(/^(.+?)\s+(\d{1,3}(?:\s*:\s*.*)?)$/);
return m ? {book: m[1], rest: m[2]} : null;
}
function lookupBookCode(bookRaw) {
let b = bookRaw.trim();
// allow trailing period
if (b.endsWith(".")) b = b.slice(0, -1);
const fullKey = b.toLowerCase().replace(/\s+/g, " ");
if (FULL.has(fullKey)) return FULL.get(fullKey);
const maybeAbbr = b.replace(/^([1-3])\s+([A-Za-z]+)/, (_, n, letters) => n + letters);
if (WOL.has(maybeAbbr)) return maybeAbbr;
if (WOL.has(b)) return b;
return null;
}
const versesRe = /^(\d{1,3})$|^(\d{1,3}):\s*(\d{1,3}(?:\s*-\s*(?:\d{1,3}|\d{1,3}:\d{1,3}))?(?:\s*,\s*\d{1,3}(?:\s*-\s*(?:\d{1,3}|\d{1,3}:\d{1,3}))?)*)$/;
function isValidSingleRef(ref) {
const s = ref.trim();
if (!s) return false;
const parts = splitBookAndRest(s);
if (!parts) return false;
const code = lookupBookCode(parts.book);
if (!code) return false;
const rest = (parts.rest || "").trim();
if (!rest) return false;
return versesRe.test(rest);
}
function validateAll() {
const raw = el.value || "";
const parts = raw.split(";").map(t => t.trim()).filter(Boolean);
if (parts.length === 0) {
el.classList.remove("scripture-valid","scripture-invalid");
return;
}
const allValid = parts.every(isValidSingleRef);
el.classList.toggle("scripture-valid", allValid);
el.classList.toggle("scripture-invalid", !allValid);
}
el.addEventListener("input", validateAll);
el.addEventListener("change", validateAll);
validateAll();
})();
</script>
{% endblock %}