diff options
Diffstat (limited to 'assets/js/ui/modal.js')
| -rw-r--r-- | assets/js/ui/modal.js | 31 |
1 files changed, 29 insertions, 2 deletions
diff --git a/assets/js/ui/modal.js b/assets/js/ui/modal.js index e110764..2fd8491 100644 --- a/assets/js/ui/modal.js +++ b/assets/js/ui/modal.js @@ -1,2 +1,29 @@ -// Phase 5: country detail modal -export function showCountryModal(countryData) {} +export function showCountryModal(countryData) { + document.getElementById("country-modal-title").textContent = countryData.country; + document.getElementById("country-modal-body").innerHTML = ` + <p><b>Prison Population:</b> ${_fmt(countryData.pop, "pop")}</p> + <p><b>Rate per 100,000 Citizens:</b> ${_fmt(countryData.rate, "rate")}</p> + <p><b>Females:</b> ${_fmt(countryData.females, "pct")}</p> + <p><b>Juveniles:</b> ${_fmt(countryData.juveniles, "pct")}</p> + <p><b>Occupancy:</b> ${_fmt(countryData.occupancy, "pct")}</p> + <p><b>Government:</b> ${_fmtGov(countryData.government)}</p> + `; + const el = document.getElementById("countryModal"); + (bootstrap.Modal.getInstance(el) || new bootstrap.Modal(el)).show(); +} + +function _fmt(val, type) { + if (val === "--" || val === null || val === undefined || (typeof val === "number" && isNaN(val))) { + return "<span class='text-danger'>Information not available.</span>"; + } + if (type === "pop") return Number(val).toLocaleString("en"); + if (type === "rate") return String(val); + if (type === "pct") return (val * 100).toFixed(2) + " %"; + return String(val); +} + +function _fmtGov(val) { + return (!val || val === "--") + ? "<span class='text-danger'>Information not available.</span>" + : val; +} |