3746568dd7
Move duplicated photo capture, text extraction, and fetch/UI-toggle logic from roasters, roasts, and scan templates into a shared extract.js file served at /extract.js. Each page now provides only its form-filling callback. Uses ES6+ syntax (const, let, arrow functions, template literals).
205 lines
8.4 KiB
HTML
205 lines
8.4 KiB
HTML
{% extends "base.html" %} {% block title %}Brewlog · Roasts{% endblock %}
|
|
|
|
{% block head %}
|
|
{% if is_authenticated && has_ai_extract %}
|
|
<script src="/extract.js"></script>
|
|
<script>
|
|
function fillRoastForm(data) {
|
|
var form = document.getElementById('roast-form');
|
|
if (!form) return;
|
|
|
|
if (data.roaster_name) {
|
|
var select = form.querySelector('[name="roaster_id"]');
|
|
var lowerName = data.roaster_name.toLowerCase();
|
|
for (var i = 0; i < select.options.length; i++) {
|
|
if (select.options[i].text.toLowerCase().includes(lowerName)) {
|
|
select.selectedIndex = i;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (data.name) form.querySelector('[name="name"]').value = data.name;
|
|
if (data.origin) form.querySelector('[name="origin"]').value = data.origin;
|
|
if (data.region) form.querySelector('[name="region"]').value = data.region;
|
|
if (data.producer) form.querySelector('[name="producer"]').value = data.producer;
|
|
if (data.process) form.querySelector('[name="process"]').value = data.process;
|
|
if (data.tasting_notes && data.tasting_notes.length > 0) {
|
|
form.querySelector('[name="tasting_notes"]').value = data.tasting_notes.join(', ');
|
|
}
|
|
}
|
|
</script>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<section data-signals:_show-form="false">
|
|
<header class="flex flex-wrap items-start justify-between gap-4">
|
|
<div class="flex flex-col gap-2">
|
|
<h1 class="text-3xl font-semibold">Roasts</h1>
|
|
<p class="max-w-2xl text-sm text-stone-600">Explore the latest roasts logged in Brewlog.</p>
|
|
</div>
|
|
{% if is_authenticated && !roaster_options.is_empty() %}
|
|
<button
|
|
type="button"
|
|
class="flex h-10 w-10 items-center justify-center rounded-full border border-amber-500 text-2xl font-semibold text-amber-700 transition hover:border-amber-400 hover:text-amber-600"
|
|
data-class:hidden="$_showForm"
|
|
data-on:click="$_showForm = true"
|
|
aria-label="Add new roast"
|
|
>
|
|
<span aria-hidden="true">+</span>
|
|
</button>
|
|
{% endif %}
|
|
</header>
|
|
|
|
{% if is_authenticated %}
|
|
{% if roaster_options.is_empty() %}
|
|
<div
|
|
class="mt-6 rounded-lg border border-dashed border-amber-300 bg-amber-100/60 p-5 text-sm text-stone-600"
|
|
>
|
|
<h2 class="text-lg font-semibold text-amber-700">Add a roaster first</h2>
|
|
<p class="mt-2">
|
|
Roasts need a roaster.
|
|
<a class="text-amber-700 hover:text-amber-600 underline" href="/roasters"
|
|
>Create a roaster</a
|
|
>
|
|
to enable this form.
|
|
</p>
|
|
</div>
|
|
{% else %}
|
|
<div
|
|
class="mt-6 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm"
|
|
data-show="$_showForm"
|
|
style="display: none"
|
|
>
|
|
<div>
|
|
<h2 class="text-lg font-semibold text-amber-700">New Roast</h2>
|
|
<p class="mt-1 text-sm text-stone-600">
|
|
Select a roaster, describe the roast, and Brewlog will take care of the rest.
|
|
</p>
|
|
</div>
|
|
<form
|
|
id="roast-form"
|
|
method="post"
|
|
action="/api/v1/roasts"
|
|
class="mt-4 flex flex-col gap-4"
|
|
data-on:submit="@post('/api/v1/roasts?{{ navigator.query_for_page(1) }}', {contentType: 'form', responseOverrides: {selector: '#roast-list', mode: 'replace'}})"
|
|
data-ref="_form"
|
|
data-on:datastar-fetch="evt.detail.type === 'finished' && ($_showForm = false, $_form && $_form.reset())"
|
|
>
|
|
{% if has_ai_extract %}
|
|
<div class="relative border-b border-amber-200 pb-4">
|
|
<div id="roast-form-extract-controls" class="flex flex-wrap items-center gap-3">
|
|
<button
|
|
type="button"
|
|
onclick="triggerPhotoExtract('roast-form', '/api/v1/extract-roast', fillRoastForm)"
|
|
class="inline-flex items-center gap-2 rounded-md border border-amber-400 bg-amber-50 px-3 py-2 text-sm font-medium text-amber-800 transition hover:bg-amber-100"
|
|
>
|
|
<svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
|
|
<path fill-rule="evenodd" d="M1 8a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 018.07 3h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0016.07 6H17a2 2 0 012 2v7a2 2 0 01-2 2H3a2 2 0 01-2-2V8zm13.5 3a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM10 14a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd" />
|
|
</svg>
|
|
Extract from photo
|
|
</button>
|
|
<span class="text-xs text-stone-400">or</span>
|
|
<div class="flex flex-1 min-w-[200px] gap-2">
|
|
<input
|
|
type="text"
|
|
id="roast-form-extract-text"
|
|
class="input-field w-full text-sm"
|
|
placeholder="Describe the coffee…"
|
|
onkeydown="if(event.key==='Enter'){event.preventDefault();extractFromText('roast-form','/api/v1/extract-roast',fillRoastForm)}"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onclick="extractFromText('roast-form', '/api/v1/extract-roast', fillRoastForm)"
|
|
class="rounded-md border border-amber-400 bg-amber-50 px-3 py-2 text-sm font-medium text-amber-800 transition hover:bg-amber-100"
|
|
>
|
|
Go
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="roast-form-extract-waiting" class="hidden flex items-center gap-3 text-sm text-amber-700">
|
|
<svg class="h-4 w-4 animate-spin text-amber-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
|
|
</svg>
|
|
Waiting for response…
|
|
</div>
|
|
<p id="roast-form-extract-error" class="hidden mt-2 text-sm text-red-600"></p>
|
|
</div>
|
|
{% endif %}
|
|
<div class="grid gap-4 sm:grid-cols-2">
|
|
<label class="flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">Roaster *</span>
|
|
<select name="roaster_id" required class="input-field">
|
|
<option value="">Select a roaster</option>
|
|
{% for roaster in roaster_options %}
|
|
<option value="{{ roaster.id }}">{{ roaster.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
<label class="flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">Roast Name *</span>
|
|
<input
|
|
type="text"
|
|
name="name"
|
|
required
|
|
class="input-field"
|
|
placeholder="Ethiopia Yirgacheffe"
|
|
/>
|
|
</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" />
|
|
</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" />
|
|
</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"
|
|
/>
|
|
</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" />
|
|
</label>
|
|
<label class="sm:col-span-2 flex flex-col gap-1 text-sm">
|
|
<span class="text-stone-700">Tasting Notes * (comma or newline separated)</span>
|
|
<textarea
|
|
name="tasting_notes"
|
|
rows="2"
|
|
required
|
|
class="input-field"
|
|
placeholder="Blueberry, Jasmine"
|
|
></textarea>
|
|
</label>
|
|
</div>
|
|
<div class="flex items-center justify-end gap-2">
|
|
<button
|
|
type="button"
|
|
class="rounded-md border border-amber-300 px-4 py-2 text-sm font-semibold text-stone-700 transition hover:border-amber-400 hover:text-stone-800"
|
|
data-on:click="($_showForm = false, $_form && $_form.reset())"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="rounded-md bg-amber-600 px-4 py-2 text-sm font-semibold text-amber-50 transition hover:bg-amber-500"
|
|
>
|
|
Save Roast
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
</section>
|
|
|
|
{% include "partials/roast_list.html" %} {% endblock %}
|