+
No {entities} recorded yet.
{% else %}
@@ -797,10 +809,15 @@ List partials live in `templates/partials/lists/`. Each follows:
...
{% if items.is_empty() %}
-
No {entities} match your search.
- {% endif %} {% call table::pagination_header(items, navigator, "#{entity}-list") %} {% if
- items.has_next() %}
-
+
+ No {entities} match your search.
+
+ {% endif %} {% call table::pagination_header(items, navigator,
+ "#{entity}-list") %} {% if items.has_next() %}
+
{% endif %}
{% endif %}
@@ -834,14 +851,18 @@ Tables use the `responsive-table` CSS class (card layout on mobile, standard tab
```html
{{ brew.roast_name }}
- {{ brew.roaster_name }}
+
+ {{ brew.roaster_name }}
+
```
**Mobile** — separate `
` for each sub-field:
```html
- {{ brew.roaster_name }}
+
+ {{ brew.roaster_name }}
+
```
### Pagination & Infinite Scroll
diff --git a/static/css/input.css b/static/css/input.css
index 3e730a9..69da535 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -12,27 +12,27 @@
color-scheme: light;
/* Surfaces */
- --page: #fafaf9; /* stone-50 */
- --surface: #ffffff; /* white */
- --surface-alt: #f5f5f4; /* stone-100 */
+ --page: #fafaf9; /* stone-50 */
+ --surface: #ffffff; /* white */
+ --surface-alt: #f5f5f4; /* stone-100 */
/* Borders */
- --border: #e7e5e4; /* stone-200 */
- --border-muted: #f5f5f4; /* stone-100 */
+ --border: #e7e5e4; /* stone-200 */
+ --border-muted: #f5f5f4; /* stone-100 */
/* Accent */
- --accent: #c2410c; /* orange-700 */
- --accent-hover: #ea580c; /* orange-600 */
- --accent-subtle: #fff7ed; /* orange-50 */
+ --accent: #c2410c; /* orange-700 */
+ --accent-hover: #ea580c; /* orange-600 */
+ --accent-subtle: #fff7ed; /* orange-50 */
--accent-text: #ffffff;
/* Text */
- --text: #1c1917; /* stone-900 */
- --text-secondary: #57534e; /* stone-600 */
- --text-muted: #78716c; /* stone-500 */
+ --text: #1c1917; /* stone-900 */
+ --text-secondary: #57534e; /* stone-600 */
+ --text-muted: #78716c; /* stone-500 */
/* Data-viz highlight (RGB triplet for alpha usage in JS) */
- --highlight-rgb: 194, 65, 12; /* orange-700, matches --accent */
+ --highlight-rgb: 194, 65, 12; /* orange-700, matches --accent */
}
[data-theme="dark"] {
@@ -54,7 +54,7 @@
--text-secondary: #d6d3d1;
--text-muted: #a8a29e;
- --highlight-rgb: 234, 88, 12; /* orange-600, matches --accent */
+ --highlight-rgb: 234, 88, 12; /* orange-600, matches --accent */
}
/* ── Theme: map raw vars to Tailwind utilities ─────────────────── */
@@ -87,7 +87,13 @@
/* ── Typography ────────────────────────────────────────────────── */
body {
- font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+ font-family:
+ "Inter",
+ system-ui,
+ -apple-system,
+ BlinkMacSystemFont,
+ "Segoe UI",
+ sans-serif;
}
a {
@@ -125,7 +131,9 @@ a {
font-family: inherit;
font-size: 0.875rem;
color: var(--text);
- transition: border-color 150ms ease, box-shadow 150ms ease;
+ transition:
+ border-color 150ms ease,
+ box-shadow 150ms ease;
}
input.input-field[type="number"]::-webkit-inner-spin-button,
@@ -155,7 +163,9 @@ input.input-field[type="number"] {
background-color: var(--surface);
color: var(--accent);
font-weight: 700;
- transition: background-color 150ms ease, color 150ms ease;
+ transition:
+ background-color 150ms ease,
+ color 150ms ease;
}
.btn-adjust:hover {
@@ -343,7 +353,10 @@ input.input-field[type="number"] {
cursor: pointer;
border: 1px solid var(--border);
background-color: var(--surface);
- transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
+ transition:
+ background-color 150ms ease,
+ color 150ms ease,
+ border-color 150ms ease;
color: var(--accent);
}
@@ -368,7 +381,9 @@ input.input-field[type="number"] {
border: none;
background: none;
color: var(--accent);
- transition: background-color 150ms ease, color 150ms ease;
+ transition:
+ background-color 150ms ease,
+ color 150ms ease;
color: var(--text-secondary);
}
@@ -452,7 +467,9 @@ input.input-field[type="number"] {
/* ── Data page ─────────────────────────────────────────────────── */
/* Hide duplicate search inside data page - search is in the tab bar */
-.data-page-content section:has(.responsive-table) > div:first-child:has(input[type="search"]) {
+.data-page-content
+ section:has(.responsive-table)
+ > div:first-child:has(input[type="search"]) {
display: none;
}
diff --git a/static/js/components/chip-scroll.js b/static/js/components/chip-scroll.js
index 118da4a..3e9b4e7 100644
--- a/static/js/components/chip-scroll.js
+++ b/static/js/components/chip-scroll.js
@@ -1,30 +1,38 @@
-customElements.define("chip-scroll", class extends HTMLElement {
- connectedCallback() { this._setup(); }
+customElements.define(
+ "chip-scroll",
+ class extends HTMLElement {
+ connectedCallback() {
+ this._setup();
+ }
- _setup() {
- if (this._observer) this._observer.disconnect();
+ _setup() {
+ if (this._observer) this._observer.disconnect();
- const scroller = this.querySelector("[data-chip-scroll]");
- const btnL = this.querySelector("[data-scroll-left]");
- const btnR = this.querySelector("[data-scroll-right]");
- if (!scroller || !btnL || !btnR) return;
+ const scroller = this.querySelector("[data-chip-scroll]");
+ const btnL = this.querySelector("[data-scroll-left]");
+ const btnR = this.querySelector("[data-scroll-right]");
+ if (!scroller || !btnL || !btnR) return;
- const update = () => {
- if (window.matchMedia("(max-width: 767px)").matches) {
- btnL.style.display = "none";
- btnR.style.display = "none";
- return;
- }
- btnL.style.display = scroller.scrollLeft > 0 ? "flex" : "none";
- btnR.style.display = scroller.scrollLeft + scroller.clientWidth < scroller.scrollWidth - 1 ? "flex" : "none";
- };
+ const update = () => {
+ if (window.matchMedia("(max-width: 767px)").matches) {
+ btnL.style.display = "none";
+ btnR.style.display = "none";
+ return;
+ }
+ btnL.style.display = scroller.scrollLeft > 0 ? "flex" : "none";
+ btnR.style.display =
+ scroller.scrollLeft + scroller.clientWidth < scroller.scrollWidth - 1
+ ? "flex"
+ : "none";
+ };
- scroller.addEventListener("scroll", update, { passive: true });
- new ResizeObserver(update).observe(scroller);
+ scroller.addEventListener("scroll", update, { passive: true });
+ new ResizeObserver(update).observe(scroller);
- this._observer = new MutationObserver(update);
- this._observer.observe(scroller, { childList: true });
+ this._observer = new MutationObserver(update);
+ this._observer.observe(scroller, { childList: true });
- update();
- }
-});
+ update();
+ }
+ },
+);
diff --git a/static/js/components/donut-chart.js b/static/js/components/donut-chart.js
index e2817a8..1ab4c76 100644
--- a/static/js/components/donut-chart.js
+++ b/static/js/components/donut-chart.js
@@ -1,19 +1,31 @@
const DONUT_ICONS = {
- beaker: '
',
- grinder: '
'
+ beaker:
+ '
',
+ grinder:
+ '
',
};
-const esc = (s) => s.replace(/&/g,'&').replace(//g,'>').replace(/"/g,'"');
+const esc = (s) =>
+ s
+ .replace(/&/g, "&")
+ .replace(//g, ">")
+ .replace(/"/g, """);
class DonutChart extends HTMLElement {
static get observedAttributes() {
- return ['data-items'];
+ return ["data-items"];
}
connectedCallback() {
requestAnimationFrame(() => this.render());
- this._themeObserver = new MutationObserver(() => requestAnimationFrame(() => this.render()));
- this._themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+ this._themeObserver = new MutationObserver(() =>
+ requestAnimationFrame(() => this.render()),
+ );
+ this._themeObserver.observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ["data-theme"],
+ });
}
disconnectedCallback() {
@@ -26,22 +38,34 @@ class DonutChart extends HTMLElement {
}
render() {
- const raw = this.dataset.items || '';
- if (!raw) { this.innerHTML = ''; return; }
+ const raw = this.dataset.items || "";
+ if (!raw) {
+ this.innerHTML = "";
+ return;
+ }
- const items = raw.split('|').map(s => {
- const idx = s.lastIndexOf(':');
- if (idx === -1) return null;
- const label = s.slice(0, idx).trim();
- const count = parseInt(s.slice(idx + 1), 10);
- return (label && count > 0) ? { label, count } : null;
- }).filter(Boolean);
+ const items = raw
+ .split("|")
+ .map((s) => {
+ const idx = s.lastIndexOf(":");
+ if (idx === -1) return null;
+ const label = s.slice(0, idx).trim();
+ const count = parseInt(s.slice(idx + 1), 10);
+ return label && count > 0 ? { label, count } : null;
+ })
+ .filter(Boolean);
- if (items.length === 0) { this.innerHTML = ''; return; }
+ if (items.length === 0) {
+ this.innerHTML = "";
+ return;
+ }
const total = items.reduce((sum, i) => sum + i.count, 0);
const maxCount = items[0].count;
- const rgb = getComputedStyle(document.documentElement).getPropertyValue('--highlight-rgb').trim() || '185, 28, 28';
+ const rgb =
+ getComputedStyle(document.documentElement)
+ .getPropertyValue("--highlight-rgb")
+ .trim() || "185, 28, 28";
const colorFor = (count) => {
const alpha = (0.25 + 0.75 * (count / maxCount)).toFixed(2);
return `rgba(${rgb}, ${alpha})`;
@@ -70,7 +94,7 @@ class DonutChart extends HTMLElement {
});
const legend = items.map((item, i) => {
- const pct = Math.round(item.count / total * 100);
+ const pct = Math.round((item.count / total) * 100);
return `
${esc(item.label)}
@@ -80,19 +104,19 @@ class DonutChart extends HTMLElement {
this.innerHTML = `
- ${segments.join('')}
+ ${segments.join("")}
${(() => {
const icon = DONUT_ICONS[this.dataset.icon];
- if (!icon) return '';
+ if (!icon) return "";
const s = 24;
- return `${icon} `;
+ return `${icon} `;
})()}
- ${legend.join('')}
+ ${legend.join("")}
`;
}
}
-customElements.define('donut-chart', DonutChart);
+customElements.define("donut-chart", DonutChart);
diff --git a/static/js/components/photo-capture.js b/static/js/components/photo-capture.js
index 53e3197..31c5c28 100644
--- a/static/js/components/photo-capture.js
+++ b/static/js/components/photo-capture.js
@@ -1,25 +1,31 @@
-customElements.define("brew-photo-capture", class extends HTMLElement {
- connectedCallback() {
- const input = document.createElement("input");
- input.type = "file";
- input.accept = "image/*";
- input.hidden = true;
- this.appendChild(input);
+customElements.define(
+ "brew-photo-capture",
+ class extends HTMLElement {
+ connectedCallback() {
+ const input = document.createElement("input");
+ input.type = "file";
+ input.accept = "image/*";
+ input.hidden = true;
+ this.appendChild(input);
- this.addEventListener("click", (e) => {
- if (e.target !== input) input.click();
- });
+ this.addEventListener("click", (e) => {
+ if (e.target !== input) input.click();
+ });
- input.addEventListener("change", () => {
- const file = input.files[0];
- if (!file) return;
- const reader = new FileReader();
- reader.onload = () => {
- document.getElementById(this.getAttribute("target-input")).value = reader.result;
- document.getElementById(this.getAttribute("target-form")).requestSubmit();
- };
- reader.readAsDataURL(file);
- input.value = "";
- });
- }
-});
+ input.addEventListener("change", () => {
+ const file = input.files[0];
+ if (!file) return;
+ const reader = new FileReader();
+ reader.onload = () => {
+ document.getElementById(this.getAttribute("target-input")).value =
+ reader.result;
+ document
+ .getElementById(this.getAttribute("target-form"))
+ .requestSubmit();
+ };
+ reader.readAsDataURL(file);
+ input.value = "";
+ });
+ }
+ },
+);
diff --git a/static/js/components/searchable-select.js b/static/js/components/searchable-select.js
index 2bc79dc..c5d9b16 100644
--- a/static/js/components/searchable-select.js
+++ b/static/js/components/searchable-select.js
@@ -1,104 +1,123 @@
-customElements.define("searchable-select", class extends HTMLElement {
- connectedCallback() {
- requestAnimationFrame(() => this._setup());
- }
-
- _setup() {
- if (this._initialized) return;
- this._initialized = true;
-
- const name = this.getAttribute("name");
- const placeholder = this.getAttribute("placeholder") || "Type to search\u2026";
- const buttons = [...this.querySelectorAll("button")];
-
- const hidden = document.createElement("input");
- hidden.type = "hidden";
- hidden.name = name;
-
- const search = document.createElement("input");
- search.type = "text";
- search.className = "input-field w-full";
- search.placeholder = placeholder;
-
- const options = document.createElement("div");
- options.className = "hidden mt-2 max-h-48 overflow-y-auto rounded-lg border bg-surface";
- buttons.forEach((btn) => options.appendChild(btn));
-
- const searchWrap = document.createElement("div");
- searchWrap.appendChild(search);
- searchWrap.appendChild(options);
-
- const display = document.createElement("span");
- display.className = "input-field w-full block pr-8";
-
- const clear = document.createElement("button");
- clear.type = "button";
- clear.className = "absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-secondary transition";
- clear.innerHTML = '
';
-
- const selectedWrap = document.createElement("div");
- selectedWrap.className = "relative hidden cursor-pointer";
- selectedWrap.appendChild(display);
- selectedWrap.appendChild(clear);
-
- // Block native change events from child inputs so only our
- // CustomEvent (which carries evt.detail) reaches data-on:change.
- this.addEventListener("change", (e) => {
- if (!(e instanceof CustomEvent)) e.stopImmediatePropagation();
- }, true);
-
- this.textContent = "";
- this.style.display = "block";
- this.appendChild(hidden);
- this.appendChild(searchWrap);
- this.appendChild(selectedWrap);
-
- const initialValue = this.getAttribute("initial-value");
- if (initialValue) {
- const match = buttons.find((btn) => btn.value === initialValue);
- if (match) {
- hidden.value = match.value;
- display.textContent = match.dataset.display;
- searchWrap.classList.add("hidden");
- selectedWrap.classList.remove("hidden");
- }
+customElements.define(
+ "searchable-select",
+ class extends HTMLElement {
+ connectedCallback() {
+ requestAnimationFrame(() => this._setup());
}
- search.addEventListener("input", () => {
- const q = search.value.toLowerCase();
- options.classList.toggle("hidden", !q);
- buttons.forEach((btn) => {
- btn.style.display = btn.textContent.toLowerCase().includes(q) ? "" : "none";
+ _setup() {
+ if (this._initialized) return;
+ this._initialized = true;
+
+ const name = this.getAttribute("name");
+ const placeholder =
+ this.getAttribute("placeholder") || "Type to search\u2026";
+ const buttons = [...this.querySelectorAll("button")];
+
+ const hidden = document.createElement("input");
+ hidden.type = "hidden";
+ hidden.name = name;
+
+ const search = document.createElement("input");
+ search.type = "text";
+ search.className = "input-field w-full";
+ search.placeholder = placeholder;
+
+ const options = document.createElement("div");
+ options.className =
+ "hidden mt-2 max-h-48 overflow-y-auto rounded-lg border bg-surface";
+ buttons.forEach((btn) => options.appendChild(btn));
+
+ const searchWrap = document.createElement("div");
+ searchWrap.appendChild(search);
+ searchWrap.appendChild(options);
+
+ const display = document.createElement("span");
+ display.className = "input-field w-full block pr-8";
+
+ const clear = document.createElement("button");
+ clear.type = "button";
+ clear.className =
+ "absolute right-2 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-secondary transition";
+ clear.innerHTML =
+ '
';
+
+ const selectedWrap = document.createElement("div");
+ selectedWrap.className = "relative hidden cursor-pointer";
+ selectedWrap.appendChild(display);
+ selectedWrap.appendChild(clear);
+
+ // Block native change events from child inputs so only our
+ // CustomEvent (which carries evt.detail) reaches data-on:change.
+ this.addEventListener(
+ "change",
+ (e) => {
+ if (!(e instanceof CustomEvent)) e.stopImmediatePropagation();
+ },
+ true,
+ );
+
+ this.textContent = "";
+ this.style.display = "block";
+ this.appendChild(hidden);
+ this.appendChild(searchWrap);
+ this.appendChild(selectedWrap);
+
+ const initialValue = this.getAttribute("initial-value");
+ if (initialValue) {
+ const match = buttons.find((btn) => btn.value === initialValue);
+ if (match) {
+ hidden.value = match.value;
+ display.textContent = match.dataset.display;
+ searchWrap.classList.add("hidden");
+ selectedWrap.classList.remove("hidden");
+ }
+ }
+
+ search.addEventListener("input", () => {
+ const q = search.value.toLowerCase();
+ options.classList.toggle("hidden", !q);
+ buttons.forEach((btn) => {
+ btn.style.display = btn.textContent.toLowerCase().includes(q)
+ ? ""
+ : "none";
+ });
});
- });
- options.addEventListener("click", (e) => {
- const btn = e.target.closest("button");
- if (!btn || !options.contains(btn)) return;
+ options.addEventListener("click", (e) => {
+ const btn = e.target.closest("button");
+ if (!btn || !options.contains(btn)) return;
- hidden.value = btn.value;
- display.textContent = btn.dataset.display;
- searchWrap.classList.add("hidden");
- selectedWrap.classList.remove("hidden");
+ hidden.value = btn.value;
+ display.textContent = btn.dataset.display;
+ searchWrap.classList.add("hidden");
+ selectedWrap.classList.remove("hidden");
- this.dispatchEvent(new CustomEvent("change", {
- detail: { value: btn.value, display: btn.dataset.display, data: { ...btn.dataset } },
- bubbles: true,
- }));
- });
+ this.dispatchEvent(
+ new CustomEvent("change", {
+ detail: {
+ value: btn.value,
+ display: btn.dataset.display,
+ data: { ...btn.dataset },
+ },
+ bubbles: true,
+ }),
+ );
+ });
- const doClear = () => {
- hidden.value = "";
- display.textContent = "";
- search.value = "";
- searchWrap.classList.remove("hidden");
- selectedWrap.classList.add("hidden");
- options.classList.add("hidden");
- setTimeout(() => search.focus(), 0);
+ const doClear = () => {
+ hidden.value = "";
+ display.textContent = "";
+ search.value = "";
+ searchWrap.classList.remove("hidden");
+ selectedWrap.classList.add("hidden");
+ options.classList.add("hidden");
+ setTimeout(() => search.focus(), 0);
- this.dispatchEvent(new CustomEvent("clear", { bubbles: true }));
- };
+ this.dispatchEvent(new CustomEvent("clear", { bubbles: true }));
+ };
- selectedWrap.addEventListener("click", doClear);
- }
-});
+ selectedWrap.addEventListener("click", doClear);
+ }
+ },
+);
diff --git a/static/js/components/world-map.js b/static/js/components/world-map.js
index dbf1532..c4de3d8 100644
--- a/static/js/components/world-map.js
+++ b/static/js/components/world-map.js
@@ -3,109 +3,124 @@
const WORLD_SVG = `
Author: Al MacDonald Editor: Fritz Lekschas License: CC BY-SA 3.0 ID: ISO 3166-1 or "_[a-zA-Z]" if an ISO code is not available `;
-customElements.define("world-map", class extends HTMLElement {
- static get observedAttributes() { return ["data-countries", "data-max", "data-selected"]; }
-
- connectedCallback() {
- this._scheduleRender();
- this._themeObserver = new MutationObserver(() => requestAnimationFrame(() => this._recolor()));
- this._themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
- }
-
- disconnectedCallback() {
- this._themeObserver?.disconnect();
- this._themeObserver = null;
- }
-
- attributeChangedCallback(name) {
- if (!this.isConnected) return;
- if (name === "data-selected") {
- this._recolor();
- } else {
- this._scheduleRender();
+customElements.define(
+ "world-map",
+ class extends HTMLElement {
+ static get observedAttributes() {
+ return ["data-countries", "data-max", "data-selected"];
}
- }
- _scheduleRender() {
- if (this._pendingRender) return;
- this._pendingRender = true;
- requestAnimationFrame(() => {
- this._pendingRender = false;
- this._render();
- });
- }
-
- _parseCountries() {
- const attr = this.getAttribute("data-countries") || "";
- const counts = new Map();
- if (attr) {
- attr.split(",").forEach((pair) => {
- const [code, count] = pair.split(":");
- if (code && count) counts.set(code.trim().toLowerCase(), parseInt(count, 10));
+ connectedCallback() {
+ this._scheduleRender();
+ this._themeObserver = new MutationObserver(() =>
+ requestAnimationFrame(() => this._recolor()),
+ );
+ this._themeObserver.observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ["data-theme"],
});
}
- this._counts = counts;
- this._max = parseInt(this.getAttribute("data-max") || "1", 10) || 1;
- }
- _render() {
- this._parseCountries();
+ disconnectedCallback() {
+ this._themeObserver?.disconnect();
+ this._themeObserver = null;
+ }
- this.innerHTML = "";
- const container = document.createElement("div");
- container.innerHTML = WORLD_SVG;
- const svg = container.querySelector("svg");
- if (!svg) return;
- svg.style.width = "100%";
- svg.style.height = "auto";
- svg.style.display = "block";
- this.appendChild(svg);
-
- this._recolor();
- }
-
- _recolor() {
- const svg = this.querySelector("svg");
- if (!svg) return;
- if (!this._counts) this._parseCountries();
-
- const selected = (this.getAttribute("data-selected") || "").toLowerCase();
- const counts = this._counts;
- const max = this._max;
-
- const styles = getComputedStyle(document.documentElement);
- const rgb = styles.getPropertyValue('--highlight-rgb').trim() || '185, 28, 28';
- const borderColor = styles.getPropertyValue('--text-muted').trim() || '#9ca3af';
- const surfaceAlt = styles.getPropertyValue('--surface-alt').trim() || '#f5f5f4';
- const borderMuted = styles.getPropertyValue('--border').trim() || '#d6d3d1';
-
- const applyStyle = (el, fill) => {
- el.style.fill = fill;
- el.style.stroke = borderColor;
- el.style.strokeWidth = "0.3";
- };
-
- const colorFor = (code) => {
- const count = counts.get(code);
- if (selected) {
- if (code === selected && count) return `rgba(${rgb}, 1)`;
- return count ? borderMuted : surfaceAlt;
- }
- if (count) {
- const alpha = (0.15 + 0.85 * (count / max)).toFixed(2);
- return `rgba(${rgb}, ${alpha})`;
- }
- return surfaceAlt;
- };
-
- svg.querySelectorAll("path[id], g[id]").forEach((el) => {
- const code = el.id.toLowerCase();
- const fill = colorFor(code);
- if (el.tagName === "g") {
- el.querySelectorAll("path").forEach((p) => applyStyle(p, fill));
+ attributeChangedCallback(name) {
+ if (!this.isConnected) return;
+ if (name === "data-selected") {
+ this._recolor();
} else {
- applyStyle(el, fill);
+ this._scheduleRender();
}
- });
- }
-});
+ }
+
+ _scheduleRender() {
+ if (this._pendingRender) return;
+ this._pendingRender = true;
+ requestAnimationFrame(() => {
+ this._pendingRender = false;
+ this._render();
+ });
+ }
+
+ _parseCountries() {
+ const attr = this.getAttribute("data-countries") || "";
+ const counts = new Map();
+ if (attr) {
+ attr.split(",").forEach((pair) => {
+ const [code, count] = pair.split(":");
+ if (code && count)
+ counts.set(code.trim().toLowerCase(), parseInt(count, 10));
+ });
+ }
+ this._counts = counts;
+ this._max = parseInt(this.getAttribute("data-max") || "1", 10) || 1;
+ }
+
+ _render() {
+ this._parseCountries();
+
+ this.innerHTML = "";
+ const container = document.createElement("div");
+ container.innerHTML = WORLD_SVG;
+ const svg = container.querySelector("svg");
+ if (!svg) return;
+ svg.style.width = "100%";
+ svg.style.height = "auto";
+ svg.style.display = "block";
+ this.appendChild(svg);
+
+ this._recolor();
+ }
+
+ _recolor() {
+ const svg = this.querySelector("svg");
+ if (!svg) return;
+ if (!this._counts) this._parseCountries();
+
+ const selected = (this.getAttribute("data-selected") || "").toLowerCase();
+ const counts = this._counts;
+ const max = this._max;
+
+ const styles = getComputedStyle(document.documentElement);
+ const rgb =
+ styles.getPropertyValue("--highlight-rgb").trim() || "185, 28, 28";
+ const borderColor =
+ styles.getPropertyValue("--text-muted").trim() || "#9ca3af";
+ const surfaceAlt =
+ styles.getPropertyValue("--surface-alt").trim() || "#f5f5f4";
+ const borderMuted =
+ styles.getPropertyValue("--border").trim() || "#d6d3d1";
+
+ const applyStyle = (el, fill) => {
+ el.style.fill = fill;
+ el.style.stroke = borderColor;
+ el.style.strokeWidth = "0.3";
+ };
+
+ const colorFor = (code) => {
+ const count = counts.get(code);
+ if (selected) {
+ if (code === selected && count) return `rgba(${rgb}, 1)`;
+ return count ? borderMuted : surfaceAlt;
+ }
+ if (count) {
+ const alpha = (0.15 + 0.85 * (count / max)).toFixed(2);
+ return `rgba(${rgb}, ${alpha})`;
+ }
+ return surfaceAlt;
+ };
+
+ svg.querySelectorAll("path[id], g[id]").forEach((el) => {
+ const code = el.id.toLowerCase();
+ const fill = colorFor(code);
+ if (el.tagName === "g") {
+ el.querySelectorAll("path").forEach((p) => applyStyle(p, fill));
+ } else {
+ applyStyle(el, fill);
+ }
+ });
+ }
+ },
+);
diff --git a/static/js/webauthn.js b/static/js/webauthn.js
index d65a485..d897270 100644
--- a/static/js/webauthn.js
+++ b/static/js/webauthn.js
@@ -16,7 +16,10 @@ const bufferToBase64url = (buffer) => {
for (let i = 0; i < bytes.length; i++) {
binary += String.fromCharCode(bytes[i]);
}
- return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+ return btoa(binary)
+ .replace(/\+/g, "-")
+ .replace(/\//g, "_")
+ .replace(/=+$/, "");
};
// Convert server challenge options to format navigator.credentials expects
@@ -26,7 +29,7 @@ const prepareCreationOptions = (options) => {
publicKey.user.id = base64urlToBuffer(publicKey.user.id);
if (publicKey.excludeCredentials) {
publicKey.excludeCredentials = publicKey.excludeCredentials.map((cred) =>
- Object.assign({}, cred, { id: base64urlToBuffer(cred.id) })
+ Object.assign({}, cred, { id: base64urlToBuffer(cred.id) }),
);
}
return options;
@@ -37,7 +40,7 @@ const prepareRequestOptions = (options) => {
publicKey.challenge = base64urlToBuffer(publicKey.challenge);
if (publicKey.allowCredentials) {
publicKey.allowCredentials = publicKey.allowCredentials.map((cred) =>
- Object.assign({}, cred, { id: base64urlToBuffer(cred.id) })
+ Object.assign({}, cred, { id: base64urlToBuffer(cred.id) }),
);
}
return options;
@@ -67,7 +70,9 @@ const serializeAuthenticationCredential = (credential) => {
authenticatorData: bufferToBase64url(response.authenticatorData),
clientDataJSON: bufferToBase64url(response.clientDataJSON),
signature: bufferToBase64url(response.signature),
- userHandle: response.userHandle ? bufferToBase64url(response.userHandle) : null,
+ userHandle: response.userHandle
+ ? bufferToBase64url(response.userHandle)
+ : null,
},
};
};
@@ -78,13 +83,18 @@ const startPasskeyRegistration = async (token, displayName, passkeyName) => {
const startResponse = await fetch("/api/v1/webauthn/register/start", {
method: "POST",
headers: { "Content-Type": "application/json" },
- body: JSON.stringify({ token, display_name: displayName, passkey_name: passkeyName }),
+ body: JSON.stringify({
+ token,
+ display_name: displayName,
+ passkey_name: passkeyName,
+ }),
});
if (!startResponse.ok) {
const status = startResponse.status;
if (status === 401) throw new Error("Invalid registration token.");
- if (status === 410) throw new Error("Registration token has expired or already been used.");
+ if (status === 410)
+ throw new Error("Registration token has expired or already been used.");
throw new Error(`Failed to start registration (HTTP ${status}).`);
}
@@ -106,7 +116,9 @@ const startPasskeyRegistration = async (token, displayName, passkeyName) => {
});
if (!finishResponse.ok) {
- throw new Error(`Failed to complete registration (HTTP ${finishResponse.status}).`);
+ throw new Error(
+ `Failed to complete registration (HTTP ${finishResponse.status}).`,
+ );
}
return finishResponse.json();
@@ -120,7 +132,8 @@ const startPasskeyAuthentication = async (queryParams) => {
if (!startResponse.ok) {
const status = startResponse.status;
- if (status === 404) throw new Error("No passkeys registered. Please register first.");
+ if (status === 404)
+ throw new Error("No passkeys registered. Please register first.");
throw new Error(`Failed to start authentication (HTTP ${status}).`);
}
@@ -157,7 +170,9 @@ const addPasskey = async (name) => {
});
if (!startResponse.ok) {
- throw new Error(`Failed to start passkey registration (HTTP ${startResponse.status}).`);
+ throw new Error(
+ `Failed to start passkey registration (HTTP ${startResponse.status}).`,
+ );
}
const { challenge_id, options } = await startResponse.json();
@@ -178,6 +193,8 @@ const addPasskey = async (name) => {
});
if (!finishResponse.ok) {
- throw new Error(`Failed to complete passkey registration (HTTP ${finishResponse.status}).`);
+ throw new Error(
+ `Failed to complete passkey registration (HTTP ${finishResponse.status}).`,
+ );
}
};
diff --git a/templates/base.html b/templates/base.html
index 35b74a7..2e1cebd 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -5,26 +5,44 @@
-
-
+
+
{% block title %}Brewlog{% endblock %}
-
+
-
+
{% include "partials/nav.html" %} {% block content %}{% endblock %}
- {{ location::location_search_js() }}
-
+
{% endblock %}
{% block content %}
-
-
+
+
-
-
- {% include "partials/tab_bar.html" %}
-
+
+ {% include "partials/tab_bar.html" %}
-
-
-
-
New Roaster
-
Describe or take a photo of a coffee bag to extract roaster details.
-
-
-
-
-
-
-
-
- {{ icons::camera("h-5 w-5") }}
-
- or
-
-
- {{ icons::spinner("h-5 w-5") }}
- Extracting…
-
-
-
-
-
-
- {% if roaster_options.is_empty() %}
-
-
Add a roaster first
-
Roasts need a roaster. Add a roaster above to enable this form.
-
- {% else %}
-
-
New Roast
-
Describe or take a photo of a coffee bag to extract roast details.
-
-
-
-
-
-
-
-
- {{ icons::camera("h-5 w-5") }}
-
- or
-
-
- {{ icons::spinner("h-5 w-5") }}
- Extracting…
-
-
-
-
-
- {% endif %}
-
- {% if roast_options.is_empty() %}
-
-
Add a roast first
-
Bags need a roast. Add a roaster and roast to enable this form.
-
- {% else %}
-
-
New Bag
-
Select a roast and enter the details.
-
-
- {% endif %}
-
- {% if bag_options.is_empty() %}
-
-
Open a bag first
-
Brews need an open bag of coffee. Add a bag to enable this form.
-
- {% else if grinder_options.is_empty() || brewer_options.is_empty() %}
-
-
Add gear first
-
Brews need a grinder and brewer. Add gear to enable this form.
-
- {% else %}
-
-
New Brew
-
Log a cup of coffee.
-
-