hyprcrd/relay/inc/routes/shopping.php

<?php
// Shopping-list routes:
//   POST   /api/shopping              (client)  upsert active card {uid, title, body, updated_at}
//   GET    /api/shopping              (client + session) read current state
//   POST   /api/shopping/check        (session)  toggle one line  {line, checked}
//   GET    /shopping                  (session)  phone-friendly UI
//
// Plaintext on purpose — shopping-list content is low-stakes and
// everything here is session- or client-auth'd. No per-tenant key
// dance like chat / collab-buckets. If that needs tightening later,
// it's a one-table migration.

if (!defined('RELAY_BOOTSTRAPPED')) { http_response_code(404); exit; }

$clientTenant = $clientTenant ?? authClient($db);
$tenant = $sessionTenant ?: $clientTenant;

function shoppingLoad(PDO $db, int $tenantId): ?array {
    $stmt = $db->prepare('SELECT card_uid, title, body, updated_at_client, updated_at_server FROM shopping_state WHERE tenant_id = :t');
    $stmt->execute(['t' => $tenantId]);
    $row = $stmt->fetch();
    return $row ?: null;
}

// ── POST /api/shopping ────────────────────────────────────────
// Client pushes the currently-active card's content. `updated_at`
// is the client's timestamp — used for lose-the-race checks.

if ($route === '/api/shopping' && $method === 'POST') {
    if (!$clientTenant) jsonResponse(['error' => 'unauthorized'], 401);
    $input = json_decode(file_get_contents('php://input'), true) ?: [];
    $uid   = trim((string)($input['card_uid'] ?? ''));
    $title = (string)($input['title'] ?? '');
    $body  = (string)($input['body'] ?? '');
    $clientTs = trim((string)($input['updated_at'] ?? '')) ?: date('Y-m-d H:i:s');
    if ($uid === '') jsonResponse(['error' => 'card_uid required'], 400);

    $existing = shoppingLoad($db, (int)$clientTenant['id']);
    // Skip the write when the client is pushing an older version of
    // the same card than what's already stored (phone toggled
    // meanwhile). Still return 200 so the client doesn't retry in a
    // loop — they just haven't pulled yet.
    if ($existing && $existing['card_uid'] === $uid
        && strcmp($existing['updated_at_server'], $clientTs) > 0) {
        jsonResponse([
            'ok' => true,
            'stored' => false,
            'reason' => 'server newer — pull first',
            'updated_at_server' => $existing['updated_at_server'],
        ]);
    }
    $now = date('Y-m-d H:i:s');
    $db->prepare('
        INSERT INTO shopping_state (tenant_id, card_uid, title, body, updated_at_client, updated_at_server)
        VALUES (:t, :u, :ti, :b, :c, :s)
        ON CONFLICT(tenant_id) DO UPDATE SET
            card_uid = excluded.card_uid,
            title = excluded.title,
            body = excluded.body,
            updated_at_client = excluded.updated_at_client,
            updated_at_server = excluded.updated_at_server
    ')->execute([
        't'  => $clientTenant['id'],
        'u'  => $uid,
        'ti' => $title,
        'b'  => $body,
        'c'  => $clientTs,
        's'  => $now,
    ]);
    jsonResponse(['ok' => true, 'stored' => true, 'updated_at_server' => $now]);
}

// ── GET /api/shopping ────────────────────────────────────────
// Both the client (to pull phone-made toggles back) and the
// session-auth'd phone UI poll this.

if ($route === '/api/shopping' && $method === 'GET') {
    if (!$tenant) jsonResponse(['error' => 'unauthorized'], 401);
    $state = shoppingLoad($db, (int)$tenant['id']);
    if (!$state) jsonResponse(['ok' => true, 'state' => null]);
    jsonResponse(['ok' => true, 'state' => $state]);
}

// ── POST /api/shopping/check ─────────────────────────────────
// Phone-side toggle. Body: { line: "- [ ] milk", checked: true }.
// We match the exact line once to keep merges simple; if the line
// isn't found (hyprcrd just rewrote it), the caller reloads and
// retries. Bumps updated_at_server so the next client pull sees
// the change.

if ($route === '/api/shopping/check' && $method === 'POST') {
    if (!$sessionTenant) jsonResponse(['error' => 'unauthorized'], 401);
    $input = json_decode(file_get_contents('php://input'), true) ?: [];
    $line  = (string)($input['line'] ?? '');
    $checked = !empty($input['checked']);
    if ($line === '') jsonResponse(['error' => 'line required'], 400);

    $state = shoppingLoad($db, (int)$sessionTenant['id']);
    if (!$state) jsonResponse(['error' => 'no active list'], 404);
    $body = $state['body'];
    $lines = preg_split("/\r\n|\n|\r/", $body);
    $hit = false;
    foreach ($lines as $i => $l) {
        if ($l !== $line) continue;
        $toggled = $checked
            ? preg_replace('/^(\s*-\s*)\[\s\]/', '$1[x]', $l, 1)
            : preg_replace('/^(\s*-\s*)\[[xX]\]/', '$1[ ]', $l, 1);
        if ($toggled === $l) continue; // not a checkbox line
        $lines[$i] = $toggled;
        $hit = true;
        break;
    }
    if (!$hit) jsonResponse(['error' => 'line not found (list may have been edited — reload)'], 409);

    $newBody = implode("\n", $lines);
    $now = date('Y-m-d H:i:s');
    $db->prepare('UPDATE shopping_state SET body = :b, updated_at_server = :s WHERE tenant_id = :t')
        ->execute(['b' => $newBody, 's' => $now, 't' => $sessionTenant['id']]);
    jsonResponse(['ok' => true, 'updated_at_server' => $now]);
}

// ── GET /shopping ────────────────────────────────────────────
// Phone UI. Simple static shell; the JS fetches /api/shopping and
// renders only unchecked items. Tapping one POSTs to /api/shopping/check.

if ($route === '/shopping' && $method === 'GET') {
    if (!$sessionTenant) {
        // Bounce through the relay's session-auth flow.
        header('Location: ' . dirname($_SERVER['SCRIPT_NAME']) . '/');
        exit;
    }
    header('Content-Type: text/html; charset=utf-8');
    $userLabel = htmlspecialchars($sessionTenant['username'], ENT_QUOTES);
    ?>
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="theme-color" content="#0f172a">
<title>Einkaufsliste</title>
<style>
  :root { color-scheme: dark; }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: #0f172a; color: #e2e8f0; font-family: system-ui, -apple-system, sans-serif; }
  header { position: sticky; top: 0; background: #0f172a; padding: 14px 16px; border-bottom: 1px solid #334155; display: flex; align-items: center; gap: 10px; }
  header h1 { margin: 0; font-size: 16px; font-weight: 600; flex: 1; }
  header .user { font-size: 12px; color: #64748b; }
  header .refresh { background: none; border: 1px solid #334155; color: #94a3b8; padding: 6px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; }
  main { padding: 12px; }
  .title { font-size: 13px; color: #94a3b8; margin: 0 0 12px; }
  .empty { text-align: center; padding: 40px 16px; color: #64748b; }
  ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
  li { background: #1e293b; border: 1px solid #334155; border-radius: 8px; padding: 14px 16px; font-size: 16px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform 0.12s, opacity 0.3s, background 0.12s; }
  li:active { transform: scale(0.98); background: #273446; }
  li.checked { opacity: 0.35; text-decoration: line-through; }
  .stale { font-size: 11px; color: #64748b; text-align: center; margin-top: 16px; }
  .err { background: #7f1d1d; color: #fecaca; padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; font-size: 13px; }
</style>
</head>
<body>
<header>
  <h1>Einkaufsliste</h1>
  <span class="user"><?= $userLabel ?></span>
  <button class="refresh" id="refresh">↻</button>
</header>
<main>
  <p class="title" id="title">…</p>
  <div id="err" class="err" style="display:none"></div>
  <ul id="items"></ul>
  <p class="stale" id="stale"></p>
</main>
<script>
(function(){
  const base = location.pathname.replace(/\/shopping\/?$/, '');
  const elTitle = document.getElementById('title');
  const elItems = document.getElementById('items');
  const elStale = document.getElementById('stale');
  const elErr = document.getElementById('err');
  const btnRefresh = document.getElementById('refresh');

  let lastServerTs = null;
  let busy = false;

  function showErr(msg) {
    if (!msg) { elErr.style.display = 'none'; elErr.textContent = ''; return; }
    elErr.textContent = msg; elErr.style.display = 'block';
  }

  function parseItems(body) {
    const lines = String(body || '').split(/\r\n|\n|\r/);
    const items = [];
    for (const l of lines) {
      const m = /^\s*-\s*\[([ xX])\]\s*(.*)$/.exec(l);
      if (!m) continue;
      const checked = m[1].toLowerCase() === 'x';
      if (!checked) items.push({ line: l, text: m[2] });
    }
    return items;
  }

  async function load() {
    try {
      const res = await fetch(base + '/api/shopping', { credentials: 'same-origin' });
      const data = await res.json();
      if (!data.ok || !data.state) {
        elTitle.textContent = '';
        elItems.innerHTML = '<div class="empty">keine aktive Einkaufsliste</div>';
        elStale.textContent = '';
        return;
      }
      const { title, body, updated_at_server } = data.state;
      lastServerTs = updated_at_server;
      elTitle.textContent = title || '';
      const items = parseItems(body);
      if (!items.length) {
        elItems.innerHTML = '<div class="empty">✓ alles erledigt</div>';
      } else {
        elItems.innerHTML = '';
        for (const it of items) {
          const li = document.createElement('li');
          li.textContent = it.text;
          li.dataset.line = it.line;
          li.addEventListener('click', () => check(li));
          elItems.appendChild(li);
        }
      }
      const ago = Math.round((Date.now() - Date.parse(updated_at_server.replace(' ','T') + 'Z')) / 1000);
      elStale.textContent = 'zuletzt synchronisiert: vor ' + (ago < 60 ? ago + 's' : Math.round(ago/60) + 'min');
      showErr('');
    } catch (e) {
      showErr('laden fehlgeschlagen: ' + e.message);
    }
  }

  async function check(li) {
    if (busy) return;
    busy = true;
    li.classList.add('checked');
    try {
      const res = await fetch(base + '/api/shopping/check', {
        method: 'POST',
        credentials: 'same-origin',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ line: li.dataset.line, checked: true }),
      });
      const data = await res.json();
      if (!data.ok) throw new Error(data.error || 'fehler');
      setTimeout(() => { busy = false; load(); }, 300);
    } catch (e) {
      busy = false;
      li.classList.remove('checked');
      showErr(e.message);
    }
  }

  btnRefresh.addEventListener('click', () => load());
  document.addEventListener('visibilitychange', () => { if (!document.hidden) load(); });
  load();
  setInterval(() => { if (!document.hidden && !busy) load(); }, 15000);
})();
</script>
</body>
</html>
    <?php
    exit;
}