brewlog/templates/checkin.html

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

{% block head %}
{% if has_foursquare %}
<script>
function locateUser() {
  const root = document.getElementById('checkin-root');
  const emit = (name, detail) =>
    root.dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));

  if (!navigator.geolocation) {
    emit('location-error', { message: 'Geolocation not supported by your browser.' });
    return;
  }

  emit('location-start');

  navigator.geolocation.getCurrentPosition(
    (pos) => {
      emit('location-found', { lat: pos.coords.latitude, lng: pos.coords.longitude });
    },
    (err) => {
      if (err.code === 1) {
        emit('location-error', { message: 'Location access denied. Search by name instead.' });
      } else {
        emit('location-error', { message: 'Could not determine location. Search by name instead.' });
      }
    },
    { enableHighAccuracy: true, timeout: 15000 },
  );
}
</script>
{% endif %}
{% endblock %}

{% block content %}
<section
  id="checkin-root"
  data-signals:_step="1"
  data-signals:_cafe-id="''"
  data-signals:_cafe-name="''"
  data-signals:_cafe-city="''"
  data-signals:_cafe-country="''"
  data-signals:_cafe-lat="0"
  data-signals:_cafe-lng="0"
  data-signals:_cafe-website="''"
  data-signals:_cafe-search="''"
  data-signals:_roast-id="''"
  data-signals:_rating="0"
  data-signals:_error="''"
  data-signals:_submitting="false"
  data-signals:_locating="false"
  data-signals:_location-found="false"
  data-signals:_user-lat="0"
  data-signals:_user-lng="0"
  data-signals:_scan-waiting="false"
  data-signals:_scan-success="''"
  {% if has_foursquare %}
  data-on:location-found="$_locating = false; $_locationFound = true; $_userLat = evt.detail.lat; $_userLng = evt.detail.lng; @get('/api/v1/nearby-cafes?lat=' + evt.detail.lat + '&lng=' + evt.detail.lng + '&q=coffee', {responseOverrides: {selector: '#nearby-results', mode: 'replace'}})"
  data-on:location-error="$_locating = false; $_error = evt.detail.message"
  data-on:location-start="$_locating = true"
  {% endif %}
>
  <header class="flex flex-col gap-2">
    <h1 class="text-3xl font-semibold">Check In</h1>
    <p class="max-w-2xl text-sm text-stone-600">
      Record a cup of coffee at a cafe.
    </p>
  </header>

  <!-- Selected cafe summary (shown after selection) -->
  <div
    class="mt-4 rounded-lg border border-amber-300 bg-amber-100/80 px-4 py-3 shadow-sm flex items-center justify-between"
    data-show="$_cafeName"
    style="display: none"
  >
    <div class="flex items-center gap-2">
      <svg class="h-4 w-4 text-amber-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M9.69 18.933l.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 00.281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17 12.493 17 9A7 7 0 103 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 002.273 1.765 11.842 11.842 0 00.976.544l.062.029.018.008.006.003ZM10 11.25a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5Z" clip-rule="evenodd" />
      </svg>
      <span class="font-medium text-amber-800" data-text="$_cafeName"></span>
    </div>
    <button
      type="button"
      data-on:click="$_cafeId = ''; $_cafeName = ''; $_step = 1"
      class="text-xs text-stone-500 hover:text-stone-700"
    >Change</button>
  </div>

  <!-- Step indicators -->
  <div class="mt-4 flex gap-2 text-sm">
    <span
      class="rounded-full px-3 py-1 font-medium"
      data-class:bg-amber-600="$_step === 1"
      data-class:text-white="$_step === 1"
      data-class:bg-amber-200="$_step > 1"
      data-class:text-amber-800="$_step > 1"
    >1. Cafe</span>
    <span
      class="rounded-full px-3 py-1 font-medium"
      data-class:bg-amber-600="$_step === 2"
      data-class:text-white="$_step === 2"
      data-class:bg-amber-200="$_step > 2"
      data-class:text-amber-800="$_step > 2"
      data-class:bg-stone-200="$_step < 2"
      data-class:text-stone-500="$_step < 2"
    >2. Coffee</span>
    <span
      class="rounded-full px-3 py-1 font-medium"
      data-class:bg-amber-600="$_step === 3"
      data-class:text-white="$_step === 3"
      data-class:bg-stone-200="$_step < 3"
      data-class:text-stone-500="$_step < 3"
    >3. Rate</span>
  </div>

  <!-- Error display -->
  <p
    class="mt-3 text-sm text-red-600"
    data-show="$_error"
    style="display: none"
    data-text="$_error"
  ></p>

  <!-- Step 1: Cafe selection -->
  <div class="mt-4" data-show="$_step === 1" style="display: none">
    <div class="rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm">
      {% if has_foursquare %}
      <div class="flex flex-wrap items-center gap-3 mb-4">
        <button
          type="button"
          data-on:click="locateUser()"
          class="inline-flex items-center gap-2 rounded-md border border-amber-400 bg-amber-50 px-4 py-2.5 text-sm font-medium text-amber-800 transition hover:bg-amber-100"
          data-attr:disabled="$_locating || $_locationFound"
        >
          <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M9.69 18.933l.003.001C9.89 19.02 10 19 10 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741 5.741 0 00.281-.14c.186-.096.446-.24.757-.433.62-.384 1.445-.966 2.274-1.765C15.302 14.988 17 12.493 17 9A7 7 0 103 9c0 3.492 1.698 5.988 3.355 7.584a13.731 13.731 0 002.273 1.765 11.842 11.842 0 00.976.544l.062.029.018.008.006.003ZM10 11.25a2.25 2.25 0 100-4.5 2.25 2.25 0 000 4.5Z" clip-rule="evenodd" />
          </svg>
          <span data-text="$_locating ? 'Locating\u2026' : $_locationFound ? 'Location found' : 'Use My Location'">Use My Location</span>
        </button>
        <div data-show="$_locating" style="display: none">
          <svg class="h-5 w-5 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>
      </div>
      {% endif %}

      <input
        type="text"
        data-bind:_cafe-search
        class="input-field w-full text-sm"
        placeholder="Search for a cafe&hellip;"
        {% if has_foursquare %}
        data-on:input__debounce.350ms="$_locationFound && @get('/api/v1/nearby-cafes?lat=' + $_userLat + '&lng=' + $_userLng + '&q=' + encodeURIComponent($_cafeSearch), {responseOverrides: {selector: '#nearby-results', mode: 'replace'}})"
        {% endif %}
      />

      {% if has_foursquare %}
      <!-- Foursquare results (replaced by server fragment) -->
      <div id="nearby-results" class="hidden mt-3 max-h-60 overflow-y-auto rounded-lg border border-amber-200 bg-white"></div>
      {% endif %}

      <!-- Existing cafes -->
      {% if !cafe_options.is_empty() %}
      <div class="mt-3 max-h-60 overflow-y-auto rounded-lg border border-amber-200 bg-white">
        <h3 class="px-3 py-2 text-xs font-semibold text-stone-500 uppercase tracking-wide">Saved Cafes</h3>
        {% for cafe in cafe_options %}
        <button
          type="button"
          data-cafe-name="{{ cafe.label }}"
          class="w-full px-3 py-2 text-left text-sm hover:bg-amber-100 transition"
          data-show="!$_cafeSearch || el.dataset.cafeName.toLowerCase().includes($_cafeSearch.toLowerCase())"
          data-on:click="$_cafeId = '{{ cafe.id }}'; $_cafeName = el.dataset.cafeName; $_cafeCity = ''; $_cafeCountry = ''; $_cafeLat = 0; $_cafeLng = 0; $_cafeWebsite = ''; $_step = 2"
        >
          {{ cafe.label }}
        </button>
        {% endfor %}
      </div>
      {% endif %}
    </div>
  </div>

  <!-- Step 2: Roast identification -->
  <div data-show="$_step === 2" style="display: none">
    <div class="rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm">
      <h3 class="text-base font-semibold text-amber-700 mb-3">What are you drinking?</h3>

      {% if has_ai_extract %}
      <div data-show="!$_scanWaiting && !$_scanSuccess" style="display: none" class="mb-4">
        <p class="text-sm text-stone-600 mb-3">Scan a bag to identify the coffee, or select from your existing roasts below.</p>

        <input type="file" id="checkin-photo" accept="image/*" capture="environment" class="hidden"
          onchange="if(this.files[0]){const r=new FileReader();r.onload=()=>{document.getElementById('checkin-image').value=r.result;document.getElementById('checkin-scan-form').requestSubmit()};r.readAsDataURL(this.files[0]);this.value=''}" />

        <div id="scan-submit-result"></div>

        <form id="checkin-scan-form"
          data-on:submit="$_scanWaiting = true; $_error = ''; @post('/api/v1/scan', {contentType: 'form'})"
          data-on:datastar-fetch="if (evt.detail.type === 'finished') { $_scanWaiting = false; $_step = 3 } else if (evt.detail.type === 'error') { $_scanWaiting = false; $_error = 'Scan failed. Please try again.' }"
        >
          <input type="hidden" name="image" id="checkin-image" />
          <input type="hidden" name="prompt" id="checkin-prompt-hidden" />

          <div class="flex flex-wrap items-center gap-3">
            <button
              type="button"
              onclick="document.getElementById('checkin-photo').click()"
              class="inline-flex items-center gap-2 rounded-md border border-amber-400 bg-amber-50 px-4 py-2.5 text-sm font-medium text-amber-800 transition hover:bg-amber-100"
            >
              <svg class="h-5 w-5" 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>
              Scan Bag
            </button>
            <span class="text-xs text-stone-400">or</span>
            <div class="flex flex-1 min-w-[200px] gap-2">
              <input
                type="text"
                id="checkin-prompt-text"
                class="input-field w-full text-sm"
                placeholder="Describe the coffee&hellip;"
                onkeydown="if(event.key==='Enter'){event.preventDefault();document.getElementById('checkin-prompt-hidden').value=this.value;document.getElementById('checkin-scan-form').requestSubmit()}"
              />
              <button
                type="button"
                onclick="document.getElementById('checkin-prompt-hidden').value=document.getElementById('checkin-prompt-text').value;document.getElementById('checkin-scan-form').requestSubmit()"
                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>
        </form>
      </div>

      <div
        class="flex items-center gap-3 text-sm text-amber-700 mb-4"
        data-show="$_scanWaiting"
        style="display: none"
      >
        <svg class="h-5 w-5 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>
        Scanning &amp; saving&hellip;
      </div>

      <div
        class="mb-4 rounded-md bg-green-50 border border-green-200 px-3 py-2 text-sm text-green-800"
        data-show="$_scanSuccess"
        style="display: none"
      >
        Scanned: <span class="font-medium" data-text="$_scanSuccess"></span>
      </div>

      <div class="border-t border-amber-200 pt-3">
        <p class="text-xs text-stone-500 mb-2">Or select an existing roast:</p>
      {% else %}
      <div>
      {% endif %}
        <select
          class="input-field w-full text-sm"
          data-on:change="$_roastId = el.value; el.value && ($_step = 3)"
        >
          <option value="">Select a roast&hellip;</option>
          {% for roast in roast_options %}
          <option value="{{ roast.id }}">{{ roast.label }}</option>
          {% endfor %}
        </select>
      </div>
    </div>
  </div>

  <!-- Step 3: Rating + submit -->
  <div data-show="$_step === 3" style="display: none">
    <div class="rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm">
      <h3 class="text-base font-semibold text-amber-700 mb-3">How was it? (optional)</h3>
      <div class="flex gap-1 mb-6">
        {% for i in 1..=5 %}
        <button
          type="button"
          class="transition hover:text-amber-400"
          data-on:click="$_rating = {{ i }}"
          data-class:text-amber-500="$_rating >= {{ i }}"
          data-class:text-stone-300="$_rating < {{ i }}"
          aria-label="Rate {{ i }} stars"
        >
          <svg class="h-8 w-8" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M10.868 2.884c-.321-.772-1.415-.772-1.736 0l-1.83 4.401-4.753.381c-.833.067-1.171 1.107-.536 1.651l3.62 3.102-1.106 4.637c-.194.813.691 1.456 1.405 1.02L10 15.591l4.069 2.485c.713.436 1.598-.207 1.404-1.02l-1.106-4.637 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401Z" clip-rule="evenodd" />
          </svg>
        </button>
        {% endfor %}
      </div>

      <form
        data-on:submit="$_submitting = true; $_error = ''; @post('/api/v1/check-in', {contentType: 'form'})"
        data-on:datastar-fetch="if (evt.detail.type === 'finished') { window.location.href = '/' } else if (evt.detail.type === 'error') { $_submitting = false; $_error = 'Check-in failed. Please try again.' }"
      >
        <input type="hidden" name="cafe_id" data-attr:value="$_cafeId" />
        <input type="hidden" name="cafe_name" data-attr:value="$_cafeName" />
        <input type="hidden" name="cafe_city" data-attr:value="$_cafeCity" />
        <input type="hidden" name="cafe_country" data-attr:value="$_cafeCountry" />
        <input type="hidden" name="cafe_lat" data-attr:value="$_cafeLat" />
        <input type="hidden" name="cafe_lng" data-attr:value="$_cafeLng" />
        <input type="hidden" name="cafe_website" data-attr:value="$_cafeWebsite" />
        <input type="hidden" name="roast_id" data-attr:value="$_roastId" />
        <input type="hidden" name="rating" data-attr:value="$_rating" />
        <button
          type="submit"
          class="w-full rounded-md bg-amber-600 px-4 py-3 text-sm font-semibold text-amber-50 transition hover:bg-amber-500 disabled:opacity-50"
          data-attr:disabled="$_submitting"
        >
          Check In
        </button>
      </form>
    </div>
  </div>
</section>
{% endblock %}