brewlog/templates/roasts.html

{% extends "base.html" %} {% block title %}Brewlog · Roasts{% endblock %}

{% block head %}
{% if is_authenticated && has_ai_extract %}
<script>
  var _extracting = false;

  function triggerPhotoExtract(formId, endpoint) {
    var input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    input.capture = 'environment';
    input.onchange = function () {
      if (input.files.length === 0) return;
      var reader = new FileReader();
      reader.onload = function () {
        doExtract(formId, endpoint, { image: reader.result });
      };
      reader.readAsDataURL(input.files[0]);
    };
    input.click();
  }

  function extractFromText(formId, endpoint) {
    var input = document.getElementById(formId + '-extract-text');
    var prompt = input.value.trim();
    if (prompt.length < 3) return;
    doExtract(formId, endpoint, { prompt: prompt });
  }

  async function doExtract(formId, endpoint, body) {
    if (_extracting) return;
    _extracting = true;
    var errorEl = document.getElementById(formId + '-extract-error');
    var spinnerEl = document.getElementById(formId + '-extract-spinner');
    errorEl.classList.add('hidden');
    spinnerEl.classList.remove('hidden');

    try {
      var resp = await fetch(endpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        credentials: 'same-origin',
        body: JSON.stringify(body),
      });
      if (!resp.ok) {
        var errData = await resp.json().catch(function () { return {}; });
        throw new Error(errData.message || 'Server returned ' + resp.status);
      }
      var data = await resp.json();
      fillRoastForm(formId, data);
    } catch (e) {
      errorEl.textContent = 'Extraction failed: ' + e.message;
      errorEl.classList.remove('hidden');
    } finally {
      spinnerEl.classList.add('hidden');
      _extracting = false;
    }
  }

  function fillRoastForm(formId, data) {
    var form = document.getElementById(formId);
    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 class="flex flex-wrap items-center gap-3">
          <button
            type="button"
            onclick="triggerPhotoExtract('roast-form', '/api/v1/extract-roast')"
            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&hellip;"
              onkeydown="if(event.key==='Enter'){event.preventDefault();extractFromText('roast-form','/api/v1/extract-roast')}"
            />
            <button
              type="button"
              onclick="extractFromText('roast-form', '/api/v1/extract-roast')"
              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>
          <svg id="roast-form-extract-spinner" class="hidden 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>
        </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 %}