fb67f0659c
Overhaul the web UI with CSS custom property-based theming and dark mode support. Extract reusable template partials (location search, scan input) and web components (photo-capture, searchable-select). Add version and commit info to page footer. - Replace hardcoded amber palette with semantic theme tokens - Add dark mode with localStorage persistence and system preference detection - Extract <brew-photo-capture> and <searchable-select> web components - Extract location_search and scan_input Askama macros - Add sun/moon, timeline, database, map icons - Display version and git commit in footer - Improve timeline coordinate rounding and map link formatting - Add roast_name, roaster_name, remaining to BagOptionView
291 lines
15 KiB
HTML
291 lines
15 KiB
HTML
{% extends "base.html" %} {% import "partials/bag_card.html" as bag_card %} {% import "partials/icons.html" as icons %} {% import "partials/scan_input.html" as scan %} {% block title %}Brewlog{% endblock %}
|
|
|
|
{% block head %}
|
|
{% if is_authenticated %}
|
|
<script>
|
|
const closeBag = async (bagId, cardEl) => {
|
|
if (!confirm('Close this bag? This will mark it as finished.')) return;
|
|
try {
|
|
const today = new Date().toISOString().split('T')[0];
|
|
const resp = await fetch(`/api/v1/bags/${bagId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
credentials: 'same-origin',
|
|
body: JSON.stringify({ closed: true, remaining: 0.0, finished_at: today }),
|
|
});
|
|
if (!resp.ok) throw new Error(`Server returned ${resp.status}`);
|
|
cardEl.remove();
|
|
const grid = document.getElementById('open-bags-grid');
|
|
if (grid && grid.children.length === 0) {
|
|
document.getElementById('open-bags-section')?.remove();
|
|
}
|
|
} catch (e) {
|
|
alert(`Failed to close bag: ${e.message}`);
|
|
}
|
|
};
|
|
</script>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Scan Bag -->
|
|
{% if is_authenticated %}
|
|
<section
|
|
data-signals:_extracting="false"
|
|
data-signals:_extract-error="''"
|
|
data-signals:_scan-extracted="false"
|
|
data-signals:_scan-submitting="false"
|
|
data-signals:_scan-error="''"
|
|
data-signals:_roaster-name="''"
|
|
data-signals:_roaster-country="''"
|
|
data-signals:_roaster-city="''"
|
|
data-signals:_roaster-homepage="''"
|
|
data-signals:_roast-name="''"
|
|
data-signals:_origin="''"
|
|
data-signals:_region="''"
|
|
data-signals:_producer="''"
|
|
data-signals:_process="''"
|
|
data-signals:_tasting-notes="''"
|
|
data-signals:_open-bag="true"
|
|
data-signals:_bag-amount="250"
|
|
>
|
|
<!-- Input: photo or text (shown when not yet extracted) -->
|
|
<div data-show="!$_scanExtracted" class="rounded-lg border bg-surface p-5">
|
|
<form id="scan-extract-form"
|
|
data-on:submit="$_extracting = true; $_extractError = ''; $_roasterName = ''; $_roasterCountry = ''; $_roasterCity = ''; $_roasterHomepage = ''; $_roastName = ''; $_origin = ''; $_region = ''; $_producer = ''; $_process = ''; $_tastingNotes = ''; @post('/api/v1/extract-bag-scan', {contentType: 'form'})"
|
|
data-on:datastar-fetch="if (!$_extracting) return; if (evt.detail.type === 'finished') { $_extracting = false; $_scanExtracted = true; document.getElementById('scan-extract-form').reset() } else if (evt.detail.type === 'error') { $_extracting = false; $_extractError = 'Extraction failed. Please try again.' }"
|
|
>
|
|
{% call scan::scan_input("scan-extract-form", "scan-image", "$_extracting", "$_extractError", "Describe the coffee bag…", "Waiting for response…") %}
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Form: pre-filled roaster + roast (shown after extraction) -->
|
|
<div data-show="$_scanExtracted" style="display: none">
|
|
<form
|
|
class="rounded-lg border bg-surface p-5 flex flex-col gap-6"
|
|
data-on:submit="$_scanSubmitting = true; $_scanError = ''; @post('/api/v1/scan', {contentType: 'form'})"
|
|
data-on:datastar-fetch="if (!$_scanSubmitting) return; if (evt.detail.type === 'finished') { $_scanSubmitting = false; $_scanExtracted = false; $_roasterName = ''; $_roasterCountry = ''; $_roasterCity = ''; $_roasterHomepage = ''; $_roastName = ''; $_origin = ''; $_region = ''; $_producer = ''; $_process = ''; $_tastingNotes = ''; $_openBag = true; $_bagAmount = 250; window.location.reload() } else if (evt.detail.type === 'error') { $_scanSubmitting = false; $_scanError = 'Save failed. Please try again.' }"
|
|
>
|
|
<div>
|
|
<h3 class="text-base font-semibold text-stone-800">Roaster</h3>
|
|
<p class="mt-1 text-sm text-stone-600">If this roaster already exists, it will be matched automatically.</p>
|
|
<div class="mt-4 grid gap-4 sm:grid-cols-2">
|
|
<label class="flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">Name *</span>
|
|
<input type="text" name="roaster_name" required class="input-field" placeholder="Example Coffee Roasters" data-bind:_roaster-name />
|
|
</label>
|
|
<label class="flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">Country *</span>
|
|
<input type="text" name="roaster_country" required class="input-field" placeholder="United States" data-bind:_roaster-country />
|
|
</label>
|
|
<label class="flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">City</span>
|
|
<input type="text" name="roaster_city" class="input-field" placeholder="Portland" data-bind:_roaster-city />
|
|
</label>
|
|
<label class="flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">Homepage</span>
|
|
<input type="url" name="roaster_homepage" class="input-field" placeholder="https://example.coffee" data-bind:_roaster-homepage />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-base font-semibold text-stone-800">Roast</h3>
|
|
<p class="mt-1 text-sm text-stone-600">Details about this specific coffee.</p>
|
|
<div class="mt-4 grid gap-4 sm:grid-cols-2">
|
|
<label class="flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">Roast Name *</span>
|
|
<input type="text" name="roast_name" required class="input-field" placeholder="Ethiopia Yirgacheffe" data-bind:_roast-name />
|
|
</label>
|
|
<label class="flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">Origin *</span>
|
|
<input type="text" name="origin" required class="input-field" placeholder="Ethiopia" data-bind:_origin />
|
|
</label>
|
|
<label class="flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">Region *</span>
|
|
<input type="text" name="region" required class="input-field" placeholder="Guji" data-bind:_region />
|
|
</label>
|
|
<label class="flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">Producer *</span>
|
|
<input type="text" name="producer" required class="input-field" placeholder="Chelbesa Cooperative" data-bind:_producer />
|
|
</label>
|
|
<label class="flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">Process *</span>
|
|
<input type="text" name="process" required class="input-field" placeholder="Washed" data-bind:_process />
|
|
</label>
|
|
<label class="flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">Tasting Notes * (comma separated)</span>
|
|
<textarea name="tasting_notes" rows="2" required class="input-field" placeholder="Blueberry, Jasmine" data-bind:_tasting-notes></textarea>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="inline-flex items-center gap-2 text-sm cursor-pointer">
|
|
<input type="checkbox" name="open_bag" value="true" class="accent-orange-700" data-bind:_open-bag />
|
|
<span class="font-semibold text-stone-800">Open a bag of this coffee</span>
|
|
</label>
|
|
<div data-show="$_openBag" class="mt-3 grid gap-4 sm:grid-cols-2">
|
|
<label class="flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">Amount (grams)</span>
|
|
<input type="number" name="bag_amount" min="1" step="any" class="input-field" placeholder="250" data-bind:_bag-amount />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<p data-show="$_scanError" data-text="$_scanError" style="display:none" class="text-sm text-red-600"></p>
|
|
<div data-show="$_scanSubmitting" style="display:none" class="flex items-center gap-3 text-sm text-accent">
|
|
{% call icons::spinner("h-5 w-5") %}
|
|
Saving…
|
|
</div>
|
|
<div data-show="!$_scanSubmitting" class="flex items-center justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
data-on:click="$_scanExtracted = false"
|
|
class="rounded-md border px-4 py-2 text-sm font-semibold text-stone-700 transition hover:bg-surface-alt"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
|
|
>
|
|
Save Roaster & Roast
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
|
|
<!-- Recent Brews -->
|
|
{% if !recent_brews.is_empty() %}
|
|
<section>
|
|
<div class="flex items-center justify-between mb-3">
|
|
<h2 class="text-lg font-semibold text-stone-800">Recent Brews</h2>
|
|
<a href="/data?type=brews" class="text-sm text-accent hover:text-accent-hover font-medium">View all brews →</a>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 items-start gap-4">
|
|
{% for brew in recent_brews %}
|
|
<div class="rounded-lg border bg-surface p-4 min-w-0">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<div class="min-w-0">
|
|
<span class="block truncate font-semibold text-stone-800">{{ brew.roast_name }}</span>
|
|
<p class="truncate text-sm text-stone-500">{{ brew.roaster_name }}</p>
|
|
</div>
|
|
<time class="text-xs text-stone-500 whitespace-nowrap shrink-0">{{ brew.relative_date_label }}</time>
|
|
</div>
|
|
<div class="mt-2 space-y-0.5 text-sm">
|
|
<p class="truncate"><span class="font-medium text-stone-800">{{ brew.coffee_weight }} / {{ brew.water_volume }}</span> <span class="text-stone-500">· {{ brew.ratio }} · {{ brew.water_temp }}</span></p>
|
|
<p class="truncate"><span class="font-medium text-stone-800">{{ brew.grind_setting }}</span> <span class="text-stone-500">· {{ brew.grinder_name }}</span></p>
|
|
<p class="truncate"><span class="font-medium text-stone-800">{{ brew.brewer_name }}</span>{% if let Some(fp) = brew.filter_paper_name %} <span class="text-stone-500">· {{ fp }}</span>{% endif %}</p>
|
|
</div>
|
|
{% if is_authenticated %}
|
|
<div class="mt-3 pt-3 border-t flex gap-3">
|
|
<form
|
|
class="inline"
|
|
data-on:submit="@post('/api/v1/brews', {contentType: 'form'})"
|
|
>
|
|
<input type="hidden" name="bag_id" value="{{ brew.bag_id }}" />
|
|
<input type="hidden" name="coffee_weight" value="{{ brew.coffee_weight_raw }}" />
|
|
<input type="hidden" name="grinder_id" value="{{ brew.grinder_id }}" />
|
|
<input type="hidden" name="grind_setting" value="{{ brew.grind_setting_raw }}" />
|
|
<input type="hidden" name="brewer_id" value="{{ brew.brewer_id }}" />
|
|
{% if let Some(fp_id) = brew.filter_paper_id %}
|
|
<input type="hidden" name="filter_paper_id" value="{{ fp_id }}" />
|
|
{% endif %}
|
|
<input type="hidden" name="water_volume" value="{{ brew.water_volume_raw }}" />
|
|
<input type="hidden" name="water_temp" value="{{ brew.water_temp_raw }}" />
|
|
<button
|
|
type="submit"
|
|
class="inline-flex items-center gap-1 text-sm font-medium text-accent hover:text-accent-hover"
|
|
>
|
|
{% call icons::plus_circle("h-4 w-4") %}
|
|
Brew Again
|
|
</button>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
|
|
<!-- Open Bags -->
|
|
{% if !open_bags.is_empty() %}
|
|
<section id="open-bags-section">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<h2 class="text-lg font-semibold text-stone-800">Open Bags</h2>
|
|
<a href="/data?type=bags" class="text-sm text-accent hover:text-accent-hover font-medium">View all bags →</a>
|
|
</div>
|
|
<div id="open-bags-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{% for bag in open_bags %}
|
|
{% call bag_card::card(bag, is_authenticated) %}
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
|
|
<!-- Recent Activity -->
|
|
{% if !recent_events.is_empty() %}
|
|
<section>
|
|
<div class="flex items-center justify-between mb-3">
|
|
<h2 class="text-lg font-semibold text-stone-800">Recent Activity</h2>
|
|
<a href="/timeline" class="text-sm text-accent hover:text-accent-hover font-medium">View full timeline →</a>
|
|
</div>
|
|
<div class="space-y-2">
|
|
{% for event in recent_events %}
|
|
<div class="rounded-lg border bg-surface px-4 py-3 flex items-center justify-between gap-3">
|
|
<div class="flex items-center gap-3 min-w-0">
|
|
<span class="pill pill-muted w-28 shrink-0 justify-center whitespace-nowrap">{{ event.kind_label }}</span>
|
|
<p class="min-w-0 truncate text-sm"><a href="{{ event.link }}" class="font-medium text-stone-700 hover:text-accent">{{ event.title }}</a>{% if let Some(sub) = event.subtitle %} <span class="text-xs text-stone-400 italic">· {{ sub }}</span>{% endif %}</p>
|
|
</div>
|
|
<time class="text-xs text-stone-500 whitespace-nowrap shrink-0">{{ event.relative_date_label }}</time>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
|
|
<!-- Stats -->
|
|
<section>
|
|
<div class="flex items-center justify-between mb-5">
|
|
<h2 class="text-lg font-semibold text-stone-800">Stats</h2>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-7">
|
|
<a href="/data?type=brews" class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt">
|
|
{% call icons::beaker("h-6 w-6 text-accent") %}
|
|
<span class="text-lg font-bold text-stone-800 group-hover:text-accent">{{ stats.brews }}</span>
|
|
<span class="text-xs text-stone-500">Brews</span>
|
|
</a>
|
|
<a href="/data?type=roasts" class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt">
|
|
{% call icons::fire("h-6 w-6 text-accent") %}
|
|
<span class="text-lg font-bold text-stone-800 group-hover:text-accent">{{ stats.roasts }}</span>
|
|
<span class="text-xs text-stone-500">Roasts</span>
|
|
</a>
|
|
<a href="/data?type=roasters" class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt">
|
|
{% call icons::building("h-6 w-6 text-accent") %}
|
|
<span class="text-lg font-bold text-stone-800 group-hover:text-accent">{{ stats.roasters }}</span>
|
|
<span class="text-xs text-stone-500">Roasters</span>
|
|
</a>
|
|
<a href="/data?type=bags" class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt">
|
|
{% call icons::bag("h-6 w-6 text-accent") %}
|
|
<span class="text-lg font-bold text-stone-800 group-hover:text-accent">{{ stats.bags }}</span>
|
|
<span class="text-xs text-stone-500">Bags</span>
|
|
</a>
|
|
<a href="/data?type=cups" class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt">
|
|
{% call icons::cup("h-6 w-6 text-accent") %}
|
|
<span class="text-lg font-bold text-stone-800 group-hover:text-accent">{{ stats.cups }}</span>
|
|
<span class="text-xs text-stone-500">Cups</span>
|
|
</a>
|
|
<a href="/data?type=cafes" class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt">
|
|
{% call icons::location("h-6 w-6 text-accent") %}
|
|
<span class="text-lg font-bold text-stone-800 group-hover:text-accent">{{ stats.cafes }}</span>
|
|
<span class="text-xs text-stone-500">Cafes</span>
|
|
</a>
|
|
<a href="/data?type=gear" class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt">
|
|
{% call icons::wrench("h-6 w-6 text-accent") %}
|
|
<span class="text-lg font-bold text-stone-800 group-hover:text-accent">{{ stats.gear }}</span>
|
|
<span class="text-xs text-stone-500">Gear</span>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|